@nadicodeai/ui 0.5.2 → 0.6.0

package/AGENTS.md

@@ -16,8 +16,8 @@ skills.
 
 ## Invariants
 
-- **Token-only, no raw literals.** Components style through brand tokens only — the `nadicode.theme.css` role vars bridged into Tailwind utilities (`bg-background`, `text-foreground`, `border-input`, …) plus UI-local product aliases defined in `globals.css` such as `--nc-app-surface`, `--nc-chat-tool-surface`, and `--nc-terminal-bg`. No raw `#hex` / `rgb()` / `hsl()` in any `.tsx`; a new source value goes to `design-system/DESIGN.md` first and flows through generated tokens. Enforced by `tests/no-raw-literal.test.ts` and `tests/token-reference-integrity.test.ts`.
-- **Dark-ready roles, no component `dark:` styling.** The generated design-system Tailwind theme owns the standard shadcn `:root` and `.dark` role maps; `globals.css` owns the Tailwind `@theme inline` bridge and UI-local product aliases. Components consume semantic utilities or product aliases such as `var(--nc-app-surface)`; they must not ship `dark:` Tailwind utilities, OS dark-mode branching, or raw dark palette utilities such as `dark:bg-slate-950` / `dark:text-white`. Enforced by `tests/no-dark.test.ts`, `tests/dark-semantic-roles.test.ts`, and `tests/token-reference-integrity.test.ts`.
+- **Token-only, no raw literals.** Components style through brand tokens only — the `nadicode.theme.css` role vars bridged into Tailwind utilities (`bg-background`, `text-foreground`, `border-input`, …) plus UI-local product aliases defined in `globals.css` such as `--nc-app-surface`, `--nc-chat-tool-surface`, and `--nc-terminal-bg`. No raw `#hex` / `rgb()` / `hsl()` in any `.tsx`; a new source value goes to `design-system/DESIGN.md` first and flows through generated tokens. Enforced by `tests/guards/no-raw-literal.test.ts` and `tests/guards/token-reference-integrity.test.ts`.
+- **Dark-ready roles, no component `dark:` styling.** The generated design-system Tailwind theme owns the standard shadcn `:root` and `.dark` role maps; `globals.css` owns the Tailwind `@theme inline` bridge and UI-local product aliases. Components consume semantic utilities or product aliases such as `var(--nc-app-surface)`; they must not ship `dark:` Tailwind utilities, OS dark-mode branching, or raw dark palette utilities such as `dark:bg-slate-950` / `dark:text-white`. Enforced by `tests/guards/no-dark.test.ts`, `tests/guards/dark-semantic-roles.test.ts`, and `tests/guards/token-reference-integrity.test.ts`.
 - **Components inherit the brand theme.** Consumers import `@nadicodeai/ui/globals.css` (Tailwind + the generated brand `@theme` + semantic role/alias maps) and `@nadicodeai/design-system/css` (kept `nc-*` geometry, type scale, chat CSS components, motion, and display components). Components carry no theme of their own — they resolve every color/radius from bridged brand tokens, UI-local aliases, and design-system CSS.
 - **Source-authored, built package.** Components are authored as shadcn-style source in this workspace, then emitted to `dist/` for consumption by other apps. Package exports must point at built JS/declarations/CSS, not raw `src/*.tsx`, and `npm pack --dry-run` must include only intentional consumer artifacts.
 - **Public surface changes require a release decision.** Any change to exported components, `src/index.ts`, `src/ai-elements.ts`, package `exports`, `globals.css`, UI-local semantic aliases, theme behavior, package docs, package skills, or design-system token/CSS/theme output consumed by this package must end with an explicit npm release decision before handoff. If the change should reach external consumers, bump the relevant package version(s), run `npm pack --dry-run -w @nadicodeai/ui`, and follow `../docs/agents/npm-publishing.md`. When the UI change depends on modified `@nadicodeai/design-system` output, bump/publish `@nadicodeai/design-system` first, then update `@nadicodeai/ui`'s dependency and publish UI. Never claim a UI package change is shipped to npm until `npm view @nadicodeai/ui version` reports the intended published version.
@@ -26,7 +26,7 @@ skills.
 - **Named shadcn blocks stay named.** When a user, plan, or issue selects a shadcn block/example such as `login-02`, `signup-02`, `dashboard-01`, or `sidebar-*`, use that registry item as the source of truth through shadcn CLI/MCP. Do not replace it with a package-authored abstraction unless the plan explicitly records the substitution, the reason, and the true consumer route that proves it.
 - **Package surface is source-backed.** `src/components/` is intentionally flat shadcn-style source. Do not document folders or package namespaces that do not exist. Do not add top-level exports for recipes, blocks, agent, or terminal groupings unless a later package API decision adds concrete source, built files, docs, and tests in the same change.
 - **Auth routes are consumer-owned shadcn block work.** Login, signup, OTP, two-factor, magic-link, and provider-button flows start from the selected shadcn block/example in the consuming app, with app-owned Better Auth behavior. Do not ship generic auth, signup, OTP, federated-login, or provider abstractions from this package unless a later explicit boundary decision replaces the selected shadcn block.
-- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, AI Elements, brand adapters, React adapters, reusable sections, and presentational product components such as settings, shells, plugin boundaries, installer states, agent chat, artifacts, files, diffs, and redacted terminal summaries. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, customer management, or other product-domain use cases. Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations, not NadicodeAI package abstractions. Those screens live in the consuming app and are built from `@nadicodeai/ui` components and first-party shadcn blocks/examples.
+- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, AI Elements, brand adapters, React adapters, reusable sections, and presentational product components such as settings, shells, plugin boundaries, installer states, agent chat, artifacts, files, diffs, and redacted terminal summaries. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, customer management, or other product-domain use cases. Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations, not NadicodeAI package abstractions. Those screens live in the consuming app and are built from `@nadicodeai/ui` components and first-party shadcn blocks/examples. The console chart kit (`chart-kpi-stat`, `chart-sparkline`, `chart-time-series`, `chart-bullet-bar`, `chart-breakdown-table`, `chart-delta`, `chart-entity-colors`, `chart-date-range`, `chart-date-range-control`) is plan-approved package surface per issue #166 and ADR 0010; chart *cards* — the app screens that arrange these widgets — remain app-owned. Every data-shaped chart names a data alternative (a visually hidden `<table>` twin for the time-series charts, a real `<table>` for `chart-breakdown-table`, an sr-only value list for a standalone `chart-sparkline`); `chart-bullet-bar` (data in `aria-valuetext` plus the visible value) and `chart-kpi-stat` (data in visible text) carry no separate table twin by design.
 - **Design-system geometry remains the foundation.** React components compose the kept `nc-*` page grammar and display CSS components; they do not redefine frame math, marker placement, token values, or raw CSS geometry. Use parent-paints-plus-gap for bordered cell grids and keep every visible seam single-owner.
 - **Reusable sections and compositions live here after proof.** Bento grids, media mounts, demo surfaces, page frames, section intros, CTA bands, proof slots, benefits grids, generic shells, and homepage/use-case sections belong in `@nadicodeai/ui` when a second concrete consumer, a plan-approved shared component, or a named validation slice proves the package boundary. Website, portal, and sibling Nadia routes should pass data and media children into existing compositions instead of rebuilding layout locally.
 - **Brand renderers live here for React consumers.** `BrandMark` is the logo mark, and `BrandWordmark` is the text-only wordmark. A full lockup is exactly one `BrandMark` followed by one `BrandWordmark`; compact mark-only usage uses `BrandMark` alone. These adapters are the only place React code imports the raw `@nadicodeai/design-system/assets/*` logo SVG exports. Website, portal, and sibling routes use these adapters instead of importing logo assets directly, drawing brand SVG inline, masking/recoloring assets, or embedding the mark inside the wordmark.
