@krizaka/ui 3.2.0 → 3.3.0

package/registry/switch.json

@@ -6,7 +6,7 @@
   "description": "An on/off setting that applies at once.",
   "status": "beta",
   "category": "forms",
-  "platforms": "web",
+  "platforms": "both",
   "whenToUse": [
     "For a setting that takes effect immediately: autoplay, notifications, a weekly digest."
   ],
@@ -120,7 +120,119 @@
       }
     ]
   },
-  "native": null,
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { Switch } from \"@krizaka/ui/native\";",
+    "differences": [
+      "Drawn by the theme, not the system's: the same switch on iOS and Android, the accent when on, a `selection` haptic when it flips (the app's `haptics`).",
+      "`showLabel` makes it a settings row: the label and its `description` beside the switch, the whole row pressable, the description read as the hint.",
+      "`error` shows under the row and is announced."
+    ],
+    "props": [
+      {
+        "component": "Switch",
+        "description": "An on/off switch for React Native — the web `Switch`, drawn by the theme (the accent when on, the material's knob),\nnot the system's: the same look on iOS and Android, a `selection` haptic when it flips. `showLabel` makes it a\nsettings row (the label and its description beside it, all pressable).",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name (\"Push notifications\"), passed translated — also the visible words when `children` is not given and `showLabel` is set.",
+            "required": true
+          },
+          {
+            "name": "checked",
+            "type": "boolean",
+            "default": null,
+            "description": "On (controlled).",
+            "required": false
+          },
+          {
+            "name": "defaultChecked",
+            "type": "boolean",
+            "default": "false",
+            "description": "On at first, uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "string",
+            "default": null,
+            "description": "A line under the label, read with the switch (\"Auctions you follow, new messages\"). Shown with `showLabel`.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "string",
+            "default": null,
+            "description": "An error under the row, read and announced.",
+            "required": false
+          },
+          {
+            "name": "onCheckedChange",
+            "type": "((checked: boolean) => void)",
+            "default": null,
+            "description": "Called with the new state.",
+            "required": false
+          },
+          {
+            "name": "showLabel",
+            "type": "boolean",
+            "default": null,
+            "description": "Draws the label (and the description) beside the switch, the whole row pressable: a settings row.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "\"sm\" | \"md\"",
+            "default": "md",
+            "description": "sm · md (default).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "settings",
+        "title": "Settings rows",
+        "description": "Notification preferences: rows with a description, one disabled while push is off.",
+        "path": "examples/switch/native/settings.tsx",
+        "module": "@krizaka/ui/registry/examples/switch/native/settings",
+        "code": "import { Switch } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\n// Notification preferences: settings rows, the whole row pressable, a selection haptic as each one flips.\nexport default function NativeSwitchSettings() {\n  const [push, setPush] = React.useState(true);\n  const [auctions, setAuctions] = React.useState(true);\n  const [digest, setDigest] = React.useState(false);\n  return (\n    <View style={{ width: 320, gap: 4 }}>\n      <Switch label=\"Push notifications\" description=\"On this phone, even when the app is closed.\" showLabel checked={push} onCheckedChange={setPush} />\n      <Switch label=\"Auctions you follow\" description=\"Outbid, ending soon, won.\" showLabel checked={auctions} onCheckedChange={setAuctions} disabled={!push} />\n      <Switch label=\"Weekly digest\" description=\"One e-mail on Monday morning.\" showLabel checked={digest} onCheckedChange={setDigest} />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/switch/native/settings.dark.png",
+          "light": "examples/switch/native/settings.light.png"
+        }
+      },
+      {
+        "name": "default",
+        "title": "Alone",
+        "description": "Named by `label`; md and sm.",
+        "path": "examples/switch/native/default.tsx",
+        "module": "@krizaka/ui/registry/examples/switch/native/default",
+        "code": "import { Switch } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\n\n// The switch alone, named by `label`: md and sm, on and off.\nexport default function NativeSwitchDefault() {\n  return (\n    <View style={{ flexDirection: \"row\", gap: 16, alignItems: \"center\" }}>\n      <Switch label=\"Dark mode\" defaultChecked />\n      <Switch label=\"Sounds\" />\n      <Switch label=\"Compact\" size=\"sm\" defaultChecked />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/switch/native/default.dark.png",
+          "light": "examples/switch/native/default.light.png"
+        }
+      }
+    ]
+  },
   "files": [
     {
       "path": "meta.ts",
@@ -132,7 +244,7 @@
     },
     {
       "path": "switch/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Switch\",\n  summary: \"An on/off setting that applies at once.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"web\",\n  whenToUse: [\"For a setting that takes effect immediately: autoplay, notifications, a weekly digest.\"],\n  whenNotToUse: [\n    { when: \"For a choice submitted with a form, or an agreement.\", use: \"checkbox\" },\n    { when: \"For more than two states.\", use: \"radio-group\" },\n    { when: \"To run an action.\", use: \"button\" },\n  ],\n  bestPractices: [\n    \"Name the setting, not the state: “Autoplay”, not “Turn autoplay on”.\",\n    \"Put the label first and the switch at the end of the line (`Field.Label htmlFor`), with a hint when it helps.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Space\", action: \"Toggles the switch.\" }],\n    notes: [\n      \"Radix Switch: `role=\\\"switch\\\"` with `aria-checked`.\",\n      \"`label` names it when no visible label does; otherwise use `Field.Label htmlFor` and `aria-describedby` for the hint.\",\n    ],\n  },\n  related: [\"checkbox\", \"field\", \"radio-group\"],\n  web: {\n    imports: [\"Switch\"],\n    examples: [\n      { name: \"off\", title: \"Off\", description: \"Named by `label`.\" },\n      { name: \"on\", title: \"On\", description: \"`defaultChecked` (or `checked` + `onCheckedChange`).\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Off and on.\" },\n      { name: \"small\", title: \"Small\", description: \"`size=\\\"sm\\\"`.\" },\n      { name: \"with-label\", title: \"With a visible label\", description: \"A label and a hint on the same line.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Switch\",\n  summary: \"An on/off setting that applies at once.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\"For a setting that takes effect immediately: autoplay, notifications, a weekly digest.\"],\n  whenNotToUse: [\n    { when: \"For a choice submitted with a form, or an agreement.\", use: \"checkbox\" },\n    { when: \"For more than two states.\", use: \"radio-group\" },\n    { when: \"To run an action.\", use: \"button\" },\n  ],\n  bestPractices: [\n    \"Name the setting, not the state: “Autoplay”, not “Turn autoplay on”.\",\n    \"Put the label first and the switch at the end of the line (`Field.Label htmlFor`), with a hint when it helps.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Space\", action: \"Toggles the switch.\" }],\n    notes: [\n      \"Radix Switch: `role=\\\"switch\\\"` with `aria-checked`.\",\n      \"`label` names it when no visible label does; otherwise use `Field.Label htmlFor` and `aria-describedby` for the hint.\",\n    ],\n  },\n  related: [\"checkbox\", \"field\", \"radio-group\"],\n  web: {\n    imports: [\"Switch\"],\n    examples: [\n      { name: \"off\", title: \"Off\", description: \"Named by `label`.\" },\n      { name: \"on\", title: \"On\", description: \"`defaultChecked` (or `checked` + `onCheckedChange`).\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Off and on.\" },\n      { name: \"small\", title: \"Small\", description: \"`size=\\\"sm\\\"`.\" },\n      { name: \"with-label\", title: \"With a visible label\", description: \"A label and a hint on the same line.\" },\n    ],\n  },\n  native: {\n    imports: [\"Switch\"],\n    differences: [\n      \"Drawn by the theme, not the system's: the same switch on iOS and Android, the accent when on, a `selection` haptic when it flips (the app's `haptics`).\",\n      \"`showLabel` makes it a settings row: the label and its `description` beside the switch, the whole row pressable, the description read as the hint.\",\n      \"`error` shows under the row and is announced.\",\n    ],\n    examples: [\n      { name: \"settings\", title: \"Settings rows\", description: \"Notification preferences: rows with a description, one disabled while push is off.\" },\n      { name: \"default\", title: \"Alone\", description: \"Named by `label`; md and sm.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "switch/switch.tsx",

package/registry/tabs.json

@@ -59,7 +59,7 @@
         "props": [
           {
             "name": "variant",
-            "type": "\"underline\" | \"segmented\" | \"pills\"",
+            "type": "\"segmented\" | \"underline\" | \"pills\"",
             "default": "underline",
             "description": "underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections).",
             "required": false
@@ -146,7 +146,7 @@
       "props": [
         {
           "name": "variant",
-          "type": "\"underline\" | \"segmented\" | \"pills\"",
+          "type": "\"segmented\" | \"underline\" | \"pills\"",
           "default": "underline",
           "description": "underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections).",
           "required": false

package/skills/choice-controls/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: krizaka-choice-controls
+description: Choices and settings in a Krizaka app (Next.js or Expo) with @krizaka/ui — RadioGroup (dots, cards, tactile keys that press in, segmented), Slider (range, steps and marks, floating value, brand gradient, vertical), Switch, and on React Native Select / Combobox in a Sheet, with haptics through the ThemeProvider. Use it instead of React Native's Switch, a picker module, a hand-made segmented control or a slider library.
+---
+
+# RadioGroup · Slider · Switch · Select · Combobox · Sheet
+
+## Rules
+
+1. Pick by the choice:
+   - two to five options seen at once → `RadioGroup` — `list` (settings), `cards` (an amount, a plan: a line under
+     each), `buttons` (a size, a tip, a level: tactile keys), `segmented` (two to four short words on one line);
+   - many options → web `Select` of `@krizaka/ui/field` (the platform's menu) or `Combobox` (searched); native `Select`
+     / `Combobox` (a field that opens a `Sheet`);
+   - a value by feel within bounds → `Slider` (`ticks` when the steps are few, `marks` to name the ends,
+     `floatingValue` while touched, `orientation="vertical"` for faders); an exact number → a text field;
+   - on / off, applied at once → `Switch` (native: `showLabel` + `description` makes the settings row).
+2. Never React Native's `Switch`, `@react-native-community/slider` or a picker module: the platform's controls are
+   drawn by the theme, the same on iOS and Android, and wear the product's accent.
+3. A segmented control that **switches views** is `Tabs variant="segmented"` (web) / `Segmented` (native); one that is a
+   **form's value** is `RadioGroup variant="segmented"`.
+4. Haptics: `<ThemeProvider haptics={(k) => k === "selection" ? Haptics.selectionAsync() : Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}>`
+   once at the root (expo-haptics). Wheels, slider steps, radios and switches play `selection`; a tactile key `impact`.
+5. Words are props (`label`, `thumbLabels`, `formatValue`, `hint`, `labels`), passed translated. In a form, use the
+   form's fields (`form.RadioGroup variant=…`, `form.Slider`, `form.Switch`, `form.Select`, `form.Combobox`).
+
+## Recipes
+
+```tsx
+<RadioGroup.Root label={t("tip")} variant="buttons" value={tip} onValueChange={setTip}>
+  {TIPS.map((p) => <RadioGroup.Button key={p} value={p} hint={formatMoney(total * p / 100)}>{`${p} %`}</RadioGroup.Button>)}
+</RadioGroup.Root>
+<Slider<[number, number]> label={t("price")} thumbLabels={[t("min"), t("max")]} value={range} onValueChange={setRange}
+  max={250} step={10} floatingValue marks={[{ value: 0, label: "$0" }, { value: 250, label: "$250+" }]} />
+// React Native
+<Switch label={t("push")} description={t("push.hint")} showLabel checked={push} onCheckedChange={setPush} />
+<Select label={t("language")} options={LANGUAGES} value={lang} onValueChange={setLang} />
+<Combobox label={t("city")} onSearch={(q, signal) => searchCities(q, signal)} value={city} onValueChange={setCity} />
+```

package/skills/form/SKILL.md

@@ -40,5 +40,8 @@ const form = signUp.useForm({ i18n: { t }, codeFields: { USERNAME_RESERVED: "use
 - Amounts: `form.Money name="amount" currency="EUR"` stores integer cents (`z.number().int()`).
 - Lists: `<form.FieldArray name="links">{(a) => a.items.map((_, i) => <form.TextField name={`links[${i}].url`} … />)}</form.FieldArray>`.
 - Conditional parts: `<form.Watch name="audience">{(v) => v === "subscribers" ? <form.Money name="price" … /> : null}</form.Watch>`.
+- Controls (DS5): `form.RadioGroup variant="buttons" | "segmented" | "cards"`, `form.DateField entry="wheel" max={latestBirthDate(18)}`,
+  `form.Slider ticks marks={…}` (the value floats while touched). Native: `DateField` is wheels by default, `Select` /
+  `Combobox` open a sheet, `Switch` is a settings row; pass `haptics` to the native `ThemeProvider` for the haptics.
 - Native: `<form.Form scroll>` makes the form the screen's scrolling content above the keyboard; the return key walks the
   text fields and the last one sends; `<form.Submit label=… brand="orochia" />` turns the product's mark while sending.

package/dist/chunk-I5RVM5CW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cn.ts","../src/floating.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnMerge, type TWMergeConfig } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * The preset's own utilities, told to the merge engine: the material (BRAND.md §6: `bg-sheen`, `bg-fill-shade`,\n * `bg-halo` are background images; `shadow-raised` · `-floating` · `-overlay` · `-glow` are shadows; `inset-shadow-edge`\n * · `-edge-fill` · `-well` are inset shadows). Unknown, tailwind-merge would take `bg-sheen` for a colour and drop the\n * `bg-surface-2` it lies on.\n */\nexport const twMergeConfig: TWMergeConfig = {\n  extend: {\n    classGroups: {\n      \"bg-image\": [\"bg-sheen\", \"bg-fill-shade\", \"bg-halo\"],\n      shadow: [\"shadow-raised\", \"shadow-floating\", \"shadow-overlay\", \"shadow-glow\", \"shadow-glow-lg\"],\n      \"inset-shadow\": [\"inset-shadow-edge\", \"inset-shadow-edge-fill\", \"inset-shadow-well\"],\n    },\n  },\n};\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return cnMerge(clsx(inputs))({ twMergeConfig }) ?? \"\";\n}\n","// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAmC;AAUrC,IAAM,gBAA+B;AAAA,EAC1C,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,YAAY,CAAC,YAAY,iBAAiB,SAAS;AAAA,MACnD,QAAQ,CAAC,iBAAiB,mBAAmB,kBAAkB,eAAe,gBAAgB;AAAA,MAC9F,gBAAgB,CAAC,qBAAqB,0BAA0B,mBAAmB;AAAA,IACrF;AAAA,EACF;AACF;AASO,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC,EAAE,EAAE,cAAc,CAAC,KAAK;AACrD;;;AC5BO,IAAM,WACX;","names":[]}

package/dist/chunk-RUPRYJ45.js

@@ -1,82 +0,0 @@
-"use client";
-
-// src/slider/slider.tsx
-import { Slider as SliderPrimitive } from "radix-ui";
-import * as React from "react";
-import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var slider = tv({
-  slots: {
-    root: "flex flex-col gap-2",
-    header: "flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary",
-    value: "font-mono text-[11px] tabular-nums text-fg-secondary",
-    control: "relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40",
-    track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3",
-    range: "absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2",
-    thumb: "block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing"
-  }
-});
-var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : v;
-function Slider({
-  value,
-  defaultValue,
-  onValueChange,
-  onValueCommit,
-  label,
-  thumbLabels,
-  formatValue = String,
-  showLabel,
-  origin,
-  min = 0,
-  max = 100,
-  className,
-  ...props
-}) {
-  const s = slider();
-  const range = Array.isArray(value ?? defaultValue);
-  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);
-  const current = toArray(value) ?? inner;
-  const out = (next) => range ? next : next[0];
-  const pct = (v) => (v - min) / (max - min || 1) * 100;
-  const fill = origin !== void 0 && !range ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` } : void 0;
-  const id = React.useId();
-  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), "data-range": range ? "" : void 0, children: [
-    showLabel && /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
-      /* @__PURE__ */ jsx("span", { id: `${id}-label`, children: label }),
-      /* @__PURE__ */ jsx("span", { className: s.value(), "aria-hidden": true, children: current.map(formatValue).join(" \u2013 ") })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      SliderPrimitive.Root,
-      {
-        min,
-        max,
-        value: current,
-        onValueChange: (next) => {
-          if (value === void 0) setInner(next);
-          onValueChange?.(out(next));
-        },
-        onValueCommit: onValueCommit && ((next) => onValueCommit(out(next))),
-        className: s.control(),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: s.track(), children: fill ? /* @__PURE__ */ jsx("span", { "data-origin": "", className: s.range(), style: fill }) : /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: s.range() }) }),
-          current.map((v, i) => /* @__PURE__ */ jsx(
-            SliderPrimitive.Thumb,
-            {
-              "aria-label": range ? thumbLabels?.[i] ?? label : showLabel ? void 0 : label,
-              "aria-labelledby": !range && showLabel ? `${id}-label` : void 0,
-              "aria-valuetext": formatValue(v),
-              className: s.thumb()
-            },
-            i
-          ))
-        ]
-      }
-    )
-  ] });
-}
-
-export {
-  Slider
-};
-//# sourceMappingURL=chunk-RUPRYJ45.js.map

package/dist/chunk-RUPRYJ45.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/slider/slider.tsx"],"sourcesContent":["// Client. Radix Slider: role=\"slider\" on each thumb, arrows / Page Up / Page Down / Home / End, a range with two\n// thumbs. The words arrive as props: `label` names the thumb(s), `formatValue` gives the aria-valuetext and the value\n// shown next to a visible label.\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const slider = tv({\n  slots: {\n    root: \"flex flex-col gap-2\",\n    header: \"flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary\",\n    value: \"font-mono text-[11px] tabular-nums text-fg-secondary\",\n    control:\n      \"relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40\",\n    track: \"relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3\",\n    range: \"absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2\",\n    thumb:\n      \"block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] \" +\n      \"focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing\",\n  },\n});\n\nexport type SliderValue = number | [number, number];\n\nexport type SliderProps<V extends SliderValue = number> = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommit\" | \"children\"\n> & {\n  /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */\n  value?: V;\n  /** The value at first, uncontrolled: one number, or two for a range. */\n  defaultValue?: V;\n  /** Called on every move, with one number or two. */\n  onValueChange?: (value: V) => void;\n  /** Called once the drag or the key press ends. */\n  onValueCommit?: (value: V) => void;\n  /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */\n  label: string;\n  /** For a range: each thumb's own name ([\"Minimum\", \"Maximum\"]), passed translated. */\n  thumbLabels?: [string, string];\n  /** The value as words (aria-valuetext) and as shown: \"1.5×\", \"−12 %\", \"3 min\". */\n  formatValue?: (value: number) => string;\n  /** Shows the label and the value above the track. Without it, `label` only names the thumb. */\n  showLabel?: boolean;\n  /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One thumb only. */\n  origin?: number;\n};\n\nconst toArray = (v: SliderValue | undefined) => (v === undefined ? undefined : typeof v === \"number\" ? [v] : v);\n\n/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`. */\nexport function Slider<V extends SliderValue = number>({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  label,\n  thumbLabels,\n  formatValue = String,\n  showLabel,\n  origin,\n  min = 0,\n  max = 100,\n  className,\n  ...props\n}: SliderProps<V>) {\n  const s = slider();\n  const range = Array.isArray(value ?? defaultValue);\n  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);\n  const current = toArray(value) ?? inner;\n  const out = (next: number[]) => (range ? next : next[0]) as V;\n  const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;\n  const fill =\n    origin !== undefined && !range\n      ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` }\n      : undefined;\n  const id = React.useId();\n  return (\n    <div className={s.root({ className })} data-range={range ? \"\" : undefined}>\n      {showLabel && (\n        <div className={s.header()}>\n          <span id={`${id}-label`}>{label}</span>\n          <span className={s.value()} aria-hidden>\n            {current.map(formatValue).join(\" – \")}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        min={min}\n        max={max}\n        value={current}\n        onValueChange={(next) => {\n          if (value === undefined) setInner(next);\n          onValueChange?.(out(next));\n        }}\n        onValueCommit={onValueCommit && ((next) => onValueCommit(out(next)))}\n        className={s.control()}\n        {...props}\n      >\n        <SliderPrimitive.Track className={s.track()}>\n          {fill ? <span data-origin=\"\" className={s.range()} style={fill} /> : <SliderPrimitive.Range className={s.range()} />}\n        </SliderPrimitive.Track>\n        {current.map((v, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            aria-label={range ? (thumbLabels?.[i] ?? label) : showLabel ? undefined : label}\n            aria-labelledby={!range && showLabel ? `${id}-label` : undefined}\n            aria-valuetext={formatValue(v)}\n            className={s.thumb()}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAAU;AA2EX,SACE,KADF;AAzED,IAAM,SAAS,GAAG;AAAA,EACvB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SACE;AAAA,IACF,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OACE;AAAA,EAEJ;AACF,CAAC;AA4BD,IAAM,UAAU,CAAC,MAAgC,MAAM,SAAY,SAAY,OAAO,MAAM,WAAW,CAAC,CAAC,IAAI;AAGtG,SAAS,OAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,IAAI,OAAO;AACjB,QAAM,QAAQ,MAAM,QAAQ,SAAS,YAAY;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,MAAM,QAAQ,YAAY,KAAK,CAAC,GAAG,CAAC;AAC7E,QAAM,UAAU,QAAQ,KAAK,KAAK;AAClC,QAAM,MAAM,CAAC,SAAoB,QAAQ,OAAO,KAAK,CAAC;AACtD,QAAM,MAAM,CAAC,OAAgB,IAAI,QAAQ,MAAM,OAAO,KAAM;AAC5D,QAAM,OACJ,WAAW,UAAa,CAAC,QACrB,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,MAAM,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,IAChH;AACN,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,cAAY,QAAQ,KAAK,QAC7D;AAAA,iBACC,qBAAC,SAAI,WAAW,EAAE,OAAO,GACvB;AAAA,0BAAC,UAAK,IAAI,GAAG,EAAE,UAAW,iBAAM;AAAA,MAChC,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAG,eAAW,MACpC,kBAAQ,IAAI,WAAW,EAAE,KAAK,UAAK,GACtC;AAAA,OACF;AAAA,IAEF;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe,CAAC,SAAS;AACvB,cAAI,UAAU,OAAW,UAAS,IAAI;AACtC,0BAAgB,IAAI,IAAI,CAAC;AAAA,QAC3B;AAAA,QACA,eAAe,kBAAkB,CAAC,SAAS,cAAc,IAAI,IAAI,CAAC;AAAA,QAClE,WAAW,EAAE,QAAQ;AAAA,QACpB,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GACvC,iBAAO,oBAAC,UAAK,eAAY,IAAG,WAAW,EAAE,MAAM,GAAG,OAAO,MAAM,IAAK,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GAAG,GACpH;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,MACf;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,QAAS,cAAc,CAAC,KAAK,QAAS,YAAY,SAAY;AAAA,cAC1E,mBAAiB,CAAC,SAAS,YAAY,GAAG,EAAE,WAAW;AAAA,cACvD,kBAAgB,YAAY,CAAC;AAAA,cAC7B,WAAW,EAAE,MAAM;AAAA;AAAA,YAJd;AAAA,UAKP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}