@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/sidebar.js

@@ -1,24 +1,30 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { isMobileNow, useIsMobile } from "../hooks/use-mobile.js";
 import { cn } from "../lib/utils.js";
+import { BrandWordmark } from "./brand.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Separator } from "./separator.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
-import { Skeleton } from "./skeleton.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
-import { PanelLeftIcon } from "lucide-react";
+import { ChevronRightIcon, PanelLeftIcon, SearchIcon } from "lucide-react";
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH = 256;
+const SIDEBAR_WIDTH_MIN = 224;
+const SIDEBAR_WIDTH_MAX = 384;
+const SIDEBAR_WIDTH_ICON = 48;
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_RESIZE_STEP = 16;
+function clampWidth(value) {
+    return Math.round(Math.min(SIDEBAR_WIDTH_MAX, Math.max(SIDEBAR_WIDTH_MIN, value)));
+}
 const SidebarContext = React.createContext(null);
 function useSidebar() {
     const context = React.useContext(SidebarContext);
@@ -27,11 +33,9 @@ function useSidebar() {
     }
     return context;
 }
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, passive = false, mobileSheet = true, className, style, children, ...props }) {
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, onWidthChange, passive = false, mobileSheet = true, className, style, children, ...props }) {
     const isMobile = useIsMobile() && mobileSheet;
     const [openMobile, setOpenMobile] = React.useState(false);
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
     const [_open, _setOpen] = React.useState(defaultOpen);
     const open = openProp ?? _open;
     const setOpen = React.useCallback((value) => {
@@ -45,14 +49,22 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
         }
         if (passive)
             return;
-        // This sets the cookie to keep the sidebar state.
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     }, [setOpenProp, open, passive]);
-    // Helper to toggle the sidebar.
+    const [width, setWidthState] = React.useState(SIDEBAR_WIDTH);
+    const setWidth = React.useCallback((value) => {
+        const next = clampWidth(value);
+        setWidthState(next);
+        onWidthChange?.(next);
+    }, [onWidthChange]);
+    const restore = React.useCallback((kept) => {
+        _setOpen(kept.open);
+        setWidthState(clampWidth(kept.width));
+    }, []);
+    const resetWidth = React.useCallback(() => setWidth(SIDEBAR_WIDTH), [setWidth]);
     const toggleSidebar = React.useCallback(() => {
         return mobileSheet && isMobileNow() ? setOpenMobile((open) => !open) : setOpen((open) => !open);
     }, [mobileSheet, setOpen, setOpenMobile]);
-    // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
         if (passive)
             return;
@@ -65,8 +77,6 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar, passive]);
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
     const state = open ? "expanded" : "collapsed";
     const contextValue = React.useMemo(() => ({
         state,
@@ -76,62 +86,133 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
         openMobile,
         setOpenMobile,
         toggleSidebar,
-    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+        width,
+        setWidth,
+        resetWidth,
+        restore,
+    }), [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        width,
+        setWidth,
+        resetWidth,
+        restore,
+    ]);
     return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delay: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", 
                 // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
                 style: {
-                    "--sidebar-width": SIDEBAR_WIDTH,
-                    "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                    "--sidebar-width": `${width}px`,
+                    "--sidebar-width-icon": `${SIDEBAR_WIDTH_ICON}px`,
                     ...style,
-                }, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
+                }, className: cn("group/sidebar-wrapper flex min-h-svh w-full", className), ...props, children: children }) }) }));
 }
 /**
  * A product's navigation column: where a person can go, with the account at its foot.
  *
  * @family Navigation
- * @when The Portal's and Nadia's left column: the groups of places, an object's sections when the column swaps, the update offer and the account menu at the foot.
- * @instead An object's sections are SidebarSections inside this column, never a second column or a tab row; a page's own views are Tabs.
- * @behaviour One row is selected and marked as the current page. Collapsed or narrow, rows keep their icon and show their name in a tooltip; under the mobile breakpoint the column becomes a sheet. A row's count uses SidebarMenuBadge, whose attention tone is for a failure that needs the person.
- * @words Each row is a place's noun: "Agents", "Tasks", "Customers". A count is a bare number.
- * @access The column is a landmark; each row is a link or a button with its name, and the current one carries aria-current="page". The badge's number is read with its row.
+ * @when The one left column of the Portal and Nadia: a header, Find, groups of places, an object's sections when the column swaps, a band for the update or the way out, and the account. 256 px wide; the Portal's can be dragged between 224 and 384 px or collapsed to icons.
+ * @instead Never a second column or a tab row for an object's sections: `SidebarSections` swaps this column. A page's own views are Tabs. A row that opens an area ends in `SidebarMenuChevron`.
+ * @behaviour Fills the cell its host gives it and stays in the page flow. `collapsible="icon"` (the default) collapses to 48 px icons with a tooltip name and becomes a sheet under 768 px; with `resize` a handle on its trailing edge drags it, steps it with the arrow keys, resets it on a double-click and collapses it on Enter. `collapsible="none"` is always open and never a sheet. A group is told apart by its label and its padding, never by a rule.
+ * @words Each row is a place's noun: "Agents", "Tasks", "Customers"; a count is a bare number. A sheet's title, description and Close label (`mobileTitle`, `mobileDescription`, `mobileCloseLabel`) are required; `resize`, when given, names the handle and comes from the catalogue.
+ * @access The column is a landmark; each row is a link or a button with its name, and the current one carries aria-current="page". The handle is a focusable separator with its value in px. The badge's number is read with its row.
  */
