@nocoo/basalt 2.1.8 → 3.0.0

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 { 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"}
+{"version":3,"file":"slider.js","names":["React","SliderPrimitive","Slider","ariaLabel","ariaLabelledBy","props","isVertical","orientation","isControlled","value","initialUncontrolledCountRef","defaultValue","thumbCount","cn","BASALT_UI_CLASS","className","thumbLabel","thumbLabelledBy","labels","index","thumbProps","FOCUS_RING"],"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-basalt-full bg-basalt-muted\",\n\t\t\t\t\t\tisVertical ? \"h-full w-basalt-2\" : \"h-basalt-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-basalt-4 w-basalt-4 rounded-basalt-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,IAAaE,IAASF,EAAM,YAE1B,EACC,cACA,UACA,iBACA,SAAM,GACN,SAAM,KACN,iBAAc,cACd,WACA,cAAcG,GACd,mBAAmBC,GACnB,GAAGC,KAEJ,MACI;CACJ,IAAMC,IAAaC,MAAgB,YAC7BC,IAAeC,MAAU,KAAA,GAEzBC,IAA8BV,EAAM,OAAOW,GAAc,UAAU,CAAC,GACpEC,IAAaJ,IAAgBC,GAAO,UAAU,IAAKC,EAA4B;CAErF,OACC,kBAACT,EAAgB,MAAjB;EACM;EACA;EACA;EACQ;EACN;EACO;EACd,cAAYE;EACZ,mBAAiBC;EACjB,WAAWS,EACVC,GACA,qDACAR,IAAa,0CAA0C,iBACvDS,CACD;EACA,GAAIV;EAfL,UAAA,CAiBC,kBAACJ,EAAgB,OAAjB;GACC,WAAWY,EACV,qEACAP,IAAa,sBAAsB,mBACpC;GAEA,UAAA,kBAACL,EAAgB,OAAjB,EACC,WAAWY,EAAG,8BAA8BP,IAAa,WAAW,QAAQ,EAC5E,CAAA;EACqB,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQM,EAAW,IAAI,GAAG,MAAU;GACjD,IAAII,GACAC;GAEJ,AAAIL,MAAe,KAClB,IAAaM,IAAS,MAAMf,GAC5B,IAAkBC,KAEdc,IAASC,OAAW,KAAA,IAEbhB,MACV,AAICa,IAJGJ,MAAe,IAEL,GAAGT,EAAU,GADXgB,MAAU,IAAI,YAAY,cAG5B,GAAGhB,EAAU,SAASgB,IAAQ,EAAE,MAAMP,OANpD,IAAaM,EAAOC;GAWtB,IAAMC,IAA2E,EAChF,WAAWP,EACV,4GACAQ,CACD,EACD;GAQA,OAPIL,MAAe,KAAA,MAClB,EAAW,gBAAgBA,IAExBC,MAAoB,KAAA,MACvB,EAAW,qBAAqBA,IAG1B,kBAAChB,EAAgB,OAAjB,EAAmC,GAAImB,EAAa,GAAxBD,CAAwB;EAC5D,CAAC,CACoB;;AAExB,CACD;AACA,EAAO,cAAclB,EAAgB,KAAK"}

package/dist/components/stat-strip.js

@@ -7,16 +7,17 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/stat-strip.tsx
 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),