@@ -94,6 +94,15 @@ Use public component subpaths for product UI:
 - `@nadicodeai/ui/components/agent-tool-approval`
 - `@nadicodeai/ui/components/artifact-panel`
 - `@nadicodeai/ui/components/automation-section`
+- `@nadicodeai/ui/components/chart-breakdown-table`
+- `@nadicodeai/ui/components/chart-bullet-bar`
+- `@nadicodeai/ui/components/chart-date-range`
+- `@nadicodeai/ui/components/chart-date-range-control`
+- `@nadicodeai/ui/components/chart-delta`
+- `@nadicodeai/ui/components/chart-entity-colors`
+- `@nadicodeai/ui/components/chart-kpi-stat`
+- `@nadicodeai/ui/components/chart-sparkline`
+- `@nadicodeai/ui/components/chart-time-series`
 - `@nadicodeai/ui/components/dashboard-shell`
 - `@nadicodeai/ui/components/desktop-shell`
 - `@nadicodeai/ui/components/feedback-state`

package/README.md

@@ -114,7 +114,15 @@ runtime adapters, analytics, and product-specific copy.
 Generic product widgets that shadcn already ships as first-party registry
 source, such as data tables, command palettes, and chart cards, are app-owned
 shadcn block/example adaptations. Do not add a second package abstraction over
-those registry items.
+those registry items. The console chart kit subpaths (`chart-*`) are the
+plan-approved exception (issue #166, ADR 0010): they mechanize the
+design-system dataviz grammar on the Recharts chart foundation, while chart
+cards — the app screens that arrange those widgets — stay app-owned. Every
+data-shaped chart names a data alternative (a visually hidden `<table>` twin for
+the time-series charts, a real `<table>` for `BreakdownTable`, an sr-only value
+list for a standalone `Sparkline`); `BulletBar` and `KpiStat` carry their data
+fully in `aria-valuetext`/visible text and so have no separate table twin by
+design.
 
 Current product subpaths:
 
@@ -125,6 +133,15 @@ Current product subpaths:
 - `@nadicodeai/ui/components/agent-tool-approval`
 - `@nadicodeai/ui/components/artifact-panel`
 - `@nadicodeai/ui/components/automation-section`
+- `@nadicodeai/ui/components/chart-breakdown-table`
+- `@nadicodeai/ui/components/chart-bullet-bar`
+- `@nadicodeai/ui/components/chart-date-range`
+- `@nadicodeai/ui/components/chart-date-range-control`
+- `@nadicodeai/ui/components/chart-delta`
+- `@nadicodeai/ui/components/chart-entity-colors`
+- `@nadicodeai/ui/components/chart-kpi-stat`
+- `@nadicodeai/ui/components/chart-sparkline`
+- `@nadicodeai/ui/components/chart-time-series`
 - `@nadicodeai/ui/components/dashboard-shell`
 - `@nadicodeai/ui/components/desktop-shell`
 - `@nadicodeai/ui/components/feedback-state`

package/dist/components/accordion.js

@@ -9,7 +9,7 @@ function AccordionItem({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("not-last:border-b", className), ...props }));
 }
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring 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", className), ...props, children: [children, _jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), _jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("group/accordion-trigger relative flex min-h-touch-target flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-focus focus-visible:ring-ring focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, _jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), _jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
 }
 function AccordionContent({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: _jsx("div", { className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 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", className), children: children }) }));

package/dist/components/alert-dialog.js

@@ -13,16 +13,16 @@ function AlertDialogPortal({ ...props }) {
     return (_jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props }));
 }
 function AlertDialogOverlay({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-foreground/50 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+    return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
 }
 function AlertDialogContent({ className, size = "default", ...props }) {
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props })] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-2xl border border-border bg-popover p-nadicode-lg text-popover-foreground shadow-dialog duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
 }
 function AlertDialogFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("-mx-nadicode-lg -mb-nadicode-lg flex flex-col-reverse gap-2 p-nadicode-md group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
 }
 function AlertDialogMedia({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className), ...props }));
