admin-ui-starter-kit 0.1.3 → 0.4.2

package/CHANGELOG.md

@@ -6,6 +6,31 @@ this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.1.3] — 2026-05-22
+
+### Added
+
+- **Consumer migration playbook** in `MIGRATION.md` for replacing copied local
+  UI trees with direct package imports, including migration order, Inertia
+  wiring, adapter rules, deletion rules, and verification commands.
+- **Component selection guide** in `COMPONENT_SELECTION.md` mapping common admin
+  UI needs to exact package entrypoints.
+- **`admin-ui-consumer-migration` skill** for downstream app migrations. The
+  skill tells agents how to replace copied local UI, avoid local re-export
+  mirrors, keep framework wiring app-owned, and choose exact package imports.
+- **`admin-ui-starter-kit-audit` CLI** to detect stale local copied imports,
+  invalid package subpaths, and local files that only re-export package
+  components. The CLI supports `--fix` for conservative rewrites from known
+  copied paths.
+
+### Changed
+
+- Updated the consumer skill installer and maintainer `publish:skill` workflow
+  to handle multiple shipped skills.
+- Documented the migration flow, audit command, shipped skill files, and exact
+  import rules across `README.md`, `INTEGRATION.md`, `PUBLISHING.md`, and
+  `AGENTS.md`.
+
 ## [0.1.0] — 2026-05-02
 
 Initial public release.
@@ -73,5 +98,6 @@ Initial public release.
 - **What this is not:** a marketing-site UI kit. Built for admin panels
   and SaaS dashboards.
 
-[Unreleased]: https://github.com/nicolasvlachos/admin-ui-starter-kit/compare/v0.1.0...HEAD
+[Unreleased]: https://github.com/nicolasvlachos/admin-ui-starter-kit/compare/v0.1.3...HEAD
+[0.1.3]: https://github.com/nicolasvlachos/admin-ui-starter-kit/compare/v0.1.0...v0.1.3
 [0.1.0]: https://github.com/nicolasvlachos/admin-ui-starter-kit/releases/tag/v0.1.0

package/COMPONENT_SELECTION.md

@@ -13,26 +13,32 @@ or documented here, treat it as private.
 | Button or icon button | `Button`, `TextButton`, button variants | `admin-ui-starter-kit/base/buttons` |
 | Status pill or count badge | `Badge` | `admin-ui-starter-kit/base/badge` |
 | Card shell | `SmartCard` | `admin-ui-starter-kit/base/cards` |
+| Section frame or grouped panels | `Frame` family | `admin-ui-starter-kit/base/frame` |
 | Row with icon/avatar/title/meta/actions | `Item` family | `admin-ui-starter-kit/base/item` |
 | Label/value metadata | `MetadataList` | `admin-ui-starter-kit/base/display/metadata` |
-| Tooltip, avatar, separator, inline stat | display family | `admin-ui-starter-kit/base/display` |
+| Alert, tooltip, avatar, separator, inline stat | display family | `admin-ui-starter-kit/base/display` |
+| Recharts primitives with themed tooltip/legend | chart display family | `admin-ui-starter-kit/base/display/chart` |
 | Form label/control/error row | `FormField`, `ControlledFormField` | `admin-ui-starter-kit/base/forms` |
-| Inputs, selects, textareas, QR fields | form field exports | `admin-ui-starter-kit/base/forms` |
-| Searchable select | `Combobox` | `admin-ui-starter-kit/base/combobox` |
+| Inputs, password reveal, selects, textareas, QR fields | form field exports | `admin-ui-starter-kit/base/forms` |
+| Backend/schema-driven settings forms | `SchemaForm`, `useSchemaForm` | `admin-ui-starter-kit/features/schema-form` |
+| Searchable select | `EnhancedCombobox`, `EnhancedComboboxMultiple` | `admin-ui-starter-kit/base/combobox` |
 | Popover menu or command menu | `PopoverMenu`, `Command` | `admin-ui-starter-kit/base/popover-menu`, `admin-ui-starter-kit/base/command` |
+| Embla-backed carousel controls | `Carousel` family | `admin-ui-starter-kit/base/carousel` |
 | Dropdown navigation menus | navigation family | `admin-ui-starter-kit/base/navigation` |
 | Data table | `DataTable` | `admin-ui-starter-kit/base/table` |
 | Date picker or date range picker | date picker family | `admin-ui-starter-kit/base/date-pickers` |
 | Map or place autocomplete | map family | `admin-ui-starter-kit/base/map` |
-| KPI cards and charts | analytics surfaces | `admin-ui-starter-kit/composed/analytics` |
+| KPI cards and chart cards | analytics surfaces | `admin-ui-starter-kit/composed/analytics` |
 | Commerce/order/product surfaces | commerce surfaces | `admin-ui-starter-kit/composed/commerce` |
 | Timeline | timeline surfaces | `admin-ui-starter-kit/composed/timelines` |
 | Comments panel | `Comments` | `admin-ui-starter-kit/features/comments` |
 | Filter bar/facets | filters feature | `admin-ui-starter-kit/features/filters` |
 | Dialog, drawer, alert dialog | overlays feature | `admin-ui-starter-kit/features/overlays` |
 | Global search shell | global search feature | `admin-ui-starter-kit/features/global-search` |
+| Media picker, asset library, product gallery field | `MediaLibrary`, `MediaLibraryDialog`, `useMediaLibrary` | `admin-ui-starter-kit/features/media-library` |
 | Mentions/typeahead | mentions or suggestions feature | `admin-ui-starter-kit/features/mentions`, `admin-ui-starter-kit/features/suggestions` |
 | Rich text editor | TipTap-backed editor | `admin-ui-starter-kit/features/rich-text-editor` |
+| Auth card or split-page chrome | `AuthShell`, `AuthCard`, `AuthSplitPanel`, social/policy/language slots | `admin-ui-starter-kit/layout/auth` |
 | Page title/actions/breadcrumb chrome | page layout | `admin-ui-starter-kit/layout/page` |
 | Header shell/search/action slots | header layout | `admin-ui-starter-kit/layout/header` |
 | Sidebar shell | sidebar layout | `admin-ui-starter-kit/layout/sidebar` |
@@ -55,13 +61,52 @@ or documented here, treat it as private.
    rich text editor live there.
 
 5. Is it page chrome?
-   Use `layout`. Keep routing and active-link state in the app.
+   Use `layout`. Keep routing, active-link state, auth requests, and app
+   translations in the app.
 
 6. Does it hardcode backend, auth, routing, app translations, or product
    branding?
    Keep it in the app. Wrap package components only where the wrapper binds
    app-specific behaviour.
 