+	className: e(t, "grid grid-cols-2 gap-basalt-layout 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",
+		"data-basalt-surface": "",
+		className: "rounded-basalt-lg p-basalt-card",
 		children: [/* @__PURE__ */ i("dt", {
-			className: "text-sm font-medium text-basalt-muted-foreground",
+			className: "text-basalt-base font-medium text-basalt-muted-foreground",
 			children: e.label
 		}), /* @__PURE__ */ i("dd", {
-			className: "mt-1 text-lg font-medium tabular-nums text-basalt-foreground",
+			className: "mt-basalt-space-sm text-basalt-xl font-medium tabular-nums text-basalt-foreground",
 			children: c ? /* @__PURE__ */ i(n, {}) : e.value
 		})]
 	}, t))

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 { 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"}
+{"version":3,"file":"stat-strip.js","names":["React","StatStrip","ariaBusy","props","cn","BASALT_UI_CLASS","className","loading","items","item","SkeletonLine","index"],"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(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"grid grid-cols-2 gap-basalt-layout md:grid-cols-4\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\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 key={index} data-basalt-surface=\"\" className=\"rounded-basalt-lg p-basalt-card\">\n\t\t\t\t\t\t<dt className=\"text-basalt-base font-medium text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t</dt>\n\t\t\t\t\t\t<dd className=\"mt-basalt-space-sm text-basalt-xl 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,IAAaC,IAAYD,EAAM,YAC7B,EAAE,aAAaE,GAAU,cAAW,UAAO,aAAU,IAAO,GAAGC,KAAS,MAEvE,kBAAC,MAAD;CACM;CACL,WAAWC,EACVC,GACA,qDACAC,CACD;CACA,GAAIH;CACJ,aAAWI,IAAU,KAAOL;CAE3B,UAAAM,EAAM,KAAK,GAAM,MACjB,kBAAC,OAAD;EAAiB,uBAAoB;EAAG,WAAU;EAAlD,UAAA,CACC,kBAAC,MAAD;GAAI,WAAU;GACZ,UAAAC,EAAK;EACH,CAAA,GACJ,kBAAC,MAAD;GAAI,WAAU;GACZ,UAAAF,IAAU,kBAACG,GAAD,CAAe,CAAA,IAAID,EAAK;EAChC,CAAA,CACA;CAPK,GAAAE,CAOL,CACL;AACE,CAAA,CAGP;AACA,EAAU,cAAc"}

package/dist/components/switch.js

@@ -12,10 +12,10 @@ function l(e, t, n) {
 	return n ? e.includes(t) ? e : [...e, t] : e.filter((e) => e !== t);
 }
 var u = i.forwardRef(({ className: r, size: i = "default", ...o }, c) => /* @__PURE__ */ a(s.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, i === "sm" ? "h-4 w-7" : "h-6 w-11", r),
+	className: e(t, "peer inline-flex shrink-0 cursor-pointer items-center rounded-basalt-full border-2 border-transparent transition-colors basalt-motion data-[state=checked]:bg-basalt-primary data-[state=unchecked]:bg-basalt-input disabled:cursor-not-allowed disabled:opacity-50", n, i === "sm" ? "h-basalt-4 w-basalt-7" : "h-basalt-6 w-basalt-11", r),
 	...o,
 	ref: c,
-	children: /* @__PURE__ */ a(s.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") })
+	children: /* @__PURE__ */ a(s.Thumb, { className: e("pointer-events-none block rounded-basalt-full bg-basalt-on-solid shadow-lg ring-0 transition-transform basalt-motion data-[state=unchecked]:translate-x-0", i === "sm" ? "h-basalt-3 w-basalt-3 data-[state=checked]:translate-x-basalt-3" : "h-basalt-5 w-basalt-5 data-[state=checked]:translate-x-basalt-5") })
 }));
 u.displayName = s.Root.displayName;
 var d = i.forwardRef(({ className: t, value: n, defaultValue: i, onValueChange: s, error: l, disabled: u = !1, children: d, "aria-describedby": f, "aria-invalid": p, ...m }, h) => {
@@ -42,10 +42,10 @@ var d = i.forwardRef(({ className: t, value: n, defaultValue: i, onValueChange:
 			disabled: u,
 			"aria-invalid": g.ariaInvalid,
 			"aria-describedby": g.mergedDescribedBy,
-			className: e("flex flex-col gap-2", t),
+			className: e("basalt-ui flex flex-col gap-basalt-field-gap", t),
 			children: [d, g.invalid ? /* @__PURE__ */ a("p", {
 				id: g.errorId,
-				className: "text-xs text-basalt-destructive",
+				className: "text-basalt-sm text-basalt-destructive",
 				role: "alert",
 				children: l
 			}) : null]
@@ -55,7 +55,7 @@ var d = i.forwardRef(({ className: t, value: n, defaultValue: i, onValueChange:
 d.displayName = "Switch.Group";
 var f = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a("legend", {
 	ref: r,
-	className: e("text-sm font-medium text-basalt-foreground", t),
+	className: e("mb-basalt-field-gap text-basalt-base font-medium leading-[var(--basalt-line-body)] text-basalt-foreground", t),
 	...n
 }));
 f.displayName = "Switch.Legend";
@@ -77,7 +77,7 @@ var p = i.forwardRef(({ className: e, value: t, children: n, disabled: r, size:
 	});
 	return n == null ? y : /* @__PURE__ */ o("label", {
 		htmlFor: _,
-		className: "flex items-center gap-2 text-sm text-basalt-foreground",
+		className: "flex items-center gap-basalt-space-lg text-basalt-base text-basalt-foreground",
 		children: [y, n]
 	});
 });

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 { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useCheckableGroup } from \"../utils/use-checkable-group\";\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 group = useCheckableGroup({\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdescribedBy,\n\t\t\tariaInvalid,\n\t\t\tform: props.form,\n\t\t\tref,\n\t\t});\n\t\treturn (\n\t\t\t<SwitchGroupContext.Provider\n\t\t\t\tvalue={{ value: group.current, setValue: group.setValue, disabled, invalid: group.invalid }}\n\t\t\t>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={group.setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={group.ariaInvalid}\n\t\t\t\t\taria-describedby={group.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{group.invalid ? (\n\t\t\t\t\t\t<p id={group.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":";;;;;;;;;AAcA,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,GACA,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,IAAQ,EAAkB;EAC/B;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,EAAM;EACZ;CACD,CAAC;CACD,OACC,kBAAC,EAAmB,UAApB;EACC,OAAO;GAAE,OAAO,EAAM;GAAS,UAAU,EAAM;GAAU;GAAU,SAAS,EAAM;EAAQ;EAE1F,UAAA,kBAAC,YAAD;GACC,KAAK,EAAM;GACX,GAAI;GACM;GACV,gBAAc,EAAM;GACpB,oBAAkB,EAAM;GACxB,WAAW,EAAG,uBAAuB,CAAS;GAN/C,UAAA,CAQE,GACA,EAAM,UACN,kBAAC,KAAD;IAAG,IAAI,EAAM;IAAS,WAAU;IAAkC,MAAK;IACrE,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,IAAY,IAAU,EAAM,MAAM,SAAS,CAAK,IAAI,KAAA,GACpD,IACL,kBAAC,GAAD;EACM;EACL,GAAI;EACJ,IAAI;EACG;EACD;EACN,SAAS;EACT,gBAAgB,IAAU,IAAY,KAAA;EACtC,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":["React","SwitchPrimitives","SwitchGroupContext","nextSwitchGroupValue","checked","current","itemValue","entry","SwitchRoot","props","cn","BASALT_UI_CLASS","FOCUS_RING","size","className","SwitchGroup","describedBy","ariaInvalid","group","useCheckableGroup","children","error","SwitchLegend","SwitchItem","grouped","generatedId","controlId","id","isChecked","value","box","disabled","next","Switch"],"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 { useCheckableGroup } from \"../utils/use-checkable-group\";\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-basalt-full border-2 border-transparent transition-colors basalt-motion 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-basalt-4 w-basalt-7\" : \"h-basalt-6 w-basalt-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-basalt-full bg-basalt-on-solid shadow-lg ring-0 transition-transform basalt-motion data-[state=unchecked]:translate-x-0\",\n\t\t\t\t\tsize === \"sm\"\n\t\t\t\t\t\t? \"h-basalt-3 w-basalt-3 data-[state=checked]:translate-x-basalt-3\"\n\t\t\t\t\t\t: \"h-basalt-5 w-basalt-5 data-[state=checked]:translate-x-basalt-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 group = useCheckableGroup({\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdescribedBy,\n\t\t\tariaInvalid,\n\t\t\tform: props.form,\n\t\t\tref,\n\t\t});\n\t\treturn (\n\t\t\t<SwitchGroupContext.Provider\n\t\t\t\tvalue={{ value: group.current, setValue: group.setValue, disabled, invalid: group.invalid }}\n\t\t\t>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={group.setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={group.ariaInvalid}\n\t\t\t\t\taria-describedby={group.mergedDescribedBy}\n\t\t\t\t\tclassName={cn(\"basalt-ui flex flex-col gap-basalt-field-gap\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{group.invalid ? (\n\t\t\t\t\t\t<p id={group.errorId} className=\"text-basalt-sm 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(\n\t\t\t\t\"mb-basalt-field-gap text-basalt-base font-medium leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\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\n\t\t\thtmlFor={controlId}\n\t\t\tclassName=\"flex items-center gap-basalt-space-lg text-basalt-base text-basalt-foreground\"\n\t\t>\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":";;;;;;;;;AAcA,IAAME,IAAqBF,EAAM,cAA8C,IAAI;AAEnF,SAASG,EAAqB,GAAmB,GAAmB,GAA4B;CAI/F,OAHIC,IACIC,EAAQ,SAASC,CAAS,IAAID,IAAU,CAAC,GAAGA,GAASC,CAAS,IAE/DD,EAAQ,QAAQ,MAAUE,MAAUD,CAAS;AACrD;AAwDA,IAAME,IAAaR,EAAM,YACvB,EAAE,cAAW,UAAO,WAAW,GAAGS,KAAS,MAC3C,kBAACR,EAAiB,MAAlB;CACC,WAAWS,EACVC,GACA,uQACAC,GACAC,MAAS,OAAO,0BAA0B,0BAC1CC,CACD;CACA,GAAIL;CACC;CAEL,UAAA,kBAACR,EAAiB,OAAlB,EACC,WAAWS,EACV,6JACAG,MAAS,OACN,oEACA,iEACJ,EACA,CAAA;AACqB,CAAA,CAEzB;AACA,EAAW,cAAcZ,EAAiB,KAAK;AAE/C,IAAMc,IAAcf,EAAM,YAExB,EACC,cACA,UACA,iBACA,kBACA,UACA,cAAW,IACX,aACA,oBAAoBgB,GACpB,gBAAgBC,GAChB,GAAGR,KAEJ,MACI;CACJ,IAAMS,IAAQC,EAAkB;EAC/B;EACA;EACA;EACA;EACA;EACA;EACA,MAAMV,EAAM;EACZ;CACD,CAAC;CACD,OACC,kBAACP,EAAmB,UAApB;EACC,OAAO;GAAE,OAAOgB,EAAM;GAAS,UAAUA,EAAM;GAAU;GAAU,SAASA,EAAM;EAAQ;EAE1F,UAAA,kBAAC,YAAD;GACC,KAAKA,EAAM;GACX,GAAIT;GACM;GACV,gBAAcS,EAAM;GACpB,oBAAkBA,EAAM;GACxB,WAAWR,EAAG,gDAAgDI,CAAS;GANxE,UAAA,CAQEM,GACAF,EAAM,UACN,kBAAC,KAAD;IAAG,IAAIA,EAAM;IAAS,WAAU;IAAyC,MAAK;IAC5E,UAAAG;GACC,CAAA,IACA,IACK;;CACkB,CAAA;AAE/B,CACD;AACA,EAAY,cAAc;AAE1B,IAAMC,IAAetB,EAAM,YACzB,EAAE,cAAW,GAAGS,KAAS,MACzB,kBAAC,UAAD;CACM;CACL,WAAWC,EACV,6GACAI,CACD;CACA,GAAIL;AACJ,CAAA,CAEH;AACA,EAAa,cAAc;AAE3B,IAAMc,IAAavB,EAAM,YAGtB,EAAE,cAAW,UAAO,aAAU,aAAU,SAAM,OAAI,GAAGS,KAAS,MAAQ;CACxE,IAAMS,IAAQlB,EAAM,WAAWE,CAAkB,GAC3CsB,IAAUN,KAAS,MACnBO,IAAczB,EAAM,MAAM,GAC1B0B,IAAYC,KAAMF,GAClBG,IAAYJ,IAAUN,EAAM,MAAM,SAASW,CAAK,IAAI,KAAA,GACpDC,IACL,kBAACtB,GAAD;EACM;EACL,GAAIC;EACJ,IAAIiB;EACG;EACD;EACN,SAASE;EACT,gBAAgBJ,IAAUI,IAAY,KAAA;EACtC,UAAUG,KAAYb,GAAO;EAC7B,gBAAcA,GAAO,WAAW,KAAA;EACrB;EACX,kBAAkB,MAAS;GAC1B,AAAIM,KACHN,EAAM,SAASf,EAAqBe,EAAM,OAAOW,GAAOG,CAAI,CAAC;EAE/D;CACA,CAAA;CAKF,OAHIZ,KAAY,OACRU,IAGP,kBAAC,SAAD;EACC,SAASJ;EACT,WAAU;EAFX,UAAA,CAIEI,GACAV,CACK;;AAET,CAAC;AACD,EAAW,cAAc;AAEzB,IAAaa,IAAS,OAAO,OAAOzB,GAAY;CAC/C,OAAOO;CACP,QAAQO;CACR,MAAMC;AACP,CAAC"}

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

@@ -6,20 +6,20 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 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),
+		className: e(t, "text-basalt-base", o),
 		children: [i ? /* @__PURE__ */ n("p", {
-			className: "mb-3 text-xs font-semibold tracking-wide text-basalt-muted-foreground uppercase",
+			className: "mb-basalt-space-lg text-basalt-sm font-semibold tracking-wide text-basalt-muted-foreground uppercase",
 			children: i
 		}) : null, /* @__PURE__ */ n("ul", {
-			className: "flex flex-col gap-2 border-l-2 border-basalt-border",
+			className: "flex flex-col gap-basalt-space-lg border-l-2 border-basalt-border",
 			children: a
 		})]
 	});
 }
 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");
+	let a = e("block border-l-2 py-basalt-space-xs pl-basalt-space-lg", t ? "border-basalt-primary font-medium text-basalt-foreground" : "border-transparent text-basalt-muted-foreground");
 	return /* @__PURE__ */ n("li", {
-		className: "-ml-0.5",
+		className: "-ml-basalt-space-xs",
 		children: r ? /* @__PURE__ */ n("a", {
 			href: r,
 			"aria-current": t ? "location" : void 0,

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\";\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"}
+{"version":3,"file":"table-of-contents.js","names":["TableOfContents","title","cn","BASALT_UI_CLASS","className","TableOfContentsItem","active","href"],"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\n\t\t\taria-label={title || \"On this page\"}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"text-basalt-base\", className)}\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<p className=\"mb-basalt-space-lg text-basalt-sm 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-basalt-space-lg border-l-2 border-basalt-border\">\n\t\t\t\t{children}\n\t\t\t</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-basalt-space-xs pl-basalt-space-lg\",\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-basalt-space-xs\">\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,SAAgBA,EAAgB,EAC/B,WAAQ,gBACR,aACA,gBACwB;CACxB,OACC,kBAAC,OAAD;EACC,cAAYC,KAAS;EACrB,WAAWC,EAAGC,GAAiB,oBAAoBC,CAAS;EAF7D,UAAA,CAIEH,IACA,kBAAC,KAAD;GAAG,WAAU;GACX,UAAAA;EACC,CAAA,IACA,MACJ,kBAAC,MAAD;GAAI,WAAU;GACZ;EACE,CAAA,CACA;;AAEP;AAkBA,SAAgBI,EAAoB,EAAE,WAAQ,SAAM,eAAsC;CACzF,IAAMD,IAAYF,EACjB,0DACAI,IACG,6DACA,iDACJ;CACA,OACC,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAAC,IACA,kBAAC,KAAD;GAAS;GAAM,gBAAcD,IAAS,aAAa,KAAA;GAAsB;GACvE;EACC,CAAA,IAEH,kBAAC,QAAD;GAAM,gBAAcA,IAAS,aAAa,KAAA;GAAsB;GAC9D;EACI,CAAA;CAEJ,CAAA;AAEN"}

package/dist/components/table-pager.js

@@ -18,9 +18,9 @@ function o({ className: o, disabled: s = !1, formatRange: c, onPageChange: l, pa
 		totalCount: f
 	};
 	return /* @__PURE__ */ i("div", {
-		className: e(t, "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", o),
+		className: e(t, "flex flex-col gap-basalt-space-lg md:flex-row md:items-center md:justify-between", o),
 		children: [/* @__PURE__ */ r("p", {
-			className: "text-sm text-basalt-muted-foreground",
+			className: "text-basalt-base text-basalt-muted-foreground",
 			children: c ? c(h) : a(h)
 		}), /* @__PURE__ */ r(n, {
 			page: u,

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 { 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"}
+{"version":3,"file":"table-pager.js","names":["defaultRangeText","totalCount","start","end","TablePager","pageCount","pageSize","current","page","range","cn","BASALT_UI_CLASS","className","formatRange","Pagination"],"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-basalt-space-lg 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-basalt-base 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,SAASA,EAAiB,EAAE,UAAO,QAAK,iBAA+B;CAItE,OAHIC,MAAe,IACX,eAED,WAAWC,EAAM,GAAGC,EAAI,MAAMF;AACtC;AAEA,SAAgBG,EAAW,EAC1B,cACA,cAAW,IACX,gBACA,iBACA,SACA,aACA,iBACmB;CACnB,IAAMC,IAAY,KAAK,IAAI,GAAG,KAAK,KAAKJ,IAAaK,CAAQ,CAAC,GACxDC,IAAU,KAAK,IAAIF,GAAW,KAAK,IAAI,GAAGG,CAAI,CAAC,GAC/CC,IACLR,MAAe,IACZ;EAAE,OAAO;EAAG,KAAK;EAAG;CAAW,IAC/B;EACA,QAAQM,IAAU,KAAKD,IAAW;EAClC,KAAK,KAAK,IAAIC,IAAUD,GAAUL,CAAU;EAC5C;CACD;CAEH,OACC,kBAAC,OAAD;EACC,WAAWS,EACVC,GACA,oFACAC,CACD;EALD,UAAA,CAOC,kBAAC,KAAD;GAAG,WAAU;GACX,UAAAC,IAAcA,EAAYJ,CAAK,IAAIT,EAAiBS,CAAK;EACxD,CAAA,GACH,kBAACK,GAAD;GACO;GACK;GACD;GACI;EACd,CAAA,CACG;;AAEP"}

package/dist/components/table.js

@@ -7,7 +7,7 @@ import { jsx as r } from "react/jsx-runtime";
 var i = n.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ r("table", {
 	ref: a,
 	"data-basalt-table": "",
-	className: e(t, "w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground", n),
+	className: e(t, "w-full border-separate border-spacing-0 caption-bottom text-left text-basalt-code leading-[var(--basalt-line-body)] text-basalt-foreground", n),
 	...i
 }));
 i.displayName = "Table";
@@ -16,15 +16,15 @@ var a = (e) => /* @__PURE__ */ r("thead", { ...e }), o = (e) => /* @__PURE__ */
 	"aria-selected": t === "selected" || n["aria-selected"],
 	className: e
 }), 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),
+	className: e("relative h-basalt-table-row whitespace-nowrap border-b border-basalt-border px-basalt-table-x py-basalt-table-y text-left align-middle text-basalt-sm font-medium text-basalt-muted-foreground", t),
 	...n
 }), u = ({ className: t, ...n }) => /* @__PURE__ */ r("td", {
-	className: e("p-3", t),
+	className: e("relative h-basalt-table-row px-basalt-table-x py-basalt-table-y align-middle", t),
 	...n
 });
 function d({ className: t, ...n }) {
 	return /* @__PURE__ */ r("caption", {
-		className: e("mt-2 text-sm text-basalt-muted-foreground", t),
+		className: e("mt-basalt-space-lg text-basalt-base text-basalt-muted-foreground", t),
 		...n
 	});
 }

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TableProps = {\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableHead = ({\n\tclassName,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"border-b border-basalt-border p-3 text-left text-xs font-medium text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableCell = ({\n\tclassName,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td className={cn(\"p-3\", className)} {...props} />\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption className={cn(\"mt-2 text-sm text-basalt-muted-foreground\", className)} {...props} />\n\t);\n}\n"],"mappings":";;;;;;AAWA,IAAa,IAAQ,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,WAAW,EACV,GACA,mGACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAa,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAI9D,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAI1D,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAgB9D,KAAY,EACxB,cACA,aAAU,WACV,GAAG,QAEH,kBAAC,MAAD;CACC,GAAI;CACJ,iBAAe,MAAY,cAAoB,EAAM;CAC1C;AACX,CAAA,GAUW,KAAa,EACzB,cACA,GAAG,QAEH,kBAAC,MAAD;CACC,WAAW,EACV,gGACA,CACD;CACA,GAAI;AACJ,CAAA,GAUW,KAAa,EACzB,cACA,GAAG,QAEH,kBAAC,MAAD;CAAI,WAAW,EAAG,OAAO,CAAS;CAAG,GAAI;AAAQ,CAAA;AAUlD,SAAgB,EAAa,EAC5B,cACA,GAAG,KACkE;CACrE,OACC,kBAAC,WAAD;EAAS,WAAW,EAAG,6CAA6C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F"}
+{"version":3,"file":"table.js","names":["React","Table","props","cn","BASALT_UI_CLASS","className","TableHeader","TableBody","TableFooter","TableRow","variant","TableHead","TableCell","TableCaption"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TableProps = {\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-left text-basalt-code leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableHead = ({\n\tclassName,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row whitespace-nowrap border-b border-basalt-border px-basalt-table-x py-basalt-table-y text-left align-middle text-basalt-sm font-medium text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableCell = ({\n\tclassName,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row px-basalt-table-x py-basalt-table-y align-middle\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption\n\t\t\tclassName={cn(\"mt-basalt-space-lg text-basalt-base text-basalt-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAWA,IAAaC,IAAQD,EAAM,YAGxB,EAAE,cAAW,GAAGE,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,WAAWC,EACVC,GACA,8IACAC,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAaI,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIJ,EAAQ,CAAA,GAI9DK,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAIL,EAAQ,CAAA,GAI1DM,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIN,EAAQ,CAAA,GAgB9DO,KAAY,EACxB,cACA,aAAU,WACV,GAAGP,QAEH,kBAAC,MAAD;CACC,GAAIA;CACJ,iBAAeQ,MAAY,cAAoBR,EAAM;CAC1C;AACX,CAAA,GAUWS,KAAa,EACzB,cACA,GAAGT,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,kMACAE,CACD;CACA,GAAIH;AACJ,CAAA,GAUWU,KAAa,EACzB,cACA,GAAGV,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,gFACAE,CACD;CACA,GAAIH;AACJ,CAAA;AAUF,SAAgBW,EAAa,EAC5B,cACA,GAAGX,KACkE;CACrE,OACC,kBAAC,WAAD;EACC,WAAWC,EAAG,oEAAoEE,CAAS;EAC3F,GAAIH;CACJ,CAAA;AAEH"}

package/dist/components/tabs.js

@@ -30,16 +30,17 @@ var u = i.forwardRef(({ className: t, children: n, showIndicator: i = !0, ...l }
 	});
 	return /* @__PURE__ */ o(s.List, {
 		ref: d,
-		className: e("relative flex flex-wrap items-center gap-1 border-b border-basalt-border", t),
+		className: e("relative flex flex-wrap items-center gap-basalt-space-sm border-b border-basalt-border", t),
 		...l,
 		children: [n, i ? /* @__PURE__ */ a("span", {
 			"aria-hidden": "true",
 			"data-slot": "selection-indicator",
-			className: e("pointer-events-none absolute h-0.5 bg-basalt-primary", p),
+			className: e("pointer-events-none absolute h-basalt-0_5 bg-basalt-primary", p),
 			style: {
-				left: f.left,
+				left: 0,
+				transform: `translate(${f.left}px, ${f.top}px)`,
 				width: f.visible ? f.width : 0,
-				top: f.top
+				top: 0
 			}
 		}) : null]
 	});
@@ -47,13 +48,13 @@ var u = i.forwardRef(({ className: t, children: n, showIndicator: i = !0, ...l }
 u.displayName = s.List.displayName;
 var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(s.Trigger, {
 	ref: i,
-	className: e("inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-basalt-muted-foreground transition-colors hover:text-basalt-foreground data-[state=active]:text-basalt-primary", n, t),
+	className: e("basalt-action rounded-t-basalt-md inline-flex items-center justify-center font-medium text-basalt-muted-foreground transition-colors basalt-motion hover:text-basalt-foreground data-[state=active]:bg-basalt-selected data-[state=active]:text-basalt-selected-foreground", n, t),
 	...r
 }));
 d.displayName = s.Trigger.displayName;
 var f = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(s.Content, {
 	ref: i,
-	className: e("mt-3 text-sm text-basalt-foreground data-[state=active]:animate-basalt-tab-in", n, t),
+	className: e("mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in", n, t),
 	...r
 }));
 f.displayName = s.Content.displayName;

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { OVERLAY_MOTION } from \"./overlay\";\n\nfunction measureTabUnderline(item: HTMLElement): {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n} {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop + item.offsetHeight,\n\t\theight: 0,\n\t};\n}\n\nexport type TabsProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected tab.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial tab.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected tab changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Tabs: React.FC<TabsProps> = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Root>,\n\tTabsProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n\t/**\n\t * Show the sliding active underline.\n\t * @default true\n\t */\n\tshowIndicator?: boolean;\n};\n\nexport const TabsList = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.List>,\n\tTabsListProps\n>(({ className, children, showIndicator = true, ...props }, ref) => {\n\tconst {\n\t\tref: listRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\titemSelector: '[role=\"tab\"][data-state=\"active\"]',\n\t\tenabled: showIndicator,\n\t\tmapGeometry: measureTabUnderline,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tref={listRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-wrap items-center gap-1 border-b border-basalt-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\tclassName={cn(\"pointer-events-none absolute h-0.5 bg-basalt-primary\", motionClassName)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: state.left,\n\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\ttop: state.top,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</TabsPrimitive.List>\n\t);\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nexport type TabsTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n\t\"disabled\" | \"value\"\n> & {\n\t/**\n\t * The tab value.\n\t */\n\tvalue: string;\n\t/**\n\t * Disable the tab trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const TabsTrigger = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Trigger>,\n\tTabsTriggerProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-basalt-muted-foreground transition-colors hover:text-basalt-foreground data-[state=active]:text-basalt-primary\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nexport type TabsContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>,\n\t\"value\"\n> & {\n\t/**\n\t * The tab value this panel belongs to.\n\t */\n\tvalue: string;\n};\n\nexport const TabsContent = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Content>,\n\tTabsContentProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"mt-3 text-sm text-basalt-foreground data-[state=active]:animate-basalt-tab-in\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;AAOA,SAAS,EAAoB,GAK3B;CACD,OAAO;EACN,MAAM,EAAK;EACX,OAAO,EAAK;EACZ,KAAK,EAAK,YAAY,EAAK;EAC3B,QAAQ;CACT;AACD;AAmBA,IAAa,IAA4B,EAAM,YAG5C,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAc,MAAf;CAAyB;CAAK,WAAW,EAAG,GAAiB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACrF;AACD,EAAK,cAAc,EAAc,KAAK;AAUtC,IAAa,IAAW,EAAM,YAG3B,EAAE,cAAW,aAAU,mBAAgB,IAAM,GAAG,KAAS,MAAQ;CACnE,IAAM,EACL,KAAK,GACL,UACA,uBACG,EAAsB;EACzB,cAAc;EACd,SAAS;EACT,aAAa;EACb;CACD,CAAC;CAED,OACC,kBAAC,EAAc,MAAf;EACC,KAAK;EACL,WAAW,EACV,4EACA,CACD;EACA,GAAI;EANL,UAAA,CAQE,GACA,IACA,kBAAC,QAAD;GACC,eAAY;GACZ,aAAU;GACV,WAAW,EAAG,wDAAwD,CAAe;GACrF,OAAO;IACN,MAAM,EAAM;IACZ,OAAO,EAAM,UAAU,EAAM,QAAQ;IACrC,KAAK,EAAM;GACZ;EACA,CAAA,IACE,IACe;;AAEtB,CAAC;AACD,EAAS,cAAc,EAAc,KAAK;AAiB1C,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAc,SAAf;CACM;CACL,WAAW,EACV,6LACA,GACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAc,QAAQ;AAYhD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAc,SAAf;CACM;CACL,WAAW,EACV,iFACA,GACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAc,QAAQ"}
+{"version":3,"file":"tabs.js","names":["React","TabsPrimitive","measureTabUnderline","item","Tabs","props","cn","BASALT_UI_CLASS","className","TabsList","listRef","useSelectionIndicator","showIndicator","children","motionClassName","state","TabsTrigger","OVERLAY_MOTION","TabsContent"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { OVERLAY_MOTION } from \"./overlay\";\n\nfunction measureTabUnderline(item: HTMLElement): {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n} {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop + item.offsetHeight,\n\t\theight: 0,\n\t};\n}\n\nexport type TabsProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected tab.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial tab.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected tab changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Tabs: React.FC<TabsProps> = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Root>,\n\tTabsProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n\t/**\n\t * Show the sliding active underline.\n\t * @default true\n\t */\n\tshowIndicator?: boolean;\n};\n\nexport const TabsList = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.List>,\n\tTabsListProps\n>(({ className, children, showIndicator = true, ...props }, ref) => {\n\tconst {\n\t\tref: listRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\titemSelector: '[role=\"tab\"][data-state=\"active\"]',\n\t\tenabled: showIndicator,\n\t\tmapGeometry: measureTabUnderline,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tref={listRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-wrap items-center gap-basalt-space-sm border-b border-basalt-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute h-basalt-0_5 bg-basalt-primary\",\n\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\ttransform: `translate(${state.left}px, ${state.top}px)`,\n\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</TabsPrimitive.List>\n\t);\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nexport type TabsTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n\t\"disabled\" | \"value\"\n> & {\n\t/**\n\t * The tab value.\n\t */\n\tvalue: string;\n\t/**\n\t * Disable the tab trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const TabsTrigger = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Trigger>,\n\tTabsTriggerProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"basalt-action rounded-t-basalt-md inline-flex items-center justify-center font-medium text-basalt-muted-foreground transition-colors basalt-motion hover:text-basalt-foreground data-[state=active]:bg-basalt-selected data-[state=active]:text-basalt-selected-foreground\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nexport type TabsContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>,\n\t\"value\"\n> & {\n\t/**\n\t * The tab value this panel belongs to.\n\t */\n\tvalue: string;\n};\n\nexport const TabsContent = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Content>,\n\tTabsContentProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;AAOA,SAASE,EAAoB,GAK3B;CACD,OAAO;EACN,MAAMC,EAAK;EACX,OAAOA,EAAK;EACZ,KAAKA,EAAK,YAAYA,EAAK;EAC3B,QAAQ;CACT;AACD;AAmBA,IAAaC,IAA4BJ,EAAM,YAG5C,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,MAAf;CAAyB;CAAK,WAAWK,EAAGC,GAAiBC,CAAS;CAAG,GAAIH;AAAQ,CAAA,CACrF;AACD,EAAK,cAAcJ,EAAc,KAAK;AAUtC,IAAaQ,IAAWT,EAAM,YAG3B,EAAE,cAAW,aAAU,mBAAgB,IAAM,GAAGK,KAAS,MAAQ;CACnE,IAAM,EACL,KAAKK,GACL,UACA,uBACGC,EAAsB;EACzB,cAAc;EACd,SAASC;EACT,aAAaV;EACb;CACD,CAAC;CAED,OACC,kBAACD,EAAc,MAAf;EACC,KAAKS;EACL,WAAWJ,EACV,0FACAE,CACD;EACA,GAAIH;EANL,UAAA,CAQEQ,GACAD,IACA,kBAAC,QAAD;GACC,eAAY;GACZ,aAAU;GACV,WAAWN,EACV,+DACAQ,CACD;GACA,OAAO;IACN,MAAM;IACN,WAAW,aAAaC,EAAM,KAAK,MAAMA,EAAM,IAAI;IACnD,OAAOA,EAAM,UAAUA,EAAM,QAAQ;IACrC,KAAK;GACN;EACA,CAAA,IACE,IACe;;AAEtB,CAAC;AACD,EAAS,cAAcd,EAAc,KAAK;AAiB1C,IAAae,IAAchB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,8QACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ;AAYhD,IAAaiB,IAAclB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,wGACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ"}

package/dist/components/tag-badge.d.ts

@@ -3,43 +3,43 @@ import type { ComponentProps } from "react";
 export declare const TAG_COLORS: {
     readonly slate: {
         readonly label: "Slate";
-        readonly className: "border-slate-300 bg-slate-100 text-slate-800 basalt-dark:border-slate-600 basalt-dark:bg-slate-800 basalt-dark:text-slate-100";
+        readonly className: "border-basalt-tag-slate-border bg-basalt-tag-slate text-basalt-tag-slate-foreground";
     };
     readonly blue: {
         readonly label: "Blue";
-        readonly className: "border-blue-300 bg-blue-50 text-blue-800 basalt-dark:border-blue-700 basalt-dark:bg-blue-950 basalt-dark:text-blue-200";
+        readonly className: "border-basalt-tag-blue-border bg-basalt-tag-blue text-basalt-tag-blue-foreground";
     };
     readonly violet: {
         readonly label: "Violet";
-        readonly className: "border-violet-300 bg-violet-50 text-violet-800 basalt-dark:border-violet-700 basalt-dark:bg-violet-950 basalt-dark:text-violet-200";
+        readonly className: "border-basalt-tag-violet-border bg-basalt-tag-violet text-basalt-tag-violet-foreground";
     };
     readonly teal: {
         readonly label: "Teal";
-        readonly className: "border-teal-300 bg-teal-50 text-teal-800 basalt-dark:border-teal-700 basalt-dark:bg-teal-950 basalt-dark:text-teal-200";
+        readonly className: "border-basalt-tag-teal-border bg-basalt-tag-teal text-basalt-tag-teal-foreground";
     };
     readonly amber: {
         readonly label: "Amber";
-        readonly className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200";
+        readonly className: "border-basalt-tag-amber-border bg-basalt-tag-amber text-basalt-tag-amber-foreground";
     };
     readonly rose: {
         readonly label: "Rose";
-        readonly className: "border-rose-300 bg-rose-50 text-rose-800 basalt-dark:border-rose-700 basalt-dark:bg-rose-950 basalt-dark:text-rose-200";
+        readonly className: "border-basalt-tag-rose-border bg-basalt-tag-rose text-basalt-tag-rose-foreground";
     };
     readonly success: {
         readonly label: "Success";
-        readonly className: "border-emerald-300 bg-emerald-50 text-emerald-800 basalt-dark:border-emerald-700 basalt-dark:bg-emerald-950 basalt-dark:text-emerald-200";
+        readonly className: "border-basalt-tag-success-border bg-basalt-tag-success text-basalt-tag-success-foreground";
     };
     readonly warning: {
         readonly label: "Warning";
-        readonly className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200";
+        readonly className: "border-basalt-tag-warning-border bg-basalt-tag-warning text-basalt-tag-warning-foreground";
     };
     readonly danger: {
         readonly label: "Danger";
-        readonly className: "border-red-300 bg-red-50 text-red-800 basalt-dark:border-red-700 basalt-dark:bg-red-950 basalt-dark:text-red-200";
+        readonly className: "border-basalt-tag-danger-border bg-basalt-tag-danger text-basalt-tag-danger-foreground";
     };
     readonly info: {
         readonly label: "Info";
-        readonly className: "border-sky-300 bg-sky-50 text-sky-800 basalt-dark:border-sky-700 basalt-dark:bg-sky-950 basalt-dark:text-sky-200";
+        readonly className: "border-basalt-tag-info-border bg-basalt-tag-info text-basalt-tag-info-foreground";
     };
 };
 export type TagColor = keyof typeof TAG_COLORS;

package/dist/components/tag-badge.js

@@ -6,43 +6,43 @@ import { jsx as n } from "react/jsx-runtime";
 var r = {
 	slate: {
 		label: "Slate",
-		className: "border-slate-300 bg-slate-100 text-slate-800 basalt-dark:border-slate-600 basalt-dark:bg-slate-800 basalt-dark:text-slate-100"
+		className: "border-basalt-tag-slate-border bg-basalt-tag-slate text-basalt-tag-slate-foreground"
 	},
 	blue: {
 		label: "Blue",
-		className: "border-blue-300 bg-blue-50 text-blue-800 basalt-dark:border-blue-700 basalt-dark:bg-blue-950 basalt-dark:text-blue-200"
+		className: "border-basalt-tag-blue-border bg-basalt-tag-blue text-basalt-tag-blue-foreground"
 	},
 	violet: {
 		label: "Violet",
-		className: "border-violet-300 bg-violet-50 text-violet-800 basalt-dark:border-violet-700 basalt-dark:bg-violet-950 basalt-dark:text-violet-200"
+		className: "border-basalt-tag-violet-border bg-basalt-tag-violet text-basalt-tag-violet-foreground"
 	},
 	teal: {
 		label: "Teal",
-		className: "border-teal-300 bg-teal-50 text-teal-800 basalt-dark:border-teal-700 basalt-dark:bg-teal-950 basalt-dark:text-teal-200"
+		className: "border-basalt-tag-teal-border bg-basalt-tag-teal text-basalt-tag-teal-foreground"
 	},
 	amber: {
 		label: "Amber",
-		className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200"
+		className: "border-basalt-tag-amber-border bg-basalt-tag-amber text-basalt-tag-amber-foreground"
 	},
 	rose: {
 		label: "Rose",
-		className: "border-rose-300 bg-rose-50 text-rose-800 basalt-dark:border-rose-700 basalt-dark:bg-rose-950 basalt-dark:text-rose-200"
+		className: "border-basalt-tag-rose-border bg-basalt-tag-rose text-basalt-tag-rose-foreground"
 	},
 	success: {
 		label: "Success",
-		className: "border-emerald-300 bg-emerald-50 text-emerald-800 basalt-dark:border-emerald-700 basalt-dark:bg-emerald-950 basalt-dark:text-emerald-200"
+		className: "border-basalt-tag-success-border bg-basalt-tag-success text-basalt-tag-success-foreground"
 	},
 	warning: {
 		label: "Warning",
-		className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200"
+		className: "border-basalt-tag-warning-border bg-basalt-tag-warning text-basalt-tag-warning-foreground"
 	},
 	danger: {
 		label: "Danger",
-		className: "border-red-300 bg-red-50 text-red-800 basalt-dark:border-red-700 basalt-dark:bg-red-950 basalt-dark:text-red-200"
+		className: "border-basalt-tag-danger-border bg-basalt-tag-danger text-basalt-tag-danger-foreground"
 	},
 	info: {
 		label: "Info",
-		className: "border-sky-300 bg-sky-50 text-sky-800 basalt-dark:border-sky-700 basalt-dark:bg-sky-950 basalt-dark:text-sky-200"
+		className: "border-basalt-tag-info-border bg-basalt-tag-info text-basalt-tag-info-foreground"
 	}
 }, i = [
 	"slate",
@@ -62,7 +62,7 @@ function o({ name: i, colorKey: o, color: s, size: c = "md", className: l, ...u
 	return /* @__PURE__ */ n("span", {
 		...u,
 		"data-tag-color": d,
-		className: e(t, "inline-flex max-w-full items-center break-words rounded-full border font-medium", c === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm", r[d].className, l),
+		className: e(t, "inline-flex max-w-full items-center break-words rounded-basalt-full border font-medium", "basalt-inline", c === "sm" && "px-basalt-space-sm", r[d].className, l),
 		children: i
 	});
 }

package/dist/components/tag-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-badge.js","names":[],"sources":["../../src/components/tag-badge.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Stable identifiers, labels and opaque foreground/background pairs for both themes. */\nexport const TAG_COLORS = {\n\tslate: {\n\t\tlabel: \"Slate\",\n\t\tclassName:\n\t\t\t\"border-slate-300 bg-slate-100 text-slate-800 basalt-dark:border-slate-600 basalt-dark:bg-slate-800 basalt-dark:text-slate-100\",\n\t},\n\tblue: {\n\t\tlabel: \"Blue\",\n\t\tclassName:\n\t\t\t\"border-blue-300 bg-blue-50 text-blue-800 basalt-dark:border-blue-700 basalt-dark:bg-blue-950 basalt-dark:text-blue-200\",\n\t},\n\tviolet: {\n\t\tlabel: \"Violet\",\n\t\tclassName:\n\t\t\t\"border-violet-300 bg-violet-50 text-violet-800 basalt-dark:border-violet-700 basalt-dark:bg-violet-950 basalt-dark:text-violet-200\",\n\t},\n\tteal: {\n\t\tlabel: \"Teal\",\n\t\tclassName:\n\t\t\t\"border-teal-300 bg-teal-50 text-teal-800 basalt-dark:border-teal-700 basalt-dark:bg-teal-950 basalt-dark:text-teal-200\",\n\t},\n\tamber: {\n\t\tlabel: \"Amber\",\n\t\tclassName:\n\t\t\t\"border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200\",\n\t},\n\trose: {\n\t\tlabel: \"Rose\",\n\t\tclassName:\n\t\t\t\"border-rose-300 bg-rose-50 text-rose-800 basalt-dark:border-rose-700 basalt-dark:bg-rose-950 basalt-dark:text-rose-200\",\n\t},\n\tsuccess: {\n\t\tlabel: \"Success\",\n\t\tclassName:\n\t\t\t\"border-emerald-300 bg-emerald-50 text-emerald-800 basalt-dark:border-emerald-700 basalt-dark:bg-emerald-950 basalt-dark:text-emerald-200\",\n\t},\n\twarning: {\n\t\tlabel: \"Warning\",\n\t\tclassName:\n\t\t\t\"border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200\",\n\t},\n\tdanger: {\n\t\tlabel: \"Danger\",\n\t\tclassName:\n\t\t\t\"border-red-300 bg-red-50 text-red-800 basalt-dark:border-red-700 basalt-dark:bg-red-950 basalt-dark:text-red-200\",\n\t},\n\tinfo: {\n\t\tlabel: \"Info\",\n\t\tclassName:\n\t\t\t\"border-sky-300 bg-sky-50 text-sky-800 basalt-dark:border-sky-700 basalt-dark:bg-sky-950 basalt-dark:text-sky-200\",\n\t},\n} as const;\nexport type TagColor = keyof typeof TAG_COLORS;\nconst HASH_COLORS = [\"slate\", \"blue\", \"violet\", \"teal\", \"amber\", \"rose\"] as const;\n/** Stable FNV-1a assignment to six non-semantic colors; does not infer business meaning. */\nexport function tagColorFor(key: string): TagColor {\n\tlet hash = 2166136261;\n\tfor (let i = 0; i < key.length; i++) hash = Math.imul(hash ^ key.charCodeAt(i), 16777619);\n\treturn HASH_COLORS[(hash >>> 0) % HASH_COLORS.length];\n}\nexport interface TagBadgeProps extends Omit<ComponentProps<\"span\">, \"children\" | \"color\"> {\n\t/** Visible tag name; color is always accompanied by text. */\n\tname: string;\n\t/** Stable hash input, defaults to name. Use an entity ID to retain color after renaming. */\n\tcolorKey?: string;\n\t/** Explicit hue or semantic color, overriding the deterministic assignment. */\n\tcolor?: TagColor;\n\t/** Badge size. @default \"md\" */\n\tsize?: \"sm\" | \"md\";\n}\nexport function TagBadge({\n\tname,\n\tcolorKey,\n\tcolor,\n\tsize = \"md\",\n\tclassName,\n\t...props\n}: TagBadgeProps) {\n\tconst resolved = color ?? tagColorFor(colorKey ?? name);\n\treturn (\n\t\t<span\n\t\t\t{...props}\n\t\t\tdata-tag-color={resolved}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex max-w-full items-center break-words rounded-full border font-medium\",\n\t\t\t\tsize === \"sm\" ? \"px-2 py-0.5 text-xs\" : \"px-2.5 py-1 text-sm\",\n\t\t\t\tTAG_COLORS[resolved].className,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{name}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;AAKA,IAAa,IAAa;CACzB,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;CACA,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;AACD,GAEM,IAAc;CAAC;CAAS;CAAQ;CAAU;CAAQ;CAAS;AAAM;AAEvE,SAAgB,EAAY,GAAuB;CAClD,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,EAAI,QAAQ,KAAK,IAAO,KAAK,KAAK,IAAO,EAAI,WAAW,CAAC,GAAG,QAAQ;CACxF,OAAO,GAAa,MAAS,KAAK,EAAY;AAC/C;AAWA,SAAgB,EAAS,EACxB,SACA,aACA,UACA,UAAO,MACP,cACA,GAAG,KACc;CACjB,IAAM,IAAW,KAAS,EAAY,KAAY,CAAI;CACtD,OACC,kBAAC,QAAD;EACC,GAAI;EACJ,kBAAgB;EAChB,WAAW,EACV,GACA,mFACA,MAAS,OAAO,wBAAwB,uBACxC,EAAW,EAAS,CAAC,WACrB,CACD;EAEC,UAAA;CACI,CAAA;AAER"}
+{"version":3,"file":"tag-badge.js","names":["TAG_COLORS","HASH_COLORS","tagColorFor","hash","i","key","TagBadge","props","resolved","color","colorKey","name","cn","BASALT_UI_CLASS","size","className"],"sources":["../../src/components/tag-badge.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Stable identifiers, labels and opaque foreground/background pairs for both themes. */\nexport const TAG_COLORS = {\n\tslate: {\n\t\tlabel: \"Slate\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-slate-border bg-basalt-tag-slate text-basalt-tag-slate-foreground\",\n\t},\n\tblue: {\n\t\tlabel: \"Blue\",\n\t\tclassName: \"border-basalt-tag-blue-border bg-basalt-tag-blue text-basalt-tag-blue-foreground\",\n\t},\n\tviolet: {\n\t\tlabel: \"Violet\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-violet-border bg-basalt-tag-violet text-basalt-tag-violet-foreground\",\n\t},\n\tteal: {\n\t\tlabel: \"Teal\",\n\t\tclassName: \"border-basalt-tag-teal-border bg-basalt-tag-teal text-basalt-tag-teal-foreground\",\n\t},\n\tamber: {\n\t\tlabel: \"Amber\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-amber-border bg-basalt-tag-amber text-basalt-tag-amber-foreground\",\n\t},\n\trose: {\n\t\tlabel: \"Rose\",\n\t\tclassName: \"border-basalt-tag-rose-border bg-basalt-tag-rose text-basalt-tag-rose-foreground\",\n\t},\n\tsuccess: {\n\t\tlabel: \"Success\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-success-border bg-basalt-tag-success text-basalt-tag-success-foreground\",\n\t},\n\twarning: {\n\t\tlabel: \"Warning\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-warning-border bg-basalt-tag-warning text-basalt-tag-warning-foreground\",\n\t},\n\tdanger: {\n\t\tlabel: \"Danger\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-danger-border bg-basalt-tag-danger text-basalt-tag-danger-foreground\",\n\t},\n\tinfo: {\n\t\tlabel: \"Info\",\n\t\tclassName: \"border-basalt-tag-info-border bg-basalt-tag-info text-basalt-tag-info-foreground\",\n\t},\n} as const;\nexport type TagColor = keyof typeof TAG_COLORS;\nconst HASH_COLORS = [\"slate\", \"blue\", \"violet\", \"teal\", \"amber\", \"rose\"] as const;\n/** Stable FNV-1a assignment to six non-semantic colors; does not infer business meaning. */\nexport function tagColorFor(key: string): TagColor {\n\tlet hash = 2166136261;\n\tfor (let i = 0; i < key.length; i++) hash = Math.imul(hash ^ key.charCodeAt(i), 16777619);\n\treturn HASH_COLORS[(hash >>> 0) % HASH_COLORS.length];\n}\nexport interface TagBadgeProps extends Omit<ComponentProps<\"span\">, \"children\" | \"color\"> {\n\t/** Visible tag name; color is always accompanied by text. */\n\tname: string;\n\t/** Stable hash input, defaults to name. Use an entity ID to retain color after renaming. */\n\tcolorKey?: string;\n\t/** Explicit hue or semantic color, overriding the deterministic assignment. */\n\tcolor?: TagColor;\n\t/** Badge size. @default \"md\" */\n\tsize?: \"sm\" | \"md\";\n}\nexport function TagBadge({\n\tname,\n\tcolorKey,\n\tcolor,\n\tsize = \"md\",\n\tclassName,\n\t...props\n}: TagBadgeProps) {\n\tconst resolved = color ?? tagColorFor(colorKey ?? name);\n\treturn (\n\t\t<span\n\t\t\t{...props}\n\t\t\tdata-tag-color={resolved}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex max-w-full items-center break-words rounded-basalt-full border font-medium\",\n\t\t\t\t\"basalt-inline\",\n\t\t\t\tsize === \"sm\" && \"px-basalt-space-sm\",\n\t\t\t\tTAG_COLORS[resolved].className,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{name}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;AAKA,IAAaA,IAAa;CACzB,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;CACA,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;AACD,GAEMC,IAAc;CAAC;CAAS;CAAQ;CAAU;CAAQ;CAAS;AAAM;AAEvE,SAAgBC,EAAY,GAAuB;CAClD,IAAIC,IAAO;CACX,KAAK,IAAIC,IAAI,GAAGA,IAAIC,EAAI,QAAQ,KAAK,IAAO,KAAK,KAAKF,IAAOE,EAAI,WAAWD,CAAC,GAAG,QAAQ;CACxF,OAAOH,GAAaE,MAAS,KAAKF,EAAY;AAC/C;AAWA,SAAgBK,EAAS,EACxB,SACA,aACA,UACA,UAAO,MACP,cACA,GAAGC,KACc;CACjB,IAAMC,IAAWC,KAASP,EAAYQ,KAAYC,CAAI;CACtD,OACC,kBAAC,QAAD;EACC,GAAIJ;EACJ,kBAAgBC;EAChB,WAAWI,EACVC,GACA,0FACA,iBACAC,MAAS,QAAQ,sBACjBd,EAAWQ,EAAS,CAAC,WACrBO,CACD;EAEC,UAAAJ;CACI,CAAA;AAER"}

package/dist/components/tag-color-picker.d.ts

@@ -1,3 +1,4 @@
+import { type AriaAttributes } from "react";
 import { type TagColor } from "./tag-badge.js";
 export interface TagColorPickerProps {
     /** Accessible group name. */
@@ -14,7 +15,13 @@ export interface TagColorPickerProps {
     labels?: Partial<Record<TagColor, string>>;
     /** Disable the picker. @default false */
     disabled?: boolean;
+    /** Forwarded to the radio group so Field and Label can own it. */
+    id?: string;
+    /** Forwarded to the radio group; Field sets it while the value is invalid. */
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+    /** Forwarded to the radio group; Field points it at the hint or error. */
+    "aria-describedby"?: string;
     /** Additional root classes. */
     className?: string;
 }
-export declare function TagColorPicker({ label, value, defaultValue, onValueChange, colors, labels, disabled, className, }: TagColorPickerProps): import("react").JSX.Element;
+export declare function TagColorPicker({ label, value, defaultValue, onValueChange, colors, labels, disabled, id, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, className, }: TagColorPickerProps): import("react").JSX.Element;