@@ -33,8 +33,8 @@ function AlertDialogTitle({ className, ...props }) {
 function AlertDialogDescription({ className, ...props }) {
     return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
 }
-// Deviates from stock base-nova (bare Button): Action stays a Close so it
-// auto-closes on click, preserving the contract portal consumers rely on.
+// An action is also a Base UI Close so the standard alert-dialog contract
+// dismisses after confirmation while preserving the Button API.
 function AlertDialogAction({ className, variant = "default", size = "default", ...props }) {
     return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-action", className: cn(className), render: _jsx(Button, { variant: variant, size: size }), ...props }));
 }

package/dist/components/alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
-const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-md border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-card text-card-foreground",

package/dist/components/badge.js

@@ -2,12 +2,12 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
-const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-focus focus-visible:ring-ring has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-focus aria-invalid:ring-destructive [&>svg]:pointer-events-none [&>svg]:size-3!", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 [a]:hover:bg-destructive/20",
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary-hover",
+            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-accent",
+            destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20",
             outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
             ghost: "hover:bg-muted hover:text-muted-foreground",
             link: "text-primary underline-offset-4 hover:underline",

package/dist/components/button-group.js

@@ -4,11 +4,11 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
 import { Separator } from "./separator.js";
-const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     variants: {
         orientation: {
-            horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
-            vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+            horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+            vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
         },
     },
     defaultVariants: {
@@ -22,7 +22,7 @@ function ButtonGroupText({ className, render, ...props }) {
     return useRender({
         defaultTagName: "div",
         props: mergeProps({
-            className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+            className: cn("flex items-center gap-2 rounded-md border bg-muted px-control-padding-inline text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
         }, props),
         render,
         state: {

package/dist/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EAmCnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EAoCnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/button.js

@@ -2,24 +2,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex min-h-touch-target min-w-touch-target shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-focus focus-visible:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-focus aria-invalid:ring-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/80",
-            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            default: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+            outline: "border-input bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-accent aria-expanded:bg-accent aria-expanded:text-accent-foreground",
             ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20",
             link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            icon: "size-8",
-            "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+            default: "h-control-height gap-1.5 px-control-padding-inline has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 px-control-padding-inline text-[0.8rem] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 gap-1.5 px-control-padding-inline has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            icon: "size-control-height",
+            "icon-xs": "size-6 in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7 in-data-[slot=button-group]:rounded-md",
             "icon-lg": "size-9",
         },
     },

package/dist/components/calendar.js

@@ -7,7 +7,7 @@ import { Button, buttonVariants } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:var(--spacing-touch-target)] [@media(hover:hover)_and_(pointer:fine)]:[--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
             formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
             ...formatters,
         }, classNames: {
@@ -71,6 +71,6 @@ function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
     return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-focus group-data-[focused=true]/day:ring-ring data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
 }
 export { Calendar, CalendarDayButton };

package/dist/components/card.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 function Card({ className, size = "default", ...props }) {
-    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-md border border-border bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md", className), ...props }));
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-md border border-border bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-md px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
 }
 function CardTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-title", className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-title", className: cn("text-base font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
 }
 function CardDescription({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
@@ -19,6 +19,6 @@ function CardContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-md border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center p-(--card-spacing)", className), ...props }));
 }
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/chart-breakdown-table.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Table } from "./table";
+import { type EntityColorMap } from "./chart-entity-colors";
+/**
+ * chart-breakdown-table — entity breakdown with proportion bars for the
+ * console chart kit (issue #166; DESIGN.md "Entity-color assignment",
+ * proportion-bar carve-out per ADR 0010 D1).
+ *
+ * Real `<table>` semantics: each entity row reads name + value + proportion
+ * bar + share of total, with the entity-color dot resolved from the shared
+ * page-context assignment map. `topN` folds the tail into a single
+ * "everything else" rollup row on the neutral register — never an extra hue.
+ */
+type BreakdownEntity = {
+    /** Stable entity id — the key the entity-color map assigns by. */
+    id: string;
+    label: React.ReactNode;
+    value: number;
+};
+declare function BreakdownTable({ entities, entityColorMap, label, topN, valueFormatter, columnLabels, otherLabel, className, ...props }: Omit<React.ComponentProps<typeof Table>, "children"> & {
+    entities: readonly BreakdownEntity[];
+    /** The shared page-context entity-color assignment map. */
+    entityColorMap: EntityColorMap;
+    /** REQUIRED accessible name, rendered as a visually hidden caption. */
+    label: string;
+    /** Keep the top N entities by value; the rest fold into one rollup row. */
+    topN?: number;
+    valueFormatter?: (value: number) => string;
+    columnLabels?: {
+        entity?: string;
+        value?: string;
+        share?: string;
+    };
+    /** Label for the neutral rollup row. */
+    otherLabel?: React.ReactNode;
+}): React.JSX.Element;
+export { BreakdownTable };
+export type { BreakdownEntity };
+//# sourceMappingURL=chart-breakdown-table.d.ts.map

package/dist/components/chart-breakdown-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-breakdown-table.d.ts","sourceRoot":"","sources":["../../src/components/chart-breakdown-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,EAON,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAA;AAEzC;;;;;;;;;GASG;AAEH,KAAK,eAAe,GAAG;IACrB,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAoED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,cAAc,EACd,KAAK,EACL,IAAI,EACJ,cAA8B,EAC9B,YAAY,EACZ,UAA8B,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAA;IACpC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,YAAY,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,wCAAwC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,qBAiDA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA;AACzB,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/chart-breakdown-table.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "./table.js";
+import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
+function percentOf(value, total) {
+    return total > 0 ? (value / total) * 100 : 0;
+}
+function formatShare(share) {
+    return `${share.toFixed(1)}%`;
+}
+function defaultFormat(value) {
+    return value.toLocaleString("en-US");
+}
+function BreakdownRow({ label, value, share, color, valueFormatter, ...props }) {
+    return (_jsxs(TableRow, { ...props, children: [_jsx(TableCell, { className: "font-medium", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { "data-slot": "breakdown-table-dot", "aria-hidden": "true", className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: color } }), label] }) }), _jsx(TableCell, { className: "text-right font-mono tabular-nums", children: valueFormatter(value) }), _jsx(TableCell, { children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { "data-slot": "breakdown-table-bar", "aria-hidden": "true", className: "h-1.5 flex-1 overflow-hidden rounded-[2px] bg-muted", children: _jsx("span", { className: "block h-full rounded-r-[2px]", style: {
+                                    width: `${Number(share.toFixed(3))}%`,
+                                    backgroundColor: color,
+                                } }) }), _jsx("span", { className: "w-12 text-right font-mono text-xs text-muted-foreground tabular-nums", children: formatShare(share) })] }) })] }));
+}
+function BreakdownTable({ entities, entityColorMap, label, topN, valueFormatter = defaultFormat, columnLabels, otherLabel = "Everything else", className, ...props }) {
+    const total = entities.reduce((sum, entity) => sum + entity.value, 0);
+    const sorted = [...entities].sort((a, b) => b.value - a.value);
+    const visible = topN !== undefined && topN < sorted.length ? sorted.slice(0, topN) : sorted;
+    const foldedValue = sorted
+        .slice(visible.length)
+        .reduce((sum, entity) => sum + entity.value, 0);
+    return (_jsxs(Table, { "data-slot": "breakdown-table", className: cn("text-sm", className), ...props, children: [_jsx(TableCaption, { className: "sr-only", children: label }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: columnLabels?.entity ?? "Entity" }), _jsx(TableHead, { className: "text-right", children: columnLabels?.value ?? "Value" }), _jsx(TableHead, { children: columnLabels?.share ?? "Share of total" })] }) }), _jsxs(TableBody, { children: [visible.map((entity) => (_jsx(BreakdownRow, { label: entity.label, value: entity.value, share: percentOf(entity.value, total), color: entityColor(entityColorMap, entity.id), valueFormatter: valueFormatter }, entity.id))), visible.length < sorted.length ? (_jsx(BreakdownRow, { "data-slot": "breakdown-table-other", label: otherLabel, value: foldedValue, share: percentOf(foldedValue, total), color: CHART_ENTITY_OTHER_COLOR, valueFormatter: valueFormatter })) : null] })] }));
+}
+export { BreakdownTable };

