atlas-react-kit 0.5.0 → 0.6.1

package/dist/info-tip.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CircleHelpIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./popover.js";
+import { focusRing } from "./internal/styles.js";
+import { cn } from "./utils.js";
+/**
+ * True when a mouse can hover. Touch and coarse pointers must use click;
+ * a hover-open popover would trap them after the first tap.
+ */
+function canHoverOpen() {
+    return window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+}
+/**
+ * Longer help than a Tooltip: a Popover with a 20px glyph and a 44px hit
+ * area. Hover opens only on a fine pointer; click, tap, and keyboard always
+ * toggle it. Not a glossary or "coming soon" chip — pass that copy in.
+ */
+function InfoTip({ label, title, description, children, layout = "box", side = "top", align = "center", badge, icon, className, }) {
+    const [open, setOpen] = React.useState(false);
+    const closeTimer = React.useRef(null);
+    const hoverOpened = React.useRef(false);
+    const inline = layout === "inline";
+    const cancelClose = () => {
+        if (closeTimer.current !== null) {
+            window.clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    const openFromHover = () => {
+        if (!canHoverOpen())
+            return;
+        cancelClose();
+        hoverOpened.current = true;
+        setOpen(true);
+    };
+    const closeFromHover = () => {
+        if (!canHoverOpen() || !hoverOpened.current)
+            return;
+        cancelClose();
+        // Leave a beat so the pointer can travel from the glyph into the panel.
+        closeTimer.current = window.setTimeout(() => setOpen(false), 120);
+    };
+    React.useEffect(() => () => cancelClose(), []);
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+            // Hover already opened the panel; the following click should pin
+            // it, not toggle it closed (Playwright and real mice both hover
+            // before they click).
+            if (hoverOpened.current && open && !next) {
+                hoverOpened.current = false;
+                return;
+            }
+            hoverOpened.current = false;
+            setOpen(next);
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, "data-slot": "info-tip-trigger", "data-layout": layout, className: cn(focusRing, "relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground hover:text-selected-foreground focus-visible:text-selected-foreground", inline
+                        ? "size-5 align-middle after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2"
+                        : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: icon ?? (_jsx(CircleHelpIcon, { className: "size-5", "data-icon": "info-tip", "aria-hidden": true })) }) }), _jsxs(PopoverContent, { side: side, align: align, className: "w-72", onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: [_jsxs(PopoverHeader, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [title ? _jsx(PopoverTitle, { children: title }) : null, badge] }), description ? (_jsx(PopoverDescription, { children: description })) : null] }), children] })] }));
+}
+/** InfoTip that sits in a line of text without stretching the line box. */
+function InlineTip(props) {
+    return _jsx(InfoTip, { ...props, layout: "inline" });
+}
+export { InfoTip, InlineTip };

package/dist/input.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { disabledState, fieldSurface, focusRing, invalidState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-10 w-full min-w-0 rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 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-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn(fieldSurface, focusRing, invalidState, disabledState, "h-10 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", className), ...props }));
 }
 export { Input };

package/dist/internal/form-control.d.ts

@@ -6,4 +6,4 @@
  * control next to real form fields. Hover stays Input-like and cancels the
  * outline Button's purple selected wash.
  */
-export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
+export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";

package/dist/internal/form-control.js

@@ -6,4 +6,4 @@
  * control next to real form fields. Hover stays Input-like and cancels the
  * outline Button's purple selected wash.
  */
-export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
+export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";

package/dist/internal/styles.d.ts

