@wealthx/shadcn 0.0.2 → 1.0.1

package/.turbo/turbo-build.log

@@ -14,23 +14,147 @@ npm warn Unknown project config "auto-install-peers". This will stop working in
 npm warn Unknown project config "public-hoist-pattern". This will stop working in the next major version of npm. See `npm help npmrc` for supported config options.
 ≈ tailwindcss v4.2.2
 
-Done in 217ms
+Done in 561ms
 Built dist/styles.css and src/styles/styles-css.ts
 warning package.json: No license field
 $ tsup
-CLI Building entry: src/index.ts
+CLI Building entry: src/index.ts, src/lib/colors.ts, src/lib/theme-provider.tsx, src/lib/typography.ts, src/lib/utils.ts, src/components/ui/accordion.tsx, src/components/ui/alert-dialog.tsx, src/components/ui/alert.tsx, src/components/ui/avatar.tsx, src/components/ui/badge.tsx, src/components/ui/button.tsx, src/components/ui/calendar.tsx, src/components/ui/card.tsx, src/components/ui/checkbox.tsx, src/components/ui/chip.tsx, src/components/ui/data-table.tsx, src/components/ui/date-picker.tsx, src/components/ui/dialog.tsx, src/components/ui/drawer.tsx, src/components/ui/dropdown-menu.tsx, src/components/ui/empty.tsx, src/components/ui/field.tsx, src/components/ui/input-group.tsx, src/components/ui/input-otp.tsx, src/components/ui/input.tsx, src/components/ui/label.tsx, src/components/ui/pagination.tsx, src/components/ui/popover.tsx, src/components/ui/progress.tsx, src/components/ui/radio-group.tsx, src/components/ui/select.tsx, src/components/ui/separator.tsx, src/components/ui/sheet.tsx, src/components/ui/skeleton.tsx, src/components/ui/sonner.tsx, src/components/ui/spinner.tsx, src/components/ui/switch.tsx, src/components/ui/table.tsx, src/components/ui/tabs.tsx, src/components/ui/textarea.tsx, src/components/ui/toggle-group.tsx, src/components/ui/toggle.tsx, src/components/ui/tooltip.tsx
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.1
 CLI Using tsup config: /home/runner/work/wealthx-ui/wealthx-ui/packages/shadcn/tsup.config.ts
 CLI Target: es6
 CJS Build start
 ESM Build start
