@cdx-ui/components 0.0.1-beta.11 → 0.0.1-beta.111

package/lib/module/components/CLAUDE.md

@@ -0,0 +1,195 @@
+# Components — authoring & styling conventions
+
+Auto-loaded when working in `packages/components/src/components/**`. Covers both the
+styled component files (`index.tsx`) and their co-located CVA variant files (`styles.ts`).
+
+---
+
+## Component Authoring (`index.tsx`)
+
+Styled components in `@cdx-ui/components` follow a consistent pattern. Read the full guides before making changes:
+
+- `docs/internal/practices/composition.md` — compound component pattern, naming conventions
+- `docs/internal/practices/types.md` — prop types, `I*Props` vs `*Props`, exporting
+- `docs/internal/practices/styling.md` — `cn()`, CVA, token classes, `Platform.select()`
+- `docs/internal/practices/state.md` — `useControllableState`, `composeEventHandlers`
+- `docs/internal/practices/data-attributes.md` — `data-[state]`, `data-slot`, and `data-icon` conventions
+- `docs/internal/practices/as-child.md` — styled-layer `asChild` via re-exported `Slot`
+
+## Six standards (Standards 4–6 apply here)
+
+Standards 1–3 govern primitive-layer authoring (see `packages/primitives/src/CLAUDE.md`).
+Standards 4–6 govern the styled layer:
+
+### Standard 4 — `data-slot` attributes
+
+Every public styled slot emits a stable `data-slot="<component>-<part>"` attribute on its outermost rendered element. The convention is lowercase, kebab-case, `<component>` then `-<slot>` if not the root.
+
+| Slot               | Attribute                    |
+| ------------------ | ---------------------------- |
+| `<Button>` root    | `data-slot="button"`         |
+| `<Button.Label>`   | `data-slot="button-label"`   |
+| `<Button.Icon>`    | `data-slot="button-icon"`    |
+| `<Button.Spinner>` | `data-slot="button-spinner"` |
+| `<Button.Group>`   | `data-slot="button-group"`   |
+| `<IconButton>`     | `data-slot="icon-button"`    |
+| `<Dialog.Content>` | `data-slot="dialog-content"` |
+
+Use `dataAttributes({ slot: '<component>-<part>' })` from `@cdx-ui/primitives` so the helper handles native (flat `data-*` keys) and web (RNW `dataSet`) correctly.
+
+#### Combining multiple data-attribute sources — use `mergeDataAttributes`
+
+When the same element receives `data-*` from more than one source (e.g. a slot identifier plus a position hint, or consumer-supplied data attrs flowing in through props), do **not** chain multiple `{...dataAttributes(...)}` spreads — on web each call returns `{ dataSet: {...} }` and a plain JSX spread replaces the `dataSet` key entirely, so the second source wipes out the first. Use `mergeDataAttributes(...)` from `@cdx-ui/primitives` to combine sources; later args win on key conflicts:
+
+```tsx
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+
+<Element
+  ref={ref}
+  className={...}
+  style={style}
+  {...props}
+  {...mergeDataAttributes(
+    props,                 // pulls in any consumer-supplied data attrs
+    dataAttributes({ slot: '<component>-<part>' }),
+    positionToDataIcon(position),                      // optional, may be undefined
+  )}
+/>
+```
+
+Spread `{...props}` first, then the merge — so any keys that `mergeDataAttributes` produces overwrite their counterparts in props with the merged values.
+
+When the styled component renders a primitive Root, the primitive Root applies the same pattern internally — incoming data attrs (slot from the styled layer) are merged with the primitive's own interaction-state data attrs and emitted once. The styled layer doesn't need to do anything special; just pass `data-slot` through and the primitive's merge does the rest.
+
+### Standard 5 — Static design variants vs. interaction state
+
+Variant functions take only static design inputs (`variant`/`color`/`size`/`fullWidth`/etc.). Interaction states (`hover`/`focus`/`active`/`disabled`/`focus-visible`) are expressed as `data-[...]:` selectors **inside** CVA variant strings, never as variant inputs.
+
+- CSS-layer state changes are free of React work: when the primitive flips `data-hover=true`, the CSS engine (web) and Uniwind's native style layer reconcile styles without re-rendering React, re-running CVA, or invoking `cn()`/`tailwind-merge`.
+- Variant-input state changes cascade React work: CVA re-runs, `cn()` re-merges, and className-prop reconciliation cascades through the tree.
+- Sub-slots can react to root state via parent selectors (`data-[hover=true]:`) without each slot subscribing to context (per Standard 1).
+- **Native compound conditions** — on native, prefer single-condition `data-[field-state=...]` selectors backed by a primitive-derived compound-state attribute over compound `data-[]:data-[]` chains (Uniwind matches only the last condition). Web may keep compound chains. See `Input/styles.ts` and `Select/styles.ts`; full practice in `docs/internal/practices/data-attributes.md` § "Compound state on native".
+
+### Standard 6 — Position hints (`data-icon="inline-start|inline-end"`)
+
+Icon-/spinner-bearing styled slots accept an optional `position?: 'leading' | 'trailing'` prop that emits `data-icon="inline-start|inline-end"`. Spacing rules in CVA target the `data-icon` attribute via logical-property utilities (`me-*`/`ms-*`) so RTL is handled for free.
+
+Mapping (via the shared `positionToDataIcon` helper at `packages/components/src/utils/positionToDataIcon.ts`):
+
+- `position="leading"` → `data-icon="inline-start"`
+- `position="trailing"` → `data-icon="inline-end"`
+- `position` omitted → no `data-icon` attribute, baseline spacing applies
+
+```tsx
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
+
+interface ButtonIconProps {
+  position?: IconSlotPosition;
+  // ...
+}
+
+<Icon {...positionToDataIcon(position)} {...props} />;
+```
+
+```tsx
+<Button>
+  <Button.Icon as={CheckIcon} position="leading" />
+  <Button.Label>Confirm</Button.Label>
+</Button>
+```
+
+CVA expresses padding via logical-property selectors:
+
+```ts
+cva(['data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5'], { ... });
+```
+
+Where: **styled layer.** Pure styling hint with no behavior or a11y semantics — fails Standard 3, so no primitive involvement.
+
+## Canonical reference
+
+`packages/components/src/components/Button/index.tsx` + `Button/styles.ts` is the canonical example for Standards 4–6:
+
+- `data-slot` on `Button`, `Button.Label`, `Button.Icon`, `Button.Spinner`, `Button.Group`
+- `asChild` re-uses `Slot` from `@cdx-ui/primitives` — no new primitive needed for sub-slots
+- `buttonIconVariants` / `buttonSpinnerVariants` carry `data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5` so leading/trailing padding works without per-call overrides
+
+`packages/components/src/components/QuickActionButton/index.tsx` shows the second axis of Standard 1: a styled-layer sub-slot (the Indicator) opts into `useButtonContext()` when its styling reacts to interaction state. The pattern is the same as the primitive Root — call `useButtonContext()`, spread `mergeDataAttributes(props, dataAttributes({ ... }))` — only it lives in the styled layer.
+
+### Pattern summary
+
+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 `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: '...' })`.
+6. **Compound export** — `Object.assign(RootComponent, { Sub1, Sub2 }) as CompoundType`
+
+### Key rules
+
+- Props interface extends RN base props + primitive `I*Props` + CVA `VariantProps` + `{ className?: string }`
+- Always accept and spread `style` alongside `className`
+- Variant defaults in destructuring must match CVA `defaultVariants`
+- `displayName` set on every exported sub-component
+- `className` is merged last via `cn()` so consumer overrides always win
+- Never hardcode colors — use semantic token classes (`bg-surface-*`, `text-content-*`, `border-stroke-*`)
+- Event handlers composed via `composeEventHandlers` from `@cdx-ui/utils`
+- Third-party libraries fully abstracted — no adopted library types leak to consumers
+- **`data-slot`** emitted on every styled slot via `dataAttributes({ slot: '<component>-<part>' })`
+- **`asChild`** supported on every styled slot — `const Comp = asChild ? Slot : DefaultElement`
+- **`position`** prop on icon/spinner-style slots maps to `data-icon="inline-start|inline-end"`
+
+---
+
+## Styling Conventions (`styles.ts`)
+
+Variant definitions live in co-located `styles.ts` files using CVA. Read the full guides before making changes:
+
+- `docs/internal/practices/styling.md` — `cn()`, CVA, token architecture, dark mode, `Platform.select()`
+- `docs/internal/practices/data-attributes.md` — `data-[state]` and `data-icon` selectors
+
+### Pattern summary
+
+Each `styles.ts` exports CVA variant functions and their derived `VariantProps` types (see `Button/styles.ts` as the canonical example):
+
+```ts
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const componentRootVariants = cva(
+  [
+    /* base classes + interaction state selectors (data-[hover=true]:..., data-[active=true]:...) */
+  ],
+  {
+    variants: {
+      /* static design axes only — variant, color, size, fullWidth, etc. */
+    },
+    compoundVariants: [
+      /* variant × variant combinations */
+    ],
+    defaultVariants: {
+      /* defaults matching the component's destructured defaults */
+    },
+  },
+);
+
+export type ComponentVariantProps = VariantProps<typeof componentRootVariants>;
+```
+
+### Key rules
+
+- **Semantic token classes only** — use `bg-surface-action-strong`, `text-content-primary`, `border-stroke-primary`, etc. Never hardcode hex colors, `bg-white`, `text-black`, or raw Tailwind color scales for themed values.
+- **`data-[state]` selectors** — use `data-[disabled=true]:`, `data-[hover=true]:`, `data-[active=true]:`, `data-[focus-visible=true]:` for interaction states. Primitives emit these data attributes (Standard 1). **Interaction state is never a CVA variant input** (Standard 5). On native, prefer single-condition `data-[field-state=...]` selectors backed by a primitive-derived compound-state attribute over compound `data-[]:data-[]` chains (which only match the last condition); web may keep compound chains. See `Input/styles.ts` / `Select/styles.ts`.
+- **`data-[icon=inline-start|inline-end]` selectors** for icon/spinner position spacing (Standard 6) — pair with logical-property utilities (`me-*`/`ms-*`) so RTL flips automatically.
+- **`Platform.select()`** for platform-specific classes — web gets `data-[hover=true]` styles (hover exists on web); native responds only to `data-[active=true]` (press). Always set `default` (native) and `web` keys.
+- **Shared style primitives** — import `DISABLED_CURSOR`, `TRANSITION_COLORS`, etc. from `../../styles/constants` for cross-component consistency.
+- **`web:` prefix** for web-only utilities — e.g., `web:outline-none`, `web:focus-visible:ring-2`.
+- **`compoundVariants`** for variant × variant combinations where simple variant merging is insufficient.
+- **`defaultVariants`** must match the destructured defaults in the component's `index.tsx`.
+- **One `cva()` per sub-component** — root, text, icon, spinner, etc. each get their own variant function.
+- **Export `VariantProps` types** — derived via `VariantProps<typeof variantFn>` for the component layer to consume.
+- **No dynamic string construction** — all Tailwind class names must be statically detectable by the Tailwind scanner.
+- **CSS variables for token values** — use `rounded-[var(--border-radius-button)]` syntax when referencing design tokens not mapped to Tailwind utilities.

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

