@nadicodeai/ui 7.1.3 → 8.0.0

package/dist/components/progress.d.ts

@@ -1,8 +1,24 @@
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
-declare function Progress({ className, children, value, min, max, ...props }: ProgressPrimitive.Root.Props): import("react").JSX.Element;
+import { type VariantProps } from "class-variance-authority";
+/**
+ * The measured bar. Stock shadcn `progress` plus one variant: a product-owned
+ * `tone`, because the meters this replaces (usage against an included
+ * allowance) have to say whether a full bar is fine or a problem. Tone is a
+ * consumer decision, never derived from the measurement. A value past `max`
+ * fills the track and takes the over-cap paint, which is the bar saying the
+ * allowance is spent — not a second segment.
+ */
+declare const progressIndicatorVariants: (props?: ({
+    tone?: "default" | "warning" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ProgressTone = NonNullable<VariantProps<typeof progressIndicatorVariants>["tone"]>;
+declare function Progress({ className, children, value, min, max, tone, ...props }: ProgressPrimitive.Root.Props & {
+    tone?: ProgressTone;
+}): import("react").JSX.Element;
 declare function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props): import("react").JSX.Element;
 declare function ProgressIndicator({ className, style, ...props }: ProgressPrimitive.Indicator.Props): import("react").JSX.Element;
 declare function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props): import("react").JSX.Element;
 declare function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props): import("react").JSX.Element;
-export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue };
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, progressIndicatorVariants, };
+export type { ProgressTone };
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAOxE,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,+BAuB9B;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAW5E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BAwB3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE;;;;;;;GAOG;AAEH,QAAA,MAAM,yBAAyB;;8EAc9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAYxF,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,YAAY,CAAA;CAAE,+BAwBxD;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAW5E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BA6B3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/progress.js

@@ -1,29 +1,59 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { cva } from "class-variance-authority";
 import { createContext, useContext } from "react";
 import { cn } from "../lib/utils.js";
-const ProgressMotionContext = createContext(0);
-function Progress({ className, children, value, min = 0, max = 100, ...props }) {
-    const progressScale = typeof value === "number" && Number.isFinite(value) && max > min
-        ? Math.min(1, Math.max(0, (value - min) / (max - min)))
-        : 0;
-    return (_jsx(ProgressPrimitive.Root, { value: value, min: min, max: max, "data-slot": "progress", className: cn("flex flex-wrap gap-3", className), ...props, children: _jsxs(ProgressMotionContext.Provider, { value: progressScale, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }) }));
+/**
+ * The measured bar. Stock shadcn `progress` plus one variant: a product-owned
+ * `tone`, because the meters this replaces (usage against an included
+ * allowance) have to say whether a full bar is fine or a problem. Tone is a
+ * consumer decision, never derived from the measurement. A value past `max`
+ * fills the track and takes the over-cap paint, which is the bar saying the
+ * allowance is spent — not a second segment.
+ */
+const progressIndicatorVariants = cva("h-full origin-left scale-x-[var(--progress-scale)] transition-transform duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none rtl:origin-right", {
+    variants: {
+        tone: {
+            default: "bg-primary",
+            warning: "bg-(--nc-state-review)",
+            critical: "bg-(--nc-state-blocked)",
+        },
+    },
+    defaultVariants: {
+        tone: "default",
+    },
+});
+const OVER_CAP_CLASS = "bg-(--nc-error-deep)";
+const ProgressStateContext = createContext({
+    scale: 0,
+    tone: "default",
+    overCap: false,
+});
+function Progress({ className, children, value, min = 0, max = 100, tone = "default", ...props }) {
+    const measured = typeof value === "number" && Number.isFinite(value);
+    const scale = measured && max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0;
+    const overCap = measured && value > max;
+    return (_jsx(ProgressPrimitive.Root, { value: value, min: min, max: max, "data-slot": "progress", "data-tone": tone, "data-over-cap": overCap || undefined, className: cn("flex flex-wrap gap-3", className), ...props, children: _jsxs(ProgressStateContext.Provider, { value: { scale, tone, overCap }, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }) }));
 }
 function ProgressTrack({ className, ...props }) {
     return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className), "data-slot": "progress-track", ...props }));
 }
 function ProgressIndicator({ className, style, ...props }) {
-    const progressScale = useContext(ProgressMotionContext);
+    const { scale, tone, overCap } = useContext(ProgressStateContext);
     const indicatorStyle = (state) => {
         const resolvedStyle = typeof style === "function" ? style(state) : style;
         return {
             width: "100%",
-            "--progress-scale": progressScale,
+            "--progress-scale": scale,
             ...resolvedStyle,
         };
     };
-    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn("h-full origin-left scale-x-[var(--progress-scale)] bg-primary transition-transform duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none rtl:origin-right", className), style: indicatorStyle, ...props }));
+    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", "data-over-cap": overCap || undefined, className: cn(progressIndicatorVariants({ tone }), 
+        // After the variant, so the merge keeps this one paint: an allowance
+        // spent reads the same whatever tone the product chose for approaching
+        // it.
+        overCap && OVER_CAP_CLASS, className), style: indicatorStyle, ...props }));
 }
 function ProgressLabel({ className, ...props }) {
     return (_jsx(ProgressPrimitive.Label, { className: cn("text-sm font-medium", className), "data-slot": "progress-label", ...props }));
@@ -31,4 +61,4 @@ function ProgressLabel({ className, ...props }) {
 function ProgressValue({ className, ...props }) {
     return (_jsx(ProgressPrimitive.Value, { className: cn("ml-auto text-sm text-muted-foreground tabular-nums", className), "data-slot": "progress-value", ...props }));
 }
-export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue };
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, progressIndicatorVariants, };