@@ -0,0 +1,50 @@
+/**
+ * State classes shared by the kit's controls. Components add these with
+ * `cn()` instead of retyping them, so a state looks the same everywhere and
+ * a change (such as the WCAG focus ring) happens here once. Tailwind only
+ * generates class names it finds as literals, so each state attribute gets
+ * its own complete string. `test/dry.test.ts` fails when a component types
+ * one of these by hand.
+ */
+/** Keyboard focus: a ring-colored border plus a solid 2px ring (WCAG 1.4.11). */
+export declare const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring";
+/** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
+export declare const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Native `disabled`: dimmed, with no hover or click. */
+export declare const disabledState = "disabled:pointer-events-none disabled:opacity-50";
+/** Radix `data-disabled` (menu and list items, slider). */
+export declare const dataDisabledState = "data-disabled:pointer-events-none data-disabled:opacity-50";
+/** The text-field surface, so Input, Textarea, and SelectTrigger line up. */
+export declare const fieldSurface = "w-full min-w-0 rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground md:text-sm";
+/**
+ * Selected chrome: the wash, selected text, and a selected border, because
+ * the wash alone is 1.2:1 against the page. One string per state attribute.
+ */
+export declare const selectedState: {
+    /**
+     * Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
+     * `aria-pressed`; group items always set `data-state=on`, add
+     * `aria-pressed` in multiple mode, and are radios with `aria-checked` in
+     * single mode. All three get the same chrome.
+     */
+    toggle: string;
+    /** Tab trigger and TabsNav link (`data-state="active"`). */
+    active: string;
+    /** Current page (`data-active="true"`). */
+    current: string;
+    /** Trigger whose menu or popover is open. */
+    expanded: string;
+    /** Quiet buttons and toggles on hover. */
+    hover: string;
+};
+/** Options in menus and listboxes. */
+export declare const optionState: {
+    /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */
+    focus: string;
+    /** The same highlight for lists that track the active option in state. */
+    active: string;
+    /** The chosen value (`data-state="checked"`); a check icon marks it too. */
+    checked: string;
+    /** The chosen value in lists that track selection in state. */
+    selected: string;
+};

package/dist/internal/styles.js

@@ -0,0 +1,50 @@
+/**
+ * State classes shared by the kit's controls. Components add these with
+ * `cn()` instead of retyping them, so a state looks the same everywhere and
+ * a change (such as the WCAG focus ring) happens here once. Tailwind only
+ * generates class names it finds as literals, so each state attribute gets
+ * its own complete string. `test/dry.test.ts` fails when a component types
+ * one of these by hand.
+ */
+/** Keyboard focus: a ring-colored border plus a solid 2px ring (WCAG 1.4.11). */
+export const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring";
+/** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
+export const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Native `disabled`: dimmed, with no hover or click. */
+export const disabledState = "disabled:pointer-events-none disabled:opacity-50";
+/** Radix `data-disabled` (menu and list items, slider). */
+export const dataDisabledState = "data-disabled:pointer-events-none data-disabled:opacity-50";
+/** The text-field surface, so Input, Textarea, and SelectTrigger line up. */
+export const fieldSurface = "w-full min-w-0 rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground md:text-sm";
+/**
+ * Selected chrome: the wash, selected text, and a selected border, because
+ * the wash alone is 1.2:1 against the page. One string per state attribute.
+ */
+export const selectedState = {
+    /**
+     * Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
+     * `aria-pressed`; group items always set `data-state=on`, add
+     * `aria-pressed` in multiple mode, and are radios with `aria-checked` in
+     * single mode. All three get the same chrome.
+     */
+    toggle: "data-on:border-selected-foreground data-on:bg-selected data-on:text-selected-foreground aria-pressed:border-selected-foreground aria-pressed:bg-selected aria-pressed:text-selected-foreground aria-checked:border-selected-foreground aria-checked:bg-selected aria-checked:text-selected-foreground",
+    /** Tab trigger and TabsNav link (`data-state="active"`). */
+    active: "data-[state=active]:border-selected-foreground data-[state=active]:bg-selected data-[state=active]:text-selected-foreground",
+    /** Current page (`data-active="true"`). */
+    current: "data-[active=true]:border-selected-foreground data-[active=true]:bg-selected data-[active=true]:text-selected-foreground",
+    /** Trigger whose menu or popover is open. */
+    expanded: "aria-expanded:border-selected-foreground aria-expanded:bg-selected aria-expanded:text-selected-foreground",
+    /** Quiet buttons and toggles on hover. */
+    hover: "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground",
+};
+/** Options in menus and listboxes. */
+export const optionState = {
+    /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */
+    focus: "focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)]",
+    /** The same highlight for lists that track the active option in state. */
+    active: "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--color-ring)]",
+    /** The chosen value (`data-state="checked"`); a check icon marks it too. */
+    checked: "data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground",
+    /** The chosen value in lists that track selection in state. */
+    selected: "bg-selected text-selected-foreground",
+};