@@ -1,54 +1,95 @@
 "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 { cardContentVariants, cardFooterVariants, cardHeaderVariants, cardRootVariants } from './styles';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { cardContentVariants, cardFooterVariants, cardHeaderVariants, cardRootVariants, cardStripeVariants } from './styles';
 
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 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 parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
+      fullBleed
+    }
+  }), [parent, fullBleed]);
   const computedClassName = cn(cardRootVariants(), className);
-  return /*#__PURE__*/_jsx(Root, {
+  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';
+
+// =============================================================================
+// STYLED STRIPE COMPONENT
+// =============================================================================
+
+const CardStripe = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const computedClassName = cn(cardStripeVariants(), className);
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
-    context: {
-      fullBleed
-    },
     ...props,
-    children: children
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'card-stripe'
+    }))
   });
 });
-CardRoot.displayName = 'Card';
+CardStripe.displayName = 'Card.Stripe';
 
 // =============================================================================
 // STYLED HEADER COMPONENT
 // =============================================================================
 
 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 +100,7 @@ CardHeader.displayName = 'Card.Header';
 // =============================================================================
 
 const CardContent = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
@@ -71,11 +113,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,17 +132,28 @@ CardContent.displayName = 'Card.Content';
 // =============================================================================
 
 const CardFooter = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
