cekat-ui 1.3.8 → 1.3.10

package/dist/index.d.mts

@@ -4,14 +4,21 @@ 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 { LinkProps as LinkProps_2 } from 'react-aria-components';
+import { LinkRenderProps } 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';
@@ -235,6 +242,71 @@ export declare type BadgeSize = 'sm' | 'md' | 'lg';
 
 export declare type BadgeVariant = 'solid' | 'outline';
 
+/**
+ * Wraps RAC's `<Breadcrumb>` (an `<li>`). RAC computes `isCurrent` from the item's position
+ * in the collection — the last item gets it — so the trailing separator is suppressed
+ * automatically instead of the caller having to know which crumb is last.
+ */
+export declare const Breadcrumb: {
+    ({ className, children }: BreadcrumbProps): JSX_2.Element;
+    displayName: string;
+};
+
+/**
+ * Composes `Link`. `variant`/`size` fall back to the parent `Breadcrumbs`' values via
+ * context so callers don't repeat them on every crumb, but either can still be overridden
+ * per item. `href` should be omitted on the current (last) crumb — RAC's `Breadcrumb`
+ * already forces it non-interactive via context, but leaving `href` off keeps the rendered
+ * element a `<span>` rather than a disabled `<a>`.
+ */
+export declare const BreadcrumbLink: {
+    ({ variant, size, icon, children, ...props }: BreadcrumbLinkProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface BreadcrumbLinkProps extends Omit<LinkProps, 'children'> {
+    icon?: React_2.ReactNode;
+    children?: React_2.ReactNode;
+}
+
+export declare interface BreadcrumbProps {
+    className?: string;
+    children: React_2.ReactNode;
+}
+
+/**
+ * RAC's `<Breadcrumbs>` renders only the `<ol>` — no `<nav>` landmark, so no accessible
+ * name without this wrapper. `variant`/`size`/`separator` cascade to every `Breadcrumb`
+ * child through context rather than being repeated per item.
+ */
+export declare const Breadcrumbs: {
+    ({ "aria-label": ariaLabel, separator, variant, size, isDisabled, className, children, }: BreadcrumbsProps): JSX_2.Element;
+    displayName: string;
+};
+
+/** Decorative only — `aria-hidden` keeps it out of the accessible name and tab order. */
+export declare const BreadcrumbSeparator: {
+    ({ type, className }: BreadcrumbSeparatorProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface BreadcrumbSeparatorProps {
+    type?: BreadcrumbSeparatorType;
+    className?: string;
+}
+
+export declare type BreadcrumbSeparatorType = 'chevron' | 'slash';
+
+export declare interface BreadcrumbsProps {
+    'aria-label'?: string;
+    separator?: BreadcrumbSeparatorType;
+    variant?: LinkVariant;
+    size?: LinkSize;
+    isDisabled?: boolean;
+    className?: string;
+    children: React_2.ReactNode;
+}
+
 export declare const Button: ButtonCompound;
 
 /** `ForwardRefExoticComponent` rather than `FC`: the base forwards a ref to its `<button>`. */
@@ -352,6 +424,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
@@ -502,6 +660,29 @@ declare interface InputTrailingButtonSlot {
     disabled?: boolean;
 }
 
+/**
+ * Built on react-aria-components' `<Link>`. Renders `<a href>` when `href` is passed and
+ * `<span>` otherwise — RAC's own fallback, not something this wrapper decides — so a
+ * `Link` used for the current page of a breadcrumb trail stays out of tab order without an
+ * `isDisabled` prop.
+ */
+export declare const Link: React_2.ForwardRefExoticComponent<LinkProps & React_2.RefAttributes<HTMLAnchorElement>>;
+
+export declare interface LinkProps extends Omit<LinkProps_2, 'className'> {
+    variant?: LinkVariant;
+    size?: LinkSize;
+    underline?: LinkUnderline;
+    className?: string;
+}
+
+export { LinkRenderProps }
+
+export declare type LinkSize = 'xs' | 'sm' | 'md';
+
+export declare type LinkUnderline = 'none' | 'hover' | 'always';
+
+export declare type LinkVariant = 'text' | 'ghost' | 'ghost-primary';
+
 export declare const ListBox: <T extends object>(props: ListBoxProps<T> & {
     ref?: React_2.Ref<HTMLDivElement>;
 }) => React_2.ReactElement;
@@ -539,6 +720,21 @@ export declare interface ListBoxSeparatorProps {
     className?: string;
 }
 
+/**
+ * Built on react-aria-components' `<ProgressBar>` (`isIndeterminate`) for the accessible
+ * progress-widget semantics (`role="progressbar"`, `aria-valuetext`, label wiring via
+ * `useProgressBar`). Visual variants stay Cekat's (`size` / `style` / `supportingText`).
+ *
+ * `role="progressbar"` is a widget role, not a live region — unlike the plain
+ * `role="status"` div this replaced, it does not auto-announce to screen readers on mount by
+ * itself. An outer `aria-live="polite"` / `aria-atomic="true"` wrapper restores that
+ * announce-on-mount behavior. It has to be a *separate* wrapping element, not props spread
+ * onto `<ProgressBar>` directly: react-aria's `useProgressBar` runs every prop through
+ * `filterDOMProps({ labelable: true })` internally, which only allow-lists
+ * `aria-label`/`aria-labelledby`/`aria-describedby`/`aria-details` — `aria-live` and
+ * `aria-atomic` are silently stripped before they reach the DOM if passed directly (confirmed
+ * via a failing interaction test before this wrapper was added; see Loading.stories.tsx).
+ */
 export declare const Loading: {
     ({ size, style, supportingText, label, className, }: LoadingProps): JSX_2.Element;
     displayName: string;
@@ -611,32 +807,148 @@ 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'>;
 
+/**
+ * Notification-card toast — Figma `ToastV2` (`node-id=1652-1892`). Presentation-only, same
+ * as the pill `Toast`: render it through whatever engine owns positioning/stacking/dismissal
+ * (`sonner`'s `toast.custom()` in this codebase). Not built on React Aria — no matching RAC
+ * primitive, `sonner` already owns the interaction/timing behavior this would otherwise need
+ * RAC for (same reasoning as `Toast` and `Alert`).
+ *
+ * `type` collapses Figma's 18 desktop/mobile permutations into 9 — no `breakpoint` prop. See
+ * `~/Desktop/cekat-ds-audit/RFC-alert-toast-component.md` §8 for why.
+ */
+export declare const NotificationToast: {
+    ({ type, title, supportingText, primaryAction, secondaryAction, onClose, closeLabel, icon, avatarSrc, avatarAlt, timestamp, imageSrc, imageAlt, progressValue, progressLabel, className, }: NotificationToastProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface NotificationToastAction {
+    label: React_2.ReactNode;
+    onClick?: () => void;
+}
+
+export declare interface NotificationToastProps {
+    type: NotificationToastType;
+    title: React_2.ReactNode;
+    /** Supporting text under the title. Presence-implies-render, same as `Alert`'s `description`. */
+    supportingText?: React_2.ReactNode;
+    /** Emphasised action, e.g. "View changes" / "Upload another". Rendered as a text link. */
+    primaryAction?: NotificationToastAction;
+    /** Low-emphasis action, e.g. "Dismiss" / "Cancel". Rendered as a text link. */
+    secondaryAction?: NotificationToastAction;
+    /** Renders the close (X) button when provided. */
+    onClose?: () => void;
+    closeLabel?: string;
+    /** `type: "gray-icon"` requires a caller-supplied icon — Figma's example glyph
+     * (`brand-codesandbox`) is an arbitrary product icon, not a fixed semantic default. */
+    icon?: React_2.ReactNode;
+    /** `type: "avatar"` only. */
+    avatarSrc?: string;
+    avatarAlt?: string;
+    /** e.g. "2 mins ago". */
+    timestamp?: React_2.ReactNode;
+    /** `type: "image"` only. */
+    imageSrc?: string;
+    imageAlt?: string;
+    /** `type: "progress"` only. */
+    progressValue?: number;
+    /** e.g. "60% uploaded...". */
+    progressLabel?: React_2.ReactNode;
+    className?: string;
+}
+
+/**
+ * Figma `ToastV2` component set (`node-id=1652-1892`) collapsed from 18 desktop/mobile
+ * permutations down to 9 — no `breakpoint` prop. 8 of 9 types are a pure CSS reflow between
+ * breakpoints (icon/badge + title + supporting text + actions, same tree, narrower width);
+ * `image` has the largest delta (strip on the left vs. on top) but is still handled with
+ * `sm:` responsive classes, not a second variant. See
+ * `~/Desktop/cekat-ds-audit/RFC-alert-toast-component.md` §8 for the full reasoning.
+ */
+export declare type NotificationToastType = 'primary-icon' | 'gray-icon' | 'progress' | 'avatar' | 'image' | 'success' | 'warning' | 'error' | 'no-icon';
+
 export declare function PhoneInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, value, onChange, className, wrapperClassName, }: PhoneInputProps): JSX_2.Element;
 
 declare interface PhoneInputProps {
@@ -1095,6 +1407,33 @@ export declare interface TextareaProps extends Omit<React_2.TextareaHTMLAttribut
     wrapperClassName?: ClassValue;
 }
 
+/**
+ * Presentation-only pill toast, matching Figma's `ToastV1` anatomy (icon badge + bold
+ * lead-in + message, optional close). Not a toast engine — render it through whatever
+ * toast library owns positioning/stacking/auto-dismiss (`sonner`'s `toast.custom()` in
+ * this codebase, the same way `cekat-dashboard`'s `CekatToast` is used today via
+ * `utils/showMessage.ts`). See `docs`/`RFC-alert-toast-component.md` in the audit folder
+ * for why the richer 9-type `ToastV2` notification-card family is out of scope here.
+ */
+export declare const Toast: {
+    ({ variant, message, title, onClose, closeLabel, className, }: ToastProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface ToastProps {
+    variant: ToastVariant;
+    /** Message text after the bold lead-in. */
+    message: React_2.ReactNode;
+    /** Overrides the variant's default bold lead-in (e.g. "Success!"). */
+    title?: React_2.ReactNode;
+    /** Renders the small circular close badge when provided. */
+    onClose?: () => void;
+    closeLabel?: string;
+    className?: string;
+}
+
+export declare type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
 export declare const Toggle: React_2.ForwardRefExoticComponent<ToggleProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface ToggleProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {