@blenx-dev/components 0.0.0

package/.turbo/turbo-check-types.log

@@ -0,0 +1 @@
+$ tsc --noEmit

package/MIGRATION-PLAN.md

@@ -0,0 +1,423 @@
+# Migration Plan: StyleX → Vanilla-Extract
+
+## Strategy
+
+**Hybrid approach:** Shared sprinkles for Box, Stack, Grid layout components. All other components use `recipe()`, `style()`, and `globalStyle()` individually.
+
+**Incremental — one component at a time.** The existing StyleX build (`@stylexjs/unplugin` Vite plugin) remains active throughout. A VE theme bridge (`contract.css.ts`) provides CSS variable references that piggyback on the StyleX theme values at runtime.
+
+**Theme and vars are migrated last.** No VE theme implementation until all components use VE.
+
+---
+
+## Prerequisites
+
+- `@vanilla-extract/css`, `@vanilla-extract/recipes`, `@vanilla-extract/sprinkles` — already in `package.json` dependencies
+- `@vanilla-extract/vite-plugin` — already in `devDependencies`
+- `clsx` — already in `dependencies`
+
+---
+
+## Phase 0 — Foundation
+
+### 0.1 Add VE Vite plugin
+
+**File:** `vite.config.ts`
+**Action:** Add `@vanilla-extract/vite-plugin` alongside the existing stylex plugin. Both run in parallel during migration.
+
+### 0.2 Create VE theme bridge
+
+**File:** `src/theme/contract.css.ts`
+**Action:** `createGlobalThemeContract()` mirroring the StyleX contract variable names. No value assignment — this is just a reference layer so VE files can use `theme.primary` (resolves to `var(--primary)`) which the StyleX theme still defines at runtime.
+
+```ts
+import { createGlobalThemeContract } from "@vanilla-extract/css";
+
+export const theme = createGlobalThemeContract({
+  primary: "primary",
+  primarySubtle: "primary-subtle",
+  secondary: "secondary",
+  primaryHover: "primary-hover",
+  contentPrimary: "content-primary",
+  contentSecondary: "content-secondary",
+  contentDisabled: "content-disabled",
+  contentAccent: "content-accent",
+  contentOnPrimary: "content-on-primary",
+  surface: "surface",
+  surfaceSubtle: "surface-subtle",
+  surfaceRaised: "surface-raised",
+  surfaceHover: "surface-hover",
+  surfaceOverlay: "surface-overlay",
+  border: "border",
+  borderSubtle: "border-subtle",
+  borderStrong: "border-strong",
+  borderRadius: "border-radius",
+  background: "background",
+  backgroundSubtle: "background-subtle",
+  sentimentPositive: "sentiment-positive",
+  sentimentPositiveSubtle: "sentiment-positive-subtle",
+  sentimentPositiveHover: "sentiment-positive-hover",
+  sentimentWarning: "sentiment-warning",
+  sentimentWarningSubtle: "sentiment-warning-subtle",
+  sentimentWarningHover: "sentiment-warning-hover",
+  sentimentNegative: "sentiment-negative",
+  sentimentNegativeSubtle: "sentiment-negative-subtle",
+  sentimentNegativeHover: "sentiment-negative-hover",
+  sentimentInfo: "sentiment-info",
+  sentimentInfoSubtle: "sentiment-info-subtle",
+  sentimentInfoHover: "sentiment-info-hover",
+  focusRing: "focus-ring",
+  shadowSm: "shadow-sm",
+  shadowMd: "shadow-md",
+  shadowLg: "shadow-lg",
+  shadowXl: "shadow-xl",
+  fontSize: "font-size",
+  hoverOverlay: "hover-overlay",
+  hoverOverlaySoft: "hover-overlay-soft",
+});
+```
+
+### 0.3 Create VE tokens
+
+**File:** `src/theme/tokens.css.ts`
+**Action:** Convert StyleX token constants to plain exported objects and VE vars where appropriate.
+
+```ts
+// Border radius — can use createGlobalThemeContract or plain object
+export const borderRadius = {
+  xsmall: "2px",
+  small: "4px",
+  medium: "8px",
+  large: "12px",
+  xlarge: "16px",
+  xxlarge: "24px",
+  full: "999px",
+} as const;
+
+export const fonts = { ... } as const;
+export const fontSize = { ... } as const;
+export const fontWeight = { ... } as const;
+export const lineHeight = { ... } as const;
+export const letterSpacing = { ... } as const;
+export const spacing = { ... } as const;
+export const borderWidth = { ... } as const;
+export const duration = { ... } as const;
+export const easing = { ... } as const;
+
+// Primitive styles → style({}) exports
+// Media queries → plain objects
+export const mediaQueries = { sm: "screen and (min-width: 640px)", ... } as const;
+export const zIndex = { base: 0, raised: 100, ... } as const;
+```
+
+### 0.4 Create shared sprinkles config
+
+**File:** `src/utils/sprinkles.css.ts`
+**Action:** Consolidate Box layout/spacing/color/flex/position utilities from `box.css.ts`, `base.styles.ts`, and `layout.styles.ts` into one central sprinkles config. This is used by Box, Stack, and Grid.
+
+**Conditions:** `mobile` (no query), `tablet` (min-width: 768px), `desktop` (min-width: 1280px)
+
+**Property groups:**
+
+- **layout:** width, maxWidth, height, maxHeight, borderRadius
+- **responsiveSpacing:** padding (all directions), margin (all directions), gap with responsive conditions
+- **color:** color, backgroundColor, borderColor
+- **flex:** flex, flexGrow, flexShrink, display, justifyContent, alignItems
+- **position:** zIndex, position, top/bottom/left/right, overflow
+
+### 0.5 Create type utilities
+
+**File:** `src/utils/types.ts` (replaces `stylex.utils.ts`)
+**Action:** Create a types-only file with Base UI prop types, removing any `@stylexjs/stylex` import.
+
+```ts
+import type { useRender } from "@base-ui/react/use-render";
+
+export type PropsWithClassName<T> = Omit<T, "className" | "style"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+export type _BaseDivProps = PropsWithClassName<useRender.ComponentProps<"div">>;
+```
+
+---
+
+## Phase 1 — Layout Components (shared sprinkles)
+
+Components use the shared sprinkles config directly.
+
+| #   | Component     | Action                                                                    | VE API                    |
+| --- | ------------- | ------------------------------------------------------------------------- | ------------------------- |
+| 1.1 | **Box**       | Delete `box.styles.ts` (already has `box.css.ts` with sprinkles)          | sprinkles                 |
+| 1.2 | **Container** | Delete `container.styles.ts` (already has `container.css.ts` with recipe) | recipe                    |
+| 1.3 | **Stack**     | `stack.styles.ts` → `stack.css.ts`; update `stack.tsx`                    | recipe + shared sprinkles |
+| 1.4 | **Grid**      | `grid.styles.ts` → `grid.css.ts`; update `grid.tsx`                       | recipe + shared sprinkles |
+
+### 1.3 Stack
+
+- StyleX: orientation (horizontal/vertical), spacing, wrap, inline, align, justify, distribution
+- VE: `recipe()` for orientation/spacing variants + shared sprinkles for align/justify/wrap
+
+### 1.4 Grid
+
+- StyleX: columns, rows, gap, areas
+- VE: `recipe()` for column/row variants + shared sprinkles for gap
+
+---
+
+## Phase 2 — Simple Variant Components
+
+No pseudo-classes or minimal pseudo-classes. Pure variant-based styling → `recipe()`.
+
+| #   | Component      | Variants                                           | Pseudo-elements  | VE API                              |
+| --- | -------------- | -------------------------------------------------- | ---------------- | ----------------------------------- |
+| 2.1 | **Badge**      | variant (default/primary/secondary/danger/success) | none             | `recipe()`                          |
+| 2.2 | **Switch**     | checked, disabled                                  | `:focus-visible` | `recipe()` + `style({ selectors })` |
+| 2.3 | **Spinner**    | size (small/medium/large)                          | none             | `recipe()`                          |
+| 2.4 | **Separator**  | orientation (horizontal/vertical)                  | none             | `recipe()`                          |
+| 2.5 | **Icon**       | size (small/medium/large/xlarge)                   | none             | `recipe()`                          |
+| 2.6 | **Progress**   | —                                                  | none             | `style()`                           |
+| 2.7 | **Slider**     | orientation                                        | none             | `style()`                           |
+| 2.8 | **Splitter**   | orientation                                        | none             | `style()`                           |
+| 2.9 | **ScrollArea** | —                                                  | `:hover`         | `style({ selectors })`              |
+
+---
+
+## Phase 3 — Medium Complexity Components
+
+Multiple variants, pseudo-classes, and/or compound sub-elements.
+
+| #    | Component       | Key features                                                                                               | VE API                              |
+| ---- | --------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| 3.1  | **Button**      | 3 variant axes (intent/variant/size), `:hover`, `:disabled`, `button-intents.stylex.ts` with `createVar()` | `recipe()` + `createVar()`          |
+| 3.2  | **Text**        | 12+ typography variants, color/weight/align sub-styles                                                     | `recipe()` + exported style blocks  |
+| 3.3  | **Avatar**      | Size variants, fallback state                                                                              | `recipe()`                          |
+| 3.4  | **Card**        | Variant (elevated/outlined), padding                                                                       | `recipe()`                          |
+| 3.5  | **Surface**     | Variant (raised/subtle), padding                                                                           | `recipe()`                          |
+| 3.6  | **Alert**       | Variant (info/success/warning/error), icon                                                                 | `recipe()`                          |
+| 3.7  | **Field**       | Form field layout, error/label states                                                                      | `recipe()`                          |
+| 3.8  | **Input**       | Size variant, `:focus`, `:disabled`, `[data-*]`                                                            | `style()` + `globalStyle()`         |
+| 3.9  | **Textarea**    | Same as Input                                                                                              | `style()` + `globalStyle()`         |
+| 3.10 | **InputGroup**  | Slot layout (addon, button)                                                                                | `style()`                           |
+| 3.11 | **OTPField**    | Digit slots, `:focus`                                                                                      | `style()`                           |
+| 3.12 | **Checkbox**    | Checked/indeterminate, `:focus-visible`, `:disabled`                                                       | `recipe()` + `style({ selectors })` |
+| 3.13 | **Radio**       | Checked state, `:focus-visible`, `:disabled`                                                               | `recipe()` + `style({ selectors })` |
+| 3.14 | **Toggle**      | Pressed state, `:hover`, `:focus-visible`                                                                  | `recipe()` + `style({ selectors })` |
+| 3.15 | **ToggleGroup** | Orientation, variant                                                                                       | `recipe()`                          |
+| 3.16 | **ColorSwatch** | Color display, checkerboard                                                                                | `style()`                           |
+| 3.17 | **Breadcrumbs** | Separator, link states                                                                                     | `recipe()`                          |
+| 3.18 | **Table**       | Row/header/cell styles                                                                                     | `style()` + `globalStyle()`         |
+
+### Key Pattern: Button
+
+- `button-intents.stylex.ts` (`stylex.defineVars`) → `createVar()` for each intent slot
+- 3 recipe variant groups: `intent` (primary/neutral/success/warning/danger/info/mono), `variant` (solid/soft/outline/ghost/link), `size` (xsmall/small/icon/medium/large)
+- `:hover`, `:disabled` → `style({ selectors: { "&:hover:not(:disabled)": {}, "&:disabled": {} } })`
+
+### Key Pattern: Text
+
+- `/text-variants.css.ts` (or inline in `text.css.ts`):
+  - `recipe()` with `variant` (h1–h6, body1–4, caption, creatorNote, p, div, code) + `size` override
+  - Separate style blocks for `textTransform`, `textAlign`, `textWeight`, `color`
+
+---
+
+## Phase 4 — Complex Interactive Components
+
+Data-attribute selectors, parent selectors, compound compositions.
+
+| #    | Component        | Selectors                                                                                 | VE API                      |
+| ---- | ---------------- | ----------------------------------------------------------------------------------------- | --------------------------- |
+| 4.1  | **Accordion**    | `[data-panel-open] &` (parent selector), `:focus-visible`, `:hover`                       | `style()` + `globalStyle()` |
+| 4.2  | **Tabs**         | `:hover`, `:focus-visible`, indicator animation                                           | `recipe()` + `style()`      |
+| 4.3  | **Select**       | `[data-placeholder]`, `[data-highlighted]`, `[data-selected]`, `[data-disabled]` (nested) | `style()` + `globalStyle()` |
+| 4.4  | **Menu**         | data attributes, hover states                                                             | `style()` + `globalStyle()` |
+| 4.5  | **Combobox**     | Similar to Select + Input                                                                 | `style()` + `globalStyle()` |
+| 4.6  | **Command**      | Command palette, data attributes, `:hover`                                                | `style()` + `globalStyle()` |
+| 4.7  | **Autocomplete** | Input + suggestions                                                                       | `style()` + `globalStyle()` |
+| 4.8  | **Calendar**     | Date grid, selected/today/disabled                                                        | `style()` + `globalStyle()` |
+| 4.9  | **ColorPicker**  | Swatches, sliders                                                                         | `style()`                   |
+| 4.10 | **DatePicker**   | Combines Calendar + Popover                                                               | `style()`                   |
+
+### Key Pattern: Parent selector workaround
+
+StyleX `[data-panel-open] &` → VE `globalStyle()`:
+
+```ts
+globalStyle(`[data-panel-open] .${triggerIcon}`, {
+  transform: "rotate(180deg)",
+});
+```
+
+### Key Pattern: Nested data-attribute selectors (Select)
+
+```ts
+// VE globalStyle for scoping
+globalStyle(`${item}[data-selected]`, { ... });
+globalStyle(`${item}[data-highlighted]`, { ... });
+globalStyle(`${item}[data-selected]:hover`, { ... });
+```
+
+---
+
+## Phase 5 — Layout-Heavy Components
+
+Complex animations, pseudo-elements, `:has()` selectors, media query overrides.
+
+| #   | Component       | Key challenges                                                                                      | VE API                      |
+| --- | --------------- | --------------------------------------------------------------------------------------------------- | --------------------------- |
+| 5.1 | **Dialog**      | `::before`, `:has()`, `@media`, `data-[starting/ending]-style`, `--nested-dialogs`                  | `style()` + `globalStyle()` |
+| 5.2 | **Sheet**       | 21 styles, directional variants, `prefers-reduced-motion`, `data-starting/ending-style`, `::before` | `style()` + `globalStyle()` |
+| 5.3 | **Drawer**      | 54 styles (largest), directional/side variants, swipe area, menu items, `:has()`                    | `style()` + `globalStyle()` |
+| 5.4 | **AlertDialog** | 14 styles, same patterns as Dialog, `@media (max-width: 768px)`                                     | `style()` + `globalStyle()` |
+| 5.5 | **Popover**     | Arrow positioning, animations                                                                       | `style()`                   |
+
+### Key Pattern: `::before` pseudo-element
+
+```ts
+export const popup = style({
+  // ...
+  selectors: {
+    "&::before": {
+      content: '""',
+      pointerEvents: "none",
+      position: "absolute",
+      inset: 0,
+      borderRadius: "calc(16px - 1px)",
+      boxShadow: "0 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+    },
+  },
+});
+```
+
+### Key Pattern: `:has()` selectors
+
+```ts
+globalStyle(`${panel}:has([data-slot='dialog-popup']:has([data-slot='dialog-header']))`, {
+  paddingTop: spacing.xsmall,
+});
+```
+
+### Key Pattern: Enter/exit animations
+
+```ts
+globalStyle(`${backdrop}[data-starting-style]`, { opacity: 0 });
+globalStyle(`${backdrop}[data-ending-style]`, { opacity: 0 });
+```
+
+---
+
+## Phase 6 — Components Without `styles.ts`
+
+These have no dedicated style file. Check for inline `stylex.create()` usage.
+
+| #   | Component            | Action                                                                          |
+| --- | -------------------- | ------------------------------------------------------------------------------- |
+| 6.1 | **IconButton**       | `icon-button.tsx` has inline `stylex.create({ base })` — convert to `style({})` |
+| 6.2 | **CloseButton**      | Wraps IconButton; no styles to migrate                                          |
+| 6.3 | **CopyButton**       | Wraps IconButton with `variant="ghost"`; no styles to migrate                   |
+| 6.4 | **SegmentedControl** | Check for inline stylex; likely none                                            |
+| 6.5 | **ColorPicker**      | Check for inline stylex; uses react-colorful                                    |
+| 6.6 | **DatePicker**       | Commented out in barrel; skip                                                   |
+| 6.7 | **ColorPicker**      | —                                                                               |
+
+---
+
+## Phase 7 — Cleanup
+
+| #   | Task                                               | Details                                                                 |
+| --- | -------------------------------------------------- | ----------------------------------------------------------------------- |
+| 7.1 | Delete `stylex.utils.ts`                           | Replaced by `types.ts`                                                  |
+| 7.2 | Delete all `*.styles.ts` files                     | 44 component files + 2 util files (should all be gone after Phases 1–5) |
+| 7.3 | Delete `button-intents.stylex.ts`                  | Converted in Phase 3.1                                                  |
+| 7.4 | Remove `@stylexjs/stylex` from remaining TSX files | Verify no remaining stylex imports in components                        |
+
+---
+
+## Phase 8 — Theme + Vars Migration (Final)
+
+Only after all components are on VE. The bridge (`contract.css.ts`) becomes the real contract.
+
+| #   | Task                                         | Details                                                                             |
+| --- | -------------------------------------------- | ----------------------------------------------------------------------------------- |
+| 8.1 | Update `contract.css.ts`                     | Add `createGlobalTheme(":root", theme, { ...values... })` for light and dark themes |
+| 8.2 | Convert `tokens.stylex.ts`                   | Replace with VE version (already created in 0.3)                                    |
+| 8.3 | Remove `contract.stylex.ts`                  | No longer needed                                                                    |
+| 8.4 | Remove `tokens.stylex.ts`                    | No longer needed                                                                    |
+| 8.5 | Remove `theme.stylex.ts`                     | No longer needed                                                                    |
+| 8.6 | Remove `@stylexjs/unplugin` from vite config | Only VE plugin remains                                                              |
+| 8.7 | Update package.json                          | Remove `@stylexjs/stylex` if it was a direct dep                                    |
+
+---
+
+## Per-Component Conversion Template
+
+Each component in Phases 1–5 follows these sub-steps:
+
+```
+1. Read `component.styles.ts` — catalog all style keys, pseudo-classes, selectors, media queries
+2. Create `component.css.ts` — convert to recipe/style/globalStyle as appropriate
+3. Read `component.tsx` — understand style application pattern:
+   a. stylex.props() spread → clsx(classes)
+   b. stylex.props().className extraction → clsx(classes)
+   c. useRender + mergeProps → clsx + manual style merge
+4. Update `component.tsx`:
+   a. Remove `import * as stylex from "@stylexjs/stylex"`
+   b. Change `import { ... } from "./component.styles"` → `import { ... } from "./component.css"`
+   c. Replace `stylex.props(a, b, c)` with `clsx(a, b, c)`
+   d. Replace `stylex.props(...).className ?? ""` with `clsx(...)`
+   e. Replace `keyof typeof styleObj` with `RecipeVariants<typeof recipe>`
+   f. Replace `style: StyleXStyles` with `style?: React.CSSProperties`
+5. Delete `component.styles.ts`
+6. Run `npm run check-types` to verify
+```
+
+---
+
+## Dependency Order
+
+```
+contract.css.ts (VE bridge)
+        ↓
+ utils/sprinkles.css.ts
+        ↓
+  Box → Container
+        ↓
+   Stack → Grid
+        ↓
+  Simple (Badge, Switch, Spinner...)
+        ↓
+    Medium (Button, Text, Card...)
+        ↓
+ Complex (Accordion, Tabs, Select...)
+        ↓
+ Layout-heavy (Dialog, Sheet, Drawer...)
+        ↓
+ Theme migration (final)
+```
+
+Components in each phase can be migrated in any order within their phase. Lower phases don't depend on higher ones.
+
+---
+
+## StyleX → Vanilla-Extract Cheat Sheet
+
+| StyleX                                 | Vanilla-Extract                                            |
+| -------------------------------------- | ---------------------------------------------------------- |
+| `stylex.props(a, b, c)`                | `clsx(a, b, c)`                                            |
+| `stylex.create({ root: {} })`          | `export const root = style({})`                            |
+| `":hover"` as key                      | `selectors: { "&:hover": {} }`                             |
+| `":hover:not(:disabled)"`              | `selectors: { "&:hover:not(:disabled)": {} }`              |
+| `"[data-foo]"` as key                  | `selectors: { "&[data-foo]": {} }`                         |
+| `"[data-foo] &"` (parent selector)     | `globalStyle(\`[data-foo] .${className}\`, {})`            |
+| `"::before"` as key                    | `selectors: { "&::before": {} }`                           |
+| Multi-value with `@media`              | Nested `"@media"` in style block                           |
+| `prefers-reduced-motion`               | `"@media (prefers-reduced-motion: reduce)"`                |
+| `stylex.defineVars({ x: "" })`         | `createGlobalThemeContract({ x: "x" })`                    |
+| `stylex.defineConsts({ x: val })`      | `export const x = val` (plain export)                      |
+| `keyof typeof styleObj`                | `RecipeVariants<typeof recipe>`                            |
+| `theme.primary` (stylex var)           | `theme.primary` (VE contract reference → `var(--primary)`) |
+| `fontSize.spacing.xxsmall` (dependent) | `fontSize.xxsmall` (direct value)                          |
+| `[intentTokens.solidBg]` (dynamic)     | `createVar()` — scoped CSS variable                        |
+| `style: StyleXStyles`                  | `style?: React.CSSProperties`                              |
+| `PropsWithStylex<T>`                   | `T & { style?: React.CSSProperties; className?: string }`  |

