chore(release): set package.json to 1.0.0 [skip ci]

# @frameless/ui 1.0.0 (2023-10-03)

### Features

* **ui:** create new shared ui package ([07e63e0](07e63e0))

packages/ui/CHANGELOG.md

@@ -0,0 +1,6 @@
+# @frameless/ui 1.0.0 (2023-10-03)
+
+
+### Features
+
+* **ui:** create new shared ui package ([07e63e0](https://github.com/frameless/strapi/commit/07e63e0ad9ea060bf970450c774c4fc37348fc68))

packages/ui/dist/bundle.css

@@ -0,0 +1,146 @@
+@charset "UTF-8";
+.utrecht-navigation__list {
+  --utrecht-navigation-list-display: flex;
+  --utrecht-navigation-list-mobile-inline-size: 100%;
+  display: var(--utrecht-navigation-list-display);
+  inline-size: var(--utrecht-navigation-list-inline-size);
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: var(--utrecht-navigation-list-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-list-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-list-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-list-padding-inline-start);
+}
+
+.utrecht-navigation__list--mobile {
+  --utrecht-navigation-list-display: block;
+  --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
+  --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
+  --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
+  --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
+  background-color: var(--utrecht-navigation-list-mobile-background-color);
+  block-size: 100%;
+  inline-size: var(--utrecht-navigation-list-mobile-inline-size);
+}
+@media (width >= 550px) {
+  .utrecht-navigation__list--mobile {
+    inline-size: 50%;
+  }
+}
+
+.utrecht-navigation__item {
+  flex: 1 1 auto;
+  padding-block-end: var(--utrecht-navigation-item-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-item-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-item-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-item-padding-inline-start);
+}
+
+.utrecht-navigation__item--mobile {
+  --utrecht-navigation-item-padding-block-start: var(--utrecht-navigation-item-mobile-padding-block-start);
+  --utrecht-navigation-item-padding-block-end: var(--utrecht-navigation-item-mobile-padding-block-end);
+  --utrecht-navigation-item-padding-inline-start: var(--utrecht-navigation-item-mobile-padding-inline-start);
+  --utrecht-navigation-item-padding-inline-end: var(--utrecht-navigation-item-mobile-padding-inline-end);
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.utrecht-navigation__item-icon::before {
+  color: var(--utrecht-navigation-item-icon-color);
+  content: "•";
+  font-size: inherit;
+  margin-inline-end: var(--utrecht-navigation-item-icon-margin-inline-end);
+}
+
+.utrecht-navigation__link {
+  --utrecht-link-text-decoration: none;
+  --utrecht-link-active-color: var(--utrecht-navigation-link-active-color);
+  --utrecht-link-hover-text-decoration-thickness: var(--utrecht-navigation-link-hover-decoration-thickness);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-hover-color);
+  --utrecht-link-color: var(--utrecht-navigation-link-color);
+  --utrecht-link-focus-text-decoration-thickness: var(--utrecht-navigation-link-focus-declaration-thickness);
+  --utrecht-link-visited-color: var(--utrecht-navigation-link-color);
+  background-color: var(--utrecht-navigation-link-background-color);
+  border-inline-end-color: var(--utrecht-navigation-link-border-color);
+  border-inline-end-style: solid;
+  border-inline-end-width: var(--utrecht-navigation-link-border-inline-end-width);
+  display: flex;
+  font-weight: var(--utrecht-navigation-link-font-weight);
+  justify-content: var(--utrecht-navigation-link-justify-content);
+  padding-block-end: var(--utrecht-navigation-link-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-link-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-link-padding-inline-start);
+  text-align: var(--utrecht-navigation-link-text-align);
+}
+
+.utrecht-navigation__link:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-hover-background-color);
+}
+
+.utrecht-navigation__link:focus {
+  --utrecht-link-focus-color: var(--utrecht-navigation-link-focus-color);
+  --utrecht-link-focus-background-color: var(--utrecht-color-yellow-80);
+}
+
+.utrecht-navigation__link:active:focus {
+  color: var(--utrecht-navigation-link-active-focus-color);
+}
+
+.utrecht-navigation__link--mobile {
+  --utrecht-navigation-link-padding-inline-start: var(--utrecht-navigation-link-mobile-padding-inline-start);
+  --utrecht-navigation-link-padding-inline-end: var(--utrecht-navigation-link-mobile-padding-inline-end);
+  --utrecht-navigation-link-padding-block-start: var(--utrecht-navigation-link-mobile-padding-block-start);
+  --utrecht-navigation-link-padding-block-end: var(--utrecht-navigation-link-mobile-padding-block-end);
+  --utrecht-navigation-link-border-inline-end-width: 0;
+  --utrecht-navigation-link-border-color: transparent;
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-background-color);
+  --utrecht-navigation-link-color: var(--utrecht-navigation-link-mobile-color);
+  --utrecht-navigation-link-justify-content: var(--utrecht-navigation-link-mobile-justify-content);
+  flex: 1 1 auto;
+  transition-duration: var(--utrecht-navigation-link-mobile-transition-duration);
+  transition-property: font-weight;
+  transition-timing-function: var(--utrecht-navigation-link-mobile-transition-timing-function);
+}
+
+.utrecht-navigation__link--mobile:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-hover-background-color);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-mobile-hover-color);
+  --utrecht-navigation-link-font-weight: var(--utrecht-navigation-mobile-hover-link-font-weight);
+}
+
+.utrecht-navigation__toggle-button {
+  display: flex;
+  inline-size: 100%;
+  justify-content: flex-end;
+}
+
+.utrecht-navigation {
+  border-block-start-color: var(--utrecht-navigation-border-block-start-color);
+  border-block-start-style: solid;
+  border-block-start-width: var(--utrecht-navigation-border-block-start-width);
+}
+
+.utrecht-navigation--mobile {
+  --utrecht-navigation-border-block-start-color: transparent;
+  --utrecht-navigation-border-block-start-width: 0;
+  align-items: flex-end;
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  justify-content: flex-end;
+}
+
+.utrecht-drawer {
+  background-color: rgba(0, 0, 0, 0.25);
+  display: block;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  position: absolute;
+  z-index: 1000;
+}

