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

package/src/components/Tile/styles.ts

@@ -0,0 +1,82 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+export const tileGroupVariants = cva(['flex w-full'], {
+  variants: {
+    direction: {
+      column: 'flex-col',
+      row: 'flex-row',
+    },
+    spacing: {
+      default: 'gap-2',
+      none: 'gap-0',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    spacing: 'default',
+  },
+});
+
+export type TileGroupVariantProps = VariantProps<typeof tileGroupVariants>;
+
+export const tileRootVariants = cva(
+  [
+    'flex-row self-stretch gap-3 px-4 py-3',
+    'data-[disabled=true]:opacity-50',
+    TRANSITION_COLORS,
+    Platform.select({
+      web: [
+        'outline-none',
+        'data-[hover=true]:data-[disabled=false]:bg-surface-action-tint-hover',
+        'data-[active=true]:data-[disabled=false]:data-[hover=true]:bg-surface-action-tint-active',
+        'data-[hover=true]:data-[disabled=false]:data-[state=unselected]:border-stroke-action',
+        'focus-visible:data-[disabled=false]:ring-2 focus-visible:data-[disabled=false]:ring-stroke-focus focus-visible:data-[disabled=false]:ring-offset-2',
+      ].join(' '),
+      default: [
+        'data-[active=true]:bg-surface-action-tint-hover',
+        'data-[active=true]:border-stroke-action',
+      ].join(' '),
+    }),
+  ],
+  {
+    variants: {
+      shape: {
+        flat: 'rounded-none border-0 bg-transparent',
+        card: [
+          'rounded-xl border-1 border-solid',
+          'border-stroke-secondary',
+          'bg-surface-primary',
+          'data-[state=selected]:border-stroke-action',
+          'data-[state=selected]:border-1.5',
+          'data-[state=selected]:bg-surface-action-tint',
+        ].join(' '),
+      },
+      showSeparator: {
+        true: [
+          'border-b border-solid border-stroke-secondary! native:data-[active=true]:border-stroke-secondary', // Override border-stroke-action on hover
+        ],
+        false: '',
+      },
+    },
+    defaultVariants: {
+      shape: 'card',
+      showSeparator: false,
+    },
+  },
+);
+
+export const tileLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const tileTrailingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const tileContentVariants = cva(['min-w-0 flex-1 flex-col gap-0.5 no-underline']);
+
+export const tileTitleVariants = cva(['text-base font-medium text-content-primary no-underline']);
+
+export const tileDescriptionVariants = cva(['text-sm text-content-secondary no-underline']);
+
+export const tileIndicatorVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export type TileVariantProps = VariantProps<typeof tileRootVariants>;

package/src/components/index.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/src/styles/primitives.ts

@@ -3,36 +3,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',
@@ -77,6 +106,7 @@ export const SEMANTIC_COLORS = {
 } as const;
 
 // ─── 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 ──────────────────────────────────────────────
@@ -85,13 +115,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', px: 'px-4', gap: 'gap-2', text: 'text-base' },
   small: { height: 'h-8', px: 'px-3', gap: 'gap-1.5', text: 'text-sm' },