-CJS dist/index.js 25.07 KB
-CJS ⚡️ Build success in 69ms
-ESM dist/index.mjs 23.79 KB
-ESM ⚡️ Build success in 67ms
-DTS Build start
-DTS ⚡️ Build success in 4069ms
-DTS dist/index.d.ts  1.32 KB
-DTS dist/index.d.mts 1.32 KB
-Done in 11.04s.
+CJS dist/index.js                       154.63 KB
+CJS dist/lib/colors.js                  3.15 KB
+CJS dist/lib/theme-provider.js          6.09 KB
+CJS dist/lib/typography.js              5.49 KB
+CJS dist/lib/utils.js                   1.20 KB
+CJS dist/components/ui/accordion.js     5.11 KB
+CJS dist/components/ui/alert.js         4.57 KB
+CJS dist/components/ui/alert-dialog.js  15.26 KB
+CJS dist/components/ui/avatar.js        5.71 KB
+CJS dist/components/ui/badge.js         6.12 KB
+CJS dist/components/ui/button.js        7.98 KB
+CJS dist/components/ui/calendar.js      15.83 KB
+CJS dist/components/ui/card.js          4.91 KB
+CJS dist/components/ui/checkbox.js      6.51 KB
+CJS dist/components/ui/chip.js          7.36 KB
+CJS dist/components/ui/data-table.js    37.83 KB
+CJS dist/components/ui/date-picker.js   21.43 KB
+CJS dist/components/ui/dialog.js        14.05 KB
+CJS dist/components/ui/drawer.js        7.96 KB
+CJS dist/components/ui/dropdown-menu.js 12.97 KB
+CJS dist/components/ui/empty.js         5.30 KB
+CJS dist/components/ui/field.js         11.19 KB
+CJS dist/components/ui/input-group.js   15.80 KB
+CJS dist/components/ui/input-otp.js     5.86 KB
+CJS dist/components/ui/label.js         2.92 KB
+CJS dist/components/ui/pagination.js    11.88 KB
+CJS dist/components/ui/popover.js       5.81 KB
+CJS dist/components/ui/progress.js      3.32 KB
+CJS dist/components/ui/radio-group.js   6.54 KB
+CJS dist/components/ui/input.js         3.26 KB
+CJS dist/components/ui/separator.js     2.97 KB
+CJS dist/components/ui/select.js        10.14 KB
+CJS dist/components/ui/skeleton.js      2.62 KB
+CJS dist/components/ui/sheet.js         8.05 KB
+CJS dist/components/ui/sonner.js        3.35 KB
+CJS dist/components/ui/spinner.js       3.12 KB
+CJS dist/components/ui/switch.js        6.34 KB
+CJS dist/components/ui/table.js         5.60 KB
+CJS dist/components/ui/tabs.js          6.44 KB
+CJS dist/components/ui/textarea.js      3.13 KB
+CJS dist/components/ui/toggle-group.js  6.71 KB
+CJS dist/components/ui/toggle.js        3.99 KB
+CJS dist/components/ui/tooltip.js       5.03 KB
+CJS ⚡️ Build success in 319ms
+ESM dist/lib/colors.mjs                  205.00 B
+ESM dist/index.mjs                       7.84 KB
+ESM dist/chunk-DDPA2XXS.mjs              2.45 KB
+ESM dist/chunk-3U7SD3MS.mjs              1.74 KB
+ESM dist/chunk-CGOKTPXU.mjs              2.24 KB
+ESM dist/chunk-PMKODV6M.mjs              4.88 KB
+ESM dist/chunk-2Y7YJKPE.mjs              1.24 KB
+ESM dist/chunk-BMFN37JH.mjs              865.00 B
+ESM dist/chunk-VYMHBV6D.mjs              3.78 KB
+ESM dist/chunk-RL772EH7.mjs              4.04 KB
+ESM dist/chunk-NGYG2EA6.mjs              3.51 KB
+ESM dist/chunk-BBJBJSXQ.mjs              995.00 B
+ESM dist/chunk-JU2RUWHF.mjs              3.88 KB
+ESM dist/chunk-AMJ23O53.mjs              3.58 KB
+ESM dist/chunk-MQ72DIBH.mjs              3.01 KB
+ESM dist/chunk-7LDIMXGM.mjs              5.28 KB
+ESM dist/chunk-6AFMNC42.mjs              4.84 KB
+ESM dist/chunk-YN5SYTOO.mjs              2.81 KB
+ESM dist/chunk-HUVTPUV2.mjs              6.89 KB
+ESM dist/chunk-ZZV5JVNW.mjs              835.00 B
+ESM dist/chunk-55CEW76V.mjs              840.00 B
+ESM dist/chunk-ZN2QKLF6.mjs              5.71 KB
+ESM dist/chunk-GPRJQ24C.mjs              1005.00 B
+ESM dist/chunk-Z3MK2KKZ.mjs              2.66 KB
+ESM dist/chunk-6OJF6XRN.mjs              3.27 KB
+ESM dist/chunk-2WZVSBAY.mjs              7.72 KB
+ESM dist/chunk-SLWCCURD.mjs              2.45 KB
+ESM dist/chunk-VG6UF6UT.mjs              1.63 KB
+ESM dist/chunk-E3K6O4FZ.mjs              1.87 KB
+ESM dist/chunk-MKFL5MNH.mjs              12.35 KB
+ESM dist/chunk-HS7TFG7V.mjs              483.00 B
+ESM dist/chunk-BGP2N52Z.mjs              3.07 KB
+ESM dist/chunk-VZ2NR7L3.mjs              6.68 KB
+ESM dist/chunk-MJIEMGRD.mjs              9.04 KB
+ESM dist/chunk-DS2AMHN2.mjs              1.12 KB
+ESM dist/chunk-JF4PHPD5.mjs              3.93 KB
+ESM dist/lib/theme-provider.mjs          237.00 B
+ESM dist/lib/typography.mjs              527.00 B
+ESM dist/chunk-3VQNJ235.mjs              3.52 KB
+ESM dist/lib/utils.mjs                   95.00 B
+ESM dist/chunk-KKHTJNMM.mjs              2.51 KB
+ESM dist/chunk-NWZ46DJL.mjs              6.31 KB
+ESM dist/chunk-IAOOZCUY.mjs              3.47 KB
+ESM dist/chunk-DBHJ5KC3.mjs              1.56 KB
+ESM dist/chunk-QOJ2DQD6.mjs              2.06 KB
+ESM dist/chunk-V7CNWJT3.mjs              168.00 B
+ESM dist/chunk-FWCSY2DS.mjs              1.30 KB
+ESM dist/chunk-CZ3BW5GL.mjs              2.25 KB
+ESM dist/components/ui/toggle-group.mjs  241.00 B
+ESM dist/chunk-OXQQNQZI.mjs              2.93 KB
+ESM dist/components/ui/toggle.mjs        194.00 B
+ESM dist/components/ui/tooltip.mjs       326.00 B
+ESM dist/components/ui/sheet.mjs         462.00 B
+ESM dist/components/ui/skeleton.mjs      148.00 B
+ESM dist/components/ui/sonner.mjs        111.00 B
+ESM dist/components/ui/spinner.mjs       184.00 B
+ESM dist/components/ui/switch.mjs        186.00 B
+ESM dist/components/ui/table.mjs         336.00 B
+ESM dist/components/ui/tabs.mjs          264.00 B
+ESM dist/components/ui/textarea.mjs      148.00 B
+ESM dist/components/ui/input.mjs         142.00 B
+ESM dist/components/ui/label.mjs         142.00 B
+ESM dist/components/ui/pagination.mjs    460.00 B
+ESM dist/components/ui/popover.mjs       432.00 B
+ESM dist/components/ui/progress.mjs      148.00 B
+ESM dist/components/ui/select.mjs        538.00 B
+ESM dist/components/ui/radio-group.mjs   224.00 B
+ESM dist/components/ui/separator.mjs     150.00 B
+ESM dist/components/ui/date-picker.mjs   376.00 B
+ESM dist/components/ui/dialog.mjs        584.00 B
+ESM dist/components/ui/drawer.mjs        514.00 B
+ESM dist/components/ui/dropdown-menu.mjs 884.00 B
+ESM dist/components/ui/empty.mjs         300.00 B
+ESM dist/components/ui/field.mjs         486.00 B
+ESM dist/components/ui/input-group.mjs   488.00 B
+ESM dist/components/ui/input-otp.mjs     256.00 B
+ESM dist/components/ui/avatar.mjs        310.00 B
+ESM dist/components/ui/badge.mjs         211.00 B
+ESM dist/components/ui/button.mjs        215.00 B
+ESM dist/components/ui/calendar.mjs      260.00 B
+ESM dist/components/ui/card.mjs          318.00 B
+ESM dist/components/ui/checkbox.mjs      194.00 B
+ESM dist/components/ui/chip.mjs          210.00 B
+ESM dist/components/ui/data-table.mjs    736.00 B
+ESM dist/components/ui/accordion.mjs     264.00 B
+ESM dist/components/ui/alert.mjs         210.00 B
+ESM dist/components/ui/alert-dialog.mjs  768.00 B
+ESM ⚡️ Build success in 326ms
+Done in 7.14s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @wealthx/shadcn
 
