cekat-ui 1.3.9 → 1.3.11

package/dist/index.d.mts

@@ -11,6 +11,8 @@ 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';
@@ -240,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>`. */
@@ -593,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;
@@ -630,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;
@@ -784,6 +889,66 @@ 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 {
@@ -1242,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'> {

package/dist/index.d.ts

@@ -11,6 +11,8 @@ 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';
@@ -240,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>`. */
@@ -593,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;
@@ -630,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;
@@ -784,6 +889,66 @@ 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 {
@@ -1242,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'> {