@cdx-ui/components 0.0.1-beta.9 → 0.0.1-beta.91

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

@@ -6,10 +6,10 @@ import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 // TODO: Validate that `dark:` syntax works with Uniwind `ScopedTheme`
 
-export const buttonRootVariants = cva(['flex-row items-center justify-center', 'rounded-[var(--border-radius-button)]', 'web:outline-none web:focus:outline-none web:focus-visible:outline-none', TRANSITION_COLORS, 'data-[disabled=true]:opacity-[--opacity-disabled]', DISABLED_CURSOR, 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2'], {
+export const buttonRootVariants = cva(['flex-row items-center justify-center', 'rounded-[var(--border-radius-button)]', 'web:outline-none web:focus:outline-none web:focus-visible:outline-none', TRANSITION_COLORS, 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'], {
   variants: {
     variant: {
-      strong: ['border-b-1 border-black/75'],
+      solid: ['border-b-1 border-black/75'],
       // TODO: Replace with token
       outline: ['bg-transparent', 'border border-stroke-primary'],
       ghost: ['bg-transparent']
@@ -22,7 +22,7 @@ export const buttonRootVariants = cva(['flex-row items-center justify-center', '
       info: []
     },
     size: {
-      default: 'h-10 px-4 gap-2',
+      default: 'h-11 px-4 gap-2',
       small: 'h-8 px-3 gap-1.5'
     },
     fullWidth: {
@@ -31,37 +31,37 @@ export const buttonRootVariants = cva(['flex-row items-center justify-center', '
     }
   },
   compoundVariants: [
-  // ── strong × color (filled surface) ──────────────────────────────
+  // ── solid × color (filled surface) ──────────────────────────────
   {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     className: ['bg-surface-action-strong', Platform.select({
       default: 'data-[active=true]:bg-surface-action-strong-active',
       web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active'
     })]
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'danger',
     className: ['bg-surface-danger-strong', Platform.select({
       default: 'data-[active=true]:bg-surface-danger-strong-active',
       web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active'
     })]
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'warning',
     className: ['bg-surface-warning-strong', Platform.select({
       default: 'data-[active=true]:bg-amber-600',
       web: 'data-[hover=true]:bg-amber-500 data-[active=true]:data-[hover=true]:bg-amber-600'
     })]
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'success',
     className: ['bg-surface-success-strong', Platform.select({
       default: 'data-[active=true]:bg-green-800',
       web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800'
     })]
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'info',
     className: ['bg-surface-info-strong', Platform.select({
       default: 'data-[active=true]:bg-sky-700',
@@ -143,7 +143,7 @@ export const buttonRootVariants = cva(['flex-row items-center justify-center', '
     })]
   }],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     size: 'default',
     fullWidth: false
@@ -152,7 +152,7 @@ export const buttonRootVariants = cva(['flex-row items-center justify-center', '
 export const buttonTextVariants = cva(['font-medium', 'text-center'], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: []
     },
@@ -169,25 +169,25 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     }
   },
   compoundVariants: [
-  // ── strong × color (filled foreground text) ──────────────────────
+  // ── solid × color (filled foreground text) ──────────────────────
   {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     className: 'text-content-action-on-strong'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'danger',
     className: 'text-content-danger-on-strong'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'warning',
     className: 'text-content-warning-on-strong'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'success',
     className: 'text-content-success-on-strong'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'info',
     className: 'text-content-info-on-strong'
   },
@@ -214,15 +214,21 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     className: 'text-content-info'
   }],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     size: 'default'
   }
 });
-export const buttonSpinnerVariants = cva([], {
+export const buttonSpinnerVariants = cva(['data-[icon=inline-start]:me-1.5', 'data-[icon=inline-end]:ms-1.5']);
+
+// Spinner color is set via Uniwind's `colorClassName` prop (maps to the native
+// `color` prop on `ActivityIndicator`). `accent-*` utilities ONLY take effect
+// when passed through `colorClassName` — putting them on `className` is a no-op
+// because the underlying `color` prop is not part of the `style` object.
+export const buttonSpinnerColorVariants = cva([], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: []
     },
@@ -235,25 +241,25 @@ export const buttonSpinnerVariants = cva([], {
     }
   },
   compoundVariants: [
-  // ── strong × color ───────────────────────────────────────────────
+  // ── solid × color ───────────────────────────────────────────────
   {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     className: 'accent-[var(--color-content-action-on-strong)]'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'danger',
     className: 'accent-[var(--color-content-danger-on-strong)]'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'warning',
     className: 'accent-[var(--color-content-warning-on-strong)]'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'success',
     className: 'accent-[var(--color-content-success-on-strong)]'
   }, {
-    variant: 'strong',
+    variant: 'solid',
     color: 'info',
     className: 'accent-[var(--color-content-info-on-strong)]'
   },
@@ -280,7 +286,7 @@ export const buttonSpinnerVariants = cva([], {
     className: 'accent-[var(--color-content-info)]'
   }],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action'
   }
 });
@@ -314,14 +320,73 @@ export const buttonGroupVariants = cva([], {
     isAttached: false
   }
 });
-export const buttonIconVariants = cva([], {
+export const buttonIconVariants = cva(['data-[icon=inline-start]:me-1.5', 'data-[icon=inline-end]:ms-1.5'], {
   variants: {
+    variant: {
+      solid: [],
+      outline: [],
+      ghost: []
+    },
+    color: {
+      action: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: []
+    },
     size: {
       default: 'size-5',
       small: 'size-4'
     }
   },
+  compoundVariants: [
+  // ── solid × color (filled foreground icon) ──────────────────────
+  {
+    variant: 'solid',
+    color: 'action',
+    className: 'text-content-action-on-strong'
+  }, {
+    variant: 'solid',
+    color: 'danger',
+    className: 'text-content-danger-on-strong'
+  }, {
+    variant: 'solid',
+    color: 'warning',
+    className: 'text-content-warning-on-strong'
+  }, {
+    variant: 'solid',
+    color: 'success',
+    className: 'text-content-success-on-strong'
+  }, {
+    variant: 'solid',
+    color: 'info',
+    className: 'text-content-info-on-strong'
+  },
+  // ── outline/ghost × color (transparent foreground icon) ──────────
+  {
+    variant: ['outline', 'ghost'],
+    color: 'action',
+    className: 'text-content-action'
+  }, {
+    variant: ['outline', 'ghost'],
+    color: 'danger',
+    className: 'text-content-danger'
+  }, {
+    variant: ['outline', 'ghost'],
+    color: 'warning',
+    className: 'text-content-warning'
+  }, {
+    variant: ['outline', 'ghost'],
+    color: 'success',
+    className: 'text-content-success'
+  }, {
+    variant: ['outline', 'ghost'],
+    color: 'info',
+    className: 'text-content-info'
+  }],
   defaultVariants: {
+    variant: 'solid',
+    color: 'action',
     size: 'default'
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["Platform","cva","DISABLED_CURSOR","TRANSITION_COLORS","buttonRootVariants","variants","variant","strong","outline","ghost","color","action","danger","warning","success","info","size","default","small","fullWidth","true","false","compoundVariants","className","select","web","defaultVariants","buttonTextVariants","buttonSpinnerVariants","buttonGroupVariants","flexDirection","row","column","isAttached","buttonIconVariants"],"sourceRoot":"../../../../src","sources":["components/Button/styles.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Platform","cva","DISABLED_CURSOR","TRANSITION_COLORS","buttonRootVariants","variants","variant","solid","outline","ghost","color","action","danger","warning","success","info","size","default","small","fullWidth","true","false","compoundVariants","className","select","web","defaultVariants","buttonTextVariants","buttonSpinnerVariants","buttonSpinnerColorVariants","buttonGroupVariants","flexDirection","row","column","isAttached","buttonIconVariants"],"sourceRoot":"../../../../src","sources":["components/Button/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CLAUDE.md

@@ -0,0 +1,194 @@
+# 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).
+
+### 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/primitives';
+
+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).
+- **`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/primitives` 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,27 +1,46 @@
 "use strict";
 
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
-import { cn } 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';
 
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 import { jsx as _jsx } from "react/jsx-runtime";
+const SCOPE = 'CARD';
+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(View, {
-    ref: ref,
-    className: computedClassName,
-    style: style,
-    ...props,
-    children: children
+  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';
@@ -31,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
   });
 });
@@ -52,17 +76,28 @@ CardHeader.displayName = 'Card.Header';
 // =============================================================================
 
 const CardContent = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
+  fullBleed,
   ...props
 }, ref) => {
-  const computedClassName = cn(cardContentVariants(), className);
-  return /*#__PURE__*/_jsx(View, {
+  const {
+    fullBleed: fullBleedFromContext
+  } = useCardStyleContext();
+  const computedClassName = cn(cardContentVariants({
+    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-content'
+    })),
     children: children
   });
 });
@@ -73,17 +108,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
   });
 });
@@ -93,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