package/dist/components/select.js

@@ -15,13 +15,13 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
     return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex h-control-height min-h-touch-target w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-background py-2 pr-2 pl-control-padding-inline text-sm whitespace-nowrap transition-colors select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-placeholder:text-placeholder data-[size=sm]:h-7 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-auto max-w-(--available-width) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-md border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm whitespace-nowrap outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));

package/dist/components/sheet.js

@@ -21,7 +21,7 @@ function SheetOverlay({ className, ...props }) {
     return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
 }
 function SheetContent({ className, children, side = "right", showCloseButton = true, closeLabel = "Close", ...props }) {
-    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex max-h-[calc(100%-var(--nc-lg))] flex-col gap-nadicode-md rounded-3xl border-0 bg-popover bg-clip-padding text-sm text-popover-foreground nc-elevation-modal transition-[opacity,translate] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:opacity-100 data-[side=bottom]:inset-x-nadicode-sm data-[side=bottom]:bottom-nadicode-sm data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-nadicode-md data-[side=bottom]:data-starting-style:translate-y-nadicode-md motion-reduce:data-[side=bottom]:data-ending-style:translate-none motion-reduce:data-[side=bottom]:data-starting-style:translate-none data-[side=left]:inset-y-nadicode-sm data-[side=left]:left-nadicode-sm data-[side=left]:w-3/4 data-[side=left]:data-ending-style:-translate-x-nadicode-md data-[side=left]:data-starting-style:-translate-x-nadicode-md motion-reduce:data-[side=left]:data-ending-style:translate-none motion-reduce:data-[side=left]:data-starting-style:translate-none data-[side=right]:inset-y-nadicode-sm data-[side=right]:right-nadicode-sm data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-nadicode-md data-[side=right]:data-starting-style:translate-x-nadicode-md motion-reduce:data-[side=right]:data-ending-style:translate-none motion-reduce:data-[side=right]:data-starting-style:translate-none data-[side=top]:inset-x-nadicode-sm data-[side=top]:top-nadicode-sm data-[side=top]:h-auto data-[side=top]:data-ending-style:-translate-y-nadicode-md data-[side=top]:data-starting-style:-translate-y-nadicode-md motion-reduce:data-[side=top]:data-ending-style:translate-none motion-reduce:data-[side=top]:data-starting-style:translate-none data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex max-h-[calc(100%-var(--nc-lg))] flex-col gap-nadicode-md rounded-md border-0 bg-popover bg-clip-padding text-sm text-popover-foreground nc-elevation-modal transition-[opacity,translate] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:opacity-100 data-[side=bottom]:inset-x-nadicode-sm data-[side=bottom]:bottom-nadicode-sm data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-nadicode-md data-[side=bottom]:data-starting-style:translate-y-nadicode-md motion-reduce:data-[side=bottom]:data-ending-style:translate-none motion-reduce:data-[side=bottom]:data-starting-style:translate-none data-[side=left]:inset-y-nadicode-sm data-[side=left]:left-nadicode-sm data-[side=left]:w-3/4 data-[side=left]:data-ending-style:-translate-x-nadicode-md data-[side=left]:data-starting-style:-translate-x-nadicode-md motion-reduce:data-[side=left]:data-ending-style:translate-none motion-reduce:data-[side=left]:data-starting-style:translate-none data-[side=right]:inset-y-nadicode-sm data-[side=right]:right-nadicode-sm data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-nadicode-md data-[side=right]:data-starting-style:translate-x-nadicode-md motion-reduce:data-[side=right]:data-ending-style:translate-none motion-reduce:data-[side=right]:data-starting-style:translate-none data-[side=top]:inset-x-nadicode-sm data-[side=top]:top-nadicode-sm data-[side=top]:h-auto data-[side=top]:data-ending-style:-translate-y-nadicode-md data-[side=top]:data-starting-style:-translate-y-nadicode-md motion-reduce:data-[side=top]:data-ending-style:translate-none motion-reduce:data-[side=top]:data-starting-style:translate-none data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
 }
 function SheetHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-0.5 p-nadicode-lg", className), ...props }));