package/dist/internal/tabs-styles.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { disabledState, focusRing, selectedState } from "./styles.js";
 const tabsListVariants = cva('group/tabs-list inline-flex w-fit items-stretch justify-center p-0 text-muted-foreground group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col', {
     variants: {
         variant: {
@@ -11,9 +12,11 @@ const tabsListVariants = cva('group/tabs-list inline-flex w-fit items-stretch ju
     },
 });
 const tabsTriggerVariants = cva([
-    'relative inline-flex h-full min-w-0 flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5',
-    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
-    'data-[state="active"]:bg-selected data-[state="active"]:text-selected-foreground dark:data-[state="active"]:border-transparent dark:data-[state="active"]:bg-selected dark:data-[state="active"]:text-selected-foreground',
+    focusRing,
+    disabledState,
+    'relative inline-flex h-full min-w-0 flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5',
+    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
+    selectedState.active,
     'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-[-5px] group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:-right-1 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',
 ]);
 export { tabsListVariants, tabsTriggerVariants };

package/dist/markdown.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Drop javascript:/data:/unknown schemes. react-markdown already omits raw
+ * HTML (no rehype-raw), so this is the remaining URL hole.
+ */
+export declare function safeMarkdownUrl(url: string): string;
+export type MarkdownProps = {
+    content: string;
+    className?: string;
+};
+/**
+ * GitHub-flavoured Markdown, token-styled and sanitized. No Next, no raw
+ * HTML, no typography plugin. `react-markdown` and `remark-gfm` stay in this
+ * module so other subpaths do not pay for them.
+ */
+declare function Markdown({ content, className }: MarkdownProps): import("react").JSX.Element;
+/** Alias used by apps that imported MarkdownContent. */
+declare const MarkdownContent: typeof Markdown;
+export { Markdown, MarkdownContent };

package/dist/markdown.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "./utils.js";
+/** Stable identity so parent re-renders do not re-parse unchanged content. */
+const REMARK_PLUGINS = [remarkGfm];
+const SAFE_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+/**
+ * Drop javascript:/data:/unknown schemes. react-markdown already omits raw
+ * HTML (no rehype-raw), so this is the remaining URL hole.
+ */
+export function safeMarkdownUrl(url) {
+    const value = url.trim();
+    if (!value)
+        return "";
+    if (value.startsWith("#") || value.startsWith("/"))
+        return value;
+    try {
+        const parsed = new URL(value);
+        return SAFE_PROTOCOLS.has(parsed.protocol) ? value : "";
+    }
+    catch {
+        return "";
+    }
+}
+function headingClass(size) {
+    return cn("font-heading font-semibold tracking-tight text-foreground", size);
+}
+const markdownComponents = {
+    h1: ({ children }) => _jsx("h1", { className: headingClass("text-xl"), children: children }),
+    h2: ({ children }) => _jsx("h2", { className: headingClass("text-lg"), children: children }),
+    h3: ({ children }) => (_jsx("h3", { className: headingClass("text-base"), children: children })),
+    p: ({ children }) => _jsx("p", { className: "text-sm leading-relaxed", children: children }),
+    ul: ({ children }) => (_jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: children })),
+    ol: ({ children }) => (_jsx("ol", { className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
+    li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-l-2 border-input pl-3 text-sm text-muted-foreground", children: children })),
+    a: ({ href, children }) => href ? (_jsx("a", { href: href, className: "text-selected-foreground underline underline-offset-2", ...(href.startsWith("http")
+            ? { target: "_blank", rel: "noreferrer noopener" }
+            : {}), children: children })) : (_jsx("span", { children: children })),
+    code: ({ className, children }) => {
+        const fenced = /language-/.test(className ?? "");
+        return (_jsx("code", { className: cn("font-mono text-xs", fenced ? "bg-transparent" : "bg-muted px-1 py-0.5"), children: children }));
+    },
+    pre: ({ children }) => (_jsx("pre", { className: "overflow-x-auto bg-muted p-3 text-xs", children: children })),
+    hr: () => _jsx("hr", { className: "border-border" }),
+    table: ({ children }) => (_jsx("div", { className: "overflow-x-auto", children: _jsx("table", { className: "w-full text-left text-sm", children: children }) })),
+    th: ({ children }) => (_jsx("th", { className: "border-b border-input py-1.5 pr-3 font-medium", children: children })),
+    td: ({ children }) => (_jsx("td", { className: "border-b border-border py-1.5 pr-3", children: children })),
+    img: ({ src, alt }) => (_jsx("img", { src: src, alt: alt ?? "", className: "max-w-full" })),
+};
+/**
+ * GitHub-flavoured Markdown, token-styled and sanitized. No Next, no raw
+ * HTML, no typography plugin. `react-markdown` and `remark-gfm` stay in this
+ * module so other subpaths do not pay for them.
+ */
+function Markdown({ content, className }) {
+    return (_jsx("article", { "data-slot": "markdown", className: cn("flex flex-col gap-3 text-foreground", className), children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, urlTransform: safeMarkdownUrl, components: markdownComponents, children: content }) }));
+}
+/** Alias used by apps that imported MarkdownContent. */
+const MarkdownContent = Markdown;
+export { Markdown, MarkdownContent };

package/dist/meter.d.ts

@@ -0,0 +1,22 @@
+export type MeterMarker = {
+    /** Same scale as `value` / `min` / `max` (not a 0–1 fraction). */
+    position: number;
+    className?: string;
+};
+export type MeterProps = {
+    value: number;
+    min?: number;
+    max: number;
+    /** App-owned fill (status, pace). Defaults to primary. */
+    fillClassName?: string;
+    markers?: MeterMarker[];
+    "aria-label": string;
+    className?: string;
+};
+/**
+ * Track, fill, and optional ticks for a current value against a scale.
+ * Use `Progress` for a plain 0–100 job bar. The app chooses fill color and
+ * marker positions (80% of a cap, 1.0× typical, and so on).
+ */
+declare function Meter({ value, min, max, fillClassName, markers, "aria-label": ariaLabel, className, }: MeterProps): import("react").JSX.Element;
+export { Meter };

package/dist/meter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/**
+ * Track, fill, and optional ticks for a current value against a scale.
+ * Use `Progress` for a plain 0–100 job bar. The app chooses fill color and
+ * marker positions (80% of a cap, 1.0× typical, and so on).
+ */
+function Meter({ value, min = 0, max, fillClassName = "bg-primary", markers, "aria-label": ariaLabel, className, }) {
+    const span = max - min;
+    const toPercent = (amount) => {
+        if (span === 0)
+            return 0;
+        return Math.min(100, Math.max(0, ((amount - min) / span) * 100));
+    };
+    return (_jsxs("div", { role: "meter", "data-slot": "meter", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-label": ariaLabel, className: cn("relative h-1.5 w-full overflow-hidden bg-muted", className), children: [_jsx("div", { "data-slot": "meter-fill", className: cn("h-full", fillClassName), style: { width: `${toPercent(value)}%` } }), markers?.map((marker) => (_jsx("div", { "aria-hidden": true, "data-slot": "meter-marker", className: cn("absolute inset-y-0 w-px bg-foreground/40", marker.className), style: { left: `${toPercent(marker.position)}%` } }, marker.position)))] }));
+}
+export { Meter };

package/dist/pagination.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "lucide-react";
 import { buttonVariants } from "./button.js";
+import { selectedState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Page links for long lists and tables. Links are plain anchors so the page
@@ -21,7 +22,7 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
     return (_jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
             variant: isActive ? "outline" : "ghost",
             size: size === "icon" ? "icon-sm" : "sm",
-        }), "font-medium tracking-normal normal-case tabular-nums data-[active=true]:border-primary data-[active=true]:bg-selected data-[active=true]:text-selected-foreground", className), ...props }));
+        }), selectedState.current, "font-medium tracking-normal normal-case tabular-nums", className), ...props }));
 }
 function PaginationPrevious({ className, children = "Previous", ...props }) {
     return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("gap-1 px-2.5 sm:pl-2", className), ...props, children: [_jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: children })] }));