+## High-frequency primitives
+
+Promote `Item` first for row-shaped UI. If a row has its own identity, media,
+title/description stack, click target, trailing badge, action button, switch, or
+chevron, use `admin-ui-starter-kit/base/item`.
+
+Use `MetadataList` for label/value facts that describe one entity. Metadata rows
+are read-heavy summaries: invoice totals, account attributes, SKU details,
+audit facts, or receipt lines. If the row is acted on independently, it is no
+longer metadata.
+
+Use `FormField` or `ControlledFormField` for every editable label + control +
+hint/error row. `ControlledFormField` owns the error text for
+`react-hook-form`; pass its `invalid` render-prop value down to the inner field
+or combobox.
+
+Use `PasswordInput` for password fields that need a show/hide icon. Do not
+rebuild the reveal button around `Input type="password"`.
+
+Use `SchemaForm` when the consuming app already has backend-provided field
+definitions, tenant settings, integration configuration, or another admin
+schema that should render as one cohesive form or as section cards. Keep
+validation libraries, server errors, route changes, translations, async option
+fetching, and submission in the app through `validate`, `errors`, `onSubmit`,
+`onError`, `strings`, `renderField`, and `renderSection`.
+
+Use `MediaLibrary` for app-level media picking flows: product galleries, CMS
+assets, campaign files, and upload staging. Use `MediaLibraryDialog` only when
+the picker needs modal behavior; it reuses `features/overlays/Dialog` for
+backdrop, escape handling, trigger support, and overlay chrome. Wire fetching,
+uploading, metadata updates, routing, and storage through props such as
+`fetcher`, `onUpload`, `onItemUpdate`, `onItemDelete`, `value`, and
+`onValueChange`.
+
+Typography is not optional glue. Use `Text`, `Heading`, `Label`, and `TextLink`
+from `admin-ui-starter-kit/typography` instead of raw font-size, weight, or
+muted-color utility classes.
+
 ## Adapter examples
 
 Use an app adapter when you bind framework behaviour:
@@ -92,6 +137,7 @@ Use:
 ```tsx
 import { Button } from 'admin-ui-starter-kit/base/buttons';
 import { Text } from 'admin-ui-starter-kit/typography';
+import { ChartContainer } from 'admin-ui-starter-kit/base/display/chart';
 import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
 ```
 

package/INTEGRATION.md

@@ -20,6 +20,13 @@ Install optional peers only for the entrypoints you import. For example,
 `admin-ui-starter-kit/features/rich-text-editor` needs TipTap,
 `admin-ui-starter-kit/base/table` needs TanStack Table, and
 `admin-ui-starter-kit/base/map` needs the Leaflet peer set.
+`admin-ui-starter-kit/base/carousel` needs `embla-carousel-react`.
+`admin-ui-starter-kit/base/display/chart` and chart-backed analytics surfaces
+need `recharts`.
+`admin-ui-starter-kit/base/date-pickers` needs `react-day-picker@^10`;
+pass-through `calendarProps` follow DayPicker v10, so deprecated v9 props
+such as `fromYear` / `toYear` must be replaced with `startMonth` / `endMonth`.
+The kit-level `yearSelection.fromYear` / `toYear` props remain supported.
 
 ## 2. Import exact entrypoints
 
@@ -29,9 +36,18 @@ Import the family you use. This is the core package contract.
 import { UIProvider } from 'admin-ui-starter-kit/ui-provider';
 import { Text } from 'admin-ui-starter-kit/typography';
 import { Button } from 'admin-ui-starter-kit/base/buttons';
+import { Carousel } from 'admin-ui-starter-kit/base/carousel';
+import { EnhancedCombobox } from 'admin-ui-starter-kit/base/combobox';
+import { ControlledFormField, Input, PasswordInput } from 'admin-ui-starter-kit/base/forms';
+import { Frame } from 'admin-ui-starter-kit/base/frame';
 import { Item, ItemContent, ItemMedia, ItemTitle } from 'admin-ui-starter-kit/base/item';
+import { ChartContainer } from 'admin-ui-starter-kit/base/display/chart';
 import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
+import { ChartCard } from 'admin-ui-starter-kit/composed/analytics';
 import { Comments } from 'admin-ui-starter-kit/features/comments';
+import { MediaLibraryDialog } from 'admin-ui-starter-kit/features/media-library';
+import { SchemaForm } from 'admin-ui-starter-kit/features/schema-form';
+import { AuthShell } from 'admin-ui-starter-kit/layout/auth';
 import { PageHeader } from 'admin-ui-starter-kit/layout/page';
 ```
 
@@ -42,8 +58,9 @@ they would force optional peers into apps that do not use them.
 
 Only documented nested subfamily entrypoints are public. For example,
 `MetadataList` is intentionally exported from
-`admin-ui-starter-kit/base/display/metadata` so consumers do not need the
-broader `base/display` barrel or its optional peers.
+`admin-ui-starter-kit/base/display/metadata`, and chart primitives are exported
+from `admin-ui-starter-kit/base/display/chart`, so consumers can avoid optional
+peers they do not use.
 
 The package publishes exact export keys, not wildcard package exports. If an
 import path is not documented or listed in `package.json` `exports`, treat it as
@@ -55,6 +72,39 @@ The root entrypoint is intentionally small:
 import { UIProvider, useStrings, cn } from 'admin-ui-starter-kit';
 ```
 
+Common primitive choices:
+
+- Use `Item` for rows with their own identity, media, title stack, click target,
+  or trailing actions.
+- Use `MetadataList` for label/value facts that describe one entity.
+- Use `FormField` / `ControlledFormField` for every editable label + control +
+  hint/error row.
+- Use `PasswordInput` instead of plain `Input type="password"` when the field
+  needs a show/hide icon with accessible labels.
+- Use `EnhancedCombobox` / `EnhancedComboboxMultiple` for searchable selects;
+  wrap them in `ControlledFormField` inside forms and pass `invalid={invalid}`
+  from the render-prop.
+- Use `SchemaForm` from `admin-ui-starter-kit/features/schema-form` when the
+  app already has backend-provided field definitions, tenant settings, or
+  integration configuration that should render as a cohesive form or section
+  cards. Keep validation libraries, server errors, submit handlers, route
+  changes, translations, async option fetching, and app-specific controls in
+  the consuming app via `validate`, `errors`, `onSubmit`, `onError`, `strings`,
+  `renderField`, and `renderSection`.
+- Use `AuthShell` from `admin-ui-starter-kit/layout/auth` for login, register,
+  invite, reset, magic-link, verification, and two-factor page chrome. It covers
+  logo/brand, social providers, policy links, language links or switchers, and
+  full-bleed top media strips; keep the form action, auth routes, translations,
+  locale state, and router links in the app.
+- Use `MediaLibrary` / `MediaLibraryDialog` from
+  `admin-ui-starter-kit/features/media-library` for media picking, product
+  gallery fields, asset search, upload staging, and metadata editing. Keep
+  storage, fetching, URL resolution, and framework routing in the app through
+  `fetcher`, `accessors`, `onUpload`, `onItemUpdate`, `onItemDelete`, `value`,
+  and `onValueChange`.
+- Use `Text`, `Heading`, `Label`, and `TextLink` instead of local typography
+  utility spans.
+
 ## 3. Mount styles and provider
 
 ```tsx

package/MIGRATION.md

@@ -59,7 +59,9 @@ import { Item, ItemContent, ItemMedia, ItemTitle } from 'admin-ui-starter-kit/ba
 ```
 
 Use `MetadataList` for label/value data, compact summaries, and entity details.
-Use `Item` for rows with media, title, description, metadata, or actions.
+Use `Item` for rows with their own identity, media, title, description,
+click target, or actions. If each row can be acted on independently, prefer
+`Item`; if the rows are facts about one entity, prefer `MetadataList`.
 
 ## 4. Replace form rows
 