package/dist/components/sidebar.js

@@ -94,7 +94,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
                 // Adjust the padding for floating and inset variants.
                 variant === "floating" || variant === "inset"
                     ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+var(--nc-rounded-xs))]"
-                    : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-3xl group-data-[variant=floating]:border-0 group-data-[variant=floating]:bg-popover group-data-[variant=floating]:nc-elevation-floating", children: children }) })] }));
+                    : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-md group-data-[variant=floating]:border-0 group-data-[variant=floating]:bg-popover group-data-[variant=floating]:nc-elevation-floating", children: children }) })] }));
 }
 function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar();

package/dist/components/toggle.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
-const toggleVariants = cva("group/toggle inline-flex min-h-touch-target min-w-touch-target items-center justify-center gap-1 rounded-md border border-transparent text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-muted data-pressed:bg-muted [@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", {
+const toggleVariants = cva("group/toggle inline-flex min-h-touch-target min-w-touch-target items-center justify-center gap-1 rounded-md border border-transparent text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-accent aria-pressed:font-semibold aria-pressed:text-accent-foreground data-pressed:bg-accent data-pressed:font-semibold data-pressed:text-accent-foreground [@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-transparent",

package/dist/components/trend-badge.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+/**
+ * trend-badge — a change as the dashboard-01 section card shows it: shadcn's
+ * outline `Badge` holding a lucide trend icon and the formatted change. `KpiCard`
+ * puts it top right; a Trending list row and a chart footer use the same one, so
+ * the reading exists once.
+ */
+type TrendDirection = "up" | "down" | "flat";
+type TrendTone = "positive" | "negative" | "neutral";
+/** Direction crossed with whether up is good here. A flat or neutral change takes no tone. */
+declare function trendTone(direction: TrendDirection, upIsGood?: boolean, neutral?: boolean): TrendTone;
+declare function TrendBadge({ value, direction, tone, directionLabel, }: {
+    /** The formatted change, e.g. "+12.5%". */
+    value: React.ReactNode;
+    direction: TrendDirection;
+    tone: TrendTone;
+    /** The direction in the reader's language, because an arrow alone is not a reading. */
+    directionLabel?: string;
+}): React.JSX.Element;
+export { TrendBadge, trendTone };
+export type { TrendDirection, TrendTone };
+//# sourceMappingURL=trend-badge.d.ts.map

package/dist/components/trend-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trend-badge.d.ts","sourceRoot":"","sources":["../../src/components/trend-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC;;;;;GAKG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAqBrD,8FAA8F;AAC9F,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,EAAE,OAAO,UAAQ,GAAG,SAAS,CAGzF;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,cAAc,GACf,EAAE;IACD,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,qBAeA;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjC,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/trend-badge.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Badge } from "./badge.js";
+const TREND_ICONS = {
+    up: TrendingUpIcon,
+    down: TrendingDownIcon,
+    flat: MinusIcon,
+};
+/** The fallback reading for a caller with no dictionary; a localized caller passes `directionLabel`. */
+const TREND_DIRECTION_TEXT = {
+    up: "up",
+    down: "down",
+    flat: "unchanged",
+};
+const TREND_TONE_CLASS = {
+    positive: "text-(--nc-state-complete)",
+    negative: "text-(--nc-state-blocked)",
+    neutral: "text-muted-foreground",
+};
+/** Direction crossed with whether up is good here. A flat or neutral change takes no tone. */
+function trendTone(direction, upIsGood = true, neutral = false) {
+    if (neutral || direction === "flat")
+        return "neutral";
+    return (direction === "up") === upIsGood ? "positive" : "negative";
+}
+function TrendBadge({ value, direction, tone, directionLabel, }) {
+    const Icon = TREND_ICONS[direction];
+    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: cn("tabular-nums", TREND_TONE_CLASS[tone]), children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: directionLabel ?? TREND_DIRECTION_TEXT[direction] }), value] }));
+}
+export { TrendBadge, trendTone };

