admin-ui-starter-kit 0.1.0

package/INTEGRATION.md

@@ -0,0 +1,115 @@
+# Consumer Integration Guide
+
+Use this when installing `admin-ui-starter-kit` into a React app.
+
+## 1. Install the package and required peers
+
+```bash
+npm install admin-ui-starter-kit react react-dom tailwindcss lucide-react
+```
+
+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.
+
+## 2. Import exact entrypoints
+
+Import the family you use. This is the core package contract.
+
+```tsx
+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 { Item, ItemContent, ItemMedia, ItemTitle } from 'admin-ui-starter-kit/base/item';
+import { Comments } from 'admin-ui-starter-kit/features/comments';
+import { PageHeader } from 'admin-ui-starter-kit/layout/page';
+```
+
+Do not import `admin-ui-starter-kit/base`,
+`admin-ui-starter-kit/composed`, or `admin-ui-starter-kit/features`.
+Those broad aggregate entrypoints are intentionally not public because
+they would force optional peers into apps that do not use them.
+
+The root entrypoint is intentionally small:
+
+```tsx
+import { UIProvider, useStrings, cn } from 'admin-ui-starter-kit';
+```
+
+## 3. Mount styles and provider
+
+```tsx
+import 'admin-ui-starter-kit/style.css';
+import { UIProvider } from 'admin-ui-starter-kit/ui-provider';
+
+<UIProvider
+	config={{
+		money: { defaultCurrency: 'USD', locale: 'en-US' },
+		dates: { weekStartsOn: 1 },
+		badge: { defaultSize: 'xs' },
+		button: { defaultSize: 'sm' },
+	}}
+>
+	<App />
+</UIProvider>;
+```
+
+Strict TypeScript apps can import the CSS file directly; the package ships
+`style.css.d.ts` for that side-effect import. The CSS asset files referenced
+by the compiled stylesheet are shipped in `dist/files/` and `dist/images/`.
+
+## 4. Wire frameworks at the call site
+
+The library never imports routing, query, backend, or i18n integrations.
+Pass those concerns through props.
+
+```tsx
+import { router } from '@inertiajs/react';
+import { Comments } from 'admin-ui-starter-kit/features/comments';
+
+<Comments
+	comments={comments}
+	onSubmit={(values) => router.post('/comments', values)}
+	onDelete={(id) => router.delete(`/comments/${id}`)}
+	strings={{ empty: t('comments.empty') }}
+/>;
+```
+
+For Next.js App Router or any React Server Components setup, import these
+components from a client component file (`'use client'`). The package is
+framework-neutral, but interactive UI still runs on the client.
+
+## 5. Keep local wrappers app-owned
+
+If your app repeats the same routing/data wiring many times, create an app
+wrapper in your codebase:
+
+```tsx
+import { Comments, type CommentsProps } from 'admin-ui-starter-kit/features/comments';
+
+export function AppComments(props: Pick<CommentsProps, 'comments' | 'context'>) {
+	return (
+		<Comments
+			{...props}
+			onSubmit={(values) => api.comments.create(values)}
+			onDelete={(id) => api.comments.delete(id)}
+		/>
+	);
+}
+```
+
+Do not fork the package or add framework adapters inside it. Keep framework
+wiring in the consuming app.
+
+## 6. Verify a fresh install
+
+For a quick smoke test:
+
+```bash
+npm run typecheck
+npm run build
+```
+
+If a build reports a missing optional peer, either install the peer listed
+for that entrypoint or switch to a narrower import that does not use it.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nicolas Vlachos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PUBLISHING.md

