@sito/ui 0.3.2 → 0.4.0

package/README.md

@@ -20,12 +20,82 @@ import "@sito/ui/theme.css";
 ## Public API
 
 ```ts
-import { Button, Dialog, DialogActions, IconButton, useDialog } from "@sito/ui";
+import {
+  Button,
+  BUTTON_COLOR_VARIANTS,
+  BUTTON_SIZES,
+  BUTTON_VARIANTS,
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  Dialog,
+  DialogActions,
+  DIALOG_INITIAL_FOCUS,
+  IconButton,
+  ICON_BUTTON_SIZES,
+  Spinner,
+  useContextMenu,
+  useDialog,
+} from "@sito/ui";
 ```
 
+The runtime constants `BUTTON_COLOR_VARIANTS`, `BUTTON_VARIANTS`,
+`BUTTON_SIZES`, `ICON_BUTTON_SIZES`, and `DIALOG_INITIAL_FOCUS` expose the
+supported values for public component contracts.
+
 Exported types include `ButtonProps`, `ButtonSize`, `IconButtonProps`,
 `DialogProps`, `DialogActionsProps`, `DialogState`, `IconButtonSize`, and
-`UseDialogReturn`.
+`SpinnerProps`, `UseDialogReturn`, plus the corresponding context-menu props and hook return
+types.
+
+## Spinner
+
+`Spinner` is the shared indeterminate-progress primitive used by `Button`
+loading states and standalone feedback. Provide `label` when the spinner owns
+the accessible loading announcement; omit it when surrounding content already
+provides that context.
+
+```tsx
+<Spinner label="Loading messages" />
+<Spinner />
+```
+
+## Context Menu
+
+`ContextMenu` owns viewport clamping, focus restoration, outside dismissal and
+keyboard navigation. Consumers own the menu's actions and wording:
+
+```tsx
+const menu = useContextMenu<string>();
+
+<button
+  type="button"
+  onContextMenu={(event) => {
+    event.preventDefault();
+    menu.openAt(event.clientX, event.clientY, "item-id");
+  }}
+>
+  Item
+</button>
+
+<ContextMenu
+  open={menu.open}
+  position={menu.position}
+  onClose={menu.close}
+  ariaLabel="Item actions"
+>
+  <ContextMenuItem onClick={menu.close}>Open</ContextMenuItem>
+  <ContextMenuSeparator />
+  <ContextMenuItem disabled>Delete</ContextMenuItem>
+</ContextMenu>;
+```
+
+Apps with an existing overlay or hotkey scope can keep dismissal in that layer
+with `closeOnEscape={false}`, `closeOnTab={false}` and
+`closeOnPointerDownOutside={false}`. The component forwards its menu element ref
+for adapters that need compatible positioning or containment checks. Those
+adapters may also use `clampToViewport={false}` when their existing state layer
+already owns clamping.
 
 ## Button Sizes
 

package/dist/components/Button/index.d.ts

@@ -1,3 +1,4 @@
 import { default as Button } from './Button';
+export { BUTTON_COLOR_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS } from './types';
 export type { ButtonBaseProps, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, } from './types';
 export { Button };

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,2 @@
+import { ContextMenuProps } from './types';
+export declare const ContextMenu: import('react').ForwardRefExoticComponent<ContextMenuProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/ContextMenu/ContextMenuItem.d.ts

@@ -0,0 +1,2 @@
+import { ContextMenuItemProps } from './types';
+export declare const ContextMenuItem: import('react').ForwardRefExoticComponent<ContextMenuItemProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/ContextMenu/ContextMenuSeparator.d.ts

@@ -0,0 +1,2 @@
+import { ContextMenuSeparatorProps } from './types';
+export declare const ContextMenuSeparator: ({ className, ...rest }: ContextMenuSeparatorProps) => import("react").JSX.Element;

package/dist/components/ContextMenu/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const CONTEXT_MENU_ITEM_SELECTOR = "[role=\"menuitem\"]:not([disabled])";
+export declare const CONTEXT_MENU_VIEWPORT_PADDING = 8;

package/dist/components/ContextMenu/index.d.ts

@@ -0,0 +1,4 @@
+export { ContextMenu } from './ContextMenu';
+export { ContextMenuItem } from './ContextMenuItem';
+export { ContextMenuSeparator } from './ContextMenuSeparator';
+export type { ContextMenuItemProps, ContextMenuPosition, ContextMenuProps, ContextMenuSeparatorProps, } from './types';

package/dist/components/ContextMenu/types.d.ts

@@ -0,0 +1,24 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type ContextMenuPosition = {
+    x: number;
+    y: number;
+};
+export type ContextMenuProps = {
+    open: boolean;
+    position: ContextMenuPosition;
+    onClose: () => void;
+    ariaLabel: string;
+    children?: ReactNode;
+    className?: string;
+    portalContainer?: Element | DocumentFragment | null;
+    viewportPadding?: number;
+    closeOnEscape?: boolean;
+    closeOnTab?: boolean;
+    closeOnPointerDownOutside?: boolean;
+    clampToViewport?: boolean;
+};
+export interface ContextMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    leading?: ReactNode;
+    shortcut?: ReactNode;
+}
+export type ContextMenuSeparatorProps = HTMLAttributes<HTMLDivElement>;

package/dist/components/Dialog/index.d.ts

@@ -1,3 +1,4 @@
 export { Dialog } from './Dialog';
 export { DialogActions } from './DialogActions';
+export { DIALOG_INITIAL_FOCUS } from './types';
 export type { DialogActionButtonProps, DialogActionsProps, DialogInitialFocus, DialogProps, DialogState, DialogSubmitHandler, } from './types';

package/dist/components/Dialog/types.d.ts

@@ -28,6 +28,9 @@ type DialogBaseProps = {
     mobileFullScreen?: boolean;
     containerClassName?: string;
     className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    closeButtonClassName?: string;
     closeLabel?: string;
     closeIcon?: ReactNode;
     showCloseButton?: boolean;

package/dist/components/Dialog/utils.d.ts

@@ -17,3 +17,19 @@ export declare const getFocusableElements: (element: HTMLElement) => HTMLElement
  * @returns Active HTMLElement, or null when unavailable.
  */
 export declare const getActiveElement: () => HTMLElement | null;
+/**
+ * Registers an interactive dialog as the topmost dialog.
+ * @param dialogStackId Stable internal identifier for the dialog instance.
+ */
+export declare const registerDialog: (dialogStackId: symbol) => void;
+/**
+ * Removes a dialog from the interactive dialog stack.
+ * @param dialogStackId Stable internal identifier for the dialog instance.
+ */
+export declare const unregisterDialog: (dialogStackId: symbol) => void;
+/**
+ * Checks whether a dialog is currently the topmost interactive dialog.
+ * @param dialogStackId Stable internal identifier for the dialog instance.
+ * @returns Whether the dialog is at the top of the stack.
+ */
+export declare const isTopmostDialog: (dialogStackId: symbol) => boolean;

package/dist/components/IconButton/index.d.ts

@@ -1,3 +1,4 @@
 import { default as IconButton } from './IconButton';
+export { ICON_BUTTON_SIZES } from './types';
 export type { IconButtonProps, IconButtonSize } from './types';
 export { IconButton };

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import { SpinnerProps } from './types';
+declare const Spinner: import('react').ForwardRefExoticComponent<SpinnerProps & import('react').RefAttributes<HTMLSpanElement>>;
+export default Spinner;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './types';
+export { Spinner };

package/dist/components/Spinner/types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, "aria-hidden" | "aria-label" | "children" | "role"> {
+    label?: string | undefined;
+}

package/dist/components/index.d.ts

@@ -1,6 +1,10 @@
 export type { ButtonBaseProps, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, } from './Button';
-export { Button } from './Button';
+export { Button, BUTTON_COLOR_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, } from './Button';
+export type { ContextMenuItemProps, ContextMenuPosition, ContextMenuProps, ContextMenuSeparatorProps, } from './ContextMenu';
+export { ContextMenu, ContextMenuItem, ContextMenuSeparator, } from './ContextMenu';
 export type { DialogActionButtonProps, DialogActionsProps, DialogInitialFocus, DialogProps, DialogState, DialogSubmitHandler, } from './Dialog';
-export { Dialog, DialogActions } from './Dialog';
+export { Dialog, DialogActions, DIALOG_INITIAL_FOCUS } from './Dialog';
 export type { IconButtonProps, IconButtonSize } from './IconButton';
-export { IconButton } from './IconButton';
+export { IconButton, ICON_BUTTON_SIZES } from './IconButton';
+export type { SpinnerProps } from './Spinner';
+export { Spinner } from './Spinner';

package/dist/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export type { UseDialogReturn } from './useDialog';
 export { useDialog } from './useDialog';
+export type { UseContextMenuReturn } from './useContextMenu';
+export { useContextMenu } from './useContextMenu';

package/dist/hooks/useContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseContextMenuReturn } from './types';
+export { useContextMenu } from './useContextMenu';