package/dist/index.d.ts

@@ -3,10 +3,10 @@ export * from "./components/action-band.js";
 export * from "./components/action-menu.js";
 export * from "./components/action-status.js";
 export * from "./components/activity-orb.js";
-export * from "./components/alert.js";
-export * from "./components/alert-dialog.js";
 export * from "./components/agent-card.js";
 export * from "./components/agent-visual.js";
+export * from "./components/alert.js";
+export * from "./components/alert-dialog.js";
 export * from "./components/aspect-ratio.js";
 export * from "./components/automation-section.js";
 export * from "./components/avatar.js";
@@ -21,23 +21,24 @@ export * from "./components/button.js";
 export * from "./components/button-group.js";
 export * from "./components/calendar.js";
 export * from "./components/card.js";
-export * from "./components/collection-scope.js";
 export * from "./components/card-marketing.js";
 export * from "./components/card-row.js";
 export * from "./components/carousel.js";
 export * from "./components/chart.js";
-export * from "./components/chart-breakdown-table.js";
-export * from "./components/chart-bullet-bar.js";
+export * from "./components/chart-area-stacked.js";
+export * from "./components/chart-bar-multiple.js";
+export * from "./components/chart-bar-stacked.js";
+export * from "./components/chart-card.js";
 export * from "./components/chart-date-range.js";
 export * from "./components/chart-date-range-control.js";
-export * from "./components/chart-delta.js";
 export * from "./components/chart-entity-colors.js";
-export * from "./components/chart-kpi-stat.js";
 export * from "./components/chart-sparkline.js";
-export * from "./components/chart-time-series.js";
 export * from "./components/checkbox.js";
 export * from "./components/code-editor-mockup.js";
 export * from "./components/collapsible.js";
+export * from "./components/collection-filters.js";
+export * from "./components/collection-scope.js";
+export * from "./components/collection-toolbar.js";
 export * from "./components/combobox.js";
 export * from "./components/command.js";
 export * from "./components/confirm-dialog.js";
@@ -64,8 +65,8 @@ export * from "./components/file-type-icon.js";
 export * from "./components/footer.js";
 export * from "./components/form.js";
 export * from "./components/forma-avatar.js";
-export * from "./components/glyph-spinner.js";
 export * from "./components/glass-control.js";
+export * from "./components/glyph-spinner.js";
 export * from "./components/handoff-banner.js";
 export * from "./components/hero.js";
 export * from "./components/hero-split.js";
@@ -77,6 +78,7 @@ export * from "./components/installer-shell.js";
 export * from "./components/integration-flow.js";
 export * from "./components/item.js";
 export * from "./components/kbd.js";
+export * from "./components/kpi-card.js";
 export * from "./components/label.js";
 export * from "./components/label-system.js";
 export * from "./components/live-demo.js";
@@ -111,10 +113,8 @@ export * from "./components/section-intro.js";
 export * from "./components/security-grid.js";
 export * from "./components/select.js";
 export * from "./components/separator.js";
-export * from "./components/settings-section.js";
 export * from "./components/settings-facts.js";
-export * from "./components/collection-toolbar.js";
-export * from "./components/collection-filters.js";
+export * from "./components/settings-section.js";
 export * from "./components/sheet.js";
 export * from "./components/shift-band.js";
 export * from "./components/sidebar.js";
@@ -122,9 +122,7 @@ export * from "./components/skeleton.js";
 export * from "./components/slider.js";
 export * from "./components/sonner.js";
 export * from "./components/spinner.js";
-export * from "./components/stat-block.js";
 export * from "./components/statement.js";