packages/ui/dist/rollup.config.d.ts

@@ -0,0 +1,7 @@
+import { RollupOptions } from 'rollup';
+export declare const outputGlobals: {
+    react: string;
+    'react-dom': string;
+};
+declare const config: RollupOptions;
+export default config;

packages/ui/dist/src/components/Drawer/index.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+    onDrawerClose: () => void;
+    open: boolean;
+    initialFocus?: string | false;
+}
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

packages/ui/dist/src/components/Navigation/NavigationIcon/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface NavigationIconProps {
+    name: string;
+    ariaHidden?: boolean;
+}
+export declare const NavigationIcon: import("react").ForwardRefExoticComponent<NavigationIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export {};

packages/ui/dist/src/components/Navigation/NavigationItem/index.d.ts

@@ -0,0 +1,8 @@
+import { LiHTMLAttributes } from 'react';
+interface NavigationItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    mobile?: boolean;
+}
+export declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLLIElement>>;
+export {};

packages/ui/dist/src/components/Navigation/NavigationLink/index.d.ts

@@ -0,0 +1,9 @@
+import { AnchorHTMLAttributes } from 'react';
+interface NavigationLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> {
+    placeholder?: boolean;
+    mobile?: boolean;
+}
+export declare const NavigationLink: import("react").ForwardRefExoticComponent<NavigationLinkProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

packages/ui/dist/src/components/Navigation/NavigationList/index.d.ts

@@ -0,0 +1,11 @@
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+type NavigationListType = {
+    title: string;
+    link: string;
+};
+interface NavigationListProps extends DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
+    list: NavigationListType[];
+    mobile?: boolean;
+}
+export declare const NavigationList: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<NavigationListProps>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+export {};

packages/ui/dist/src/components/Navigation/NavigationToggleButton/index.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+interface NavToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: 'hamburger' | 'close';
+    text?: string;
+}
+export declare const NavToggleButton: import("react").ForwardRefExoticComponent<NavToggleButtonProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

packages/ui/dist/src/components/Navigation/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+type NavigationListType = {
+    title: string;
+    link: string;
+};
+interface NavigationProps {
+    list: NavigationListType[];
+    mobileBreakpoint: number;
+    toggleButton?: {
+        openText?: string;
+        closeText?: string;
+    };
+}
+export declare const Navigation: import("react").ForwardRefExoticComponent<NavigationProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

packages/ui/dist/src/components/Portal/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PortalProps {
+    children?: React.ReactNode;
+    parent?: string;
+    className?: string;
+}
+export declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

packages/ui/dist/src/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Navigation';

packages/ui/dist/src/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useClickOutside';
+export * from './useKeyboardEvent';
+export * from './useScreenSize';

packages/ui/dist/src/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useClickOutside: (ref: RefObject<HTMLElement>, callback: () => void) => void;

packages/ui/dist/src/hooks/useKeyboardEvent.d.ts

@@ -0,0 +1 @@
+export declare const useKeyboardEvent: (key: string, callback: () => void) => void;

packages/ui/dist/src/hooks/useScreenSize.d.ts

@@ -0,0 +1 @@
+export declare const useScreenSize: () => number;

packages/ui/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './components';