package/dist/hooks/useContextMenu/types.d.ts

@@ -0,0 +1,8 @@
+import { ContextMenuPosition } from '../../components/ContextMenu';
+export type UseContextMenuReturn<T> = {
+    open: boolean;
+    payload: T | null;
+    position: ContextMenuPosition;
+    openAt: (x: number, y: number, payload: T) => void;
+    close: () => void;
+};

package/dist/hooks/useContextMenu/useContextMenu.d.ts

@@ -0,0 +1,2 @@
+import { UseContextMenuReturn } from './types';
+export declare const useContextMenu: <T>() => UseContextMenuReturn<T>;

package/dist/main.d.ts

@@ -1,4 +1,4 @@
-export type { ButtonBaseProps, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, DialogActionButtonProps, DialogActionsProps, DialogInitialFocus, DialogProps, DialogState, DialogSubmitHandler, IconButtonProps, IconButtonSize, } from './components';
-export { Button, Dialog, DialogActions, IconButton } from './components';
-export type { UseDialogReturn } from './hooks';
-export { useDialog } from './hooks';
+export type { ButtonBaseProps, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ContextMenuItemProps, ContextMenuPosition, ContextMenuProps, ContextMenuSeparatorProps, DialogActionButtonProps, DialogActionsProps, DialogInitialFocus, DialogProps, DialogState, DialogSubmitHandler, IconButtonProps, IconButtonSize, SpinnerProps, } from './components';
+export { Button, BUTTON_COLOR_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, ContextMenu, ContextMenuItem, ContextMenuSeparator, Dialog, DialogActions, DIALOG_INITIAL_FOCUS, IconButton, ICON_BUTTON_SIZES, Spinner, } from './components';
+export type { UseContextMenuReturn, UseDialogReturn } from './hooks';
+export { useContextMenu, useDialog } from './hooks';

package/dist/styles.css

@@ -1,5 +1,6 @@
 :root {
   --sito-ui-color-text: #101010;
+  --sito-ui-color-text-muted: #667085;
   --sito-ui-color-surface: #ffffff;
   --sito-ui-color-border: #d9dde4;
 
@@ -56,35 +57,75 @@
   --sito-ui-size-icon-button-icon-md: 1.25rem;
   --sito-ui-size-icon-button-icon-lg: 1.5rem;
   --sito-ui-size-icon-button-icon: var(--sito-ui-size-icon-button-icon-md);
-  --sito-ui-size-button-spinner: 1em;
+  --sito-ui-size-spinner: 1em;
+  --sito-ui-size-button-spinner: var(--sito-ui-size-spinner);
+  --sito-ui-size-context-menu-min-width: 12rem;
+  --sito-ui-size-context-menu-max-width: 20rem;
+  --sito-ui-size-context-menu-item: 2rem;
+  --sito-ui-size-context-menu-leading: 1rem;
 
   --sito-ui-radius-pill: 1.5rem;
   --sito-ui-radius-round: 100%;
   --sito-ui-radius-dialog: 1rem;
+  --sito-ui-radius-context-menu: 0.5rem;
+  --sito-ui-radius-context-menu-item: 0.25rem;
 
   --sito-ui-border-width-thin: 1px;
-  --sito-ui-button-spinner-border-width: 2px;
+  --sito-ui-spinner-border-width: 2px;
+  --sito-ui-button-spinner-border-width: var(--sito-ui-spinner-border-width);
 
   --sito-ui-font-weight-semibold: 600;
   --sito-ui-font-size-button: 0.875rem;
   --sito-ui-font-size-dialog-title: 1.25rem;
+  --sito-ui-font-size-context-menu-shortcut: 0.75rem;
   --sito-ui-line-height-button: 1.25rem;
   --sito-ui-line-height-dialog-title: 1.75rem;
 
   --sito-ui-motion-duration-normal: 300ms;
-  --sito-ui-motion-duration-spin: 600ms;
-  --sito-ui-motion-duration-spin-reduced: 1500ms;
+  --sito-ui-motion-duration-spinner: 600ms;
+  --sito-ui-motion-duration-spinner-reduced: 1500ms;
+  --sito-ui-motion-duration-spin: var(--sito-ui-motion-duration-spinner);
+  --sito-ui-motion-duration-spin-reduced: var(
+    --sito-ui-motion-duration-spinner-reduced
+  );
   --sito-ui-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
 
   --sito-ui-shadow-dialog: 0 1rem 3rem rgb(16 24 40 / 18%);
+  --sito-ui-shadow-context-menu: 0 0.75rem 2rem rgb(16 24 40 / 24%);
   --sito-ui-z-index-dialog: 50;
+  --sito-ui-z-index-context-menu: 60;
 
   --sito-ui-button-disabled-opacity: 0.6;
+  --sito-ui-context-menu-disabled-opacity: 0.5;
   --sito-ui-button-active-scale: 0.97;
   --sito-ui-dialog-backdrop-background: rgb(16 24 40 / 20%);
   --sito-ui-dialog-backdrop-filter: blur(1rem);
 }
 
+.sito-ui-spinner {
+  display: inline-block;
+  width: var(--sito-ui-size-spinner);
+  height: var(--sito-ui-size-spinner);
+  flex: 0 0 auto;
+  border: var(--sito-ui-spinner-border-width) solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--sito-ui-radius-round);
+  animation: sito-ui-spinner-spin var(--sito-ui-motion-duration-spinner) linear
+    infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sito-ui-spinner {
+    animation-duration: var(--sito-ui-motion-duration-spinner-reduced);
+  }
+}
+
+@keyframes sito-ui-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .sito-ui-button {
   --sito-ui-button-text: var(--sito-ui-color-default-text);
   --sito-ui-button-light: var(--sito-ui-color-default-light);
@@ -236,14 +277,12 @@
 }
 
 .sito-ui-button__spinner {
-  width: var(--sito-ui-size-button-spinner);
-  height: var(--sito-ui-size-button-spinner);
-  flex: 0 0 auto;
-  border: var(--sito-ui-button-spinner-border-width) solid currentColor;
-  border-right-color: transparent;
-  border-radius: var(--sito-ui-radius-round);
-  animation: sito-ui-button-spin var(--sito-ui-motion-duration-spin) linear
-    infinite;
+  --sito-ui-size-spinner: var(--sito-ui-size-button-spinner);
+  --sito-ui-spinner-border-width: var(--sito-ui-button-spinner-border-width);
+  --sito-ui-motion-duration-spinner: var(--sito-ui-motion-duration-spin);
+  --sito-ui-motion-duration-spinner-reduced: var(
+    --sito-ui-motion-duration-spin-reduced
+  );
 }
 
 .sito-ui-button__loading-label {
@@ -261,18 +300,6 @@
   opacity: var(--sito-ui-button-disabled-opacity);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .sito-ui-button__spinner {
-    animation-duration: var(--sito-ui-motion-duration-spin-reduced);
-  }
-}
-
-@keyframes sito-ui-button-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .sito-ui-icon-button {
   --sito-ui-icon-button-container-size: var(--sito-ui-size-icon-button-md);
   --sito-ui-icon-button-icon-size: var(--sito-ui-size-icon-button-icon);
@@ -402,3 +429,73 @@
   }
 }
 