-export * from "./components/stats-band.js";
 export * from "./components/status-dot.js";
 export * from "./components/status-row.js";
 export * from "./components/steps.js";
@@ -140,6 +138,7 @@ export * from "./components/toggle.js";
 export * from "./components/toggle-group.js";
 export * from "./components/tool-icon.js";
 export * from "./components/tooltip.js";
+export * from "./components/trend-badge.js";
 export * from "./components/usage-meter.js";
 export * from "./components/use-case-bento.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -3,10 +3,10 @@ export * from "./components/action-band.js";
 export * from "./components/action-menu.js";
 export * from "./components/action-status.js";
 export * from "./components/activity-orb.js";
-export * from "./components/alert.js";
-export * from "./components/alert-dialog.js";
 export * from "./components/agent-card.js";
 export * from "./components/agent-visual.js";
+export * from "./components/alert.js";
+export * from "./components/alert-dialog.js";
 export * from "./components/aspect-ratio.js";
 export * from "./components/automation-section.js";
 export * from "./components/avatar.js";
@@ -21,23 +21,24 @@ export * from "./components/button.js";
 export * from "./components/button-group.js";
 export * from "./components/calendar.js";
 export * from "./components/card.js";
-export * from "./components/collection-scope.js";
 export * from "./components/card-marketing.js";
 export * from "./components/card-row.js";
 export * from "./components/carousel.js";
 export * from "./components/chart.js";
-export * from "./components/chart-breakdown-table.js";
-export * from "./components/chart-bullet-bar.js";
+export * from "./components/chart-area-stacked.js";
+export * from "./components/chart-bar-multiple.js";
+export * from "./components/chart-bar-stacked.js";
+export * from "./components/chart-card.js";
 export * from "./components/chart-date-range.js";
 export * from "./components/chart-date-range-control.js";
-export * from "./components/chart-delta.js";
 export * from "./components/chart-entity-colors.js";
-export * from "./components/chart-kpi-stat.js";
 export * from "./components/chart-sparkline.js";
-export * from "./components/chart-time-series.js";
 export * from "./components/checkbox.js";
 export * from "./components/code-editor-mockup.js";
 export * from "./components/collapsible.js";
+export * from "./components/collection-filters.js";
+export * from "./components/collection-scope.js";
+export * from "./components/collection-toolbar.js";
 export * from "./components/combobox.js";
 export * from "./components/command.js";
 export * from "./components/confirm-dialog.js";
@@ -64,8 +65,8 @@ export * from "./components/file-type-icon.js";
 export * from "./components/footer.js";
 export * from "./components/form.js";
 export * from "./components/forma-avatar.js";
-export * from "./components/glyph-spinner.js";
 export * from "./components/glass-control.js";
+export * from "./components/glyph-spinner.js";
 export * from "./components/handoff-banner.js";
 export * from "./components/hero.js";
 export * from "./components/hero-split.js";
@@ -77,6 +78,7 @@ export * from "./components/installer-shell.js";
 export * from "./components/integration-flow.js";
 export * from "./components/item.js";
 export * from "./components/kbd.js";
+export * from "./components/kpi-card.js";
 export * from "./components/label.js";
 export * from "./components/label-system.js";
 export * from "./components/live-demo.js";
@@ -111,10 +113,8 @@ export * from "./components/section-intro.js";
 export * from "./components/security-grid.js";
 export * from "./components/select.js";
 export * from "./components/separator.js";
-export * from "./components/settings-section.js";
 export * from "./components/settings-facts.js";
-export * from "./components/collection-toolbar.js";
-export * from "./components/collection-filters.js";
+export * from "./components/settings-section.js";
 export * from "./components/sheet.js";
 export * from "./components/shift-band.js";
 export * from "./components/sidebar.js";
@@ -122,9 +122,7 @@ export * from "./components/skeleton.js";
 export * from "./components/slider.js";
 export * from "./components/sonner.js";
 export * from "./components/spinner.js";
-export * from "./components/stat-block.js";
 export * from "./components/statement.js";
-export * from "./components/stats-band.js";
 export * from "./components/status-dot.js";
 export * from "./components/status-row.js";
 export * from "./components/steps.js";
@@ -140,5 +138,6 @@ export * from "./components/toggle.js";
 export * from "./components/toggle-group.js";
 export * from "./components/tool-icon.js";
 export * from "./components/tooltip.js";
