@nocoo/basalt 2.0.3 → 2.1.2

package/dist/components/slider.js

@@ -1,21 +1,37 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { FOCUS_RING as t } from "./overlay.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-slider";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { FOCUS_RING as n } from "./overlay.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-slider";
 //#region src/components/slider.tsx
-var o = n.forwardRef(({ className: n, ...o }, s) => /* @__PURE__ */ i(a.Root, {
-	ref: s,
-	className: e("relative flex w-full touch-none select-none items-center", n),
-	...o,
-	children: [/* @__PURE__ */ r(a.Track, {
-		className: "relative h-2 w-full grow overflow-hidden rounded-full bg-basalt-muted",
-		children: /* @__PURE__ */ r(a.Range, { className: "absolute h-full bg-basalt-primary" })
-	}), /* @__PURE__ */ r(a.Thumb, { className: e("block h-4 w-4 rounded-full border border-basalt-primary bg-basalt-background shadow", t) })]
-}));
-o.displayName = a.Root.displayName;
+var s = r.forwardRef(({ className: s, value: c, defaultValue: l, min: u = 0, max: d = 100, orientation: f = "horizontal", labels: p, "aria-label": m, "aria-labelledby": h, ...g }, _) => {
+	let v = f === "vertical", y = c !== void 0, b = r.useRef(l?.length ?? 1), x = y ? c?.length ?? 0 : b.current;
+	return /* @__PURE__ */ a(o.Root, {
+		ref: _,
+		min: u,
+		max: d,
+		orientation: f,
+		value: c,
+		defaultValue: l,
+		"aria-label": m,
+		"aria-labelledby": h,
+		className: e(t, "relative flex touch-none select-none items-center", v ? "h-full w-auto flex-col justify-center" : "h-auto w-full", s),
+		...g,
+		children: [/* @__PURE__ */ i(o.Track, {
+			className: e("relative grow overflow-hidden rounded-full bg-basalt-muted", v ? "h-full w-2" : "h-2 w-full"),
+			children: /* @__PURE__ */ i(o.Range, { className: e("absolute bg-basalt-primary", v ? "w-full" : "h-full") })
+		}), Array.from({ length: x }, (t, r) => {
+			let a, s;
+			x === 1 ? (a = p?.[0] ?? m, s = h) : p?.[r] === void 0 ? m && (a = x === 2 ? `${m} ${r === 0 ? "minimum" : "maximum"}` : `${m} thumb ${r + 1} of ${x}`) : a = p[r];
+			let c = { className: e("block h-4 w-4 rounded-full border border-basalt-primary bg-basalt-background shadow", n) };
+			return a !== void 0 && (c["aria-label"] = a), s !== void 0 && (c["aria-labelledby"] = s), /* @__PURE__ */ i(o.Thumb, { ...c }, r);
+		})]
+	});
+});
+s.displayName = o.Root.displayName;
 //#endregion
-export { o as Slider };
+export { s as Slider };
 
 //# sourceMappingURL=slider.js.map

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { FOCUS_RING } from \"./overlay\";\n\nexport const Slider = React.forwardRef<\n\tReact.ElementRef<typeof SliderPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<SliderPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n\t\t{...props}\n\t>\n\t\t<SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-basalt-muted\">\n\t\t\t<SliderPrimitive.Range className=\"absolute h-full bg-basalt-primary\" />\n\t\t</SliderPrimitive.Track>\n\t\t<SliderPrimitive.Thumb\n\t\t\tclassName={cn(\n\t\t\t\t\"block h-4 w-4 rounded-full border border-basalt-primary bg-basalt-background shadow\",\n\t\t\t\tFOCUS_RING,\n\t\t\t)}\n\t\t/>\n\t</SliderPrimitive.Root>\n));\nSlider.displayName = SliderPrimitive.Root.displayName;\n"],"mappings":";;;;;;;AAKA,IAAa,IAAS,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,MAAjB;CACM;CACL,WAAW,EAAG,4DAA4D,CAAS;CACnF,GAAI;CAHL,UAAA,CAKC,kBAAC,EAAgB,OAAjB;EAAuB,WAAU;EAChC,UAAA,kBAAC,EAAgB,OAAjB,EAAuB,WAAU,oCAAqC,CAAA;CAChD,CAAA,GACvB,kBAAC,EAAgB,OAAjB,EACC,WAAW,EACV,uFACA,CACD,EACA,CAAA,CACoB;AACtB,CAAA,CAAA;AACD,EAAO,cAAc,EAAgB,KAAK"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\ntype RadixSliderRootProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;\n\nexport interface SliderProps\n\textends Omit<\n\t\tRadixSliderRootProps,\n\t\t| \"value\"\n\t\t| \"defaultValue\"\n\t\t| \"onValueChange\"\n\t\t| \"onValueCommit\"\n\t\t| \"disabled\"\n\t\t| \"name\"\n\t\t| \"min\"\n\t\t| \"max\"\n\t\t| \"step\"\n\t\t| \"orientation\"\n\t> {\n\t/**\n\t * Controlled value array for the slider. Forwards ref to root span element.\n\t * When multiple values are provided, renders a thumb for each value.\n\t */\n\tvalue?: RadixSliderRootProps[\"value\"];\n\t/**\n\t * Uncontrolled default value array for the slider.\n\t * When multiple values are provided, renders a thumb for each value.\n\t * @default [min ?? 0]\n\t */\n\tdefaultValue?: RadixSliderRootProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when slider value changes during interaction.\n\t */\n\tonValueChange?: RadixSliderRootProps[\"onValueChange\"];\n\t/**\n\t * Callback invoked when slider interaction finishes and value is committed.\n\t */\n\tonValueCommit?: RadixSliderRootProps[\"onValueCommit\"];\n\t/**\n\t * Whether the slider is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixSliderRootProps[\"disabled\"];\n\t/**\n\t * Form field name submitted with the slider values.\n\t */\n\tname?: RadixSliderRootProps[\"name\"];\n\t/**\n\t * Minimum allowable value.\n\t * @default 0\n\t */\n\tmin?: RadixSliderRootProps[\"min\"];\n\t/**\n\t * Maximum allowable value.\n\t * @default 100\n\t */\n\tmax?: RadixSliderRootProps[\"max\"];\n\t/**\n\t * Step interval between selectable values.\n\t * @default 1\n\t */\n\tstep?: RadixSliderRootProps[\"step\"];\n\t/**\n\t * Layout orientation of the slider track.\n\t * When set to `\"vertical\"`, the slider track and range align vertically. A container with an explicit height is required.\n\t * @default \"horizontal\"\n\t */\n\torientation?: RadixSliderRootProps[\"orientation\"];\n\t/**\n\t * Accessible labels for thumbs when rendering single or multiple values.\n\t * When provided, thumb at index `i` receives `labels[i]`. For a single thumb, `labels[0]` takes precedence over `aria-label`.\n\t * When omitted on a multi-value slider, the root `aria-label` provides a contextual fallback (e.g. `ariaLabel + \" minimum\"`),\n\t * or falls back to Radix default names (`\"Minimum\"`, `\"Maximum\"`, or `\"Value N of Total\"`).\n\t */\n\tlabels?: string[];\n}\n\nexport const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tmin = 0,\n\t\t\tmax = 100,\n\t\t\torientation = \"horizontal\",\n\t\t\tlabels,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isVertical = orientation === \"vertical\";\n\t\tconst isControlled = value !== undefined;\n\n\t\tconst initialUncontrolledCountRef = React.useRef(defaultValue?.length ?? 1);\n\t\tconst thumbCount = isControlled ? (value?.length ?? 0) : initialUncontrolledCountRef.current;\n\n\t\treturn (\n\t\t\t<SliderPrimitive.Root\n\t\t\t\tref={ref}\n\t\t\t\tmin={min}\n\t\t\t\tmax={max}\n\t\t\t\torientation={orientation}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"relative flex touch-none select-none items-center\",\n\t\t\t\t\tisVertical ? \"h-full w-auto flex-col justify-center\" : \"h-auto w-full\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SliderPrimitive.Track\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"relative grow overflow-hidden rounded-full bg-basalt-muted\",\n\t\t\t\t\t\tisVertical ? \"h-full w-2\" : \"h-2 w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<SliderPrimitive.Range\n\t\t\t\t\t\tclassName={cn(\"absolute bg-basalt-primary\", isVertical ? \"w-full\" : \"h-full\")}\n\t\t\t\t\t/>\n\t\t\t\t</SliderPrimitive.Track>\n\t\t\t\t{Array.from({ length: thumbCount }, (_, index) => {\n\t\t\t\t\tlet thumbLabel: string | undefined;\n\t\t\t\t\tlet thumbLabelledBy: string | undefined;\n\n\t\t\t\t\tif (thumbCount === 1) {\n\t\t\t\t\t\tthumbLabel = labels?.[0] ?? ariaLabel;\n\t\t\t\t\t\tthumbLabelledBy = ariaLabelledBy;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (labels?.[index] !== undefined) {\n\t\t\t\t\t\t\tthumbLabel = labels[index];\n\t\t\t\t\t\t} else if (ariaLabel) {\n\t\t\t\t\t\t\tif (thumbCount === 2) {\n\t\t\t\t\t\t\t\tconst suffix = index === 0 ? \"minimum\" : \"maximum\";\n\t\t\t\t\t\t\t\tthumbLabel = `${ariaLabel} ${suffix}`;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthumbLabel = `${ariaLabel} thumb ${index + 1} of ${thumbCount}`;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tconst thumbProps: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb> = {\n\t\t\t\t\t\tclassName: cn(\n\t\t\t\t\t\t\t\"block h-4 w-4 rounded-full border border-basalt-primary bg-basalt-background shadow\",\n\t\t\t\t\t\t\tFOCUS_RING,\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t\tif (thumbLabel !== undefined) {\n\t\t\t\t\t\tthumbProps[\"aria-label\"] = thumbLabel;\n\t\t\t\t\t}\n\t\t\t\t\tif (thumbLabelledBy !== undefined) {\n\t\t\t\t\t\tthumbProps[\"aria-labelledby\"] = thumbLabelledBy;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn <SliderPrimitive.Thumb key={index} {...thumbProps} />;\n\t\t\t\t})}\n\t\t\t</SliderPrimitive.Root>\n\t\t);\n\t},\n);\nSlider.displayName = SliderPrimitive.Root.displayName;\n"],"mappings":";;;;;;;;AAgFA,IAAa,IAAS,EAAM,YAE1B,EACC,cACA,UACA,iBACA,SAAM,GACN,SAAM,KACN,iBAAc,cACd,WACA,cAAc,GACd,mBAAmB,GACnB,GAAG,KAEJ,MACI;CACJ,IAAM,IAAa,MAAgB,YAC7B,IAAe,MAAU,KAAA,GAEzB,IAA8B,EAAM,OAAO,GAAc,UAAU,CAAC,GACpE,IAAa,IAAgB,GAAO,UAAU,IAAK,EAA4B;CAErF,OACC,kBAAC,EAAgB,MAAjB;EACM;EACA;EACA;EACQ;EACN;EACO;EACd,cAAY;EACZ,mBAAiB;EACjB,WAAW,EACV,GACA,qDACA,IAAa,0CAA0C,iBACvD,CACD;EACA,GAAI;EAfL,UAAA,CAiBC,kBAAC,EAAgB,OAAjB;GACC,WAAW,EACV,8DACA,IAAa,eAAe,YAC7B;GAEA,UAAA,kBAAC,EAAgB,OAAjB,EACC,WAAW,EAAG,8BAA8B,IAAa,WAAW,QAAQ,EAC5E,CAAA;EACqB,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MAAU;GACjD,IAAI,GACA;GAEJ,AAAI,MAAe,KAClB,IAAa,IAAS,MAAM,GAC5B,IAAkB,KAEd,IAAS,OAAW,KAAA,IAEb,MACV,AAIC,IAJG,MAAe,IAEL,GAAG,EAAU,GADX,MAAU,IAAI,YAAY,cAG5B,GAAG,EAAU,SAAS,IAAQ,EAAE,MAAM,OANpD,IAAa,EAAO;GAWtB,IAAM,IAA2E,EAChF,WAAW,EACV,uFACA,CACD,EACD;GAQA,OAPI,MAAe,KAAA,MAClB,EAAW,gBAAgB,IAExB,MAAoB,KAAA,MACvB,EAAW,qBAAqB,IAG1B,kBAAC,EAAgB,OAAjB,EAAmC,GAAI,EAAa,GAAxB,CAAwB;EAC5D,CAAC,CACoB;;AAExB,CACD;AACA,EAAO,cAAc,EAAgB,KAAK"}

