@cdx-ui/components 0.0.1-beta.8 → 0.0.1-beta.81

package/lib/typescript/providers/toast/types.d.ts

@@ -0,0 +1,422 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { ToastProps } from '../../components/Toast/types';
+/**
+ * Global toast configuration
+ * These values are used as defaults for all toasts unless overridden locally
+ */
+export interface ToastGlobalConfig extends Pick<ToastProps, 'animation' | 'color' | 'placement' | 'isSwipeable'> {
+}
+/**
+ * Insets for spacing from screen edges
+ */
+export interface ToastInsets {
+    /**
+     * Inset from the top edge in pixels (added to safe area inset)
+     * @default Platform-specific: iOS = 0, Android = 12
+     */
+    top?: number;
+    /**
+     * Inset from the bottom edge in pixels (added to safe area inset)
+     * @default Platform-specific: iOS = 6, Android = 12
+     */
+    bottom?: number;
+    /**
+     * Inset from the left edge in pixels (added to safe area inset)
+     * @default 12
+     */
+    left?: number;
+    /**
+     * Inset from the right edge in pixels (added to safe area inset)
+     * @default 12
+     */
+    right?: number;
+}
+/**
+ * Props for the ToastProvider component
+ */
+export interface ToastProviderProps {
+    /**
+     * When true, uses a regular View instead of FullWindowOverlay on iOS for toasts.
+     * Enables React Native element inspector but toasts won't appear above native modals.
+     * @default false
+     */
+    disableFullWindowOverlay?: boolean;
+    /**
+     * Controls whether VoiceOver treats the toast overlay window as a modal container.
+     * When `false`, VoiceOver can still access elements behind the overlay.
+     * When `true`, VoiceOver is restricted to elements inside the overlay.
+     * @default false
+     * @platform ios
+     * @unstable This prop maps directly to the native `accessibilityViewIsModal`
+     * on the container view and may change in a future react-native-screens release.
+     */
+    unstable_accessibilityContainerViewIsModal?: boolean;
+    /**
+     * Global toast configuration
+     * These values are used as defaults for all toasts unless overridden locally
+     * Local configs have precedence over global config
+     */
+    defaultProps?: ToastGlobalConfig;
+    /**
+     * Insets for spacing from screen edges (added to safe area insets)
+     * @default Platform-specific:
+     *   - iOS: { top: 0, bottom: 6, left: 12, right: 12 }
+     *   - Android: { top: 12, bottom: 12, left: 12, right: 12 }
+     */
+    insets?: ToastInsets;
+    /**
+     * Maximum number of visible toasts before opacity starts fading
+     * Controls when toast items begin to fade out as they move beyond the visible stack
+     * @default 3
+     */
+    maxVisibleToasts?: number;
+    /**
+     * Custom wrapper function to wrap the toast content
+     * Receives children and should return a component that wraps them
+     * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+     * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
+     *
+     * @example
+     * ```tsx
+     * <ToastProvider
+     *   contentWrapper={(children) => (
+     *     <KeyboardAvoidingView
+     *       behavior="padding"
+     *       keyboardVerticalOffset={24}
+     *       className="flex-1"
+     *     >
+     *       {children}
+     *     </KeyboardAvoidingView>
+     *   )}
+     * >
+     * ```
+     */
+    contentWrapper?: (children: React.ReactNode) => React.ReactElement;
+    /**
+     * Accessible label for the toast notification region on web.
+     * Screen readers announce this as the landmark name for the ARIA live region
+     * that wraps all visible toasts.
+     * @default 'Notifications'
+     * @platform web
+     */
+    announceLabel?: string;
+    /**
+     * Children to render
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Props passed to the toast component function
+ */
+export interface ToastComponentProps {
+    /**
+     * The unique ID of the toast
+     */
+    id: string;
+    /**
+     * The index of the toast in the array (0-based)
+     */
+    index: number;
+    /**
+     * The total number of toasts currently displayed
+     */
+    total: SharedValue<number>;
+    /**
+     * Heights of all toast items, keyed by toast ID
+     */
+    heights: SharedValue<Record<string, number>>;
+    /**
+     * Maximum number of visible toasts before opacity starts fading
+     * Controls when toast items begin to fade out as they move beyond the visible stack
+     * @default 3
+     */
+    maxVisibleToasts?: number;
+    /**
+     * Show a new toast
+     */
+    show: (options: string | ToastShowOptions) => string;
+    /**
+     * Hide one or more toasts
+     * - No argument: hides the last toast in the array
+     * - "all": hides all toasts
+     * - Single ID: hides that toast
+     * - Array of IDs: hides those toasts
+     */
+    hide: (ids?: (string & {}) | string[] | 'all') => void;
+}
+/**
+ * Configuration for showing a default styled toast (usage pattern 2)
+ * Used when component is not provided
+ */
+export interface ToastShowConfig extends Pick<ToastProps, 'color' | 'placement' | 'isSwipeable' | 'animation'> {
+    /**
+     * Duration in milliseconds before the toast automatically disappears
+     * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
+     * @default 4000
+     */
+    duration?: number | 'persistent';
+    /**
+     * Optional ID for the toast
+     * If not provided, one will be generated automatically
+     */
+    id?: string;
+    /**
+     * Label text for the toast
+     */
+    label?: string;
+    /**
+     * Description text for the toast
+     */
+    description?: string;
+    /**
+     * Action button label text
+     */
+    actionLabel?: string;
+    /**
+     * Callback function called when the action button is pressed
+     * Receives show and hide functions for programmatic toast control
+     */
+    onActionPress?: (helpers: {
+        show: (options: string | ToastShowOptions) => string;
+        hide: (ids?: (string & {}) | string[] | 'all') => void;
+    }) => void;
+    /**
+     * Forge icon component to display in the toast.
+     * Rendered via `Toast.Icon` internally — inherits color-aware coloring automatically.
+     *
+     * @example
+     * ```tsx
+     * import { CheckCircle } from '@cdx-ui/icons';
+     * toast.show({ color: 'success', label: 'Done', icon: CheckCircle });
+     * ```
+     */
+    icon?: import('@cdx-ui/icons').ForgeIcon;
+    /**
+     * Callback function called when the toast is shown
+     */
+    onShow?: () => void;
+    /**
+     * Callback function called when the toast is hidden
+     */
+    onHide?: () => void;
+}
+/**
+ * Options for showing a toast with custom component (usage pattern 3)
+ * Used when component is provided
+ */
+export interface ToastShowOptionsWithComponent {
+    /**
+     * Optional ID for the toast
+     * If not provided, one will be generated automatically
+     */
+    id?: string;
+    /**
+     * A function that receives toast props and returns a React element
+     */
+    component: (props: ToastComponentProps) => React.ReactElement;
+    /**
+     * Duration in milliseconds before the toast automatically disappears
+     * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
+     * @default 4000
+     */
+    duration?: number | 'persistent';
+    /**
+     * Callback function called when the toast is shown
+     */
+    onShow?: () => void;
+    /**
+     * Callback function called when the toast is hidden
+     */
+    onHide?: () => void;
+}
+/**
+ * Conditional type for toast show options
+ * - If component is provided: only id, component, onShow, onHide are allowed
+ * - If component is NOT provided: all config props are available
+ */
+export type ToastShowOptions = ToastShowOptionsWithComponent | (ToastShowConfig & {
+    component?: never;
+});
+/**
+ * Represents a single toast item in the state
+ */
+export interface ToastItem {
+    /**
+     * Unique identifier for the toast
+     */
+    id: string;
+    /**
+     * A function that receives toast props and returns a React element
+     */
+    component: (props: ToastComponentProps) => React.ReactElement;
+    /**
+     * Duration in milliseconds before the toast automatically disappears
+     * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
+     * @default 4000
+     */
+    duration?: number | 'persistent';
+    /**
+     * Callback function called when the toast is shown
+     */
+    onShow?: () => void;
+    /**
+     * Callback function called when the toast is hidden
+     */
+    onHide?: () => void;
+    /**
+     * True after `hide()` has been called but before the toast has actually
+     * been removed from the array. Used on web to keep the DOM node mounted
+     * through its CSS exit transition; on native this remains false because
+     * Reanimated `exiting` handles the exit animation before unmount.
+     * @internal
+     */
+    pendingRemoval?: boolean;
+}
+/**
+ * Actions for the toast reducer.
+ *
+ * Removal happens in two phases so web can play a CSS exit transition
+ * before the node is torn down:
+ * 1. `MARK_CLOSED` flips `pendingRemoval` on the matching toasts.
+ * 2. `REMOVE` actually filters them out of the array.
+ *
+ * On native, `hide()` dispatches `REMOVE` directly because Reanimated's
+ * layout animation plays before unmount without a lingering state.
+ */
+export type ToastAction = {
+    type: 'SHOW';
+    payload: ToastItem;
+} | {
+    type: 'MARK_CLOSED';
+    payload: {
+        ids: string[];
+    };
+} | {
+    type: 'REMOVE';
+    payload: {
+        ids: string[];
+    };
+};
+/**
+ * Toast manager API
+ */
+export interface ToastManager {
+    /**
+     * Show a toast
+     * @param options - Toast configuration options or simple string
+     * @returns The ID of the shown toast
+     *
+     * @example
+     * ```tsx
+     * const toast = useToast();
+     *
+     * // Simple string (usage pattern 1)
+     * toast.show('This is toast');
+     *
+     * // Config object with default styling (usage pattern 2)
+     * toast.show({
+     *   label: 'Success!',
+     *   description: 'Your action was completed',
+     *   color: 'success',
+     *   actionLabel: 'Undo',
+     *   onActionPress: ({ show, hide }) => hide(),
+     * });
+     *
+     * // Custom component (usage pattern 3)
+     * toast.show({
+     *   component: (props) => <Toast>Hello</Toast>,
+     * });
+     *
+     * // With custom ID
+     * toast.show({ id: 'my-toast', component: (props) => <Toast>Hello</Toast> });
+     * ```
+     */
+    show: (options: string | ToastShowOptions) => string;
+    /**
+     * Hide one or more toasts
+     *
+     * @param ids - Optional ID(s) of toast(s) to hide
+     * - No argument: hides the last toast in the array
+     * - "all": hides all toasts
+     * - Single ID: hides that toast
+     * - Array of IDs: hides those toasts
+     *
+     * @example
+     * ```tsx
+     * const toast = useToast();
+     *
+     * toast.hide();                    // Hide the last toast
+     * toast.hide('all');               // Hide all toasts
+     * toast.hide('my-toast');          // Hide specific toast
+     * toast.hide(['toast-1', 'toast-2']); // Hide multiple toasts
+     * ```
+     */
+    hide: (ids?: (string & {}) | string[] | 'all') => void;
+    /**
+     * Pause all auto-dismiss timers.
+     *
+     * On web this is called automatically when the pointer enters the toast
+     * region, a toast receives focus, or the browser tab becomes hidden
+     * (WCAG 2.2.1 compliance). On native this is a no-op unless called
+     * explicitly by a consumer.
+     */
+    pauseAll: () => void;
+    /**
+     * Resume all previously paused auto-dismiss timers.
+     *
+     * Each timer resumes with only the remaining duration that was left when
+     * `pauseAll()` was invoked. On native this is a no-op unless called
+     * explicitly by a consumer.
+     */
+    resumeAll: () => void;
+}
+/**
+ * Props for the ToastItemRenderer component
+ */
+export interface ToastItemRendererProps {
+    /**
+     * The toast item to render
+     */
+    toastItem: ToastItem;
+    /**
+     * The index of the toast in the array (0-based)
+     */
+    index: number;
+    /**
+     * The total number of toasts currently displayed
+     */
+    total: SharedValue<number>;
+    /**
+     * Heights of all toast items, keyed by toast ID
+     */
+    heights: SharedValue<Record<string, number>>;
+    /**
+     * Maximum number of visible toasts before opacity starts fading
+     * Controls when toast items begin to fade out as they move beyond the visible stack
+     * @default 3
+     */
+    maxVisibleToasts?: number;
+    /**
+     * Show a new toast
+     */
+    show: (options: string | ToastShowOptions) => string;
+    /**
+     * Hide one or more toasts
+     * - No argument: hides the last toast in the array
+     * - "all": hides all toasts
+     * - Single ID: hides that toast
+     * - Array of IDs: hides those toasts
+     */
+    hide: (ids?: (string & {}) | string[] | 'all') => void;
+}
+/**
+ * Context value for the toast provider
+ */
+export interface ToasterContextValue {
+    toast: ToastManager;
+    /**
+     * Whether any toast is currently visible
+     */
+    isToastVisible: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/providers/toast/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/providers/toast/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/styles/primitives.d.ts

@@ -1,22 +1,53 @@
+/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
 export declare const COLOR_BG_PRIMARY = "bg-white";
+/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
 export declare const COLOR_BG_SUBTLE = "bg-slate-50";
+/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
 export declare const COLOR_BG_MUTED = "bg-slate-100";
+/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
 export declare const COLOR_BG_INVERSE = "bg-slate-900";
+/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
 export declare const COLOR_BORDER_DEFAULT = "border-slate-200";
+/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
 export declare const COLOR_BORDER_STRONG = "border-slate-300";
+/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
 export declare const COLOR_BORDER_FOCUS = "border-slate-900";
+/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
 export declare const COLOR_BORDER_INVALID = "border-red-500";
+/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
 export declare const COLOR_TEXT_PRIMARY = "text-slate-900";
+/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
 export declare const COLOR_TEXT_SECONDARY = "text-slate-500";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_MUTED = "text-slate-400";
+/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
 export declare const COLOR_TEXT_INVERSE = "text-white";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_PLACEHOLDER = "text-slate-400";
+/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
 export declare const COLOR_TEXT_INVALID = "text-red-600";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_BRAND_DEFAULT = "bg-slate-900";
+/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
 export declare const COLOR_BRAND_HOVER = "bg-slate-800";
+/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
 export declare const COLOR_BRAND_ACTIVE = "bg-slate-700";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_ACCENT_DEFAULT = "bg-slate-900";
+/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
 export declare const COLOR_ACCENT_BORDER = "border-slate-900";
+/**
+ * @deprecated Use semantic token classes directly instead. Map each color key to its
+ * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
+ * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
+ * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
+ * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
+ * - `border` → `border-stroke-{color}` (--color-stroke-{color})
+ * - `text` → `text-content-{color}` (--color-content-{color})
+ * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
+ *
+ * See Button/styles.ts for a complete migration example.
+ */
 export declare const SEMANTIC_COLORS: {
     readonly action: {
         readonly bg: "bg-slate-900";
@@ -59,12 +90,19 @@ export declare const SEMANTIC_COLORS: {
         readonly ring: "ring-sky-400/50";
     };
 };
+/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
 export declare const FOCUS_RING = "ring-2 ring-slate-400/50 ring-offset-2";
+/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
 export declare const RADIUS_SM = "rounded-lg";
+/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
 export declare const RADIUS_MD = "rounded-xl";
+/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
 export declare const RADIUS_FULL = "rounded-full";
+/** @deprecated Use `shadow-sm` directly instead */
 export declare const SHADOW_SM = "shadow-sm";
+/** @deprecated Use `shadow-md` directly instead */
 export declare const SHADOW_MD = "shadow-md";
+/** @deprecated */
 export declare const SIZE_SCALE: {
     readonly default: {
         readonly height: "h-10";

package/lib/typescript/styles/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAG1C,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,kFAAkF;AAClF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,uKAAuK;AACvK,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,sGAAsG;AACtG,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,wGAAwG;AACxG,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,yGAAyG;AACzG,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,6IAA6I;AAC7I,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,qFAAqF;AACrF,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,iHAAiH;AACjH,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAI1C,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,kBAAkB;AAClB,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}

package/lib/typescript/utils/positionToDataIcon.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Position hint accepted by icon/spinner-bearing styled slots
+ * (`Button.Icon`, `Button.Spinner`, `Chip.Icon`, etc.). Maps to a logical
+ * `data-icon` attribute that CVA targets for leading/trailing padding.
+ *
+ * `'leading'`  → `data-icon="inline-start"`
+ * `'trailing'` → `data-icon="inline-end"`
+ */
+export type IconSlotPosition = 'leading' | 'trailing';
+/**
+ * Returns the data-attribute spread props for the requested position, or
+ * `undefined` when no position is set (so the attribute is omitted entirely
+ * and baseline spacing applies).
+ *
+ * Spread the result onto the rendered element:
+ *
+ * ```tsx
+ * <Icon {...positionToDataIcon(position)} />
+ * ```
+ *
+ * Spacing rules live in CVA variant strings, targeting the attribute via
+ * logical-property utilities so RTL flips automatically:
+ *
+ * ```ts
+ * cva(['data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5'], { ... });
+ * ```
+ */
+export declare function positionToDataIcon(position?: IconSlotPosition): Record<string, string> | undefined;
+//# sourceMappingURL=positionToDataIcon.d.ts.map

package/lib/typescript/utils/positionToDataIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positionToDataIcon.d.ts","sourceRoot":"","sources":["../../../src/utils/positionToDataIcon.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,CAAC,EAAE,gBAAgB,sCAG7D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.81",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -16,10 +16,10 @@
     },
     "./styles.css": "./src/styles.css",
     "./metro": {
-      "types": "./lib/typescript/metro/withCdxMetroConfig.d.ts",
-      "require": "./lib/commonjs/metro/withCdxMetroConfig.js",
-      "import": "./lib/module/metro/withCdxMetroConfig.js",
-      "default": "./lib/commonjs/metro/withCdxMetroConfig.js"
+      "types": "./lib/typescript/metro/withForgeMetroConfig.d.ts",
+      "require": "./lib/commonjs/metro/withForgeMetroConfig.js",
+      "import": "./lib/module/metro/withForgeMetroConfig.js",
+      "default": "./lib/commonjs/metro/withForgeMetroConfig.js"
     }
   },
   "files": [
@@ -66,12 +66,14 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
-    "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.8",
-    "@cdx-ui/utils": "0.0.1-beta.8",
-    "@cdx-ui/icons": "0.0.1-beta.8"
+    "uniwind": "1.10.0",
+    "@cdx-ui/primitives": "0.0.1-beta.81",
+    "@cdx-ui/utils": "0.0.1-beta.81",
+    "@cdx-ui/icons": "0.0.1-beta.81"
   },
   "devDependencies": {
+    "@react-navigation/bottom-tabs": "*",
+    "react-native-screens": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
     "react": "*",
@@ -96,6 +98,6 @@
   "scripts": {
     "build": "bob build",
     "lint": "eslint src/",
-    "test": "jest --config ../../jest.config.js"
+    "test": "jest --config ../../jest.config.js --selectProjects rntl axe"
   }
 }

package/src/animation/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useCombinedAnimationDisabledState';

package/src/animation/hooks/useCombinedAnimationDisabledState.ts

@@ -0,0 +1,46 @@
+import {
+  useGlobalAnimationSettings,
+  useAnimationSettings,
+} from '../../providers/animation-settings';
+import type { AnimationRoot } from '../types';
+import { getCombinedAnimationDisabledState, getRootAnimationState } from '../utils';
+
+/**
+ * Hook to combine global, parent, and own animation disabled states
+ *
+ * @description
+ * This hook combines three sources of animation disabled state:
+ * 1. Global state from GlobalAnimationSettingsProvider
+ * 2. Parent state from AnimationSettingsContext (component tree cascading)
+ * 3. Own state from the component's animation prop
+ *
+ * Priority: Global > Parent > Own (global wins if enabled)
+ *
+ * @param animation - Root animation configuration for the component
+ * @returns Combined isAllAnimationsDisabled value
+ *
+ * @example
+ * ```tsx
+ * const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+ * ```
+ */
+export function useCombinedAnimationDisabledState<TConfig extends Record<string, any>>(
+  animation: AnimationRoot<TConfig> | undefined,
+): boolean {
+  // Get global animation disabled state
+  const { globalIsAllAnimationsDisabled } = useGlobalAnimationSettings();
+
+  // Read parent animation disabled state from global context
+  const parentAnimationSettingsContext = useAnimationSettings();
+  const parentIsAllAnimationsDisabled = parentAnimationSettingsContext?.isAllAnimationsDisabled;
+
+  // Get own animation disabled state
+  const { isAllAnimationsDisabled: ownIsAllAnimationsDisabled } = getRootAnimationState(animation);
+
+  // Combine global, parent, and own disable-all states (global > parent > own)
+  return getCombinedAnimationDisabledState({
+    globalIsAllAnimationsDisabled,
+    parentIsAllAnimationsDisabled,
+    ownIsAllAnimationsDisabled,
+  });
+}

package/src/animation/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './hooks';
+export * from './utils';