+export * from "./components/trend-badge.js";
 export * from "./components/usage-meter.js";
 export * from "./components/use-case-bento.js";

package/docs/component-classification.md

@@ -13,7 +13,7 @@ copy, and behavior.
 | --- | --- | --- |
 | `DataTable`, `DataTableColumnControls`, `DataTableEmptyState`, `DataTableState` | `@shadcn/data-table-demo` or the `DataTable` inside `@shadcn/dashboard-01` | shadcn already ships first-party data-table examples with sorting, selection, visibility, filtering, and pagination patterns. |
 | `CommandPalette`, `ModelPickerCommand`, `SessionPickerCommand` | `@shadcn/command`, `@shadcn/command-demo`, `@shadcn/command-dialog` | shadcn already ships the command primitives and command-dialog example; model/session execution is app behavior. |
-| `ChartCard`, `MetricChart`, `semanticChartColors` | `@shadcn/chart` plus the relevant `@shadcn/chart-*` block/example | shadcn already ships chart primitives and chart-card block examples; metric aggregation and chart choice are app behavior. |
+| `ChartCard`, `MetricChart`, `semanticChartColors` | The package chart kit, owned by [`contract.md`](contract.md) | shadcn already ships the chart primitives and blocks the kit is pulled from; metric aggregation and chart choice are app behavior. |
 
 ## Retained Package Compositions
 

package/docs/contract.md

@@ -99,11 +99,9 @@ parents stay in the selector. Apps bind authorized options and URL state; cleari
 record filters preserves the parent scope. Parent details belong on their detail
 page, not in repeated panels surrounding identical child tables.
 
-`BreakdownTable` owns its responsive comparison layout: identity and value stay
-in the main row; share moves into a labeled detail row when space is tight.
-Its caption names the table. Callers supply data and labels, not column-hiding CSS.
-An entity's optional `mark` prints between its color dot and its label, so a
-ranked model row shows the maker's mark beside the name.
+A ranked breakdown is not a kit component: the Portal renders it through its
+one table owner, `DataTable`, with a `Progress` cell. The kit composes no second
+table (`tests/chart-kpi-ownership.test.ts`).
 
 ### Record action menus
 
@@ -147,7 +145,8 @@ states to the orb.
 - **Package surface is source-backed.** Public components stay flat under `src/components/`. Reviewed registry source under `src/internal/` is implementation, not a package namespace. Do not add top-level exports for recipes, blocks, agent, terminal, or vendor groupings unless a later package API decision adds concrete public source, built files, docs, and tests in the same change.
 - **Agents is the client-only conversation interface.** `@nadicodeai/ui/agents` re-exports the complete `@assistant-ui/react` runtime and primitive API plus the reviewed, branded registry composition held under `src/internal/assistant-ui/`. Its built entry retains `"use client"`. Consumers receive Thread, attachments, Markdown, reasoning, tools, suggestions, providers, runtimes, hooks, and types from that one domain namespace. Agent identity components use their direct component subpaths so server compositions do not import the conversation runtime. The vendor name is not a public NadicodeAI subpath, and the package does not rename, wrap, or rebuild assistant-ui behavior.
 - **Base UI is the active primitive base.** `components.json` must resolve through a Base style, currently `base-nova`, and `npx shadcn@latest info --json` must report `base: "base"`. Do not reintroduce `radix-ui`, `@radix-ui/*`, or `vaul` to package source, dependencies, or app optimizer configuration. Registry-owned shadcn primitives stay aligned with current `shadcn@latest` Base UI output; use Base UI `render` composition instead of Radix `asChild`. `cmdk` is allowed only for the stock shadcn Command component while the current `base-nova` registry declares that dependency; do not use it elsewhere or replace it without a shadcn/compatibility decision and tests.