@@ -0,0 +1,129 @@
+# Publishing
+
+The release workflow for **admin-ui-starter-kit**. Read end-to-end before
+the first publish.
+
+## Pre-flight checklist
+
+```bash
+# Clean state
+git status                       # working tree clean
+git pull --rebase                # main up to date
+
+# Quality gates
+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
+```
+
+Every command must succeed locally before publish — if you ship a broken
+build, the registry won't take it back.
+
+## Decide the version
+
+Follow [SemVer](https://semver.org/):
+
+| Change kind | Bump |
+| --- | --- |
+| New feature, no breaking | `minor` (e.g. `0.1.0` → `0.2.0`) |
+| Bug fix, no breaking | `patch` (e.g. `0.1.0` → `0.1.1`) |
+| Breaking change | `major` (e.g. `0.1.0` → `1.0.0`) — but until `1.0.0` is shipped, breaking changes go in `minor` per SemVer's pre-1.0 rule |
+
+Bump in `package.json`:
+
+```bash
+npm version 0.2.0 --no-git-tag-version   # don't tag yet
+```
+
+## Update the changelog
+
+Move all `[Unreleased]` entries into a new `[<version>] — <date>` section
+in [CHANGELOG.md](CHANGELOG.md). Add a new empty `[Unreleased]` block on
+top.
+
+## Dry-run
+
+```bash
+npm publish --dry-run
+```
+
+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.
+- `style.css.d.ts` is included for strict TypeScript side-effect CSS imports.
+- `dist/showcase/` is included.
+- `README.md`, `INTEGRATION.md`, `LICENSE`, `CHANGELOG.md` are included.
+- `src/App.css` is included so consumers can copy the token source when
+  building their own Tailwind output.
+- `node_modules/`, `coverage/`, `.git/`, `dist-ssr/`, the preview app
+  source are NOT included.
+- Tarball size is reasonable for the shipped showcase (currently about
+  3-4 MB compressed for v0.x; investigate unexpected jumps).
+
+## Publish
+
+```bash
+npm login                        # if not already
+npm publish --access public      # public scope
+```
+
+The `prepublishOnly` hook re-runs `npm run build:lib` and
+`npm run build:showcase` before the upload, so even if you forgot, the
+tarball will contain a fresh `dist/`.
+
+## Tag and push
+
+```bash
+git add package.json CHANGELOG.md
+git commit -m "release: v0.2.0"
+git tag -a v0.2.0 -m "v0.2.0"
+git push origin main --tags
+```
+
+## Create a GitHub Release
+
+1. Go to <https://github.com/nicolasvlachos/admin-ui-starter-kit/releases/new>.
+2. Pick the `v0.2.0` tag.
+3. Title: `v0.2.0`.
+4. Paste the corresponding `[<version>]` block from `CHANGELOG.md`.
+5. Attach the tarball from `npm pack` (optional but appreciated for
+   offline / archival use).
+
+## Rollback
+
+If you publish a broken version:
+
+```bash
+# Within 72 hours of publish, you can deprecate (NOT delete — npm policy)
+npm deprecate admin-ui-starter-kit@<bad-version> "Use <good-version> instead"
+
+# Then publish a fix
+npm version <next-patch> --no-git-tag-version
+npm publish
+```
+
+You cannot delete or overwrite a published version. Always dry-run first.
+
+## Common issues
+
+| Symptom | Fix |
+| --- | --- |
+| `npm publish` says "private package" | Remove `"private": true` from `package.json` |
+| `npm publish` says "name not available" | Someone took the name; pick a new one |
+| Consumers report "module not found" for `admin-ui-starter-kit/foo` | Add `./foo` to the `exports` map AND `vite.lib.config.ts` entries; rebuild and republish |
+| Published bundle has stale code | Confirm `prepublishOnly` ran; check `dist/` mtime; bump patch and republish |
+| `peer dep warning: <pkg> not installed` for an optional peer | Verify the entry is in `peerDependenciesMeta.optional` block; consumer can ignore |
+
+## Maintainer-only: skill publish
+
+Independent of npm publishes, the rules skill can be copied into the
+maintainer's `~/.claude/skills/` and `~/.agents/skills/` directories so
+local Claude Code / agent sessions across projects pick it up:
+
+```bash
+npm run publish:skill
+```
+
+This is local-only — it does not affect the published npm package.

package/README.md

@@ -0,0 +1,379 @@
+# Admin UI Starter Kit
+
+> **An opinionated React component kit for admin panels and SaaS dashboards,
+> built on top of [shadcn/ui](https://ui.shadcn.com) + [Tailwind CSS v4](https://tailwindcss.com).**
+>
+> shadcn gives you primitives. Admin UI Starter Kit gives you the *next* layer up — the
+> typography rules, the row primitive, the form-field wrapper, the
+> provider-driven defaults, the framework-agnostic feature surfaces — so the
+> 90% of admin-panel UI that's the same everywhere actually *is* the same.
+
+```bash
+npm install admin-ui-starter-kit react react-dom tailwindcss lucide-react
+```
+
+```tsx
+import { Button } from 'admin-ui-starter-kit/base/buttons';
+import { Item, ItemContent, ItemMedia, ItemTitle } from 'admin-ui-starter-kit/base/item';
+import { Mail } from 'lucide-react';
+import 'admin-ui-starter-kit/style.css';
+
+<Item>
+  <ItemMedia variant="icon"><Mail /></ItemMedia>
+  <ItemContent>
+    <ItemTitle>kira@example.com</ItemTitle>
+  </ItemContent>
+</Item>
+```
+
+---
+
+## Why this exists
+
+shadcn/ui ships **primitives** — Button, Input, Dialog, Popover, Table, etc.
+They're great. But they're the bottom layer.
+
+Anyone building an admin panel has to invent the next layer themselves:
+- A row primitive ("avatar + title + description + action") — every admin has dozens of these.
+- A form-field wrapper that handles label + control + error/hint + react-hook-form binding.
+- A typography system so every secondary line in every card is the same `xs / muted-foreground`.
+- A provider for library-wide defaults (currency, week-start, density) — set once at the root.
+- An i18n hook so internal strings stay overridable without coupling to any specific i18n library.
+- A way to ship features (comments, filters, overlays, search) that work in **any** React app — Next.js, Vite, Inertia, Remix, Tanstack Router — without hardcoding the routing or data layer.
+
+Admin UI Starter Kit is that next layer. You bring shadcn + Tailwind. We bring everything
+between primitives and your routes.
+
+## Who this is for
+
+- **Admin panels** — internal tools, vendor dashboards, customer-success consoles.
+- **SaaS interiors** — settings pages, billing pages, user management, audit logs.
+- **B2B back-offices** — anything where the UI is functional, not marketing.
+
+If you're building a marketing landing page, this isn't your tool. If you're
+shipping the 27th internal "manage users" screen of your career, **this is
+exactly your tool.**
+
+## Seven non-negotiable principles
+
+1. **Layered architecture.** `ui/` (shadcn primitives, never edited) →
+   `typography/` → `base/` (typography-aware wrappers) → `layout/`
+   (app shells) and `composed/` (domain rows + cards) → `features/`
+   (callback-driven feature surfaces). Enforced by `npm run lint:architecture`.
+2. **Framework-agnostic by default.** Zero hard-coded calls into Inertia,
+   Next.js, react-router, react-query, or any other peer. Every action is a
+   callback the consumer wires at the call site.
+3. **Provider-driven defaults.** A single `<UIProvider>` zustand store holds
+   library-wide display defaults (currency, week-start, density, sizes,
+   formatters). Slice-scoped subscriptions, no re-renders on unrelated changes.
+4. **Strings always overridable.** Every user-facing string flows through the
+   `useStrings(defaults, override)` deep-merge pattern. Consumers wire their
+   own i18n at the call site, the library imports zero i18n packages.
+5. **Composability through slots, render-props, and exported partials.**
+   Every non-trivial component exposes its internal pieces so consumers can
+   reshape without forking.
+6. **Entrypoint isolation.** Import the component family you use:
+   `admin-ui-starter-kit/base/item`, `admin-ui-starter-kit/features/comments`,
+   etc. Aggregate `base`, `composed`, and `features` entrypoints are not public
+   because they would force optional peers into every React app.
+7. **Stable DOM contract.** Every public `base/` / `features/` / `composed/`
+   component carries a `{kebab-name}--component` class on its outermost
+   element (e.g. `.kanban-item--component`, `.comments--component`,
+   `.card--header`), independent of shadcn's internal `data-slot`
+   attributes. Use these for CSS theming, tests, analytics, and DevTools.
+
+## What this is not
+
+- **A drop-in replacement for `shadcn/ui`** — it builds on top of shadcn,
+  doesn't replace it. You still install + customise shadcn primitives the
+  way shadcn intends.
+- **A marketing-site UI kit** — no hero sections, no landing-page blocks. Use
+  it for app interiors.
+- **Coupled to any backend** — everything is callback-driven, you bring the
+  data.
+
+---
+
+## Install
+
+For a full framework and bundler setup walkthrough, see
+[INTEGRATION.md](INTEGRATION.md).
+
+### 1. Add the package
+
+```bash
+npm install admin-ui-starter-kit
+```
+
+### 2. Required peers
+
+Always required:
+
+```bash
+npm install react react-dom tailwindcss lucide-react
+```
+
+### 3. Optional peers — install only what you use
+
+| Feature you import | Install peer |
+| --- | --- |
+| `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` |
+| `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/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.
+
+### 4. Mount the stylesheet
+
+```tsx
+// in your root layout
+import 'admin-ui-starter-kit/style.css';
+```
+
+The shipped stylesheet is a pre-compiled Tailwind v4 build (~280 KB
+minified). If you already run Tailwind in your app, see the **Build your
+own** section below to skip the pre-built CSS.
+
+### 5. Mount the provider (optional but recommended)
+
+```tsx
+// app.tsx
+import { UIProvider } from 'admin-ui-starter-kit/ui-provider';
+
+<UIProvider config={{
+  money: { defaultCurrency: 'USD', locale: 'en-US' },
+  dates: { weekStartsOn: 1, format: 'dd MMM yyyy' },
+  table: { defaultSize: 'xs' },
+  badge: { defaultSize: 'xs' },
+  item:  { defaultSize: 'sm' },
+}}>
+  <App />
+</UIProvider>
+```
+
+The provider is locked at first mount; pass everything once at the root.
+
+### 6. Install the AI agent skill (optional)
+
+This package ships a `component-library-rules` skill for Claude Code and other
+AI agents. After installing the package:
+
+```bash
+npx admin-ui-starter-kit-install-skill
+```
+
+Copies the skill into your project's `.claude/skills/component-library-rules/`
+and `.agents/skills/component-library-rules/`. Run again to update after a
+package upgrade.
+
+Flags:
+- `--target=claude|agents|both` (default `both`) — pick which directory to install into.
+- `--force` — overwrite without prompting.
+
+---
+
+## Browse the component showcase
+
+Every component shipped with this package has a docs page (preview + code tab + props table). To browse the full showcase locally:
+
+```bash
+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.
+
+Flags:
+- `--port <n>` — pick a port (default 7654)
+- `--host <h>` — bind to a different host (default 127.0.0.1)
+- `--no-open` — do not auto-open a browser
+
+The bundle is shipped pre-built inside the package; no build step required.
+
+---
+
+## Architecture
+
+### Layer order
+
+```
+ui/        → shadcn primitives (DO NOT EDIT)
+typography/→ Text, Heading, Label, TextLink
+base/      → typography-aware wrappers (Button, Item, FormField, ...)
+composed/  → domain rows + cards (TeamMemberRow, ContactCard, MetricGrid, ...)
+features/  → provider-driven feature surfaces (Comments, Filters, Overlays, ...)
+layout/    → app-shell scaffolds (PageHeader, Sidebar, ...)
+```
+
+Each layer can only import from the layer below it — `lint:architecture`
+enforces this on every PR.
+
+### Three pillars
+
+**`<UIProvider>` — library-wide defaults.** One zustand store, slice-scoped
+subscriptions, locked-once at boot:
+
+```tsx
+const { defaultCurrency } = useMoneyConfig();
+const currency = props.currency ?? defaultCurrency;
+```
+
+**`useStrings()` — overridable internal copy.** Every component owns a
+`<Name>Strings` interface + `default<Name>Strings`:
+
+```tsx
+<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`.
+
+```tsx
+<Item>
+  <ItemMedia variant="avatar"><Avatar src={user.avatar} /></ItemMedia>
+  <ItemContent>
+    <ItemTitle>{user.name}</ItemTitle>
+    <ItemDescription>{user.role}</ItemDescription>
+  </ItemContent>
+  <ItemActions><Badge variant="success">Active</Badge></ItemActions>
+</Item>
+
+<ControlledFormField name="email" control={control} label="Email" required>
+  {(field, _err, invalid) => (
+    <Input value={field.value} onChange={field.onChange} invalid={invalid} />
+  )}
+</ControlledFormField>
+```
+
+---
+
+## Entry-points
+
+Import per component family. This keeps optional peers isolated: importing
+`base/item` should not require `react-day-picker`, and importing
+`features/overlays` should not require TipTap.
+
+```tsx
+import { Text } from 'admin-ui-starter-kit/typography';
+import { Button } from 'admin-ui-starter-kit/base/buttons';
+import { Item, ItemGroup, ItemMedia, ItemContent, ItemTitle } from 'admin-ui-starter-kit/base/item';
+import { Badge } from 'admin-ui-starter-kit/base/badge';
+import { ContactCard } from 'admin-ui-starter-kit/composed/cards';
+import { Comments } from 'admin-ui-starter-kit/features/comments';
+import { Dialog, Drawer } from 'admin-ui-starter-kit/features/overlays';
+import { useStrings } from 'admin-ui-starter-kit/lib/strings';
+```
+
+Safe public entrypoints:
+- `admin-ui-starter-kit` — provider, strings helpers, and `cn` only.
+- `admin-ui-starter-kit/ui-provider`
+- `admin-ui-starter-kit/typography`
+- `admin-ui-starter-kit/base/*`
+- `admin-ui-starter-kit/composed/*`
+- `admin-ui-starter-kit/features/*`
+- `admin-ui-starter-kit/layout` and `admin-ui-starter-kit/layout/*`
+- `admin-ui-starter-kit/lib/strings`
+- `admin-ui-starter-kit/lib/utils`
+
+Avoid broad component imports such as `admin-ui-starter-kit/base`,
+`admin-ui-starter-kit/composed`, or `admin-ui-starter-kit/features`; they are
+intentionally not exported. Use the exact family subpath so missing optional
+peers fail only when you import the feature that needs them.
+
+---
+
+## Build your own stylesheet
+
+The pre-built `style.css` is convenient but you may already run Tailwind in
+your app. To skip the pre-built CSS:
+
+1. Don't import `admin-ui-starter-kit/style.css`.
+2. Add the kit's source to your Tailwind `content`:
+
+   ```ts
+   // tailwind config (or @source in your CSS)
+   content: ['./node_modules/admin-ui-starter-kit/dist/**/*.{js,cjs}'],
+   ```
+
+3. Copy the design tokens from
+   `node_modules/admin-ui-starter-kit/src/App.css` into your own root
+   stylesheet (`@theme` block + `:root` / `.dark` custom-property scopes).
+
+---
+
+## CommonJS support
+
+Both ESM (`.js`) and CJS (`.cjs`) are emitted. The exports map resolves
+automatically:
+
+```js
+// ESM
+import { Item } from 'admin-ui-starter-kit/base/item';
+
+// CJS
+const { Item } = require('admin-ui-starter-kit/base/item');
+```
+
+---
+
+## For maintainers
+
+This package is governed by a single rules file:
+[`.agents/skills/component-library-rules/SKILL.md`](.agents/skills/component-library-rules/SKILL.md).
+It is **the** contract — everything from the layer order to typography to
+the strings pattern to the Item/FormField primitives is documented there.
+
+Companion docs:
+- [`AGENTS.md`](AGENTS.md) — what AI agents should read first.
+- [`CLAUDE.md`](CLAUDE.md) — Claude Code entry point.
+- [`references/`](.agents/skills/component-library-rules/references/) —
+  per-task deep guides (new feature, strings, ui-provider, base wrapper,
+  preview pages, item pattern, form-field pattern, visual evaluation).
+
+### Common scripts
+
+```bash
+npm run dev              # start the preview app
+npm run build:lib        # compile the publishable artifact (dist/)
+npm run typecheck        # tsc --noEmit
+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             # vitest run
+npm run verify           # lint:architecture + test:exports + typecheck + lint + test
+npm run publish:skill    # copy the rules skill into ~/.claude and ~/.agents
+```
+
+### Project layout
+
+```
+src/
+├── components/
+│   ├── ui/         shadcn primitives (do not edit)
+│   ├── typography/ Text, Heading, Label, TextLink
+│   ├── base/       typography-aware wrappers + base/item + base/forms/form-field
+│   ├── composed/   domain rows + cards (admin, cards, commerce, dark-surfaces, …)
+│   ├── features/   feature surfaces (activities, comments, filters, overlays, …)
+│   └── layout/     app-shell scaffolds
+├── lib/
+│   ├── ui-provider/  zustand store + slice hooks
+│   ├── strings.ts    useStrings + StringsProp + DeepPartial helpers
+│   └── utils.ts      cn() etc.
+├── hooks/          cross-cutting hooks (useDebounce, useMobile, …)
+└── preview/        in-repo showcase app (excluded from publish)
+```
+
+---
+
+## License
+
+MIT © Nicolas Vlachos. See [LICENSE](LICENSE).

package/dist/_shared/accordion-7rwpgJ1k.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-D3uCBrYO.cjs`);const e=require(`../lib/strings.cjs`),t=require(`../lib/utils.cjs`),n=require(`./text-DBnY6fcL.cjs`),r=require(`./icon-badge-DGKpbo9_.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.t,{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.t,{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 l}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
+//# sourceMappingURL=accordion-7rwpgJ1k.cjs.map

package/dist/_shared/accordion-7rwpgJ1k.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-7rwpgJ1k.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":"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"}