package/dist/components/chart-bullet-bar.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+/**
+ * chart-bullet-bar — the cap / included-usage meter for the console chart kit
+ * (issue #166; DESIGN.md "Meter and bullet grammar").
+ *
+ * The bar carries a positional threshold tick at the product-configured
+ * warning fraction (`thresholdFraction` is a REQUIRED consumer input, never a
+ * constant of this component — 0.8 is the common product default) and a cap
+ * tick at 100%. Overflow renders as a distinct segment continuing past the
+ * cap tick, never clamped away. Severity state tokens reinforce position,
+ * never act as the sole signal. The current value reads at the bar tip.
+ *
+ * Accessibility: `role="meter"` with a REQUIRED accessible name (`label`);
+ * `aria-valuenow` clamps to the meter maximum while `aria-valuetext` conveys
+ * the true value including overflow.
+ */
+type BulletBarSeverity = "ok" | "warn" | "over";
+declare function BulletBar({ value, max, thresholdFraction, label, valueFormatter, valueText, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    value: number;
+    /** The cap (included usage / limit) the meter measures against. */
+    max: number;
+    /**
+     * REQUIRED product-configured warning fraction of the cap (0–1) for the
+     * positional threshold tick. 0.8 is the common product default, but the
+     * fraction is a consumer input, never a constant of this contract.
+     */
+    thresholdFraction: number;
+    /** REQUIRED accessible name for the meter. */
+    label: string;
+    valueFormatter?: (value: number) => string;
+    /** Optional override for the generated `aria-valuetext`. */
+    valueText?: string;
+}): React.JSX.Element;
+export { BulletBar };
+export type { BulletBarSeverity };
+//# sourceMappingURL=chart-bullet-bar.d.ts.map