-- **Charts are shadcn charts.** `chart.tsx` is shadcn's `chart` component over Recharts (`ChartContainer`, `ChartTooltip`, `ChartLegend`, theme-keyed `ChartConfig`), and the chart kit (`chart-time-series`, `chart-breakdown-table`, `chart-sparkline`, `chart-bullet-bar`, `chart-kpi-stat`, `chart-delta`, `chart-date-range-control`, `chart-entity-colors`) is built on it. An app composes these and never imports `recharts` or draws SVG charts of its own; `recharts` is declared by this package alone. A chart the kit lacks is first looked up in the shadcn registry through the CLI or MCP, then added to the kit with NadicodeAI tokens and the chart accessibility contract. What a chart shows is decided by the product; how it is drawn comes from here. `TimeSeriesComposed` is that lookup performed: the registry holds no composed item, so the bars-plus-line composition for a rate over its measures is Recharts' `ComposedChart` through this same foundation, with the second axis existing only for a series that names it.
+- **Charts are stock shadcn charts.** Every chart and KPI here is a registry item, changed as little as possible: `chart.tsx` is shadcn's `chart` over Recharts; `chart-bar-stacked`, `chart-area-stacked`, and `chart-bar-multiple` are the blocks of those names; `chart-sparkline` is `chart-line-linear` stripped of its card, axes, grid and tooltip; `kpi-card` is the `dashboard-01` block's section card; `chart-card` is their shared Card frame. Each pulled file names its registry item on line one. `base-nova` does not publish the chart gallery and the CLI search does not list it, so a chart the kit lacks is pulled from `https://ui.shadcn.com/r/styles/new-york-v4/<name>.json` (`files[0].content`) and added here. What deviates from stock, and why, is listed once in [`DESIGN.md`, "Chart source"](../../design-system/DESIGN.md#chart-source); a change to a pulled chart that is not on that list is drift. There is no hidden table twin, no mark inside a legend, and no second axis. Every chart component renders the whole card — `Card > CardHeader(CardTitle, CardDescription, CardAction) > CardContent(ChartContainer) > CardFooter?` — at a fixed plot height (`h-64`, `h-80` at `size="lg"`), legend below the plot, left-aligned and wrapping. An app composes these, never builds a chart card frame by hand, and never imports `recharts`, which this package alone declares. Which chart a reading question deserves is owned by [`skills/design/product-design/references/charts.md`](../../../skills/design/product-design/references/charts.md).
+
 - **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.
 - **A change to what the package ships bumps the version.** Any change to exported components, `src/index.ts`, package `exports`, `globals.css`, theme behavior, package docs, or design-system token, CSS, or theme output this package consumes bumps both package versions in lockstep before handoff, and `npm pack --dry-run -w @nadicodeai/ui` shows exactly what consumers receive (procedure: `../../../docs/agents/publish.md`).
 
@@ -183,11 +182,10 @@ explicitly and never infers or randomizes one from a free-form role.
 When the product chooses a card presentation, use `AgentCard`; registry cells,
 membership rows, and compact detail headers compose the shared `AgentVisual`
 within the structure their reading task requires. An Agent's presence does not
-by itself choose a card layout. There is no `AgentGlyph`,
-`AgentRow`, `KpiCard`, or product-domain `agent` object prop in the shared
-package.
+by itself choose a card layout. There is no `AgentGlyph`, `AgentRow`, or
+product-domain `agent` object prop in the shared package.
 
-- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, assistant-ui compositions, brand adapters, React adapters, reusable sections, and presentational product components. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, or customer management. Domain registries, command search providers, and chart dashboards bind app data and routes in the app; that binding is not a reason to copy reusable presentation. Portal's DataTable owns its Next.js query and registry protocol once, while consuming the shared UI foundation. Product-independent compositions belong here with a real consumer. The source-backed `chart-*` package surface is the plan-approved exception per issue #166; apps select charts and bind their titles, data, and navigation. Every data-shaped chart exposes an equivalent non-visual data alternative. A component whose complete value is already available in visible text or `aria-valuetext` does not add a redundant table.
+- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, assistant-ui compositions, brand adapters, React adapters, reusable sections, and presentational product components. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, or customer management. Domain registries, command search providers, and chart dashboards bind app data and routes in the app; that binding is not a reason to copy reusable presentation. Portal's DataTable owns its Next.js query and registry protocol once, while consuming the shared UI foundation. Product-independent compositions belong here with a real consumer. The source-backed `chart-*` and `kpi-card` package surface is the plan-approved exception per issue #166; apps select charts and bind their titles, data, and navigation. A chart is named by the card title above it and navigated through Recharts' own accessibility layer; the kit ships no hidden table twin, because a component whose complete value is already available in visible text or `aria-valuetext` does not add a redundant table.
 - **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.
 - **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 pass data and media children into existing compositions instead of rebuilding layout locally.
 - **Brand renderers live here for React consumers.** Logo geometry, asset generation, and usage semantics are owned by [`packages/design-system/DESIGN.md`, "Brand media authority"](../../design-system/DESIGN.md#brand-media-authority). `BrandLockup` supplies the approved horizontal lockup. `BrandMark` serves tight spaces and `BrandWordmark` serves placements where the name must read by itself. All three render the package's public neutral geometry seam with React-scoped SVG ids, dynamic theme paint, and accessible names. Consuming routes use these adapters; they never import raw logo assets, draw brand SVG inline, mask or recolor assets, or create another lockup rule.
@@ -207,16 +205,10 @@ scales the artwork inside it; `size` states that box, and the author slug prints
 as reported.
 
 One component has two readings: with `name`, the row a table cell or ranked
-list reads; without one, the bare mark that stands in a chart legend beside that
-legend's own text. `BreakdownTable` entities and the `chart-time-series` series
-(`TimeSeriesBars`, `TimeSeriesArea`, `TimeSeriesComposed`) take an optional
-`mark` for that second reading, placed beside the entity's or series' name. A
-chart places it on each surface itself: the legend through the explicit `marks`
-path on `ChartLegendContent`, and the tooltip row through the kit's own row
-renderer, because `rule/model-shown-with-logo` names tooltips among the places a
-model appears. A series' mark never travels through `ChartConfig`, whose label
-the legend and the default tooltip item both read, so an identity parked there
-would appear on a surface that never asked for it. No legend is forked. A mark is
+list reads; without one, the bare mark beside text that already names the model.
+The chart kit does not place marks: its legend and tooltip are the stock shadcn
+content, and a chart names a model through the label in its `ChartConfig`. A
+model's row in a table or a ranked list is where `ModelMark` belongs. A mark is
 decoration beside the label that already names it; one standing alone takes
 `label` (`role="img"` with an accessible name) or stays hidden.
 
@@ -232,7 +224,13 @@ app supplies the author slug, the name, and the colors it pairs with them.
 
 The source tree, barrels, and package exports own the current reusable section vocabulary. When a page needs a variation, extend the owning source component with a small typed prop or slot; do not fork the layout in a consumer or document a second component inventory here.
 
-`KpiStatGroup` owns the metric strip, responsive tiles, and link treatment; `KpiStat` owns its value, note, delta, and decorative trend. Apps supply metrics and bind links through `render`. Time-series charts expose `size`; their lightweight layout module also sizes deferred placeholders, so consumers never select internal chart elements.
+`KpiCard` is one measured figure, in the shape of the `dashboard-01` section
+card: label, value, the change as a badge top right, and a footer carrying the
+comparison line and a note, both in the caller's language. There is no grouped or divided variant — a
+row of KPIs is a `CardRow` of `KpiCard`s, each its own card. Apps supply the
+figures and bind links through `render`. Charts expose `size` (`default` or
+`lg`), which selects a fixed plot height, so consumers never select internal
+chart elements.
 
 `CollectionToolbar` owns the collection-control layout: compact filters at the
 leading edge, a flexible search field, and trailing actions. Its slot order is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "7.1.3",
+  "version": "8.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -62,29 +62,29 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@assistant-ui/react": "0.15.18",
-    "@assistant-ui/react-markdown": "0.14.14",
+    "@assistant-ui/react": "0.15.20",
+    "@assistant-ui/react-markdown": "0.14.15",
     "@base-ui/react": "^1.8.0",
-    "@nadicodeai/design-system": "7.1.3",
-    "@paper-design/shaders": "0.0.80",
+    "@nadicodeai/design-system": "8.0.0",
+    "@paper-design/shaders": "0.0.81",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
     "lucide-react": "1.47.0",
-    "motion": "^13.2.0",
+    "motion": "^13.4.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^10.0.1",
-    "react-hook-form": "^7.87.0",
+    "react-hook-form": "^7.88.0",
     "react-resizable-panels": "^4.12.3",
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.8",
-    "tailwind-merge": "^3.0.0",
+    "tailwind-merge": "^3.7.0",
     "thinking-orbs": "0.3.1",
     "tw-animate-css": "^1.4.0",
-    "tw-shimmer": "0.4.12",
+    "tw-shimmer": "0.4.13",
     "zustand": "^5.0.14"
   },
   "peerDependencies": {