@devalok/shilp-sutra 0.56.0 → 0.59.0

package/dist/ui/sidebar.js

@@ -92,7 +92,7 @@ var M = g(({ side: e = "left", variant: t = "sidebar", collapsible: r = "offcanv
 	let { isMobile: c, state: l, openMobile: u, setOpenMobile: d } = A();
 	return r === "none" ? /* @__PURE__ */ C("aside", {
 		"aria-label": "Sidebar",
-		className: n("flex h-full w-(--sidebar-width) flex-col bg-surface-chrome text-surface-fg", i),
+		className: n("flex h-full w-(--sidebar-width) flex-col bg-surface-base text-surface-fg", i),
 		ref: s,
 		...o,
 		children: a
@@ -103,7 +103,7 @@ var M = g(({ side: e = "left", variant: t = "sidebar", collapsible: r = "offcanv
 		children: /* @__PURE__ */ C(m, {
 			"data-sidebar": "sidebar",
 			"data-mobile": "true",
-			className: "w-(--sidebar-width) bg-surface-chrome p-0 text-surface-fg [&>button]:hidden",
+			className: "w-(--sidebar-width) bg-surface-base p-0 text-surface-fg [&>button]:hidden",
 			style: { "--sidebar-width": D },
 			side: e,
 			responsive: !1,
@@ -125,12 +125,12 @@ var M = g(({ side: e = "left", variant: t = "sidebar", collapsible: r = "offcanv
 		"data-variant": t,
 		"data-side": e,
 		children: [/* @__PURE__ */ C("div", { className: n("relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t === "floating" || t === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), /* @__PURE__ */ C("div", {
-			className: n("fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex", e === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", t === "floating" || t === "inset" ? "p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", i),
+			className: n("fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex", e === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", t === "floating" || t === "inset" ? "p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) border-surface-border group-data-[side=left]:border-r group-data-[side=right]:border-l", i),
 			...o,
 			children: /* @__PURE__ */ C("aside", {
 				"aria-label": "Sidebar",
 				"data-sidebar": "sidebar",
-				className: "flex h-full w-full flex-col bg-surface-chrome group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised",
+				className: "flex h-full w-full flex-col bg-surface-base group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised",
 				children: a
 			})
 		})]
@@ -168,14 +168,14 @@ var P = g(({ className: e, ...t }, r) => {
 		tabIndex: -1,
 		onClick: i,
 		title: "Toggle Sidebar",
-		className: n("hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", "[[data-side=left]_&]:cursor-w-resize [[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 group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", e),
+		className: n("hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", "[[data-side=left]_&]:cursor-w-resize [[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 group-data-[collapsible=offcanvas]:hover:bg-surface-panel-hover", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", e),
 		...t
 	});
 });
 P.displayName = "SidebarRail";
 var F = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("main", {
 	ref: r,
-	className: n("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg md:peer-data-[variant=inset]:shadow-raised", e),
+	className: n("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg", e),
 	...t
 }));
 F.displayName = "SidebarInset";
@@ -183,7 +183,7 @@ var I = g(({ className: e, wrapperClassName: t, ...r }, i) => /* @__PURE__ */ C(
 	ref: i,
 	"data-sidebar": "input",
 	size: "sm",
-	wrapperClassName: n("bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9", t),
+	wrapperClassName: n("bg-surface-panel shadow-none focus-within:ring-2 focus-within:ring-accent-9", t),
 	className: n("w-full", e),
 	...r
 }));
@@ -233,7 +233,7 @@ H.displayName = "SidebarGroupLabel";
 var U = g(({ className: t, asChild: r = !1, ...i }, a) => /* @__PURE__ */ C(r ? e : "button", {
 	ref: a,
 	"data-sidebar": "group-action",
-	className: n("hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", t),
+	className: n("hover:bg-surface-panel-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", t),
 	...i
 }));
 U.displayName = "SidebarGroupAction";
@@ -258,11 +258,11 @@ var K = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("li", {
 	...t
 }));
 K.displayName = "SidebarMenuItem";
-var ce = ne("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
+var ce = ne("peer/menu-button hover:bg-surface-panel-hover active:bg-surface-panel-active data-[active=true]:bg-accent-4 data-[state=open]:hover:bg-surface-panel-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
 	variants: {
 		variant: {
-			default: "hover:bg-surface-raised-hover hover:text-surface-fg",
-			outline: "hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
+			default: "hover:bg-surface-panel-hover hover:text-surface-fg",
+			outline: "hover:bg-surface-panel-hover bg-surface-panel shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
 		},
 		size: {
 			md: "h-ds-sm text-body-md",
@@ -287,7 +287,7 @@ var ce = ne("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 d
 		...p,
 		children: r ? d : /* @__PURE__ */ w(S, { children: [i && /* @__PURE__ */ C(E.span, {
 			layoutId: "sidebar-active-indicator",
-			className: "absolute inset-0 rounded-control bg-accent-2",
+			className: "absolute inset-0 rounded-control bg-accent-4",
 			transition: t.smooth
 		}), /* @__PURE__ */ C("span", {
 			className: "relative z-[1] flex w-full items-center gap-[inherit]",
@@ -308,7 +308,7 @@ q.displayName = "SidebarMenuButton";
 var J = g(({ className: t, asChild: r = !1, showOnHover: i = !1, ...a }, o) => /* @__PURE__ */ C(r ? e : "button", {
 	ref: o,
 	"data-sidebar": "menu-action",
-	className: n("hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", i && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0", t),
+	className: n("hover:bg-surface-panel-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", i && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0", t),
 	...a
 }));
 J.displayName = "SidebarMenuAction";
@@ -354,7 +354,7 @@ var $ = g(({ asChild: t = !1, size: r = "md", isActive: i, className: a, ...o },
 	"data-sidebar": "menu-sub-button",
 	"data-size": r,
 	"data-active": i,
-	className: n("hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg", r === "sm" && "text-body-sm", r === "md" && "text-body-md", "group-data-[collapsible=icon]:hidden", a),
+	className: n("hover:bg-surface-panel-hover active:bg-surface-panel-active flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-4 data-[active=true]:text-surface-fg", r === "sm" && "text-body-sm", r === "md" && "text-body-md", "group-data-[collapsible=icon]:hidden", a),
 	...o
 }));
 $.displayName = "SidebarMenuSubButton";

package/dist/ui/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n  ComponentProps,\n  createContext,\n  CSSProperties,\n  ElementRef,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = useState(false)\n    const [_open, _setOpen] = useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n        if (typeof document !== 'undefined') {\n          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        }\n      },\n      [setOpenProp, open],\n    )\n\n    const toggleSidebar = useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      ],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as CSSProperties\n            }\n            className={cn(\n              'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n  side,\n  onClose,\n  children,\n}: {\n  side: 'left' | 'right'\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  const isReduced = useReducedMotion()\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  // For a left sidebar, user swipes left (negative x) to close.\n  // For a right sidebar, user swipes right (positive x) to close.\n  const dragAxis = 'x' as const\n  const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n  return (\n    <motion.div\n      ref={panelRef}\n      className=\"h-full w-full\"\n      drag={!isReduced ? dragAxis : false}\n      dragConstraints={dragConstraints}\n      dragElastic={0.2}\n      onDragEnd={(\n        _: unknown,\n        info: { offset: { x: number }; velocity: { x: number } },\n      ) => {\n        const w = panelRef.current?.getBoundingClientRect().width ?? 280\n        if (side === 'left') {\n          // Swipe left to close: negative offset\n          if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n            onClose()\n          }\n        } else {\n          // Swipe right to close: positive offset\n          if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n            onClose()\n          }\n        }\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nconst Sidebar = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'sidebar' | 'floating' | 'inset'\n    collapsible?: 'offcanvas' | 'icon' | 'none'\n  }\n>(\n  (\n    {\n      side = 'left',\n      variant = 'sidebar',\n      collapsible = 'offcanvas',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === 'none') {\n      return (\n        <aside\n          aria-label=\"Sidebar\"\n          className={cn(\n            'flex h-full w-(--sidebar-width) flex-col bg-surface-chrome text-surface-fg',\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </aside>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-surface-chrome p-0 text-surface-fg [&>button]:hidden\"\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n              } as CSSProperties\n            }\n            side={side}\n            responsive={false}\n          >\n            <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n              <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n            </SidebarSwipeWrapper>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-surface-fg md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n      >\n        <div\n          className={cn(\n            'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\n            'group-data-[collapsible=offcanvas]:w-0',\n            'group-data-[side=right]:rotate-180',\n            variant === 'floating' || variant === 'inset'\n              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n          )}\n        />\n        <div\n          className={cn(\n            'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\n            side === 'left'\n              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n            variant === 'floating' || variant === 'inset'\n              ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n            className,\n          )}\n          {...props}\n        >\n          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-chrome group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised\"\n          >\n            {children}\n          </aside>\n        </div>\n      </div>\n    )\n  },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n  ElementRef<typeof Button>,\n  ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon-md\"\n      className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover',\n          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n          'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg md:peer-data-[variant=inset]:shadow-raised',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n  ElementRef<typeof Input>,\n  ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      size=\"sm\"\n      wrapperClassName={cn(\n        'bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n        wrapperClassName,\n      )}\n      className={cn('w-full', className)}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n  ElementRef<typeof Separator>,\n  ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\n        'bg-surface-border mx-ds-03 w-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-body-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-body-md', className)}\n      {...props}\n    />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'hover:bg-surface-raised-hover hover:text-surface-fg',\n        outline:\n          'hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n      },\n      size: {\n        md: 'h-ds-sm text-body-md',\n        sm: 'h-ds-xs-plus text-body-sm',\n        lg: 'h-ds-lg text-body-md group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst SidebarMenuButton = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = 'default',\n      size = 'md',\n      tooltip,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n        {...props}\n      >\n        {asChild ? children : (\n          <>\n            {isActive && (\n              <motion.span\n                layoutId=\"sidebar-active-indicator\"\n                className=\"absolute inset-0 rounded-control bg-accent-2\"\n                transition={springs.smooth}\n              />\n            )}\n            <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n          </>\n        )}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== 'collapsed' || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-body-sm font-medium tabular-nums text-surface-fg',\n        'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  const width = useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-control\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n  HTMLAnchorElement,\n  ComponentProps<'a'> & {\n    asChild?: boolean\n    size?: 'sm' | 'md'\n    isActive?: boolean\n  }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n        'data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg',\n        size === 'sm' && 'text-body-sm',\n        size === 'md' && 'text-body-md',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n  ComponentProps,\n  createContext,\n  CSSProperties,\n  ElementRef,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = useState(false)\n    const [_open, _setOpen] = useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n        if (typeof document !== 'undefined') {\n          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        }\n      },\n      [setOpenProp, open],\n    )\n\n    const toggleSidebar = useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      ],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as CSSProperties\n            }\n            className={cn(\n              'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n  side,\n  onClose,\n  children,\n}: {\n  side: 'left' | 'right'\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  const isReduced = useReducedMotion()\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  // For a left sidebar, user swipes left (negative x) to close.\n  // For a right sidebar, user swipes right (positive x) to close.\n  const dragAxis = 'x' as const\n  const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n  return (\n    <motion.div\n      ref={panelRef}\n      className=\"h-full w-full\"\n      drag={!isReduced ? dragAxis : false}\n      dragConstraints={dragConstraints}\n      dragElastic={0.2}\n      onDragEnd={(\n        _: unknown,\n        info: { offset: { x: number }; velocity: { x: number } },\n      ) => {\n        const w = panelRef.current?.getBoundingClientRect().width ?? 280\n        if (side === 'left') {\n          // Swipe left to close: negative offset\n          if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n            onClose()\n          }\n        } else {\n          // Swipe right to close: positive offset\n          if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n            onClose()\n          }\n        }\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nconst Sidebar = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'sidebar' | 'floating' | 'inset'\n    collapsible?: 'offcanvas' | 'icon' | 'none'\n  }\n>(\n  (\n    {\n      side = 'left',\n      variant = 'sidebar',\n      collapsible = 'offcanvas',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === 'none') {\n      return (\n        <aside\n          aria-label=\"Sidebar\"\n          className={cn(\n            'flex h-full w-(--sidebar-width) flex-col bg-surface-base text-surface-fg',\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </aside>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-surface-base p-0 text-surface-fg [&>button]:hidden\"\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n              } as CSSProperties\n            }\n            side={side}\n            responsive={false}\n          >\n            <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n              <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n            </SidebarSwipeWrapper>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-surface-fg md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n      >\n        <div\n          className={cn(\n            'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\n            'group-data-[collapsible=offcanvas]:w-0',\n            'group-data-[side=right]:rotate-180',\n            variant === 'floating' || variant === 'inset'\n              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n          )}\n        />\n        <div\n          className={cn(\n            'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\n            side === 'left'\n              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n            variant === 'floating' || variant === 'inset'\n              ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]'\n              // `border-surface-border` is load-bearing: Tailwind 4 leaves an\n              // uncoloured border at `currentColor`, so a bare `border-r` here\n              // inherited `text-surface-fg` and drew a 12.69:1 (light) /\n              // 15.44:1 (dark) rule down the full height of the app.\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) border-surface-border group-data-[side=left]:border-r group-data-[side=right]:border-l',\n            className,\n          )}\n          {...props}\n        >\n          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-base group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised\"\n          >\n            {children}\n          </aside>\n        </div>\n      </div>\n    )\n  },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n  ElementRef<typeof Button>,\n  ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon-md\"\n      className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-panel-hover',\n          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n          'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n  ElementRef<typeof Input>,\n  ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      size=\"sm\"\n      wrapperClassName={cn(\n        'bg-surface-panel shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n        wrapperClassName,\n      )}\n      className={cn('w-full', className)}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n  ElementRef<typeof Separator>,\n  ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\n        'bg-surface-border mx-ds-03 w-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-body-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        'hover:bg-surface-panel-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-body-md', className)}\n      {...props}\n    />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button hover:bg-surface-panel-hover active:bg-surface-panel-active data-[active=true]:bg-accent-4 data-[state=open]:hover:bg-surface-panel-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'hover:bg-surface-panel-hover hover:text-surface-fg',\n        outline:\n          'hover:bg-surface-panel-hover bg-surface-panel shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n      },\n      size: {\n        md: 'h-ds-sm text-body-md',\n        sm: 'h-ds-xs-plus text-body-sm',\n        lg: 'h-ds-lg text-body-md group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst SidebarMenuButton = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = 'default',\n      size = 'md',\n      tooltip,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n        {...props}\n      >\n        {asChild ? children : (\n          <>\n            {isActive && (\n              <motion.span\n                layoutId=\"sidebar-active-indicator\"\n                className=\"absolute inset-0 rounded-control bg-accent-4\"\n                transition={springs.smooth}\n              />\n            )}\n            <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n          </>\n        )}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== 'collapsed' || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'hover:bg-surface-panel-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-body-sm font-medium tabular-nums text-surface-fg',\n        'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  const width = useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-control\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n  HTMLAnchorElement,\n  ComponentProps<'a'> & {\n    asChild?: boolean\n    size?: 'sm' | 'md'\n    isActive?: boolean\n  }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'hover:bg-surface-panel-hover active:bg-surface-panel-active flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n        'data-[active=true]:bg-accent-4 data-[active=true]:text-surface-fg',\n        size === 'sm' && 'text-body-sm',\n        size === 'md' && 'text-body-md',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoCA,IAAM,KAAsB,iBACtB,KAAyB,OAAU,KAAK,GACxC,KAAgB,SAChB,IAAuB,SACvB,IAAqB,QACrB,KAA4B,KAY5B,IAAiB,EAAqC,IAAI;AAEhE,SAAS,IAAa;CACpB,IAAM,IAAU,EAAW,CAAc;CACzC,IAAI,CAAC,GACH,MAAU,MAAM,mDAAmD;CAGrE,OAAO;AACT;AAEA,IAAM,IAAkB,GASpB,EACE,iBAAc,IACd,MAAM,GACN,cAAc,GACd,cACA,UACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAW,EAAY,GACvB,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,CAAC,GAAO,KAAY,EAAS,CAAW,GACxC,IAAO,KAAY,GACnB,IAAU,GACb,MAAmD;EAClD,IAAM,IAAY,OAAO,KAAU,aAAa,EAAM,CAAI,IAAI;EAM9D,AALI,IACF,EAAY,CAAS,IAErB,EAAS,CAAS,GAEhB,OAAO,WAAa,QACtB,SAAS,SAAS,GAAG,GAAoB,GAAG,EAAU,oBAAoB;CAE9E,GACA,CAAC,GAAa,CAAI,CACpB,GAEM,IAAgB,QACb,IACH,GAAe,MAAS,CAAC,CAAI,IAC7B,GAAS,MAAS,CAAC,CAAI,GAC1B;EAAC;EAAU;EAAS;CAAa,CAAC;CACrC,SAAgB;EACd,IAAM,KAAiB,MAAyB;GAC9C,AACE,EAAM,QAAQ,OACb,EAAM,WAAW,EAAM,aAExB,EAAM,eAAe,GACrB,EAAc;EAElB;EAGA,OADA,OAAO,iBAAiB,WAAW,CAAa,SACnC,OAAO,oBAAoB,WAAW,CAAa;CAClE,GAAG,CAAC,CAAa,CAAC;CAClB,IAAM,IAAQ,IAAO,aAAa,aAE5B,IAAe,SACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,kBAAC,EAAe,UAAhB;EAAyB,OAAO;YAC9B,kBAAC,GAAD;GAAiB,eAAe;aAC9B,kBAAC,OAAD;IACE,OACE;KACE,mBAAmB;KACnB,wBAAwB;KACxB,GAAG;IACL;IAEF,WAAW,EACT,qFACA,CACF;IACK;IACL,GAAI;IAEH;GACE,CAAA;EACU,CAAA;CACM,CAAA;AAE7B,CACF;AACA,EAAgB,cAAc;AAM9B,SAAS,GAAoB,EAC3B,SACA,YACA,eAKC;CACD,IAAM,IAAY,GAAiB,GAC7B,IAAW,EAAuB,IAAI,GAKtC,IAAkB,MAAS,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE;CAEnE,OACE,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,WAAU;EACV,MAAM,CAAC,KAAY;EACF;EACjB,aAAa;EACb,YACE,GACA,MACG;GACH,IAAM,IAAI,EAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS;GAC7D,AAAI,MAAS,UAEP,EAAK,OAAO,IAAI,EAAE,IAAI,OAAQ,EAAK,SAAS,IAAI,SAClD,EAAQ,KAIN,EAAK,OAAO,IAAI,IAAI,MAAO,EAAK,SAAS,IAAI,QAC/C,EAAQ;EAGd;EAEC;CACS,CAAA;AAEhB;AAEA,IAAM,IAAU,GASZ,EACE,UAAO,QACP,aAAU,WACV,iBAAc,aACd,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,EAAE,aAAU,UAAO,eAAY,qBAAkB,EAAW;CAyClE,OAvCI,MAAgB,SAEhB,kBAAC,SAAD;EACE,cAAW;EACX,WAAW,EACT,4EACA,CACF;EACK;EACL,GAAI;EAEH;CACI,CAAA,IAIP,IAEA,kBAAC,GAAD;EAAO,MAAM;EAAY,cAAc;EAAe,GAAI;YACxD,kBAAC,GAAD;GACE,gBAAa;GACb,eAAY;GACZ,WAAU;GACV,OACE,EACE,mBAAmB,EACrB;GAEI;GACN,YAAY;aAEZ,kBAAC,IAAD;IAA2B;IAAM,eAAe,EAAc,EAAK;cACjE,kBAAC,SAAD;KAAO,cAAW;KAAU,WAAU;KAA+B;IAAgB,CAAA;GAClE,CAAA;EACT,CAAA;CACT,CAAA,IAKT,kBAAC,OAAD;EACO;EACL,WAAU;EACV,cAAY;EACZ,oBAAkB,MAAU,cAAc,IAAc;EACxD,gBAAc;EACd,aAAW;YANb,CAQE,kBAAC,OAAD,EACE,WAAW,EACT,kHACA,0CACA,sCACA,MAAY,cAAc,MAAY,UAClC,6EACA,wDACN,EACD,CAAA,GACD,kBAAC,OAAD;GACE,WAAW,EACT,6IACA,MAAS,SACL,mFACA,oFACJ,MAAY,cAAc,MAAY,UAClC,0FAKA,iJACJ,CACF;GACA,GAAI;aAEJ,kBAAC,SAAD;IACE,cAAW;IACX,gBAAa;IACb,WAAU;IAET;GACI,CAAA;EACJ,CAAA,CACF;;AAET,CACF;AACA,EAAQ,cAAc;AAEtB,IAAM,IAAiB,GAGpB,EAAE,cAAW,YAAS,GAAG,KAAS,MAAQ;CAC3C,IAAM,EAAE,qBAAkB,EAAW;CAErC,OACE,kBAAC,GAAD;EACO;EACL,gBAAa;EACb,SAAQ;EACR,MAAK;EACL,WAAW,EAAG,6BAA6B,CAAS;EACpD,UAAU,MAAU;GAElB,AADA,IAAU,CAAK,GACf,EAAc;EAChB;EACA,GAAI;YAVN,CAYE,kBAAC,GAAD;GAAM,MAAM;GAA+B,MAAK;EAAM,CAAA,GACtD,kBAAC,QAAD;GAAM,WAAU;aAAU;EAAoB,CAAA,CACxC;;AAEZ,CAAC;AACD,EAAe,cAAc;AAE7B,IAAM,IAAc,GACjB,EAAE,cAAW,GAAG,KAAS,MAAQ;CAChC,IAAM,EAAE,qBAAkB,EAAW;CAErC,OACE,kBAAC,UAAD;EACO;EACL,gBAAa;EACb,cAAW;EACX,UAAU;EACV,SAAS;EACT,OAAM;EACN,WAAW,EACT,8QACA,8EACA,0HACA,uKACA,6DACA,6DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AACA,EAAY,cAAc;AAE1B,IAAM,IAAe,GAClB,EAAE,cAAW,GAAG,KAAS,MAEtB,kBAAC,QAAD;CACO;CACL,WAAW,EACT,2DACA,gPACA,CACF;CACA,GAAI;AACL,CAAA,CAGP;AACA,EAAa,cAAc;AAE3B,IAAM,IAAe,GAGlB,EAAE,cAAW,qBAAkB,GAAG,KAAS,MAE1C,kBAAC,GAAD;CACO;CACL,gBAAa;CACb,MAAK;CACL,kBAAkB,EAChB,+EACA,CACF;CACA,WAAW,EAAG,UAAU,CAAS;CACjC,GAAI;AACL,CAAA,CAEJ;AACD,EAAa,cAAc;AAE3B,IAAM,IAAgB,GACnB,EAAE,cAAW,GAAG,KAAS,MAEtB,kBAAC,OAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,mCAAmC,CAAS;CAC1D,GAAI;AACL,CAAA,CAGP;AACA,EAAc,cAAc;AAE5B,IAAM,IAAgB,GACnB,EAAE,cAAW,GAAG,KAAS,MAEtB,kBAAC,OAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,mCAAmC,CAAS;CAC1D,GAAI;AACL,CAAA,CAGP;AACA,EAAc,cAAc;AAE5B,IAAM,IAAmB,GAGtB,EAAE,cAAW,GAAG,KAAS,MAExB,kBAAC,GAAD;CACO;CACL,gBAAa;CACb,WAAW,EACT,qCACA,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAiB,cAAc;AAE/B,IAAM,IAAiB,GACpB,EAAE,cAAW,GAAG,KAAS,MAEtB,kBAAC,OAAD;CACO;CACL,gBAAa;CACb,WAAW,EACT,sGACA,CACF;CACA,GAAI;AACL,CAAA,CAGP;AACA,EAAe,cAAc;AAE7B,IAAM,IAAe,GAClB,EAAE,cAAW,GAAG,KAAS,MAEtB,kBAAC,OAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,iDAAiD,CAAS;CACxE,GAAI;AACL,CAAA,CAGP;AACA,EAAa,cAAc;AAE3B,IAAM,IAAoB,GAGvB,EAAE,cAAW,aAAU,IAAO,GAAG,KAAS,MAIzC,kBAHW,IAAU,IAAO,OAG5B;CACO;CACL,gBAAa;CACb,WAAW,EACT,yRACA,+EACA,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAkB,cAAc;AAEhC,IAAM,IAAqB,GAGxB,EAAE,cAAW,aAAU,IAAO,GAAG,KAAS,MAIzC,kBAHW,IAAU,IAAO,UAG5B;CACO;CACL,gBAAa;CACb,WAAW,EACT,sSACA,iDACA,wCACA,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAmB,cAAc;AAEjC,IAAM,IAAsB,GACzB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,uBAAuB,CAAS;CAC9C,GAAI;AACL,CAAA,CAEL;AACA,EAAoB,cAAc;AAElC,IAAM,IAAc,GACjB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,MAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc;AAE1B,IAAM,IAAkB,GACrB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,MAAD;CACO;CACL,gBAAa;CACb,WAAW,EAAG,4BAA4B,CAAS;CACnD,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,KAA4B,GAChC,2zBACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF,GAEM,IAAoB,GAStB,EACE,aAAU,IACV,cAAW,IACX,aAAU,WACV,UAAO,MACP,YACA,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,IAAU,IAAO,UACxB,EAAE,aAAU,aAAU,EAAW,GAEjC,IACJ,kBAAC,GAAD;EACO;EACL,gBAAa;EACb,aAAW;EACX,eAAa;EACb,WAAW,EAAG,GAA0B;GAAE;GAAS;EAAK,CAAC,GAAG,CAAC,KAAW,YAAY,CAAS;EAC7F,GAAI;YAEH,IAAU,IACT,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,EAAO,MAAR;GACE,UAAS;GACT,WAAU;GACV,YAAY,EAAQ;EACrB,CAAA,GAEH,kBAAC,QAAD;GAAM,WAAU;GAAyD;EAAe,CAAA,CACxF,EAAA,CAAA;CAEA,CAAA;CAaR,OAVK,KAID,OAAO,KAAY,aACrB,IAAU,EACR,UAAU,EACZ,IAIA,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAgB,SAAA;YAAS;CAAuB,CAAA,GAChD,kBAAC,GAAD;EACE,MAAK;EACL,OAAM;EACN,QAAQ,MAAU,eAAe;EACjC,GAAI;CACL,CAAA,CACM,EAAA,CAAA,KAlBF;AAoBX,CACF;AACA,EAAkB,cAAc;AAEhC,IAAM,IAAoB,GAMvB,EAAE,cAAW,aAAU,IAAO,iBAAc,IAAO,GAAG,KAAS,MAI9D,kBAHW,IAAU,IAAO,UAG5B;CACO;CACL,gBAAa;CACb,WAAW,EACT,8UACA,iDACA,yCACA,8CACA,6CACA,wCACA,KACE,6KACF,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAkB,cAAc;AAEhC,IAAM,IAAmB,GACtB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,gBAAa;CACb,WAAW,EACT,oLACA,8FACA,yCACA,8CACA,6CACA,wCACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAiB,cAAc;AAE/B,IAAM,IAAsB,GAKzB,EAAE,cAAW,cAAW,IAAO,GAAG,KAAS,MAAQ;CACpD,IAAM,IAAQ,QACL,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,EAAE,IAAI,GAAG,IAC7C,CAAC,CAAC;CAEL,OACE,kBAAC,OAAD;EACO;EACL,gBAAa;EACb,WAAW,EAAG,gEAAgE,CAAS;EACvF,GAAI;YAJN,CAMG,KACC,kBAAC,GAAD;GACE,WAAU;GACV,gBAAa;EACd,CAAA,GAEH,kBAAC,GAAD;GACE,WAAU;GACV,gBAAa;GACb,OACE,EACE,oBAAoB,EACtB;EAEH,CAAA,CACE;;AAET,CAAC;AACD,EAAoB,cAAc;AAElC,IAAM,IAAiB,GACpB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,MAAD;CACO;CACL,gBAAa;CACb,WAAW,EACT,4GACA,wCACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAe,cAAc;AAE7B,IAAM,IAAqB,GACxB,EAAE,GAAG,KAAS,MAAQ,kBAAC,MAAD;CAAS;CAAK,GAAI;AAAQ,CAAA,CACnD;AACA,EAAmB,cAAc;AAEjC,IAAM,IAAuB,GAO1B,EAAE,aAAU,IAAO,UAAO,MAAM,aAAU,cAAW,GAAG,KAAS,MAIhE,kBAHW,IAAU,IAAO,KAG5B;CACO;CACL,gBAAa;CACb,aAAW;CACX,eAAa;CACb,WAAW,EACT,sgBACA,qEACA,MAAS,QAAQ,gBACjB,MAAS,QAAQ,gBACjB,wCACA,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAqB,cAAc"}

package/dist/ui/slider.d.ts

@@ -10,25 +10,79 @@ declare const sliderThumbVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>;
 export type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>;
+/** One tick on the scale. A bare number is shorthand for `{ value: n, label: n }`. */
+export interface SliderMark {
+    /** Position on the scale, in the slider's own units (between `min` and `max`). */
+    value: number;
+    /**
+     * What to print under the tick. Defaults to the value itself. Pass `null`
+     * for a tick with no caption.
+     */
+    label?: React.ReactNode;
+}
+export interface SliderMarkProps extends SliderMark {
+    /** Caption for this tick. Overrides `label`. */
+    children?: React.ReactNode;
+}
+/**
+ * A single tick, as a child of `Slider`.
+ *
+ * ```tsx
+ * <Slider>
+ *   <Slider.Mark value={30}>Launch</Slider.Mark>
+ * </Slider>
+ * ```
+ *
+ * Never rendered directly — `Slider` reads the props off it and draws the tick
+ * itself, because a tick has to be positioned against the track. Returning
+ * `null` keeps it out of the DOM if someone renders one outside a Slider.
+ */
+declare function SliderMarkComponent(_props: SliderMarkProps): React.ReactElement | null;
+declare namespace SliderMarkComponent {
+    var displayName: string;
+}
 export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {
     /** Size of the slider. Controls track height and thumb diameter. */
     size?: SliderSize;
     /** Color of the range fill and thumb border. */
     color?: SliderColor;
+    /**
+     * Tick marks along the scale. Numbers are shorthand, so
+     * `marks={[0, 50, 100]}` is the common case in one line. For custom captions
+     * use objects, or the `Slider.Mark` children form.
+     */
+    marks?: Array<number | SliderMark>;
+    /**
+     * Show the current value in a bubble above the thumb.
+     *
+     * - `false` (default) — no bubble.
+     * - `'always'` — always visible.
+     * - `'interact'` — only while the thumb is focused or being dragged, which
+     *   keeps a dense form quiet until someone is actually using the control.
+     *
+     * `true` is accepted as an alias for `'always'`.
+     */
+    showValue?: boolean | 'always' | 'interact';
+    /** Format the bubble's text. Defaults to the raw number. */
+    formatValue?: (value: number) => React.ReactNode;
 }
 /**
- * A Radix-powered slider supporting single or multiple thumbs.
- *
- * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`
- * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.
+ * Slider with an optional scale.
  *
- * When using multiple thumbs, provide per-thumb labels via the `aria-label` array
- * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.
+ * Two ways to declare ticks, because the common case should be one line and the
+ * custom case should still be possible:
  *
- * **Sizes:** `sm` | `md` (default) | `lg`
+ * ```tsx
+ * <Slider marks={[0, 25, 50, 75, 100]} />
  *
- * **Colors:** `accent` (default) | `success` | `warning` | `error`
+ * <Slider showValue="interact">
+ *   <Slider.Mark value={0}>Off</Slider.Mark>
+ *   <Slider.Mark value={80}>Recommended</Slider.Mark>
+ * </Slider>
+ * ```
  */
-declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>> & {
+    Mark: typeof SliderMarkComponent;
+};
 export { Slider, sliderThumbVariants, sliderTrackVariants };
 //# sourceMappingURL=slider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,mBAAmB;;8EAYxB,CAAA;AAED,QAAA,MAAM,mBAAmB;;;8EAkBxB,CAAA;AASD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACtF,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AAExF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAClF,oEAAoE;IACpE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,MAAM,qFAmDV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAC,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,mBAAmB;;8EAYxB,CAAA;AAED,QAAA,MAAM,mBAAmB;;;8EAwBxB,CAAA;AAKD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACtF,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AAExF,sFAAsF;AACtF,MAAM,WAAW,UAAU;IACzB,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAAC,MAAM,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAE/E;kBAFQ,mBAAmB;;;AAK5B,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAClF,oEAAoE;IACpE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAAA;IAClC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC3C,4DAA4D;IAC5D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CACjD;AAkKD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,MAAM;;CAA2D,CAAA;AAKvE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAC,mBAAmB,EAAE,CAAA"}

package/dist/ui/slider.js

@@ -6,7 +6,7 @@ import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 //#region src/ui/slider.tsx
-var u = l("relative w-full grow overflow-hidden rounded-pill bg-surface-raised-hover", {
+var u = l("relative w-full grow overflow-hidden rounded-pill bg-surface-panel-hover", {
 	variants: { size: {
 		sm: "h-ds-02",
 		md: "h-ds-02b",
@@ -21,45 +21,87 @@ var u = l("relative w-full grow overflow-hidden rounded-pill bg-surface-raised-h
 			lg: "h-8 w-8 border-[3px]"
 		},
 		color: {
-			accent: "border-accent-7 focus-visible:ring-accent-9",
-			success: "border-success-7 focus-visible:ring-success-9",
-			warning: "border-warning-7 focus-visible:ring-warning-9",
-			error: "border-error-7 focus-visible:ring-error-9"
+			accent: "border-palette-border-strong focus-visible:ring-palette-solid",
+			success: "border-palette-border-strong focus-visible:ring-palette-solid",
+			warning: "border-palette-border-strong focus-visible:ring-palette-solid",
+			error: "border-palette-border-strong focus-visible:ring-palette-solid"
 		}
 	},
 	defaultVariants: {
 		size: "md",
 		color: "accent"
 	}
-}), f = {
-	accent: "bg-accent-9",
-	success: "bg-success-9",
-	warning: "bg-warning-9",
-	error: "bg-error-9"
-}, p = o.forwardRef(({ className: o, "aria-label": l, value: p, defaultValue: m, size: h = "md", color: g = "accent", ..._ }, v) => {
-	let y = h ?? "md", b = g ?? "accent", x = t(), S = x.state === "error", C = _["aria-describedby"] ?? x.helperTextId, w = _["aria-required"] ?? x.required, T = (p ?? m ?? [0]).length;
+}), f = "bg-palette-solid";
+function p(e) {
+	return null;
+}
+p.displayName = "Slider.Mark";
+function m(e, t) {
+	let n = [];
+	for (let t of e ?? []) n.push(typeof t == "number" ? { value: t } : t);
+	return o.Children.forEach(t, (e) => {
+		if (!o.isValidElement(e) || e.type !== p) return;
+		let t = e.props;
+		n.push({
+			value: t.value,
+			label: t.children ?? t.label
+		});
+	}), n.sort((e, t) => e.value - t.value);
+}
+var h = o.forwardRef(({ className: l, "aria-label": p, value: h, defaultValue: g, size: _ = "md", color: v = "accent", marks: y, showValue: b = !1, formatValue: x, children: S, ...C }, w) => {
+	let T = _ ?? "md", E = v ?? "accent", D = t(), O = D.state === "error", k = C["aria-describedby"] ?? D.helperTextId, A = C["aria-required"] ?? D.required, j = h ?? g ?? [0], M = j.length, N = C.min ?? 0, P = (C.max ?? 100) - N || 1, F = m(y, S), I = F.length > 0, L = b === !0 ? "always" : b || void 0, [R, z] = o.useState(j), B = h ?? R, V = o.useCallback((e) => {
+		z(e), C.onValueChange?.(e);
+	}, [C]), [H, U] = o.useState(!1), W = L === "always" || L === "interact" && H;
 	return /* @__PURE__ */ c(r, {
-		ref: v,
-		value: p,
-		defaultValue: m,
-		"aria-invalid": S || void 0,
-		"aria-describedby": C,
-		"aria-required": w || void 0,
-		className: e("relative flex w-full touch-none select-none items-center", o),
-		..._,
-		children: [/* @__PURE__ */ s(a, {
-			className: u({ size: y }),
-			children: /* @__PURE__ */ s(n, { className: e("absolute h-full", f[b]) })
-		}), Array.from({ length: T }, (e, t) => /* @__PURE__ */ s(i, {
-			"aria-label": T === 1 ? l : void 0,
-			"aria-labelledby": T === 1 && !l ? x.labelId : void 0,
-			className: d({
-				size: y,
-				color: b
-			})
-		}, t))]
+		ref: w,
+		"data-palette": E,
+		value: h,
+		defaultValue: g,
+		"aria-invalid": O || void 0,
+		"aria-describedby": k,
+		"aria-required": A || void 0,
+		className: e("relative flex w-full touch-none select-none items-center", I && "mb-ds-05", l),
+		...C,
+		onValueChange: V,
+		children: [
+			/* @__PURE__ */ s(a, {
+				className: u({ size: T }),
+				children: /* @__PURE__ */ s(n, { className: e("absolute h-full", f) })
+			}),
+			I && /* @__PURE__ */ s("div", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-x-0 top-full",
+				children: F.map((e) => /* @__PURE__ */ c("div", {
+					className: "absolute flex -translate-x-1/2 flex-col items-center gap-ds-01",
+					style: { insetInlineStart: `${(e.value - N) / P * 100}%` },
+					children: [/* @__PURE__ */ s("span", { className: "h-ds-02 w-px bg-surface-border-strong" }), e.label !== null && /* @__PURE__ */ s("span", {
+						className: "text-label-xs text-surface-fg-subtle tabular-nums",
+						children: e.label ?? e.value
+					})]
+				}, e.value))
+			}),
+			Array.from({ length: M }, (t, n) => /* @__PURE__ */ s(i, {
+				onPointerDown: () => U(!0),
+				onPointerUp: () => U(!1),
+				onFocus: () => U(!0),
+				onBlur: () => U(!1),
+				"aria-label": M === 1 ? p : void 0,
+				"aria-labelledby": M === 1 && !p ? D.labelId : void 0,
+				className: d({
+					size: T,
+					color: E
+				}),
+				children: L && /* @__PURE__ */ s("span", {
+					"aria-hidden": "true",
+					"data-visible": W || void 0,
+					className: e("pointer-events-none absolute bottom-full left-1/2 mb-ds-02 -translate-x-1/2", "rounded-control-inner bg-palette-solid px-ds-02 py-ds-01", "text-label-xs tabular-nums text-palette-fg", "transition-opacity duration-fast-02 ease-productive-standard", "opacity-0 data-[visible]:opacity-100"),
+					children: x ? x(B[n]) : B[n]
+				})
+			}, n))
+		]
 	});
 });
-p.displayName = r.displayName;
+h.displayName = r.displayName;
+var g = Object.assign(h, { Mark: p });
 //#endregion
-export { p as Slider, d as sliderThumbVariants, u as sliderTrackVariants };
+export { g as Slider, d as sliderThumbVariants, u as sliderTrackVariants };

package/dist/ui/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-raised-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      color: {\n        accent: 'border-accent-7 focus-visible:ring-accent-9',\n        success: 'border-success-7 focus-visible:ring-success-9',\n        warning: 'border-warning-7 focus-visible:ring-warning-9',\n        error: 'border-error-7 focus-visible:ring-error-9',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\nconst sliderRangeColorMap: Record<string, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n}\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const thumbCount = (value ?? defaultValue ?? [0]).length\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', sliderRangeColorMap[color])} />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          // `role=\"slider\"` lives on the THUMB, and Radix renders Root as a\n          // <span> — not a labellable element — so `<Label htmlFor>` cannot name\n          // this control the way it names Input/Select. Without an explicit\n          // aria-label the thumb had NO accessible name even inside\n          // FormField + Label. Point it at the field's label instead.\n          //\n          // Single-thumb only: with a range, one label cannot disambiguate the\n          // two thumbs, so the consumer must name each (`aria-label` per thumb).\n          aria-labelledby={\n            thumbCount === 1 && !ariaLabel ? fieldCtx.labelId : undefined\n          }\n          className={sliderThumbVariants({ size, color })}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":";;;;;;;;AASA,IAAM,IAAsB,EAC1B,6EACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAAsB,EAC1B,gVACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAS;AACjD,CACF,GAEM,IAA8C;CAClD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;AACT,GA0BM,IAAS,EAAM,YAGlB,EAAE,cAAW,cAAc,GAAW,UAAO,iBAAc,MAAM,IAAW,MAAM,OAAO,IAAY,UAAU,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAO,KAAY,MACnB,IAAQ,KAAa,UACrB,IAAW,EAAa,GACxB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,KAAc,KAAS,KAAgB,CAAC,CAAC,EAAA,CAAG;CAElD,OACE,kBAAC,GAAD;EACO;EACE;EACO;EACd,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,4DACA,CACF;EACA,GAAI;YAXN,CAaE,kBAAC,GAAD;GAAuB,WAAW,EAAoB,EAAE,QAAK,CAAC;aAC5D,kBAAC,GAAD,EAAuB,WAAW,EAAG,mBAAmB,EAAoB,EAAM,EAAI,CAAA;EACjE,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MACtC,kBAAC,GAAD;GAEE,cAAY,MAAe,IAAK,IAAmC,KAAA;GASnE,mBACE,MAAe,KAAK,CAAC,IAAY,EAAS,UAAU,KAAA;GAEtD,WAAW,EAAoB;IAAE;IAAM;GAAM,CAAC;EAC/C,GAdM,CAcN,CACF,CACmB;;AAE1B,CAAC;AACD,EAAO,cAAA,EAAmC"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-panel-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      // The thumb keeps the OLD step-7 edge while every container in the system\n      // moved to step 4. PALETTE-EDGE-WHISPER was reasoned about card edges —\n      // an object you are meant to notice but not look at. A slider handle is\n      // the opposite: it is the thing you aim at, and it is the only part of the\n      // control that moves. Step 4 measured 1.37–1.49:1 against white; step 7 is\n      // 2.31–2.86:1. Recorded as SLIDER-THUMB-EDGE-STEP-7 in the register.\n      color: {\n        accent: 'border-palette-border-strong focus-visible:ring-palette-solid',\n        success: 'border-palette-border-strong focus-visible:ring-palette-solid',\n        warning: 'border-palette-border-strong focus-visible:ring-palette-solid',\n        error: 'border-palette-border-strong focus-visible:ring-palette-solid',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\n/** The filled portion of the track — one role for every colour. */\nconst SLIDER_RANGE_FILL = 'bg-palette-solid'\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\n/** One tick on the scale. A bare number is shorthand for `{ value: n, label: n }`. */\nexport interface SliderMark {\n  /** Position on the scale, in the slider's own units (between `min` and `max`). */\n  value: number\n  /**\n   * What to print under the tick. Defaults to the value itself. Pass `null`\n   * for a tick with no caption.\n   */\n  label?: React.ReactNode\n}\n\nexport interface SliderMarkProps extends SliderMark {\n  /** Caption for this tick. Overrides `label`. */\n  children?: React.ReactNode\n}\n\n/**\n * A single tick, as a child of `Slider`.\n *\n * ```tsx\n * <Slider>\n *   <Slider.Mark value={30}>Launch</Slider.Mark>\n * </Slider>\n * ```\n *\n * Never rendered directly — `Slider` reads the props off it and draws the tick\n * itself, because a tick has to be positioned against the track. Returning\n * `null` keeps it out of the DOM if someone renders one outside a Slider.\n */\nfunction SliderMarkComponent(_props: SliderMarkProps): React.ReactElement | null {\n  return null\n}\nSliderMarkComponent.displayName = 'Slider.Mark'\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n  /**\n   * Tick marks along the scale. Numbers are shorthand, so\n   * `marks={[0, 50, 100]}` is the common case in one line. For custom captions\n   * use objects, or the `Slider.Mark` children form.\n   */\n  marks?: Array<number | SliderMark>\n  /**\n   * Show the current value in a bubble above the thumb.\n   *\n   * - `false` (default) — no bubble.\n   * - `'always'` — always visible.\n   * - `'interact'` — only while the thumb is focused or being dragged, which\n   *   keeps a dense form quiet until someone is actually using the control.\n   *\n   * `true` is accepted as an alias for `'always'`.\n   */\n  showValue?: boolean | 'always' | 'interact'\n  /** Format the bubble's text. Defaults to the raw number. */\n  formatValue?: (value: number) => React.ReactNode\n}\n\n/** Normalise the two authoring forms into one list, sorted by position. */\nfunction collectMarks(\n  marks: SliderProps['marks'],\n  children: React.ReactNode,\n): SliderMark[] {\n  const out: SliderMark[] = []\n  for (const m of marks ?? []) {\n    out.push(typeof m === 'number' ? { value: m } : m)\n  }\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== SliderMarkComponent) return\n    const p = child.props as SliderMarkProps\n    out.push({ value: p.value, label: p.children ?? p.label })\n  })\n  return out.sort((a, b) => a.value - b.value)\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst SliderRoot = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', marks, showValue = false, formatValue, children, ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const resolvedValue = value ?? defaultValue ?? [0]\n  const thumbCount = resolvedValue.length\n\n  const min = props.min ?? 0\n  const max = props.max ?? 100\n  const span = max - min || 1\n\n  const allMarks = collectMarks(marks, children)\n  const hasMarks = allMarks.length > 0\n  const bubble = showValue === true ? 'always' : showValue || undefined\n\n  // Uncontrolled sliders move without re-rendering us, so the bubble has to\n  // track the primitive's own state rather than the `value` prop.\n  const [liveValues, setLiveValues] = React.useState<number[]>(resolvedValue)\n  const shownValues = value ?? liveValues\n  const handleValueChange = React.useCallback(\n    (next: number[]) => {\n      setLiveValues(next)\n      props.onValueChange?.(next)\n    },\n    [props],\n  )\n  const [interacting, setInteracting] = React.useState(false)\n  const bubbleVisible = bubble === 'always' || (bubble === 'interact' && interacting)\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      // One palette for the whole control, so the track fill and the thumb\n      // edge can never disagree.\n      data-palette={color}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        // Ticks sit under the track, so the control needs room for them or the\n        // captions collide with whatever follows in the form.\n        hasMarks && 'mb-ds-05',\n        className,\n      )}\n      {...props}\n      onValueChange={handleValueChange}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', SLIDER_RANGE_FILL)} />\n      </SliderPrimitive.Track>\n\n      {/* Ticks. Decorative — the value is already announced by the thumb's\n          role=\"slider\", so a screen reader reading these too would just be\n          noise. */}\n      {hasMarks && (\n        <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-full\">\n          {allMarks.map((m) => (\n            <div\n              key={m.value}\n              className=\"absolute flex -translate-x-1/2 flex-col items-center gap-ds-01\"\n              style={{ insetInlineStart: `${((m.value - min) / span) * 100}%` }}\n            >\n              <span className=\"h-ds-02 w-px bg-surface-border-strong\" />\n              {m.label !== null && (\n                <span className=\"text-label-xs text-surface-fg-subtle tabular-nums\">\n                  {m.label ?? m.value}\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          onPointerDown={() => setInteracting(true)}\n          onPointerUp={() => setInteracting(false)}\n          onFocus={() => setInteracting(true)}\n          onBlur={() => setInteracting(false)}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          // `role=\"slider\"` lives on the THUMB, and Radix renders Root as a\n          // <span> — not a labellable element — so `<Label htmlFor>` cannot name\n          // this control the way it names Input/Select. Without an explicit\n          // aria-label the thumb had NO accessible name even inside\n          // FormField + Label. Point it at the field's label instead.\n          //\n          // Single-thumb only: with a range, one label cannot disambiguate the\n          // two thumbs, so the consumer must name each (`aria-label` per thumb).\n          aria-labelledby={\n            thumbCount === 1 && !ariaLabel ? fieldCtx.labelId : undefined\n          }\n          className={sliderThumbVariants({ size, color })}\n        >\n          {/* Rendered INSIDE the thumb so it tracks the handle for free —\n              positioning a sibling would mean duplicating Radix's own maths and\n              re-deriving it on every drag. */}\n          {bubble && (\n            <span\n              aria-hidden=\"true\"\n              data-visible={bubbleVisible || undefined}\n              className={cn(\n                'pointer-events-none absolute bottom-full left-1/2 mb-ds-02 -translate-x-1/2',\n                'rounded-control-inner bg-palette-solid px-ds-02 py-ds-01',\n                'text-label-xs tabular-nums text-palette-fg',\n                'transition-opacity duration-fast-02 ease-productive-standard',\n                'opacity-0 data-[visible]:opacity-100',\n              )}\n            >\n              {formatValue ? formatValue(shownValues[i]) : shownValues[i]}\n            </span>\n          )}\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSliderRoot.displayName = SliderPrimitive.Root.displayName\n\n/**\n * Slider with an optional scale.\n *\n * Two ways to declare ticks, because the common case should be one line and the\n * custom case should still be possible:\n *\n * ```tsx\n * <Slider marks={[0, 25, 50, 75, 100]} />\n *\n * <Slider showValue=\"interact\">\n *   <Slider.Mark value={0}>Off</Slider.Mark>\n *   <Slider.Mark value={80}>Recommended</Slider.Mark>\n * </Slider>\n * ```\n */\nconst Slider = Object.assign(SliderRoot, { Mark: SliderMarkComponent })\n\n// The Mark component is reached as `Slider.Mark`, not exported standalone — a\n// second export named SliderMark would collide with the SliderMark interface,\n// which is the more useful public name (it types the `marks` prop).\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":"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"}

package/dist/ui/split-button.d.ts

@@ -29,8 +29,14 @@ export interface SplitButtonProps {
     onOpenChange?: (open: boolean) => void;
     /** @default 'solid' */
     variant?: SplitButtonVariant;
-    /** @default 'accent' */
-    color?: SplitButtonColor;
+    /**
+     * Palette name. The six built-ins are unchanged; any palette registered in
+     * CSS (`[data-palette='…']`) now works too. Widened from a closed union, so
+     * every existing value still type-checks.
+     *
+     * @default 'accent'
+     */
+    color?: SplitButtonColor | (string & {});
     /** @default 'md' */
     size?: SplitButtonSize;
     /** Disable both halves. */

package/dist/ui/split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ui/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAMzC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,GAC5B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GACnC,WAAW,GAAG,SAAS,GACvB,aAAa,GAAG,WAAW,GAC3B,cAAc,GAAG,YAAY,GAC7B,YAAY,GAAG,UAAU,CAAA;AAE7B,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AACtD,KAAK,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AACjF,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,2DAA2D;IAC3D,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,uBAAuB;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,wBAAwB;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8FD,QAAA,MAAM,WAAW,yFAuIhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAC,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ui/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAMzC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,GAC5B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GACnC,WAAW,GAAG,SAAS,GACvB,aAAa,GAAG,WAAW,GAC3B,cAAc,GAAG,YAAY,GAC7B,YAAY,GAAG,UAAU,CAAA;AAE7B,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AACtD,KAAK,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AACjF,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,2DAA2D;IAC3D,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,uBAAuB;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACxC,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiFD,QAAA,MAAM,WAAW,yFA2IhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAC,kBAAkB,EAAE,CAAA"}