+  fullBleed,
   ...props
 }, ref) => {
-  const computedClassName = cn(cardFooterVariants(), className);
-  return /*#__PURE__*/_jsx(View, {
+  const {
+    fullBleed: fullBleedFromContext
+  } = useCardStyleContext();
+  const computedClassName = cn(cardFooterVariants({
+    fullBleed: fullBleed ?? fullBleedFromContext
+  }), className);
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'card-footer'
+    })),
     children: children
   });
 });
@@ -106,8 +163,10 @@ 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, {
+  Stripe: CardStripe,
+  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","cardStripeVariants","jsx","_jsx","SCOPE","useCardStyleContext","CardRoot","asChild","className","children","style","fullBleed","props","ref","parent","ctx","computedClassName","Comp","Provider","value","slot","displayName","CardStripe","CardHeader","CardContent","fullBleedFromContext","CardFooter","Card","Object","assign","Stripe","Header","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Card/index.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -13,9 +13,13 @@ export const cardRootVariants = cva(['bg-surface-primary', 'border border-stroke
   }
 });
 
+// ── Stripe ──────────────────────────────────────────────────
+
+export const cardStripeVariants = cva(['bg-brand-400', 'h-2', 'w-full']);
+
 // ── Header ──────────────────────────────────────────────────
 
