cekat-ui 1.3.7 → 1.3.9

package/dist/index.d.mts

@@ -4,15 +4,28 @@ import { CellProps as CellProps_2 } from 'react-aria-components';
 import { ClassValue } from 'clsx';
 import { ColumnProps as ColumnProps_2 } from 'react-aria-components';
 import { ColumnResizerProps as ColumnResizerProps_2 } from 'react-aria-components';
+import { ComboBoxProps as ComboBoxProps_2 } from 'react-aria-components';
 import { default as default_2 } from 'react';
+import { DialogProps } from 'react-aria-components';
+import { GroupProps } from 'react-aria-components';
+import { InputProps as InputProps_2 } from 'react-aria-components';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { Key } from 'react-aria-components';
+import { ListBoxItemProps as ListBoxItemProps_2 } from 'react-aria-components';
+import { ListBoxProps as ListBoxProps_2 } from 'react-aria-components';
+import { MenuItemProps as MenuItemProps_2 } from 'react-aria-components';
+import { MenuProps as MenuProps_2 } from 'react-aria-components';
+import { MenuTrigger } from 'react-aria-components';
+import { ModalOverlayProps } from 'react-aria-components';
+import { PopoverProps as PopoverProps_2 } from 'react-aria-components';
 import { PressEvent } from 'react-aria-components';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { ResizableTableContainerProps } from 'react-aria-components';
 import { RowProps as RowProps_2 } from 'react-aria-components';
 import { SelectionIndicator } from 'react-aria-components';
+import { SelectProps as SelectProps_2 } from 'react-aria-components';
+import { SelectValueProps as SelectValueProps_2 } from 'react-aria-components';
 import { TableBodyProps as TableBodyProps_2 } from 'react-aria-components';
 import { TableFooterProps as TableFooterProps_2 } from 'react-aria-components';
 import { TableHeaderProps as TableHeaderProps_2 } from 'react-aria-components';
@@ -344,53 +357,92 @@ export declare const ColumnResizer: React_2.ForwardRefExoticComponent<ColumnResi
 export declare interface ColumnResizerProps extends ColumnResizerProps_2 {
 }
 
-export declare function Dropdown({ trigger, label, icon, avatarSrc, avatarInitials, header, items, open: openProp, defaultOpen, onOpenChange, disabled, align, className, menuClassName, }: DropdownProps): JSX_2.Element;
+export declare const ComboBox: <T extends object, M extends ComboBoxSelectionMode = "single">(props: ComboBoxProps<T, M> & {
+    ref?: React_2.Ref<HTMLDivElement>;
+}) => React_2.ReactElement;
 