package/dist/components/chart-bullet-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bullet-bar.d.ts","sourceRoot":"","sources":["../../src/components/chart-bullet-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;GAcG;AAEH,KAAK,iBAAiB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;AAgB/C,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,GAAG,EACH,iBAAiB,EACjB,KAAK,EACL,cAA8B,EAC9B,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAA;IACzB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,qBAsFA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/chart-bullet-bar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const BULLET_BAR_VALUE_TONE = {
+    ok: "text-foreground",
+    warn: "text-(--nc-state-review)",
+    over: "text-(--nc-state-blocked)",
+};
+function percent(fraction) {
+    return `${Number((fraction * 100).toFixed(3))}%`;
+}
+function defaultFormat(value) {
+    return value.toLocaleString("en-US");
+}
+function BulletBar({ value, max, thresholdFraction, label, valueFormatter = defaultFormat, valueText, className, ...props }) {
+    const overflow = Math.max(value - max, 0);
+    const total = Math.max(value, max);
+    const fillFraction = total > 0 ? Math.min(value, max) / total : 0;
+    const overflowFraction = total > 0 ? overflow / total : 0;
+    const capFraction = total > 0 ? max / total : 1;
+    const thresholdTickFraction = capFraction * thresholdFraction;
+    const tipFraction = fillFraction + overflowFraction;
+    const severity = overflow > 0 ? "over" : value >= thresholdFraction * max ? "warn" : "ok";
+    const meterValueText = valueText ??
+        `${valueFormatter(value)} of ${valueFormatter(max)}${overflow > 0 ? ` (${valueFormatter(overflow)} over the cap)` : ""}`;
+    return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, className: cn("flex flex-col gap-1", className), ...props, children: [_jsxs("div", { role: "meter", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": Math.min(value, max), "aria-valuetext": meterValueText, className: "relative h-3 w-full", children: [_jsx("div", { "data-slot": "bullet-bar-track", className: "absolute inset-y-0 rounded-r-[4px] bg-(--nc-chart-seq-1)", style: { left: 0, width: percent(capFraction) } }), _jsx("div", { "data-slot": "bullet-bar-fill", className: cn("absolute inset-y-0 bg-(--nc-chart-seq-3)", overflow === 0 && "rounded-r-[4px]"), style: { left: 0, width: percent(fillFraction) } }), overflow > 0 ? (_jsx("div", { "data-slot": "bullet-bar-overflow", className: "absolute inset-y-0 rounded-r-[4px] bg-(--nc-state-blocked)", style: {
+                            left: percent(fillFraction),
+                            width: percent(overflowFraction),
+                        } })) : null, _jsx("div", { "data-slot": "bullet-bar-threshold-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(thresholdTickFraction) } }), _jsx("div", { "data-slot": "bullet-bar-cap-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(capFraction) } })] }), _jsx("div", { className: "relative h-4 w-full text-xs", "aria-hidden": "true", children: _jsx("span", { "data-slot": "bullet-bar-value", className: cn("absolute font-mono whitespace-nowrap tabular-nums", tipFraction > 0.6 && "-translate-x-full", BULLET_BAR_VALUE_TONE[severity]), style: { left: percent(tipFraction) }, children: valueFormatter(value) }) })] }));
+}
+export { BulletBar };

