@cdx-ui/components 0.0.1-beta.79 → 0.0.1-beta.80

package/lib/commonjs/providers/toast/toast-item-renderer.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastItemRenderer = void 0;
+var _react = require("react");
+/**
+ * Memoized toast item component to prevent unnecessary re-renders
+ * Only re-renders when the toast item itself changes
+ */
+const ToastItemRenderer = exports.ToastItemRenderer = /*#__PURE__*/(0, _react.memo)(({
+  toastItem,
+  show,
+  hide,
+  index,
+  total,
+  heights,
+  maxVisibleToasts
+}) => {
+  if (typeof toastItem.component !== 'function') {
+    throw new Error('Toast component must be a function that receives ToastComponentProps');
+  }
+  const content = toastItem.component({
+    id: toastItem.id,
+    index,
+    total,
+    heights,
+    maxVisibleToasts,
+    show,
+    hide
+  });
+  return content;
+}, (prevProps, nextProps) => {
+  // Only re-render if the toast ID, component reference, index, or
+  // pending-removal flag changed. `pendingRemoval` flips when the
+  // provider marks a toast closed on web so the Toast component can
+  // play its exit transition — the renderer must propagate that
+  // change even though the id and component reference are unchanged.
+  // show, hide, total, and heights are stable references.
+  return prevProps.toastItem.id === nextProps.toastItem.id && prevProps.toastItem.component === nextProps.toastItem.component && prevProps.toastItem.pendingRemoval === nextProps.toastItem.pendingRemoval && prevProps.index === nextProps.index;
+});
+//# sourceMappingURL=toast-item-renderer.js.map

package/lib/commonjs/providers/toast/toast-item-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","ToastItemRenderer","exports","memo","toastItem","show","hide","index","total","heights","maxVisibleToasts","component","Error","content","id","prevProps","nextProps","pendingRemoval"],"sourceRoot":"../../../../src","sources":["providers/toast/toast-item-renderer.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGA;AACA;AACA;AACA;AACO,MAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,WAAI,EACnC,CAAC;EAAEC,SAAS;EAAEC,IAAI;EAAEC,IAAI;EAAEC,KAAK;EAAEC,KAAK;EAAEC,OAAO;EAAEC;AAAyC,CAAC,KAAK;EAC9F,IAAI,OAAON,SAAS,CAACO,SAAS,KAAK,UAAU,EAAE;IAC7C,MAAM,IAAIC,KAAK,CAAC,sEAAsE,CAAC;EACzF;EAEA,MAAMC,OAAO,GAAGT,SAAS,CAACO,SAAS,CAAC;IAClCG,EAAE,EAAEV,SAAS,CAACU,EAAE;IAChBP,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,gBAAgB;IAChBL,IAAI;IACJC;EACF,CAAC,CAAC;EAEF,OAAOO,OAAO;AAChB,CAAC,EACD,CAACE,SAAS,EAAEC,SAAS,KAAK;EACxB;EACA;EACA;EACA;EACA;EACA;EACA,OACED,SAAS,CAACX,SAAS,CAACU,EAAE,KAAKE,SAAS,CAACZ,SAAS,CAACU,EAAE,IACjDC,SAAS,CAACX,SAAS,CAACO,SAAS,KAAKK,SAAS,CAACZ,SAAS,CAACO,SAAS,IAC/DI,SAAS,CAACX,SAAS,CAACa,cAAc,KAAKD,SAAS,CAACZ,SAAS,CAACa,cAAc,IACzEF,SAAS,CAACR,KAAK,KAAKS,SAAS,CAACT,KAAK;AAEvC,CACF,CAAC","ignoreList":[]}

package/lib/commonjs/providers/toast/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/providers/toast/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["providers/toast/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/animation/hooks/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from './useCombinedAnimationDisabledState';
+//# sourceMappingURL=index.js.map

package/lib/module/animation/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["animation/hooks/index.ts"],"mappings":";;AAAA,cAAc,qCAAqC","ignoreList":[]}

package/lib/module/animation/hooks/useCombinedAnimationDisabledState.js

