@cdx-ui/components 0.0.1-beta.3 → 0.0.1-beta.30

package/lib/typescript/components/Tile/styles.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const tileGroupVariants: (props?: ({
+    direction?: "row" | "column" | null | undefined;
+    spacing?: "default" | "none" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TileGroupVariantProps = VariantProps<typeof tileGroupVariants>;
+export declare const tileRootVariants: (props?: ({
+    shape?: "flat" | "card" | null | undefined;
+    showSeparator?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tileLeadingSlotVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tileTrailingSlotVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tileContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tileTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tileDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tileIndicatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type TileVariantProps = VariantProps<typeof tileRootVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Tile/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;;8EAe5B,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE3E,eAAO,MAAM,gBAAgB;;;8EA4C5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAAqD,CAAC;AAE1F,eAAO,MAAM,wBAAwB,oFAAqD,CAAC;AAE3F,eAAO,MAAM,mBAAmB,oFAAwD,CAAC;AAEzF,eAAO,MAAM,iBAAiB,oFAAmE,CAAC;AAElG,eAAO,MAAM,uBAAuB,oFAAuD,CAAC;AAE5F,eAAO,MAAM,qBAAqB,oFAAqD,CAAC;AAExF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -13,11 +13,14 @@ export * from './Image';
 export * from './Input';
 export * from './OtpInput';
 export * from './Link';
+export * from './ListItem';
 export * from './ProgressBar';
 export * from './ProgressSegmented';
+export * from './Radio';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Tile';
 export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/lib/typescript/figma/Button.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Button.figma.d.ts.map

package/lib/typescript/figma/Button.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Button.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAqD1B,wBASE"}

package/lib/typescript/figma/Card.Header.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Card.Header.figma.d.ts.map

package/lib/typescript/figma/Card.Header.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.Header.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Card.Header.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAU1B,wBASE"}

package/lib/typescript/figma/Card.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Card.figma.d.ts.map

package/lib/typescript/figma/Card.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Card.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA8B1B,wBASE"}

package/lib/typescript/figma/Checkbox.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Checkbox.figma.d.ts.map

package/lib/typescript/figma/Checkbox.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Checkbox.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAwC1B,wBAOE"}

package/lib/typescript/figma/Field.Input.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Field.Input.figma.d.ts.map

package/lib/typescript/figma/Field.Input.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.Input.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Field.Input.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA4C1B,wBAYE"}

package/lib/typescript/figma/Field.Select.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Field.Select.figma.d.ts.map

package/lib/typescript/figma/Field.Select.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.Select.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Field.Select.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA4C1B,wBAYE"}

package/lib/typescript/figma/Heading.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Heading.figma.d.ts.map

package/lib/typescript/figma/Heading.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Heading.figma.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAe1B,wBAIE"}

package/lib/typescript/figma/Icon.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;
+//# sourceMappingURL=Icon.figma.d.ts.map

package/lib/typescript/figma/Icon.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Icon.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAM1B,wBAIE"}

package/lib/typescript/figma/IconButton.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=IconButton.figma.d.ts.map

package/lib/typescript/figma/IconButton.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/IconButton.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAiC1B,wBAKE"}

package/lib/typescript/figma/Input.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Input.figma.d.ts.map

package/lib/typescript/figma/Input.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Input.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAgD1B,wBAOE"}

package/lib/typescript/figma/ProgressSegmented.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=ProgressSegmented.figma.d.ts.map

package/lib/typescript/figma/ProgressSegmented.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressSegmented.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ProgressSegmented.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA0B1B,wBAME"}

package/lib/typescript/figma/Radio.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Radio.figma.d.ts.map

package/lib/typescript/figma/Radio.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Radio.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAsB1B,wBAOE"}

package/lib/typescript/figma/Select.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Select.figma.d.ts.map

package/lib/typescript/figma/Select.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Select.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAyC1B,wBASE"}

package/lib/typescript/figma/Text.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Text.figma.d.ts.map

package/lib/typescript/figma/Text.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Text.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAe1B,wBAIE"}

package/lib/typescript/figma/icons.figma.batch.d.ts

@@ -0,0 +1,14 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+    metadata: {
+        nestable: boolean;
+        props: {
+            componentName: string;
+        };
+    };
+};
+export default _default;
+//# sourceMappingURL=icons.figma.batch.d.ts.map

package/lib/typescript/figma/icons.figma.batch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.figma.batch.d.ts","sourceRoot":"","sources":["../../../src/figma/icons.figma.batch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;QAaF,MAAM;;;;;;;;AAH9B,wBAQE"}

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.30",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -25,7 +25,7 @@
   "files": [
     "lib",
     "src",
-    "!src/**/*.figma.ts"
+    "!src/figma"
   ],
   "react-native-builder-bob": {
     "source": "src",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.3",
-    "@cdx-ui/utils": "0.0.1-beta.3",
-    "@cdx-ui/icons": "0.0.1-beta.3"
+    "@cdx-ui/utils": "0.0.1-beta.30",
+    "@cdx-ui/primitives": "0.0.1-beta.30",
+    "@cdx-ui/icons": "0.0.1-beta.30"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Button/styles.ts

@@ -10,7 +10,7 @@ export const buttonRootVariants = cva(
     '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]',
+    'data-[disabled=true]:opacity-[var(--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',
   ],
@@ -29,7 +29,7 @@ export const buttonRootVariants = cva(
         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: {

package/src/components/Card/index.tsx

@@ -1,31 +1,48 @@
 import { forwardRef, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { cn } from '@cdx-ui/utils';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
 import {
   cardContentVariants,
   cardFooterVariants,
   cardHeaderVariants,
   cardRootVariants,
+  type CardContentVariantProps,
+  type CardFooterVariantProps,
+  type CardVariantProps,
 } from './styles';
 
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 
-export interface CardProps extends ViewProps {
+const SCOPE = 'CARD';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useCardStyleContext = () => useStyleContext(SCOPE) as CardVariantProps;
+
+export interface CardProps extends ViewProps, CardVariantProps {
   className?: string;
   children?: ReactNode;
 }
 
-const CardRoot = forwardRef<View, CardProps>(({ className, children, style, ...props }, ref) => {
-  const computedClassName = cn(cardRootVariants(), className);
+const CardRoot = forwardRef<View, CardProps>(
+  ({ className, children, style, fullBleed, ...props }, ref) => {
+    const computedClassName = cn(cardRootVariants(), className);
 
-  return (
-    <View ref={ref} className={computedClassName} style={style} {...props}>
-      {children}
-    </View>
-  );
-});
+    return (
+      <Root
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        context={{ fullBleed }}
+        {...props}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
 
 CardRoot.displayName = 'Card';
 
@@ -56,14 +73,18 @@ CardHeader.displayName = 'Card.Header';
 // STYLED CONTENT COMPONENT
 // =============================================================================
 
-export interface CardContentProps extends ViewProps {
+export interface CardContentProps extends ViewProps, CardContentVariantProps {
   className?: string;
   children?: ReactNode;
 }
 
 const CardContent = forwardRef<View, CardContentProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(cardContentVariants(), className);
+  ({ className, children, style, fullBleed, ...props }, ref) => {
+    const { fullBleed: fullBleedFromContext } = useCardStyleContext();
+    const computedClassName = cn(
+      cardContentVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
+      className,
+    );
 
     return (
       <View ref={ref} className={computedClassName} style={style} {...props}>
@@ -79,14 +100,18 @@ CardContent.displayName = 'Card.Content';
 // STYLED FOOTER COMPONENT
 // =============================================================================
 
-export interface CardFooterProps extends ViewProps {
+export interface CardFooterProps extends ViewProps, CardFooterVariantProps {
   className?: string;
   children?: ReactNode;
 }
 
 const CardFooter = forwardRef<View, CardFooterProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(cardFooterVariants(), className);
+  ({ className, children, style, fullBleed, ...props }, ref) => {
+    const { fullBleed: fullBleedFromContext } = useCardStyleContext();
+    const computedClassName = cn(
+      cardFooterVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
+      className,
+    );
 
     return (
       <View ref={ref} className={computedClassName} style={style} {...props}>

package/src/components/Card/styles.ts

@@ -1,27 +1,31 @@
-import { cva } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_PRIMARY,
-  RADIUS_SM,
-  SHADOW_SM,
-} from '../../styles/primitives';
+import { cva, VariantProps } from 'class-variance-authority';
 
 // ── Root ────────────────────────────────────────────────────
 
-export const cardRootVariants = cva([
-  COLOR_BG_PRIMARY,
-  `border ${COLOR_BORDER_DEFAULT}`,
-  RADIUS_SM,
-  SHADOW_SM,
-  'overflow-hidden',
-]);
+export const cardRootVariants = cva(
+  [
+    'bg-surface-primary',
+    'border border-stroke-secondary',
+    'rounded-[var(--border-radius-default)]',
+    'overflow-hidden',
+  ],
+  {
+    variants: {
+      fullBleed: {
+        true: '',
+        false: '',
+      },
+    },
+  },
+);
 
 // ── Header ──────────────────────────────────────────────────
 
 export const cardHeaderVariants = cva([
-  'flex-row items-center justify-between p-4 border-b border-t-8',
-  COLOR_BORDER_DEFAULT,
+  'border-t-8 border-t-surface-brand-strong',
+  'border-b border-solid border-b-stroke-secondary',
+  'flex-row items-center justify-between gap-0.5',
+  'px-5 py-3',
 ]);
 
 // ── Title ───────────────────────────────────────────────────
@@ -30,12 +34,28 @@ export const cardTitleVariants = cva(['flex-1']);
 
 // ── Content ─────────────────────────────────────────────────
 
-export const cardContentVariants = cva([COLOR_TEXT_PRIMARY, 'p-4']);
+export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
+  variants: {
+    fullBleed: {
+      true: 'p-0',
+    },
+  },
+});
 
 // ── Footer ──────────────────────────────────────────────────
 
-export const cardFooterVariants = cva([
-  'p-4 border-t',
-  COLOR_BORDER_DEFAULT,
-  '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,
+  },
+});
+
+export type CardVariantProps = VariantProps<typeof cardRootVariants>;
+export type CardContentVariantProps = VariantProps<typeof cardContentVariants>;
+export type CardFooterVariantProps = VariantProps<typeof cardFooterVariants>;