-function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", mobileTitle, mobileDescription, mobileCloseLabel, mobileFinalFocus, className, children, dir, ...props }) {
+function Sidebar({ collapsible, resize, mobileTitle, mobileDescription, mobileCloseLabel, mobileFinalFocus, className, children, dir, ...props }) {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
         return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
     }
     if (isMobile) {
-        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { closeLabel: mobileCloseLabel ?? "Close", finalFocus: mobileFinalFocus, dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", 
+        return (_jsx(Sheet, { closesOnScrimPress: true, modal: true, open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(SheetContent, { closeLabel: mobileCloseLabel, finalFocus: mobileFinalFocus, dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", 
                 // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
                 style: {
                     "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-                }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: mobileTitle ?? "Sidebar" }), _jsx(SheetDescription, { children: mobileDescription ?? "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
+                }, side: "left", children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: mobileTitle }), _jsx(SheetDescription, { children: mobileDescription })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
     }
-    return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn("relative w-(--sidebar-width) bg-transparent", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
-                    ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-                    : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", "data-side": side, className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", 
-                // Adjust the padding for floating and inset variants.
-                variant === "floating" || variant === "inset"
-                    ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+var(--nc-rounded-xs))]"
-                    : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border-0 group-data-[variant=floating]:bg-popover group-data-[variant=floating]:nc-elevation-floating", children: children }) })] }));
+    return (_jsxs("div", { "data-slot": "sidebar", "data-state": state, "data-collapsible": state === "collapsed" ? "icon" : "", className: cn("group relative hidden min-h-0 w-(--sidebar-width) shrink-0 flex-col bg-sidebar text-sidebar-foreground data-[collapsible=icon]:w-(--sidebar-width-icon) md:flex", !resize && "border-e", className), ...props, children: [_jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full min-h-0 flex-col", children: children }), resize ? _jsx(SidebarResizeHandle, { ...resize }) : null] }));
+}
+function readingDirection(element) {
+    return getComputedStyle(element).direction === "rtl" ? -1 : 1;
+}
+function SidebarResizeHandle(name) {
+    const { open, setOpen, width, setWidth, resetWidth } = useSidebar();
+    const [drag, setDrag] = React.useState(null);
+    const shown = open ? width : SIDEBAR_WIDTH_ICON;
+    const resizeTo = React.useCallback((requested) => {
+        const expanded = requested >= (SIDEBAR_WIDTH_MIN + SIDEBAR_WIDTH_ICON) / 2;
+        if (expanded !== open)
+            setOpen(expanded);
+        if (expanded)
+            setWidth(requested);
+    }, [open, setOpen, setWidth]);
+    React.useEffect(() => {
+        if (drag === null)
+            return;
+        const move = (event) => resizeTo(drag.width + drag.direction * (event.clientX - drag.x));
+        const end = () => setDrag(null);
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", end);
+        window.addEventListener("pointercancel", end);
+        return () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", end);
+            window.removeEventListener("pointercancel", end);
+        };
+    }, [drag, resizeTo]);
+    const onKeyDown = (event) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            setOpen(!open);
+            return;
+        }
+        if (!open)
+            return;
+        const direction = readingDirection(event.currentTarget);
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            const step = event.key === "ArrowLeft" ? -SIDEBAR_RESIZE_STEP : SIDEBAR_RESIZE_STEP;
+            setWidth(width + step * direction);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            setWidth(SIDEBAR_WIDTH_MIN);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            setWidth(SIDEBAR_WIDTH_MAX);
+        }
+    };
+    return (_jsx("div", { ...name, role: "separator", "aria-orientation": "vertical", "aria-valuemin": SIDEBAR_WIDTH_ICON, "aria-valuemax": SIDEBAR_WIDTH_MAX, "aria-valuenow": shown, "data-slot": "sidebar-resize-handle", "data-dragging": drag === null ? undefined : "", tabIndex: 0, className: "absolute inset-y-0 -end-1 z-20 w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-0 after:start-1/2 after:w-px after:-translate-x-1/2 after:bg-border hover:after:bg-ring focus-visible:nc-focus-outline focus-visible:outline-ring focus-visible:after:bg-ring data-dragging:after:bg-ring", onDoubleClick: () => {
+            if (!open)
+                setOpen(true);
+            resetWidth();
+        }, onKeyDown: onKeyDown, onPointerDown: (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            setDrag({
+                x: event.clientX,
+                width: shown,
+                direction: readingDirection(event.currentTarget),
+            });
+        } }));
 }
-function SidebarTrigger({ className, onClick, "aria-label": ariaLabel, ...props }) {
+function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar();
-    const named = ariaLabel !== undefined || props["aria-labelledby"] !== undefined;
-    return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), "aria-label": ariaLabel, onClick: (event) => {
+    return (_jsx(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), onClick: (event) => {
             onClick?.(event);
             toggleSidebar();
-        }, ...props, children: [_jsx(PanelLeftIcon, {}), named ? null : _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
-}
-function SidebarRail({ className, "aria-label": ariaLabel = "Toggle Sidebar", title, ...props }) {
-    const { toggleSidebar } = useSidebar();
-    return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": ariaLabel, title: title ?? ariaLabel, tabIndex: -1, onClick: toggleSidebar, className: cn("absolute inset-y-0 z-20 hidden w-11 group-data-[side=left]:-right-11 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2 [@media(hover:hover)_and_(pointer:fine)]:w-4 [@media(hover:hover)_and_(pointer:fine)]:group-data-[side=left]:-right-4", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className), ...props }));
+        }, ...props, children: _jsx(PanelLeftIcon, {}) }));
 }
 function SidebarInset({ className, focusTarget = false, render, ...props }) {
     return useRender({
         defaultTagName: "div",
         props: mergeProps({
-            className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-border md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", focusTarget && "focus-visible:-outline-offset-[var(--outline-offset-focus)]", className),
+            className: cn("relative flex w-full flex-1 flex-col bg-background", focusTarget && "focus-visible:-outline-offset-[var(--outline-offset-focus)]", className),
         }, props),
         render,
         state: {
@@ -155,7 +236,7 @@ function SidebarContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
 }
 function SidebarGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:px-1.5", className), ...props }));
 }
 function SidebarGroupLabel({ className, render, ...props }) {
     return useRender({
@@ -192,7 +273,7 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
 }
-const sidebarMenuButtonVariants = cva("nc-transition-paint peer/menu-button group/menu-button flex min-h-touch-target min-w-touch-target w-full items-center gap-2 overflow-hidden rounded-sm border border-transparent p-2 text-left text-sm group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-control-height! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:font-medium data-active:text-sidebar-primary-foreground data-active:hover:bg-sidebar-primary-hover data-active:hover:text-sidebar-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:size-5 group-data-[collapsible=icon]:[&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
+const sidebarMenuButtonVariants = cva("nc-transition-paint peer/menu-button group/menu-button flex min-h-touch-target min-w-touch-target w-full items-center gap-2 overflow-hidden rounded-sm border border-transparent p-2 text-left text-sm group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-control-height! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:font-medium data-active:text-sidebar-primary-foreground data-active:hover:bg-sidebar-primary-hover data-active:hover:text-sidebar-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg:not([data-slot=brand-wordmark])]:size-5 group-data-[collapsible=icon]:[&_svg:not([data-slot=brand-wordmark])]:size-4 [&_svg:not([data-slot=brand-wordmark])]:shrink-0 [&>span:last-child]:truncate", {
     variants: {
         variant: {
             default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
@@ -253,17 +334,6 @@ function SidebarMenuBadge({ className, tone = "default", ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", "data-tone": tone, className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-sm px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-primary-foreground", tone === "attention" &&
             "h-4.5 min-w-4.5 rounded-full bg-destructive font-semibold text-destructive-foreground peer-hover/menu-button:text-destructive-foreground peer-data-active/menu-button:text-destructive-foreground", className), ...props }));
 }
-function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
-    // Random width between 50 to 90%.
-    const [width] = React.useState(() => {
-        return `${Math.floor(Math.random() * 40) + 50}%`;
-    });
-    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-sm px-2", className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-sm", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", 
-                // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
-                style: {
-                    "--skeleton-width": width,
-                } })] }));
-}
 function SidebarMenuSub({ className, ...props }) {
     return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className), ...props }));
 }