package/TASKS.md

@@ -0,0 +1,192 @@
+# Migration Tasks: StyleX → Vanilla-Extract
+
+Per-component task breakdown, grouped by similarity. Each ✅ marks one file to convert.
+
+---
+
+## GUIDELINES
+
+- DO NOT CHECK FOR TYPES
+- DO NOT FIX RUN TIME TYPESCRIPT ISSUES.
+- IGNORE ANY TYPE WARNINGS
+
+## Group A: Foundation (do first)
+
+- [ ] **A1** — Add `@vanilla-extract/vite-plugin` to `vite.config.ts` alongside stylex plugin
+- [ ] **A2** — Create `src/theme/contract.css.ts` (VE theme bridge via `createGlobalThemeContract`)
+- [ ] **A3** — Create `src/theme/tokens.css.ts` (convert StyleX token constants to plain objects)
+- [ ] **A4** — Create `src/utils/sprinkles.css.ts` (shared sprinkles for Box/Stack/Grid)
+- [ ] **A5** — Create `src/utils/types.ts` (replace `stylex.utils.ts` with plain React.CSSProperties types)
+
+---
+
+## Group B: Layout — shared sprinkles
+
+- [ ] **B1** — **Box**: delete `box.styles.ts` (already has `box.css.ts`)
+- [ ] **B2** — **Container**: delete `container.styles.ts` (already has `container.css.ts`)
+- [ ] **B3** — **Stack**: `stack.styles.ts` → `stack.css.ts`; update `stack.tsx`
+- [ ] **B4** — **Grid**: `grid.styles.ts` → `grid.css.ts`; update `grid.tsx`
+
+---
+
+## Group C: Simple recipe components
+
+No pseudo-classes. Pure variant slices → `recipe()`.
+
+- [ ] **C1** — **Badge**: `badge.styles.ts` → `badge.css.ts`; update `badge.tsx`
+- [ ] **C2** — **Spinner**: `spinner.styles.ts` → `spinner.css.ts`; update `spinner.tsx`
+- [ ] **C3** — **Separator**: `separator.styles.ts` → `separator.css.ts`; update `separator.tsx`
+- [ ] **C4** — **Icon**: `icon.styles.ts` → `icon.css.ts`; update `icon.tsx`
+- [ ] **C5** — **Progress**: `progress.styles.ts` → `progress.css.ts`; update `progress.tsx`
+
+---
+
+## Group D: Display/card components
+
+Variant-based with minimal pseudo-classes.
+
+- [ ] **D1** — **Card**: `card.styles.ts` → `card.css.ts`; update `card.tsx`
+- [ ] **D2** — **Surface**: `surface.styles.ts` → `surface.css.ts`; update `surface.tsx`
+- [ ] **D3** — **Alert**: `alert.styles.ts` → `alert.css.ts`; update `alert.tsx`
+- [ ] **D4** — **Avatar**: `avatar.styles.ts` → `avatar.css.ts`; update `avatar.tsx`
+- [ ] **D5** — **ColorSwatch**: `color-swatch.styles.ts` → `color-swatch.css.ts`; update `color-swatch.tsx`
+- [ ] **D6** — **Breadcrumbs**: `breadcrumbs.styles.ts` → `breadcrumbs.css.ts`; update `breadcrumbs.tsx`
+- [ ] **D7** — **Table**: `table.styles.ts` → `table.css.ts`; update `table.tsx`
+
+---
+
+## Group E: Toggle/check components
+
+State-driven (checked/disabled/pressed) with `:focus-visible`, `:hover`.
+
+- [ ] **E1** — **Switch**: `switch.styles.ts` → `switch.css.ts`; update `switch.tsx`
+- [ ] **E2** — **Checkbox**: `checkbox.styles.ts` → `checkbox.css.ts`; update `checkbox.tsx`
+- [ ] **E3** — **Radio**: `radio.styles.ts` → `radio.css.ts`; update `radio.tsx`
+- [ ] **E4** — **Toggle**: `toggle.styles.ts` → `toggle.css.ts`; update `toggle.tsx`
+- [ ] **E5** — **ToggleGroup**: `toggle-group.styles.ts` → `toggle-group.css.ts`; update `toggle-group.tsx`
+
+---
+
+## Group F: Form input components
+
+`[data-*]` attributes, `:focus`, `:disabled` selectors. `globalStyle()` needed.
+
+- [ ] **F1** — **Input**: `input.styles.ts` → `input.css.ts`; update `input.tsx`
+- [ ] **F2** — **Textarea**: `textarea.styles.ts` → `textarea.css.ts`; update `textarea.tsx`
+- [ ] **F3** — **InputGroup**: `input-group.styles.ts` → `input-group.css.ts`; update `input-group.tsx`
+- [ ] **F4** — **OTPField**: `otp-field.styles.ts` → `otp-field.css.ts`; update `otp-field.tsx`
+- [ ] **F5** — **Field**: `field.styles.ts` → `field.css.ts`; update `field.tsx`
+
+---
+
+## Group G: Compound interactive components
+
+Multiple sub-elements, `[data-*]` attributes, nested selectors.
+
+- [ ] **G1** — **Select**: `select.styles.ts` → `select.css.ts`; update `select.tsx`
+- [ ] **G2** — **Combobox**: `combobox.styles.ts` → `combobox.css.ts`; update `combobox.tsx`
+- [ ] **G3** — **Autocomplete**: `autocomplete.styles.ts` → `autocomplete.css.ts`; update `autocomplete.tsx`
+- [ ] **G4** — **Menu**: `menu.styles.ts` → `menu.css.ts`; update `menu.tsx`
+
+---
+
+## Group H: Typography
+
+- [ ] **H1** — **Text**: `text.styles.ts` → `text.css.ts`; update `text.tsx`
+
+---
+
+## Group I: Button family
+
+Button is the most complex — 3 variant axes + `createVar()` for intent tokens. IconButton/CloseButton/CopyButton wrap Button.
+
+- [ ] **I1** — **Button**: `button.styles.ts` → `button.css.ts`; `button-intents.stylex.ts` → inlined `createVar()` in `button.css.ts`; update `button.tsx`
+- [ ] **I2** — **IconButton**: inline `stylex.create()` in `icon-button.tsx` → `style({})`
+- [ ] **I3** — **CloseButton**: no styles; verify no inline stylex
+- [ ] **I4** — **CopyButton**: no styles; verify no inline stylex
+
+---
+
+## Group J: Accordion + Tabs
+
+Compound sub-components, state-driven styles, parent selectors.
+
+- [ ] **J1** — **Accordion**: `accordion.styles.ts` → `accordion.css.ts`; update `accordion.tsx` (handle `[data-panel-open] &` parent selector via `globalStyle`)
+- [ ] **J2** — **Tabs**: `tabs.styles.ts` → `tabs.css.ts`; update `tabs.tsx`
+
+---
+
+## Group K: Overlay/dialog components
+
+Complex animations, `::before`, `:has()`, `@media`, `prefers-reduced-motion`, `data-starting/ending-style`.
+
+- [ ] **K1** — **Dialog**: `dialog.styles.ts` → `dialog.css.ts`; update `dialog.tsx`
+- [ ] **K2** — **Sheet**: `sheet.styles.ts` → `sheet.css.ts`; update `sheet.tsx`
+- [ ] **K3** — **AlertDialog**: `alert-dialog.styles.ts` → `alert-dialog.css.ts`; update `alert-dialog.tsx`
+- [ ] **K4** — **Drawer**: `drawer.styles.ts` → `drawer.css.ts`; update `drawer.tsx`
+- [ ] **K5** — **Popover**: `popover.styles.ts` → `popover.css.ts`; update `popover.tsx`
+- [ ] **K6** — **ScrollArea**: `scroll-area.styles.ts` → `scroll-area.css.ts`; update `scroll-area.tsx`
+
+---
+
+## Group L: Command palette
+
+- [ ] **L1** — **Command**: `command.styles.ts` → `command.css.ts`; update `command.tsx`
+
+---
+
+## Group M: Pickers (no styles.ts)
+
+Check for inline stylex usage; convert if found.
+
+- [ ] **M1** — **ColorPicker**: check `color-picker.tsx` for inline stylex
+- [ ] **M2** — **DatePicker**: check `date-picker.tsx` for inline stylex (commented out in barrel — skip if no usage)
+- [ ] **M3** — **Calendar**: `calendar.styles.ts` → `calendar.css.ts`; update `calendar.tsx`
+- [ ] **M4** — **SegmentedControl**: check `segmented-control.tsx` for inline stylex
+
+---
+
+## Group N: Misc remaining
+
+- [ ] **N1** — **Slider**: `slider.styles.ts` → `slider.css.ts`; update `slider.tsx`
+- [ ] **N2** — **Splitter**: `splitter.styles.ts` → `splitter.css.ts`; update `splitter.tsx`
+
+---
+
+## Group O: Cleanup (after all components done)
+
+- [ ] **O1** — Delete `stylex.utils.ts`
+- [ ] **O2** — Verify no remaining `*.styles.ts` or `*.stylex.ts` files exist in `src/components/`
+- [ ] **O3** — Remove `@stylexjs/stylex` from remaining TSX imports
+- [ ] **O4** — Update `src/utils/base.styles.ts` and `src/utils/layout.styles.ts` (absorbed into sprinkles; delete if empty)
+
+---
+
+## Group P: Theme migration (final — only after all above)
+
+- [ ] **P1** — Update `contract.css.ts`: add `createGlobalTheme(":root", theme, {...})` for light theme values
+- [ ] **P2** — Create dark theme implementation (maps same contract to dark values)
+- [ ] **P3** — Remove `contract.stylex.ts`
+- [ ] **P4** — Remove `tokens.stylex.ts`
+- [ ] **P5** — Remove `theme.stylex.ts`
+- [ ] **P6** — Remove `@stylexjs/unplugin` from `vite.config.ts`
+- [ ] **P7** — Remove `@stylexjs` dependencies from package.json
+
+---
+
+## Execution order
+
+```
+A1–A5 (foundation)
+  └─ B1–B4 (layout)
+       └─ C1–C5, D1–D7, E1–E5 (simple — any order within this tier)
+            └─ F1–F5, G1–G4, H1 (form + compound — any order)
+                 └─ I1–I4 (button family)
+                      └─ J1–J2 (accordion/tabs)
+                           └─ K1–K6, L1 (overlays — any order)
+                                └─ M1–M4, N1–N2 (pickers + misc)
+                                     └─ O1–O4 (cleanup)
+                                          └─ P1–P7 (theme final)
+```
+
+Components within the same tier are independent — can be done in parallel or any order.