@@ -0,0 +1,47 @@
+"use strict";
+
+import { useGlobalAnimationSettings, useAnimationSettings } from '../../providers/animation-settings';
+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(animation) {
+  // 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
+  });
+}
+//# sourceMappingURL=useCombinedAnimationDisabledState.js.map

package/lib/module/animation/hooks/useCombinedAnimationDisabledState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useGlobalAnimationSettings","useAnimationSettings","getCombinedAnimationDisabledState","getRootAnimationState","useCombinedAnimationDisabledState","animation","globalIsAllAnimationsDisabled","parentAnimationSettingsContext","parentIsAllAnimationsDisabled","isAllAnimationsDisabled","ownIsAllAnimationsDisabled"],"sourceRoot":"../../../../src","sources":["animation/hooks/useCombinedAnimationDisabledState.ts"],"mappings":";;AAAA,SACEA,0BAA0B,EAC1BC,oBAAoB,QACf,oCAAoC;AAE3C,SAASC,iCAAiC,EAAEC,qBAAqB,QAAQ,UAAU;;AAEnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iCAAiCA,CAC/CC,SAA6C,EACpC;EACT;EACA,MAAM;IAAEC;EAA8B,CAAC,GAAGN,0BAA0B,CAAC,CAAC;;EAEtE;EACA,MAAMO,8BAA8B,GAAGN,oBAAoB,CAAC,CAAC;EAC7D,MAAMO,6BAA6B,GAAGD,8BAA8B,EAAEE,uBAAuB;;EAE7F;EACA,MAAM;IAAEA,uBAAuB,EAAEC;EAA2B,CAAC,GAAGP,qBAAqB,CAACE,SAAS,CAAC;;EAEhG;EACA,OAAOH,iCAAiC,CAAC;IACvCI,6BAA6B;IAC7BE,6BAA6B;IAC7BE;EACF,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/module/animation/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export * from './types';
+export * from './hooks';
+export * from './utils';
+//# sourceMappingURL=index.js.map

package/lib/module/animation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["animation/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,SAAS","ignoreList":[]}

