@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.180

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

@@ -0,0 +1,436 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { ToastPlacement, 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;
+    /**
+     * Placement used to isolate this toast's stack metrics.
+     */
+    placement: ToastPlacement;
+    /**
+     * The index of the toast within its placement stack (0-based).
+     */
+    index: number;
+    /**
+     * The total number of toasts currently displayed at this placement.
+     */
+    total: SharedValue<number>;
+    /**
+     * Heights of toast items at this placement, 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;
+    /**
+     * Placement used for stack isolation and passed to the custom component.
+     * @default ToastProvider default placement, then 'bottom'
+     */
+    placement?: ToastPlacement;
+    /**
+     * 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: lifecycle options plus placement 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;
+    /**
+     * Resolved placement used to isolate stack animation metrics.
+     * @internal
+     */
+    placement: ToastPlacement;
+    /**
+     * 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 within its placement stack (0-based).
+     */
+    index: number;
+    /**
+     * The total number of toasts currently displayed at this placement.
+     */
+    total: SharedValue<number>;
+    /**
+     * Heights of toast items at this placement, 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/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TRANSITION_COLORS = "transition-colors duration-150";
+export declare const DISABLED_OPACITY = "data-[disabled=true]:opacity-50";
+export declare const DISABLED_CURSOR = "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none";
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/styles/constants.ts"],"names":[],"mappings":"AAIA,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,12 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.18",
+  "version": "0.0.1-beta.180",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dfh-candescent-ui/ui-component-framework",
+    "directory": "packages/components"
+  },
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -14,18 +20,13 @@
       "require": "./lib/commonjs/index.js",
       "default": "./lib/module/index.js"
     },
-    "./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"
-    }
+    "./styles.css": "./src/styles.css"
   },
   "files": [
     "lib",
     "src",
-    "!src/figma"
+    "!src/figma",
+    "coverage.svg"
   ],
   "react-native-builder-bob": {
     "source": "src",
@@ -45,9 +46,12 @@
     "@shopify/flash-list": ">=2.0.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-native": ">=0.76.0",
-    "react-native-reanimated": ">=3.0.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-svg": "^13.0.0 || ^14.0.0 || ^15.0.0",
     "react-native-safe-area-context": ">=4.0.0",
-    "react-native-web": ">=0.19.0"
+    "react-native-web": ">=0.19.0",
+    "react-native-worklets": ">=0.4.0"
   },
   "peerDependenciesMeta": {
     "@shopify/flash-list": {
@@ -56,28 +60,42 @@
     "react-native": {
       "optional": true
     },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
     "react-native-reanimated": {
       "optional": true
     },
+    "react-native-svg": {
+      "optional": true
+    },
     "react-native-web": {
       "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@gorhom/bottom-sheet": "^5.2.6",
-    "class-variance-authority": "^0.7.1",
-    "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.18",
-    "@cdx-ui/utils": "0.0.1-beta.18",
-    "@cdx-ui/icons": "0.0.1-beta.18"
+    "@gorhom/bottom-sheet": "5.2.14",
+    "@marceloterreiro/flash-calendar": "2.0.0",
+    "react-native-reanimated-carousel": "5.0.0-beta.5",
+    "uniwind": "1.10.0",
+    "@cdx-ui/primitives": "0.0.1-beta.180",
+    "@cdx-ui/utils": "0.0.1-beta.180",
+    "@cdx-ui/icons": "0.0.1-beta.180",
+    "@cdx-ui/formatters": "0.0.1-beta.180"
   },
   "devDependencies": {
-    "@types/react": "*",
+    "@react-navigation/bottom-tabs": "*",
+    "react-native-screens": "*",
+    "@types/react": "19.1.17",
     "@types/react-dom": "*",
-    "react": "*",
-    "react-dom": "*",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native": "*",
     "react-native-builder-bob": "*",
+    "react-native-svg": "*",
     "react-native-web": "*",
     "typescript": "*"
   },
@@ -96,6 +114,6 @@
   "scripts": {
     "build": "bob build",
     "lint": "eslint src/",
-    "test": "jest --config ../../jest.config.js"
+    "test": "node ../../scripts/split-jest-coverage.mjs rntl axe -- --config ../../jest.config.js"
   }
 }

package/src/animation/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useCombinedAnimationDisabledState';
+export * from './usePopupRootAnimation';
+export * from './usePopupOverlayAnimation';
+export * from './usePopupDialogContentAnimation';

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,
+  });
+}