+.sito-ui-context-menu {
+  position: fixed;
+  z-index: var(--sito-ui-z-index-context-menu);
+  display: grid;
+  min-width: var(--sito-ui-size-context-menu-min-width);
+  max-width: var(--sito-ui-size-context-menu-max-width);
+  max-height: calc(100vh - var(--sito-ui-space-4));
+  overflow: auto;
+  padding: var(--sito-ui-space-1);
+  border: var(--sito-ui-border-width-thin) solid var(--sito-ui-color-border);
+  border-radius: var(--sito-ui-radius-context-menu);
+  color: var(--sito-ui-color-text);
+  background: var(--sito-ui-color-surface);
+  box-shadow: var(--sito-ui-shadow-context-menu);
+}
+
+.sito-ui-context-menu__item {
+  display: grid;
+  grid-template-columns:
+    var(--sito-ui-size-context-menu-leading)
+    minmax(0, 1fr)
+    auto;
+  align-items: center;
+  gap: var(--sito-ui-space-2);
+  width: 100%;
+  min-height: var(--sito-ui-size-context-menu-item);
+  padding: var(--sito-ui-space-1) var(--sito-ui-space-2);
+  border: 0;
+  border-radius: var(--sito-ui-radius-context-menu-item);
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: default;
+}
+
+.sito-ui-context-menu__item:hover:not(:disabled),
+.sito-ui-context-menu__item:focus-visible {
+  outline: none;
+  background: var(--sito-ui-color-primary-light);
+}
+
+.sito-ui-context-menu__item:disabled {
+  opacity: var(--sito-ui-context-menu-disabled-opacity);
+}
+
+.sito-ui-context-menu__leading {
+  display: grid;
+  place-items: center;
+  color: var(--sito-ui-color-text);
+}
+
+.sito-ui-context-menu__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sito-ui-context-menu__shortcut {
+  color: var(--sito-ui-color-text-muted);
+  font-size: var(--sito-ui-font-size-context-menu-shortcut);
+  white-space: nowrap;
+}
+
+.sito-ui-context-menu__separator {
+  height: var(--sito-ui-border-width-thin);
+  margin: var(--sito-ui-space-1);
+  background: var(--sito-ui-color-border);
+}
+

package/dist/theme.css