@@ -285,4 +355,59 @@ function SidebarMenuSubButton({ render, size = "md", isActive = false, className
         },
     });
 }
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+/**
+ * Vercel's ›: the mark at the end of a row that swaps the column to that area's sub-menu: the Portal's Settings and Company, Nadia's company.
+ *
+ * @family Navigation
+ * @when The last child of a `SidebarMenuButton` whose press replaces the places with the area's sections (`SidebarSections`), never of a row that only goes to a page or to a destination whose views are tabs (the Portal's Analytics and Library).
+ * @instead A count is `SidebarMenuBadge`; an external link says so in its name.
+ * @behaviour A 16 px muted chevron pushed to the row's end, mirrored in right-to-left. A `Sidebar` with `collapsible="icon"` hides it when collapsed; a column that is narrowed by its host (`collapsible="none"`) leaves it out when narrow: `{narrow ? null : <SidebarMenuChevron />}`.
+ * @words None.
+ * @access Decorative: the row's name and its link say where it goes.
+ */
+function SidebarMenuChevron({ className, ...props }) {
+    return (_jsx(ChevronRightIcon, { "aria-hidden": "true", "data-slot": "sidebar-menu-chevron", className: cn("ms-auto size-4! shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden rtl:rotate-180", className), ...props }));
+}
+/**
+ * The company's wordmark over the product's name: what the header of a product's column says.
+ *
+ * @family Navigation
+ * @when The `header` of a `SidebarFrame` in the Portal and its sample. Nadia's header is her company row instead.
+ * @instead A switcher between companies or teams is a menu in the header, not this mark.
+ * @behaviour A 112 px wordmark above one muted line, truncated. Inside a link, the link is the row.
+ * @words The line names the product the column belongs to: "Portal", "Business".
+ * @access The wordmark is decorative beside the name; the link or button around it carries the accessible name.
+ */
+function SidebarBrand({ subtitle, className }) {
+    return (_jsxs("span", { "data-slot": "sidebar-brand", className: cn("grid min-w-0 gap-0", className), children: [_jsx(BrandWordmark, { alt: "", className: "h-5 w-28 max-w-full" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })] }));
+}
+/**
+ * The row that opens the product's Find: a field-shaped button under the header, with its key hint.
+ *
+ * @family Navigation
+ * @when The one Find of a sidebar, directly under its header; it opens the product's command dialog or search popover.
+ * @instead Never a real text field in the column; filtering a list is the page's own search.
+ * @behaviour An outlined row of the column's width: a search icon, the label muted, and the key hint at the end. Collapsed, only the icon stays, with the label as its tooltip; the hint shows only above 768 px.
+ * @words One word naming what it finds ("Find"); the hint is the product's own key chord (⌘K in the Portal), never a sentence.
+ * @access A button named by `label`, so the name survives the collapsed icon; the hint is read after it.
+ */
+function SidebarFind({ label, shortcut, ...props }) {
+    const { isMobile, state } = useSidebar();
+    const collapsed = state === "collapsed" && !isMobile;
+    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { "aria-label": label, tooltip: label, type: "button", variant: "outline", ...props, children: [_jsx(SearchIcon, { "aria-hidden": "true", className: "text-muted-foreground" }), collapsed ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-left text-muted-foreground", children: label }), _jsx("span", { className: "ms-auto shrink-0 max-md:hidden", children: shortcut })] }))] }) }) }));
+}
+/**
+ * The regions of a product's `Sidebar`, in order: header, Find, groups, band, account.
+ *
+ * @family Navigation
+ * @when The content of every product's `Sidebar`: the Portal's brand and Nadia's company row go in `header`, their Find in `find`, their places in the children.
+ * @instead A product lays no region of its own: no grid of rows, no hand-drawn rule between regions.
+ * @behaviour A 56 px header with the collapse control under a 1 px rule, Find under it, the groups scrolling in the middle, then the band and the account pinned at the foot above 1 px rules. `header`, `find` and `account` are required; an absent band leaves no rule. Collapsed, the header shows only the collapse control.
+ * @words None of its own; every word arrives in the regions.
+ * @access The regions are plain containers; the landmark is the `Sidebar` around them and the nav inside each group.
+ */
+function SidebarFrame({ header, toggle, find, children, band, account, actions, }) {
+    const { isMobile, state } = useSidebar();
+    return (_jsxs("div", { "data-slot": "sidebar-frame", className: "flex min-h-0 flex-1 flex-col", children: [_jsxs(SidebarHeader, { className: "box-content h-14 shrink-0 flex-row items-center justify-between gap-1 border-b px-3 py-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0", "data-slot": "sidebar-header", children: [state === "expanded" || isMobile ? _jsx("div", { className: "min-w-0 flex-1", children: header }) : null, toggle] }), _jsx("div", { className: "shrink-0 p-2 group-data-[collapsible=icon]:px-1.5", "data-slot": "sidebar-find", children: find }), _jsx(SidebarContent, { children: children }), band ? (_jsx(SidebarGroup, { className: "shrink-0 border-t", "data-slot": "sidebar-band", children: _jsx(SidebarGroupContent, { children: band }) })) : null, _jsx(SidebarFooter, { className: "shrink-0 border-t group-data-[collapsible=icon]:px-1.5", children: _jsxs("div", { className: "flex w-full items-center gap-1 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:flex-none", children: account }), actions ? (_jsx("div", { className: "flex shrink-0 items-center justify-center", children: actions })) : null] }) })] }));
+}
+export { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MAX, SIDEBAR_WIDTH_MIN, Sidebar, SidebarBrand, SidebarContent, SidebarFind, SidebarFooter, SidebarFrame, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuChevron, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/skeleton.d.ts

@@ -1,15 +1,61 @@
+import type { PresentContent } from "../internal/present-content.js";
+declare const shapeClasses: {
+    readonly rectangle: "rounded-sm";
+    readonly circle: "rounded-full";
+    readonly squared: "rounded-none";
+};
+type SkeletonShape = keyof typeof shapeClasses;
+type SkeletonSizing = {
+    children: PresentContent;
+    width?: undefined;
+    height?: undefined;
+    boxHeight?: undefined;
+} | {
+    children?: React.ReactNode;
+    className: string;
+    width?: undefined;
+    height?: undefined;
+    boxHeight?: undefined;
+} | {
+    children?: React.ReactNode;
+    width?: number | string | undefined;
+    height: number;
+    boxHeight?: number | undefined;
+};
+type SkeletonProps = Omit<React.ComponentProps<"div">, "children"> & SkeletonSizing & {
+    /** The final element's shape: `circle` for an avatar, `squared` for an image tile. */
+    shape?: SkeletonShape | undefined;
+    /** Unsized, with children: whether the placeholder covers them; `false` reveals them in the same box. Otherwise: whether the bar is drawn; the box stays. */
+    show?: boolean | undefined;
+};
 /**
  * A still placeholder in the shape of content whose layout is known.
  *
  * @family Feedback
- * @when A page or region whose layout is known while its data loads.
- * @instead For a wait on something the person pressed use `PendingLabel` and `WaitingLine`. Unknown layout shows nothing until data. Never both a skeleton and a line.
- * @behaviour The `line` fill, which stays visible on the card and on the workspace ground in both modes; 6 px corners or a circle, in the final shape so nothing shifts. Never pulses. Resolves to data, an absence or a failure.
- * @words None. No "Loading" text beside it.
- * @access The region is `aria-busy`; each placeholder is hidden and never focusable.
+ * @when "Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars." (https://vercel.com/geist/skeleton)
+ * Ours: a group of placeholders sits in the `SkeletonRegion` that later holds the data.
+ * @instead "For a single in-flight action, use `Spinner`; for an indeterminate inline wait, use `LoadingDots`; for known progress, use `Progress`." "Don’t use Skeleton as permanent decoration or as a placeholder for empty states." "When there’s no data to load, render an `EmptyState`." (https://vercel.com/geist/skeleton)
+ * Ours: there is no spinner and no loading dots: a wait on something the person pressed is `PendingLabel` and `WaitingLine`. An unknown layout shows nothing until the data arrives.
+ * @behaviour "Set `width` and `height` to match the final content so the layout doesn’t shift when data resolves." "A 200×20 block becoming an 80×16 string reads as a glitch." "Pick `pill`, `rounded`, or `squared` to mirror the eventual element’s shape (avatars `pill`, buttons and chips `rounded`, image tiles `squared`)." "When the skeleton wraps children, keep dimensions stable so the reveal swap doesn’t reflow surrounding content." "If you do not pass a fixed size, it will be calculated automatically." "The skeleton will hide when children are not null, but the size is retained." (https://vercel.com/geist/skeleton)
+ * Ours: `pill` is `circle` and `rounded` is `rectangle`. A skeleton with neither a size nor a child does not compile: `height` with `width`, or `className` for a size a token sets (`h-4 w-full`; the type cannot check that it holds one), or `boxHeight` with `height` for a text line, where the bar sits at the top of the box and the rest is space below it. Given a size, pass the content as children, `null` until it arrives: the bar shows, then the content replaces it in the same box. Without a size, wrap the real control and `show` covers it, `show={false}` reveals it, rather than drawing a twin of it. Still: it never pulses or shimmers. It resolves to data, an absence or a failure.
+ * @words Ours: none. No "Loading" text beside it.
+ * @access "Skeletons are decorative; avoid placing focusable controls inside them while loading." "Disable the shimmer with the `no animation` variant on low-power surfaces and respect `prefers-reduced-motion`." (https://vercel.com/geist/skeleton)
+ * Ours: hidden from assistive technology and never focusable; an unsized wrapper covers its children inert and is `aria-busy` while it covers them. There is no shimmer to disable, so the placeholder is the same under `prefers-reduced-motion`. A group of bare placeholders needs a `SkeletonRegion`.
  */
-declare function Skeleton({ className, shape, ...props }: React.ComponentProps<"div"> & {
-    shape?: "rectangle" | "circle";
+declare function Skeleton({ boxHeight, children, className, height, shape, show, style, width, ...props }: SkeletonProps): import("react").JSX.Element;
+/**
+ * The container that shows placeholders and then the data, announced as busy while it loads.
+ *
+ * @family Feedback
+ * @when Ours: around the placeholders of a page or a card and the data that replaces them. In a component that renders both, it announces the data when it arrives. In a route's `loading` view it only marks the wait, since that view is unmounted when the page streams in; the page's own region announces the arrival.
+ * @instead Ours: a single `Skeleton` that wraps its content marks itself busy and needs no region.
+ * @behaviour Ours: `busy` is required: true while placeholders show, false in the same render that puts the data in. The same element goes from busy to not busy, so the change is announced once.
+ * @words Ours: none.
+ * @access "Wrap the loading region in `aria-busy="true"` and announce completion with `aria-live="polite"` on the destination container, not the skeleton itself." (https://vercel.com/geist/skeleton)
+ * Ours: `aria-busy` and a polite live region while loading, so the data that arrives is announced from the container that holds it; once loaded it is no live region, so a later change in the data, such as a row's status, is not read out wherever the reader is.
+ */
+declare function SkeletonRegion({ busy, ...props }: React.ComponentProps<"div"> & {
+    busy: boolean;
 }): import("react").JSX.Element;
-export { Skeleton };
+export { Skeleton, SkeletonRegion };
 //# sourceMappingURL=skeleton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CAChC,+BASA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAGjE,QAAA,MAAM,YAAY;;;;CAIR,CAAC;AAEX,KAAK,aAAa,GAAG,MAAM,OAAO,YAAY,CAAC;AAE/C,KAAK,cAAc,GACf;IACE,QAAQ,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEN,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,cAAc,GAAG;IACf,sFAAsF;IACtF,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,6JAA6J;IAC7J,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC5B,CAAC;AAMJ;;;;;;;;;;;;;GAaG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAmB,EACnB,IAAW,EACX,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,+BAiEf;AAED;;;;;;;;;;GAUG;AACH,iBAAS,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,+BAS1F;AAED,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/skeleton.js

@@ -1,16 +1,51 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+const shapeClasses = {
+    rectangle: "rounded-sm",
+    circle: "rounded-full",
+    squared: "rounded-none",
+};
+function hasNoContent(children) {
+    return children === undefined || children === null || children === true || children === false;
+}
 /**
  * A still placeholder in the shape of content whose layout is known.
  *
  * @family Feedback
- * @when A page or region whose layout is known while its data loads.
- * @instead For a wait on something the person pressed use `PendingLabel` and `WaitingLine`. Unknown layout shows nothing until data. Never both a skeleton and a line.
- * @behaviour The `line` fill, which stays visible on the card and on the workspace ground in both modes; 6 px corners or a circle, in the final shape so nothing shifts. Never pulses. Resolves to data, an absence or a failure.
- * @words None. No "Loading" text beside it.
- * @access The region is `aria-busy`; each placeholder is hidden and never focusable.
+ * @when "Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars." (https://vercel.com/geist/skeleton)
+ * Ours: a group of placeholders sits in the `SkeletonRegion` that later holds the data.
+ * @instead "For a single in-flight action, use `Spinner`; for an indeterminate inline wait, use `LoadingDots`; for known progress, use `Progress`." "Don’t use Skeleton as permanent decoration or as a placeholder for empty states." "When there’s no data to load, render an `EmptyState`." (https://vercel.com/geist/skeleton)
+ * Ours: there is no spinner and no loading dots: a wait on something the person pressed is `PendingLabel` and `WaitingLine`. An unknown layout shows nothing until the data arrives.
+ * @behaviour "Set `width` and `height` to match the final content so the layout doesn’t shift when data resolves." "A 200×20 block becoming an 80×16 string reads as a glitch." "Pick `pill`, `rounded`, or `squared` to mirror the eventual element’s shape (avatars `pill`, buttons and chips `rounded`, image tiles `squared`)." "When the skeleton wraps children, keep dimensions stable so the reveal swap doesn’t reflow surrounding content." "If you do not pass a fixed size, it will be calculated automatically." "The skeleton will hide when children are not null, but the size is retained." (https://vercel.com/geist/skeleton)
+ * Ours: `pill` is `circle` and `rounded` is `rectangle`. A skeleton with neither a size nor a child does not compile: `height` with `width`, or `className` for a size a token sets (`h-4 w-full`; the type cannot check that it holds one), or `boxHeight` with `height` for a text line, where the bar sits at the top of the box and the rest is space below it. Given a size, pass the content as children, `null` until it arrives: the bar shows, then the content replaces it in the same box. Without a size, wrap the real control and `show` covers it, `show={false}` reveals it, rather than drawing a twin of it. Still: it never pulses or shimmers. It resolves to data, an absence or a failure.
+ * @words Ours: none. No "Loading" text beside it.
+ * @access "Skeletons are decorative; avoid placing focusable controls inside them while loading." "Disable the shimmer with the `no animation` variant on low-power surfaces and respect `prefers-reduced-motion`." (https://vercel.com/geist/skeleton)
+ * Ours: hidden from assistive technology and never focusable; an unsized wrapper covers its children inert and is `aria-busy` while it covers them. There is no shimmer to disable, so the placeholder is the same under `prefers-reduced-motion`. A group of bare placeholders needs a `SkeletonRegion`.
+ */
+function Skeleton({ boxHeight, children, className, height, shape = "rectangle", show = true, style, width, ...props }) {
+    if (hasNoContent(children)) {
+        if (boxHeight !== undefined) {
+            return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", className: cn("flex items-start", className), style: { width, height: boxHeight, ...style }, ...props, children: show ? (_jsx("div", { className: cn("w-full bg-border", shapeClasses[shape]), style: { height } })) : null }));
+        }
+        return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", className: cn(show && "bg-border", shapeClasses[shape], className), style: { width, height, ...style }, ...props }));
+    }
+    if (height !== undefined) {
+        return (_jsx("div", { "data-slot": "skeleton", className: className, style: { width, height: boxHeight ?? height, ...style }, ...props, children: children }));
+    }
+    return (_jsx("div", { "aria-busy": show || undefined, "data-slot": "skeleton", className: cn("relative inline-flex max-w-full", className), style: style, ...props, children: show ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "invisible contents", inert: true, children: children }), _jsx("span", { "aria-hidden": "true", className: cn("absolute inset-0 bg-border", shapeClasses[shape]) })] })) : (children) }));
+}
+/**
+ * The container that shows placeholders and then the data, announced as busy while it loads.
+ *
+ * @family Feedback
+ * @when Ours: around the placeholders of a page or a card and the data that replaces them. In a component that renders both, it announces the data when it arrives. In a route's `loading` view it only marks the wait, since that view is unmounted when the page streams in; the page's own region announces the arrival.
+ * @instead Ours: a single `Skeleton` that wraps its content marks itself busy and needs no region.
+ * @behaviour Ours: `busy` is required: true while placeholders show, false in the same render that puts the data in. The same element goes from busy to not busy, so the change is announced once.
+ * @words Ours: none.
+ * @access "Wrap the loading region in `aria-busy="true"` and announce completion with `aria-live="polite"` on the destination container, not the skeleton itself." (https://vercel.com/geist/skeleton)
+ * Ours: `aria-busy` and a polite live region while loading, so the data that arrives is announced from the container that holds it; once loaded it is no live region, so a later change in the data, such as a row's status, is not read out wherever the reader is.
  */