package/dist/radio-group.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { disabledState, focusRing, invalidState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * One choice from a short, visible list. Arrow keys move the selection.
@@ -15,6 +16,6 @@ function RadioGroup({ className, ...props }) {
  * differently from square checkboxes.
  */
 function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("peer relative flex aspect-square size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-transparent shadow-xs transition-shadow outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-checked:border-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex items-center justify-center", children: _jsx("span", { className: "size-2 rounded-full bg-primary" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn(focusRing, invalidState, disabledState, "peer relative flex aspect-square size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-transparent shadow-xs transition-shadow after:absolute after:-inset-x-3 after:-inset-y-2 data-checked:border-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex items-center justify-center", children: _jsx("span", { className: "size-2 rounded-full bg-primary" }) }) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/search-picker.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño".
+ */
+export declare function foldSearchText(value: string): string;
+/**
+ * Default SearchPicker filter: the folded label includes the folded query.
+ */
+export declare function defaultSearchFilter<T>(item: T, query: string, getLabel: (item: T) => string): boolean;
+export type SearchPickerProps<T> = {
+    items: T[];
+    getValue: (item: T) => string;
+    getLabel: (item: T) => string;
+    filter?: (item: T, query: string, getLabel: (item: T) => string) => boolean;
+    value?: string;
+    onSelect: (item: T) => void;
+    label: string;
+    placeholder?: string;
+    emptyText?: string;
+    listLabel?: string;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * Always-visible combobox: a labelled input and a listbox. Unlike Combobox,
+ * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
+ * Enter, Escape.
+ */
+declare function SearchPicker<T>({ items, getValue, getLabel, filter, value, onSelect, label, placeholder, emptyText, listLabel, disabled, className, }: SearchPickerProps<T>): React.JSX.Element;
+export { SearchPicker };

package/dist/search-picker.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+import { optionState } from "./internal/styles.js";
+import { cn } from "./utils.js";
+const LISTBOX_PAGE_SIZE = 10;
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño".
+ */
+export function foldSearchText(value) {
+    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+/**
+ * Default SearchPicker filter: the folded label includes the folded query.
+ */
+export function defaultSearchFilter(item, query, getLabel) {
+    const needle = foldSearchText(query.trim());
+    if (!needle)
+        return true;
+    return foldSearchText(getLabel(item)).includes(needle);
+}
+/**
+ * Always-visible combobox: a labelled input and a listbox. Unlike Combobox,
+ * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
+ * Enter, Escape.
+ */
+function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText = "No results", listLabel, disabled, className, }) {
+    const [query, setQuery] = React.useState("");
+    const listId = React.useId();
+    const inputId = React.useId();
+    const filtered = React.useMemo(() => items.filter((item) => filter(item, query, getLabel)), [items, filter, query, getLabel]);
+    const selectedIndex = React.useMemo(() => {
+        const index = filtered.findIndex((item) => getValue(item) === value);
+        return index >= 0 ? index : 0;
+    }, [filtered, getValue, value]);
+    const [highlight, setHighlight] = React.useState(selectedIndex);
+    React.useEffect(() => {
+        setHighlight(query ? 0 : selectedIndex);
+    }, [query, selectedIndex]);
+    const optionId = (index) => `${listId}-option-${index}`;
+    const active = filtered[highlight];
+    const scrollHighlightedOption = React.useCallback((node) => {
+        node?.scrollIntoView({ block: "nearest" });
+    }, []);
+    const selectItem = (item) => {
+        onSelect(item);
+        setQuery("");
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setHighlight((index) => filtered.length === 0 ? 0 : Math.min(index + 1, filtered.length - 1));
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setHighlight((index) => Math.max(index - 1, 0));
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            setHighlight(0);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            setHighlight(filtered.length === 0 ? 0 : filtered.length - 1);
+        }
+        if (event.key === "PageDown") {
+            event.preventDefault();
+            setHighlight((index) => filtered.length === 0
+                ? 0
+                : Math.min(index + LISTBOX_PAGE_SIZE, filtered.length - 1));
+        }
+        if (event.key === "PageUp") {
+            event.preventDefault();
+            setHighlight((index) => Math.max(index - LISTBOX_PAGE_SIZE, 0));
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (active)
+                selectItem(active);
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            if (query) {
+                setQuery("");
+                return;
+            }
+            event.currentTarget.blur();
+        }
+    };
+    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? optionId(highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: "max-h-60 overflow-y-auto border border-input bg-background", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (filtered.map((item, index) => {
+                    const itemValue = getValue(item);
+                    const isSelected = itemValue === value;
+                    const isActive = index === highlight;
+                    return (_jsx("li", { role: "none", children: _jsx("button", { ref: isActive ? scrollHighlightedOption : undefined, id: optionId(index), type: "button", role: "option", "aria-selected": isSelected, disabled: disabled, className: cn("relative flex w-full cursor-default items-center rounded-none py-2 pr-3 pl-3 text-left text-sm outline-hidden select-none", isSelected && optionState.selected, isActive && optionState.active, isActive &&
+                                !isSelected &&
+                                "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectItem(item), children: _jsx("span", { className: "truncate", children: getLabel(item) }) }) }, itemValue));
+                })) })] }));
+}
+export { SearchPicker };

package/dist/select.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
+import { dataDisabledState, disabledState, fieldSurface, focusRing, invalidState, optionState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 function Select({ ...props }) {
@@ -14,7 +15,7 @@ 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-full min-w-0 items-center justify-between gap-1.5 rounded-none border border-input bg-background px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 md:text-sm *: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:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, "flex items-center justify-between gap-1.5 whitespace-nowrap data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *: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-3.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...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-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none 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" &&
@@ -24,7 +25,7 @@ function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase", className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionState.focus, optionState.checked, dataDisabledState, "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:**:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1.5 my-1.5 h-px bg-border/50", className), ...props }));

package/dist/slider.d.ts

@@ -0,0 +1,20 @@
+export type SliderProps = {
+    value: number;
+    onValueChange: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+/**
+ * Single-thumb range on Radix Slider. Square track and thumb, primary fill,
+ * solid focus ring, 44px thumb hit area. Pair with a visible `Label`.
+ */
+declare function Slider({ value, onValueChange, onValueCommit, min, max, step, disabled, id, name, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: SliderProps): import("react").JSX.Element;
+export { Slider };

package/dist/slider.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { dataDisabledState, focusRing } from "./internal/styles.js";
+import { cn } from "./utils.js";
+/**
+ * Single-thumb range on Radix Slider. Square track and thumb, primary fill,
+ * solid focus ring, 44px thumb hit area. Pair with a visible `Label`.
+ */
+function Slider({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled, id, name, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) {
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", name: name, min: min, max: max, step: step, disabled: disabled, value: [value], onValueChange: (next) => {
+            const amount = next[0];
+            if (amount !== undefined)
+                onValueChange(amount);
+        }, onValueCommit: (next) => {
+            const amount = next[0];
+            if (amount !== undefined)
+                onValueCommit?.(amount);
+        }, className: cn(dataDisabledState, "relative flex w-full touch-none items-center select-none", className), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative h-1.5 w-full grow overflow-hidden rounded-none bg-muted", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-slot": "slider-thumb", className: cn(focusRing, "relative block size-4 shrink-0 rounded-none border border-primary bg-background shadow-xs after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2") })] }));
+}
+export { Slider };

package/dist/stat-tile.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+/**
+ * Uppercase muted label used on tiles and thin section chrome. Apps that
+ * only needed a heading class can import this instead of a wrapper.
+ */
+export declare const sectionLabel = "text-xs font-semibold tracking-widest text-muted-foreground uppercase";
+/** Row of tiles: stacked on phones, divided columns from `sm`. */
+export declare const statTileGrid = "grid ring-1 ring-foreground/5 sm:divide-x";
+export type StatTileProps = {
+    label: string;
+    value: string;
+    sub?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * Label, big tabular figure, optional extra (a meter), muted sub line.
+ * Domain copy and status colors stay in the app.
+ */
+declare function StatTile({ label, value, sub, children, className }: StatTileProps): React.JSX.Element;
+export { StatTile };