@cdx-ui/components 0.0.1-beta.12 → 0.0.1-beta.14

package/lib/module/styles/primitives.js

@@ -5,36 +5,65 @@
 
 // ─── Colors ──────────────────────────────────────────────
 // Surface & background
+/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
 export const COLOR_BG_PRIMARY = 'bg-white';
+/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
 export const COLOR_BG_SUBTLE = 'bg-slate-50';
+/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
 export const COLOR_BG_MUTED = 'bg-slate-100';
+/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
 export const COLOR_BG_INVERSE = 'bg-slate-900';
 
 // Border
+/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
 export const COLOR_BORDER_DEFAULT = 'border-slate-200';
+/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
 export const COLOR_BORDER_STRONG = 'border-slate-300';
+/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
 export const COLOR_BORDER_FOCUS = 'border-slate-900';
+/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
 export const COLOR_BORDER_INVALID = 'border-red-500';
 
 // Text
+/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
 export const COLOR_TEXT_PRIMARY = 'text-slate-900';
+/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
 export const COLOR_TEXT_SECONDARY = 'text-slate-500';
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export 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 const COLOR_TEXT_INVERSE = 'text-white';
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
+/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
 export const COLOR_TEXT_INVALID = 'text-red-600';
 
 // Brand / Action
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
+/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
 export const COLOR_BRAND_HOVER = 'bg-slate-800';
+/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
 export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
 
 // Accent (for checked states, active indicators)
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
+/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
 export const COLOR_ACCENT_BORDER = 'border-slate-900';
 
-// Semantic colors (danger, warning, success, info)
-// Kept for Button's 5-color system
+/**
+ * @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 const SEMANTIC_COLORS = {
   action: {
     bg: 'bg-slate-900',
@@ -79,6 +108,7 @@ export const SEMANTIC_COLORS = {
 };
 
 // ─── Focus ───────────────────────────────────────────────
+/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
 export const FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
 
 // ─── Radius ──────────────────────────────────────────────
@@ -87,13 +117,17 @@ export const RADIUS_MD = 'rounded-xl'; // cards, dropdowns, modals
 export const RADIUS_FULL = 'rounded-full'; // pills, avatars, switches
 
 // ─── Shadows ─────────────────────────────────────────────
+
+/** @deprecated Use `shadow-sm` directly instead */
 export const SHADOW_SM = 'shadow-sm';
+/** @deprecated Use `shadow-md` directly instead */
 export const SHADOW_MD = 'shadow-md';
 
 // ─── Sizing ──────────────────────────────────────────────
 // Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
 // Only two sizes: 'default' (regular) and 'small' (compact).
 // NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