-function Skeleton({ className, shape = "rectangle", ...props }) {
-    return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", className: cn("bg-border", shape === "circle" ? "rounded-full" : "rounded-sm", className), ...props }));
+function SkeletonRegion({ busy, ...props }) {
+    return (_jsx("div", { "aria-busy": busy, "aria-live": busy ? "polite" : undefined, "data-slot": "skeleton-region", ...props }));
 }
-export { Skeleton };
+export { Skeleton, SkeletonRegion };

package/dist/components/slider.d.ts

@@ -1,18 +1,60 @@
+import * as React from "react";
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+export type SliderValues = readonly [number] | readonly [number, number];
+export type SliderProps<Values extends SliderValues = readonly [number]> = Omit<SliderPrimitive.Root.Props<readonly number[]>, "aria-label" | "aria-labelledby" | "children" | "defaultValue" | "max" | "min" | "onValueChange" | "onValueCommitted" | "orientation" | "render" | "step" | "thumbAlignment" | "value"> & {
+    /** The real lower limit of the quantity, not a stand-in such as 0. */
+    min: number;
+    /** The real upper limit of the quantity. */
+    max: number;
+    /** A round increment, so a drag never lands on a value nobody would type. */
+    step: number;
+    /** Names the quantity; written above the track, with the live value beside it. */
+    label: string;
+    /** One number per thumb: a single value for one thumb, two for a range. */
+    value?: Values;
+    defaultValue?: Values;
+    onValueChange?: (value: Values) => void;
+    /** Fires once when a drag, a key press or a typed value settles, not on every step. */
+    onValueCommitted?: (value: Values) => void;
+    /** Writes the first value of a range in a box before the track; a single thumb has none. */
+    showStartInput?: Values extends readonly [number] ? never : boolean;
+    /** Writes the last value in a box after the track. */
+    showEndInput?: boolean;
+};
 /**
- * A bounded number chosen by a thumb's position on a track.
+ * A bounded number chosen by a thumb's position on a track, with its name and its live value.
  *
  * @family Inputs
- * @when A bounded number where the position matters more than the digit: a limit, a share.
- * @instead An exact number is `Input`; pair the two when precision counts. A few named levels are
- * radios.
- * @behaviour A 4 px track, the filled part in ink, a 12 px thumb edged in the input grey. Hover,
- * drag and focus outline the thumb. Arrows step, Page Up and Down jump, Home and End reach the
- * bounds. The thumb's touch target is 44 px.
- * @words The label names the quantity; the current value and its unit are always written beside it
- * (*€ 400*). The help states the bounds and the step.
- * @access `role="slider"` with a name, min, max and `aria-valuetext` carrying the unit.
+ * @when "Use a slider for ranged numeric input where shape and proximity matter more than
+ * precision: bandwidth caps, opacity, audio volume, color channels."
+ * (https://vercel.com/geist/slider) Ours: a limit, a share.
+ * @instead "For exact values like a port number or memory limit, pair the slider with a numeric
+ * `Input`; keyboard users default to typing." (https://vercel.com/geist/slider) Ours:
+ * `showEndInput`, and `showStartInput` on a range, add that box. A few named levels are radios.
+ * @behaviour "Snap to a sensible step (`1`, `5`, `10%`) so dragging never produces values like
+ * `47.83291`." (https://vercel.com/geist/slider) "Clamp `min` and `max` to real product limits."
+ * (https://vercel.com/geist/slider) "Always render the live value next to the track in tabular
+ * nums, and label what the number represents (`Sample Rate · 44 kHz`)."
+ * (https://vercel.com/geist/slider) "The track alone is not self-describing."
+ * (https://vercel.com/geist/slider) "Threshold colors (warning, error tints past a limit) should
+ * match the same numeric breakpoint surfaced elsewhere in the UI; don’t invent a slider-only
+ * threshold." (https://vercel.com/geist/slider) Ours: `label`, `min`, `max` and `step` are
+ * required. The label sits above the track at 13 px in the secondary grey, with the live value
+ * beside it. The track is 8 px high and grey, the filled part is blue, and the thumb is a 6 by 14
+ * px white bar; a disabled slider turns the filled part grey and leaves the rest. Colour: blue is
+ * the one hue, the filled part and nothing else. The thumb grows by a fifth while it is dragged
+ * (only the dragged one) or has keyboard focus, and hovering changes nothing. A range has two
+ * thumbs and cannot cross. A typed value is snapped to the step and kept inside the bounds when the
+ * box loses focus or Enter is pressed. `onValueCommitted` fires once when the change settles.
+ * @words Ours: the label names the quantity: *Monthly limit*. The unit comes from `format`, so the
+ * value reads *€400*, not 400. The help under the slider states the bounds and the step.
+ * @access "Give the slider an accessible name through a sibling `<label htmlFor>` or `aria-label`,
+ * and let the native arrow-key, Page Up/Down, Home/End behavior do the keyboard work."
+ * (https://vercel.com/geist/slider) "Don’t intercept those keys." (https://vercel.com/geist/slider)
+ * Ours: each thumb is `role="slider"` named by the label, with `aria-valuetext` carrying the unit
+ * from `format`. A single thumb and its box are named by the label; the two thumbs and the two
+ * boxes of a range by the label and their position, *Price 1* and *Price 2*.
  */
-declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react").JSX.Element;
+declare function Slider<Values extends SliderValues = readonly [number]>({ label, value, defaultValue, onValueChange, onValueCommitted, showStartInput, showEndInput, className, min, max, step, disabled, ...props }: SliderProps<Values>): React.JSX.Element;
 export { Slider };
 //# sourceMappingURL=slider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;;;;;;;;;;;GAaG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,+BAsC5B;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKlE,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEzE,MAAM,MAAM,WAAW,CAAC,MAAM,SAAS,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAC7E,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,MAAM,EAAE,CAAC,EAC3C,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,cAAc,GACd,KAAK,GACL,KAAK,GACL,eAAe,GACf,kBAAkB,GAClB,aAAa,GACb,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,OAAO,CACV,GAAG;IACF,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,SAAS,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,OAAO,CAAC;IACpE,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAwDF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,MAAM,CAAC,MAAM,SAAS,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,EAC/D,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,SAAS,EACT,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,MAAM,CAAC,qBAkFrB;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}