@@ -67,11 +69,22 @@ Use the package form shell before moving larger forms:
 
 ```tsx
 import { ControlledFormField, Input, Select } from 'admin-ui-starter-kit/base/forms';
+import { EnhancedCombobox } from 'admin-ui-starter-kit/base/combobox';
+import { SchemaForm } from 'admin-ui-starter-kit/features/schema-form';
 ```
 
 Keep form submission, validation schemas, and API mutation wiring in the app.
 The package should own the field row and control presentation, not the backend
-contract.
+contract. `ControlledFormField` renders the merged backend / validation error;
+pass its render-prop `invalid` value to the inner field or combobox instead of
+duplicating error text inside the control.
+
+Use `SchemaForm` when local code is rendering backend-provided settings,
+tenant configuration, integration setup, or other schema-driven admin forms.
+Map app records into `SchemaFormSchema`, then keep route changes, submit
+handlers, server errors, validation libraries, translations, and app-specific
+controls wired through props such as `value`, `errors`, `validate`, `onSubmit`,
+`onError`, `strings`, `renderField`, and `renderSection`.
 
 ## 5. Replace tables, filters, metrics, and overlays
 
@@ -86,7 +99,12 @@ import { Dialog, Drawer } from 'admin-ui-starter-kit/features/overlays';
 
 Install optional peers only for the entrypoints you import. For example,
 `base/table` needs `@tanstack/react-table`, `composed/analytics` needs
-`recharts`, and `features/rich-text-editor` needs TipTap.
+`recharts`, `base/display/chart` needs `recharts`, `base/carousel` needs
+`embla-carousel-react`, `features/rich-text-editor` needs TipTap, and
+`base/date-pickers` needs `react-day-picker@^10`. When migrating local date
+picker wrappers, update pass-through DayPicker props to v10 names
+(`startMonth` / `endMonth`) instead of deprecated v9 names
+(`fromYear` / `toYear`).
 
 ## 6. Replace layouts last
 

package/PUBLISHING.md

@@ -15,6 +15,7 @@ npm run verify                   # arch + exports + types + lint + tests
 npm run build:lib                # produces dist/
 npm run test:dist-assets         # confirms style.css font/map assets exist
 npm run build:showcase           # produces dist/showcase for the shipped docs app
+npm run verify:release           # maintainer-grade release gate: verify + package/browser/a11y/visual checks
 ```
 
 Every command must succeed locally before publish — if you ship a broken
@@ -48,7 +49,9 @@ top.
 npm publish --dry-run
 ```
 
-Read the file list. **Confirm:**
+`npm run test:package-smoke` automates this tarball check and builds a
+temporary Vite consumer against the exact public package subpaths. If you run
+`npm publish --dry-run` manually, read the file list. **Confirm:**
 - `dist/` is included with both `.js` and `.cjs` for every entrypoint.
 - `dist/style.css` is included.
 - `dist/files/` and `dist/images/` are included for font and map CSS assets.

package/README.md

@@ -128,16 +128,22 @@ plan that icon-package upgrade as part of adoption.
 | `features/rich-text-editor` | `@tiptap/pm @tiptap/react @tiptap/starter-kit` |
 | `base/map` | `leaflet leaflet-draw leaflet.fullscreen leaflet.markercluster react-leaflet react-leaflet-markercluster` |
 | `base/table` | `@tanstack/react-table` |
+| `base/carousel` | `embla-carousel-react` |
+| `base/display/chart` | `recharts` |
 | `composed/analytics` (charts) | `recharts` |
 | `composed/cards` with sortable lists | `@dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities` |
-| `base/date-pickers` | `react-day-picker` |
+| `base/date-pickers` | `react-day-picker@^10` |
 | `base/forms/fields/qr-code` | `qrcode` |
 | `base/forms` (the `ControlledFormField`) | `react-hook-form` |
 | `base/toaster` | `sonner` |
 | `base/command` | `cmdk` |
 | `base/currency` (color tools) | `culori` |
 
-Skip the ones you don't import — npm will warn but not fail.
+Skip the ones you don't import — npm will warn but not fail. Date picker
+`calendarProps` are forwarded to DayPicker v10, so use v10 prop names
+(`startMonth` / `endMonth`) rather than deprecated v9 names. The kit-level
+`yearSelection.fromYear` / `toYear` option remains supported and is mapped
+internally.
 
 ### 4. Mount the stylesheet
 
@@ -212,6 +218,36 @@ npx admin-ui-starter-kit-showcase
 
 Opens `http://127.0.0.1:7654` with sidebar navigation across UI / Base / Composed / Features / Layout, search, and per-component examples + APIs.
 
+Auth layouts live under the exact layout subpath:
+
+```tsx
+import { AuthShell } from 'admin-ui-starter-kit/layout/auth';
+```
+
+Use them for login, register, invite, reset, magic-link, verification, and
+two-factor page chrome. The shell covers logo/brand, social provider buttons,
+policy links, language links or switchers, and full-bleed top media strips.
+Forms, submit handlers, translations, locale state, and framework links stay in
+the consuming app.
+
+Media picking and product gallery flows live under the exact feature subpath:
+
+```tsx
+import { MediaLibrary, MediaLibraryDialog } from 'admin-ui-starter-kit/features/media-library';
+import { SchemaForm } from 'admin-ui-starter-kit/features/schema-form';
+```
+
+Use `MediaLibrary` for embedded asset management and `MediaLibraryDialog` when
+the picker should open in the shared overlay `Dialog`. Fetching, uploads,
+metadata edits, storage URLs, and framework routing stay in the consuming app
+through direct props.
+
+Use `SchemaForm` for backend-provided settings, tenant configuration,
+integration setup, or other admin schemas that should render as one cohesive
+form or as section cards. Keep validation libraries, server errors, route
+changes, translations, async option fetching, and app-specific controls in the
+consuming app through direct props.
+
 Flags:
 - `--port <n>` — pick a port (default 7654)
 - `--host <h>` — bind to a different host (default 127.0.0.1)
@@ -254,9 +290,10 @@ const currency = props.currency ?? defaultCurrency;
 <ContactCard strings={{ contact: t('actions.contact') }} />
 ```
 
-**`<Item>` and `<FormField>` — canonical row primitives.** Any "media + title
-+ description + actions" row goes through `Item`; any "label + control +
-error" row goes through `FormField`/`ControlledFormField`.
+**`<Item>`, `<MetadataList>`, and `<FormField>` — canonical row decisions.**
+Any "media + title + description + actions" row goes through `Item`.
+Any label/value fact summary goes through `MetadataList`. Any editable
+"label + control + error" row goes through `FormField`/`ControlledFormField`.
 
 ```tsx
 <Item>