+/** @deprecated */
 export const SIZE_SCALE = {
   default: {
     height: 'h-10',

package/lib/module/styles/primitives.js.map

@@ -1 +1 @@
-{"version":3,"names":["COLOR_BG_PRIMARY","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["COLOR_BG_PRIMARY","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,eAAO,MAAM,oBAAoB;;8EAahC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;8EAmCrC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAU/B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAajC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,eAAO,MAAM,oBAAoB;;8EAahC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;8EAmCrC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAU/B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAajC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWlE,eAAO,MAAM,oBAAoB;;;;;8EAmDhC,CAAC;AAIF,eAAO,MAAM,2BAA2B,oFAAqD,CAAC;AAE9F,eAAO,MAAM,4BAA4B;;8EAUvC,CAAC;AAIH,eAAO,MAAM,uBAAuB;;8EAUlC,CAAC;AAIH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;8EAUtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAU/B,CAAC;AAIH,eAAO,MAAM,6BAA6B;;8EAgBzC,CAAC;AAEF,8IAA8I;AAC9I,eAAO,MAAM,kCAAkC,oFAG7C,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,oBAAoB;;;;;8EAmDhC,CAAC;AAIF,eAAO,MAAM,2BAA2B,oFAAqD,CAAC;AAE9F,eAAO,MAAM,4BAA4B;;8EAUvC,CAAC;AAIH,eAAO,MAAM,uBAAuB;;8EAUlC,CAAC;AAIH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;8EAUtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAU/B,CAAC;AAIH,eAAO,MAAM,6BAA6B;;8EAgBzC,CAAC;AAEF,8IAA8I;AAC9I,eAAO,MAAM,kCAAkC,oFAE9C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

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

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { type ITileGroupMultipleProps, type ITileGroupSingleProps, type ITileIndicatorProps, type ITileLeadingSlotProps, type ITileProps, type ITileTrailingSlotProps, useTileContext } from '@cdx-ui/primitives';
+import { type TileGroupVariantProps, type TileVariantProps } from './styles';
+/**
+ * Discriminated union mirroring `ITileGroupProps`, with `className` and layout variants added at
+ * the styled layer. Distributing the intersection across each branch keeps `interface … extends`
+ * ergonomics and avoids tripping `@typescript-eslint` on `(union) & { ... }`.
+ *
+ * `direction` and `spacing` constrain the group layout to the three supported patterns:
+ * - `direction="column"` + `spacing="default"` — vertical stack with gaps (default).
+ * - `direction="column"` + `spacing="none"` — tight vertical stack (rows touch).
+ * - `direction="row"` + `spacing="default"` — side-by-side horizontal layout.
+ *
+ * `shape` (when set) is propagated to child `Tile`s via `withStyleContext`, matching the
+ * Avatar size-propagation pattern. A per-tile `shape` prop overrides the inherited value.
+ */
+export interface TileGroupSingleProps extends ITileGroupSingleProps, TileGroupVariantProps {
+    className?: string;
+    /** Visual shape inherited by child `Tile`s. Per-tile `shape` overrides this. */
+    shape?: TileVariantProps['shape'];
+}
+export interface TileGroupMultipleProps extends ITileGroupMultipleProps, TileGroupVariantProps {
+    className?: string;
+    /** Visual shape inherited by child `Tile`s. Per-tile `shape` overrides this. */
+    shape?: TileVariantProps['shape'];
+}
+export type TileGroupProps = TileGroupSingleProps | TileGroupMultipleProps;
+declare const TileGroup: import("react").ForwardRefExoticComponent<TileGroupProps & import("react").RefAttributes<View>>;
+export interface TileProps extends ITileProps, TileVariantProps {
+    className?: string;
+}
+declare const TileRoot: import("react").ForwardRefExoticComponent<TileProps & import("react").RefAttributes<View>>;
+export interface TileLeadingSlotProps extends ITileLeadingSlotProps {
+    className?: string;
+}
+declare const TileLeadingSlot: import("react").ForwardRefExoticComponent<TileLeadingSlotProps & import("react").RefAttributes<View>>;
+export interface TileContentProps extends ViewProps {
+    className?: string;
+}
+declare const TileContent: import("react").ForwardRefExoticComponent<TileContentProps & import("react").RefAttributes<View>>;
+export interface TileTitleProps extends TextProps {
+    className?: string;
+}
+declare const TileTitle: import("react").ForwardRefExoticComponent<TileTitleProps & import("react").RefAttributes<Text>>;
+export interface TileDescriptionProps extends TextProps {
+    className?: string;
+}
+declare const TileDescription: import("react").ForwardRefExoticComponent<TileDescriptionProps & import("react").RefAttributes<Text>>;
+export interface TileIndicatorProps extends ITileIndicatorProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const TileIndicator: import("react").ForwardRefExoticComponent<TileIndicatorProps & import("react").RefAttributes<View>>;
+export interface TileTrailingSlotProps extends ITileTrailingSlotProps {
+    className?: string;
+}
+declare const TileTrailingSlot: import("react").ForwardRefExoticComponent<TileTrailingSlotProps & import("react").RefAttributes<View>>;
+type TileCompound = typeof TileRoot & {
+    Group: typeof TileGroup;
+    LeadingSlot: typeof TileLeadingSlot;
+    Content: typeof TileContent;
+    Title: typeof TileTitle;
+    Description: typeof TileDescription;
+    Indicator: typeof TileIndicator;
+    TrailingSlot: typeof TileTrailingSlot;
+};
+export declare const Tile: TileCompound;
+export { useTileContext };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,sBAAsB,EAC3B,cAAc,EACf,MAAM,oBAAoB,CAAC;AAO5B,OAAO,EASL,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACtB,MAAM,UAAU,CAAC;AAmClB;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB,EAAE,qBAAqB;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,sBAAuB,SAAQ,uBAAuB,EAAE,qBAAqB;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC;AACD,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAC;AAE3E,QAAA,MAAM,SAAS,iGAYd,CAAC;AAQF,MAAM,WAAW,SAAU,SAAQ,UAAU,EAAE,gBAAgB;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAgBb,CAAC;AAQF,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,uGASpB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,mGAOf,CAAC;AAIH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,iGAUd,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,uGASpB,CAAC;AAqCF,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAYlB,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,wGASrB,CAAC;AAIF,KAAK,YAAY,GAAG,OAAO,QAAQ,GAAG;IACpC,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,WAAW,EAAE,OAAO,eAAe,CAAC;IACpC,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,WAAW,EAAE,OAAO,eAAe,CAAC;IACpC,SAAS,EAAE,OAAO,aAAa,CAAC;IAChC,YAAY,EAAE,OAAO,gBAAgB,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI,EAQX,YAAY,CAAC;AAEnB,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -20,6 +20,7 @@ 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,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,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/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.12",
+  "version": "0.0.1-beta.14",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -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.12",
-    "@cdx-ui/utils": "0.0.1-beta.12",
-    "@cdx-ui/icons": "0.0.1-beta.12"
+    "@cdx-ui/primitives": "0.0.1-beta.14",
+    "@cdx-ui/utils": "0.0.1-beta.14",
+    "@cdx-ui/icons": "0.0.1-beta.14"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Checkbox/styles.ts

@@ -1,8 +1,6 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_STRONG,
   COLOR_TEXT_PRIMARY,
   DISABLED_CURSOR,
   DISABLED_OPACITY,
@@ -29,14 +27,14 @@ export const checkboxIndicatorVariants = cva(
     'items-center justify-center',
     'rounded',
     'border-2',
-    COLOR_BORDER_STRONG,
-    COLOR_BG_PRIMARY,
-    'data-[checked=true]:bg-slate-900 data-[checked=true]:border-slate-900',
-    'data-[indeterminate=true]:bg-slate-900 data-[indeterminate=true]:border-slate-900',
+    'border-stroke-secondary',
+    'bg-surface-primary',
+    'data-[checked=true]:bg-surface-action-strong data-[checked=true]:border-stroke-action',
+    'data-[indeterminate=true]:bg-surface-action-strong data-[indeterminate=true]:border-stroke-action',
     'data-[disabled=true]:opacity-50',
-    'data-[invalid=true]:border-red-500',
-    'data-[checked=true]:data-[invalid=true]:bg-red-500 data-[checked=true]:data-[invalid=true]:border-red-500',
-    'data-[indeterminate=true]:data-[invalid=true]:bg-red-500 data-[indeterminate=true]:data-[invalid=true]:border-red-500',
+    'data-[invalid=true]:border-stroke-danger',
+    'data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong data-[checked=true]:data-[invalid=true]:border-stroke-danger',
+    'data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong data-[indeterminate=true]:data-[invalid=true]:border-stroke-danger',
     Platform.select({
       web: [
         TRANSITION_COLORS,

package/src/components/ListItem/styles.ts

@@ -1,12 +1,6 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  COLOR_TEXT_SECONDARY,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { TRANSITION_COLORS } from '../../styles/primitives';
 
 // ── Root (row): density, surface, separator, interactive feedback ──────────
 
@@ -19,7 +13,7 @@ export const listItemRootVariants = cva(
     Platform.select({
       web: [
         'outline-none',
-        'web:data-[hovered=true]:bg-slate-50',
+        'web:data-[hover=true]:bg-slate-50',
         'web:focus-visible:data-[disabled=false]:bg-slate-50',
         'web:focus-visible:data-[disabled=false]:ring-2 web:focus-visible:data-[disabled=false]:ring-slate-400/40 web:focus-visible:data-[disabled=false]:ring-offset-2',
       ].join(' '),
@@ -37,7 +31,7 @@ export const listItemRootVariants = cva(
         negative: 'bg-red-50',
       },
       showSeparator: {
-        true: ['border-b border-solid', COLOR_BORDER_DEFAULT],
+        true: 'border-b border-solid border-stroke-secondary',
         false: 'border-b-0',
       },
       crossAlign: {
@@ -49,7 +43,7 @@ export const listItemRootVariants = cva(
       {
         surface: 'negative',
         className: Platform.select({
-          web: 'web:data-[hovered=true]:bg-red-100/90',
+          web: 'web:data-[hover=true]:bg-red-100/90',
           default: '',
         }),
       },
@@ -81,7 +75,7 @@ export const listItemTrailingSlotVariants = cva(['flex shrink-0 flex-row justify
 
 // ── Content stack (title / description / meta) ───────────────────────────────
 
-export const listItemContentVariants = cva(['flex min-w-0 flex-1 flex-col gap-1'], {
+export const listItemContentVariants = cva('flex min-w-0 flex-1 flex-col gap-1', {
   variants: {
     crossAlign: {
       center: 'justify-center',
@@ -95,7 +89,7 @@ export const listItemContentVariants = cva(['flex min-w-0 flex-1 flex-col gap-1'
 
 // ── Typography ───────────────────────────────────────────────────────────────
 
-export const listItemTitleVariants = cva([COLOR_TEXT_PRIMARY, 'font-medium'], {
+export const listItemTitleVariants = cva('text-content-primary font-medium', {
   variants: {
     size: {
       default: 'text-base leading-snug',
@@ -107,7 +101,7 @@ export const listItemTitleVariants = cva([COLOR_TEXT_PRIMARY, 'font-medium'], {
   },
 });
 
-export const listItemDescriptionVariants = cva([COLOR_TEXT_SECONDARY], {
+export const listItemDescriptionVariants = cva('text-content-secondary', {
   variants: {
     size: {
       default: 'text-sm leading-normal',
@@ -119,7 +113,7 @@ export const listItemDescriptionVariants = cva([COLOR_TEXT_SECONDARY], {
   },
 });
 
-export const listItemMetaVariants = cva([COLOR_TEXT_MUTED], {
+export const listItemMetaVariants = cva('text-content-tertiary', {
   variants: {
     size: {
       default: 'text-xs leading-normal',
@@ -136,7 +130,7 @@ export const listItemMetaVariants = cva([COLOR_TEXT_MUTED], {
 export const listItemSectionHeaderVariants = cva(
   [
     'flex-row items-center justify-between gap-2 border-b border-solid px-4 py-3',
-    COLOR_BORDER_DEFAULT,
+    'border-stroke-secondary',
   ],
   {
     variants: {
@@ -152,9 +146,8 @@ export const listItemSectionHeaderVariants = cva(
 );
 
 /** Default section-title typography; applied by `ListItem.SectionHeader` for string/number children. Exported for rare custom composition. */
-export const listItemSectionHeaderLabelVariants = cva([
-  'text-xs font-semibold uppercase tracking-wide',
-  COLOR_TEXT_SECONDARY,
-]);
+export const listItemSectionHeaderLabelVariants = cva(
+  'text-xs font-semibold uppercase tracking-wide text-content-secondary',
+);
 
 export type ListItemVariantProps = VariantProps<typeof listItemRootVariants>;