-export declare interface DropdownHeader {
-    name: React_2.ReactNode;
-    subtitle?: React_2.ReactNode;
-    avatarSrc?: string;
-    avatarInitials?: React_2.ReactNode;
-    status?: AvatarStatus;
+export declare const ComboBoxInput: React_2.ForwardRefExoticComponent<ComboBoxInputProps & React_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface ComboBoxInputProps extends Omit<InputProps_2, 'className' | 'style'> {
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
 }
 
-export declare interface DropdownMenuItem {
-    id: string;
-    /** Renders a horizontal divider instead of an item when true. */
-    divider?: boolean;
-    label?: string;
-    icon?: React_2.ReactNode;
-    /** Trailing shortcut hint (e.g. "⌘C"). */
-    shortcut?: string;
-    disabled?: boolean;
-    onClick?: () => void;
+/**
+ * `ListBoxItem` with the same provisional selected-row treatment as `Select`'s `SelectItem` —
+ * see `selectItemSelectedStyles` for why it's provisional. Reused directly rather than
+ * re-declared, same as `Menu` does for its own items.
+ */
+export declare function ComboBoxItem<T extends object>({ className, ...props }: ListBoxItemProps<T>): JSX_2.Element;
+
+export declare interface ComboBoxProps<T extends object, M extends ComboBoxSelectionMode = 'single'> extends Omit<ComboBoxProps_2<T, M>, 'className' | 'style' | 'children'> {
+    children: ComboBoxProps_2<T, M>['children'];
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
 }
 
-export declare interface DropdownProps {
-    /** "button" shows a labeled trigger, "icon" a kebab trigger, "avatar" the user's avatar. */
-    trigger?: DropdownTriggerType;
-    /** Label for the "button" trigger. */
-    label?: string;
-    /** Custom icon for the "icon" trigger (defaults to a vertical-dots icon). */
+/**
+ * `'single' | 'multiple'` — unlike `Select` (single-value by construction), `ComboBox`
+ * genuinely supports both: multi-selection with removable tags is this component's job,
+ * not `Select`'s.
+ */
+export declare type ComboBoxSelectionMode = 'single' | 'multiple';
+
+export declare type ComboBoxSize = 'xs' | 'sm' | 'md';
+
+/**
+ * Renders one chip per selected item, via a render-prop rather than owning `Tag` rendering
+ * itself — reuses the existing `Tag` component rather than re-declaring chip styling, and
+ * `Tag`'s own color/size/icon surface is a styling decision that belongs to the consumer, not
+ * this component. Reads
+ * `ComboBoxStateContext` directly (same context `ComboBoxValue` uses internally) rather than
+ * threading `selectedItems` through props.
+ *
+ * Wrapped in `comboBoxTagsRowStyles` (single row, horizontal scroll, no visible scrollbar) so
+ * every consumer gets Figma's fixed-height, non-wrapping `Tags` layout by construction, rather
+ * than each call site having to remember to wrap it correctly.
+ */
+export declare const ComboBoxTags: ({ children }: ComboBoxTagsProps) => JSX_2.Element | null;
+
+export declare interface ComboBoxTagsProps {
+    /** Rendered per selected item; must call the given `onRemove` from a close affordance. */
+    children: (item: {
+        key: React_2.Key;
+        textValue: string;
+        onRemove: () => void;
+    }) => React_2.ReactNode;
+}
+
+/**
+ * Wraps RAC's `Group`, not a `Button` — the trigger holds the leading icon, the text input, and
+ * any tag chips (`ComboBoxTags`) as siblings.
+ *
+ * No trailing chevron/toggle button — Figma's `Type=Search`/`Type=Tags` nodes (81:15162,
+ * 81:15174) never render one; the leading search icon alone signals the field is searchable.
+ * `icon` stays optional at the type level (not required) even though omitting it removes the
+ * only visual affordance a trigger has once the chevron is gone — that's a deliberate usage
+ * note, not something enforced here. Consumers rendering `ComboBoxTrigger` without an `icon`
+ * get a field that looks like a plain text input; pass one.
+ *
+ * Clicking anywhere in the field — the icon, the padding, blank space next to the tags —
+ * focuses the input, the same way clicking anywhere in a native bordered text field does.
+ * `Group` gets no such behavior for free (it's a plain `<div role="group">`; only the `<input>`
+ * itself is focusable), so this was a real gap, not a style-only wrapper: without it, everything
+ * outside the input's own hit area is dead space that looks clickable and isn't. Only clicks
+ * that don't already land on a real control (the input, a tag's remove button) redirect focus —
+ * `closest('button, input')` is the check — so this never steals a click already meant for one
+ * of those.
+ */
+export declare const ComboBoxTrigger: React_2.ForwardRefExoticComponent<ComboBoxTriggerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ComboBoxTriggerProps extends Omit<GroupProps, 'className' | 'style' | 'children' | 'role'> {
+    size?: ComboBoxSize;
+    /** Leading ornament slot — same as `Select`'s: icon, `Avatar`, or a status dot. */
     icon?: React_2.ReactNode;
-    /** Avatar image for the "avatar" trigger. */
-    avatarSrc?: string;
-    avatarInitials?: React_2.ReactNode;
-    /** Optional user summary rendered at the top of the menu. */
-    header?: DropdownHeader;
-    items: DropdownMenuItem[];
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    disabled?: boolean;
-    /** Which edge of the trigger the menu aligns to. */
-    align?: 'start' | 'end';
+    children: React_2.ReactNode;
     className?: ClassValue;
-    menuClassName?: ClassValue;
 }
 
-export declare type DropdownTriggerType = 'button' | 'icon' | 'avatar';
-
 /**
  * Standalone, not table-scoped — search results and filtered lists need it
  * too. Structure follows the shipped "No Data Found" design (Figma
@@ -541,6 +593,43 @@ declare interface InputTrailingButtonSlot {
     disabled?: boolean;
 }
 
+export declare const ListBox: <T extends object>(props: ListBoxProps<T> & {
+    ref?: React_2.Ref<HTMLDivElement>;
+}) => React_2.ReactElement;
+
+export declare const ListBoxItem: <T extends object>(props: ListBoxItemProps<T> & {
+    ref?: React_2.Ref<HTMLDivElement>;
+}) => React_2.ReactElement;
+
+/**
+ * Leading-content axis for an item. A single enum, not `icon`/`checkbox` booleans — no
+ * Figma variant combines them, and one axis makes the combination unrepresentable instead
+ * of just unused. Default `none`.
+ */
+export declare type ListBoxItemContent = 'none' | 'icon' | 'selection';
+
+export declare interface ListBoxItemProps<T extends object = object> extends Omit<ListBoxItemProps_2<T>, 'className' | 'style'> {
+    content?: ListBoxItemContent;
+    /** Rendered in the leading slot when `content="icon"`. */
+    icon?: React_2.ReactNode;
+    /** Rendered right-aligned, e.g. a keyboard shortcut hint. */
+    shortcut?: React_2.ReactNode;
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
+export declare interface ListBoxProps<T extends object> extends Omit<ListBoxProps_2<T>, 'className' | 'style'> {
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
+/** A `Separator` element, not an item variant. */
+export declare const ListBoxSeparator: ({ className }: ListBoxSeparatorProps) => JSX_2.Element;
+
+export declare interface ListBoxSeparatorProps {
+    className?: string;
+}
+
 export declare const Loading: {
     ({ size, style, supportingText, label, className, }: LoadingProps): JSX_2.Element;
     displayName: string;
@@ -558,30 +647,141 @@ export declare type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
 
 export declare type LoadingStyle = 'line-simple' | 'line-spinner' | 'dot-circle';
 
-export declare function MultiSelectInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, className, wrapperClassName, options, value, onChange, }: MultiSelectInputProps): JSX_2.Element;
+export declare const Menu: <T extends object>(props: MenuProps<T> & {
+    ref?: React_2.Ref<HTMLDivElement>;
+}) => React_2.ReactElement;
 
-declare interface MultiSelectInputProps {
-    size?: 'sm' | 'md';
-    label?: string;
-    required?: boolean;
-    hint?: string;
-    error?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    rightIcon?: default_2.ReactNode;
+/**
+ * Figma `_Dropdown list header` (81:14786) has two authored forms — avatar-group and plain
+ * text. Shipped as one slot, not two variants: this component only owns the header's
+ * structural chrome (bottom border, padding); the consumer supplies whichever content.
+ *
+ * Built on RAC's own `<Header>` (`createLeafComponent(HeaderNode, ...)`), not a plain `<div>` —
+ * every child of `<Menu>` is routed through RAC's collection builder, which only recognizes
+ * proper collection node types (`MenuItem`, `MenuSection`, `Separator`, `Header`). A plain,
+ * unrecognized `<div>` here silently corrupts collection building: `state.collection.size`
+ * drops to 0 and every `MenuItem` disappears with no error thrown. Verified directly — swapping
+ * this back to a raw `<div>` reproduces zero rendered `role="menuitem"` elements on open, even
+ * with otherwise-unmodified content.
+ */
+export declare const MenuHeader: ({ children, className }: MenuHeaderProps) => JSX_2.Element;
+
+export declare interface MenuHeaderProps {
+    children: React_2.ReactNode;
+    className?: string;
+}
+
+export declare const MenuItem: <T extends object>(props: MenuItemProps<T> & {
+    ref?: React_2.Ref<HTMLDivElement>;
+}) => React_2.ReactElement;
+
+/** Same enum as `ListBox`'s `content` axis. Default `none`. */
+export declare type MenuItemContent = 'none' | 'icon' | 'selection';
+
+export declare interface MenuItemProps<T extends object = object> extends Omit<MenuItemProps_2<T>, 'className' | 'style'> {
+    content?: MenuItemContent;
+    /** Rendered in the leading slot when `content="icon"`. */
+    icon?: React_2.ReactNode;
+    /** Figma `.Shortcut` (355:3773) — text-only, right-aligned. */
+    shortcut?: React_2.ReactNode;
     className?: ClassValue;
-    wrapperClassName?: ClassValue;
-    options: MultiSelectOption[];
-    value?: MultiSelectOption[];
-    onChange?: (value: MultiSelectOption[]) => void;
+    style?: React_2.CSSProperties;
 }
 
-declare interface MultiSelectOption {
-    id: string;
-    label: string;
-    avatar?: string;
+export declare interface MenuProps<T extends object> extends Omit<MenuProps_2<T>, 'className' | 'style'> {
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
+/** A `Separator` element, not an item variant. */
+export declare const MenuSeparator: ({ className }: MenuSeparatorProps) => JSX_2.Element;
+
+export declare interface MenuSeparatorProps {
+    className?: string;
+}
+
+export { MenuTrigger }
+
+export declare const Modal: ModalCompound;
+
+export declare interface ModalBodyProps {
+    children?: React_2.ReactNode;
+    className?: ClassValue;
+}
+
+/** `ForwardRefExoticComponent` rather than `FC`: the base forwards a ref to RAC's `Modal`. */
+export declare type ModalCompound = React_2.ForwardRefExoticComponent<ModalProps & React_2.RefAttributes<HTMLDivElement>> & {
+    Header: React_2.FC<ModalHeaderProps>;
+    Body: React_2.FC<ModalBodyProps>;
+    ImagePanel: React_2.FC<ModalImagePanelProps>;
+    Footer: React_2.FC<ModalFooterProps>;
+};
+
+export declare type ModalFooterLayout = 'horizontal-fill' | 'horizontal' | 'vertical-fill' | 'right-aligned' | 'right-aligned-checkbox' | 'wizard-navigation' | 'single-cta';
+
+export declare interface ModalFooterProps {
+    /** Default `horizontal-fill`, matching Figma's documented default. */
+    layout?: ModalFooterLayout;
+    /** Reddens the primary action (Confirm/Delete/Next) for irreversible operations. Default `false`. */
+    destructive?: boolean;
+    /** Disables every button in the footer — matches the single `busy` flag every current dashboard confirm dialog already uses for its Cancel+Confirm pair. Default `false`. */
+    isPending?: boolean;
+    /** Not used by `single-cta`. */
+    cancelLabel?: string;
+    onCancel?: () => void;
+    /** The primary action's label — "Next" for `wizard-navigation`, "Confirm"/"Delete" elsewhere. Every layout has one. */
+    confirmLabel: string;
+    onConfirm: () => void;
+    isConfirmDisabled?: boolean;
+    /** `wizard-navigation` only. Default `'Back'`. */
+    backLabel?: string;
+    /** `wizard-navigation` only. */
+    onBack?: () => void;
+    /** `right-aligned-checkbox` only — consumer-supplied, e.g. cekat-ui's own `Checkbox` alongside its own label markup (`Checkbox` itself has no built-in label). */
+    checkbox?: React_2.ReactNode;
+    className?: ClassValue;
+}
+
+export declare interface ModalHeaderProps {
+    title: React_2.ReactNode;
+    subtitle?: React_2.ReactNode;
+    icon?: React_2.ReactNode;
+    className?: ClassValue;
+}
+
+export declare interface ModalImagePanelProps {
+    children?: React_2.ReactNode;
+    className?: ClassValue;
+}
+
+export declare interface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'children'> {
+    children?: DialogProps['children'];
+    /** Content-area width. Figma foundation: sm 500px · md 640px · lg 800px. Default `sm`. */
+    size?: ModalSize;
+    /**
+     * The standalone top-right dismiss button Figma's foundation `Modal Shell` renders on the
+     * card itself, regardless of whether a `Modal.Header` is present. Default `true`.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Optional left-side image area — pass a `Modal.ImagePanel`. Widens the card beyond `size`'s
+     * content-area width, matching Figma's `Show Image Panel` toggle (the three per-size
+     * `Image Placeholder` slots in the design file are a Figma-variant artifact of the same single
+     * slot, not three independent props — collapsed here into one).
+     */
+    imagePanel?: React_2.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /**
+     * Applied to the content area — the whole card when `imagePanel` isn't used, otherwise just
+     * the left column beside it. Overrides `size`'s default width.
+     */
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
 }
 
+export declare type ModalSize = 'sm' | 'md' | 'lg';
+
 declare type NativeButtonProps = Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style'>;
 
 export declare function PhoneInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, value, onChange, className, wrapperClassName, }: PhoneInputProps): JSX_2.Element;
@@ -601,6 +801,29 @@ declare interface PhoneInputProps {
     wrapperClassName?: InputProps['wrapperClassName'];
 }
 
+/**
+ * Overlay foundation for the dropdown family (Menu, Select, ComboBox) and Tooltip. Wraps RAC's
+ * `Popover`, which already provides: portal to `document.body`,
+ * flip on the main axis and boundary-clamped shift on the cross axis when space runs out,
+ * `maxHeight` clamped to available viewport space, reposition on window resize and on trigger/
+ * overlay size change, Escape-to-close with focus restored to the trigger, and outside-press
+ * dismissal. This wrapper adds the two things RAC does not: reposition (not close) on ancestor
+ * scroll, and suppressing the ARIA role RAC would otherwise emit.
+ */
+export declare const Popover: React_2.ForwardRefExoticComponent<PopoverProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface PopoverProps extends Omit<PopoverProps_2, 'className' | 'style' | 'children'> {
+    children?: PopoverProps_2['children'];
+    /**
+     * Matches the panel's width to the trigger's width, via RAC's `--trigger-width` CSS
+     * var. Opt-in — most consumers (menus, comboboxes with long option labels) must not
+     * be clamped to trigger width. Default `false`.
+     */
+    matchTriggerWidth?: boolean;
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
 export { PressEvent }
 
 export declare const RadioGroup: ({ value, defaultValue, onValueChange, children, className, }: RadioGroupProps) => JSX_2.Element;
@@ -653,8 +876,63 @@ declare interface SaleAmountInputProps {
     wrapperClassName?: InputProps['wrapperClassName'];
 }
 
+export declare const Select: <T extends object>(props: SelectProps<T> & {
+    ref?: React_2.Ref<HTMLDivElement>;
+}) => React_2.ReactElement;
+
 export { SelectionIndicator }
 
+/**
+ * `ListBoxItem` with the selected-row treatment baked in — see `selectItemSelectedStyles` for
+ * why it's a placeholder. This lives on `Select`'s own item rather than on the shared `ListBox`
+ * because `Menu` doesn't have a Selected state to render at all. `content="selection"` reuses
+ * `ListBox`'s leading-checkmark rendering unchanged.
+ */
+export declare function SelectItem<T extends object>({ className, ...props }: ListBoxItemProps<T>): JSX_2.Element;
+
+/**
+ * Single-value by construction — RAC's `Select` also supports `selectionMode: 'multiple'`,
+ * deliberately not exposed here. A multi-value trigger is a different interaction (chips, no
+ * auto-close) that belongs to its own component, not a prop on this one.
+ */
+export declare interface SelectProps<T extends object> extends Omit<SelectProps_2<T, 'single'>, 'className' | 'style' | 'children' | 'selectionMode'> {
+    children: SelectProps_2<T, 'single'>['children'];
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
+export declare type SelectSize = 'xs' | 'sm' | 'md';
+
+/**
+ * Wraps RAC's raw `Button`, not this library's own `Button` — a Select trigger has its own
+ * bordered-field chrome (matching `InputDropdown`'s size scale/tokens), not a button variant,
+ * and the extra `tone`/`variant`/`iconOnly` surface of the library `Button` doesn't apply here.
+ */
+export declare const SelectTrigger: React_2.ForwardRefExoticComponent<SelectTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface SelectTriggerProps extends Omit<ButtonProps_2, 'className' | 'style' | 'children'> {
+    children: ButtonProps_2['children'];
+    size?: SelectSize;
+    /**
+     * Leading ornament slot — icon, `Avatar`, or a status dot all go through this one prop.
+     * Ornament is a slot, not a variant axis: three separate typed props would make "which
+     * ornament kind" a variant decision that isn't this component's to make — the consumer
+     * already has the icon/avatar/dot element.
+     */
+    icon?: React_2.ReactNode;
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
+export declare const SelectValue: <T>(props: SelectValueProps<T> & {
+    ref?: React_2.Ref<HTMLSpanElement>;
+}) => React_2.ReactElement;
+
+export declare interface SelectValueProps<T> extends Omit<SelectValueProps_2<T>, 'className' | 'style'> {
+    className?: ClassValue;
+    style?: React_2.CSSProperties;
+}
+
 /**
  * Shared by `Column` and `Cell`. Freezes the element during horizontal scroll
  * — `'left'` pins it to the left edge, `'right'` to the right. Requires an
@@ -979,6 +1257,25 @@ declare type ToggleSize = 'sm' | 'md'
 
 declare type ToggleVariant = 'default' | 'success';
 
+/**
+ * Routes through `Popover` — standalone (no trigger context: `triggerRef`/`isOpen` driven
+ * directly, same as `Popover`'s own standalone-usage support), with `isNonModal` so RAC skips
+ * everything a tooltip must never do: `role="dialog"`, focus containment, a `DismissButton`,
+ * stealing focus on open, and body-scroll locking (all gated on `!isNonModal` inside RAC's
+ * `usePopover`/`PopoverInner` — confirmed against source, not just docs). `isNonModal` also
+ * switches RAC's ancestor-scroll handling from Popover's own custom reposition-on-scroll to
+ * RAC's own close-on-scroll — acceptable here since a tooltip is ephemeral and hover-driven;
+ * closing instead of chasing the trigger across a scrolling container is reasonable, arguably
+ * better than for a menu/select where closing loses navigation context.
+ *
+ * This replaces the previous hand-rolled `createPortal` + manual measurement (`getBoundingClientRect`
+ * math per `side`) + `ResizeObserver` + scroll/resize listeners with RAC's own positioning:
+ * portal-to-body, flip-on-both-axes (the old implementation had none — always rendered at the
+ * exact requested `side` regardless of viewport edges), and `maxHeight` clamping, none of which
+ * existed before. `OverlayArrow` needs no wiring on `Popover`'s side — RAC's `Popover` always
+ * provides `OverlayArrowContext` to its children regardless of whether anything consumes it, so
+ * it "just works" as a child here with zero changes to `Popover.tsx`.
+ */
 export declare const Tooltip: {
     ({ content, supportingText, side, open, defaultOpen, disabled, delay, className, children, }: TooltipProps): JSX_2.Element;
     displayName: string;