@@ -286,20 +323,30 @@ Import per component family. This keeps optional peers isolated: importing
 ```tsx
 import { Text } from 'admin-ui-starter-kit/typography';
 import { Button } from 'admin-ui-starter-kit/base/buttons';
+import { Frame, FramePanel } from 'admin-ui-starter-kit/base/frame';
 import { Item, ItemGroup, ItemMedia, ItemContent, ItemTitle } from 'admin-ui-starter-kit/base/item';
+import { ControlledFormField, Input, PasswordInput } from 'admin-ui-starter-kit/base/forms';
+import { EnhancedCombobox } from 'admin-ui-starter-kit/base/combobox';
 import { Badge } from 'admin-ui-starter-kit/base/badge';
+import { Alert } from 'admin-ui-starter-kit/base/display';
+import { Carousel, CarouselContent, CarouselItem } from 'admin-ui-starter-kit/base/carousel';
+import { ChartContainer } from 'admin-ui-starter-kit/base/display/chart';
 import { ContactCard } from 'admin-ui-starter-kit/composed/cards';
+import { ChartCard } from 'admin-ui-starter-kit/composed/analytics';
 import { Comments } from 'admin-ui-starter-kit/features/comments';
 import { Dialog, Drawer } from 'admin-ui-starter-kit/features/overlays';
+import { SchemaForm } from 'admin-ui-starter-kit/features/schema-form';
 import { useStrings } from 'admin-ui-starter-kit/lib/strings';
 ```
 
 Use documented exact entrypoints only. `MetadataList` has its own public
-subfamily entrypoint because the broader `base/display` barrel includes display
-utilities with optional peers:
+subfamily entrypoint because it is often used on its own. Chart primitives also
+have an isolated entrypoint so consumers do not pull Recharts through unrelated
+display helpers:
 
 ```tsx
 import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
+import { ChartContainer } from 'admin-ui-starter-kit/base/display/chart';
 ```
 
 Safe public entrypoint shapes:
@@ -308,8 +355,9 @@ Safe public entrypoint shapes:
 - `admin-ui-starter-kit/typography`
 - `admin-ui-starter-kit/base/buttons`, `admin-ui-starter-kit/base/item`, etc.
 - `admin-ui-starter-kit/base/display/metadata`
+- `admin-ui-starter-kit/base/display/chart`
 - `admin-ui-starter-kit/composed/cards`, `admin-ui-starter-kit/composed/analytics`, etc.
-- `admin-ui-starter-kit/features/comments`, `admin-ui-starter-kit/features/filters`, etc.
+- `admin-ui-starter-kit/features/comments`, `admin-ui-starter-kit/features/filters`, `admin-ui-starter-kit/features/schema-form`, etc.
 - `admin-ui-starter-kit/layout` and exact layout families such as `admin-ui-starter-kit/layout/page`
 - `admin-ui-starter-kit/lib/strings`
 - `admin-ui-starter-kit/lib/utils`
@@ -394,8 +442,13 @@ npm run lint             # eslint
 npm run lint:architecture # check layer-import boundaries
 npm run test:exports     # check the exports map matches the file tree
 npm run test:dist-assets # check style.css referenced assets exist after build:lib
+npm run test:package-smoke # pack + temporary consumer build for exact subpaths
+npm run test:browser:features # Playwright feature route/workflow sweep
+npm run test:a11y:features # axe pass over feature showcase routes
+npm run test:visual:features # committed feature screenshot baselines
 npm run test             # vitest run
 npm run verify           # lint:architecture + test:exports + typecheck + lint + test
+npm run verify:release   # full maintainer release gate
 npm run publish:skill    # copy the rules skill into ~/.claude and ~/.agents
 ```
 
@@ -415,7 +468,7 @@ src/
 │   ├── strings.ts    useStrings + StringsProp + DeepPartial helpers
 │   └── utils.ts      cn() etc.
 ├── hooks/          cross-cutting hooks (useDebounce, useMobile, …)
-└── preview/        in-repo showcase app (excluded from publish)
+└── preview/        in-repo showcase app source (excluded from publish; dist/showcase ships prebuilt)
 ```
 
 ---

package/dist/_shared/accordion-BWU7zxlO.cjs

