cekat-ui 1.3.8 → 1.3.9

package/dist/index.d.mts

@@ -4,7 +4,11 @@ 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';
@@ -12,6 +16,7 @@ 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';
@@ -352,6 +357,92 @@ export declare const ColumnResizer: React_2.ForwardRefExoticComponent<ColumnResi
 export declare interface ColumnResizerProps extends ColumnResizerProps_2 {
 }
 
+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 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;
+}
+
+/**
+ * `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;
+}
+
+/**
+ * `'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;
+    children: React_2.ReactNode;
+    className?: ClassValue;
+}
+
 /**
  * Standalone, not table-scoped — search results and filtered lists need it
  * too. Structure follows the shipped "No Data Found" design (Figma
@@ -611,30 +702,86 @@ export declare interface MenuSeparatorProps {
 
 export { MenuTrigger }
 
-export declare function MultiSelectInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, className, wrapperClassName, options, value, onChange, }: MultiSelectInputProps): JSX_2.Element;
+export declare const Modal: ModalCompound;
 
-declare interface MultiSelectInputProps {
-    size?: 'sm' | 'md';
-    label?: string;
-    required?: boolean;
-    hint?: string;
-    error?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    rightIcon?: default_2.ReactNode;
+export declare interface ModalBodyProps {
+    children?: React_2.ReactNode;
     className?: ClassValue;
-    wrapperClassName?: ClassValue;
-    options: MultiSelectOption[];
-    value?: MultiSelectOption[];
-    onChange?: (value: MultiSelectOption[]) => void;
 }
 
-declare interface MultiSelectOption {
-    id: string;
-    label: string;
-    avatar?: string;
+/** `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;

package/dist/index.d.ts

@@ -4,7 +4,11 @@ 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';
@@ -12,6 +16,7 @@ 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';
@@ -352,6 +357,92 @@ export declare const ColumnResizer: React_2.ForwardRefExoticComponent<ColumnResi
 export declare interface ColumnResizerProps extends ColumnResizerProps_2 {
 }
 
+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 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;
+}
+
+/**
+ * `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;
+}
+
+/**
+ * `'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;
+    children: React_2.ReactNode;
+    className?: ClassValue;
+}
+
 /**
  * Standalone, not table-scoped — search results and filtered lists need it
  * too. Structure follows the shipped "No Data Found" design (Figma
@@ -611,30 +702,86 @@ export declare interface MenuSeparatorProps {
 
 export { MenuTrigger }
 
-export declare function MultiSelectInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, className, wrapperClassName, options, value, onChange, }: MultiSelectInputProps): JSX_2.Element;
+export declare const Modal: ModalCompound;
 
-declare interface MultiSelectInputProps {
-    size?: 'sm' | 'md';
-    label?: string;
-    required?: boolean;
-    hint?: string;
-    error?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    rightIcon?: default_2.ReactNode;
+export declare interface ModalBodyProps {
+    children?: React_2.ReactNode;
     className?: ClassValue;
-    wrapperClassName?: ClassValue;
-    options: MultiSelectOption[];
-    value?: MultiSelectOption[];
-    onChange?: (value: MultiSelectOption[]) => void;
 }
 
-declare interface MultiSelectOption {
-    id: string;
-    label: string;
-    avatar?: string;
+/** `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;