package/lib/module/animation/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/animation/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["animation/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/animation/utils.js

@@ -0,0 +1,212 @@
+"use strict";
+
+/**
+ * Check if the entire animation is disabled
+ * @param animation - Animation configuration
+ * @returns true if animation is disabled
+ */
+export function isAnimationDisabled(animation) {
+  // Check top-level disabled values
+  if (animation === false || animation === 'disabled') {
+    return true;
+  }
+
+  // Check state property in config objects
+  if (typeof animation === 'object' && animation !== null && 'state' in animation) {
+    const state = animation.state;
+    return state === false || state === 'disabled';
+  }
+  return false;
+}
+
+/**
+ * Check if root animation should cascade disable to all children
+ * @param animation - Root animation configuration
+ * @returns true if all animations should be disabled (including children)
+ */
+export function shouldDisableAll(animation) {
+  // Check top-level disable-all value
+  if (animation === 'disable-all') {
+    return true;
+  }
+
+  // Check state property in config objects
+  if (typeof animation === 'object' && animation !== null && 'state' in animation) {
+    const state = animation.state;
+    return state === 'disable-all';
+  }
+  return false;
+}
+
+/**
+ * Get animation state including config and disabled status
+ * @param animation - Animation configuration
+ * @returns Object with animationConfig and isAnimationDisabled
+ */
+export function getAnimationState(animation) {
+  const isDisabled = isAnimationDisabled(animation);
+  // Always extract config when it's an object, regardless of disabled state
+  // This allows users to customize colors/properties even when animations are disabled
+  const config = typeof animation === 'object' && animation !== null ? animation : undefined;
+  return {
+    animationConfig: config,
+    isAnimationDisabled: isDisabled
+  };
+}
+
+/**
+ * Get root animation state including config, disabled status, and cascade flag
+ * @param animation - Root animation configuration
+ * @returns Object with animationConfig, isAnimationDisabled, and isAllAnimationsDisabled
+ */
+export function getRootAnimationState(animation) {
+  const shouldCascade = shouldDisableAll(animation);
+  const isDisabled = isAnimationDisabled(animation) || shouldCascade;
+  // Always extract config when it's an object, regardless of disabled state
+  // This allows users to customize colors/properties even when animations are disabled
+  const config = typeof animation === 'object' && animation !== null ? animation : undefined;
+  return {
+    animationConfig: config,
+    isAnimationDisabled: isDisabled,
+    isAllAnimationsDisabled: shouldCascade
+  };
+}
+
+/**
+ * Get animation value property or return default
+ * Extracts a property from the animation value config object
+ *
+ * @param options - Object containing animationValue, property, and defaultValue
+ * @param options.animationValue - The animation value configuration
+ * @param options.property - Property name to extract
+ * @param options.defaultValue - Default value if property is not found
+ * @returns The property value or default (never undefined)
+ *
+ * @example
+ * const scaleValue = getAnimationValueProperty({
+ *   animationValue: animation?.scale,
+ *   property: 'value',
+ *   defaultValue: 0.95
+ * });
+ */
+export function getAnimationValueProperty(options) {
+  // If animation value is undefined, return default
+  if (options.animationValue === undefined) {
+    return options.defaultValue;
+  }
+
+  // Return the property value if it exists, otherwise return default
+  return options.animationValue[options.property] ?? options.defaultValue;
+}
+
+/**
+ * Get animation value merged config or return default
+ * Merges the animation value config with defaults, useful when you need multiple properties
+ *
+ * @param options - Object containing animationValue, property, and defaultValue
+ * @param options.animationValue - The animation value configuration
+ * @param options.property - Property name to extract from the config
+ * @param options.defaultValue - Default configuration object
+ * @returns The merged config object or default
+ *
+ * @example
+ * const scaleConfig = getAnimationValueMergedConfig({
+ *   animationValue: animation?.scale,
+ *   property: 'timingConfig',
+ *   defaultValue: { duration: 150 }
+ * });
+ */
+export function getAnimationValueMergedConfig(options) {
+  // If animation value is undefined, return default
+  if (options.animationValue === undefined) {
+    return options.defaultValue;
+  }
+  const value = options.animationValue[options.property];
+
+  // If the specific property value is undefined or not an object, return default
+  if (value === undefined || typeof value !== 'object') {
+    return options.defaultValue;
+  }
+
+  // Merge with defaults to ensure all properties exist
+  return {
+    ...options.defaultValue,
+    ...value
+  };
+}
+
+/**
+ * Determine if animations should be disabled based on disabled flags
+ * Priority: isAllAnimationsDisabled > isAnimationDisabled
+ *
+ * @param options - Object containing isAnimationDisabled and isAllAnimationsDisabled
+ * @param options.isAnimationDisabled - Whether animation is explicitly disabled
+ * @param options.isAllAnimationsDisabled - Whether all animations should be disabled (cascading from root/global)
+ * @returns true if animations should be disabled, false otherwise
+ *
+ * @example
+ * const isDisabled = getIsAnimationDisabledValue({
+ *   isAnimationDisabled: false,
+ *   isAllAnimationsDisabled: true
+ * });
+ * // Returns: true (all animations disabled takes priority)
+ */
+export function getIsAnimationDisabledValue(options) {
+  const {
+    isAnimationDisabled: isDisabled,
+    isAllAnimationsDisabled
+  } = options;
+
+  // First priority: if all animations are disabled, return true
+  if (isAllAnimationsDisabled === true) {
+    return true;
+  }
+
+  // Second priority: if this animation is disabled, return true
+  if (isDisabled) {
+    return true;
+  }
+
+  // Default: animations are enabled
+  return false;
+}
+
+/**
+ * Combine global, parent, and own animation disabled states
+ * Priority: Global > Parent > Own (global wins if enabled)
+ *
+ * @param options - Object containing globalIsAllAnimationsDisabled, parentIsAllAnimationsDisabled, and ownIsAllAnimationsDisabled
+ * @param options.globalIsAllAnimationsDisabled - Whether global provider has disable-all (from GlobalAnimationSettingsProvider)
+ * @param options.parentIsAllAnimationsDisabled - Whether parent context has disable-all (from AnimationSettingsContext)
+ * @param options.ownIsAllAnimationsDisabled - Whether own animation prop has disable-all
+ * @returns Combined isAllAnimationsDisabled value (global || parent || own)
+ *
+ * @example
+ * const combined = getCombinedAnimationDisabledState({
+ *   globalIsAllAnimationsDisabled: true,
+ *   parentIsAllAnimationsDisabled: false,
+ *   ownIsAllAnimationsDisabled: false
+ * });
+ * // Returns: true (global wins)
+ */
+export function getCombinedAnimationDisabledState(options) {
+  const {
+    globalIsAllAnimationsDisabled,
+    parentIsAllAnimationsDisabled,
+    ownIsAllAnimationsDisabled
+  } = options;
+
+  // Global always wins if it has disable-all
+  if (globalIsAllAnimationsDisabled === true) {
+    return true;
+  }
+
+  // Parent wins if it has disable-all
+  if (parentIsAllAnimationsDisabled === true) {
+    return true;
+  }
+
+  // Otherwise use own value
+  return ownIsAllAnimationsDisabled;
+}
+//# sourceMappingURL=utils.js.map

package/lib/module/animation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isAnimationDisabled","animation","state","shouldDisableAll","getAnimationState","isDisabled","config","undefined","animationConfig","getRootAnimationState","shouldCascade","isAllAnimationsDisabled","getAnimationValueProperty","options","animationValue","defaultValue","property","getAnimationValueMergedConfig","value","getIsAnimationDisabledValue","getCombinedAnimationDisabledState","globalIsAllAnimationsDisabled","parentIsAllAnimationsDisabled","ownIsAllAnimationsDisabled"],"sourceRoot":"../../../src","sources":["animation/utils.ts"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CACjCC,SAAkE,EACzD;EACT;EACA,IAAIA,SAAS,KAAK,KAAK,IAAIA,SAAS,KAAK,UAAU,EAAE;IACnD,OAAO,IAAI;EACb;;EAEA;EACA,IAAI,OAAOA,SAAS,KAAK,QAAQ,IAAIA,SAAS,KAAK,IAAI,IAAI,OAAO,IAAIA,SAAS,EAAE;IAC/E,MAAMC,KAAK,GAAGD,SAAS,CAACC,KAAK;IAC7B,OAAOA,KAAK,KAAK,KAAK,IAAIA,KAAK,KAAK,UAAU;EAChD;EAEA,OAAO,KAAK;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC9BF,SAA6C,EACpC;EACT;EACA,IAAIA,SAAS,KAAK,aAAa,EAAE;IAC/B,OAAO,IAAI;EACb;;EAEA;EACA,IAAI,OAAOA,SAAS,KAAK,QAAQ,IAAIA,SAAS,KAAK,IAAI,IAAI,OAAO,IAAIA,SAAS,EAAE;IAC/E,MAAMC,KAAK,GAAGD,SAAS,CAACC,KAAK;IAC7B,OAAOA,KAAK,KAAK,aAAa;EAChC;EAEA,OAAO,KAAK;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,iBAAiBA,CAC/BH,SAAyC,EAIzC;EACA,MAAMI,UAAU,GAAGL,mBAAmB,CAACC,SAAS,CAAC;EACjD;EACA;EACA,MAAMK,MAAM,GACV,OAAOL,SAAS,KAAK,QAAQ,IAAIA,SAAS,KAAK,IAAI,GAAIA,SAAS,GAAeM,SAAS;EAE1F,OAAO;IACLC,eAAe,EAAEF,MAAM;IACvBN,mBAAmB,EAAEK;EACvB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,qBAAqBA,CACnCR,SAA6C,EAK7C;EACA,MAAMS,aAAa,GAAGP,gBAAgB,CAACF,SAAS,CAAC;EACjD,MAAMI,UAAU,GAAGL,mBAAmB,CAACC,SAAS,CAAC,IAAIS,aAAa;EAClE;EACA;EACA,MAAMJ,MAAM,GACV,OAAOL,SAAS,KAAK,QAAQ,IAAIA,SAAS,KAAK,IAAI,GAAIA,SAAS,GAAeM,SAAS;EAE1F,OAAO;IACLC,eAAe,EAAEF,MAAM;IACvBN,mBAAmB,EAAEK,UAAU;IAC/BM,uBAAuB,EAAED;EAC3B,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,yBAAyBA,CAIvCC,OAID,EAAK;EACJ;EACA,IAAIA,OAAO,CAACC,cAAc,KAAKP,SAAS,EAAE;IACxC,OAAOM,OAAO,CAACE,YAAY;EAC7B;;EAEA;EACA,OAAOF,OAAO,CAACC,cAAc,CAACD,OAAO,CAACG,QAAQ,CAAC,IAAIH,OAAO,CAACE,YAAY;AACzE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,6BAA6BA,CAG3CJ,OAID,EAAc;EACb;EACA,IAAIA,OAAO,CAACC,cAAc,KAAKP,SAAS,EAAE;IACxC,OAAOM,OAAO,CAACE,YAAY;EAC7B;EAEA,MAAMG,KAAK,GAAGL,OAAO,CAACC,cAAc,CAACD,OAAO,CAACG,QAAQ,CAAC;;EAEtD;EACA,IAAIE,KAAK,KAAKX,SAAS,IAAI,OAAOW,KAAK,KAAK,QAAQ,EAAE;IACpD,OAAOL,OAAO,CAACE,YAAY;EAC7B;;EAEA;EACA,OAAO;IAAE,GAAGF,OAAO,CAACE,YAAY;IAAE,GAAGG;EAAM,CAAC;AAC9C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,2BAA2BA,CAACN,OAG3C,EAAW;EACV,MAAM;IAAEb,mBAAmB,EAAEK,UAAU;IAAEM;EAAwB,CAAC,GAAGE,OAAO;;EAE5E;EACA,IAAIF,uBAAuB,KAAK,IAAI,EAAE;IACpC,OAAO,IAAI;EACb;;EAEA;EACA,IAAIN,UAAU,EAAE;IACd,OAAO,IAAI;EACb;;EAEA;EACA,OAAO,KAAK;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASe,iCAAiCA,CAACP,OAIjD,EAAW;EACV,MAAM;IACJQ,6BAA6B;IAC7BC,6BAA6B;IAC7BC;EACF,CAAC,GAAGV,OAAO;;EAEX;EACA,IAAIQ,6BAA6B,KAAK,IAAI,EAAE;IAC1C,OAAO,IAAI;EACb;;EAEA;EACA,IAAIC,6BAA6B,KAAK,IAAI,EAAE;IAC1C,OAAO,IAAI;EACb;;EAEA;EACA,OAAOC,0BAA0B;AACnC","ignoreList":[]}