-export const cardHeaderVariants = cva(['flex-row items-center justify-between px-5 py-3', 'border-t-8 border-t-surface-brand-strong', 'border-b border-b-solid border-b-stroke-secondary']);
+export const cardHeaderVariants = cva(['border-b border-solid border-b-stroke-secondary', 'flex-row items-center justify-between gap-0.5', 'px-5 py-3']);
 
 // ── Title ───────────────────────────────────────────────────
 
@@ -33,5 +37,15 @@ export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
 
 // ── Footer ──────────────────────────────────────────────────
 
-export const cardFooterVariants = cva(['p-5 pt-0', 'flex-row items-center gap-2']);
+export const cardFooterVariants = cva(['flex-col items-stretch gap-2'], {
+  variants: {
+    fullBleed: {
+      true: 'p-5',
+      false: 'px-5 pb-5 pt-0'
+    }
+  },
+  defaultVariants: {
+    fullBleed: false
+  }
+});
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cva","cardRootVariants","variants","fullBleed","true","false","cardHeaderVariants","cardTitleVariants","cardContentVariants","cardFooterVariants"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAsB,0BAA0B;;AAE5D;;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,GAAG,CACjC,CACE,oBAAoB,EACpB,gCAAgC,EAChC,wCAAwC,EACxC,iBAAiB,CAClB,EACD;EACEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMC,kBAAkB,GAAGN,GAAG,CAAC,CACpC,iDAAiD,EACjD,0CAA0C,EAC1C,mDAAmD,CACpD,CAAC;;AAEF;;AAEA,OAAO,MAAMO,iBAAiB,GAAGP,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;;AAEhD;;AAEA,OAAO,MAAMQ,mBAAmB,GAAGR,GAAG,CAAC,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;EACtEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE;IACR;EACF;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMK,kBAAkB,GAAGT,GAAG,CAAC,CAAC,UAAU,EAAE,6BAA6B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["cva","cardRootVariants","variants","fullBleed","true","false","cardStripeVariants","cardHeaderVariants","cardTitleVariants","cardContentVariants","cardFooterVariants","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAsB,0BAA0B;;AAE5D;;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,GAAG,CACjC,CACE,oBAAoB,EACpB,gCAAgC,EAChC,wCAAwC,EACxC,iBAAiB,CAClB,EACD;EACEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMC,kBAAkB,GAAGN,GAAG,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;;AAExE;;AAEA,OAAO,MAAMO,kBAAkB,GAAGP,GAAG,CAAC,CACpC,iDAAiD,EACjD,+CAA+C,EAC/C,WAAW,CACZ,CAAC;;AAEF;;AAEA,OAAO,MAAMQ,iBAAiB,GAAGR,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;;AAEhD;;AAEA,OAAO,MAAMS,mBAAmB,GAAGT,GAAG,CAAC,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;EACtEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE;IACR;EACF;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMM,kBAAkB,GAAGV,GAAG,CAAC,CAAC,8BAA8B,CAAC,EAAE;EACtEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE;IACT;EACF,CAAC;EACDM,eAAe,EAAE;IACfR,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,147 @@
+"use strict";
+
+import { forwardRef, useCallback, useRef } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import RNCarousel, { Pagination as RNCarouselPagination } from 'react-native-reanimated-carousel';
+import { useResolveClassNames } from 'uniwind';
+import { cn, createContext, mergeRefs } from '@cdx-ui/utils';
+import { resolveCarouselPaginationScrollAction } from './paginationNavigation';
+import { carouselPaginationContainerClassName, carouselPaginationDotVariants } from './styles';
+
+/**
+ * Full passthrough of `react-native-reanimated-carousel`'s own props (per `01-api-design.md`,
+ * Resolved Question #1) — re-exported under a Forge-owned name so consumers never import the
+ * adopted library directly. A type alias (not `interface extends`) because `TCarouselProps<T>`
+ * is itself a union-containing type (vertical/mode discriminants), which interfaces cannot extend.
+ */
+
+/** Mirrors the adopted library's private `DotStyle` shape (not exported) without importing it. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [CarouselProgressProvider, useCarouselProgressContext] = createContext('CarouselProgress', {
+  strict: false
+});
+function isSharedValueProgress(value) {
+  return typeof value === 'object' && value !== null && 'value' in value;
+}
+function CarouselInner({
+  className,
+  style,
+  onProgressChange,
+  children,
+  loop = true,
+  defaultIndex = 0,
+  ...rest
+}, ref) {
+  const internalRef = useRef(null);
+  const internalProgress = useSharedValue(defaultIndex);
+  const resolvedClassNameStyle = useResolveClassNames(cn(className));
+  const handleProgressChange = useCallback((offsetProgress, absoluteProgress) => {
+    internalProgress.value = absoluteProgress;
+    if (typeof onProgressChange === 'function') {
+      onProgressChange(offsetProgress, absoluteProgress);
+    }
+  }, [onProgressChange, internalProgress]);
+  const consumerProgress = isSharedValueProgress(onProgressChange) ? onProgressChange : undefined;
+  const contextValue = {
+    progress: consumerProgress ?? internalProgress,
+    carouselRef: internalRef,
+    loop
+  };
+  return /*#__PURE__*/_jsxs(CarouselProgressProvider, {
+    value: contextValue,
+    children: [/*#__PURE__*/_jsx(RNCarousel, {
+      ref: mergeRefs(ref, internalRef),
+      style: [resolvedClassNameStyle, style],
+      onProgressChange: consumerProgress ?? handleProgressChange,
+      loop: loop,
+      defaultIndex: defaultIndex,
+      ...rest
+    }), children]
+  });
+}
+const CarouselRoot = /*#__PURE__*/forwardRef(CarouselInner);
+
+// =============================================================================
+// PAGINATION
+// =============================================================================
+
+function CarouselPaginationComponent({
+  className,
+  progress: progressProp,
+  carouselRef: carouselRefProp,
+  loop: loopProp,
+  onPress,
+  ...rest
+}) {
+  // `strict: false` with no `defaultValue` means this returns `undefined` outside a
+  // `<Carousel>` provider at runtime; cast to communicate that to TypeScript, since
+  // `createContext`'s helper type always reports `T` (see `@cdx-ui/utils`).
+  const context = useCarouselProgressContext();
+  const progress = progressProp ?? context?.progress;
+  const carouselRef = carouselRefProp ?? context?.carouselRef;
+  const loop = loopProp ?? context?.loop ?? true;
+  if (!progress) {
+    throw new Error('Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `progress` prop.');
+  }
+  if (!onPress && !carouselRef) {
+    throw new Error('Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `carouselRef` prop (or a custom `onPress`).');
+  }
+  const handlePress = useCallback(index => {
+    if (onPress) {
+      onPress(index);
+      return;
+    }
+    const carousel = carouselRef?.current;
+    if (!carousel) return;
+    const scrollAction = resolveCarouselPaginationScrollAction(carousel.getCurrentIndex(), index, rest.data.length, loop);
+    if (scrollAction) {
+      carousel.scrollTo(scrollAction);
+    }
+  }, [onPress, carouselRef, loop, rest.data.length]);
+  const containerStyle = useResolveClassNames(cn(carouselPaginationContainerClassName, className));
+  const dotStyle = useResolveClassNames(carouselPaginationDotVariants({
+    active: false
+  }));
+  const activeDotStyle = useResolveClassNames(carouselPaginationDotVariants({
+    active: true
+  }));
+  return /*#__PURE__*/_jsx(RNCarouselPagination.Custom, {
+    ...rest,
+    progress: progress,
+    onPress: handlePress,
+    containerStyle: containerStyle,
+    dotStyle: {
+      width: 6,
+      height: 6,
+      ...dotStyle
+    },
+    activeDotStyle: {
+      width: 18,
+      height: 6,
+      ...activeDotStyle
+    }
+  });
+}
+CarouselPaginationComponent.displayName = 'Carousel.Pagination';
+const CarouselPagination = CarouselPaginationComponent;
+export const Carousel = Object.assign(CarouselRoot, {
+  Pagination: CarouselPagination
+});
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export function useCarousel(options) {
+  const ref = useRef(null);
+  const progress = useSharedValue(options?.defaultIndex ?? 0);
+  return {
+    ref,
+    /** Bind to `Carousel`'s `onProgressChange` and sibling `Carousel.Pagination`'s `progress`. */
+    progress,
+    next: opts => ref.current?.next(opts),
+    prev: opts => ref.current?.prev(opts),
+    scrollTo: opts => ref.current?.scrollTo(opts)
+  };
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useRef","useSharedValue","RNCarousel","Pagination","RNCarouselPagination","useResolveClassNames","cn","createContext","mergeRefs","resolveCarouselPaginationScrollAction","carouselPaginationContainerClassName","carouselPaginationDotVariants","jsx","_jsx","jsxs","_jsxs","CarouselProgressProvider","useCarouselProgressContext","strict","isSharedValueProgress","value","CarouselInner","className","style","onProgressChange","children","loop","defaultIndex","rest","ref","internalRef","internalProgress","resolvedClassNameStyle","handleProgressChange","offsetProgress","absoluteProgress","consumerProgress","undefined","contextValue","progress","carouselRef","CarouselRoot","CarouselPaginationComponent","progressProp","carouselRefProp","loopProp","onPress","context","Error","handlePress","index","carousel","current","scrollAction","getCurrentIndex","data","length","scrollTo","containerStyle","dotStyle","active","activeDotStyle","Custom","width","height","displayName","CarouselPagination","Carousel","Object","assign","useCarousel","options","next","opts","prev"],"sourceRoot":"../../../../src","sources":["components/Carousel/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Carousel/paginationNavigation.js

@@ -0,0 +1,31 @@
+"use strict";
+
+/**
+ * Resolves the shortest `scrollTo` action for pagination dot presses.
+ *
+ * In loop mode the library's absolute `scrollTo({ index })` can animate through every
+ * slide when the current index is past the halfway point of the loop buffer (e.g. index 2 → 3
+ * with four items). Relative `count` navigation avoids that wrap-around path.
+ */
+export function resolveCarouselPaginationScrollAction(currentIndex, targetIndex, dataLength, loop) {
+  if (currentIndex === targetIndex) return null;
+  if (!loop) {
+    return {
+      index: targetIndex,
+      animated: true
+    };
+  }
+  const forwardDelta = (targetIndex - currentIndex + dataLength) % dataLength;
+  const backwardDelta = (currentIndex - targetIndex + dataLength) % dataLength;
+  if (forwardDelta <= backwardDelta) {
+    return {
+      count: forwardDelta,
+      animated: true
+    };
+  }
+  return {
+    count: -backwardDelta,
+    animated: true
+  };
+}
+//# sourceMappingURL=paginationNavigation.js.map

package/lib/module/components/Carousel/paginationNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveCarouselPaginationScrollAction","currentIndex","targetIndex","dataLength","loop","index","animated","forwardDelta","backwardDelta","count"],"sourceRoot":"../../../../src","sources":["components/Carousel/paginationNavigation.ts"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,qCAAqCA,CACnDC,YAAoB,EACpBC,WAAmB,EACnBC,UAAkB,EAClBC,IAAa,EAC0B;EACvC,IAAIH,YAAY,KAAKC,WAAW,EAAE,OAAO,IAAI;EAE7C,IAAI,CAACE,IAAI,EAAE;IACT,OAAO;MAAEC,KAAK,EAAEH,WAAW;MAAEI,QAAQ,EAAE;IAAK,CAAC;EAC/C;EAEA,MAAMC,YAAY,GAAG,CAACL,WAAW,GAAGD,YAAY,GAAGE,UAAU,IAAIA,UAAU;EAC3E,MAAMK,aAAa,GAAG,CAACP,YAAY,GAAGC,WAAW,GAAGC,UAAU,IAAIA,UAAU;EAE5E,IAAII,YAAY,IAAIC,aAAa,EAAE;IACjC,OAAO;MAAEC,KAAK,EAAEF,YAAY;MAAED,QAAQ,EAAE;IAAK,CAAC;EAChD;EAEA,OAAO;IAAEG,KAAK,EAAE,CAACD,aAAa;IAAEF,QAAQ,EAAE;EAAK,CAAC;AAClD","ignoreList":[]}

package/lib/module/components/Carousel/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import { cva } from 'class-variance-authority';
+
+/** Small default gap between dots — the library ships no default spacing between pagination items. */
+export const carouselPaginationContainerClassName = 'gap-2 py-1';
+export const carouselPaginationDotVariants = cva('rounded-full', {
+  variants: {
+    active: {
+      true: 'bg-surface-neutral-strong',
+      false: 'bg-surface-neutral-subtle'
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+});
+//# sourceMappingURL=styles.js.map