@@ -1,5 +1,6 @@
 :root {
   --sito-ui-color-text: #101010;
+  --sito-ui-color-text-muted: #667085;
   --sito-ui-color-surface: #ffffff;
   --sito-ui-color-border: #d9dde4;
 
@@ -56,30 +57,46 @@
   --sito-ui-size-icon-button-icon-md: 1.25rem;
   --sito-ui-size-icon-button-icon-lg: 1.5rem;
   --sito-ui-size-icon-button-icon: var(--sito-ui-size-icon-button-icon-md);
-  --sito-ui-size-button-spinner: 1em;
+  --sito-ui-size-spinner: 1em;
+  --sito-ui-size-button-spinner: var(--sito-ui-size-spinner);
+  --sito-ui-size-context-menu-min-width: 12rem;
+  --sito-ui-size-context-menu-max-width: 20rem;
+  --sito-ui-size-context-menu-item: 2rem;
+  --sito-ui-size-context-menu-leading: 1rem;
 
   --sito-ui-radius-pill: 1.5rem;
   --sito-ui-radius-round: 100%;
   --sito-ui-radius-dialog: 1rem;
+  --sito-ui-radius-context-menu: 0.5rem;
+  --sito-ui-radius-context-menu-item: 0.25rem;
 
   --sito-ui-border-width-thin: 1px;
-  --sito-ui-button-spinner-border-width: 2px;
+  --sito-ui-spinner-border-width: 2px;
+  --sito-ui-button-spinner-border-width: var(--sito-ui-spinner-border-width);
 
   --sito-ui-font-weight-semibold: 600;
   --sito-ui-font-size-button: 0.875rem;
   --sito-ui-font-size-dialog-title: 1.25rem;
+  --sito-ui-font-size-context-menu-shortcut: 0.75rem;
   --sito-ui-line-height-button: 1.25rem;
   --sito-ui-line-height-dialog-title: 1.75rem;
 
   --sito-ui-motion-duration-normal: 300ms;
-  --sito-ui-motion-duration-spin: 600ms;
-  --sito-ui-motion-duration-spin-reduced: 1500ms;
+  --sito-ui-motion-duration-spinner: 600ms;
+  --sito-ui-motion-duration-spinner-reduced: 1500ms;
+  --sito-ui-motion-duration-spin: var(--sito-ui-motion-duration-spinner);
+  --sito-ui-motion-duration-spin-reduced: var(
+    --sito-ui-motion-duration-spinner-reduced
+  );
   --sito-ui-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
 
   --sito-ui-shadow-dialog: 0 1rem 3rem rgb(16 24 40 / 18%);
+  --sito-ui-shadow-context-menu: 0 0.75rem 2rem rgb(16 24 40 / 24%);
   --sito-ui-z-index-dialog: 50;
+  --sito-ui-z-index-context-menu: 60;
 
   --sito-ui-button-disabled-opacity: 0.6;
+  --sito-ui-context-menu-disabled-opacity: 0.5;
   --sito-ui-button-active-scale: 0.97;
   --sito-ui-dialog-backdrop-background: rgb(16 24 40 / 20%);
   --sito-ui-dialog-backdrop-filter: blur(1rem);

package/dist/ui.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime"),n=require("react-dom");var r=(...e)=>e.filter(Boolean).join(` `),i={DEFAULT:`default`,PRIMARY:`primary`,SECONDARY:`secondary`,ERROR:`error`,WARNING:`warning`,SUCCESS:`success`,INFO:`info`},a={TEXT:`text`,SUBMIT:`submit`,OUTLINED:`outlined`},o={SM:`sm`,MD:`md`,LG:`lg`},s=(0,e.forwardRef)(function(e,n){let{color:s=i.DEFAULT,size:c=o.MD,type:l=`button`,variant:u=a.TEXT,loading:d=!1,loadingIndicator:f,loadingLabel:p=`Loading`,disabled:m,className:h,children:g,..._}=e,v=r(`sito-ui-button`,`sito-ui-button--${u}`,`sito-ui-button--${s}`,`sito-ui-button--${c}`,d&&`sito-ui-button--loading`,h),y=f===void 0?(0,t.jsx)(`span`,{className:`sito-ui-button__spinner`,"aria-hidden":`true`,"data-sito-ui":`button-spinner`}):f;return(0,t.jsxs)(`button`,{"data-sito-ui":`button`,..._,type:l,ref:n,disabled:m||d,"aria-busy":d||_[`aria-busy`],className:v,children:[d?(0,t.jsxs)(t.Fragment,{children:[y,(0,t.jsx)(`span`,{className:`sito-ui-button__loading-label`,children:p})]}):null,g]})}),c={SM:`sm`,MD:`md`,LG:`lg`},l=e=>{if(e!==void 0)return typeof e==`number`?`${e}px`:e},u=(0,e.forwardRef)(function(e,n){let{children:i,icon:a,iconClassName:o,type:u=`button`,variant:d=`text`,color:f=`default`,loading:p=!1,size:m=c.MD,iconSize:h,className:g,style:_,...v}=e,y=i!=null&&typeof i!=`boolean`,b=l(h),x=b===void 0?_:{..._,"--sito-ui-icon-button-icon-size":b},S=r(`sito-ui-icon-button`,`sito-ui-icon-button--${m}`,y&&`sito-ui-icon-button--with-content`,g);return(0,t.jsxs)(s,{...v,ref:n,type:u,variant:d,color:f,size:m,loading:p,"data-sito-ui":`icon-button`,className:S,style:x,children:[p?null:(0,t.jsx)(`span`,{className:r(`sito-ui-icon-button__icon`,o),"aria-hidden":`true`,children:a}),i]})}),d=`input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])`,f=`button[type="submit"]:not([disabled]), input[type="submit"]:not([disabled])`,p=[`a[href]`,`button:not([disabled])`,`textarea:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`[tabindex]:not([tabindex="-1"])`].join(`,`),m=0,h=null,g=()=>typeof document<`u`&&!!document.body,_=()=>{g()&&(m===0&&(h=document.body.style.overflow,document.body.style.overflow=`hidden`),m+=1)},v=()=>{!g()||m===0||(--m,m===0&&(document.body.style.overflow=h??``,h=null))},y=e=>Array.from(e.querySelectorAll(p)).filter(e=>e.getAttribute(`aria-disabled`)!==`true`),b=()=>typeof document>`u`?null:document.activeElement instanceof HTMLElement?document.activeElement:null,x=typeof window>`u`?e.useEffect:e.useLayoutEffect,S=i=>{let a=(0,e.useId)(),o=(0,e.useRef)(null),s=(0,e.useRef)(null),c=(0,e.useRef)(null),l=(0,e.useRef)(void 0),{dialogId:p,title:m,ariaLabel:h,children:g,onClose:S,initialFocus:C=`none`,closeOnBackdropClick:w=!1,closeOnEscape:T=!0,lockBodyScroll:E=!0,onSubmit:D,open:O=!1,mobileFullScreen:k=!1,containerClassName:A,className:j,closeLabel:M=`Close dialog`,closeIcon:N=`x`,showCloseButton:P=!0,portalContainer:F,exitDurationMs:I=0,onExitComplete:L}=i,[R,z]=(0,e.useState)(O),[B,V]=(0,e.useState)(!1),H=m?`${p??a}-title`:void 0,U=B?`closing`:`open`,W=O&&!B;(0,e.useEffect)(()=>{l.current=L},[L]);let G=(0,e.useCallback)(()=>{c.current!==null&&(window.clearTimeout(c.current),c.current=null)},[]),K=(0,e.useCallback)(()=>{z(!1),V(!1),l.current?.(),c.current=null},[]);x(()=>{if(O){G(),z(!0),V(!1);return}if(!R)return;let e=Math.max(0,I);if(e===0){G(),K();return}V(!0),G(),c.current=window.setTimeout(K,e)},[G,I,K,O,R]),(0,e.useEffect)(()=>()=>{G()},[G]);let q=(0,e.useCallback)(e=>{if(e.key===`Escape`&&W&&T){S();return}if(e.key!==`Tab`||!W)return;let t=o.current;if(!t)return;let n=y(t);if(n.length===0){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=b(),s=!a||!t.contains(a);if(e.shiftKey&&(s||a===r)){e.preventDefault(),i.focus();return}!e.shiftKey&&(s||a===i)&&(e.preventDefault(),r.focus())},[T,W,S]);(0,e.useEffect)(()=>{if(!(!W||typeof window>`u`))return window.addEventListener(`keydown`,q),()=>{window.removeEventListener(`keydown`,q)}},[q,W]),x(()=>{if(O)return s.current=b(),()=>{s.current?.isConnected&&s.current.focus(),s.current=null}},[O]),x(()=>{if(!O)return;let e=o.current;if(e){if(C===`first-input`){let t=e.querySelector(d);if(t){t.focus();return}}if(C===`submit`){let t=e.querySelector(f);if(t){t.focus();return}}e.focus()}},[C,O]),(0,e.useEffect)(()=>{if(!(!R||!E))return _(),()=>{v()}},[E,R]);let J=(0,e.useCallback)(e=>{W&&w&&e.target===e.currentTarget&&S()},[w,W,S]),Y=(0,e.useCallback)(e=>{e.preventDefault(),D?.(e)},[D]);if(!R||typeof document>`u`)return null;let X=D?(0,t.jsx)(`form`,{onSubmit:Y,children:g}):g,Z=typeof N==`string`?(0,t.jsx)(`span`,{"aria-hidden":`true`,children:N}):N;return(0,n.createPortal)((0,t.jsx)(`div`,{id:p?`backdrop-${p}`:void 0,"data-sito-ui":`dialog-backdrop`,"data-state":U,onClick:J,className:r(`sito-ui-dialog-backdrop`,`sito-ui-dialog-backdrop--${U}`,A),children:(0,t.jsxs)(`div`,{id:p,ref:o,role:`dialog`,"aria-modal":`true`,"aria-label":m?void 0:h,"aria-labelledby":H,tabIndex:-1,"data-sito-ui":`dialog`,"data-state":U,className:r(`sito-ui-dialog`,`sito-ui-dialog--${U}`,k&&`sito-ui-dialog--mobile-full-screen`,j),children:[(0,t.jsxs)(`div`,{className:`sito-ui-dialog__header`,children:[m?(0,t.jsx)(`h3`,{id:H,className:`sito-ui-dialog__title`,children:m}):null,P?(0,t.jsx)(u,{icon:Z,disabled:!W,"aria-disabled":!W,onClick:S,variant:`text`,color:`error`,className:`sito-ui-dialog__close`,"aria-label":M}):null]}),X]})}),F??document.body)},C=e=>{let{primaryText:n,cancelText:i,onPrimaryClick:a,onCancel:o,isLoading:c=!1,loadingIndicator:l,disabled:u=!1,primaryType:d=`submit`,containerClassName:f,primaryClassName:p,cancelClassName:m,alignEnd:h=!1,primaryName:g,primaryAriaLabel:_,cancelName:v,cancelAriaLabel:y,extraActions:b=[]}=e;return(0,t.jsxs)(`div`,{"data-sito-ui":`dialog-actions`,className:r(`sito-ui-dialog-actions`,h&&`sito-ui-dialog-actions--end`,f),children:[(0,t.jsx)(s,{type:d,color:`primary`,variant:`submit`,className:p,disabled:u,loading:c,loadingIndicator:l,onClick:a,name:g,"aria-label":_,children:n}),b.map(({id:e,...n})=>(0,t.jsx)(s,{...n},e)),(0,t.jsx)(s,{type:`button`,variant:`outlined`,className:m,disabled:u||c,onClick:o,name:v,"aria-label":y,children:i})]})},w=(t=!1)=>{let[n,r]=(0,e.useState)(t);return{open:n,setOpen:r,handleClose:()=>r(!1),handleOpen:()=>r(!0)}};exports.Button=s,exports.Dialog=S,exports.DialogActions=C,exports.IconButton=u,exports.useDialog=w;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime"),n=require("react-dom");var r=(...e)=>e.filter(Boolean).join(` `),i=(0,e.forwardRef)(function(e,n){let{className:i,label:a,...o}=e,s=a!==void 0;return(0,t.jsx)(`span`,{"data-sito-ui":`spinner`,...o,ref:n,"aria-hidden":!s||void 0,"aria-label":a,role:s?`status`:void 0,className:r(`sito-ui-spinner`,i)})}),a={DEFAULT:`default`,PRIMARY:`primary`,SECONDARY:`secondary`,ERROR:`error`,WARNING:`warning`,SUCCESS:`success`,INFO:`info`},o={TEXT:`text`,SUBMIT:`submit`,OUTLINED:`outlined`},s={SM:`sm`,MD:`md`,LG:`lg`},c=(0,e.forwardRef)(function(e,n){let{color:c=a.DEFAULT,size:l=s.MD,type:u=`button`,variant:d=o.TEXT,loading:f=!1,loadingIndicator:p,loadingLabel:m=`Loading`,disabled:h,className:g,children:_,...v}=e,y=r(`sito-ui-button`,`sito-ui-button--${d}`,`sito-ui-button--${c}`,`sito-ui-button--${l}`,f&&`sito-ui-button--loading`,g),b=p===void 0?(0,t.jsx)(i,{className:`sito-ui-button__spinner`,"data-sito-ui":`button-spinner`}):p;return(0,t.jsxs)(`button`,{"data-sito-ui":`button`,...v,type:u,ref:n,disabled:h||f,"aria-busy":f||v[`aria-busy`],className:y,children:[f?(0,t.jsxs)(t.Fragment,{children:[b,(0,t.jsx)(`span`,{className:`sito-ui-button__loading-label`,children:m})]}):null,_]})}),l=typeof window>`u`?e.useEffect:e.useLayoutEffect,u=(0,e.forwardRef)(function({open:i,position:a,onClose:o,ariaLabel:s,children:c,className:u,portalContainer:d,viewportPadding:f=8,closeOnEscape:p=!0,closeOnTab:m=!0,closeOnPointerDownOutside:h=!0,clampToViewport:g=!0},_){let v=(0,e.useRef)(null),y=(0,e.useRef)(null),b=(0,e.useCallback)(e=>{v.current=e,typeof _==`function`?_(e):_&&(_.current=e)},[_]);return l(()=>{if(i)return y.current=document.activeElement instanceof HTMLElement?document.activeElement:null,(v.current?.querySelector(`[role="menuitem"]:not([disabled])`)??v.current)?.focus(),()=>{y.current?.isConnected&&y.current.focus(),y.current=null}},[i]),l(()=>{let e=v.current;if(!i||!e||!g)return;let t=window.innerWidth-e.offsetWidth-f,n=window.innerHeight-e.offsetHeight-f,r=Math.max(f,Math.min(a.x,t)),o=Math.max(f,Math.min(a.y,n));e.style.left=`${r}px`,e.style.top=`${o}px`},[g,i,a.x,a.y,f]),(0,e.useEffect)(()=>{if(!i||!h)return;let e=e=>{let t=e.target;(!(t instanceof Node)||!v.current?.contains(t))&&o()};return document.addEventListener(`pointerdown`,e),()=>{document.removeEventListener(`pointerdown`,e)}},[h,o,i]),!i||typeof document>`u`?null:(0,n.createPortal)((0,t.jsx)(`div`,{ref:b,role:`menu`,tabIndex:-1,"aria-label":s,"aria-orientation":`vertical`,"data-sito-ui":`context-menu`,"data-state":`open`,className:r(`sito-ui-context-menu`,u),style:{left:a.x,top:a.y},onContextMenu:e=>e.preventDefault(),onKeyDown:e=>{let t=e.key===`Escape`&&p,n=e.key===`Tab`&&m;if(t||n){e.preventDefault(),e.stopPropagation(),o();return}let r=Array.from(v.current?.querySelectorAll(`[role="menuitem"]:not([disabled])`)??[]);if(r.length===0)return;let i=document.activeElement,a=i instanceof HTMLElement?r.indexOf(i):-1,s=null;e.key===`ArrowDown`?s=(a+1+r.length)%r.length:e.key===`ArrowUp`?s=(a-1+r.length)%r.length:e.key===`Home`?s=0:e.key===`End`&&(s=r.length-1),s!==null&&(e.preventDefault(),r[s]?.focus())},children:c}),d??document.body)}),d=(0,e.forwardRef)(function({leading:e,shortcut:n,children:i,className:a,disabled:o,...s},c){return(0,t.jsxs)(`button`,{...s,ref:c,type:`button`,role:`menuitem`,tabIndex:-1,disabled:o,"data-sito-ui":`context-menu-item`,className:r(`sito-ui-context-menu__item`,a),children:[(0,t.jsx)(`span`,{className:`sito-ui-context-menu__leading`,"aria-hidden":`true`,children:e}),(0,t.jsx)(`span`,{className:`sito-ui-context-menu__label`,children:i}),n?(0,t.jsx)(`span`,{className:`sito-ui-context-menu__shortcut`,"aria-hidden":`true`,children:n}):null]})}),f=({className:e,...n})=>(0,t.jsx)(`div`,{...n,role:`separator`,"data-sito-ui":`context-menu-separator`,className:r(`sito-ui-context-menu__separator`,e)}),p={SM:`sm`,MD:`md`,LG:`lg`},m=e=>{if(e!==void 0)return typeof e==`number`?`${e}px`:e},h=(0,e.forwardRef)(function(e,n){let{children:i,icon:a,iconClassName:o,type:s=`button`,variant:l=`text`,color:u=`default`,loading:d=!1,size:f=p.MD,iconSize:h,className:g,style:_,...v}=e,y=i!=null&&typeof i!=`boolean`,b=m(h),x=b===void 0?_:{..._,"--sito-ui-icon-button-icon-size":b},S=r(`sito-ui-icon-button`,`sito-ui-icon-button--${f}`,y&&`sito-ui-icon-button--with-content`,g);return(0,t.jsxs)(c,{...v,ref:n,type:s,variant:l,color:u,size:f,loading:d,"data-sito-ui":`icon-button`,className:S,style:x,children:[d?null:(0,t.jsx)(`span`,{className:r(`sito-ui-icon-button__icon`,o),"aria-hidden":`true`,children:a}),i]})}),g=`input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])`,_=`button[type="submit"]:not([disabled]), input[type="submit"]:not([disabled])`,v=[`a[href]`,`button:not([disabled])`,`textarea:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`[tabindex]:not([tabindex="-1"])`].join(`,`),y=0,b=null,x=[],S=()=>typeof document<`u`&&!!document.body,C=()=>{S()&&(y===0&&(b=document.body.style.overflow,document.body.style.overflow=`hidden`),y+=1)},ee=()=>{!S()||y===0||(--y,y===0&&(document.body.style.overflow=b??``,b=null))},te=e=>Array.from(e.querySelectorAll(v)).filter(e=>e.getAttribute(`aria-disabled`)!==`true`),w=()=>typeof document>`u`?null:document.activeElement instanceof HTMLElement?document.activeElement:null,T=e=>{let t=x.indexOf(e);t>=0&&x.splice(t,1),x.push(e)},E=e=>{let t=x.indexOf(e);t>=0&&x.splice(t,1)},D=e=>x[x.length-1]===e,O=typeof window>`u`?e.useEffect:e.useLayoutEffect,k=i=>{let a=(0,e.useId)(),o=(0,e.useRef)(Symbol(`sito-ui-dialog`)),s=(0,e.useRef)(null),c=(0,e.useRef)(null),l=(0,e.useRef)(null),u=(0,e.useRef)(void 0),{dialogId:d,title:f,ariaLabel:p,children:m,onClose:v,initialFocus:y=`none`,closeOnBackdropClick:b=!1,closeOnEscape:x=!0,lockBodyScroll:S=!0,onSubmit:k,open:A=!1,mobileFullScreen:j=!1,containerClassName:M,className:N,headerClassName:P,titleClassName:F,closeButtonClassName:I,closeLabel:L=`Close dialog`,closeIcon:R=`x`,showCloseButton:z=!0,portalContainer:B,exitDurationMs:V=0,onExitComplete:H}=i,[U,W]=(0,e.useState)(A),[G,K]=(0,e.useState)(!1),q=f?`${d??a}-title`:void 0,J=G?`closing`:`open`,Y=A&&!G,X=o.current;(0,e.useEffect)(()=>{u.current=H},[H]);let Z=(0,e.useCallback)(()=>{l.current!==null&&(window.clearTimeout(l.current),l.current=null)},[]),Q=(0,e.useCallback)(()=>{W(!1),K(!1),u.current?.(),l.current=null},[]);O(()=>{if(A){Z(),W(!0),K(!1);return}if(!U)return;let e=Math.max(0,V);if(e===0){Z(),Q();return}K(!0),Z(),l.current=window.setTimeout(Q,e)},[Z,V,Q,A,U]),(0,e.useEffect)(()=>()=>{Z()},[Z]);let $=(0,e.useCallback)(e=>{if(!D(X))return;if(e.key===`Escape`&&Y&&x){v();return}if(e.key!==`Tab`||!Y)return;let t=s.current;if(!t)return;let n=te(t);if(n.length===0){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=w(),o=!a||!t.contains(a);if(e.shiftKey&&(o||a===r)){e.preventDefault(),i.focus();return}!e.shiftKey&&(o||a===i)&&(e.preventDefault(),r.focus())},[x,X,Y,v]);(0,e.useEffect)(()=>{if(!(!Y||typeof window>`u`))return window.addEventListener(`keydown`,$),()=>{window.removeEventListener(`keydown`,$)}},[$,Y]),O(()=>{if(A)return c.current=w(),T(X),()=>{let e=D(X);E(X),e&&c.current?.isConnected&&c.current.focus(),c.current=null}},[X,A]),O(()=>{if(!A)return;let e=s.current;if(e){if(y===`first-input`){let t=e.querySelector(g);if(t){t.focus();return}}if(y===`submit`){let t=e.querySelector(_);if(t){t.focus();return}}e.focus()}},[y,A]),(0,e.useEffect)(()=>{if(!(!U||!S))return C(),()=>{ee()}},[S,U]);let ne=(0,e.useCallback)(e=>{D(X)&&Y&&b&&e.target===e.currentTarget&&v()},[b,X,Y,v]),re=(0,e.useCallback)(e=>{e.preventDefault(),k?.(e)},[k]);if(!U||typeof document>`u`)return null;let ie=k?(0,t.jsx)(`form`,{onSubmit:re,children:m}):m,ae=typeof R==`string`?(0,t.jsx)(`span`,{"aria-hidden":`true`,children:R}):R;return(0,n.createPortal)((0,t.jsx)(`div`,{id:d?`backdrop-${d}`:void 0,"data-sito-ui":`dialog-backdrop`,"data-state":J,onClick:ne,className:r(`sito-ui-dialog-backdrop`,`sito-ui-dialog-backdrop--${J}`,M),children:(0,t.jsxs)(`div`,{id:d,ref:s,role:`dialog`,"aria-modal":`true`,"aria-label":f?void 0:p,"aria-labelledby":q,tabIndex:-1,"data-sito-ui":`dialog`,"data-state":J,className:r(`sito-ui-dialog`,`sito-ui-dialog--${J}`,j&&`sito-ui-dialog--mobile-full-screen`,N),children:[(0,t.jsxs)(`div`,{className:r(`sito-ui-dialog__header`,P),children:[f?(0,t.jsx)(`h3`,{id:q,className:r(`sito-ui-dialog__title`,F),children:f}):null,z?(0,t.jsx)(h,{icon:ae,disabled:!Y,"aria-disabled":!Y,onClick:v,variant:`text`,color:`error`,className:r(`sito-ui-dialog__close`,I),"aria-label":L}):null]}),ie]})}),B??document.body)},A=e=>{let{primaryText:n,cancelText:i,onPrimaryClick:a,onCancel:o,isLoading:s=!1,loadingIndicator:l,disabled:u=!1,primaryType:d=`submit`,containerClassName:f,primaryClassName:p,cancelClassName:m,alignEnd:h=!1,primaryName:g,primaryAriaLabel:_,cancelName:v,cancelAriaLabel:y,extraActions:b=[]}=e;return(0,t.jsxs)(`div`,{"data-sito-ui":`dialog-actions`,className:r(`sito-ui-dialog-actions`,h&&`sito-ui-dialog-actions--end`,f),children:[(0,t.jsx)(c,{type:d,color:`primary`,variant:`submit`,className:p,disabled:u,loading:s,loadingIndicator:l,onClick:a,name:g,"aria-label":_,children:n}),b.map(({id:e,...n})=>(0,t.jsx)(c,{...n},e)),(0,t.jsx)(c,{type:`button`,variant:`outlined`,className:m,disabled:u||s,onClick:o,name:v,"aria-label":y,children:i})]})},j={NONE:`none`,FIRST_INPUT:`first-input`,SUBMIT:`submit`},M=(t=!1)=>{let[n,r]=(0,e.useState)(t);return{open:n,setOpen:r,handleClose:()=>r(!1),handleOpen:()=>r(!0)}},N={x:0,y:0},P=()=>{let[t,n]=(0,e.useState)(!1),[r,i]=(0,e.useState)(null),[a,o]=(0,e.useState)(N);return{open:t,payload:r,position:a,openAt:(0,e.useCallback)((e,t,r)=>{i(r),o({x:e,y:t}),n(!0)},[]),close:(0,e.useCallback)(()=>n(!1),[])}};exports.BUTTON_COLOR_VARIANTS=a,exports.BUTTON_SIZES=s,exports.BUTTON_VARIANTS=o,exports.Button=c,exports.ContextMenu=u,exports.ContextMenuItem=d,exports.ContextMenuSeparator=f,exports.DIALOG_INITIAL_FOCUS=j,exports.Dialog=k,exports.DialogActions=A,exports.ICON_BUTTON_SIZES=p,exports.IconButton=h,exports.Spinner=i,exports.useContextMenu=P,exports.useDialog=M;

package/dist/ui.js

@@ -2,7 +2,18 @@ import { forwardRef as e, useCallback as t, useEffect as n, useId as r, useLayou
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import { createPortal as u } from "react-dom";
 //#region src/utils/classNames.ts
-var d = (...e) => e.filter(Boolean).join(" "), f = {
+var d = (...e) => e.filter(Boolean).join(" "), f = e(function(e, t) {
+	let { className: n, label: r, ...i } = e, a = r !== void 0;
+	return /* @__PURE__ */ c("span", {
+		"data-sito-ui": "spinner",
+		...i,
+		ref: t,
+		"aria-hidden": !a || void 0,
+		"aria-label": r,
+		role: a ? "status" : void 0,
+		className: d("sito-ui-spinner", n)
+	});
+}), p = {
 	DEFAULT: "default",
 	PRIMARY: "primary",
 	SECONDARY: "secondary",
@@ -10,46 +21,136 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 	WARNING: "warning",
 	SUCCESS: "success",
 	INFO: "info"
-}, p = {
+}, m = {
 	TEXT: "text",
 	SUBMIT: "submit",
 	OUTLINED: "outlined"
-}, m = {
+}, h = {
 	SM: "sm",
 	MD: "md",
 	LG: "lg"
-}, h = e(function(e, t) {
-	let { color: n = f.DEFAULT, size: r = m.MD, type: i = "button", variant: a = p.TEXT, loading: o = !1, loadingIndicator: u, loadingLabel: h = "Loading", disabled: g, className: _, children: v, ...y } = e, b = d("sito-ui-button", `sito-ui-button--${a}`, `sito-ui-button--${n}`, `sito-ui-button--${r}`, o && "sito-ui-button--loading", _), x = u === void 0 ? /* @__PURE__ */ c("span", {
+}, g = e(function(e, t) {
+	let { color: n = p.DEFAULT, size: r = h.MD, type: i = "button", variant: a = m.TEXT, loading: o = !1, loadingIndicator: u, loadingLabel: g = "Loading", disabled: _, className: v, children: y, ...b } = e, x = d("sito-ui-button", `sito-ui-button--${a}`, `sito-ui-button--${n}`, `sito-ui-button--${r}`, o && "sito-ui-button--loading", v), S = u === void 0 ? /* @__PURE__ */ c(f, {
 		className: "sito-ui-button__spinner",
-		"aria-hidden": "true",
 		"data-sito-ui": "button-spinner"
 	}) : u;
 	return /* @__PURE__ */ l("button", {
 		"data-sito-ui": "button",
-		...y,
+		...b,
 		type: i,
 		ref: t,
-		disabled: g || o,
-		"aria-busy": o || y["aria-busy"],
-		className: b,
-		children: [o ? /* @__PURE__ */ l(s, { children: [x, /* @__PURE__ */ c("span", {
+		disabled: _ || o,
+		"aria-busy": o || b["aria-busy"],
+		className: x,
+		children: [o ? /* @__PURE__ */ l(s, { children: [S, /* @__PURE__ */ c("span", {
 			className: "sito-ui-button__loading-label",
-			children: h
-		})] }) : null, v]
+			children: g
+		})] }) : null, y]
+	});
+}), _ = typeof window > "u" ? n : i, v = e(function({ open: e, position: r, onClose: i, ariaLabel: o, children: s, className: l, portalContainer: f, viewportPadding: p = 8, closeOnEscape: m = !0, closeOnTab: h = !0, closeOnPointerDownOutside: g = !0, clampToViewport: v = !0 }, y) {
+	let b = a(null), x = a(null), S = t((e) => {
+		b.current = e, typeof y == "function" ? y(e) : y && (y.current = e);
+	}, [y]);
+	return _(() => {
+		if (e) return x.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, (b.current?.querySelector("[role=\"menuitem\"]:not([disabled])") ?? b.current)?.focus(), () => {
+			x.current?.isConnected && x.current.focus(), x.current = null;
+		};
+	}, [e]), _(() => {
+		let t = b.current;
+		if (!e || !t || !v) return;
+		let n = window.innerWidth - t.offsetWidth - p, i = window.innerHeight - t.offsetHeight - p, a = Math.max(p, Math.min(r.x, n)), o = Math.max(p, Math.min(r.y, i));
+		t.style.left = `${a}px`, t.style.top = `${o}px`;
+	}, [
+		v,
+		e,
+		r.x,
+		r.y,
+		p
+	]), n(() => {
+		if (!e || !g) return;
+		let t = (e) => {
+			let t = e.target;
+			(!(t instanceof Node) || !b.current?.contains(t)) && i();
+		};
+		return document.addEventListener("pointerdown", t), () => {
+			document.removeEventListener("pointerdown", t);
+		};
+	}, [
+		g,
+		i,
+		e
+	]), !e || typeof document > "u" ? null : u(/* @__PURE__ */ c("div", {
+		ref: S,
+		role: "menu",
+		tabIndex: -1,
+		"aria-label": o,
+		"aria-orientation": "vertical",
+		"data-sito-ui": "context-menu",
+		"data-state": "open",
+		className: d("sito-ui-context-menu", l),
+		style: {
+			left: r.x,
+			top: r.y
+		},
+		onContextMenu: (e) => e.preventDefault(),
+		onKeyDown: (e) => {
+			let t = e.key === "Escape" && m, n = e.key === "Tab" && h;
+			if (t || n) {
+				e.preventDefault(), e.stopPropagation(), i();
+				return;
+			}
+			let r = Array.from(b.current?.querySelectorAll("[role=\"menuitem\"]:not([disabled])") ?? []);
+			if (r.length === 0) return;
+			let a = document.activeElement, o = a instanceof HTMLElement ? r.indexOf(a) : -1, s = null;
+			e.key === "ArrowDown" ? s = (o + 1 + r.length) % r.length : e.key === "ArrowUp" ? s = (o - 1 + r.length) % r.length : e.key === "Home" ? s = 0 : e.key === "End" && (s = r.length - 1), s !== null && (e.preventDefault(), r[s]?.focus());
+		},
+		children: s
+	}), f ?? document.body);
+}), y = e(function({ leading: e, shortcut: t, children: n, className: r, disabled: i, ...a }, o) {
+	return /* @__PURE__ */ l("button", {
+		...a,
+		ref: o,
+		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
+		disabled: i,
+		"data-sito-ui": "context-menu-item",
+		className: d("sito-ui-context-menu__item", r),
+		children: [
+			/* @__PURE__ */ c("span", {
+				className: "sito-ui-context-menu__leading",
+				"aria-hidden": "true",
+				children: e
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "sito-ui-context-menu__label",
+				children: n
+			}),
+			t ? /* @__PURE__ */ c("span", {
+				className: "sito-ui-context-menu__shortcut",
+				"aria-hidden": "true",
+				children: t
+			}) : null
+		]
 	});
-}), g = {
+}), b = ({ className: e, ...t }) => /* @__PURE__ */ c("div", {
+	...t,
+	role: "separator",
+	"data-sito-ui": "context-menu-separator",
+	className: d("sito-ui-context-menu__separator", e)
+}), x = {
 	SM: "sm",
 	MD: "md",
 	LG: "lg"
-}, _ = (e) => {
+}, S = (e) => {
 	if (e !== void 0) return typeof e == "number" ? `${e}px` : e;
-}, v = e(function(e, t) {
-	let { children: n, icon: r, iconClassName: i, type: a = "button", variant: o = "text", color: s = "default", loading: u = !1, size: f = g.MD, iconSize: p, className: m, style: v, ...y } = e, b = n != null && typeof n != "boolean", x = _(p), S = x === void 0 ? v : {
-		...v,
-		"--sito-ui-icon-button-icon-size": x
-	}, C = d("sito-ui-icon-button", `sito-ui-icon-button--${f}`, b && "sito-ui-icon-button--with-content", m);
-	return /* @__PURE__ */ l(h, {
-		...y,
+}, C = e(function(e, t) {
+	let { children: n, icon: r, iconClassName: i, type: a = "button", variant: o = "text", color: s = "default", loading: u = !1, size: f = x.MD, iconSize: p, className: m, style: h, ..._ } = e, v = n != null && typeof n != "boolean", y = S(p), b = y === void 0 ? h : {
+		...h,
+		"--sito-ui-icon-button-icon-size": y
+	}, C = d("sito-ui-icon-button", `sito-ui-icon-button--${f}`, v && "sito-ui-icon-button--with-content", m);
+	return /* @__PURE__ */ l(g, {
+		..._,
 		ref: t,
 		type: a,
 		variant: o,
@@ -58,100 +159,109 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 		loading: u,
 		"data-sito-ui": "icon-button",
 		className: C,
-		style: S,
+		style: b,
 		children: [u ? null : /* @__PURE__ */ c("span", {
 			className: d("sito-ui-icon-button__icon", i),
 			"aria-hidden": "true",
 			children: r
 		}), n]
 	});
-}), y = "input:not([type=\"hidden\"]):not([disabled]), textarea:not([disabled]), select:not([disabled])", b = "button[type=\"submit\"]:not([disabled]), input[type=\"submit\"]:not([disabled])", x = [
+}), ee = "input:not([type=\"hidden\"]):not([disabled]), textarea:not([disabled]), select:not([disabled])", te = "button[type=\"submit\"]:not([disabled]), input[type=\"submit\"]:not([disabled])", w = [
 	"a[href]",
 	"button:not([disabled])",
 	"textarea:not([disabled])",
 	"input:not([disabled])",
 	"select:not([disabled])",
 	"[tabindex]:not([tabindex=\"-1\"])"
-].join(","), S = 0, C = null, w = () => typeof document < "u" && !!document.body, T = () => {
-	w() && (S === 0 && (C = document.body.style.overflow, document.body.style.overflow = "hidden"), S += 1);
-}, E = () => {
-	!w() || S === 0 || (--S, S === 0 && (document.body.style.overflow = C ?? "", C = null));
-}, D = (e) => Array.from(e.querySelectorAll(x)).filter((e) => e.getAttribute("aria-disabled") !== "true"), O = () => typeof document > "u" ? null : document.activeElement instanceof HTMLElement ? document.activeElement : null, k = typeof window > "u" ? n : i, A = (e) => {
-	let i = r(), s = a(null), f = a(null), p = a(null), m = a(void 0), { dialogId: h, title: g, ariaLabel: _, children: x, onClose: S, initialFocus: C = "none", closeOnBackdropClick: w = !1, closeOnEscape: A = !0, lockBodyScroll: j = !0, onSubmit: M, open: N = !1, mobileFullScreen: P = !1, containerClassName: F, className: I, closeLabel: L = "Close dialog", closeIcon: R = "x", showCloseButton: z = !0, portalContainer: B, exitDurationMs: V = 0, onExitComplete: H } = e, [U, W] = o(N), [G, K] = o(!1), q = g ? `${h ?? i}-title` : void 0, J = G ? "closing" : "open", Y = N && !G;
+].join(","), T = 0, E = null, D = [], O = () => typeof document < "u" && !!document.body, k = () => {
+	O() && (T === 0 && (E = document.body.style.overflow, document.body.style.overflow = "hidden"), T += 1);
+}, ne = () => {
+	!O() || T === 0 || (--T, T === 0 && (document.body.style.overflow = E ?? "", E = null));
+}, A = (e) => Array.from(e.querySelectorAll(w)).filter((e) => e.getAttribute("aria-disabled") !== "true"), j = () => typeof document > "u" ? null : document.activeElement instanceof HTMLElement ? document.activeElement : null, re = (e) => {
+	let t = D.indexOf(e);
+	t >= 0 && D.splice(t, 1), D.push(e);
+}, ie = (e) => {
+	let t = D.indexOf(e);
+	t >= 0 && D.splice(t, 1);
+}, M = (e) => D[D.length - 1] === e, N = typeof window > "u" ? n : i, P = (e) => {
+	let i = r(), s = a(Symbol("sito-ui-dialog")), f = a(null), p = a(null), m = a(null), h = a(void 0), { dialogId: g, title: _, ariaLabel: v, children: y, onClose: b, initialFocus: x = "none", closeOnBackdropClick: S = !1, closeOnEscape: w = !0, lockBodyScroll: T = !0, onSubmit: E, open: D = !1, mobileFullScreen: O = !1, containerClassName: P, className: F, headerClassName: I, titleClassName: L, closeButtonClassName: R, closeLabel: z = "Close dialog", closeIcon: B = "x", showCloseButton: ae = !0, portalContainer: oe, exitDurationMs: V = 0, onExitComplete: H } = e, [U, W] = o(D), [G, K] = o(!1), q = _ ? `${g ?? i}-title` : void 0, J = G ? "closing" : "open", Y = D && !G, X = s.current;
 	n(() => {
-		m.current = H;
+		h.current = H;
 	}, [H]);
-	let X = t(() => {
-		p.current !== null && (window.clearTimeout(p.current), p.current = null);
-	}, []), Z = t(() => {
-		W(!1), K(!1), m.current?.(), p.current = null;
+	let Z = t(() => {
+		m.current !== null && (window.clearTimeout(m.current), m.current = null);
+	}, []), Q = t(() => {
+		W(!1), K(!1), h.current?.(), m.current = null;
 	}, []);
-	k(() => {
-		if (N) {
-			X(), W(!0), K(!1);
+	N(() => {
+		if (D) {
+			Z(), W(!0), K(!1);
 			return;
 		}
 		if (!U) return;
 		let e = Math.max(0, V);
 		if (e === 0) {
-			X(), Z();
+			Z(), Q();
 			return;
 		}
-		K(!0), X(), p.current = window.setTimeout(Z, e);
+		K(!0), Z(), m.current = window.setTimeout(Q, e);
 	}, [
-		X,
-		V,
 		Z,
-		N,
+		V,
+		Q,
+		D,
 		U
 	]), n(() => () => {
-		X();
-	}, [X]);
-	let Q = t((e) => {
-		if (e.key === "Escape" && Y && A) {
-			S();
+		Z();
+	}, [Z]);
+	let $ = t((e) => {
+		if (!M(X)) return;
+		if (e.key === "Escape" && Y && w) {
+			b();
 			return;
 		}
 		if (e.key !== "Tab" || !Y) return;
-		let t = s.current;
+		let t = f.current;
 		if (!t) return;
-		let n = D(t);
+		let n = A(t);
 		if (n.length === 0) {
 			e.preventDefault(), t.focus();
 			return;
 		}
-		let r = n[0], i = n[n.length - 1], a = O(), o = !a || !t.contains(a);
+		let r = n[0], i = n[n.length - 1], a = j(), o = !a || !t.contains(a);
 		if (e.shiftKey && (o || a === r)) {
 			e.preventDefault(), i.focus();
 			return;
 		}
 		!e.shiftKey && (o || a === i) && (e.preventDefault(), r.focus());
 	}, [
-		A,
+		w,
+		X,
 		Y,
-		S
+		b
 	]);
 	n(() => {
-		if (!(!Y || typeof window > "u")) return window.addEventListener("keydown", Q), () => {
-			window.removeEventListener("keydown", Q);
+		if (!(!Y || typeof window > "u")) return window.addEventListener("keydown", $), () => {
+			window.removeEventListener("keydown", $);
 		};
-	}, [Q, Y]), k(() => {
-		if (N) return f.current = O(), () => {
-			f.current?.isConnected && f.current.focus(), f.current = null;
+	}, [$, Y]), N(() => {
+		if (D) return p.current = j(), re(X), () => {
+			let e = M(X);
+			ie(X), e && p.current?.isConnected && p.current.focus(), p.current = null;
 		};
-	}, [N]), k(() => {
-		if (!N) return;
-		let e = s.current;
+	}, [X, D]), N(() => {
+		if (!D) return;
+		let e = f.current;
 		if (e) {
-			if (C === "first-input") {
-				let t = e.querySelector(y);
+			if (x === "first-input") {
+				let t = e.querySelector(ee);
 				if (t) {
 					t.focus();
 					return;
 				}
 			}
-			if (C === "submit") {
-				let t = e.querySelector(b);
+			if (x === "submit") {
+				let t = e.querySelector(te);
 				if (t) {
 					t.focus();
 					return;
@@ -159,71 +269,72 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 			}
 			e.focus();
 		}
-	}, [C, N]), n(() => {
-		if (!(!U || !j)) return T(), () => {
-			E();
+	}, [x, D]), n(() => {
+		if (!(!U || !T)) return k(), () => {
+			ne();
 		};
-	}, [j, U]);
-	let $ = t((e) => {
-		Y && w && e.target === e.currentTarget && S();
+	}, [T, U]);
+	let se = t((e) => {
+		M(X) && Y && S && e.target === e.currentTarget && b();
 	}, [
-		w,
+		S,
+		X,
 		Y,
-		S
-	]), ee = t((e) => {
-		e.preventDefault(), M?.(e);
-	}, [M]);
+		b
+	]), ce = t((e) => {
+		e.preventDefault(), E?.(e);
+	}, [E]);
 	if (!U || typeof document > "u") return null;
-	let te = M ? /* @__PURE__ */ c("form", {
-		onSubmit: ee,
-		children: x
-	}) : x, ne = typeof R == "string" ? /* @__PURE__ */ c("span", {
+	let le = E ? /* @__PURE__ */ c("form", {
+		onSubmit: ce,
+		children: y
+	}) : y, ue = typeof B == "string" ? /* @__PURE__ */ c("span", {
 		"aria-hidden": "true",
-		children: R
-	}) : R;
+		children: B
+	}) : B;
 	return u(/* @__PURE__ */ c("div", {
-		id: h ? `backdrop-${h}` : void 0,
+		id: g ? `backdrop-${g}` : void 0,
 		"data-sito-ui": "dialog-backdrop",
 		"data-state": J,
-		onClick: $,
-		className: d("sito-ui-dialog-backdrop", `sito-ui-dialog-backdrop--${J}`, F),
+		onClick: se,
+		className: d("sito-ui-dialog-backdrop", `sito-ui-dialog-backdrop--${J}`, P),
 		children: /* @__PURE__ */ l("div", {
-			id: h,
-			ref: s,
+			id: g,
+			ref: f,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-label": g ? void 0 : _,
+			"aria-label": _ ? void 0 : v,
 			"aria-labelledby": q,
 			tabIndex: -1,
 			"data-sito-ui": "dialog",
 			"data-state": J,
-			className: d("sito-ui-dialog", `sito-ui-dialog--${J}`, P && "sito-ui-dialog--mobile-full-screen", I),
+			className: d("sito-ui-dialog", `sito-ui-dialog--${J}`, O && "sito-ui-dialog--mobile-full-screen", F),
 			children: [/* @__PURE__ */ l("div", {
-				className: "sito-ui-dialog__header",
-				children: [g ? /* @__PURE__ */ c("h3", {
+				className: d("sito-ui-dialog__header", I),
+				children: [_ ? /* @__PURE__ */ c("h3", {
 					id: q,
-					className: "sito-ui-dialog__title",
-					children: g
-				}) : null, z ? /* @__PURE__ */ c(v, {
-					icon: ne,
+					className: d("sito-ui-dialog__title", L),
+					children: _
+				}) : null, ae ? /* @__PURE__ */ c(C, {
+					icon: ue,
 					disabled: !Y,
 					"aria-disabled": !Y,
-					onClick: S,
+					onClick: b,
 					variant: "text",
 					color: "error",
-					className: "sito-ui-dialog__close",
-					"aria-label": L
+					className: d("sito-ui-dialog__close", R),
+					"aria-label": z
 				}) : null]
-			}), te]
+			}), le]
 		})
-	}), B ?? document.body);
-}, j = (e) => {
-	let { primaryText: t, cancelText: n, onPrimaryClick: r, onCancel: i, isLoading: a = !1, loadingIndicator: o, disabled: s = !1, primaryType: u = "submit", containerClassName: f, primaryClassName: p, cancelClassName: m, alignEnd: g = !1, primaryName: _, primaryAriaLabel: v, cancelName: y, cancelAriaLabel: b, extraActions: x = [] } = e;
+	}), oe ?? document.body);
+}, F = (e) => {
+	let { primaryText: t, cancelText: n, onPrimaryClick: r, onCancel: i, isLoading: a = !1, loadingIndicator: o, disabled: s = !1, primaryType: u = "submit", containerClassName: f, primaryClassName: p, cancelClassName: m, alignEnd: h = !1, primaryName: _, primaryAriaLabel: v, cancelName: y, cancelAriaLabel: b, extraActions: x = [] } = e;
 	return /* @__PURE__ */ l("div", {
 		"data-sito-ui": "dialog-actions",
-		className: d("sito-ui-dialog-actions", g && "sito-ui-dialog-actions--end", f),
+		className: d("sito-ui-dialog-actions", h && "sito-ui-dialog-actions--end", f),
 		children: [
-			/* @__PURE__ */ c(h, {
+			/* @__PURE__ */ c(g, {
 				type: u,
 				color: "primary",
 				variant: "submit",
@@ -236,8 +347,8 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 				"aria-label": v,
 				children: t
 			}),
-			x.map(({ id: e, ...t }) => /* @__PURE__ */ c(h, { ...t }, e)),
-			/* @__PURE__ */ c(h, {
+			x.map(({ id: e, ...t }) => /* @__PURE__ */ c(g, { ...t }, e)),
+			/* @__PURE__ */ c(g, {
 				type: "button",
 				variant: "outlined",
 				className: m,
@@ -249,7 +360,11 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 			})
 		]
 	});
-}, M = (e = !1) => {
+}, I = {
+	NONE: "none",
+	FIRST_INPUT: "first-input",
+	SUBMIT: "submit"
+}, L = (e = !1) => {
 	let [t, n] = o(e);
 	return {
 		open: t,
@@ -257,6 +372,23 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 		handleClose: () => n(!1),
 		handleOpen: () => n(!0)
 	};
+}, R = {
+	x: 0,
+	y: 0
+}, z = () => {
+	let [e, n] = o(!1), [r, i] = o(null), [a, s] = o(R);
+	return {
+		open: e,
+		payload: r,
+		position: a,
+		openAt: t((e, t, r) => {
+			i(r), s({
+				x: e,
+				y: t
+			}), n(!0);
+		}, []),
+		close: t(() => n(!1), [])
+	};
 };
 //#endregion
-export { h as Button, A as Dialog, j as DialogActions, v as IconButton, M as useDialog };
+export { p as BUTTON_COLOR_VARIANTS, h as BUTTON_SIZES, m as BUTTON_VARIANTS, g as Button, v as ContextMenu, y as ContextMenuItem, b as ContextMenuSeparator, I as DIALOG_INITIAL_FOCUS, P as Dialog, F as DialogActions, x as ICON_BUTTON_SIZES, C as IconButton, f as Spinner, z as useContextMenu, L as useDialog };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sito/ui",
   "private": false,
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "packageManager": "pnpm@10.34.4",
   "files": [
@@ -65,7 +65,10 @@
       "lodash": "4.18.1",
       "minimatch": "3.1.5",
       "validator": "13.15.35"
-    }
+    },
+    "ignoredBuiltDependencies": [
+      "esbuild"
+    ]
   },
   "devDependencies": {
     "@storybook/addon-docs": "10.4.6",