package/lib/module/components/CLAUDE.md

@@ -120,7 +120,7 @@ Where: **styled layer.** Pure styling hint with no behavior or a11y semantics
 Each component follows this structure (see `Button/index.tsx`):
 
 1. **Imports** — RN base components, primitive `Root` and `Slot` from `@cdx-ui/primitives`, `cn` + style context from `@cdx-ui/utils`, variant functions from `./styles`
-2. **Scope constant** — `const SCOPE = 'COMPONENT_NAME'` for `withStyleContext` / `useStyleContext` (or a `ParentContext.Provider` wrapper for static variant context)
+2. **Scope constant** — `const SCOPE = 'COMPONENT_NAME'` for `useStyleContext` with a `ParentContext.Provider` wrapper for static variant context
 3. **Root component** — renders the primitive Root (or a host element directly when no primitive exists), spreads `dataAttributes({ slot: '<component>' })`
 4. **Sub-slots** — each accepts `asChild`, renders a host element via `const Comp = asChild ? Slot : DefaultElement`, spreads `dataAttributes({ slot: '<component>-<slot>' })`. Sub-slots **do not** call `useButtonContext()` (or its equivalent) unless their own styling reacts to interaction state.
 5. **Position-aware sub-slots** — icon/spinner-style slots accept `position?: 'leading' | 'trailing'` and emit `data-icon` via `dataAttributes({ icon: '...' })`.

