atlas-react-kit 0.4.1 → 0.6.0

package/dist/form/markdown-field.d.ts

@@ -0,0 +1,17 @@
+import type { TextFieldApi } from "./text-field.js";
+/**
+ * GFM body field: Write is a textarea, Preview is the sanitized Markdown
+ * renderer. String-in/string-out — not a WYSIWYG document model.
+ */
+export declare function FormMarkdownField({ field, id, label, placeholder, rows, showError, }: {
+    field: TextFieldApi;
+    /**
+     * Control id the label points at. Defaults to `field.name`; pass a unique
+     * id when two forms on one page share a field name.
+     */
+    id?: string;
+    label: string;
+    placeholder?: string;
+    rows?: number;
+    showError?: boolean;
+}): import("react").JSX.Element;

package/dist/form/markdown-field.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Label } from "../label.js";
+import { Markdown } from "../markdown.js";
+import { Textarea } from "../textarea.js";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
+import { onInputChange } from "../utils.js";
+import { FieldError, getFieldErrorMessage } from "./field-error.js";
+/**
+ * GFM body field: Write is a textarea, Preview is the sanitized Markdown
+ * renderer. String-in/string-out — not a WYSIWYG document model.
+ */
+export function FormMarkdownField({ field, id = field.name, label, placeholder = "Markdown supported", rows = 5, showError = true, }) {
+    const [mode, setMode] = useState("write");
+    const onChange = onInputChange(field.handleChange);
+    const errorText = showError
+        ? getFieldErrorMessage(field.state.meta.errors[0])
+        : undefined;
+    const trimmed = field.state.value.trim();
+    function handleModeChange(value) {
+        if (value === "write" || value === "preview")
+            setMode(value);
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: handleModeChange, variant: "outline", size: "sm", spacing: 0, "aria-label": `${label} mode`, children: [_jsx(ToggleGroupItem, { value: "write", children: "Write" }), _jsx(ToggleGroupItem, { value: "preview", children: "Preview" })] })] }), mode === "write" ? (_jsx(Textarea, { id: id, value: field.state.value, onChange: onChange, onBlur: field.handleBlur, placeholder: placeholder, rows: rows, "aria-invalid": errorText ? true : undefined })) : (_jsx("div", { className: "min-h-16 rounded-none border border-input bg-background px-3 py-2", "aria-live": "polite", children: trimmed ? (_jsx(Markdown, { content: trimmed })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to preview" })) })), showError ? _jsx(FieldError, { text: errorText }) : null] }));
+}

package/dist/form/text-field.d.ts

@@ -8,8 +8,14 @@ export type TextFieldApi = {
     handleChange: (value: string) => void;
     handleBlur: () => void;
 };
-export declare function FormTextField({ field, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, autoComplete, required, minLength, }: {
+export declare function FormTextField({ field, id, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, autoComplete, required, minLength, }: {
     field: TextFieldApi;
+    /**
+     * Control id the label points at. Defaults to `field.name`; pass a unique
+     * id when two forms on one page share a field name (login and sign-up
+     * `email`), or the second label focuses the first input.
+     */
+    id?: string;
     label: string;
     placeholder?: string;
     /** Optional hint under the label (employer vs referrer, etc.). */

package/dist/form/text-field.js

@@ -5,13 +5,13 @@ import { Label } from "../label.js";
 import { Textarea } from "../textarea.js";
 import { onInputChange } from "../utils.js";
 import { FieldError, getFieldErrorMessage, } from "./field-error.js";
-export function FormTextField({ field, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError = true, autoComplete, required, minLength, }) {
+export function FormTextField({ field, id = field.name, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError = true, autoComplete, required, minLength, }) {
     const onChange = onInputChange(field.handleChange);
     const errorText = showError
         ? getFieldErrorMessage(field.state.meta.errors[0])
         : undefined;
     const controlProps = {
-        id: field.name,
+        id,
         value: field.state.value,
         onChange,
         onBlur: field.handleBlur,
@@ -21,5 +21,5 @@ export function FormTextField({ field, label, placeholder, description, autoFocu
         minLength,
         "aria-invalid": errorText ? true : undefined,
     };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: field.name, children: label }), description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: description })) : null, multiline ? (_jsx(Textarea, { ...controlProps, rows: rows })) : (_jsx(Input, { ...controlProps, type: inputType, autoFocus: autoFocus })), showError ? _jsx(FieldError, { text: errorText }) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: description })) : null, multiline ? (_jsx(Textarea, { ...controlProps, rows: rows })) : (_jsx(Input, { ...controlProps, type: inputType, autoFocus: autoFocus })), showError ? _jsx(FieldError, { text: errorText }) : null] }));
 }

