@robomous/ui-core 0.1.1 → 0.2.0

package/README.md

@@ -4,9 +4,9 @@
 
 # @robomous/ui-core
 
-The Robomous design system: shadcn Nova primitives under Radix behaviour, the foundation design
-tokens, and the gates that keep them canonical. Extracted from
-[Robomous/VisionSet](https://github.com/Robomous/VisionSet), where it grew up.
+The Robomous design system: twenty-one React components this package owns outright, the design
+tokens they resolve through, and the gates that hold the rules the design system is made of.
+Extracted from [Robomous/VisionSet](https://github.com/Robomous/VisionSet), where it grew up.
 
 ## Install
 
@@ -27,13 +27,21 @@ The stylesheet is the contract: Tailwind v4 reads its `@theme` block, so `bg-pri
 component here and `bg-primary` in a consuming app are the same colour by construction. A
 consumer adds its own extensions in its own stylesheet after importing this one.
 
+## Adding a component
+
+Write it. A component is a file in `src/components/` that wraps Radix or Base UI behaviour,
+spells colour only through the tokens, keeps its own geometry, and is exported by name from
+`src/index.ts`. [DESIGN.md](DESIGN.md) has the checklist and the reasoning behind each item; the
+gates hold the parts of it that a review would otherwise have to catch by eye.
+
 ## The gates
 
 The rules that keep the design system honest are published alongside it:
-`import { ... } from "@robomous/ui-core/gates"` gives a consumer the same pure scan helpers and
-foundation facts this repo's own gate tests run — canonical-plus-additive primitives, one status
-palette with one home, no colour in a class string, brand as identity only. The governance, and
-what each gate holds, is [DESIGN.md](DESIGN.md).
+`import { ... } from "@robomous/ui-core/gates"` gives a consumer the same eight pure scan helpers
+and token facts this repo's own gates run — no colour in a class string, one status palette with
+one home, no rival colour family standing in for it, brand as identity only, and the token names
+read off the shipped stylesheet so a consumer can prove none of its own extensions shadows one.
+The rules themselves, and which gate holds each, are in [DESIGN.md](DESIGN.md).
 
 ## Release
 

package/dist/{primitives → components}/alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 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", {
     variants: {
         variant: {

package/dist/{primitives → components}/badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 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 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
     variants: {
         variant: {

package/dist/{primitives → components}/button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "inline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/{primitives → components}/button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 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 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
@@ -21,6 +21,9 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
             "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",
             "icon-lg": "size-9",
+            // A link button is inline prose, not a boxed control: no height of its
+            // own and no padding, so it sits inside a sentence or a table cell.
+            inline: "h-auto p-0",
         },
     },
     defaultVariants: {

package/dist/{primitives → components}/card.d.ts

@@ -8,4 +8,4 @@ declare function CardDescription({ className, ...props }: React.ComponentProps<"
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/{primitives → components}/card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 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-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--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-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
 }
@@ -21,4 +21,4 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
 }
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/{primitives → components}/combobox.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 import { Button } from "./button.js";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "./input-group.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
 const Combobox = ComboboxPrimitive.Root;
 function ComboboxValue({ ...props }) {
@@ -35,7 +35,7 @@ function ComboboxLabel({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
 }
 function ComboboxCollection({ ...props }) {
-    return (_jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props }));
+    return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
 }
 function ComboboxEmpty({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));

package/dist/{primitives → components}/dialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 import { Button } from "./button.js";
 import { XIcon } from "lucide-react";
 function Dialog({ ...props }) {

package/dist/{primitives → components}/dropdown-menu.js

@@ -1,21 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
 function DropdownMenu({ ...props }) {
     return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({ ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props }));
+    return _jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({ ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
+// A menu sizes to its items, not to its trigger — behind an icon-sized button
+// the trigger width is a 128px ceiling that wraps every longer item; min-w-32
+// survives as the floor it was meant to be. And it leaves on the frame it is
+// dismissed: while an exit animation runs, the dismissable layer stays mounted
+// and swallows the press that should open the next menu.
 function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, align: align, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden 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 (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, align: align, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-auto min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props }) }));
 }
 function DropdownMenuGroup({ ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
     return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
@@ -24,7 +29,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
     return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex 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 focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
 }
 function DropdownMenuRadioGroup({ ...props }) {
-    return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+    return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
 }
 function DropdownMenuRadioItem({ className, children, inset, ...props }) {
     return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex 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 focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));

package/dist/{primitives → components}/field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 import { Label } from "./label.js";
 import { Separator } from "./separator.js";
 function FieldSet({ className, ...props }) {
@@ -51,9 +51,7 @@ function FieldError({ className, children, errors, ...props }) {
         if (!errors?.length) {
             return null;
         }
-        const uniqueErrors = [
-            ...new Map(errors.map((error) => [error?.message, error])).values(),
-        ];
+        const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
         if (uniqueErrors?.length == 1) {
             return uniqueErrors[0]?.message;
         }

package/dist/{primitives → components}/input-group.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";

package/dist/{primitives → components}/input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function Input({ className, type, ...props }) {
     return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }

package/dist/{primitives → components}/label.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Label as LabelPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function Label({ className, ...props }) {
     return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
 }

package/dist/components/progress.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import { cn } from "cn";
+function Progress({ className, value, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: value, className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "size-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+}
+export { Progress };

package/dist/{primitives → components}/select.d.ts

@@ -3,8 +3,10 @@ import { Select as SelectPrimitive } from "radix-ui";
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
 declare function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
-declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+declare function SelectTrigger({ className, size, multiline, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: "sm" | "default";
+    /** Let the closed trigger grow to its value instead of clamping it to one line. */
+    multiline?: boolean;
 }): React.JSX.Element;
 declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
 declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;

package/dist/{primitives → components}/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as SelectPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
@@ -12,11 +12,13 @@ function SelectGroup({ className, ...props }) {
 function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+function SelectTrigger({ className, size = "default", multiline = false, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", multiline &&
+            "data-[size=default]:h-auto min-h-8 *:data-[slot=select-value]:line-clamp-none", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: cn("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: cn("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));

package/dist/{primitives → components}/separator.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
     return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
 }

package/dist/{primitives → components}/sheet.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog as SheetPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 import { Button } from "./button.js";
 import { XIcon } from "lucide-react";
 function Sheet({ ...props }) {

package/dist/{primitives → components}/skeleton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function Skeleton({ className, ...props }) {
     return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-muted", className), ...props }));
 }

package/dist/{primitives → components}/sonner.js

@@ -2,14 +2,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Toaster as Sonner } from "sonner";
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react";
-// SHADCN FRAMEWORK ADAPTER: shadcn's sonner reads next-themes (a Next.js
-// integration). VisionSet is Vite with one theme source, `.dark` on <html>
-// (styles.css `@custom-variant dark`). This hook is the only difference from
-// frontend/ui-core/shadcn/sonner.tsx; drop it if the app ever adopts a
-// provider that shadcn's file can read.
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon, } from "lucide-react";
+// The theme this package runs on has one source: the `dark` class on <html>,
+// which is what `styles.css`'s `@custom-variant dark` keys off and therefore
+// what every other component in here already follows. A toast is portalled
+// outside the tree but reads the same page, so it has to answer to the same
+// source — hence this hook rather than a `next-themes` `useTheme`, which asks
+// for a React provider none of this runs under. Sonner needs the answer as a
+// value, not a class, which is the only reason the class has to be observed
+// at all.
 function useTheme() {
-    const read = () => (typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light");
+    const read = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light";
     const [theme, setTheme] = React.useState(read);
     React.useEffect(() => {
         const observer = new MutationObserver(() => setTheme(read()));
@@ -21,11 +26,11 @@ function useTheme() {
 const Toaster = ({ ...props }) => {
     const { theme = "system" } = useTheme();
     return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
-            success: (_jsx(CircleCheckIcon, { className: "size-4" })),
-            info: (_jsx(InfoIcon, { className: "size-4" })),
-            warning: (_jsx(TriangleAlertIcon, { className: "size-4" })),
-            error: (_jsx(OctagonXIcon, { className: "size-4" })),
-            loading: (_jsx(Loader2Icon, { className: "size-4 animate-spin" })),
+            success: _jsx(CircleCheckIcon, { className: "size-4" }),
+            info: _jsx(InfoIcon, { className: "size-4" }),
+            warning: _jsx(TriangleAlertIcon, { className: "size-4" }),
+            error: _jsx(OctagonXIcon, { className: "size-4" }),
+            loading: _jsx(Loader2Icon, { className: "size-4 animate-spin" }),
         }, style: {
             "--normal-bg": "var(--popover)",
             "--normal-text": "var(--popover-foreground)",

package/dist/{primitives → components}/table.d.ts

@@ -7,4 +7,4 @@ declare function TableRow({ className, ...props }: React.ComponentProps<"tr">):
 declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
 declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
 declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/{primitives → components}/table.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function Table({ className, ...props }) {
     return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
-    return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
+    return _jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
 }
 function TableBody({ className, ...props }) {
     return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
@@ -24,4 +24,4 @@ function TableCell({ className, ...props }) {
 function TableCaption({ className, ...props }) {
     return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
 }
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/{primitives → components}/tabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function Tabs({ className, orientation = "horizontal", ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className), ...props }));
 }

package/dist/{primitives → components}/textarea.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function Textarea({ className, ...props }) {
     return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }

package/dist/{primitives → components}/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
+import { cn } from "cn";
 function TooltipProvider({ delayDuration = 0, ...props }) {
     return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
 }

package/dist/gates/index.d.ts

@@ -0,0 +1,28 @@
+/** Every `file:line` in `text` painting with the status palette, outside a comment. */
+export declare function statusPaletteIn(file: string, text: string): string[];
+/** Every `file:line` in `text` reaching for a colour family that competes with the status palette. */
+export declare function competingStatusPaletteIn(file: string, text: string): string[];
+/** Every `file:line` in `text` that puts a colour inside a Tailwind class. */
+export declare function colouredClassesIn(file: string, text: string): string[];
+/** Every line in `text` that paints with the brand colour. */
+export declare function brandUsagesIn(file: string, text: string): {
+    file: string;
+    at: number;
+    text: string;
+}[];
+/**
+ * The `{ … }` body belonging to the block whose header (e.g. `:root {` or
+ * `.dark {`) appears first in the file, matched by brace depth rather than by
+ * the next `\n}` so a nested `calc(...)` or `color-mix(...)` cannot fool it.
+ */
+export declare function blockBody(css: string, header: string): string;
+/** Every `--name: value;` declaration in a block, keyed WITH the leading `--`. */
+export declare function rawDeclarations(block: string): Map<string, string>;
+/** The same, keyed WITHOUT the leading `--` — the shape `LIGHT_THEME` uses. */
+export declare function declarations(block: string): Map<string, string>;
+/**
+ * The foundation token names, read off the shipped stylesheet's `:root` so
+ * they can never drift from what actually runs. `radius` is a geometry
+ * setting, not a colour token, and is excluded — it matches LIGHT_THEME's keys.
+ */
+export declare function foundationTokenNames(): string[];

package/dist/gates/index.js

@@ -0,0 +1,142 @@
+/**
+ * @robomous/ui-core/gates — the pure helpers and token facts that keep the
+ * design system honest, published so every consumer repo can run the same
+ * gates over its own sources with its own extensions registry.
+ *
+ * Eight exports: four scanners over one file's text, three readers for a
+ * stylesheet's blocks and declarations, and the token names read off the
+ * stylesheet that ships. DESIGN.md names the rule each one holds.
+ */
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+const PKG = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
+const COMMENT = /^\s*(?:\/\/|\/\*|\*|#)/;
+// ---- status palette discipline ----
+/**
+ * The status palette's one Tailwind family: emerald/amber/sky, across every
+ * prefix that can carry a colour. `Badge` and `statusTone.ts` are its one
+ * home — see `statusTone.ts`'s own docstring — so a third place naming the
+ * family is a fork of the palette, not a use of it.
+ */
+const STATUS_PALETTE = /\b(?:bg|text|border|ring|fill|stroke|from|to|via|outline|decoration|shadow)-(?:emerald|amber|sky)-\d/;
+/** Every `file:line` in `text` painting with the status palette, outside a comment. */
+export function statusPaletteIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) && STATUS_PALETTE.test(line))
+        .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+/**
+ * A colour family that competes with the status palette for the same job —
+ * "a warning", "a success" — and so could stand in for it undetected. Unlike
+ * the palette itself these have no allowed home anywhere in a consumer.
+ */
+const COMPETING_PALETTE = /\b(?:bg|text|border)-(?:green|lime|teal|yellow|orange|blue|cyan|red)-\d/;
+/** Every `file:line` in `text` reaching for a colour family that competes with the status palette. */
+export function competingStatusPaletteIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) && COMPETING_PALETTE.test(line))
+        .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+// ---- colour discipline (from tests/scripts/design_tokens.test.mjs) ----
+/**
+ * A Tailwind arbitrary value whose content is a colour.
+ *
+ * Assembled from fragments so this file does not match itself. The `-` before
+ * the bracket is what makes it a *utility* rather than an array index or a
+ * TypeScript tuple type.
+ */
+const HEX = ["#", "[0-9a-fA-F]{3,8}"].join("");
+const LITERAL = String.raw `(?:${HEX}|rgba?\(|hsla?\(|oklch\()`;
+// A raw colour right inside the bracket…
+const ARBITRARY_COLOUR = new RegExp(String.raw `-\[\s*(?:${LITERAL}|var\(\s*--)`);
+// The one colour-mix the preset writes mixes tokens only:
+// `color-mix(in_oklch,var(--secondary),var(--foreground)_5%)`. Any other
+// argument shape — a literal, a named colour, a bare number — is a colour.
+const TOKEN_MIX = String.raw `color-mix\(in_[a-z0-9-]+(?:,var\(--[a-z0-9-]+\)(?:_\d+(?:\.\d+)?%)?)+\)`;
+const BRACKET_MIX = new RegExp(String.raw `-\[\s*color-mix\([^\]]*\]`);
+const ALLOWED_MIX = new RegExp(String.raw `-\[\s*${TOKEN_MIX}\]`);
+/** Every `file:line` in `text` that puts a colour inside a Tailwind class. */
+export function colouredClassesIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) &&
+        (ARBITRARY_COLOUR.test(line) || (BRACKET_MIX.test(line) && !ALLOWED_MIX.test(line))))
+        .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+/**
+ * `DESIGN.md` "Where the brand is": the brand is identity, not a functional-UI
+ * colour — the wordmark and the styleguide swatch that shows it off, nothing
+ * a person acts on. This is not a headcount: the gate does not exist to hold
+ * a count of sites, it exists so brand can never migrate onto a control (a
+ * button, a progress fill, anything with a function) instead of staying the
+ * one place it is allowed to just be seen. A pure function over one file's
+ * text, so the gate is provable with fabricated input, and `COMMENT` keeps
+ * the styles.css line that *states* the rule from counting as a usage of it.
+ */
+const BRAND_UTILITY = /\b(?:bg|text|border|ring|fill|stroke)-brand\b/;
+/** Every line in `text` that paints with the brand colour. */
+export function brandUsagesIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) && BRAND_UTILITY.test(line))
+        .map(({ line, at }) => ({ file, at, text: line.trim() }));
+}
+// ---- stylesheet parsing (from src/theme/tokens.test.ts, translated TS→JS) ----
+/** Whitespace is presentation; a value that wraps is the same value — used internally by `rawDeclarations`. */
+function normalize(value) {
+    return value.replace(/\s+/g, " ").trim();
+}
+/**
+ * The `{ … }` body belonging to the block whose header (e.g. `:root {` or
+ * `.dark {`) appears first in the file, matched by brace depth rather than by
+ * the next `\n}` so a nested `calc(...)` or `color-mix(...)` cannot fool it.
+ */
+export function blockBody(css, header) {
+    const headerAt = css.indexOf(header);
+    if (headerAt === -1)
+        throw new Error(`stylesheet has no ${JSON.stringify(header)} block`);
+    const braceAt = css.indexOf("{", headerAt);
+    let depth = 1;
+    let i = braceAt + 1;
+    while (depth > 0 && i < css.length) {
+        if (css[i] === "{")
+            depth++;
+        else if (css[i] === "}")
+            depth--;
+        i++;
+    }
+    return css.slice(braceAt + 1, i - 1);
+}
+/** Every `--name: value;` declaration in a block, keyed WITH the leading `--`. */
+export function rawDeclarations(block) {
+    const map = new Map();
+    for (const match of block.matchAll(/(--[\w-]+):\s*([^;]+);/g)) {
+        map.set(match[1], normalize(match[2]));
+    }
+    return map;
+}
+/** The same, keyed WITHOUT the leading `--` — the shape `LIGHT_THEME` uses. */
+export function declarations(block) {
+    const map = new Map();
+    for (const [name, value] of rawDeclarations(block)) {
+        map.set(name.slice(2), value);
+    }
+    return map;
+}
+// ---- foundation facts ----
+/**
+ * The foundation token names, read off the shipped stylesheet's `:root` so
+ * they can never drift from what actually runs. `radius` is a geometry
+ * setting, not a colour token, and is excluded — it matches LIGHT_THEME's keys.
+ */
+export function foundationTokenNames() {
+    const css = readFileSync(path.join(PKG, "src/theme/styles.css"), "utf8");
+    return [...declarations(blockBody(css, ":root {")).keys()].filter((n) => n !== "radius");
+}