package/lib/module/components/Card/index.js

@@ -1,8 +1,9 @@
 "use strict";
 
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { cardContentVariants, cardFooterVariants, cardHeaderVariants, cardRootVariants } from './styles';
 
 // =============================================================================
@@ -10,25 +11,36 @@ import { cardContentVariants, cardFooterVariants, cardHeaderVariants, cardRootVa
 // =============================================================================
 import { jsx as _jsx } from "react/jsx-runtime";
 const SCOPE = 'CARD';
-const Root = withStyleContext(View, SCOPE);
 const useCardStyleContext = () => useStyleContext(SCOPE);
 const CardRoot = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
   fullBleed,
   ...props
 }, ref) => {
-  const computedClassName = cn(cardRootVariants(), className);
-  return /*#__PURE__*/_jsx(Root, {
-    ref: ref,
-    className: computedClassName,
-    style: style,
-    context: {
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
       fullBleed
-    },
-    ...props,
-    children: children
+    }
+  }), [parent, fullBleed]);
+  const computedClassName = cn(cardRootVariants(), className);
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(Comp, {
+      ref: ref,
+      className: computedClassName,
+      style: style,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        slot: 'card'
+      })),
+      children: children
+    })
   });
 });
 CardRoot.displayName = 'Card';
@@ -38,17 +50,22 @@ CardRoot.displayName = 'Card';
 // =============================================================================
 
 const CardHeader = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
   const computedClassName = cn(cardHeaderVariants(), className);
-  return /*#__PURE__*/_jsx(View, {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'card-header'
+    })),
     children: children
   });
 });
@@ -59,6 +76,7 @@ CardHeader.displayName = 'Card.Header';
 // =============================================================================
 
 const CardContent = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
@@ -71,11 +89,15 @@ const CardContent = /*#__PURE__*/forwardRef(({
   const computedClassName = cn(cardContentVariants({
     fullBleed: fullBleed ?? fullBleedFromContext
   }), className);
-  return /*#__PURE__*/_jsx(View, {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'card-content'
+    })),
     children: children
   });
 });
@@ -86,6 +108,7 @@ CardContent.displayName = 'Card.Content';
 // =============================================================================
 
 const CardFooter = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
@@ -98,11 +121,15 @@ const CardFooter = /*#__PURE__*/forwardRef(({
   const computedClassName = cn(cardFooterVariants({
     fullBleed: fullBleed ?? fullBleedFromContext
   }), className);
-  return /*#__PURE__*/_jsx(View, {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'card-footer'
+    })),
     children: children
   });
 });
@@ -112,8 +139,9 @@ CardFooter.displayName = 'Card.Footer';
 // COMPOUND COMPONENT
 // =============================================================================
 
-export const Card = CardRoot;
-Card.Header = CardHeader;
-Card.Content = CardContent;
-Card.Footer = CardFooter;
+export const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Content: CardContent,
+  Footer: CardFooter
+});
 //# sourceMappingURL=index.js.map

package/lib/module/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","cn","useStyleContext","withStyleContext","cardContentVariants","cardFooterVariants","cardHeaderVariants","cardRootVariants","jsx","_jsx","SCOPE","Root","useCardStyleContext","CardRoot","className","children","style","fullBleed","props","ref","computedClassName","context","displayName","CardHeader","CardContent","fullBleedFromContext","CardFooter","Card","Header","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Card/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","useMemo","View","Slot","dataAttributes","mergeDataAttributes","cn","ParentContext","useParentContext","useStyleContext","cardContentVariants","cardFooterVariants","cardHeaderVariants","cardRootVariants","jsx","_jsx","SCOPE","useCardStyleContext","CardRoot","asChild","className","children","style","fullBleed","props","ref","parent","ctx","computedClassName","Comp","Provider","value","slot","displayName","CardHeader","CardContent","fullBleedFromContext","CardFooter","Card","Object","assign","Header","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Card/index.tsx"],"mappings":"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","ignoreList":[]}