package/dist/components/chart-date-range-control.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type DateRangePreset, type DateRangeValue } from "./chart-date-range";
+declare function DateRangeControl({ value, onChange, label, presetLabels, customLabel, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    /** Accessible name for the control group. */
+    label?: string;
+    presetLabels?: Partial<Record<DateRangePreset, string>>;
+    customLabel?: string;
+}): React.JSX.Element;
+export { DateRangeControl };
+//# sourceMappingURL=chart-date-range-control.d.ts.map

package/dist/components/chart-date-range-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-date-range-control.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAA;AAqBtC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,YAAY,EACZ,WAAsB,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;IACzC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAA;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,qBAmFA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/chart-date-range-control.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "./popover.js";
+import { DATE_RANGE_PRESETS, formatIsoDay, parseIsoDay, } from "./chart-date-range.js";
+/**
+ * chart-date-range-control — the console date-range picker for the chart kit
+ * (issue #166): relative presets (7d / 14d / 30d / this-cycle) plus a custom
+ * calendar range.
+ *
+ * Fully controlled: the consumer owns the value and typically round-trips it
+ * through URL state with `encodeDateRange` / `decodeDateRange` from
+ * `chart-date-range` (kept in a separate server-safe module because the
+ * package owns no routing). Preset buttons expose their pressed state via
+ * `aria-pressed`.
+ */
+const DEFAULT_PRESET_LABELS = {
+    "7d": "7d",
+    "14d": "14d",
+    "30d": "30d",
+    cycle: "This cycle",
+};
+function DateRangeControl({ value, onChange, label = "Date range", presetLabels, customLabel = "Custom", className, ...props }) {
+    const [open, setOpen] = React.useState(false);
+    const [pending, setPending] = React.useState(undefined);
+    const isCustom = value.kind === "custom";
+    const selected = pending ??
+        (isCustom
+            ? { from: parseIsoDay(value.from), to: parseIsoDay(value.to) }
+            : undefined);
+    function handleOpenChange(nextOpen) {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            setPending(undefined);
+        }
+    }
+    function handleSelect(range) {
+        if (range?.from && range?.to) {
+            setPending(undefined);
+            setOpen(false);
+            onChange({
+                kind: "custom",
+                from: formatIsoDay(range.from),
+                to: formatIsoDay(range.to),
+            });
+            return;
+        }
+        setPending(range);
+    }
+    return (_jsxs("div", { "data-slot": "date-range-control", role: "group", "aria-label": label, className: cn("flex flex-wrap items-center gap-1", className), ...props, children: [DATE_RANGE_PRESETS.map((preset) => {
+                const active = value.kind === "preset" && value.preset === preset;
+                return (_jsx(Button, { size: "sm", variant: active ? "secondary" : "ghost", "aria-pressed": active, onClick: () => onChange({ kind: "preset", preset }), children: presetLabels?.[preset] ?? DEFAULT_PRESET_LABELS[preset] }, preset));
+            }), _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { size: "sm", variant: isCustom ? "secondary" : "ghost", "aria-pressed": isCustom, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), isCustom ? `${value.from} – ${value.to}` : customLabel] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto p-0", children: _jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: selected?.from, selected: selected, onSelect: handleSelect }) })] })] }));
+}
+export { DateRangeControl };

package/dist/components/chart-date-range.d.ts

@@ -0,0 +1,38 @@
+/**
+ * chart-date-range — the date-range value model and URL-state codec for the
+ * console chart kit (issue #166).
+ *
+ * This module is intentionally server-safe (no "use client" directive): the
+ * package owns no routing, so consumers wire `encodeDateRange` /
+ * `decodeDateRange` to their own searchParams — often in a Server Component,
+ * where importing a pure function from a client module would break. The
+ * interactive picker lives in `chart-date-range-control`.
+ */
+declare const DATE_RANGE_PRESETS: readonly ["7d", "14d", "30d", "cycle"];
+type DateRangePreset = (typeof DATE_RANGE_PRESETS)[number];
+type DateRangeValue = {
+    kind: "preset";
+    preset: DateRangePreset;
+} | {
+    kind: "custom";
+    from: string;
+    to: string;
+};
+/**
+ * Encodes a date-range value for URL state: a preset encodes as its token
+ * ("7d", "cycle", …) and a custom range as "yyyy-mm-dd..yyyy-mm-dd".
+ */
+declare function encodeDateRange(value: DateRangeValue): string;
+/**
+ * Decodes a URL-state string back into a date-range value. Returns null for
+ * anything malformed (unknown preset, bad date shape, inverted range) so
+ * consumers fall back to their own default.
+ */
+declare function decodeDateRange(raw: string | null | undefined): DateRangeValue | null;
+/** Parses a "yyyy-mm-dd" day as a LOCAL date (no timezone shifting). */
+declare function parseIsoDay(iso: string): Date;
+/** Formats a local date as "yyyy-mm-dd". */
+declare function formatIsoDay(date: Date): string;
+export { DATE_RANGE_PRESETS, decodeDateRange, encodeDateRange, formatIsoDay, parseIsoDay, };
+export type { DateRangePreset, DateRangeValue };
+//# sourceMappingURL=chart-date-range.d.ts.map

package/dist/components/chart-date-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-date-range.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,QAAA,MAAM,kBAAkB,wCAAyC,CAAA;AAEjE,KAAK,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1D,KAAK,cAAc,GACf;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,eAAe,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAKhD;;;GAGG;AACH,iBAAS,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAItD;AAED;;;;GAIG;AACH,iBAAS,eAAe,CACtB,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC7B,cAAc,GAAG,IAAI,CAwBvB;AAED,wEAAwE;AACxE,iBAAS,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAGtC;AAED,4CAA4C;AAC5C,iBAAS,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAKxC;AAMD,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,YAAY,EACZ,WAAW,GACZ,CAAA;AACD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA"}