package/dist/components/stat-strip.js

@@ -1,27 +1,28 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { SkeletonLine as t } from "./skeleton-line.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { SkeletonLine as n } from "./skeleton-line.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/stat-strip.tsx
-var a = n.forwardRef(({ "aria-busy": n, className: a, items: o, loading: s = !1, ...c }, l) => /* @__PURE__ */ r("dl", {
-	ref: l,
-	className: e("grid grid-cols-2 gap-3 md:grid-cols-4", a),
-	...c,
-	"aria-busy": s ? !0 : n,
-	children: o.map((e, n) => /* @__PURE__ */ i("div", {
+var o = r.forwardRef(({ "aria-busy": r, className: o, items: s, loading: c = !1, ...l }, u) => /* @__PURE__ */ i("dl", {
+	ref: u,
+	className: e(t, "grid grid-cols-2 gap-3 md:grid-cols-4", o),
+	...l,
+	"aria-busy": c ? !0 : r,
+	children: s.map((e, t) => /* @__PURE__ */ a("div", {
 		className: "rounded-basalt-lg bg-basalt-muted p-4 ring-1 ring-basalt-border",
-		children: [/* @__PURE__ */ r("dt", {
+		children: [/* @__PURE__ */ i("dt", {
 			className: "text-sm font-medium text-basalt-muted-foreground",
 			children: e.label
-		}), /* @__PURE__ */ r("dd", {
+		}), /* @__PURE__ */ i("dd", {
 			className: "mt-1 text-lg font-medium tabular-nums text-basalt-foreground",
-			children: s ? /* @__PURE__ */ r(t, {}) : e.value
+			children: c ? /* @__PURE__ */ i(n, {}) : e.value
 		})]
-	}, n))
+	}, t))
 }));
-a.displayName = "StatStrip";
+o.displayName = "StatStrip";
 //#endregion
-export { a as StatStrip };
+export { o as StatStrip };
 
 //# sourceMappingURL=stat-strip.js.map

package/dist/components/stat-strip.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-strip.js","names":[],"sources":["../../src/components/stat-strip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nexport interface StatStripItem {\n\t/** The visible label for this statistic. */\n\tlabel: React.ReactNode;\n\t/** The visible value for this statistic. */\n\tvalue: React.ReactNode;\n}\n\nexport interface StatStripProps\n\textends Omit<React.HTMLAttributes<HTMLDListElement>, \"children\" | \"className\"> {\n\t/** Additional classes for the definition list. */\n\tclassName?: string;\n\t/** The labelled values shown in the strip. */\n\titems: readonly StatStripItem[];\n\t/**\n\t * Replace each value with a skeleton while keeping labels visible.\n\t * @default false\n\t */\n\tloading?: boolean;\n}\n\nexport const StatStrip = React.forwardRef<HTMLDListElement, StatStripProps>(\n\t({ \"aria-busy\": ariaBusy, className, items, loading = false, ...props }, ref) => {\n\t\treturn (\n\t\t\t<dl\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"grid grid-cols-2 gap-3 md:grid-cols-4\", className)}\n\t\t\t\t{...props}\n\t\t\t\taria-busy={loading ? true : ariaBusy}\n\t\t\t>\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tclassName=\"rounded-basalt-lg bg-basalt-muted p-4 ring-1 ring-basalt-border\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<dt className=\"text-sm font-medium text-basalt-muted-foreground\">{item.label}</dt>\n\t\t\t\t\t\t<dd className=\"mt-1 text-lg font-medium tabular-nums text-basalt-foreground\">\n\t\t\t\t\t\t\t{loading ? <SkeletonLine /> : item.value}\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</dl>\n\t\t);\n\t},\n);\nStatStrip.displayName = \"StatStrip\";\n"],"mappings":";;;;;;AAwBA,IAAa,IAAY,EAAM,YAC7B,EAAE,aAAa,GAAU,cAAW,UAAO,aAAU,IAAO,GAAG,KAAS,MAEvE,kBAAC,MAAD;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;CACJ,aAAW,IAAU,KAAO;CAE3B,UAAA,EAAM,KAAK,GAAM,MACjB,kBAAC,OAAD;EAEC,WAAU;EAFX,UAAA,CAIC,kBAAC,MAAD;GAAI,WAAU;GAAoD,UAAA,EAAK;EAAU,CAAA,GACjF,kBAAC,MAAD;GAAI,WAAU;GACZ,UAAA,IAAU,kBAAC,GAAD,CAAe,CAAA,IAAI,EAAK;EAChC,CAAA,CACA;CAPC,GAAA,CAOD,CACL;AACE,CAAA,CAGP;AACA,EAAU,cAAc"}
+{"version":3,"file":"stat-strip.js","names":[],"sources":["../../src/components/stat-strip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nexport interface StatStripItem {\n\t/** The visible label for this statistic. */\n\tlabel: React.ReactNode;\n\t/** The visible value for this statistic. */\n\tvalue: React.ReactNode;\n}\n\nexport interface StatStripProps\n\textends Omit<React.HTMLAttributes<HTMLDListElement>, \"children\" | \"className\"> {\n\t/** Additional classes for the definition list. */\n\tclassName?: string;\n\t/** The labelled values shown in the strip. */\n\titems: readonly StatStripItem[];\n\t/**\n\t * Replace each value with a skeleton while keeping labels visible.\n\t * @default false\n\t */\n\tloading?: boolean;\n}\n\nexport const StatStrip = React.forwardRef<HTMLDListElement, StatStripProps>(\n\t({ \"aria-busy\": ariaBusy, className, items, loading = false, ...props }, ref) => {\n\t\treturn (\n\t\t\t<dl\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(BASALT_UI_CLASS, \"grid grid-cols-2 gap-3 md:grid-cols-4\", className)}\n\t\t\t\t{...props}\n\t\t\t\taria-busy={loading ? true : ariaBusy}\n\t\t\t>\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tclassName=\"rounded-basalt-lg bg-basalt-muted p-4 ring-1 ring-basalt-border\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<dt className=\"text-sm font-medium text-basalt-muted-foreground\">{item.label}</dt>\n\t\t\t\t\t\t<dd className=\"mt-1 text-lg font-medium tabular-nums text-basalt-foreground\">\n\t\t\t\t\t\t\t{loading ? <SkeletonLine /> : item.value}\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</dl>\n\t\t);\n\t},\n);\nStatStrip.displayName = \"StatStrip\";\n"],"mappings":";;;;;;;AAyBA,IAAa,IAAY,EAAM,YAC7B,EAAE,aAAa,GAAU,cAAW,UAAO,aAAU,IAAO,GAAG,KAAS,MAEvE,kBAAC,MAAD;CACM;CACL,WAAW,EAAG,GAAiB,yCAAyC,CAAS;CACjF,GAAI;CACJ,aAAW,IAAU,KAAO;CAE3B,UAAA,EAAM,KAAK,GAAM,MACjB,kBAAC,OAAD;EAEC,WAAU;EAFX,UAAA,CAIC,kBAAC,MAAD;GAAI,WAAU;GAAoD,UAAA,EAAK;EAAU,CAAA,GACjF,kBAAC,MAAD;GAAI,WAAU;GACZ,UAAA,IAAU,kBAAC,GAAD,CAAe,CAAA,IAAI,EAAK;EAChC,CAAA,CACA;CAPC,GAAA,CAOD,CACL;AACE,CAAA,CAGP;AACA,EAAU,cAAc"}

package/dist/components/switch.js

@@ -1,51 +1,81 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { FOCUS_RING as t } from "./overlay.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-switch";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { FOCUS_RING as n } from "./overlay.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-switch";
 //#region src/components/switch.tsx
-var o = n.createContext(null);
-function s(e, t, n) {
+var s = r.createContext(null);
+function c(e, t, n) {
 	return n ? e.includes(t) ? e : [...e, t] : e.filter((e) => e !== t);
 }
-var c = n.forwardRef(({ className: n, size: i = "default", ...o }, s) => /* @__PURE__ */ r(a.Root, {
-	className: e("peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-basalt-primary data-[state=unchecked]:bg-basalt-input disabled:cursor-not-allowed disabled:opacity-50", t, i === "sm" ? "h-4 w-7" : "h-6 w-11", n),
-	...o,
-	ref: s,
-	children: /* @__PURE__ */ r(a.Thumb, { className: e("pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0", i === "sm" ? "h-3 w-3 data-[state=checked]:translate-x-3" : "h-5 w-5 data-[state=checked]:translate-x-5") })
+var l = r.forwardRef(({ className: r, size: a = "default", ...s }, c) => /* @__PURE__ */ i(o.Root, {
+	className: e(t, "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-basalt-primary data-[state=unchecked]:bg-basalt-input disabled:cursor-not-allowed disabled:opacity-50", n, a === "sm" ? "h-4 w-7" : "h-6 w-11", r),
+	...s,
+	ref: c,
+	children: /* @__PURE__ */ i(o.Thumb, { className: e("pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0", a === "sm" ? "h-3 w-3 data-[state=checked]:translate-x-3" : "h-5 w-5 data-[state=checked]:translate-x-5") })
 }));
-c.displayName = a.Root.displayName;
-var l = n.forwardRef(({ className: t, value: a, defaultValue: s, onValueChange: c, error: l, disabled: u = !1, children: d, "aria-describedby": f, "aria-invalid": p, ...m }, h) => {
-	let g = n.useId(), _ = n.useRef(null), [v, y] = n.useState(s ?? []), b = a ?? v, x = !!l, S = `${g}-error`, C = [x ? S : null, f].filter(Boolean).join(" ") || void 0, w = n.useCallback((e) => {
-		a === void 0 && y(e), c?.(e);
-	}, [c, a]), T = n.useCallback((e) => {
-		_.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
-	}, [h]);
-	return n.useEffect(() => {
+l.displayName = o.Root.displayName;
+var u = r.forwardRef(({ className: t, value: n, defaultValue: o, onValueChange: c, error: l, disabled: u = !1, children: d, "aria-describedby": f, "aria-invalid": p, ...m }, h) => {
+	let g = r.useId(), _ = r.useRef(null), [v, y] = r.useState(o ?? []), b = n ?? v, x = !!l, S = `${g}-error`, C = [x ? S : null, f].filter(Boolean).join(" ") || void 0, w = r.useRef(null), T = r.useCallback((e) => {
+		let t = w.current;
+		t && t.eventPhase !== Event.NONE || (n === void 0 && y(e), c?.(e));
+	}, [c, n]), E = r.useCallback((e) => {
+		if (_.current = e, h) {
+			if (typeof h == "function") {
+				let t = h(e);
+				return typeof t == "function" ? () => {
+					_.current = null, t();
+				} : () => {
+					_.current = null, h(null);
+				};
+			}
+			return h.current = e, () => {
+				_.current = null, h.current = null;
+			};
+		}
+	}, [h]), D = m.form, O = r.useRef({
+		defaultValue: o,
+		value: n
+	});
+	return r.useEffect(() => {
+		O.current = {
+			defaultValue: o,
+			value: n
+		};
+	}), r.useEffect(() => {
 		let e = _.current?.form;
-		if (!e || a !== void 0) return;
-		let t = (e) => {
-			queueMicrotask(() => {
-				e.defaultPrevented || y(s ?? []);
-			});
+		if (!e || D && e.id !== D) return;
+		let t = !1, n = /* @__PURE__ */ new Set(), r = (e) => {
+			w.current = e;
+			let r = setTimeout(() => {
+				if (n.delete(r), t || e.defaultPrevented) return;
+				let i = O.current;
+				i.value === void 0 && y(i.defaultValue ?? []);
+			}, 0);
+			n.add(r);
+		};
+		return e.addEventListener("reset", r, !0), () => {
+			t = !0, w.current = null;
+			for (let e of n) clearTimeout(e);
+			n.clear(), e.removeEventListener("reset", r, !0);
 		};
-		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
-	}, [s, a]), /* @__PURE__ */ r(o.Provider, {
+	}, [D]), /* @__PURE__ */ i(s.Provider, {
 		value: {
 			value: b,
-			setValue: w,
+			setValue: T,
 			disabled: u,
 			invalid: x
 		},
-		children: /* @__PURE__ */ i("fieldset", {
-			ref: T,
+		children: /* @__PURE__ */ a("fieldset", {
+			ref: E,
 			...m,
 			disabled: u,
 			"aria-invalid": x ? !0 : p,
 			"aria-describedby": C,
 			className: e("flex flex-col gap-2", t),
-			children: [d, x ? /* @__PURE__ */ r("p", {
+			children: [d, x ? /* @__PURE__ */ i("p", {
 				id: S,
 				className: "text-xs text-basalt-destructive",
 				role: "alert",
@@ -54,41 +84,42 @@ var l = n.forwardRef(({ className: t, value: a, defaultValue: s, onValueChange:
 		})
 	});
 });
-l.displayName = "Switch.Group";
-var u = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("legend", {
-	ref: i,
+u.displayName = "Switch.Group";
+var d = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("legend", {
+	ref: r,
 	className: e("text-sm font-medium text-basalt-foreground", t),
 	...n
 }));
-u.displayName = "Switch.Legend";
-var d = n.forwardRef(({ className: e, value: t, children: a, disabled: l, size: u, id: d, ...f }, p) => {
-	let m = n.useContext(o), h = m != null, g = n.useId(), _ = d ?? g, v = /* @__PURE__ */ r(c, {
+d.displayName = "Switch.Legend";
+var f = r.forwardRef(({ className: e, value: t, children: n, disabled: o, size: u, id: d, ...f }, p) => {
+	let m = r.useContext(s), h = m != null, g = r.useId(), _ = d ?? g, v = h ? m.value.includes(t) : void 0, y = /* @__PURE__ */ i(l, {
 		ref: p,
 		...f,
 		id: _,
 		value: t,
 		size: u,
-		checked: h ? m.value.includes(t) : void 0,
-		disabled: l || m?.disabled,
+		checked: v,
+		defaultChecked: h ? v : void 0,
+		disabled: o || m?.disabled,
 		"aria-invalid": m?.invalid || void 0,
 		className: e,
 		onCheckedChange: (e) => {
-			h && m.setValue(s(m.value, t, e));
+			h && m.setValue(c(m.value, t, e));
 		}
 	});
-	return a == null ? v : /* @__PURE__ */ i("label", {
+	return n == null ? y : /* @__PURE__ */ a("label", {
 		htmlFor: _,
 		className: "flex items-center gap-2 text-sm text-basalt-foreground",
-		children: [v, a]
+		children: [y, n]
 	});
 });
-d.displayName = "Switch.Item";
-var f = Object.assign(c, {
-	Group: l,
-	Legend: u,
-	Item: d
+f.displayName = "Switch.Item";
+var p = Object.assign(l, {
+	Group: u,
+	Legend: d,
+	Item: f
 });
 //#endregion
-export { f as Switch };
+export { p as Switch };
 
 //# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import * as SwitchPrimitives from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { FOCUS_RING } from \"./overlay\";\n\ntype SwitchGroupContextValue = {\n\tvalue: string[];\n\tsetValue: (next: string[]) => void;\n\tdisabled: boolean;\n\tinvalid: boolean;\n};\n\nconst SwitchGroupContext = React.createContext<SwitchGroupContextValue | null>(null);\n\nfunction nextSwitchGroupValue(current: string[], itemValue: string, checked: boolean): string[] {\n\tif (checked) {\n\t\treturn current.includes(itemValue) ? current : [...current, itemValue];\n\t}\n\treturn current.filter((entry) => entry !== itemValue);\n}\n\nexport type SwitchProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,\n\t\"checked\"\n> & {\n\t/**\n\t * The controlled checked state of the switch.\n\t */\n\tchecked?: boolean;\n\t/**\n\t * The visual size of the switch.\n\t * @default default\n\t */\n\tsize?: \"default\" | \"sm\";\n};\n\nexport type SwitchGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"fieldset\">,\n\t\"onChange\" | \"defaultValue\" | \"disabled\"\n> & {\n\t/**\n\t * The controlled selected values.\n\t */\n\tvalue?: string[];\n\t/**\n\t * The initially selected values.\n\t */\n\tdefaultValue?: string[];\n\t/**\n\t * Called when the selected values change.\n\t */\n\tonValueChange?: (value: string[]) => void;\n\t/**\n\t * Marks the group invalid and shows alert copy.\n\t */\n\terror?: React.ReactNode;\n\t/**\n\t * Disable every item in the group.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport type SwitchLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type SwitchItemProps = Omit<\n\tSwitchProps,\n\t\"checked\" | \"defaultChecked\" | \"onCheckedChange\" | \"value\"\n> & {\n\t/**\n\t * The value stored in the group when this item is on.\n\t */\n\tvalue: string;\n};\n\nconst SwitchRoot = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(\n\t({ className, size = \"default\", ...props }, ref) => (\n\t\t<SwitchPrimitives.Root\n\t\t\tclassName={cn(\n\t\t\t\t\"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-basalt-primary data-[state=unchecked]:bg-basalt-input disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tFOCUS_RING,\n\t\t\t\tsize === \"sm\" ? \"h-4 w-7\" : \"h-6 w-11\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t<SwitchPrimitives.Thumb\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0\",\n\t\t\t\t\tsize === \"sm\"\n\t\t\t\t\t\t? \"h-3 w-3 data-[state=checked]:translate-x-3\"\n\t\t\t\t\t\t: \"h-5 w-5 data-[state=checked]:translate-x-5\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</SwitchPrimitives.Root>\n\t),\n);\nSwitchRoot.displayName = SwitchPrimitives.Root.displayName;\n\nconst SwitchGroup = React.forwardRef<HTMLFieldSetElement, SwitchGroupProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdisabled = false,\n\t\t\tchildren,\n\t\t\t\"aria-describedby\": describedBy,\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst generatedId = React.useId();\n\t\tconst nodeRef = React.useRef<HTMLFieldSetElement | null>(null);\n\t\tconst [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? []);\n\t\tconst current = value ?? uncontrolled;\n\t\tconst invalid = Boolean(error);\n\t\tconst errorId = `${generatedId}-error`;\n\t\tconst mergedDescribedBy =\n\t\t\t[invalid ? errorId : null, describedBy].filter(Boolean).join(\" \") || undefined;\n\t\tconst setValue = React.useCallback(\n\t\t\t(next: string[]) => {\n\t\t\t\tif (value === undefined) {\n\t\t\t\t\tsetUncontrolled(next);\n\t\t\t\t}\n\t\t\t\tonValueChange?.(next);\n\t\t\t},\n\t\t\t[onValueChange, value],\n\t\t);\n\t\tconst setRefs = React.useCallback(\n\t\t\t(node: HTMLFieldSetElement | null) => {\n\t\t\t\tnodeRef.current = node;\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tref(node);\n\t\t\t\t} else if (ref) {\n\t\t\t\t\tref.current = node;\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ref],\n\t\t);\n\t\tReact.useEffect(() => {\n\t\t\tconst form = nodeRef.current?.form;\n\t\t\tif (!form || value !== undefined) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst onReset = (event: Event) => {\n\t\t\t\tqueueMicrotask(() => {\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tsetUncontrolled(defaultValue ?? []);\n\t\t\t\t});\n\t\t\t};\n\t\t\tform.addEventListener(\"reset\", onReset);\n\t\t\treturn () => form.removeEventListener(\"reset\", onReset);\n\t\t}, [defaultValue, value]);\n\t\treturn (\n\t\t\t<SwitchGroupContext.Provider value={{ value: current, setValue, disabled, invalid }}>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\t\taria-describedby={mergedDescribedBy}\n\t\t\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{invalid ? (\n\t\t\t\t\t\t<p id={errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</fieldset>\n\t\t\t</SwitchGroupContext.Provider>\n\t\t);\n\t},\n);\nSwitchGroup.displayName = \"Switch.Group\";\n\nconst SwitchLegend = React.forwardRef<HTMLLegendElement, SwitchLegendProps>(\n\t({ className, ...props }, ref) => (\n\t\t<legend\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm font-medium text-basalt-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nSwitchLegend.displayName = \"Switch.Legend\";\n\nconst SwitchItem = React.forwardRef<\n\tReact.ElementRef<typeof SwitchPrimitives.Root>,\n\tSwitchItemProps\n>(({ className, value, children, disabled, size, id, ...props }, ref) => {\n\tconst group = React.useContext(SwitchGroupContext);\n\tconst grouped = group != null;\n\tconst generatedId = React.useId();\n\tconst controlId = id ?? generatedId;\n\tconst box = (\n\t\t<SwitchRoot\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tid={controlId}\n\t\t\tvalue={value}\n\t\t\tsize={size}\n\t\t\tchecked={grouped ? group.value.includes(value) : undefined}\n\t\t\tdisabled={disabled || group?.disabled}\n\t\t\taria-invalid={group?.invalid || undefined}\n\t\t\tclassName={className}\n\t\t\tonCheckedChange={(next) => {\n\t\t\t\tif (grouped) {\n\t\t\t\t\tgroup.setValue(nextSwitchGroupValue(group.value, value, next));\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n\tif (children == null) {\n\t\treturn box;\n\t}\n\treturn (\n\t\t<label htmlFor={controlId} className=\"flex items-center gap-2 text-sm text-basalt-foreground\">\n\t\t\t{box}\n\t\t\t{children}\n\t\t</label>\n\t);\n});\nSwitchItem.displayName = \"Switch.Item\";\n\nexport const Switch = Object.assign(SwitchRoot, {\n\tGroup: SwitchGroup,\n\tLegend: SwitchLegend,\n\tItem: SwitchItem,\n});\n"],"mappings":";;;;;;;AAYA,IAAM,IAAqB,EAAM,cAA8C,IAAI;AAEnF,SAAS,EAAqB,GAAmB,GAAmB,GAA4B;CAI/F,OAHI,IACI,EAAQ,SAAS,CAAS,IAAI,IAAU,CAAC,GAAG,GAAS,CAAS,IAE/D,EAAQ,QAAQ,MAAU,MAAU,CAAS;AACrD;AAwDA,IAAM,IAAa,EAAM,YACvB,EAAE,cAAW,UAAO,WAAW,GAAG,KAAS,MAC3C,kBAAC,EAAiB,MAAlB;CACC,WAAW,EACV,kPACA,GACA,MAAS,OAAO,YAAY,YAC5B,CACD;CACA,GAAI;CACC;CAEL,UAAA,kBAAC,EAAiB,OAAlB,EACC,WAAW,EACV,8HACA,MAAS,OACN,+CACA,4CACJ,EACA,CAAA;AACqB,CAAA,CAEzB;AACA,EAAW,cAAc,EAAiB,KAAK;AAE/C,IAAM,IAAc,EAAM,YAExB,EACC,cACA,UACA,iBACA,kBACA,UACA,cAAW,IACX,aACA,oBAAoB,GACpB,gBAAgB,GAChB,GAAG,KAEJ,MACI;CACJ,IAAM,IAAc,EAAM,MAAM,GAC1B,IAAU,EAAM,OAAmC,IAAI,GACvD,CAAC,GAAc,KAAmB,EAAM,SAAS,KAAgB,CAAC,CAAC,GACnE,IAAU,KAAS,GACnB,IAAU,EAAQ,GAClB,IAAU,GAAG,EAAY,SACzB,IACL,CAAC,IAAU,IAAU,MAAM,CAAW,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GAChE,IAAW,EAAM,aACrB,MAAmB;EAInB,AAHI,MAAU,KAAA,KACb,EAAgB,CAAI,GAErB,IAAgB,CAAI;CACrB,GACA,CAAC,GAAe,CAAK,CACtB,GACM,IAAU,EAAM,aACpB,MAAqC;EAErC,AADA,EAAQ,UAAU,GACd,OAAO,KAAQ,aAClB,EAAI,CAAI,IACE,MACV,EAAI,UAAU;CAEhB,GACA,CAAC,CAAG,CACL;CAiBA,OAhBA,EAAM,gBAAgB;EACrB,IAAM,IAAO,EAAQ,SAAS;EAC9B,IAAI,CAAC,KAAQ,MAAU,KAAA,GACtB;EAED,IAAM,KAAW,MAAiB;GACjC,qBAAqB;IAChB,EAAM,oBAGV,EAAgB,KAAgB,CAAC,CAAC;GACnC,CAAC;EACF;EAEA,OADA,EAAK,iBAAiB,SAAS,CAAO,SACzB,EAAK,oBAAoB,SAAS,CAAO;CACvD,GAAG,CAAC,GAAc,CAAK,CAAC,GAEvB,kBAAC,EAAmB,UAApB;EAA6B,OAAO;GAAE,OAAO;GAAS;GAAU;GAAU;EAAQ;EACjF,UAAA,kBAAC,YAAD;GACC,KAAK;GACL,GAAI;GACM;GACV,gBAAc,IAAU,KAAO;GAC/B,oBAAkB;GAClB,WAAW,EAAG,uBAAuB,CAAS;GAN/C,UAAA,CAQE,GACA,IACA,kBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAkC,MAAK;IAC/D,UAAA;GACC,CAAA,IACA,IACK;;CACkB,CAAA;AAE/B,CACD;AACA,EAAY,cAAc;AAE1B,IAAM,IAAe,EAAM,YACzB,EAAE,cAAW,GAAG,KAAS,MACzB,kBAAC,UAAD;CACM;CACL,WAAW,EAAG,8CAA8C,CAAS;CACrE,GAAI;AACJ,CAAA,CAEH;AACA,EAAa,cAAc;AAE3B,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,UAAO,aAAU,aAAU,SAAM,OAAI,GAAG,KAAS,MAAQ;CACxE,IAAM,IAAQ,EAAM,WAAW,CAAkB,GAC3C,IAAU,KAAS,MACnB,IAAc,EAAM,MAAM,GAC1B,IAAY,KAAM,GAClB,IACL,kBAAC,GAAD;EACM;EACL,GAAI;EACJ,IAAI;EACG;EACD;EACN,SAAS,IAAU,EAAM,MAAM,SAAS,CAAK,IAAI,KAAA;EACjD,UAAU,KAAY,GAAO;EAC7B,gBAAc,GAAO,WAAW,KAAA;EACrB;EACX,kBAAkB,MAAS;GAC1B,AAAI,KACH,EAAM,SAAS,EAAqB,EAAM,OAAO,GAAO,CAAI,CAAC;EAE/D;CACA,CAAA;CAKF,OAHI,KAAY,OACR,IAGP,kBAAC,SAAD;EAAO,SAAS;EAAW,WAAU;EAArC,UAAA,CACE,GACA,CACK;;AAET,CAAC;AACD,EAAW,cAAc;AAEzB,IAAa,IAAS,OAAO,OAAO,GAAY;CAC/C,OAAO;CACP,QAAQ;CACR,MAAM;AACP,CAAC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import * as SwitchPrimitives from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\ntype SwitchGroupContextValue = {\n\tvalue: string[];\n\tsetValue: (next: string[]) => void;\n\tdisabled: boolean;\n\tinvalid: boolean;\n};\n\nconst SwitchGroupContext = React.createContext<SwitchGroupContextValue | null>(null);\n\nfunction nextSwitchGroupValue(current: string[], itemValue: string, checked: boolean): string[] {\n\tif (checked) {\n\t\treturn current.includes(itemValue) ? current : [...current, itemValue];\n\t}\n\treturn current.filter((entry) => entry !== itemValue);\n}\n\nexport type SwitchProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,\n\t\"checked\"\n> & {\n\t/**\n\t * The controlled checked state of the switch.\n\t */\n\tchecked?: boolean;\n\t/**\n\t * The visual size of the switch.\n\t * @default default\n\t */\n\tsize?: \"default\" | \"sm\";\n};\n\nexport type SwitchGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"fieldset\">,\n\t\"onChange\" | \"defaultValue\" | \"disabled\"\n> & {\n\t/**\n\t * The controlled selected values.\n\t */\n\tvalue?: string[];\n\t/**\n\t * The initially selected values.\n\t */\n\tdefaultValue?: string[];\n\t/**\n\t * Called when the selected values change.\n\t */\n\tonValueChange?: (value: string[]) => void;\n\t/**\n\t * Marks the group invalid and shows alert copy.\n\t */\n\terror?: React.ReactNode;\n\t/**\n\t * Disable every item in the group.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport type SwitchLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type SwitchItemProps = Omit<\n\tSwitchProps,\n\t\"checked\" | \"defaultChecked\" | \"onCheckedChange\" | \"value\"\n> & {\n\t/**\n\t * The value stored in the group when this item is on.\n\t */\n\tvalue: string;\n};\n\nconst SwitchRoot = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(\n\t({ className, size = \"default\", ...props }, ref) => (\n\t\t<SwitchPrimitives.Root\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-basalt-primary data-[state=unchecked]:bg-basalt-input disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tFOCUS_RING,\n\t\t\t\tsize === \"sm\" ? \"h-4 w-7\" : \"h-6 w-11\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t<SwitchPrimitives.Thumb\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0\",\n\t\t\t\t\tsize === \"sm\"\n\t\t\t\t\t\t? \"h-3 w-3 data-[state=checked]:translate-x-3\"\n\t\t\t\t\t\t: \"h-5 w-5 data-[state=checked]:translate-x-5\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</SwitchPrimitives.Root>\n\t),\n);\nSwitchRoot.displayName = SwitchPrimitives.Root.displayName;\n\nconst SwitchGroup = React.forwardRef<HTMLFieldSetElement, SwitchGroupProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdisabled = false,\n\t\t\tchildren,\n\t\t\t\"aria-describedby\": describedBy,\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst generatedId = React.useId();\n\t\tconst nodeRef = React.useRef<HTMLFieldSetElement | null>(null);\n\t\tconst [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? []);\n\t\tconst current = value ?? uncontrolled;\n\t\tconst invalid = Boolean(error);\n\t\tconst errorId = `${generatedId}-error`;\n\t\tconst mergedDescribedBy =\n\t\t\t[invalid ? errorId : null, describedBy].filter(Boolean).join(\" \") || undefined;\n\t\tconst resetEventRef = React.useRef<Event | null>(null);\n\t\tconst setValue = React.useCallback(\n\t\t\t(next: string[]) => {\n\t\t\t\tconst activeReset = resetEventRef.current;\n\t\t\t\tif (activeReset && activeReset.eventPhase !== Event.NONE) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (value === undefined) {\n\t\t\t\t\tsetUncontrolled(next);\n\t\t\t\t}\n\t\t\t\tonValueChange?.(next);\n\t\t\t},\n\t\t\t[onValueChange, value],\n\t\t);\n\t\tconst setRefs = React.useCallback(\n\t\t\t(node: HTMLFieldSetElement | null) => {\n\t\t\t\tnodeRef.current = node;\n\t\t\t\tif (!ref) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tconst cleanup = (ref as React.RefCallback<HTMLFieldSetElement>)(node);\n\t\t\t\t\tif (typeof cleanup === \"function\") {\n\t\t\t\t\t\treturn () => {\n\t\t\t\t\t\t\tnodeRef.current = null;\n\t\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tnodeRef.current = null;\n\t\t\t\t\t\tref(null);\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\t(ref as React.RefObject<HTMLFieldSetElement | null>).current = node;\n\t\t\t\treturn () => {\n\t\t\t\t\tnodeRef.current = null;\n\t\t\t\t\t(ref as React.RefObject<HTMLFieldSetElement | null>).current = null;\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ref],\n\t\t);\n\t\tconst formAttr = props.form;\n\t\tconst latestConfigRef = React.useRef({\n\t\t\tdefaultValue,\n\t\t\tvalue,\n\t\t});\n\t\tReact.useEffect(() => {\n\t\t\tlatestConfigRef.current = {\n\t\t\t\tdefaultValue,\n\t\t\t\tvalue,\n\t\t\t};\n\t\t});\n\n\t\tReact.useEffect(() => {\n\t\t\tconst form = nodeRef.current?.form;\n\t\t\tif (!form || (formAttr && form.id !== formAttr)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tlet disposed = false;\n\t\t\tconst timers = new Set<ReturnType<typeof setTimeout>>();\n\t\t\tconst onReset = (event: Event) => {\n\t\t\t\tresetEventRef.current = event;\n\t\t\t\tconst timer = setTimeout(() => {\n\t\t\t\t\ttimers.delete(timer);\n\t\t\t\t\tif (disposed || event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst cfg = latestConfigRef.current;\n\t\t\t\t\tif (cfg.value === undefined) {\n\t\t\t\t\t\tsetUncontrolled(cfg.defaultValue ?? []);\n\t\t\t\t\t}\n\t\t\t\t}, 0);\n\t\t\t\ttimers.add(timer);\n\t\t\t};\n\t\t\tform.addEventListener(\"reset\", onReset, true);\n\t\t\treturn () => {\n\t\t\t\tdisposed = true;\n\t\t\t\tresetEventRef.current = null;\n\t\t\t\tfor (const timer of timers) {\n\t\t\t\t\tclearTimeout(timer);\n\t\t\t\t}\n\t\t\t\ttimers.clear();\n\t\t\t\tform.removeEventListener(\"reset\", onReset, true);\n\t\t\t};\n\t\t}, [formAttr]);\n\t\treturn (\n\t\t\t<SwitchGroupContext.Provider value={{ value: current, setValue, disabled, invalid }}>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\t\taria-describedby={mergedDescribedBy}\n\t\t\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{invalid ? (\n\t\t\t\t\t\t<p id={errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</fieldset>\n\t\t\t</SwitchGroupContext.Provider>\n\t\t);\n\t},\n);\nSwitchGroup.displayName = \"Switch.Group\";\n\nconst SwitchLegend = React.forwardRef<HTMLLegendElement, SwitchLegendProps>(\n\t({ className, ...props }, ref) => (\n\t\t<legend\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm font-medium text-basalt-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nSwitchLegend.displayName = \"Switch.Legend\";\n\nconst SwitchItem = React.forwardRef<\n\tReact.ElementRef<typeof SwitchPrimitives.Root>,\n\tSwitchItemProps\n>(({ className, value, children, disabled, size, id, ...props }, ref) => {\n\tconst group = React.useContext(SwitchGroupContext);\n\tconst grouped = group != null;\n\tconst generatedId = React.useId();\n\tconst controlId = id ?? generatedId;\n\tconst isChecked = grouped ? group.value.includes(value) : undefined;\n\tconst box = (\n\t\t<SwitchRoot\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tid={controlId}\n\t\t\tvalue={value}\n\t\t\tsize={size}\n\t\t\tchecked={isChecked}\n\t\t\tdefaultChecked={grouped ? isChecked : undefined}\n\t\t\tdisabled={disabled || group?.disabled}\n\t\t\taria-invalid={group?.invalid || undefined}\n\t\t\tclassName={className}\n\t\t\tonCheckedChange={(next) => {\n\t\t\t\tif (grouped) {\n\t\t\t\t\tgroup.setValue(nextSwitchGroupValue(group.value, value, next));\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n\tif (children == null) {\n\t\treturn box;\n\t}\n\treturn (\n\t\t<label htmlFor={controlId} className=\"flex items-center gap-2 text-sm text-basalt-foreground\">\n\t\t\t{box}\n\t\t\t{children}\n\t\t</label>\n\t);\n});\nSwitchItem.displayName = \"Switch.Item\";\n\nexport const Switch = Object.assign(SwitchRoot, {\n\tGroup: SwitchGroup,\n\tLegend: SwitchLegend,\n\tItem: SwitchItem,\n});\n"],"mappings":"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"}

package/dist/components/table-of-contents.js

@@ -1,37 +1,38 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/table-of-contents.tsx
-function r({ title: r = "On this page", children: i, className: a }) {
-	return /* @__PURE__ */ n("nav", {
-		"aria-label": r || "On this page",
-		className: e("text-sm", a),
-		children: [r ? /* @__PURE__ */ t("p", {
+function i({ title: i = "On this page", children: a, className: o }) {
+	return /* @__PURE__ */ r("nav", {
+		"aria-label": i || "On this page",
+		className: e(t, "text-sm", o),
+		children: [i ? /* @__PURE__ */ n("p", {
 			className: "mb-3 text-xs font-semibold tracking-wide text-basalt-muted-foreground uppercase",
-			children: r
-		}) : null, /* @__PURE__ */ t("ul", {
-			className: "flex flex-col gap-2 border-l-2 border-basalt-border",
 			children: i
+		}) : null, /* @__PURE__ */ n("ul", {
+			className: "flex flex-col gap-2 border-l-2 border-basalt-border",
+			children: a
 		})]
 	});
 }
-function i({ active: n, href: r, children: i }) {
-	let a = e("block border-l-2 py-0.5 pl-4", n ? "border-basalt-primary font-medium text-basalt-foreground" : "border-transparent text-basalt-muted-foreground");
-	return /* @__PURE__ */ t("li", {
+function a({ active: t, href: r, children: i }) {
+	let a = e("block border-l-2 py-0.5 pl-4", t ? "border-basalt-primary font-medium text-basalt-foreground" : "border-transparent text-basalt-muted-foreground");
+	return /* @__PURE__ */ n("li", {
 		className: "-ml-0.5",
-		children: r ? /* @__PURE__ */ t("a", {
+		children: r ? /* @__PURE__ */ n("a", {
 			href: r,
-			"aria-current": n ? "location" : void 0,
+			"aria-current": t ? "location" : void 0,
 			className: a,
 			children: i
-		}) : /* @__PURE__ */ t("span", {
-			"aria-current": n ? "location" : void 0,
+		}) : /* @__PURE__ */ n("span", {
+			"aria-current": t ? "location" : void 0,
 			className: a,
 			children: i
 		})
 	});
 }
 //#endregion
-export { r as TableOfContents, i as TableOfContentsItem };
+export { i as TableOfContents, a as TableOfContentsItem };
 
 //# sourceMappingURL=table-of-contents.js.map

package/dist/components/table-of-contents.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-of-contents.js","names":[],"sources":["../../src/components/table-of-contents.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type TableOfContentsProps = {\n\t/**\n\t * Accessible name and heading. Pass an empty string to hide the heading.\n\t * @default \"On this page\"\n\t */\n\ttitle?: string;\n\t/**\n\t * Section items.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Additional classes for the nav.\n\t */\n\tclassName?: string;\n};\n\nexport function TableOfContents({\n\ttitle = \"On this page\",\n\tchildren,\n\tclassName,\n}: TableOfContentsProps) {\n\treturn (\n\t\t<nav aria-label={title || \"On this page\"} className={cn(\"text-sm\", className)}>\n\t\t\t{title ? (\n\t\t\t\t<p className=\"mb-3 text-xs font-semibold tracking-wide text-basalt-muted-foreground uppercase\">\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<ul className=\"flex flex-col gap-2 border-l-2 border-basalt-border\">{children}</ul>\n\t\t</nav>\n\t);\n}\n\nexport type TableOfContentsItemProps = {\n\t/**\n\t * Mark the current section.\n\t * @default false\n\t */\n\tactive?: boolean;\n\t/**\n\t * Optional in-page href. Renders a link when set.\n\t */\n\thref?: string;\n\t/**\n\t * Section label.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function TableOfContentsItem({ active, href, children }: TableOfContentsItemProps) {\n\tconst className = cn(\n\t\t\"block border-l-2 py-0.5 pl-4\",\n\t\tactive\n\t\t\t? \"border-basalt-primary font-medium text-basalt-foreground\"\n\t\t\t: \"border-transparent text-basalt-muted-foreground\",\n\t);\n\treturn (\n\t\t<li className=\"-ml-0.5\">\n\t\t\t{href ? (\n\t\t\t\t<a href={href} aria-current={active ? \"location\" : undefined} className={className}>\n\t\t\t\t\t{children}\n\t\t\t\t</a>\n\t\t\t) : (\n\t\t\t\t<span aria-current={active ? \"location\" : undefined} className={className}>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</li>\n\t);\n}\n"],"mappings":";;;;AAmBA,SAAgB,EAAgB,EAC/B,WAAQ,gBACR,aACA,gBACwB;CACxB,OACC,kBAAC,OAAD;EAAK,cAAY,KAAS;EAAgB,WAAW,EAAG,WAAW,CAAS;EAA5E,UAAA,CACE,IACA,kBAAC,KAAD;GAAG,WAAU;GACX,UAAA;EACC,CAAA,IACA,MACJ,kBAAC,MAAD;GAAI,WAAU;GAAuD;EAAa,CAAA,CAC9E;;AAEP;AAkBA,SAAgB,EAAoB,EAAE,WAAQ,SAAM,eAAsC;CACzF,IAAM,IAAY,EACjB,gCACA,IACG,6DACA,iDACJ;CACA,OACC,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,IACA,kBAAC,KAAD;GAAS;GAAM,gBAAc,IAAS,aAAa,KAAA;GAAsB;GACvE;EACC,CAAA,IAEH,kBAAC,QAAD;GAAM,gBAAc,IAAS,aAAa,KAAA;GAAsB;GAC9D;EACI,CAAA;CAEJ,CAAA;AAEN"}
+{"version":3,"file":"table-of-contents.js","names":[],"sources":["../../src/components/table-of-contents.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TableOfContentsProps = {\n\t/**\n\t * Accessible name and heading. Pass an empty string to hide the heading.\n\t * @default \"On this page\"\n\t */\n\ttitle?: string;\n\t/**\n\t * Section items.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Additional classes for the nav.\n\t */\n\tclassName?: string;\n};\n\nexport function TableOfContents({\n\ttitle = \"On this page\",\n\tchildren,\n\tclassName,\n}: TableOfContentsProps) {\n\treturn (\n\t\t<nav aria-label={title || \"On this page\"} className={cn(BASALT_UI_CLASS, \"text-sm\", className)}>\n\t\t\t{title ? (\n\t\t\t\t<p className=\"mb-3 text-xs font-semibold tracking-wide text-basalt-muted-foreground uppercase\">\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<ul className=\"flex flex-col gap-2 border-l-2 border-basalt-border\">{children}</ul>\n\t\t</nav>\n\t);\n}\n\nexport type TableOfContentsItemProps = {\n\t/**\n\t * Mark the current section.\n\t * @default false\n\t */\n\tactive?: boolean;\n\t/**\n\t * Optional in-page href. Renders a link when set.\n\t */\n\thref?: string;\n\t/**\n\t * Section label.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function TableOfContentsItem({ active, href, children }: TableOfContentsItemProps) {\n\tconst className = cn(\n\t\t\"block border-l-2 py-0.5 pl-4\",\n\t\tactive\n\t\t\t? \"border-basalt-primary font-medium text-basalt-foreground\"\n\t\t\t: \"border-transparent text-basalt-muted-foreground\",\n\t);\n\treturn (\n\t\t<li className=\"-ml-0.5\">\n\t\t\t{href ? (\n\t\t\t\t<a href={href} aria-current={active ? \"location\" : undefined} className={className}>\n\t\t\t\t\t{children}\n\t\t\t\t</a>\n\t\t\t) : (\n\t\t\t\t<span aria-current={active ? \"location\" : undefined} className={className}>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</li>\n\t);\n}\n"],"mappings":";;;;;AAoBA,SAAgB,EAAgB,EAC/B,WAAQ,gBACR,aACA,gBACwB;CACxB,OACC,kBAAC,OAAD;EAAK,cAAY,KAAS;EAAgB,WAAW,EAAG,GAAiB,WAAW,CAAS;EAA7F,UAAA,CACE,IACA,kBAAC,KAAD;GAAG,WAAU;GACX,UAAA;EACC,CAAA,IACA,MACJ,kBAAC,MAAD;GAAI,WAAU;GAAuD;EAAa,CAAA,CAC9E;;AAEP;AAkBA,SAAgB,EAAoB,EAAE,WAAQ,SAAM,eAAsC;CACzF,IAAM,IAAY,EACjB,gCACA,IACG,6DACA,iDACJ;CACA,OACC,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,IACA,kBAAC,KAAD;GAAS;GAAM,gBAAc,IAAS,aAAa,KAAA;GAAsB;GACvE;EACC,CAAA,IAEH,kBAAC,QAAD;GAAM,gBAAc,IAAS,aAAa,KAAA;GAAsB;GAC9D;EACI,CAAA;CAEJ,CAAA;AAEN"}

package/dist/components/table-pager.js

@@ -1,35 +1,36 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Pagination as t } from "./pagination.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Pagination as n } from "./pagination.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/table-pager.tsx
-function i({ start: e, end: t, totalCount: n }) {
+function a({ start: e, end: t, totalCount: n }) {
 	return n === 0 ? "No results" : `Showing ${e}–${t} of ${n}`;
 }
-function a({ className: a, disabled: o = !1, formatRange: s, onPageChange: c, page: l, pageSize: u, totalCount: d }) {
-	let f = Math.max(1, Math.ceil(d / u)), p = Math.min(f, Math.max(1, l)), m = d === 0 ? {
+function o({ className: o, disabled: s = !1, formatRange: c, onPageChange: l, page: u, pageSize: d, totalCount: f }) {
+	let p = Math.max(1, Math.ceil(f / d)), m = Math.min(p, Math.max(1, u)), h = f === 0 ? {
 		start: 0,
 		end: 0,
-		totalCount: d
+		totalCount: f
 	} : {
-		start: (p - 1) * u + 1,
-		end: Math.min(p * u, d),
-		totalCount: d
+		start: (m - 1) * d + 1,
+		end: Math.min(m * d, f),
+		totalCount: f
 	};
-	return /* @__PURE__ */ r("div", {
-		className: e("flex flex-col gap-3 md:flex-row md:items-center md:justify-between", a),
-		children: [/* @__PURE__ */ n("p", {
+	return /* @__PURE__ */ i("div", {
+		className: e(t, "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", o),
+		children: [/* @__PURE__ */ r("p", {
 			className: "text-sm text-basalt-muted-foreground",
-			children: s ? s(m) : i(m)
-		}), /* @__PURE__ */ n(t, {
-			page: l,
-			pageCount: f,
-			disabled: o,
-			onPageChange: c
+			children: c ? c(h) : a(h)
+		}), /* @__PURE__ */ r(n, {
+			page: u,
+			pageCount: p,
+			disabled: s,
+			onPageChange: l
 		})]
 	});
 }
 //#endregion
-export { a as TablePager };
+export { o as TablePager };
 
 //# sourceMappingURL=table-pager.js.map

package/dist/components/table-pager.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-pager.js","names":[],"sources":["../../src/components/table-pager.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Pagination } from \"./pagination\";\n\nexport interface TablePagerRange {\n\tstart: number;\n\tend: number;\n\ttotalCount: number;\n}\n\nexport interface TablePagerProps {\n\t/** 1-based current page. */\n\tpage: number;\n\t/** Number of rows on each page. */\n\tpageSize: number;\n\t/** Total number of rows. */\n\ttotalCount: number;\n\t/** Called with the next 1-based page. */\n\tonPageChange: (page: number) => void;\n\t/**\n\t * Disable every pagination control while keeping the range visible.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/** Replace the default range copy with a custom node. */\n\tformatRange?: (range: TablePagerRange) => React.ReactNode;\n\t/** Additional classes for the pager bar. */\n\tclassName?: string;\n}\n\nfunction defaultRangeText({ start, end, totalCount }: TablePagerRange) {\n\tif (totalCount === 0) {\n\t\treturn \"No results\";\n\t}\n\treturn `Showing ${start}–${end} of ${totalCount}`;\n}\n\nexport function TablePager({\n\tclassName,\n\tdisabled = false,\n\tformatRange,\n\tonPageChange,\n\tpage,\n\tpageSize,\n\ttotalCount,\n}: TablePagerProps) {\n\tconst pageCount = Math.max(1, Math.ceil(totalCount / pageSize));\n\tconst current = Math.min(pageCount, Math.max(1, page));\n\tconst range: TablePagerRange =\n\t\ttotalCount === 0\n\t\t\t? { start: 0, end: 0, totalCount }\n\t\t\t: {\n\t\t\t\t\tstart: (current - 1) * pageSize + 1,\n\t\t\t\t\tend: Math.min(current * pageSize, totalCount),\n\t\t\t\t\ttotalCount,\n\t\t\t\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<p className=\"text-sm text-basalt-muted-foreground\">\n\t\t\t\t{formatRange ? formatRange(range) : defaultRangeText(range)}\n\t\t\t</p>\n\t\t\t<Pagination\n\t\t\t\tpage={page}\n\t\t\t\tpageCount={pageCount}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tonPageChange={onPageChange}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AA8BA,SAAS,EAAiB,EAAE,UAAO,QAAK,iBAA+B;CAItE,OAHI,MAAe,IACX,eAED,WAAW,EAAM,GAAG,EAAI,MAAM;AACtC;AAEA,SAAgB,EAAW,EAC1B,cACA,cAAW,IACX,gBACA,iBACA,SACA,aACA,iBACmB;CACnB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,KAAK,IAAa,CAAQ,CAAC,GACxD,IAAU,KAAK,IAAI,GAAW,KAAK,IAAI,GAAG,CAAI,CAAC,GAC/C,IACL,MAAe,IACZ;EAAE,OAAO;EAAG,KAAK;EAAG;CAAW,IAC/B;EACA,QAAQ,IAAU,KAAK,IAAW;EAClC,KAAK,KAAK,IAAI,IAAU,GAAU,CAAU;EAC5C;CACD;CAEH,OACC,kBAAC,OAAD;EACC,WAAW,EACV,sEACA,CACD;EAJD,UAAA,CAMC,kBAAC,KAAD;GAAG,WAAU;GACX,UAAA,IAAc,EAAY,CAAK,IAAI,EAAiB,CAAK;EACxD,CAAA,GACH,kBAAC,GAAD;GACO;GACK;GACD;GACI;EACd,CAAA,CACG;;AAEP"}
+{"version":3,"file":"table-pager.js","names":[],"sources":["../../src/components/table-pager.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Pagination } from \"./pagination\";\n\nexport interface TablePagerRange {\n\tstart: number;\n\tend: number;\n\ttotalCount: number;\n}\n\nexport interface TablePagerProps {\n\t/** 1-based current page. */\n\tpage: number;\n\t/** Number of rows on each page. */\n\tpageSize: number;\n\t/** Total number of rows. */\n\ttotalCount: number;\n\t/** Called with the next 1-based page. */\n\tonPageChange: (page: number) => void;\n\t/**\n\t * Disable every pagination control while keeping the range visible.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/** Replace the default range copy with a custom node. */\n\tformatRange?: (range: TablePagerRange) => React.ReactNode;\n\t/** Additional classes for the pager bar. */\n\tclassName?: string;\n}\n\nfunction defaultRangeText({ start, end, totalCount }: TablePagerRange) {\n\tif (totalCount === 0) {\n\t\treturn \"No results\";\n\t}\n\treturn `Showing ${start}–${end} of ${totalCount}`;\n}\n\nexport function TablePager({\n\tclassName,\n\tdisabled = false,\n\tformatRange,\n\tonPageChange,\n\tpage,\n\tpageSize,\n\ttotalCount,\n}: TablePagerProps) {\n\tconst pageCount = Math.max(1, Math.ceil(totalCount / pageSize));\n\tconst current = Math.min(pageCount, Math.max(1, page));\n\tconst range: TablePagerRange =\n\t\ttotalCount === 0\n\t\t\t? { start: 0, end: 0, totalCount }\n\t\t\t: {\n\t\t\t\t\tstart: (current - 1) * pageSize + 1,\n\t\t\t\t\tend: Math.min(current * pageSize, totalCount),\n\t\t\t\t\ttotalCount,\n\t\t\t\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<p className=\"text-sm text-basalt-muted-foreground\">\n\t\t\t\t{formatRange ? formatRange(range) : defaultRangeText(range)}\n\t\t\t</p>\n\t\t\t<Pagination\n\t\t\t\tpage={page}\n\t\t\t\tpageCount={pageCount}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tonPageChange={onPageChange}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;AA+BA,SAAS,EAAiB,EAAE,UAAO,QAAK,iBAA+B;CAItE,OAHI,MAAe,IACX,eAED,WAAW,EAAM,GAAG,EAAI,MAAM;AACtC;AAEA,SAAgB,EAAW,EAC1B,cACA,cAAW,IACX,gBACA,iBACA,SACA,aACA,iBACmB;CACnB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,KAAK,IAAa,CAAQ,CAAC,GACxD,IAAU,KAAK,IAAI,GAAW,KAAK,IAAI,GAAG,CAAI,CAAC,GAC/C,IACL,MAAe,IACZ;EAAE,OAAO;EAAG,KAAK;EAAG;CAAW,IAC/B;EACA,QAAQ,IAAU,KAAK,IAAW;EAClC,KAAK,KAAK,IAAI,IAAU,GAAU,CAAU;EAC5C;CACD;CAEH,OACC,kBAAC,OAAD;EACC,WAAW,EACV,GACA,sEACA,CACD;EALD,UAAA,CAOC,kBAAC,KAAD;GAAG,WAAU;GACX,UAAA,IAAc,EAAY,CAAK,IAAI,EAAiB,CAAK;EACxD,CAAA,GACH,kBAAC,GAAD;GACO;GACK;GACD;GACI;EACd,CAAA,CACG;;AAEP"}

package/dist/components/table.d.ts

@@ -6,9 +6,15 @@ export type TableProps = {
     className?: string;
 };
 export declare const Table: React.ForwardRefExoticComponent<TableProps & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-export declare const TableHeader: (props: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
-export declare const TableBody: (props: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
-export declare const TableFooter: (props: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+export interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export declare const TableHeader: (props: TableHeaderProps) => React.JSX.Element;
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export declare const TableBody: (props: TableBodyProps) => React.JSX.Element;
+export interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export declare const TableFooter: (props: TableFooterProps) => React.JSX.Element;
 export type TableRowVariant = "default" | "selected";
 export type TableRowProps = {
     /**

package/dist/components/table.js

@@ -1,33 +1,34 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/table.tsx
-var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("table", {
-	ref: i,
+var i = n.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ r("table", {
+	ref: a,
 	"data-basalt-table": "",
-	className: e("w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground", t),
-	...r
+	className: e(t, "w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground", n),
+	...i
 }));
-r.displayName = "Table";
-var i = (e) => /* @__PURE__ */ n("thead", { ...e }), a = (e) => /* @__PURE__ */ n("tbody", { ...e }), o = (e) => /* @__PURE__ */ n("tfoot", { ...e }), s = ({ className: e, variant: t = "default", ...r }) => /* @__PURE__ */ n("tr", {
-	...r,
-	"aria-selected": t === "selected" || r["aria-selected"],
+i.displayName = "Table";
+var a = (e) => /* @__PURE__ */ r("thead", { ...e }), o = (e) => /* @__PURE__ */ r("tbody", { ...e }), s = (e) => /* @__PURE__ */ r("tfoot", { ...e }), c = ({ className: e, variant: t = "default", ...n }) => /* @__PURE__ */ r("tr", {
+	...n,
+	"aria-selected": t === "selected" || n["aria-selected"],
 	className: e
-}), c = ({ className: t, ...r }) => /* @__PURE__ */ n("th", {
+}), l = ({ className: t, ...n }) => /* @__PURE__ */ r("th", {
 	className: e("border-b border-basalt-border p-3 text-left text-xs font-medium text-basalt-muted-foreground", t),
-	...r
-}), l = ({ className: t, ...r }) => /* @__PURE__ */ n("td", {
+	...n
+}), u = ({ className: t, ...n }) => /* @__PURE__ */ r("td", {
 	className: e("p-3", t),
-	...r
+	...n
 });
-function u({ className: t, ...r }) {
-	return /* @__PURE__ */ n("caption", {
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ r("caption", {
 		className: e("mt-2 text-sm text-basalt-muted-foreground", t),
-		...r
+		...n
 	});
 }
 //#endregion
-export { r as Table, a as TableBody, u as TableCaption, l as TableCell, o as TableFooter, c as TableHead, i as TableHeader, s as TableRow };
+export { i as Table, o as TableBody, d as TableCaption, u as TableCell, s as TableFooter, l as TableHead, a as TableHeader, c as TableRow };
 
 //# sourceMappingURL=table.js.map