package/dist/info-tip.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { PopoverContent } from "./popover.js";
+export type InfoTipLayout = "box" | "inline";
+export type InfoTipProps = {
+    /** Required name for the icon button (the glyph has no visible text). */
+    label: string;
+    title?: string;
+    description?: React.ReactNode;
+    /** Extra body after the title and description. */
+    children?: React.ReactNode;
+    /** `inline` keeps the surrounding line height; the 44px hit area overflows. */
+    layout?: InfoTipLayout;
+    side?: React.ComponentProps<typeof PopoverContent>["side"];
+    align?: React.ComponentProps<typeof PopoverContent>["align"];
+    badge?: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+};
+/**
+ * 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.
+ */
+declare function InfoTip({ label, title, description, children, layout, side, align, badge, icon, className, }: InfoTipProps): React.JSX.Element;
+/** InfoTip that sits in a line of text without stretching the line box. */
+declare function InlineTip(props: Omit<InfoTipProps, "layout">): React.JSX.Element;
+export { InfoTip, InlineTip };

package/dist/info-tip.js

@@ -0,0 +1,63 @@
+"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 { 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("relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground outline-none hover:text-selected-foreground focus-visible:border-ring focus-visible:text-selected-foreground focus-visible:ring-2 focus-visible:ring-ring", 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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 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("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 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 }));
 }
 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:border-ring focus-visible:text-foreground focus-visible:ring-ring 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:border-ring focus-visible:text-foreground focus-visible:ring-ring 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/tabs-styles.js

@@ -11,9 +11,9 @@ 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',
+    '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:ring-2 focus-visible:ring-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"]: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',
+    'data-[state="active"]:border-selected-foreground data-[state="active"]:bg-selected data-[state="active"]:text-selected-foreground',
     '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.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+/**
+ * Page links for long lists and tables. Links are plain anchors so the page
+ * lives in the URL; pass `onClick` with `href` for client-side routing.
+ */
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+    size?: "default" | "icon";
+} & React.ComponentProps<"a">;
+/** The current page gets `aria-current="page"` and the selected wash. */
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, children, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare function PaginationNext({ className, children, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/pagination.js

@@ -0,0 +1,35 @@
+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 { cn } from "./utils.js";
+/**
+ * Page links for long lists and tables. Links are plain anchors so the page
+ * lives in the URL; pass `onClick` with `href` for client-side routing.
+ */
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...props }));
+}
+function PaginationItem({ ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", ...props });
+}
+/** The current page gets `aria-current="page"` and the selected wash. */
+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-selected-foreground data-[active=true]:bg-selected data-[active=true]:text-selected-foreground", 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 })] }));
+}
+function PaginationNext({ className, children = "Next", ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("gap-1 px-2.5 sm:pr-2", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: children }), _jsx(ChevronRightIcon, { "data-icon": "inline-end" })] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center text-muted-foreground", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/progress.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+/**
+ * Determinate progress (uploads, multi-step jobs). `value` is 0–100; omit
+ * it for an indeterminate state and pair the bar with a visible label.
+ */
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): React.JSX.Element;
+export { Progress };

package/dist/progress.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import { cn } from "./utils.js";
+/**
+ * Determinate progress (uploads, multi-step jobs). `value` is 0–100; omit
+ * it for an indeterminate state and pair the bar with a visible label.
+ */
+function Progress({ className, value, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: value, className: cn("relative h-2 w-full overflow-hidden rounded-none bg-primary/15", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "h-full w-full flex-1 bg-primary transition-transform", style: { transform: `translateX(-${100 - (value ?? 0)}%)` } }) }));
+}
+export { Progress };

package/dist/radio-group.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+/**
+ * One choice from a short, visible list. Arrow keys move the selection.
+ * Use `Select` or `Combobox` when the list is long.
+ */
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
+/**
+ * Radio dot. Radios stay round (a circle, per the shape rules) so they read
+ * differently from square checkboxes.
+ */
+declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/radio-group.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn } from "./utils.js";
+/**
+ * One choice from a short, visible list. Arrow keys move the selection.
+ * Use `Select` or `Combobox` when the list is long.
+ */
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props }));
+}
+/**
+ * Radio dot. Radios stay round (a circle, per the shape rules) so they read
+ * 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 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" }) }) }));
+}
+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,100 @@
+"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 { 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 && "bg-selected text-selected-foreground", isActive && "shadow-[inset_2px_0_0_var(--color-ring)]", isActive &&
+                                !isSelected &&
+                                "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectItem(item), children: _jsx("span", { className: "truncate", children: getLabel(item) }) }) }, itemValue));
+                })) })] }));
+}
+export { SearchPicker };