@@ -0,0 +1,2 @@
+const e=require("../lib/strings.cjs"),t=require("../lib/utils.cjs"),n=require("./heading-0DYCOrgC.cjs"),r=require("./icon-badge-BAWl1oOe.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@base-ui/react/accordion"),s=require("lucide-react");function c({className:e,...n}){return(0,a.jsx)(o.Accordion.Root,{"data-slot":`accordion`,className:t.cn(`flex w-full flex-col overflow-hidden rounded-2xl border`,e),...n})}function l({className:e,...n}){return(0,a.jsx)(o.Accordion.Item,{"data-slot":`accordion-item`,className:t.cn(`not-last:border-b data-open:bg-muted/50`,e),...n})}function u({className:e,children:n,...r}){return(0,a.jsx)(o.Accordion.Header,{className:`flex`,children:(0,a.jsxs)(o.Accordion.Trigger,{"data-slot":`accordion-trigger`,className:t.cn(`group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground`,e),...r,children:[n,(0,a.jsx)(s.ChevronDownIcon,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden`}),(0,a.jsx)(s.ChevronUpIcon,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline`})]})})}function d({className:e,children:n,...r}){return(0,a.jsx)(o.Accordion.Panel,{"data-slot":`accordion-content`,className:`overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up`,...r,children:(0,a.jsx)(`div`,{className:t.cn(`h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4`,e),children:n})})}var f={card:`space-y-2 border-0 rounded-none overflow-visible`,bordered:`rounded-lg border border-border bg-card overflow-hidden`,flat:`border-0 rounded-none bg-transparent overflow-visible`},p={card:`border border-border bg-card rounded-md data-open:bg-card`,bordered:`bg-transparent not-last:border-b border-border data-open:bg-muted/40`,flat:`border-0 bg-transparent data-open:bg-muted/30 rounded-md`},m=`gap-3 px-3 py-(--row-py) text-left hover:no-underline`,h={withMedallion:`pl-12 pr-3 pt-0`,withoutMedallion:`pl-3 pr-3 pt-0`},g={regionAriaLabel:void 0},_=(0,i.forwardRef)(function({items:r,multiple:i=!1,defaultValue:o,value:s,onValueChange:_,variant:y=`card`,iconStyle:b=`medallion`,className:x,itemClassName:S,triggerClassName:C,contentClassName:w,strings:T},E){let D=e.useStrings(g,T);return(0,a.jsx)(c,{ref:E,multiple:i,defaultValue:o,value:s,onValueChange:_?e=>_(e):void 0,"aria-label":D.regionAriaLabel,className:t.cn(`smart-accordion--component`,f[y],x),children:r.map(e=>(0,a.jsxs)(l,{value:e.value,className:t.cn(p[y],S),children:[(0,a.jsx)(u,{className:t.cn(m,C),disabled:e.disabled,children:(0,a.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-3`,children:[(0,a.jsx)(v,{iconStyle:b,icon:e.icon}),(0,a.jsx)(n.n,{tag:`span`,weight:`semibold`,children:e.title}),!!e.badge&&(0,a.jsx)(`span`,{className:`ml-1 inline-flex shrink-0`,children:e.badge})]})}),(0,a.jsx)(d,{className:t.cn(b===`medallion`?h.withMedallion:h.withoutMedallion,w),children:(0,a.jsx)(n.n,{type:`secondary`,className:`leading-relaxed`,children:e.content})})]},e.value))})});_.displayName=`SmartAccordion`;function v({iconStyle:e,icon:t}){return e===`none`||!t?null:e===`inline`?(0,a.jsx)(`span`,{className:`inline-flex shrink-0 text-muted-foreground`,children:t}):(0,a.jsx)(r.t,{size:`sm`,tone:`muted`,shape:`circle`,"aria-hidden":`true`,children:t})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return u}});
+//# sourceMappingURL=accordion-BWU7zxlO.cjs.map

package/dist/_shared/accordion-BWU7zxlO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-BWU7zxlO.cjs","names":[],"sources":["../../src/components/ui/accordion.tsx","../../src/components/base/accordion/accordion-variants.ts","../../src/components/base/accordion/accordion.strings.ts","../../src/components/base/accordion/smart-accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\n        \"flex w-full flex-col overflow-hidden rounded-2xl border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b data-open:bg-muted/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","/**\n * Shared accordion-shell variant classes — used by both `SmartAccordion`\n * and any composed surface that builds on `base/accordion` directly\n * (e.g. `composed/onboarding/checklist`).\n *\n * Exported because two consumers already keep it in lockstep; a third\n * one will copy this exact map. Centralising means a future tweak\n * (e.g. tighten `card` items to `border-border/70`) propagates.\n *\n * Padding tokens for trigger / content live alongside so the rhythm\n * is shared too:\n *\n * - Trigger: `gap-3 px-3 py-(--row-py)` — density-driven, `<UIProvider>`\n *   override flows through.\n * - Content with leading medallion: `pl-12 pr-3 pt-0` — left padding\n *   aligns body text under the title (medallion is `size-8` plus\n *   `gap-3`, so 32 + 12 = pl-12).\n * - Content without medallion: `pl-3 pr-3 pt-0`.\n */\nexport type AccordionShellVariant = 'card' | 'bordered' | 'flat';\n\nexport const ACCORDION_ROOT_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'space-y-2 border-0 rounded-none overflow-visible',\n\tbordered: 'rounded-lg border border-border bg-card overflow-hidden',\n\tflat: 'border-0 rounded-none bg-transparent overflow-visible',\n};\n\nexport const ACCORDION_ITEM_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'border border-border bg-card rounded-md data-open:bg-card',\n\tbordered: 'bg-transparent not-last:border-b border-border data-open:bg-muted/40',\n\tflat: 'border-0 bg-transparent data-open:bg-muted/30 rounded-md',\n};\n\nexport const ACCORDION_TRIGGER_BASE =\n\t'gap-3 px-3 py-(--row-py) text-left hover:no-underline';\n\n/**\n * Content-padding presets keyed off the leading-icon width. Use\n * `withMedallion` when the trigger renders an `IconBadge size=\"sm\"`\n * (size-8 = 32px) plus `gap-3` (12px) so body text aligns under the\n * title.\n */\nexport const ACCORDION_CONTENT_PADDING = {\n\twithMedallion: 'pl-12 pr-3 pt-0',\n\twithoutMedallion: 'pl-3 pr-3 pt-0',\n} as const;\n","/**\n * Strings for `SmartAccordion`. There aren't many — Radix handles the\n * trigger ARIA states automatically, so the only library-owned copy is\n * the optional landmark label on the wrapping nav region. Consumers\n * override per-item `title` / `badge` / `content` directly via\n * `SmartAccordionItem` props (the strings live in the data, not here).\n */\nexport interface SmartAccordionStrings {\n\t/**\n\t * Sets `aria-label` on the wrapping element so screen readers can name\n\t * the accordion region. Optional — when absent, no aria-label is set.\n\t */\n\tregionAriaLabel?: string;\n}\n\nexport const defaultSmartAccordionStrings: SmartAccordionStrings = {\n\tregionAriaLabel: undefined,\n};\n","/**\n * SmartAccordion — the canonical \"icon + title + optional badge + body\"\n * accordion pattern, with three visual variants for the surface chrome\n * (`card` | `bordered` | `flat`) and three icon framings (`medallion` |\n * `inline` | `none`).\n *\n * Composes the wrapped `base/accordion` parts (rule 2 — composed-style\n * convenience built from re-exports, not the raw shadcn primitive).\n *\n * For richer rows (multi-line metadata, custom layouts), drop down to\n * the compound API:\n *\n *     import { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n *       from '@/components/base/accordion';\n */\nimport { forwardRef } from 'react';\n\nimport { IconBadge } from '@/components/base/display/icon-badge';\nimport { Text } from '@/components/typography';\nimport { useStrings } from '@/lib/strings';\nimport { cn } from '@/lib/utils';\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';\nimport {\n\tACCORDION_CONTENT_PADDING,\n\tACCORDION_ITEM_VARIANT_CLASS,\n\tACCORDION_ROOT_VARIANT_CLASS,\n\tACCORDION_TRIGGER_BASE,\n} from './accordion-variants';\nimport { defaultSmartAccordionStrings } from './accordion.strings';\nimport type {\n\tSmartAccordionIconStyle,\n\tSmartAccordionProps,\n} from './accordion.types';\n\nexport const SmartAccordion = forwardRef<HTMLDivElement, SmartAccordionProps>(function SmartAccordion({\n\titems,\n\tmultiple = false,\n\tdefaultValue,\n\tvalue,\n\tonValueChange,\n\tvariant = 'card',\n\ticonStyle = 'medallion',\n\tclassName,\n\titemClassName,\n\ttriggerClassName,\n\tcontentClassName,\n\tstrings: stringsProp,\n}, ref) {\n\tconst strings = useStrings(defaultSmartAccordionStrings, stringsProp);\n\treturn (\n\t\t<Accordion\n\t\t\tref={ref}\n\t\t\tmultiple={multiple}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tvalue={value}\n\t\t\tonValueChange={\n\t\t\t\tonValueChange\n\t\t\t\t\t? (next) => onValueChange(next as string[])\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-label={strings.regionAriaLabel}\n\t\t\tclassName={cn('smart-accordion--component', ACCORDION_ROOT_VARIANT_CLASS[variant], className)}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<AccordionItem\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tvalue={item.value}\n\t\t\t\t\tclassName={cn(ACCORDION_ITEM_VARIANT_CLASS[variant], itemClassName)}\n\t\t\t\t>\n\t\t\t\t\t<AccordionTrigger\n\t\t\t\t\t\tclassName={cn(ACCORDION_TRIGGER_BASE, triggerClassName)}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"flex min-w-0 flex-1 items-center gap-3\">\n\t\t\t\t\t\t\t<SmartAccordionIcon iconStyle={iconStyle} icon={item.icon} />\n\t\t\t\t\t\t\t<Text tag=\"span\" weight=\"semibold\">\n\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t{!!item.badge && (\n\t\t\t\t\t\t\t\t<span className=\"ml-1 inline-flex shrink-0\">{item.badge}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ticonStyle === 'medallion'\n\t\t\t\t\t\t\t\t? ACCORDION_CONTENT_PADDING.withMedallion\n\t\t\t\t\t\t\t\t: ACCORDION_CONTENT_PADDING.withoutMedallion,\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text type=\"secondary\" className=\"leading-relaxed\">\n\t\t\t\t\t\t\t{item.content}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t))}\n\t\t</Accordion>\n\t);\n});\n\nSmartAccordion.displayName = 'SmartAccordion';\n\nfunction SmartAccordionIcon({\n\ticonStyle,\n\ticon,\n}: {\n\ticonStyle: SmartAccordionIconStyle;\n\ticon?: React.ReactNode;\n}) {\n\tif (iconStyle === 'none' || !icon) return null;\n\tif (iconStyle === 'inline') {\n\t\treturn <span className=\"inline-flex shrink-0 text-muted-foreground\">{icon}</span>;\n\t}\n\treturn (\n\t\t<IconBadge size=\"sm\" tone=\"muted\" shape=\"circle\" aria-hidden=\"true\">\n\t\t\t{icon}\n\t\t</IconBadge>\n\t);\n}\n"],"mappings":"qQAKA,SAAS,EAAU,CAAE,YAAW,GAAG,GAAwC,CACzE,OACE,EAAA,EAAA,KAAC,EAAA,UAAmB,KAApB,CACE,YAAU,YACV,UAAW,EAAA,GACT,0DACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAc,CAAE,YAAW,GAAG,GAAwC,CAC7E,OACE,EAAA,EAAA,KAAC,EAAA,UAAmB,KAApB,CACE,YAAU,iBACV,UAAW,EAAA,GAAG,0CAA2C,CAAS,EAClE,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,EAAiB,CACxB,YACA,WACA,GAAG,GACgC,CACnC,OACE,EAAA,EAAA,KAAC,EAAA,UAAmB,OAApB,CAA2B,UAAU,iBACnC,EAAA,EAAA,MAAC,EAAA,UAAmB,QAApB,CACE,YAAU,oBACV,UAAW,EAAA,GACT,2YACA,CACF,EACA,GAAI,WANN,CAQG,GACD,EAAA,EAAA,KAAC,EAAA,gBAAD,CAAiB,YAAU,yBAAyB,UAAU,2EAA6E,CAAA,GAC3I,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,YAAU,yBAAyB,UAAU,kFAAoF,CAAA,CACtH,GACH,CAAA,CAE/B,CAEA,SAAS,EAAiB,CACxB,YACA,WACA,GAAG,GAC8B,CACjC,OACE,EAAA,EAAA,KAAC,EAAA,UAAmB,MAApB,CACE,YAAU,oBACV,UAAU,iGACV,GAAI,YAEJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,wLACA,CACF,EAEC,UACE,CAAA,CACmB,CAAA,CAE9B,CCnDA,IAAa,EAAsE,CAClF,KAAM,mDACN,SAAU,0DACV,KAAM,uDACP,EAEa,EAAsE,CAClF,KAAM,4DACN,SAAU,uEACV,KAAM,0DACP,EAEa,EACZ,wDAQY,EAA4B,CACxC,cAAe,kBACf,iBAAkB,gBACnB,EC9Ba,EAAsD,CAClE,gBAAiB,IAAA,EAClB,ECkBa,GAAA,EAAA,EAAA,YAAiE,SAAwB,CACrG,QACA,WAAW,GACX,eACA,QACA,gBACA,UAAU,OACV,YAAY,YACZ,YACA,gBACA,mBACA,mBACA,QAAS,GACP,EAAK,CACP,IAAM,EAAU,EAAA,WAAW,EAA8B,CAAW,EACpE,OACC,EAAA,EAAA,KAAC,EAAD,CACM,MACK,WACI,eACP,QACP,cACC,EACI,GAAS,EAAc,CAAgB,EACxC,IAAA,GAEJ,aAAY,EAAQ,gBACpB,UAAW,EAAA,GAAG,6BAA8B,EAA6B,GAAU,CAAS,WAE3F,EAAM,IAAK,IACX,EAAA,EAAA,MAAC,EAAD,CAEC,MAAO,EAAK,MACZ,UAAW,EAAA,GAAG,EAA6B,GAAU,CAAa,WAHnE,EAKC,EAAA,EAAA,KAAC,EAAD,CACC,UAAW,EAAA,GAAG,EAAwB,CAAgB,EACtD,SAAU,EAAK,mBAEf,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACC,EAAA,EAAA,KAAC,EAAD,CAA+B,YAAW,KAAM,EAAK,IAAO,CAAA,GAC5D,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,IAAI,OAAO,OAAO,oBACtB,EAAK,KACD,CAAA,EACL,CAAC,CAAC,EAAK,QACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qCAA6B,EAAK,KAAY,CAAA,CAE3D,GACY,CAAA,GAClB,EAAA,EAAA,KAAC,EAAD,CACC,UAAW,EAAA,GACV,IAAc,YACX,EAA0B,cAC1B,EAA0B,iBAC7B,CACD,YAEA,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,YAAY,UAAU,2BAC/B,EAAK,OACD,CAAA,CACW,CAAA,CACJ,GA9BT,EAAK,KA8BI,CACf,CACS,CAAA,CAEb,CAAC,EAED,EAAe,YAAc,iBAE7B,SAAS,EAAmB,CAC3B,YACA,QAIE,CAKF,OAJI,IAAc,QAAU,CAAC,EAAa,KACtC,IAAc,UACV,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sDAA8C,CAAW,CAAA,GAGhF,EAAA,EAAA,KAAC,EAAA,EAAD,CAAW,KAAK,KAAK,KAAK,QAAQ,MAAM,SAAS,cAAY,gBAC3D,CACS,CAAA,CAEb"}

package/dist/_shared/accordion-DTYKGqWD.js

@@ -0,0 +1,130 @@
+import { useStrings as e } from "../lib/strings.js";
+import { cn as t } from "../lib/utils.js";
+import { n } from "./heading-HeP06nXG.js";
+import { t as r } from "./icon-badge-zTBVtgt9.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Accordion as s } from "@base-ui/react/accordion";
+import { ChevronDownIcon as c, ChevronUpIcon as l } from "lucide-react";
+//#region src/components/ui/accordion.tsx
+function u({ className: e, ...n }) {
+	return /* @__PURE__ */ a(s.Root, {
+		"data-slot": "accordion",
+		className: t("flex w-full flex-col overflow-hidden rounded-2xl border", e),
+		...n
+	});
+}
+function d({ className: e, ...n }) {
+	return /* @__PURE__ */ a(s.Item, {
+		"data-slot": "accordion-item",
+		className: t("not-last:border-b data-open:bg-muted/50", e),
+		...n
+	});
+}
+function f({ className: e, children: n, ...r }) {
+	return /* @__PURE__ */ a(s.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ o(s.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: t("group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", e),
+			...r,
+			children: [
+				n,
+				/* @__PURE__ */ a(c, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				}),
+				/* @__PURE__ */ a(l, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				})
+			]
+		})
+	});
+}
+function p({ className: e, children: n, ...r }) {
+	return /* @__PURE__ */ a(s.Panel, {
+		"data-slot": "accordion-content",
+		className: "overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+		...r,
+		children: /* @__PURE__ */ a("div", {
+			className: t("h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", e),
+			children: n
+		})
+	});
+}
+//#endregion
+//#region src/components/base/accordion/accordion-variants.ts
+var m = {
+	card: "space-y-2 border-0 rounded-none overflow-visible",
+	bordered: "rounded-lg border border-border bg-card overflow-hidden",
+	flat: "border-0 rounded-none bg-transparent overflow-visible"
+}, h = {
+	card: "border border-border bg-card rounded-md data-open:bg-card",
+	bordered: "bg-transparent not-last:border-b border-border data-open:bg-muted/40",
+	flat: "border-0 bg-transparent data-open:bg-muted/30 rounded-md"
+}, g = "gap-3 px-3 py-(--row-py) text-left hover:no-underline", _ = {
+	withMedallion: "pl-12 pr-3 pt-0",
+	withoutMedallion: "pl-3 pr-3 pt-0"
+}, v = { regionAriaLabel: void 0 }, y = i(function({ items: r, multiple: i = !1, defaultValue: s, value: c, onValueChange: l, variant: y = "card", iconStyle: x = "medallion", className: S, itemClassName: C, triggerClassName: w, contentClassName: T, strings: E }, D) {
+	let O = e(v, E);
+	return /* @__PURE__ */ a(u, {
+		ref: D,
+		multiple: i,
+		defaultValue: s,
+		value: c,
+		onValueChange: l ? (e) => l(e) : void 0,
+		"aria-label": O.regionAriaLabel,
+		className: t("smart-accordion--component", m[y], S),
+		children: r.map((e) => /* @__PURE__ */ o(d, {
+			value: e.value,
+			className: t(h[y], C),
+			children: [/* @__PURE__ */ a(f, {
+				className: t(g, w),
+				disabled: e.disabled,
+				children: /* @__PURE__ */ o("div", {
+					className: "flex min-w-0 flex-1 items-center gap-3",
+					children: [
+						/* @__PURE__ */ a(b, {
+							iconStyle: x,
+							icon: e.icon
+						}),
+						/* @__PURE__ */ a(n, {
+							tag: "span",
+							weight: "semibold",
+							children: e.title
+						}),
+						!!e.badge && /* @__PURE__ */ a("span", {
+							className: "ml-1 inline-flex shrink-0",
+							children: e.badge
+						})
+					]
+				})
+			}), /* @__PURE__ */ a(p, {
+				className: t(x === "medallion" ? _.withMedallion : _.withoutMedallion, T),
+				children: /* @__PURE__ */ a(n, {
+					type: "secondary",
+					className: "leading-relaxed",
+					children: e.content
+				})
+			})]
+		}, e.value))
+	});
+});
+y.displayName = "SmartAccordion";
+function b({ iconStyle: e, icon: t }) {
+	return e === "none" || !t ? null : e === "inline" ? /* @__PURE__ */ a("span", {
+		className: "inline-flex shrink-0 text-muted-foreground",
+		children: t
+	}) : /* @__PURE__ */ a(r, {
+		size: "sm",
+		tone: "muted",
+		shape: "circle",
+		"aria-hidden": "true",
+		children: t
+	});
+}
+//#endregion
+export { m as a, p as c, h as i, d as l, v as n, g as o, _ as r, u as s, y as t, f as u };
+
+//# sourceMappingURL=accordion-DTYKGqWD.js.map

package/dist/_shared/accordion-DTYKGqWD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-DTYKGqWD.js","names":[],"sources":["../../src/components/ui/accordion.tsx","../../src/components/base/accordion/accordion-variants.ts","../../src/components/base/accordion/accordion.strings.ts","../../src/components/base/accordion/smart-accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\n        \"flex w-full flex-col overflow-hidden rounded-2xl border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b data-open:bg-muted/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","/**\n * Shared accordion-shell variant classes — used by both `SmartAccordion`\n * and any composed surface that builds on `base/accordion` directly\n * (e.g. `composed/onboarding/checklist`).\n *\n * Exported because two consumers already keep it in lockstep; a third\n * one will copy this exact map. Centralising means a future tweak\n * (e.g. tighten `card` items to `border-border/70`) propagates.\n *\n * Padding tokens for trigger / content live alongside so the rhythm\n * is shared too:\n *\n * - Trigger: `gap-3 px-3 py-(--row-py)` — density-driven, `<UIProvider>`\n *   override flows through.\n * - Content with leading medallion: `pl-12 pr-3 pt-0` — left padding\n *   aligns body text under the title (medallion is `size-8` plus\n *   `gap-3`, so 32 + 12 = pl-12).\n * - Content without medallion: `pl-3 pr-3 pt-0`.\n */\nexport type AccordionShellVariant = 'card' | 'bordered' | 'flat';\n\nexport const ACCORDION_ROOT_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'space-y-2 border-0 rounded-none overflow-visible',\n\tbordered: 'rounded-lg border border-border bg-card overflow-hidden',\n\tflat: 'border-0 rounded-none bg-transparent overflow-visible',\n};\n\nexport const ACCORDION_ITEM_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'border border-border bg-card rounded-md data-open:bg-card',\n\tbordered: 'bg-transparent not-last:border-b border-border data-open:bg-muted/40',\n\tflat: 'border-0 bg-transparent data-open:bg-muted/30 rounded-md',\n};\n\nexport const ACCORDION_TRIGGER_BASE =\n\t'gap-3 px-3 py-(--row-py) text-left hover:no-underline';\n\n/**\n * Content-padding presets keyed off the leading-icon width. Use\n * `withMedallion` when the trigger renders an `IconBadge size=\"sm\"`\n * (size-8 = 32px) plus `gap-3` (12px) so body text aligns under the\n * title.\n */\nexport const ACCORDION_CONTENT_PADDING = {\n\twithMedallion: 'pl-12 pr-3 pt-0',\n\twithoutMedallion: 'pl-3 pr-3 pt-0',\n} as const;\n","/**\n * Strings for `SmartAccordion`. There aren't many — Radix handles the\n * trigger ARIA states automatically, so the only library-owned copy is\n * the optional landmark label on the wrapping nav region. Consumers\n * override per-item `title` / `badge` / `content` directly via\n * `SmartAccordionItem` props (the strings live in the data, not here).\n */\nexport interface SmartAccordionStrings {\n\t/**\n\t * Sets `aria-label` on the wrapping element so screen readers can name\n\t * the accordion region. Optional — when absent, no aria-label is set.\n\t */\n\tregionAriaLabel?: string;\n}\n\nexport const defaultSmartAccordionStrings: SmartAccordionStrings = {\n\tregionAriaLabel: undefined,\n};\n","/**\n * SmartAccordion — the canonical \"icon + title + optional badge + body\"\n * accordion pattern, with three visual variants for the surface chrome\n * (`card` | `bordered` | `flat`) and three icon framings (`medallion` |\n * `inline` | `none`).\n *\n * Composes the wrapped `base/accordion` parts (rule 2 — composed-style\n * convenience built from re-exports, not the raw shadcn primitive).\n *\n * For richer rows (multi-line metadata, custom layouts), drop down to\n * the compound API:\n *\n *     import { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n *       from '@/components/base/accordion';\n */\nimport { forwardRef } from 'react';\n\nimport { IconBadge } from '@/components/base/display/icon-badge';\nimport { Text } from '@/components/typography';\nimport { useStrings } from '@/lib/strings';\nimport { cn } from '@/lib/utils';\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';\nimport {\n\tACCORDION_CONTENT_PADDING,\n\tACCORDION_ITEM_VARIANT_CLASS,\n\tACCORDION_ROOT_VARIANT_CLASS,\n\tACCORDION_TRIGGER_BASE,\n} from './accordion-variants';\nimport { defaultSmartAccordionStrings } from './accordion.strings';\nimport type {\n\tSmartAccordionIconStyle,\n\tSmartAccordionProps,\n} from './accordion.types';\n\nexport const SmartAccordion = forwardRef<HTMLDivElement, SmartAccordionProps>(function SmartAccordion({\n\titems,\n\tmultiple = false,\n\tdefaultValue,\n\tvalue,\n\tonValueChange,\n\tvariant = 'card',\n\ticonStyle = 'medallion',\n\tclassName,\n\titemClassName,\n\ttriggerClassName,\n\tcontentClassName,\n\tstrings: stringsProp,\n}, ref) {\n\tconst strings = useStrings(defaultSmartAccordionStrings, stringsProp);\n\treturn (\n\t\t<Accordion\n\t\t\tref={ref}\n\t\t\tmultiple={multiple}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tvalue={value}\n\t\t\tonValueChange={\n\t\t\t\tonValueChange\n\t\t\t\t\t? (next) => onValueChange(next as string[])\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-label={strings.regionAriaLabel}\n\t\t\tclassName={cn('smart-accordion--component', ACCORDION_ROOT_VARIANT_CLASS[variant], className)}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<AccordionItem\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tvalue={item.value}\n\t\t\t\t\tclassName={cn(ACCORDION_ITEM_VARIANT_CLASS[variant], itemClassName)}\n\t\t\t\t>\n\t\t\t\t\t<AccordionTrigger\n\t\t\t\t\t\tclassName={cn(ACCORDION_TRIGGER_BASE, triggerClassName)}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"flex min-w-0 flex-1 items-center gap-3\">\n\t\t\t\t\t\t\t<SmartAccordionIcon iconStyle={iconStyle} icon={item.icon} />\n\t\t\t\t\t\t\t<Text tag=\"span\" weight=\"semibold\">\n\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t{!!item.badge && (\n\t\t\t\t\t\t\t\t<span className=\"ml-1 inline-flex shrink-0\">{item.badge}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ticonStyle === 'medallion'\n\t\t\t\t\t\t\t\t? ACCORDION_CONTENT_PADDING.withMedallion\n\t\t\t\t\t\t\t\t: ACCORDION_CONTENT_PADDING.withoutMedallion,\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text type=\"secondary\" className=\"leading-relaxed\">\n\t\t\t\t\t\t\t{item.content}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t))}\n\t\t</Accordion>\n\t);\n});\n\nSmartAccordion.displayName = 'SmartAccordion';\n\nfunction SmartAccordionIcon({\n\ticonStyle,\n\ticon,\n}: {\n\ticonStyle: SmartAccordionIconStyle;\n\ticon?: React.ReactNode;\n}) {\n\tif (iconStyle === 'none' || !icon) return null;\n\tif (iconStyle === 'inline') {\n\t\treturn <span className=\"inline-flex shrink-0 text-muted-foreground\">{icon}</span>;\n\t}\n\treturn (\n\t\t<IconBadge size=\"sm\" tone=\"muted\" shape=\"circle\" aria-hidden=\"true\">\n\t\t\t{icon}\n\t\t</IconBadge>\n\t);\n}\n"],"mappings":";;;;;;;;;AAKA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAwC;CACzE,OACE,kBAAC,EAAmB,MAApB;EACE,aAAU;EACV,WAAW,EACT,2DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAc,EAAE,cAAW,GAAG,KAAwC;CAC7E,OACE,kBAAC,EAAmB,MAApB;EACE,aAAU;EACV,WAAW,EAAG,2CAA2C,CAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAiB,EACxB,cACA,aACA,GAAG,KACgC;CACnC,OACE,kBAAC,EAAmB,QAApB;EAA2B,WAAU;YACnC,kBAAC,EAAmB,SAApB;GACE,aAAU;GACV,WAAW,EACT,4YACA,CACF;GACA,GAAI;aANN;IAQG;IACD,kBAAC,GAAD;KAAiB,aAAU;KAAyB,WAAU;IAA6E,CAAA;IAC3I,kBAAC,GAAD;KAAe,aAAU;KAAyB,WAAU;IAAoF,CAAA;GACtH;;CACH,CAAA;AAE/B;AAEA,SAAS,EAAiB,EACxB,cACA,aACA,GAAG,KAC8B;CACjC,OACE,kBAAC,EAAmB,OAApB;EACE,aAAU;EACV,WAAU;EACV,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW,EACT,yLACA,CACF;GAEC;EACE,CAAA;CACmB,CAAA;AAE9B;;;ACnDA,IAAa,IAAsE;CAClF,MAAM;CACN,UAAU;CACV,MAAM;AACP,GAEa,IAAsE;CAClF,MAAM;CACN,UAAU;CACV,MAAM;AACP,GAEa,IACZ,yDAQY,IAA4B;CACxC,eAAe;CACf,kBAAkB;AACnB,GC9Ba,IAAsD,EAClE,iBAAiB,KAAA,EAClB,GCkBa,IAAiB,EAAgD,SAAwB,EACrG,UACA,cAAW,IACX,iBACA,UACA,kBACA,aAAU,QACV,eAAY,aACZ,cACA,kBACA,qBACA,qBACA,SAAS,KACP,GAAK;CACP,IAAM,IAAU,EAAW,GAA8B,CAAW;CACpE,OACC,kBAAC,GAAD;EACM;EACK;EACI;EACP;EACP,eACC,KACI,MAAS,EAAc,CAAgB,IACxC,KAAA;EAEJ,cAAY,EAAQ;EACpB,WAAW,EAAG,8BAA8B,EAA6B,IAAU,CAAS;YAE3F,EAAM,KAAK,MACX,kBAAC,GAAD;GAEC,OAAO,EAAK;GACZ,WAAW,EAAG,EAA6B,IAAU,CAAa;aAHnE,CAKC,kBAAC,GAAD;IACC,WAAW,EAAG,GAAwB,CAAgB;IACtD,UAAU,EAAK;cAEf,kBAAC,OAAD;KAAK,WAAU;eAAf;MACC,kBAAC,GAAD;OAA+B;OAAW,MAAM,EAAK;MAAO,CAAA;MAC5D,kBAAC,GAAD;OAAM,KAAI;OAAO,QAAO;iBACtB,EAAK;MACD,CAAA;MACL,CAAC,CAAC,EAAK,SACP,kBAAC,QAAD;OAAM,WAAU;iBAA6B,EAAK;MAAY,CAAA;KAE3D;;GACY,CAAA,GAClB,kBAAC,GAAD;IACC,WAAW,EACV,MAAc,cACX,EAA0B,gBAC1B,EAA0B,kBAC7B,CACD;cAEA,kBAAC,GAAD;KAAM,MAAK;KAAY,WAAU;eAC/B,EAAK;IACD,CAAA;GACW,CAAA,CACJ;KA9BT,EAAK,KA8BI,CACf;CACS,CAAA;AAEb,CAAC;AAED,EAAe,cAAc;AAE7B,SAAS,EAAmB,EAC3B,cACA,WAIE;CAKF,OAJI,MAAc,UAAU,CAAC,IAAa,OACtC,MAAc,WACV,kBAAC,QAAD;EAAM,WAAU;YAA8C;CAAW,CAAA,IAGhF,kBAAC,GAAD;EAAW,MAAK;EAAK,MAAK;EAAQ,OAAM;EAAS,eAAY;YAC3D;CACS,CAAA;AAEb"}