@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/select.js

@@ -1,27 +1,28 @@
-import { cn } from "../lib/utils.js";
-import { surfaceClasses } from "./popover.js";
-import { fieldClasses } from "./input.js";
+"use client";
+import { cn, noOutlineClasses } from "../lib/utils.js";
+import { menuLabelClasses, surfaceClasses } from "./popover.js";
+import { fieldClasses, fieldWidthClasses } from "./input.js";
+import { Content as SelectContent$1, Group as SelectGroup$1, Icon as SelectIcon, Item as SelectItem$1, ItemIndicator as SelectItemIndicator, ItemText as SelectItemText, Label as SelectLabel$1, Portal as SelectPortal, Root as Select$1, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, SelectSeparator as SelectSeparator$1, SelectTrigger as SelectTrigger$1, SelectValue as SelectValue$1, SelectViewport } from "../primitives/vendor/radix/react-select/select.js";
+import * as React from "react";
 import ChevronDown from "@burtson-labs/icons/react/chevron-down";
-import { Select } from "radix-ui";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";
 import ChevronUp from "@burtson-labs/icons/react/chevron-up";
 //#region src/components/select.tsx
-function Select$1(props) {
-	return /* @__PURE__ */ jsx(Select.Root, {
+function Select(props) {
+	return /* @__PURE__ */ jsx(Select$1, {
 		"data-slot": "select",
 		...props
 	});
 }
 function SelectGroup(props) {
-	return /* @__PURE__ */ jsx(Select.Group, {
+	return /* @__PURE__ */ jsx(SelectGroup$1, {
 		"data-slot": "select-group",
 		...props
 	});
 }
 function SelectValue(props) {
-	return /* @__PURE__ */ jsx(Select.Value, {
+	return /* @__PURE__ */ jsx(SelectValue$1, {
 		"data-slot": "select-value",
 		...props
 	});
@@ -30,40 +31,42 @@ var triggerHeight = {
 	default: "h-9",
 	sm: "h-8"
 };
-function SelectTrigger({ className, size = "default", children, ...props }) {
-	return /* @__PURE__ */ jsxs(Select.Trigger, {
+var SelectTrigger = React.forwardRef(function SelectTrigger({ className, size = "default", width, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(SelectTrigger$1, {
+		ref,
 		"data-slot": "select-trigger",
 		"data-size": size,
-		className: cn(fieldClasses, "flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", triggerHeight[size], className),
+		className: cn(fieldClasses, "flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", triggerHeight[size], width && fieldWidthClasses[width], className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+		children: [children, /* @__PURE__ */ jsx(SelectIcon, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(ChevronDown, {
-				className: "size-4 opacity-60",
+				className: "size-4 text-muted-foreground",
 				"aria-hidden": true
 			})
 		})]
 	});
-}
-function SelectContent({ className, children, position = "popper", ...props }) {
-	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, {
+});
+var SelectContent = React.forwardRef(function SelectContent({ className, children, position = "popper", ...props }, ref) {
+	return /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsxs(SelectContent$1, {
+		ref,
 		"data-slot": "select-content",
 		className: cn(surfaceClasses, "relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
 		position,
 		...props,
 		children: [
-			/* @__PURE__ */ jsx(Select.ScrollUpButton, {
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {
 				className: "flex cursor-default items-center justify-center py-1",
 				children: /* @__PURE__ */ jsx(ChevronUp, {
 					className: "size-4",
 					"aria-hidden": true
 				})
 			}),
-			/* @__PURE__ */ jsx(Select.Viewport, {
+			/* @__PURE__ */ jsx(SelectViewport, {
 				className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"),
 				children
 			}),
-			/* @__PURE__ */ jsx(Select.ScrollDownButton, {
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {
 				className: "flex cursor-default items-center justify-center py-1",
 				children: /* @__PURE__ */ jsx(ChevronDown, {
 					className: "size-4",
@@ -72,36 +75,40 @@ function SelectContent({ className, children, position = "popper", ...props }) {
 			})
 		]
 	}) });
-}
-function SelectLabel({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Select.Label, {
+});
+var SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SelectLabel$1, {
+		ref,
 		"data-slot": "select-label",
-		className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase", className),
+		className: cn(menuLabelClasses, className),
 		...props
 	});
-}
-function SelectItem({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Select.Item, {
+});
+/** A row: 32px (44px on touch screens), 8px radius, a fill when active, a check when chosen. */
+var SelectItem = React.forwardRef(function SelectItem({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(SelectItem$1, {
+		ref,
 		"data-slot": "select-item",
-		className: cn("relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pointer-coarse:min-h-11", noOutlineClasses, "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute right-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
+			children: /* @__PURE__ */ jsx(SelectItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
 				className: "size-4 text-brand",
 				"aria-hidden": true
 			}) })
-		}), /* @__PURE__ */ jsx(Select.ItemText, { children })]
+		}), /* @__PURE__ */ jsx(SelectItemText, { children })]
 	});
-}
-function SelectSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Select.Separator, {
+});
+var SelectSeparator = React.forwardRef(function SelectSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SelectSeparator$1, {
+		ref,
 		"data-slot": "select-separator",
 		className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
+});
 //#endregion
-export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
 
 //# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\nimport { surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\n// Plain height classes, not an attribute-selector variant on data-size: that\n// selector outranks a class, so a caller's `h-11`, `max-sm:h-11` or\n// `pointer-coarse:h-11` never won against the size. (Tailwind reads comments\n// too, so the old form is not spelled out here.)\nconst triggerHeight = { default: 'h-9', sm: 'h-8' } as const;\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: 'sm' | 'default' }) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        fieldClasses,\n        \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        triggerHeight[size],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"size-4 opacity-60\" aria-hidden />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'popper',\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          surfaceClasses,\n          'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronUp className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronDown className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-brand\" aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;AAWA,SAASA,SAAO,OAA0D;CACxE,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAMA,IAAM,gBAAgB;CAAE,SAAS;CAAO,IAAI;AAAM;AAElD,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SACkF;CACrF,OACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,cACA,oVACA,cAAc,OACd,SACF;EACA,GAAI;EATN,UAAA,CAWG,UACD,oBAACA,OAAgB,MAAjB;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD;IAAa,WAAU;IAAoB,eAAA;GAAa,CAAA;EACpC,CAAA,CACC;;AAE7B;AAEA,SAAS,cAAc,EACrB,WACA,UACA,WAAW,UACX,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,QAAjB,EAAA,UACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,gBACA,4JACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EAVN,UAAA;GAYE,oBAACA,OAAgB,gBAAjB;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD;KAAW,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;GAChC,oBAACA,OAAgB,UAAjB;IACE,WAAW,GACT,OACA,aAAa,YACX,2FACJ;IAEC;GACuB,CAAA;GAC1B,oBAACA,OAAgB,kBAAjB;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD;KAAa,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,OACE,qBAACA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,OAAgB,eAAjB,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAoB,eAAA;GAAa,CAAA,EACrB,CAAA;EAC3B,CAAA,GACN,oBAACA,OAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SACsD;CACzD,OACE,oBAACA,OAAgB,WAAjB;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"select.js","names":["SelectPrimitive.Root","SelectPrimitive.Group","SelectPrimitive.Value","SelectPrimitive.Trigger","SelectPrimitive.Icon","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.ScrollUpButton","SelectPrimitive.Viewport","SelectPrimitive.ScrollDownButton","SelectPrimitive.Label","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText","SelectPrimitive.Separator"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\nimport * as SelectPrimitive from '../primitives/vendor/radix/react-select';\n\nimport { fieldClasses, type FieldWidth, fieldWidthClasses } from './input';\nimport { menuLabelClasses, surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\n// Plain height classes, not an attribute-selector variant on data-size: that\n// selector outranks a class, so a caller's `h-11`, `max-sm:h-11` or\n// `pointer-coarse:h-11` never won against the size. (Tailwind reads comments\n// too, so the old form is not spelled out here.)\nconst triggerHeight = { default: 'h-9', sm: 'h-8' } as const;\n\nexport interface SelectTriggerProps extends React.ComponentProps<typeof SelectPrimitive.Trigger> {\n  size?: 'sm' | 'default';\n  /** How wide the trigger is from 640px up; full width on phones. Fits its content by default. */\n  width?: FieldWidth;\n}\n\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, size = 'default', width, children, ...props }, ref) {\n    return (\n      <SelectPrimitive.Trigger\n        ref={ref}\n        data-slot=\"select-trigger\"\n        data-size={size}\n        className={cn(\n          fieldClasses,\n          \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          triggerHeight[size],\n          width && fieldWidthClasses[width],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown className=\"size-4 text-muted-foreground\" aria-hidden />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\n\nconst SelectContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Content>\n>(function SelectContent({ className, children, position = 'popper', ...props }, ref) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        data-slot=\"select-content\"\n        className={cn(\n          surfaceClasses,\n          'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronUp className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronDown className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n});\n\nconst SelectLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Label>\n>(function SelectLabel({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Label\n      ref={ref}\n      data-slot=\"select-label\"\n      className={cn(menuLabelClasses, className)}\n      {...props}\n    />\n  );\n});\n\n/** A row: 32px (44px on touch screens), 8px radius, a fill when active, a check when chosen. */\nconst SelectItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Item>\n>(function SelectItem({ className, children, ...props }, ref) {\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pointer-coarse:min-h-11',\n        noOutlineClasses,\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-brand\" aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n});\n\nconst SelectSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Separator>\n>(function SelectSeparator({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Separator\n      ref={ref}\n      data-slot=\"select-separator\"\n      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAACA,UAAD;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACC,eAAD;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACC,eAAD;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAMA,IAAM,gBAAgB;CAAE,SAAS;CAAO,IAAI;AAAM;AAQlD,IAAM,gBAAgB,MAAM,WAC1B,SAAS,cAAc,EAAE,WAAW,OAAO,WAAW,OAAO,UAAU,GAAG,SAAS,KAAK;CACtF,OACE,qBAACC,iBAAD;EACO;EACL,aAAU;EACV,aAAW;EACX,WAAW,GACT,cACA,oVACA,cAAc,OACd,SAAS,kBAAkB,QAC3B,SACF;EACA,GAAI;EAXN,UAAA,CAaG,UACD,oBAACC,YAAD;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD;IAAa,WAAU;IAA+B,eAAA;GAAa,CAAA;EAC/C,CAAA,CACC;;AAE7B,CACF;AAEA,IAAM,gBAAgB,MAAM,WAG1B,SAAS,cAAc,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,SAAS,KAAK;CACpF,OACE,oBAACC,cAAD,EAAA,UACE,qBAACC,iBAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,gBACA,4JACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EAXN,UAAA;GAaE,oBAACC,sBAAD;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD;KAAW,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;GAChC,oBAACC,gBAAD;IACE,WAAW,GACT,OACA,aAAa,YACX,2FACJ;IAEC;GACuB,CAAA;GAC1B,oBAACC,wBAAD;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD;KAAa,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B,CAAC;AAED,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACC,eAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,kBAAkB,SAAS;EACzC,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAC5D,OACE,qBAACC,cAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,kRACA,kBACA,qFACA,SACF;EACA,GAAI;EATN,UAAA,CAWE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACC,qBAAD,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAoB,eAAA;GAAa,CAAA,EACrB,CAAA;EAC3B,CAAA,GACN,oBAACC,gBAAD,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B,CAAC;AAED,IAAM,kBAAkB,MAAM,WAG5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAACC,mBAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/separator.d.ts

@@ -1,4 +1,4 @@
-import { Separator as SeparatorPrimitive } from 'radix-ui';
 import * as React from 'react';
-declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
+import * as SeparatorPrimitive from '../primitives/vendor/radix/react-separator';
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Separator };

package/dist/components/separator.js

@@ -1,18 +1,20 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import { Separator } from "radix-ui";
-import "react";
+import { Root } from "../primitives/vendor/radix/react-separator/separator.js";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/separator.tsx
-function Separator$1({ className, orientation = "horizontal", decorative = true, ...props }) {
-	return /* @__PURE__ */ jsx(Separator.Root, {
+var Separator = React.forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Root, {
+		ref,
 		"data-slot": "separator",
 		decorative,
 		orientation,
 		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
 		...props
 	});
-}
+});
 //#endregion
-export { Separator$1 as Separator };
+export { Separator };
 
 //# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":["Separator","SeparatorPrimitive"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":";;;;;AAKA,SAASA,YAAU,EACjB,WACA,cAAc,cACd,aAAa,MACb,GAAG,SACoD;CACvD,OACE,oBAACC,UAAmB,MAApB;EACE,aAAU;EACE;EACC;EACb,WAAW,GACT,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"separator.js","names":["SeparatorPrimitive.Root"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SeparatorPrimitive from '../primitives/vendor/radix/react-separator';\n\nconst Separator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SeparatorPrimitive.Root>\n>(function Separator({ className, orientation = 'horizontal', decorative = true, ...props }, ref) {\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Separator };\n"],"mappings":";;;;;;AAKA,IAAM,YAAY,MAAM,WAGtB,SAAS,UAAU,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAAS,KAAK;CAChG,OACE,oBAACA,MAAD;EACO;EACL,aAAU;EACE;EACC;EACb,WAAW,GACT,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/sheet.d.ts

@@ -1,15 +1,15 @@
-import { Dialog as SheetPrimitive } from 'radix-ui';
 import * as React from 'react';
+import * as SheetPrimitive from '../primitives/vendor/radix/react-dialog';
 declare function Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
-declare function SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
-declare function SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
+declare const SheetTrigger: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const sideClasses: {
     readonly right: "inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm";
     readonly left: "inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm";
     readonly top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]";
     readonly bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]";
 };
-declare function SheetContent({ className, children, side, handle, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+export interface SheetContentProps extends React.ComponentProps<typeof SheetPrimitive.Content> {
     side?: keyof typeof sideClasses;
     /**
      * The X in the corner. Turn it off when the sheet draws its own header
@@ -22,9 +22,11 @@ declare function SheetContent({ className, children, side, handle, showCloseButt
      * default for bottom sheets.
      */
     handle?: boolean;
-}): React.JSX.Element;
-declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): React.JSX.Element;
-declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): React.JSX.Element;
+}
+/** A panel from an edge: 16px radius on the free corners, elevation 5. */
+declare const SheetContent: React.ForwardRefExoticComponent<Omit<SheetContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };

package/dist/components/sheet.js

@@ -1,40 +1,47 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import { Dialog } from "radix-ui";
-import "react";
+import { Close as DialogClose, Content as DialogContent, Description as DialogDescription, Dialog, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "../primitives/vendor/radix/react-dialog/dialog.js";
+import { overlayClasses, overlayCloseClasses } from "./dialog.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import X from "@burtson-labs/icons/react/x";
 //#region src/components/sheet.tsx
 function Sheet(props) {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
+	return /* @__PURE__ */ jsx(Dialog, {
 		"data-slot": "sheet",
 		...props
 	});
 }
-function SheetTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+var SheetTrigger = React.forwardRef(function SheetTrigger(props, ref) {
+	return /* @__PURE__ */ jsx(DialogTrigger, {
+		ref,
 		"data-slot": "sheet-trigger",
 		...props
 	});
-}
-function SheetClose(props) {
-	return /* @__PURE__ */ jsx(Dialog.Close, {
+});
+var SheetClose = React.forwardRef(function SheetClose(props, ref) {
+	return /* @__PURE__ */ jsx(DialogClose, {
+		ref,
 		"data-slot": "sheet-close",
 		...props
 	});
-}
+});
 var sideClasses = {
 	right: "inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm",
 	left: "inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm",
 	top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]",
 	bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]"
 };
-function SheetContent({ className, children, side = "right", handle = side === "bottom", showCloseButton = true, ...props }) {
-	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+/** A panel from an edge: 16px radius on the free corners, elevation 5. */
+var SheetContent = React.forwardRef(function SheetContent({ className, children, side = "right", handle = side === "bottom", showCloseButton = true, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {
 		"data-slot": "sheet-overlay",
-		className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
-	}), /* @__PURE__ */ jsxs(Dialog.Content, {
+		className: overlayClasses
+	}), /* @__PURE__ */ jsxs(DialogContent, {
+		ref,
 		"data-slot": "sheet-content",
-		className: cn("fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in", sideClasses[side], className),
+		"data-side": side,
+		className: cn("fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-xl outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in", sideClasses[side], className),
 		...props,
 		children: [
 			handle && /* @__PURE__ */ jsx("div", {
@@ -43,8 +50,9 @@ function SheetContent({ className, children, side = "right", handle = side === "
 				className: "mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong"
 			}),
 			children,
-			showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
-				className: cn("absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5", side === "top" ? "top-[calc(env(safe-area-inset-top)+0.75rem)]" : "top-3"),
+			showCloseButton && /* @__PURE__ */ jsxs(DialogClose, {
+				"data-slot": "sheet-close",
+				className: cn(overlayCloseClasses, side === "top" && "top-[calc(env(safe-area-inset-top)+0.75rem)] pointer-coarse:top-[calc(env(safe-area-inset-top)+0.5rem)]"),
 				children: [/* @__PURE__ */ jsx(X, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "Close"
@@ -52,35 +60,39 @@ function SheetContent({ className, children, side = "right", handle = side === "
 			})
 		]
 	})] });
-}
-function SheetHeader({ className, ...props }) {
+});
+var SheetHeader = React.forwardRef(function SheetHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "sheet-header",
-		className: cn("flex flex-col gap-1.5 p-4", className),
+		className: cn("flex flex-col gap-1.5 p-4 pr-12", className),
 		...props
 	});
-}
-function SheetFooter({ className, ...props }) {
+});
+var SheetFooter = React.forwardRef(function SheetFooter({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "sheet-footer",
 		className: cn("mt-auto flex flex-col gap-2 p-4", className),
 		...props
 	});
-}
-function SheetTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Title, {
+});
+var SheetTitle = React.forwardRef(function SheetTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		ref,
 		"data-slot": "sheet-title",
 		className: cn("text-base font-semibold tracking-[-0.02em] text-foreground", className),
 		...props
 	});
-}
-function SheetDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Description, {
+});
+var SheetDescription = React.forwardRef(function SheetDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(DialogDescription, {
+		ref,
 		"data-slot": "sheet-description",
-		className: cn("text-sm text-muted-foreground", className),
+		className: cn("text-sm leading-5 text-muted-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
 

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { Dialog as SheetPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers. Each keeps clear of the\n  // notch or home indicator on its edge (safe-area insets).\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  handle = side === 'bottom',\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: keyof typeof sideClasses;\n  /**\n   * The X in the corner. Turn it off when the sheet draws its own header\n   * with a close control (a SheetClose), so there are not two.\n   */\n  showCloseButton?: boolean;\n  /**\n   * A grab bar at the top edge, the cue that this is a drawer. Visual only:\n   * it does not drag; close with the button, Escape or the overlay. On by\n   * default for bottom sheets.\n   */\n  handle?: boolean;\n}) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\"\n      />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {handle && (\n          <div\n            data-slot=\"sheet-handle\"\n            aria-hidden\n            className=\"mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong\"\n          />\n        )}\n        {children}\n        {/* 44px on touch screens, 32px with a mouse. */}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            className={cn(\n              'absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5',\n              side === 'top' ? 'top-[calc(env(safe-area-inset-top)+0.75rem)]' : 'top-3',\n            )}\n          >\n            <X aria-hidden />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,OAA0D;CAC5E,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAGN,KAAK;CACL,QACE;AACJ;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,SAAS,SAAS,UAClB,kBAAkB,MAClB,GAAG,SAcF;CACD,OACE,qBAACA,OAAe,QAAhB,EAAA,UAAA,CACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAU;CACX,CAAA,GACD,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mQACA,YAAY,OACZ,SACF;EACA,GAAI;EAPN,UAAA;GASG,UACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;GACX,CAAA;GAEF;GAEA,mBACC,qBAACA,OAAe,OAAhB;IACE,WAAW,GACT,gRACA,SAAS,QAAQ,iDAAiD,OACpE;IAJF,UAAA,CAME,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CACjB;;EAEF;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Overlay","SheetPrimitive.Content","SheetPrimitive.Title","SheetPrimitive.Description"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SheetPrimitive from '../primitives/vendor/radix/react-dialog';\n\nimport { overlayClasses, overlayCloseClasses } from './dialog';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nconst SheetTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof SheetPrimitive.Trigger>\n>(function SheetTrigger(props, ref) {\n  return <SheetPrimitive.Trigger ref={ref} data-slot=\"sheet-trigger\" {...props} />;\n});\n\nconst SheetClose = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof SheetPrimitive.Close>\n>(function SheetClose(props, ref) {\n  return <SheetPrimitive.Close ref={ref} data-slot=\"sheet-close\" {...props} />;\n});\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers. Each keeps clear of the\n  // notch or home indicator on its edge (safe-area insets).\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nexport interface SheetContentProps extends React.ComponentProps<typeof SheetPrimitive.Content> {\n  side?: keyof typeof sideClasses;\n  /**\n   * The X in the corner. Turn it off when the sheet draws its own header\n   * with a close control (a SheetClose), so there are not two.\n   */\n  showCloseButton?: boolean;\n  /**\n   * A grab bar at the top edge, the cue that this is a drawer. Visual only:\n   * it does not drag; close with the button, Escape or the overlay. On by\n   * default for bottom sheets.\n   */\n  handle?: boolean;\n}\n\n/** A panel from an edge: 16px radius on the free corners, elevation 5. */\nconst SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(function SheetContent(\n  {\n    className,\n    children,\n    side = 'right',\n    handle = side === 'bottom',\n    showCloseButton = true,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay data-slot=\"sheet-overlay\" className={overlayClasses} />\n      <SheetPrimitive.Content\n        ref={ref}\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-xl outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {handle && (\n          <div\n            data-slot=\"sheet-handle\"\n            aria-hidden\n            className=\"mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong\"\n          />\n        )}\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            className={cn(\n              overlayCloseClasses,\n              side === 'top' &&\n                'top-[calc(env(safe-area-inset-top)+0.75rem)] pointer-coarse:top-[calc(env(safe-area-inset-top)+0.5rem)]',\n            )}\n          >\n            <X aria-hidden />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n});\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function SheetHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sheet-header\"\n        className={cn('flex flex-col gap-1.5 p-4 pr-12', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function SheetFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"sheet-footer\"\n        className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst SheetTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentProps<typeof SheetPrimitive.Title>\n>(function SheetTitle({ className, ...props }, ref) {\n  return (\n    <SheetPrimitive.Title\n      ref={ref}\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n});\n\nconst SheetDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentProps<typeof SheetPrimitive.Description>\n>(function SheetDescription({ className, ...props }, ref) {\n  return (\n    <SheetPrimitive.Description\n      ref={ref}\n      data-slot=\"sheet-description\"\n      className={cn('text-sm leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,QAAD;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,OAAO,KAAK;CAClC,OAAO,oBAACC,eAAD;EAA6B;EAAK,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACjF,CAAC;AAED,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,OAAO,KAAK;CAChC,OAAO,oBAACC,aAAD;EAA2B;EAAK,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC7E,CAAC;AAED,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAGN,KAAK;CACL,QACE;AACJ;;AAkBA,IAAM,eAAe,MAAM,WAA8C,SAAS,aAChF,EACE,WACA,UACA,OAAO,SACP,SAAS,SAAS,UAClB,kBAAkB,MAClB,GAAG,SAEL,KACA;CACA,OACE,qBAACC,cAAD,EAAA,UAAA,CACE,oBAACC,eAAD;EAAwB,aAAU;EAAgB,WAAW;CAAiB,CAAA,GAC9E,qBAACC,eAAD;EACO;EACL,aAAU;EACV,aAAW;EACX,WAAW,GACT,sOACA,YAAY,OACZ,SACF;EACA,GAAI;EATN,UAAA;GAWG,UACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;GACX,CAAA;GAEF;GACA,mBACC,qBAACH,aAAD;IACE,aAAU;IACV,WAAW,GACT,qBACA,SAAS,SACP,yGACJ;IANF,UAAA,CAQE,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CACjB;;EAEF;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B,CAAC;AAED,IAAM,cAAc,MAAM,WACxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,cAAc,MAAM,WACxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAClD,OACE,oBAACI,aAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACC,mBAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/skeleton.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/** A placeholder block. Give it the size of what it stands in for; hidden from screen readers. */
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Skeleton };

package/dist/components/skeleton.js

@@ -1,15 +1,18 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton.tsx
-function Skeleton({ className, ...props }) {
+/** A placeholder block. Give it the size of what it stands in for; hidden from screen readers. */
+var Skeleton = React.forwardRef(function Skeleton({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "skeleton",
 		"aria-hidden": true,
-		className: cn("animate-pulse rounded-md bg-foreground/[0.06]", className),
+		className: cn("animate-pulse rounded-md bg-foreground/[0.08]", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Skeleton };
 

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      aria-hidden\n      className={cn('animate-pulse rounded-md bg-foreground/[0.06]', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n"],"mappings":";;;;AAIA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAsC;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAA;EACA,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/** A placeholder block. Give it the size of what it stands in for; hidden from screen readers. */\nconst Skeleton = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(function Skeleton(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"skeleton\"\n      aria-hidden\n      className={cn('animate-pulse rounded-md bg-foreground/[0.08]', className)}\n      {...props}\n    />\n  );\n});\n\nexport { Skeleton };\n"],"mappings":";;;;;;AAKA,IAAM,WAAW,MAAM,WAAwD,SAAS,SACtF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,eAAA;EACA,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/slider.d.ts

@@ -1,15 +1,19 @@
 import * as React from 'react';
-export interface SliderProps extends Omit<React.ComponentProps<'input'>, 'type' | 'value' | 'onChange'> {
-    value: number;
-    onValueChange: (value: number) => void;
+export interface SliderProps extends Omit<React.ComponentProps<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange'> {
+    /** Controlled value. Leave out for an uncontrolled slider. */
+    value?: number;
+    /** The starting value when uncontrolled. */
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
     min?: number;
     max?: number;
     step?: number;
 }
 /**
  * A single-value range slider on the native input, so keyboard, touch and
- * screen readers work without extra code. Pass `aria-valuetext` when the raw
- * number isn't meaningful ("45% change").
+ * screen readers work without extra code. The track is 6px; the thumb 16px,
+ * with the whole 44px-tall input as its target on touch screens. Pass
+ * `aria-valuetext` when the raw number isn't meaningful ("45% change").
  */
-declare function Slider({ className, value, onValueChange, min, max, step, style, ...props }: SliderProps): React.JSX.Element;
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Slider };

package/dist/components/slider.js

@@ -1,30 +1,39 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/slider.tsx
 /**
 * A single-value range slider on the native input, so keyboard, touch and
-* screen readers work without extra code. Pass `aria-valuetext` when the raw
-* number isn't meaningful ("45% change").
+* screen readers work without extra code. The track is 6px; the thumb 16px,
+* with the whole 44px-tall input as its target on touch screens. Pass
+* `aria-valuetext` when the raw number isn't meaningful ("45% change").
 */
-function Slider({ className, value, onValueChange, min = 0, max = 100, step = 1, style, ...props }) {
+var Slider = React.forwardRef(function Slider({ className, value: valueProp, defaultValue, onValueChange, min = 0, max = 100, step = 1, style, ...props }, ref) {
+	const [own, setOwn] = React.useState(defaultValue ?? min);
+	const value = valueProp ?? own;
 	const percent = max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
 	return /* @__PURE__ */ jsx("input", {
+		ref,
 		type: "range",
 		"data-slot": "slider",
 		min,
 		max,
 		step,
 		value,
-		onChange: (event) => onValueChange(Number(event.target.value)),
+		onChange: (event) => {
+			const next = Number(event.target.value);
+			if (valueProp === void 0) setOwn(next);
+			onValueChange?.(next);
+		},
 		style: {
 			...style,
 			["--bl-slider-fill"]: `${percent}%`
 		},
-		className: cn("h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60", "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full", "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-muted)_var(--bl-slider-fill))]", "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted", "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background", "focus-visible:[&::-webkit-slider-thumb]:ring-[3px] focus-visible:[&::-webkit-slider-thumb]:ring-ring/30", "focus-visible:[&::-moz-range-thumb]:ring-[3px] focus-visible:[&::-moz-range-thumb]:ring-ring/30", className),
+		className: cn("h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:h-11", "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full", "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-border-strong)_var(--bl-slider-fill))]", "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-border-strong", "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background", "focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", "focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Slider };
 

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface SliderProps extends Omit<\n  React.ComponentProps<'input'>,\n  'type' | 'value' | 'onChange'\n> {\n  value: number;\n  onValueChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n}\n\n/**\n * A single-value range slider on the native input, so keyboard, touch and\n * screen readers work without extra code. Pass `aria-valuetext` when the raw\n * number isn't meaningful (\"45% change\").\n */\nfunction Slider({\n  className,\n  value,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  style,\n  ...props\n}: SliderProps) {\n  const percent = max > min ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)) : 0;\n  return (\n    <input\n      type=\"range\"\n      data-slot=\"slider\"\n      min={min}\n      max={max}\n      step={step}\n      value={value}\n      onChange={(event) => onValueChange(Number(event.target.value))}\n      style={{ ...style, ['--bl-slider-fill' as string]: `${percent}%` }}\n      className={cn(\n        'h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60',\n        // Track: brand up to the thumb, muted after it.\n        '[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full',\n        '[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-muted)_var(--bl-slider-fill))]',\n        '[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted',\n        '[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand',\n        '[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm',\n        '[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background',\n        'focus-visible:[&::-webkit-slider-thumb]:ring-[3px] focus-visible:[&::-webkit-slider-thumb]:ring-ring/30',\n        'focus-visible:[&::-moz-range-thumb]:ring-[3px] focus-visible:[&::-moz-range-thumb]:ring-ring/30',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Slider };\n"],"mappings":";;;;;;;;;AAoBA,SAAS,OAAO,EACd,WACA,OACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,OACA,GAAG,SACW;CACd,MAAM,UAAU,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,QAAQ,QAAQ,MAAM,OAAQ,GAAG,CAAC,IAAI;CAC9F,OACE,oBAAC,SAAD;EACE,MAAK;EACL,aAAU;EACL;EACA;EACC;EACC;EACP,WAAW,UAAU,cAAc,OAAO,MAAM,OAAO,KAAK,CAAC;EAC7D,OAAO;GAAE,GAAG;IAAQ,qBAA+B,GAAG,QAAQ;EAAG;EACjE,WAAW,GACT,iIAEA,4FACA,uJACA,iGACA,0GACA,+SACA,yKACA,2GACA,mGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface SliderProps extends Omit<\n  React.ComponentProps<'input'>,\n  'type' | 'value' | 'defaultValue' | 'onChange'\n> {\n  /** Controlled value. Leave out for an uncontrolled slider. */\n  value?: number;\n  /** The starting value when uncontrolled. */\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n}\n\n/**\n * A single-value range slider on the native input, so keyboard, touch and\n * screen readers work without extra code. The track is 6px; the thumb 16px,\n * with the whole 44px-tall input as its target on touch screens. Pass\n * `aria-valuetext` when the raw number isn't meaningful (\"45% change\").\n */\nconst Slider = React.forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    className,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [own, setOwn] = React.useState(defaultValue ?? min);\n  const value = valueProp ?? own;\n  const percent = max > min ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)) : 0;\n  return (\n    <input\n      ref={ref}\n      type=\"range\"\n      data-slot=\"slider\"\n      min={min}\n      max={max}\n      step={step}\n      value={value}\n      onChange={(event) => {\n        const next = Number(event.target.value);\n        if (valueProp === undefined) setOwn(next);\n        onValueChange?.(next);\n      }}\n      style={{ ...style, ['--bl-slider-fill' as string]: `${percent}%` }}\n      className={cn(\n        'h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:h-11',\n        // Track: brand up to the thumb, the strong border tone after it.\n        '[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full',\n        '[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-border-strong)_var(--bl-slider-fill))]',\n        '[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-border-strong',\n        '[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand',\n        '[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm',\n        '[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background',\n        // Focus: the 2px ring-colour outline, 2px out, drawn as shadows on the\n        // thumb (outlines on range thumbs are not reliable across engines).\n        'focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]',\n        'focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Slider };\n"],"mappings":";;;;;;;;;;;AAwBA,IAAM,SAAS,MAAM,WAA0C,SAAS,OACtE,EACE,WACA,OAAO,WACP,cACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,KAAK,UAAU,MAAM,SAAS,gBAAgB,GAAG;CACxD,MAAM,QAAQ,aAAa;CAC3B,MAAM,UAAU,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,QAAQ,QAAQ,MAAM,OAAQ,GAAG,CAAC,IAAI;CAC9F,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,aAAU;EACL;EACA;EACC;EACC;EACP,WAAW,UAAU;GACnB,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GACtC,IAAI,cAAc,KAAA,GAAW,OAAO,IAAI;GACxC,gBAAgB,IAAI;EACtB;EACA,OAAO;GAAE,GAAG;IAAQ,qBAA+B,GAAG,QAAQ;EAAG;EACjE,WAAW,GACT,qJAEA,4FACA,+JACA,yGACA,0GACA,+SACA,yKAGA,sGACA,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}