+## 1.0.1
+
+### Patch Changes
+
+- 026db62: Add README.md
+
+## 1.0.0
+
+### Major Changes
+
+- 8dc9f79: Eslint fix
+
 ## 0.0.2
 
 ### Patch Changes

package/CHANGES.md

@@ -0,0 +1,345 @@
+# shadcn Package — Changelog
+
+> **Branch:** `shadcn`
+> **Date:** 2026-03-20
+> **Figma:** [Design System - shadcn](https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn)
+
+---
+
+## 2026-03-23 — Table — New Component
+
+### New Components
+
+#### Table
+
+- **Install:** `npx shadcn@latest add table` (native HTML `<table>` wrapped in semantic sub-components)
+- **Figma:** [shadcn kit — Table](https://www.figma.com/design/QJ0VIGgndNOAswHK9QEnLe/Preview---shadcn-kit-for-Figma---March-2026?node-id=184-890)
+- **WealthX overrides:**
+  - `TableHead`: `text-foreground` → `text-muted-foreground` — header labels are secondary text
+  - `TableHead`: padding `px-2` → `px-4` — wider column padding per Figma
+  - `TableCell`: padding `p-2` → `px-4 py-3` — consistent cell padding per Figma
+  - `TableRow`: `transition-colors` → `transition-[background-color,opacity]` — scoped animation
+- **Storybook:** `shadcn-table.stories.tsx` — 4 stories:
+  - `Invoices` — full table with header, body, footer, caption
+  - `WithBadgeStatus` — user list with Badge status indicators
+  - `Empty` — empty state with colspan placeholder row
+  - `WithCaption` — paginated table caption example
+
+### Files Changed
+
+| File                                              | Change                                       |
+| ------------------------------------------------- | -------------------------------------------- |
+| `packages/shadcn/src/components/ui/table.tsx`     | New — Table component with WealthX overrides |
+| `packages/shadcn/package.json`                    | Added `./table` export entry                 |
+| `packages/shadcn/tsup.config.ts`                  | Added `table.tsx` entry point                |
+| `apps/docs/stories/shadcn-table.stories.tsx`      | New — 4 Storybook stories                    |
+| `packages/ui/src/component-descriptions/table.md` | New — design changelog                       |
+
+---
+
+## 2026-03-20 — Separator, Skeleton, Button `xs` size
+
+### New Components
+
+#### Separator
+
+- **Install:** `npx shadcn@latest add separator` (Radix `SeparatorPrimitive.Root`)
+- **Token:** `bg-border` — 1px line, orientation driven by `data-[orientation=horizontal|vertical]`
+- **WealthX overrides:** none required — separator is a pure line with no border-radius
+- **Figma:** page "Seperator" — component set `Separator` with 2 variants:
+  - `Orientation=horizontal` — 344×1px, fill bound to `border` variable
+  - `Orientation=vertical` — 1×80px, fill bound to `border` variable
+- **Storybook:** `shadcn-separator.stories.tsx` — 4 stories:
+  - `Playground` — interactive orientation + decorative controls
+  - `All Variants (Figma match)` — horizontal + vertical
+  - `Usage / Between Sections` — real-world horizontal + inline vertical separators
+  - `Usage / Semantic (non-decorative)` — `decorative={false}` for screen readers
+
+> **Note:** vertical separator requires a parent with a fixed height so that `h-full` computes correctly. Stories use `<div className="flex h-16 items-center">` as wrapper.
+
+---
+
+#### Skeleton
+
+- **Install:** `npx shadcn@latest add skeleton`
+- **Base class (shadcn):** `animate-pulse rounded-md bg-accent`
+- **WealthX override:** `rounded-md` removed — WealthX enforces square corners (`border-radius: 0`)
+- **Circle variant** retains `rounded-full` via `className` prop — represents avatar/image placeholders
+- **Bug fix:** shadcn output used `React.ComponentProps<"div">` without importing `React`.
+  Fixed to follow project convention:
+  ```tsx
+  import { type ComponentProps } from "react"
+  function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  ```
+- **Figma:** page "Skeleton" — component set `Skeleton` with 3 variants, all fills bound to `accent` variable:
+  - `Variant=line` — 250×16px, `cornerRadius: 0`
+  - `Variant=circle` — 48×48px, `cornerRadius: 24` (fully circular)
+  - `Variant=block` — 250×120px, `cornerRadius: 0`
+- **Storybook:** `shadcn-skeleton.stories.tsx` — 4 stories:
+  - `Playground` — single skeleton block
+  - `All Variants (Figma match)` — line, circle, block
+  - `Usage / Card` — card image + avatar + two text lines
+  - `Usage / List` — 3 repeated list item skeletons
+
+---
+
+### Existing Component Updates
+
+#### Button — `xs` size added
+
+- **File:** `packages/shadcn/src/components/ui/button.tsx`
+- **Change:** new `xs` entry in the `size` CVA map:
+  ```ts
+  xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5",
+  ```
+  Matches Figma "Size=xs" variant (height 24px, text-xs)
+- **Storybook:** `shadcn-button.stories.tsx` — added `"xs"` to size control options and `<Button size="xs">` to the Sizes render
+
+---
+
+### Package Configuration
+
+| File                             | Change                                                |
+| -------------------------------- | ----------------------------------------------------- |
+| `packages/shadcn/tsup.config.ts` | Added `separator.tsx` and `skeleton.tsx` entry points |
+| `packages/shadcn/package.json`   | Added `./separator` and `./skeleton` export entries   |
+
+---
+
+### Tailwind CSS Safelist
+
+`packages/shadcn/src/styles/globals.css` — extended `@source inline()` to force-generate classes that the glob scanner misses when new story files are added during a running dev server:
+
+```css
+@source inline("h-10 h-12 h-16 h-20 h-24 h-28 h-32 h-36 h-40 h-44 h-48 size-10 size-12 size-14 size-16 rounded-full w-4/5 shrink-0");
+```
+
+---
+
+## Files Changed
+
+| File                                              | Change                                                            |
+| ------------------------------------------------- | ----------------------------------------------------------------- |
+| `packages/shadcn/src/components/ui/separator.tsx` | ← New — shadcn Separator, no WealthX overrides                    |
+| `packages/shadcn/src/components/ui/skeleton.tsx`  | ← New — shadcn Skeleton, `rounded-md` removed, React import fixed |
+| `packages/shadcn/src/components/ui/button.tsx`    | Added `xs` size variant                                           |
+| `apps/docs/stories/shadcn-separator.stories.tsx`  | ← New — 4 stories                                                 |
+| `apps/docs/stories/shadcn-skeleton.stories.tsx`   | ← New — 4 stories                                                 |
+| `apps/docs/stories/shadcn-button.stories.tsx`     | Added `xs` to size controls + Sizes story                         |
+| `packages/shadcn/src/styles/globals.css`          | Extended `@source inline()` safelist                              |
+| `packages/shadcn/tsup.config.ts`                  | Added separator + skeleton entry points                           |
+| `packages/shadcn/package.json`                    | Added `./separator` + `./skeleton` exports                        |
+
+---
+
+## 2026-03-22 — Field Compound Component + TypeScript Zero-Error Audit
+
+### New Components
+
+#### Field (compound component system)
+
+- **Install:** `npx shadcn@latest add field`
+- **Figma:** [Design System - shadcn, node 1188-4205](https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=1188-4205)
+- **Exports:** `Field`, `FieldLabel`, `FieldTitle`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldSet`, `FieldLegend`, `FieldSeparator`
+- **WealthX overrides:**
+  - `FieldDescription` / `FieldError`: `text-xs` (12px) per Figma helper text spec — shadcn default is `text-sm`
+  - `FieldError.uniqueErrors`: `Array.from(new Map(...).values())` instead of spread `[...Map.values()]` — avoids `--downlevelIteration` requirement with `target: es5`
+  - Strict equality `=== 1` instead of `== 1` in `uniqueErrors.length` check
+- **Orientation variants (CVA):** `vertical` (default) · `horizontal` · `responsive` (stacks mobile, row ≥md)
+- **`FieldLabel` card-selection behavior:** `has-data-[state=checked]:bg-primary/5` is intentional (shadcn card-selection pattern). For plain inline checkboxes, use `<Label htmlFor>` directly instead of `<FieldLabel>` to avoid unwanted bg.
+
+- **Storybook:** `apps/docs/stories/shadcn-field.stories.tsx` — 9 stories:
+  | Story | What it shows |
+  |---|---|
+  | `Playground` | Single Field with label + input + description |
+  | `Orientations` | vertical / horizontal / responsive variants |
+  | `WithError` | Valid · single error · multiple errors via `errors[]` prop |
+  | `FieldGroup` | Vertical group · 2-column horizontal grid |
+  | `FieldSet & Legend` | `<fieldset>` container with legend + group |
+  | `FieldSeparator` | Plain separator · labeled separator ("or") |
+  | `WithControls` | Inline checkbox (Label) · Switch + FieldTitle in horizontal Field |
+  | `WithTextarea` | Textarea inside Field |
+  | `Form Example` | Full realistic form: personal info + preferences + submit |
+
+---
+
+### Figma Components Added
+
+New components built in Figma page 1188-4205, inside frame `1188:4206`:
+
+| Component         | Node      | Dimensions   | Notes                                                                                        |
+| ----------------- | --------- | ------------ | -------------------------------------------------------------------------------------------- |
+| `Field/Separator` | 3097:9667 | 496×16px     | Reuses local Separator instance; plain horizontal rule                                       |
+| `Field/Legend`    | 3097:9673 | 496×55px     | SemiBold title + Regular description; 2 text swap properties                                 |
+| `Field/Buttons`   | 3097:9726 | ComponentSet | Horizontal (Submit+Cancel) / Vertical (full-width Submit + Save draft + Sign in link)        |
+| `Field Group`     | 3097:9782 | ComponentSet | Horizontal (2-col, 608px) / Vertical (full-height, 496px) — uses Input instances (3042:6881) |
+
+---
+
+### TypeScript Fixes — `apps/docs` Zero-Error Audit
+
+Fixed 8 pre-existing TypeScript errors across existing story files. `tsc --noEmit` went from **55 errors → 0**.
+
+#### `apps/docs/tsconfig.json` — Module resolution paths added
+
+Root cause: stories import `@wealthx/shadcn/components/ui/field` but `package.json` exports map only short keys like `./field`. Vite resolves via regex alias at runtime; TypeScript had no matching `paths`.
+
+```json
+"paths": {
+  "@wealthx/shadcn/*": ["../../packages/shadcn/src/*"],
+  "@wealthx/ui/*":        ["../../packages/ui/src/*"],
+  "@/*":                  ["../../packages/shadcn/src/*"]
+}
+```
+
+#### Per-file fixes
+
+| File                             | Error                                                                                                                       | Fix                                                                         |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `autocomplete.stories.tsx`       | MUI Autocomplete `onChange` types `newValue` as `unknown`                                                                   | Cast: `newValue as string \| null`                                          |
+| `card.stories.tsx`               | MUI `CardMedia` polymorphic type — `height` + `alt` not on base props                                                       | Cast entire props as `any`                                                  |
+| `shadcn-calendar.stories.tsx`    | `{...args}` spread after `mode="single"` loses type narrowing for `selected`                                                | Destructure `{ captionLayout, showOutsideDays }` from args; pass explicitly |
+| `shadcn-radio-group.stories.tsx` | `as const` on array makes optional props non-optional in destructuring                                                      | Replace with `as Array<{ label: string; defaultChecked?: boolean; ... }>`   |
+| `shadcn-tabs.stories.tsx`        | `satisfies Meta<typeof Tabs>` rejects extra `argTypes` keys (`variant`, `showIconLeft`, `showIconRight`) not in `TabsProps` | Change to `= { ... } as Meta<typeof Tabs>`                                  |
+
+---
+
+## Files Changed
+
+| File                                               | Change                                                                       |
+| -------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `packages/shadcn/src/components/ui/field.tsx`      | ← New — shadcn Field compound component, WealthX overrides                   |
+| `apps/docs/stories/shadcn-field.stories.tsx`       | ← New — 9 stories                                                            |
+| `apps/docs/tsconfig.json`                          | Added `paths` to mirror Vite aliases (fixes all module-resolution TS errors) |
+| `apps/docs/stories/autocomplete.stories.tsx`       | Fix: cast `newValue as string \| null`                                       |
+| `apps/docs/stories/card.stories.tsx`               | Fix: cast CardMedia props as `any`                                           |
+| `apps/docs/stories/shadcn-calendar.stories.tsx`    | Fix: destructure specific args instead of spreading all                      |
+| `apps/docs/stories/shadcn-radio-group.stories.tsx` | Fix: explicit array type instead of `as const`                               |
+| `apps/docs/stories/shadcn-tabs.stories.tsx`        | Fix: `as Meta<typeof Tabs>` instead of `satisfies`                           |
+
+---
+
+## 2026-03-23 — Accordion, DropdownMenu — New Components + Story Refactors + Lint Fixes
+
+### New Components
+
+#### Accordion
+
+- **Install:** `npx shadcn@latest add accordion` (Radix `AccordionPrimitive`)
+- **Figma:** [Design System - shadcn, Accordion](https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn)
+- **Exports:** `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`
+- **WealthX overrides (documented in component header comment):**
+  - `AccordionItem`: removed `last:border-b-0` — consistent bottom border on every item including the last
+  - `AccordionTrigger`: `rounded-md` → `rounded-none` — WealthX sharp corners convention
+  - `AccordionTrigger`: `items-start` → `items-center` — single-line trigger vertical alignment
+  - `AccordionTrigger`: `transition-all` → `transition-[color,opacity]` — scoped animation (prevents layout thrashing from animating all properties)
+  - `AccordionTrigger`: focus ring changed from `ring-ring/50` to `ring-foreground/30` — neutral focus color, no brand primary green
+  - `AccordionContent`: inner div uses `pb-4 text-muted-foreground` — matches Figma muted content style
+- **CSS animations** added to `globals.css` inside `@theme inline`:
+  ```css
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  ```
+- **Tailwind safelist** extended with `@source inline()` for data-state animation classes and focus ring:
+  ```css
+  @source inline("data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down focus-visible:ring-foreground/30 [&[data-state=open]>svg]:rotate-180");
+  ```
+- **Storybook:** `apps/docs/stories/shadcn-accordion.stories.tsx` — 5 stories in `shadcn/Accordion` section:
+  | Story | What it shows |
+  |---|---|
+  | `Simple` | Single-type collapsible accordion, FAQ fixture |
+  | `MultipleOpen` | `type="multiple"` with two items open by default |
+  | `WithDisabledItem` | Mixed active + disabled items |
+  | `DefaultOpen` | `defaultValue` pre-opens one item on mount |
+  | `White-Label (Navy theme)` | Custom `--primary` CSS var override via `style` prop |
+- **Story architecture:** extracted `ItemDef` interface, `FAQ` / `PRODUCT` / `PORTFOLIO` / `WHITELABEL` fixture arrays, `Items` helper component — stories contain no inline data
+
+---
+
+#### DropdownMenu
+
+- **Install:** `npx shadcn@latest add dropdown-menu` (Radix `DropdownMenuPrimitive`)
+- **Figma:** [Design System - shadcn, node 73-229](https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-229)
+- **Exports:** `DropdownMenu`, `DropdownMenuPortal`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuGroup`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`
+- **WealthX overrides (documented in component header comment):**
+  - All `rounded-md` / `rounded-sm` → `rounded-none` — sharp corners on content, items, sub-trigger, checkbox/radio items, sub-content
+  - `DropdownMenuCheckboxItem` / `DropdownMenuRadioItem`: added `data-[state=checked]:bg-primary/10` — subtle checked state tint
+- **Tailwind safelist** extended for destructive variant dynamic classes:
+  ```css
+  @source inline("data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20");
+  ```
+- **Storybook:** `apps/docs/stories/shadcn-dropdown-menu.stories.tsx` — 5 stories in `shadcn/DropdownMenu` section:
+  | Story | What it shows |
+  |---|---|
+  | `Simple` | Basic items with icons and separators |
+  | `WithShortcuts` | Items with keyboard shortcut labels |
+  | `WithSubMenu` | Nested sub-menu trigger + content |
+  | `WithCheckboxItems` | Checkbox group with checked state |
+  | `WithRadioItems` | Radio group with exclusive selection |
+
+---
+
+### globals.css Updates
+
+`packages/shadcn/src/styles/globals.css`:
+
+| Change                                                          | Purpose                                                                      |
+| --------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| Added `@keyframes accordion-down/up` inside `@theme inline`     | Enable Radix accordion open/close height animation                           |
+| Added `--animate-accordion-down/up` CSS variables               | Tailwind `animate-accordion-*` utility hooks                                 |
+| Added destructive variant `@source inline()` safelist           | Force-generate DropdownMenu destructive state classes missed by glob scanner |
+| Added accordion state `@source inline()` safelist               | Force-generate accordion animation + focus-ring classes                      |
+| Added `@layer base { * { border-color: var(--color-border) } }` | Default border color uses `border` DS token instead of browser default       |
+
+---
+
+### Dependency Fix — `apps/docs`
+
+`apps/docs/package.json` was missing two direct dependencies used in shadcn stories, causing `import/no-extraneous-dependencies` ESLint warnings:
+
+| Package           | Change                        |
+| ----------------- | ----------------------------- |
+| `@wealthx/shadcn` | Added `"*"` to `dependencies` |
+| `lucide-react`    | Added `"*"` to `dependencies` |
+
+After fix: `eslint ./stories/shadcn-accordion.stories.tsx --max-warnings 0` → 0 warnings.
+
+---
+
+### Component Descriptions Added
+
+| File                                                      | Content                                                             |
+| --------------------------------------------------------- | ------------------------------------------------------------------- |
+| `packages/ui/src/component-descriptions/accordion.md`     | Figma component set structure, token bindings, WealthX DS decisions |
+| `packages/ui/src/component-descriptions/dropdown-menu.md` | Figma component set structure, token bindings, variant map          |
+
+---
+
+## Files Changed
+
+| File                                                      | Change                                                                  |
+| --------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `packages/shadcn/src/components/ui/accordion.tsx`         | ← New — shadcn Accordion, 6 WealthX overrides                           |
+| `packages/shadcn/src/components/ui/dropdown-menu.tsx`     | ← New — shadcn DropdownMenu, `rounded-none` on all sub-components       |
+| `apps/docs/stories/shadcn-accordion.stories.tsx`          | ← New — 5 stories, extracted fixtures + `Items` helper                  |
+| `apps/docs/stories/shadcn-dropdown-menu.stories.tsx`      | ← New — 5 stories covering all major variants                           |
+| `packages/shadcn/src/styles/globals.css`                  | Accordion keyframes + CSS vars, destructive safelist, border base layer |
+| `apps/docs/package.json`                                  | Added `@wealthx/shadcn` + `lucide-react` to dependencies                |
+| `packages/ui/src/component-descriptions/accordion.md`     | ← New — Accordion design changelog                                      |
+| `packages/ui/src/component-descriptions/dropdown-menu.md` | ← New — DropdownMenu design changelog                                   |

package/README.md

@@ -0,0 +1,128 @@
+# @wealthx/shadcn
+
+WealthX component library built on [shadcn/ui](https://ui.shadcn.com), Tailwind CSS v4, and Radix primitives.
+
+## Install
+
+```bash
+yarn add @wealthx/shadcn
+```
+
+**Peer dependencies:** `react` and `react-dom` (^18.3.1)
+
+## Setup
+
+Import the global stylesheet in your app entry point:
+
+```tsx
+import "@wealthx/shadcn/styles.css";
+```
+
+Wrap your app with the `ThemeProvider` for runtime theming:
+
+```tsx
+import { ThemeProvider } from "@wealthx/shadcn/theme";
+
+<ThemeProvider primaryColor="#33FF99" secondaryColor="#162029">
+  <App />
+</ThemeProvider>
+```
+
+## Usage
+
+Import components from the package root or individual entry points:
+
+```tsx
+// Barrel import
+import { Button, Card, Input } from "@wealthx/shadcn";
+
+// Individual entry points (better tree-shaking)
+import { Button } from "@wealthx/shadcn/button";
+import { Card } from "@wealthx/shadcn/card";
+```
+
+## Components
+
+| Component | Import path | Description |
+|-----------|------------|-------------|
+| Accordion | `./accordion` | Collapsible content sections |
+| Alert | `./alert` | Status messages |
+| AlertDialog | `./alert-dialog` | Confirmation modals |
+| Avatar | `./avatar` | User images with fallback, group, and badge |
+| Badge | `./badge` | Labels and tags |
+| Button | `./button` | Primary action element |
+| Calendar | `./calendar` | Date picker calendar |
+| Card | `./card` | Container with header, content, and footer |
+| Checkbox | `./checkbox` | Single or multiple selection |
+| Chip | `./chip` | Small labeled element |
+| DataTable | `./data-table` | Table powered by TanStack Table |
+| DatePicker | `./date-picker` | Calendar with popover |
+| Dialog | `./dialog` | Modal dialog |
+| Drawer | `./drawer` | Slide-out side panel |
+| DropdownMenu | `./dropdown-menu` | Contextual menu |
+| Empty | `./empty` | Empty state placeholder |
+| Field | `./field` | Form field wrapper with label and error |
+| Input | `./input` | Text input |
+| InputGroup | `./input-group` | Input with addons and buttons |
+| InputOTP | `./input-otp` | Multi-slot OTP entry |
+| Label | `./label` | Form label |
+| Pagination | `./pagination` | Page navigation |
+| Popover | `./popover` | Floating content |
+| Progress | `./progress` | Progress bar |
+| RadioGroup | `./radio-group` | Single selection group |
+| Select | `./select` | Dropdown select |
+| Separator | `./separator` | Visual divider |
+| Sheet | `./sheet` | Off-canvas panel |
+| Skeleton | `./skeleton` | Loading placeholder |
+| Sonner | `./sonner` | Toast notifications |
+| Spinner | `./spinner` | Loading indicator |
+| Switch | `./switch` | Toggle switch |
+| Table | `./table` | Basic HTML table |
+| Tabs | `./tabs` | Tabbed interface |
+| Textarea | `./textarea` | Multi-line text input |
+| Toggle | `./toggle` | Button toggle |
+| ToggleGroup | `./toggle-group` | Grouped toggles |
+| Tooltip | `./tooltip` | Hover hint |
+
+## Utilities
+
+| Export | Import path | Description |
+|--------|------------|-------------|
+| `cn()` | `@wealthx/shadcn/lib/utils` | Merge class names (clsx + tailwind-merge) |
+| Color utils | `@wealthx/shadcn/lib/colors` | `hexToRgb`, `hexToOklch`, `getContrastText`, `getLuminance` |
+| Typography | `@wealthx/shadcn/typography` | Rem-based type scale with CSS variable generators |
+| ThemeProvider | `@wealthx/shadcn/theme` | Runtime theme provider for tenant colors |
+
+## Design tokens
+
+All tokens are defined as CSS custom properties in `src/styles/globals.css`:
+
+- **Colors** — OKLch format. Core tokens: `--background`, `--foreground`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`. Status tokens: `--warning`, `--success`, `--info`. Chart series: `--chart-1` through `--chart-5`.
+- **Typography** — Figtree font family. 13 styles from Display down to Code, each with `--font-size-*`, `--line-height-*`, `--letter-spacing-*`, and `--font-weight-*` variables.
+- **Border radius** — All radii set to `0px` (sharp corners by design).
+
+## Development
+
+```bash
+# Install dependencies
+yarn
+
+# Build the package (CSS + JS)
+yarn workspace @wealthx/shadcn build
+
+# Watch mode
+yarn workspace @wealthx/shadcn dev
+
+# Lint
+yarn workspace @wealthx/shadcn lint
+```
+
+## Tech stack
+
+- [shadcn/ui](https://ui.shadcn.com) — Component primitives
+- [Tailwind CSS v4](https://tailwindcss.com) — Utility-first styles
+- [Radix Primitives](https://www.radix-ui.com) via `@base-ui/react` — Accessible headless components
+- [TanStack Table](https://tanstack.com/table) — DataTable
+- [Lucide](https://lucide.dev) — Icons
+- [tsup](https://tsup.egoist.dev) — Build tooling (CJS + ESM)
+- [class-variance-authority](https://cva.style) — Variant management