@adea-ai/ui 0.117.0 → 0.118.1

package/dist/components/ui/native-select/native-select.js

@@ -24,6 +24,7 @@ function initializeDefaultSelection(select, value, multiple) {
 function NativeSelect(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
+		"size",
 		"children",
 		"defaultValue",
 		"options",
@@ -75,7 +76,11 @@ function NativeSelect(props) {
 				return field?.["aria-errormessage"] ?? local["aria-errormessage"];
 			},
 			get ["class"]() {
-				return cn("h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30", local.class);
+				return cn("min-w-0 appearance-none rounded-md border border-input bg-transparent", {
+					"h-control-sm px-control-sm pr-8 text-xs": local.size === "sm",
+					"h-control-md px-control-md pr-9 text-sm": local.size === "md" || local.size === void 0,
+					"h-control-lg px-control-lg pr-9 text-sm": local.size === "lg"
+				}, "transition-[color,box-shadow,border-color] ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30", local.class);
 			}
 		}, rest), false, true);
 		insert(_el$2, createComponent(Show, {
@@ -101,7 +106,9 @@ function NativeSelect(props) {
 		insert(_el$, createComponent(ChevronDownIcon, {
 			"data-slot": "native-select-icon",
 			"aria-hidden": "true",
-			"class": "pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+			get ["class"]() {
+				return cn("pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground", local.size === "sm" ? "size-3.5" : "size-4");
+			}
 		}), null);
 		return _el$;
 	})();

package/dist/components/ui/native-select/native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","useFormFieldControl","cn","NativeSelectProps","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","field","id","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = ComponentProps<'select'> & {\n  /** Render the choices from data instead of raw option children. */\n  options?: readonly NativeSelectOption[]\n  /** Initialize an uncontrolled selection after its native options mount. */\n  defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  if (multiple && Array.isArray(value)) {\n    const selected = new Set(value.map(String))\n    for (const option of select.options) option.selected = selected.has(option.value)\n    return\n  }\n\n  select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  const defaultValues =\n    multiple && Array.isArray(value)\n      ? new Set(value.map(String))\n      : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n  for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n  setSelectedValue(select, value, multiple)\n}\n\n/**\n * NativeSelect.\n *\n * A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n *\n * Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n  value: string\n  label: string\n  disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'children',\n    'defaultValue',\n    'options',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  let select: HTMLSelectElement | undefined\n\n  // Set selection after native options exist; setting select.value before its\n  // children are mounted makes browsers fall back to the first option.\n  createEffect(() => {\n    if (!select) return\n    setSelectedValue(select, rest.value, Boolean(rest.multiple))\n  })\n  onMount(() => {\n    if (select && rest.value === undefined) {\n      initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n    }\n  })\n\n  return (\n    <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n      <select\n        ref={(element) => {\n          select = element\n        }}\n        data-slot=\"native-select\"\n        id={field?.id ?? local.id}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n        class={cn(\n          'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',\n          'transition-[color,box-shadow,border-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',\n          local.class\n        )}\n        {...rest}\n      >\n        <Show when={local.options} fallback={local.children}>\n          {(options) => (\n            <For each={options()}>\n              {(option) => (\n                <option value={option.value} disabled={option.disabled}>\n                  {option.label}\n                </option>\n              )}\n            </For>\n          )}\n        </Show>\n      </select>\n      <ChevronDownIcon\n        data-slot=\"native-select-icon\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\"\n      />\n    </span>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","useFormFieldControl","cn","NativeSelectProps","Omit","size","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","field","id","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {\n  /**\n   * The control rung, matching `Input` and `SelectTrigger`: `sm` for a dense\n   * toolbar or pane filter, `md` (the default) everywhere else. This replaces the\n   * native `size` attribute, which turns a select into a list box — a different\n   * control that this styled single-line select is not.\n   */\n  size?: 'sm' | 'md' | 'lg'\n  /** Render the choices from data instead of raw option children. */\n  options?: readonly NativeSelectOption[]\n  /** Initialize an uncontrolled selection after its native options mount. */\n  defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  if (multiple && Array.isArray(value)) {\n    const selected = new Set(value.map(String))\n    for (const option of select.options) option.selected = selected.has(option.value)\n    return\n  }\n\n  select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  const defaultValues =\n    multiple && Array.isArray(value)\n      ? new Set(value.map(String))\n      : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n  for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n  setSelectedValue(select, value, multiple)\n}\n\n/**\n * NativeSelect.\n *\n * A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n *\n * Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n  value: string\n  label: string\n  disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'size',\n    'children',\n    'defaultValue',\n    'options',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  let select: HTMLSelectElement | undefined\n\n  // Set selection after native options exist; setting select.value before its\n  // children are mounted makes browsers fall back to the first option.\n  createEffect(() => {\n    if (!select) return\n    setSelectedValue(select, rest.value, Boolean(rest.multiple))\n  })\n  onMount(() => {\n    if (select && rest.value === undefined) {\n      initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n    }\n  })\n\n  return (\n    <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n      <select\n        ref={(element) => {\n          select = element\n        }}\n        data-slot=\"native-select\"\n        id={field?.id ?? local.id}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n        class={cn(\n          'min-w-0 appearance-none rounded-md border border-input bg-transparent',\n          {\n            'h-control-sm px-control-sm pr-8 text-xs': local.size === 'sm',\n            'h-control-md px-control-md pr-9 text-sm':\n              local.size === 'md' || local.size === undefined,\n            'h-control-lg px-control-lg pr-9 text-sm': local.size === 'lg',\n          },\n          'transition-[color,box-shadow,border-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',\n          local.class\n        )}\n        {...rest}\n      >\n        <Show when={local.options} fallback={local.children}>\n          {(options) => (\n            <For each={options()}>\n              {(option) => (\n                <option value={option.value} disabled={option.disabled}>\n                  {option.label}\n                </option>\n              )}\n            </For>\n          )}\n        </Show>\n      </select>\n      <ChevronDownIcon\n        data-slot=\"native-select-icon\"\n        aria-hidden=\"true\"\n        class={cn(\n          'pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground',\n          local.size === 'sm' ? 'size-3.5' : 'size-4'\n        )}\n      />\n    </span>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/progress/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACnE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAuC5C"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACnE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCA2C5C"}

package/dist/components/ui/progress/progress.js

@@ -12,9 +12,12 @@ function Progress$1(props) {
 		"hideValue",
 		"label"
 	]);
-	return createComponent(Progress, mergeProps({ get ["class"]() {
-		return cn("flex w-full flex-col gap-1.5", local.class);
-	} }, rest, { get children() {
+	return createComponent(Progress, mergeProps({
+		"data-slot": "progress",
+		get ["class"]() {
+			return cn("flex w-full flex-col gap-1.5", local.class);
+		}
+	}, rest, { get children() {
 		return [createComponent(Show, {
 			get when() {
 				return local.label || !local.hideValue;

package/dist/components/ui/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["Progress","KobalteProgress","ComponentProps","Show","splitProps","cn","ProgressProps","label","trackClass","indicatorClass","hideValue","props","local","rest","_$createComponent","_$mergeProps","class","children","when","_el$","_tmpl$","_$insert","Label","ValueLabel","Track","Fill","indeterminate","Progress","_$createComponent","KobalteProgress","_$mergeProps"],"sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["import { Progress as KobalteProgress } from '@kobalte/core/progress'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Progress.\n *\n * A determinate bar. Kobalte publishes the value as `aria-valuenow`, so a\n * screen reader reports the percentage instead of just \"progress bar\" — which\n * is why a caller must pass a real `value`, or use Spinner when there is none.\n *\n * `indeterminate` renders the sweeping bar for an operation that reports no\n * progress at all. It is a visibly different treatment so the two states are\n * never confused by someone glancing at the screen.\n */\nexport type ProgressProps = ComponentProps<typeof KobalteProgress> & {\n  /**\n   * The visible label, which is also the bar's accessible name.\n   *\n   * Pass this, or `aria-label` when the label is drawn elsewhere. A progressbar\n   * with neither announces \"progress bar, 64%\" and no subject — the reader\n   * cannot tell whether it is a build, an upload or a download.\n   */\n  label?: string\n  trackClass?: string\n  indicatorClass?: string\n  /** Hide the numeric readout that otherwise sits beside the track. */\n  hideValue?: boolean\n}\n\nexport function Progress(props: ProgressProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'indicatorClass',\n    'hideValue',\n    'label',\n  ])\n\n  return (\n    <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>\n      <Show when={local.label || !local.hideValue}>\n        <div class=\"flex items-center justify-between gap-3\">\n          <Show when={local.label}>\n            <KobalteProgress.Label class=\"text-muted-foreground text-sm\">\n              {local.label}\n            </KobalteProgress.Label>\n          </Show>\n          <Show when={!local.hideValue}>\n            <KobalteProgress.ValueLabel class=\"text-muted-foreground text-sm tabular-nums\" />\n          </Show>\n        </div>\n      </Show>\n      <KobalteProgress.Track\n        class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}\n      >\n        <KobalteProgress.Fill\n          class={cn(\n            'bg-primary h-full rounded-full',\n            {\n              'animate-indeterminate w-1/4': props.indeterminate,\n              'w-(--kb-progress-fill-width)': !props.indeterminate,\n            },\n            local.indicatorClass\n          )}\n        />\n      </KobalteProgress.Track>\n    </KobalteProgress>\n  )\n}\n"],"mappings":";;;;;;AA+BA,SAAgBA,WAASW,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGb,UAAec,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQV,GAAG,gCAAgCO,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA,CAAAH,gBAC9EX,MAAI;GAAA,IAACe,OAAI;IAAA,OAAEN,MAAML,SAAS,CAACK,MAAMF;GAAS;GAAA,IAAAO,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,MAAAL,gBAEtCX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAEN,MAAML;KAAK;KAAA,IAAAU,WAAA;MAAA,OAAAH,gBACpBb,SAAgBqB,OAAK;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OACnBL,MAAML;OAAK;MAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAAc,OAAAF,MAAAL,gBAGfX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAE,CAACN,MAAMF;KAAS;KAAA,IAAAO,WAAA;MAAA,OAAAH,gBACzBb,SAAgBsB,YAAU,EAAA,SAAA,6CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAJ;GAAA;EAAA,CAAA,GAAAL,gBAIhCb,SAAgBuB,OAAK;GAAA,KAAA,WAAA;IAAA,OACbnB,GAAG,+DAA+DO,MAAMJ,UAAU;GAAC;GAAA,IAAAS,WAAA;IAAA,OAAAH,gBAEzFb,SAAgBwB,MAAI,EAAA,KAAA,WAAA;KAAA,OACZpB,GACL,kCACA;MACE,+BAA+BM,MAAMe;MACrC,gCAAgC,CAACf,MAAMe;KACzC,GACAd,MAAMH,cACR;IAAC,EAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAKX"}
+{"version":3,"file":"progress.js","names":["Progress","KobalteProgress","ComponentProps","Show","splitProps","cn","ProgressProps","label","trackClass","indicatorClass","hideValue","props","local","rest","_$createComponent","_$mergeProps","class","children","when","_el$","_tmpl$","_$insert","Label","ValueLabel","Track","Fill","indeterminate","Progress","_$createComponent","KobalteProgress","_$mergeProps"],"sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["import { Progress as KobalteProgress } from '@kobalte/core/progress'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Progress.\n *\n * A determinate bar. Kobalte publishes the value as `aria-valuenow`, so a\n * screen reader reports the percentage instead of just \"progress bar\" — which\n * is why a caller must pass a real `value`, or use Spinner when there is none.\n *\n * `indeterminate` renders the sweeping bar for an operation that reports no\n * progress at all. It is a visibly different treatment so the two states are\n * never confused by someone glancing at the screen.\n */\nexport type ProgressProps = ComponentProps<typeof KobalteProgress> & {\n  /**\n   * The visible label, which is also the bar's accessible name.\n   *\n   * Pass this, or `aria-label` when the label is drawn elsewhere. A progressbar\n   * with neither announces \"progress bar, 64%\" and no subject — the reader\n   * cannot tell whether it is a build, an upload or a download.\n   */\n  label?: string\n  trackClass?: string\n  indicatorClass?: string\n  /** Hide the numeric readout that otherwise sits beside the track. */\n  hideValue?: boolean\n}\n\nexport function Progress(props: ProgressProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'indicatorClass',\n    'hideValue',\n    'label',\n  ])\n\n  return (\n    <KobalteProgress\n      data-slot=\"progress\"\n      class={cn('flex w-full flex-col gap-1.5', local.class)}\n      {...rest}\n    >\n      <Show when={local.label || !local.hideValue}>\n        <div class=\"flex items-center justify-between gap-3\">\n          <Show when={local.label}>\n            <KobalteProgress.Label class=\"text-muted-foreground text-sm\">\n              {local.label}\n            </KobalteProgress.Label>\n          </Show>\n          <Show when={!local.hideValue}>\n            <KobalteProgress.ValueLabel class=\"text-muted-foreground text-sm tabular-nums\" />\n          </Show>\n        </div>\n      </Show>\n      <KobalteProgress.Track\n        class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}\n      >\n        <KobalteProgress.Fill\n          class={cn(\n            'bg-primary h-full rounded-full',\n            {\n              'animate-indeterminate w-1/4': props.indeterminate,\n              'w-(--kb-progress-fill-width)': !props.indeterminate,\n            },\n            local.indicatorClass\n          )}\n        />\n      </KobalteProgress.Track>\n    </KobalteProgress>\n  )\n}\n"],"mappings":";;;;;;AA+BA,SAAgBA,WAASW,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGb,UAAec,WAAA;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEPV,GAAG,gCAAgCO,MAAMI,KAAK;EAAC;CAAA,GAClDH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA,CAAAH,gBAEPX,MAAI;GAAA,IAACe,OAAI;IAAA,OAAEN,MAAML,SAAS,CAACK,MAAMF;GAAS;GAAA,IAAAO,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,MAAAL,gBAEtCX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAEN,MAAML;KAAK;KAAA,IAAAU,WAAA;MAAA,OAAAH,gBACpBb,SAAgBqB,OAAK;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OACnBL,MAAML;OAAK;MAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAAc,OAAAF,MAAAL,gBAGfX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAE,CAACN,MAAMF;KAAS;KAAA,IAAAO,WAAA;MAAA,OAAAH,gBACzBb,SAAgBsB,YAAU,EAAA,SAAA,6CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAJ;GAAA;EAAA,CAAA,GAAAL,gBAIhCb,SAAgBuB,OAAK;GAAA,KAAA,WAAA;IAAA,OACbnB,GAAG,+DAA+DO,MAAMJ,UAAU;GAAC;GAAA,IAAAS,WAAA;IAAA,OAAAH,gBAEzFb,SAAgBwB,MAAI,EAAA,KAAA,WAAA;KAAA,OACZpB,GACL,kCACA;MACE,+BAA+BM,MAAMe;MACrC,gCAAgC,CAACf,MAAMe;KACzC,GACAd,MAAMH,cACR;IAAC,EAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAKX"}

package/dist/components/ui/radio-group/radio-group.d.ts

@@ -1,5 +1,5 @@
 import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group';
-import type { ComponentProps } from 'solid-js';
+import type { ComponentProps, JSX } from 'solid-js';
 /**
  * RadioGroup.
  *
@@ -12,7 +12,7 @@ import type { ComponentProps } from 'solid-js';
  * That call belongs to the caller, and both controls are drawn from the same
  * tokens so either choice sits correctly next to the other.
  */
-export declare function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>): import("solid-js").JSX.Element;
+export declare function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>): JSX.Element;
 export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {
     controlClass?: string;
     /**
@@ -22,6 +22,21 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
      */
     label?: string;
     description?: string;
+    /**
+     * `card` draws the option as a bordered, selectable card — for a choice
+     * whose options need a sentence each (a source type, a sync budget), where a
+     * bare radio row reads as a form field rather than a decision. The whole card
+     * is the hit target, and the selected card takes the primary edge.
+     */
+    variant?: 'default' | 'card';
+    /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
+    media?: JSX.Element;
 };
-export declare function RadioGroupItem(props: RadioGroupItemProps): import("solid-js").JSX.Element;
+/**
+ * A card option's label stretches an invisible layer over the whole card, so a
+ * click anywhere on it — padding, media, description — selects the option
+ * through the label's native association with the radio input. Wrapping the
+ * card in a `<label>` would nest the item's own label inside another.
+ */
+export declare function RadioGroupItem(props: RadioGroupItemProps): JSX.Element;
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/ui/radio-group/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,kCA8BzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,kCA4DxD"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,eA+BzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,iFAAiF;IACjF,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACpB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAiFxD"}

package/dist/components/ui/radio-group/radio-group.js

@@ -5,7 +5,8 @@ import { Circle } from "lucide-solid";
 import { splitProps } from "solid-js";
 import { RadioGroup } from "@kobalte/core/radio-group";
 //#region src/components/ui/radio-group/radio-group.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="grid gap-0.5 leading-none">`);
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=radio-group-item-media class="flex shrink-0 items-center">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="grid gap-0.5 leading-none">`);
 /**
 * RadioGroup.
 *
@@ -37,6 +38,7 @@ function RadioGroup$1(props) {
 		"aria-errormessage": local["aria-errormessage"]
 	});
 	return createComponent(RadioGroup, mergeProps({
+		"data-slot": "radio-group",
 		get id() {
 			return field?.id ?? local.id;
 		},
@@ -60,12 +62,20 @@ function RadioGroup$1(props) {
 		}
 	}, rest));
 }
+/**
+* A card option's label stretches an invisible layer over the whole card, so a
+* click anywhere on it — padding, media, description — selects the option
+* through the label's native association with the radio input. Wrapping the
+* card in a `<label>` would nest the item's own label inside another.
+*/
 function RadioGroupItem(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
 		"controlClass",
 		"label",
 		"description",
+		"variant",
+		"media",
 		"children",
 		"aria-label",
 		"aria-labelledby",
@@ -74,12 +84,20 @@ function RadioGroupItem(props) {
 		"aria-busy",
 		"title"
 	]);
+	const card = () => local.variant === "card";
 	return createComponent(RadioGroup.Item, mergeProps({
+		"data-slot": "radio-group-item",
+		get ["data-variant"]() {
+			return card() ? "card" : void 0;
+		},
 		get title() {
 			return local.title;
 		},
 		get ["class"]() {
-			return cn("group/radio flex items-start gap-2.5", local.class);
+			return cn("group/radio flex items-start gap-2.5", {
+				"relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card": card(),
+				"has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle": card()
+			}, local.class);
 		}
 	}, rest, { get children() {
 		return [
@@ -116,18 +134,25 @@ function RadioGroupItem(props) {
 					});
 				}
 			}),
-			memo(() => local.children ?? (() => {
+			memo(() => memo(() => !!local.media)() ? (() => {
 				var _el$ = _tmpl$();
-				insert(_el$, (() => {
+				insert(_el$, () => local.media);
+				return _el$;
+			})() : null),
+			memo(() => local.children ?? (() => {
+				var _el$2 = _tmpl$2();
+				insert(_el$2, (() => {
 					var _c$ = memo(() => !!local.label);
 					return () => _c$() ? createComponent(RadioGroup.ItemLabel, {
-						"class": "text-sm font-medium",
+						get ["class"]() {
+							return cn("text-sm font-medium", card() && "after:absolute after:inset-0");
+						},
 						get children() {
 							return local.label;
 						}
 					}) : null;
 				})(), null);
-				insert(_el$, (() => {
+				insert(_el$2, (() => {
 					var _c$2 = memo(() => !!local.description);
 					return () => _c$2() ? createComponent(RadioGroup.ItemDescription, {
 						"class": "text-muted-foreground text-sm",
@@ -136,7 +161,7 @@ function RadioGroupItem(props) {
 						}
 					}) : null;
 				})(), null);
-				return _el$;
+				return _el$2;
 			})())
 		];
 	} }));

package/dist/components/ui/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","RadioGroupItem","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('group', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  return (\n    <KobalteRadioGroup\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      class={cn('grid gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n}\n\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n\n  return (\n    <KobalteRadioGroup.Item\n      title={local.title}\n      class={cn('group/radio flex items-start gap-2.5', local.class)}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n        aria-describedby={local['aria-describedby']}\n        aria-invalid={local['aria-invalid']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel class=\"text-sm font-medium\">\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","JSX","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","variant","media","Element","RadioGroupItem","card","data-variant","undefined","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('group', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  return (\n    <KobalteRadioGroup\n      data-slot=\"radio-group\"\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      class={cn('grid gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n  /**\n   * `card` draws the option as a bordered, selectable card — for a choice\n   * whose options need a sentence each (a source type, a sync budget), where a\n   * bare radio row reads as a form field rather than a decision. The whole card\n   * is the hit target, and the selected card takes the primary edge.\n   */\n  variant?: 'default' | 'card'\n  /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */\n  media?: JSX.Element\n}\n\n/**\n * A card option's label stretches an invisible layer over the whole card, so a\n * click anywhere on it — padding, media, description — selects the option\n * through the label's native association with the radio input. Wrapping the\n * card in a `<label>` would nest the item's own label inside another.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'variant',\n    'media',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n  const card = () => local.variant === 'card'\n\n  return (\n    <KobalteRadioGroup.Item\n      data-slot=\"radio-group-item\"\n      data-variant={card() ? 'card' : undefined}\n      title={local.title}\n      class={cn(\n        'group/radio flex items-start gap-2.5',\n        {\n          'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':\n            card(),\n          'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':\n            card(),\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n        aria-describedby={local['aria-describedby']}\n        aria-invalid={local['aria-invalid']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.media ? (\n        <span data-slot=\"radio-group-item-media\" class=\"flex shrink-0 items-center\">\n          {local.media}\n        </span>\n      ) : null}\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel\n              class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}\n            >\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAIL,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAA;AAGrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC7C,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAQ9D;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCAgCtD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA;AAEjF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAC1E;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAA;IACzC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,mBAAmB,CAAA;CAC/B,CAAA;AAkBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAalD;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,0EAA0E;IAC1E,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCA0BtD;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG;IACjD;;8BAE0B;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,kCAiBF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,kCAGhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,kCAQ5E;AAED,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAEhE"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAIL,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAA;AAGrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC7C,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAQ9D;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCAiCtD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA;AAEjF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAC1E;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAA;IACzC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,mBAAmB,CAAA;CAC/B,CAAA;AAkBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAalD;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,0EAA0E;IAC1E,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCA0BtD;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG;IACjD;;8BAE0B;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,kCAiBF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,kCAGhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,kCAQ5E;AAED,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAEhE"}

package/dist/components/ui/select/select.js

@@ -32,13 +32,16 @@ function SelectTrigger(props) {
 		"hideIcon",
 		"children"
 	]);
-	return createComponent(Select.Trigger, mergeProps({ get ["class"]() {
-		return cn("border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md", "whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none", "data-[placeholder-shown]:text-muted-foreground", "hover:border-input", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4", {
-			"h-control-sm text-xs": local.size === "sm",
-			"h-control-md text-sm": local.size === "md" || local.size === void 0,
-			"h-control-lg text-sm": local.size === "lg"
-		}, local.class);
-	} }, rest, { get children() {
+	return createComponent(Select.Trigger, mergeProps({
+		"data-slot": "select-trigger",
+		get ["class"]() {
+			return cn("border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md", "whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none", "data-[placeholder-shown]:text-muted-foreground", "hover:border-input", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4", {
+				"h-control-sm text-xs": local.size === "sm",
+				"h-control-md text-sm": local.size === "md" || local.size === void 0,
+				"h-control-lg text-sm": local.size === "lg"
+			}, local.class);
+		}
+	}, rest, { get children() {
 		return [memo(() => local.children), createComponent(Show, {
 			get when() {
 				return !local.hideIcon;

package/dist/components/ui/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["Select","KobalteSelect","Check","ChevronDown","ChevronsUpDown","ComponentProps","Show","splitProps","menuContentPadding","menuItem","menuSwatchTone","MenuSwatchTone","topLayerProps","cn","props","Option","OptGroup","local","rest","_$createComponent","_$mergeProps","gutter","SelectTriggerProps","Trigger","size","hideIcon","SelectTrigger","class","undefined","children","_$memo","when","Icon","SelectValueChildren","Value","SelectValueProps","optionLabel","option","LABEL_FIELDS","const","labelFromOption","field","value","Record","SelectValue","readLabel","state","selectedOption","SelectContentProps","Content","portalMount","HTMLElement","SelectContent","Portal","mount","Listbox","SelectItem","Item","swatch","_el$","_tmpl$","_$effect","_$className","tone","ItemLabel","ItemIndicator","SelectSection","Section","SelectLabel","Label","SelectChevronsUpDown","Select","_$createComponent","KobalteSelect","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as KobalteSelect } from '@kobalte/core/select'\nimport { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  menuItem,\n  menuSwatchTone,\n  type MenuSwatchTone,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Select.\n *\n * A single choice from a list that is too long to show, or whose options are\n * only known at runtime. The distinction from RadioGroup is disclosure: a\n * Select hides the choices behind a click, which is right above roughly seven\n * options and wrong below it.\n *\n * `Select.Value` renders the human-readable label of the selection, not its\n * value — the reason a Select takes both `options` and `optionValue`/`optionText`\n * rather than a bare list of strings, and the reason the trigger never shows a\n * raw id.\n */\nexport function Select<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteSelect<Option, OptGroup>>\n) {\n  // Kobalte's own default gutter is 8px; without the arrow (removed below) the\n  // popper no longer folds half an arrow box into that offset, and 8px read as\n  // a detached list. Four pixels is shadcn's `sideOffset` — attached, with\n  // room for the trigger's own border.\n  const [local, rest] = splitProps(props, ['gutter'])\n  return <KobalteSelect gutter={local.gutter ?? 4} {...rest} />\n}\n\nexport type SelectTriggerProps = ComponentProps<typeof KobalteSelect.Trigger> & {\n  size?: 'sm' | 'md' | 'lg'\n  /** Hide the chevron, e.g. when a caller draws its own affordance. */\n  hideIcon?: boolean\n}\n\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'size', 'hideIcon', 'children'])\n\n  return (\n    <KobalteSelect.Trigger\n      class={cn(\n        'border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md',\n        'whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none',\n        'data-[placeholder-shown]:text-muted-foreground',\n        'hover:border-input',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        {\n          'h-control-sm text-xs': local.size === 'sm',\n          'h-control-md text-sm': local.size === 'md' || local.size === undefined,\n          'h-control-lg text-sm': local.size === 'lg',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={!local.hideIcon}>\n        <KobalteSelect.Icon class=\"text-muted-foreground\">\n          <ChevronDown />\n        </KobalteSelect.Icon>\n      </Show>\n    </KobalteSelect.Trigger>\n  )\n}\n\n/**\n * What the trigger shows for the current selection.\n *\n * The default renderer is the reason a single-select needs no render prop at all.\n * Kobalte's own `Value` draws *only* its children, so a bare `<SelectValue />`\n * shows the placeholder and then goes blank the moment something is chosen: the\n * value is there, nothing paints it.\n *\n * Kobalte cannot supply a default itself, because an option is the caller's type\n * — it has no way to know which field is the label. So this reads a field by\n * convention: `label`, then `name`, then `textValue`. An option shaped\n * `{ value, label }` therefore needs nothing, and anything else passes\n * `optionLabel`.\n *\n * A multiple-select still supplies its own renderer, because \"3 selected\" is a\n * summary a caller has to phrase, not something a component can guess.\n */\ntype SelectValueChildren = ComponentProps<typeof KobalteSelect.Value>['children']\n\nexport type SelectValueProps = ComponentProps<typeof KobalteSelect.Value> & {\n  /**\n   * Read the display text from the selected option. Supply this when the option's\n   * label does not live in a field called `label`, `name` or `textValue`.\n   */\n  optionLabel?: (option: unknown) => string\n  /** Replace the default readout entirely, for a multiple-select summary. */\n  children?: SelectValueChildren\n}\n\n/** Fields a label is read from, in order. See `SelectValueProps.optionLabel`. */\nconst LABEL_FIELDS = ['label', 'name', 'textValue'] as const\n\nfunction labelFromOption(option: unknown): string {\n  if (option === null || typeof option !== 'object') {\n    return typeof option === 'string' ? option : ''\n  }\n\n  for (const field of LABEL_FIELDS) {\n    const value = (option as Record<string, unknown>)[field]\n    if (typeof value === 'string') return value\n  }\n\n  return ''\n}\n\nexport function SelectValue(props: SelectValueProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'optionLabel'])\n\n  const readLabel = (state: { selectedOption: () => unknown }): string => {\n    const option = state.selectedOption()\n    return local.optionLabel ? local.optionLabel(option) : labelFromOption(option)\n  }\n\n  return (\n    <KobalteSelect.Value data-slot=\"select-value\" class={cn('truncate', local.class)} {...rest}>\n      {local.children ?? (readLabel as unknown as SelectValueChildren)}\n    </KobalteSelect.Value>\n  )\n}\n\n/**\n * The option list. The items themselves come from the root's `itemComponent`,\n * which is what makes a Select able to render a typed option rather than a\n * string; `children` here is for content above the list, such as a filter hint.\n */\nexport type SelectContentProps = ComponentProps<typeof KobalteSelect.Content> & {\n  /** Keep a nested menu inside its enclosing modal's accessible subtree. */\n  portalMount?: HTMLElement\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'portalMount'])\n\n  return (\n    <KobalteSelect.Portal mount={local.portalMount}>\n      <KobalteSelect.Content\n        {...topLayerProps}\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-select-content-transform-origin) overflow-y-auto overflow-x-hidden',\n          menuContentPadding,\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        {/* No arrow: the list is the trigger's own value opened up, and Kobalte\n            reserves half the arrow's 30px box as popper gutter, which is where\n            the reported gap between a form trigger and its options came from. */}\n        <KobalteSelect.Listbox class=\"flex flex-col\" />\n      </KobalteSelect.Content>\n    </KobalteSelect.Portal>\n  )\n}\n\nexport function SelectItem(\n  props: ComponentProps<typeof KobalteSelect.Item> & {\n    /** Draw a leading colour dot from the shared tone ladder — the accent or\n     * status role the option's card badge carries. `aria-hidden`; the label\n     * carries the meaning. */\n    swatch?: MenuSwatchTone\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'swatch'])\n\n  return (\n    <KobalteSelect.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <Show when={local.swatch}>\n        <span aria-hidden=\"true\" class={menuSwatchTone({ tone: local.swatch })} />\n      </Show>\n      <KobalteSelect.ItemLabel>{local.children}</KobalteSelect.ItemLabel>\n      {/* The indicator reads in the accent, like every other selected state in\n          the system — the row's own foreground reads as decoration. */}\n      <KobalteSelect.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Check class=\"size-4\" />\n      </KobalteSelect.ItemIndicator>\n    </KobalteSelect.Item>\n  )\n}\n\nexport function SelectSection(props: ComponentProps<typeof KobalteSelect.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteSelect.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\nexport function SelectLabel(props: ComponentProps<typeof KobalteSelect.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSelect.Label\n      class={cn('text-muted-foreground px-2 py-1.5 text-2xs font-medium uppercase', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** The chevron pair used when a Select is composed by hand in a field. */\nexport function SelectChevronsUpDown(props: ComponentProps<'svg'>) {\n  return <ChevronsUpDown aria-hidden=\"true\" {...props} />\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["Select","KobalteSelect","Check","ChevronDown","ChevronsUpDown","ComponentProps","Show","splitProps","menuContentPadding","menuItem","menuSwatchTone","MenuSwatchTone","topLayerProps","cn","props","Option","OptGroup","local","rest","_$createComponent","_$mergeProps","gutter","SelectTriggerProps","Trigger","size","hideIcon","SelectTrigger","class","undefined","children","_$memo","when","Icon","SelectValueChildren","Value","SelectValueProps","optionLabel","option","LABEL_FIELDS","const","labelFromOption","field","value","Record","SelectValue","readLabel","state","selectedOption","SelectContentProps","Content","portalMount","HTMLElement","SelectContent","Portal","mount","Listbox","SelectItem","Item","swatch","_el$","_tmpl$","_$effect","_$className","tone","ItemLabel","ItemIndicator","SelectSection","Section","SelectLabel","Label","SelectChevronsUpDown","Select","_$createComponent","KobalteSelect","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as KobalteSelect } from '@kobalte/core/select'\nimport { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  menuItem,\n  menuSwatchTone,\n  type MenuSwatchTone,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Select.\n *\n * A single choice from a list that is too long to show, or whose options are\n * only known at runtime. The distinction from RadioGroup is disclosure: a\n * Select hides the choices behind a click, which is right above roughly seven\n * options and wrong below it.\n *\n * `Select.Value` renders the human-readable label of the selection, not its\n * value — the reason a Select takes both `options` and `optionValue`/`optionText`\n * rather than a bare list of strings, and the reason the trigger never shows a\n * raw id.\n */\nexport function Select<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteSelect<Option, OptGroup>>\n) {\n  // Kobalte's own default gutter is 8px; without the arrow (removed below) the\n  // popper no longer folds half an arrow box into that offset, and 8px read as\n  // a detached list. Four pixels is shadcn's `sideOffset` — attached, with\n  // room for the trigger's own border.\n  const [local, rest] = splitProps(props, ['gutter'])\n  return <KobalteSelect gutter={local.gutter ?? 4} {...rest} />\n}\n\nexport type SelectTriggerProps = ComponentProps<typeof KobalteSelect.Trigger> & {\n  size?: 'sm' | 'md' | 'lg'\n  /** Hide the chevron, e.g. when a caller draws its own affordance. */\n  hideIcon?: boolean\n}\n\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'size', 'hideIcon', 'children'])\n\n  return (\n    <KobalteSelect.Trigger\n      data-slot=\"select-trigger\"\n      class={cn(\n        'border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md',\n        'whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none',\n        'data-[placeholder-shown]:text-muted-foreground',\n        'hover:border-input',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        {\n          'h-control-sm text-xs': local.size === 'sm',\n          'h-control-md text-sm': local.size === 'md' || local.size === undefined,\n          'h-control-lg text-sm': local.size === 'lg',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={!local.hideIcon}>\n        <KobalteSelect.Icon class=\"text-muted-foreground\">\n          <ChevronDown />\n        </KobalteSelect.Icon>\n      </Show>\n    </KobalteSelect.Trigger>\n  )\n}\n\n/**\n * What the trigger shows for the current selection.\n *\n * The default renderer is the reason a single-select needs no render prop at all.\n * Kobalte's own `Value` draws *only* its children, so a bare `<SelectValue />`\n * shows the placeholder and then goes blank the moment something is chosen: the\n * value is there, nothing paints it.\n *\n * Kobalte cannot supply a default itself, because an option is the caller's type\n * — it has no way to know which field is the label. So this reads a field by\n * convention: `label`, then `name`, then `textValue`. An option shaped\n * `{ value, label }` therefore needs nothing, and anything else passes\n * `optionLabel`.\n *\n * A multiple-select still supplies its own renderer, because \"3 selected\" is a\n * summary a caller has to phrase, not something a component can guess.\n */\ntype SelectValueChildren = ComponentProps<typeof KobalteSelect.Value>['children']\n\nexport type SelectValueProps = ComponentProps<typeof KobalteSelect.Value> & {\n  /**\n   * Read the display text from the selected option. Supply this when the option's\n   * label does not live in a field called `label`, `name` or `textValue`.\n   */\n  optionLabel?: (option: unknown) => string\n  /** Replace the default readout entirely, for a multiple-select summary. */\n  children?: SelectValueChildren\n}\n\n/** Fields a label is read from, in order. See `SelectValueProps.optionLabel`. */\nconst LABEL_FIELDS = ['label', 'name', 'textValue'] as const\n\nfunction labelFromOption(option: unknown): string {\n  if (option === null || typeof option !== 'object') {\n    return typeof option === 'string' ? option : ''\n  }\n\n  for (const field of LABEL_FIELDS) {\n    const value = (option as Record<string, unknown>)[field]\n    if (typeof value === 'string') return value\n  }\n\n  return ''\n}\n\nexport function SelectValue(props: SelectValueProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'optionLabel'])\n\n  const readLabel = (state: { selectedOption: () => unknown }): string => {\n    const option = state.selectedOption()\n    return local.optionLabel ? local.optionLabel(option) : labelFromOption(option)\n  }\n\n  return (\n    <KobalteSelect.Value data-slot=\"select-value\" class={cn('truncate', local.class)} {...rest}>\n      {local.children ?? (readLabel as unknown as SelectValueChildren)}\n    </KobalteSelect.Value>\n  )\n}\n\n/**\n * The option list. The items themselves come from the root's `itemComponent`,\n * which is what makes a Select able to render a typed option rather than a\n * string; `children` here is for content above the list, such as a filter hint.\n */\nexport type SelectContentProps = ComponentProps<typeof KobalteSelect.Content> & {\n  /** Keep a nested menu inside its enclosing modal's accessible subtree. */\n  portalMount?: HTMLElement\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'portalMount'])\n\n  return (\n    <KobalteSelect.Portal mount={local.portalMount}>\n      <KobalteSelect.Content\n        {...topLayerProps}\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-select-content-transform-origin) overflow-y-auto overflow-x-hidden',\n          menuContentPadding,\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        {/* No arrow: the list is the trigger's own value opened up, and Kobalte\n            reserves half the arrow's 30px box as popper gutter, which is where\n            the reported gap between a form trigger and its options came from. */}\n        <KobalteSelect.Listbox class=\"flex flex-col\" />\n      </KobalteSelect.Content>\n    </KobalteSelect.Portal>\n  )\n}\n\nexport function SelectItem(\n  props: ComponentProps<typeof KobalteSelect.Item> & {\n    /** Draw a leading colour dot from the shared tone ladder — the accent or\n     * status role the option's card badge carries. `aria-hidden`; the label\n     * carries the meaning. */\n    swatch?: MenuSwatchTone\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'swatch'])\n\n  return (\n    <KobalteSelect.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <Show when={local.swatch}>\n        <span aria-hidden=\"true\" class={menuSwatchTone({ tone: local.swatch })} />\n      </Show>\n      <KobalteSelect.ItemLabel>{local.children}</KobalteSelect.ItemLabel>\n      {/* The indicator reads in the accent, like every other selected state in\n          the system — the row's own foreground reads as decoration. */}\n      <KobalteSelect.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Check class=\"size-4\" />\n      </KobalteSelect.ItemIndicator>\n    </KobalteSelect.Item>\n  )\n}\n\nexport function SelectSection(props: ComponentProps<typeof KobalteSelect.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteSelect.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\nexport function SelectLabel(props: ComponentProps<typeof KobalteSelect.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSelect.Label\n      class={cn('text-muted-foreground px-2 py-1.5 text-2xs font-medium uppercase', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** The chevron pair used when a Select is composed by hand in a field. */\nexport function SelectChevronsUpDown(props: ComponentProps<'svg'>) {\n  return <ChevronsUpDown aria-hidden=\"true\" {...props} />\n}\n"],"mappings":"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"}

package/dist/components/ui/sheet/sheet.d.ts

@@ -35,6 +35,7 @@ import { type VariantProps } from '#lib/variants';
 declare const sheetVariants: (props?: ({
     side?: "top" | "bottom" | "start" | "end" | null | undefined;
     variant?: "inset" | "edge" | null | undefined;
+    size?: "default" | "panel" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SheetContentProps = ComponentProps<typeof KobalteDialogContent> & VariantProps<typeof sheetVariants> & {
     closeButton?: JSX.Element | false;

package/dist/components/ui/sheet/sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,OAAO,IAAI,oBAAoB,EAEhC,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAIH,QAAA,MAAM,aAAa;;;8EAuClB,CAAA;AAQD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,GACzE,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;IACjC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sFAAsF;IACtF,eAAe,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,CAAA;CACpD,CAAA;AAEH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA0DpD;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,eAEhE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,eAE/E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAGvF;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,eAa5E;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASrD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,eAa5E;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,eAG3E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAKvF;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,OAAO,IAAI,oBAAoB,EAEhC,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAIH,QAAA,MAAM,aAAa;;;;8EAwDlB,CAAA;AAQD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,GACzE,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;IACjC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sFAAsF;IACtF,eAAe,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,CAAA;CACpD,CAAA;AAEH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA2DpD;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,eAEhE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,eAE/E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAGvF;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,eAa5E;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASrD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,eAa5E;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,eAG3E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAKvF;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/sheet/sheet.js

@@ -52,6 +52,16 @@ var sheetVariants = cva("bg-background text-foreground fixed z-(--z-dialog) flex
 		variant: {
 			edge: "",
 			inset: "panel-dialog-inset w-lg rounded-xl border"
+		},
+		/**
+		* `panel` gives a start or end sheet the shell's panel width
+		* (`--panel-width`, 390px) — the width a pane that collapses into a sheet
+		* on a narrow window already had beside the work, so its content does not
+		* reflow when it moves. Top and bottom sheets span the window either way.
+		*/
+		size: {
+			default: "",
+			panel: ""
 		}
 	},
 	compoundVariants: [
@@ -74,11 +84,24 @@ var sheetVariants = cva("bg-background text-foreground fixed z-(--z-dialog) flex
 			side: "end",
 			variant: "edge",
 			class: "inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s"
+		},
+		{
+			side: ["start", "end"],
+			variant: "edge",
+			size: "panel",
+			class: "w-panel max-w-[92vw]"
+		},
+		{
+			side: ["start", "end"],
+			variant: "inset",
+			size: "panel",
+			class: "w-panel"
 		}
 	],
 	defaultVariants: {
 		side: "end",
-		variant: "edge"
+		variant: "edge",
+		size: "default"
 	}
 });
 /** `inset` for the end edge, `edge` for every other side, unless the caller says. */
@@ -88,6 +111,7 @@ function SheetContent(props) {
 		"class",
 		"side",
 		"variant",
+		"size",
 		"children",
 		"closeButton",
 		"closeLabel",
@@ -118,7 +142,8 @@ function SheetContent(props) {
 			get ["class"]() {
 				return cn(sheetVariants({
 					side: local.side,
-					variant: variant()
+					variant: variant(),
+					size: local.size
 				}), "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200", "data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150", local.class);
 			}
 		}, rest, {

package/dist/components/ui/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","overlayTitle","cn","createDialogFocusRestoration","DialogOverlay","sheetVariants","variants","side","top","bottom","start","end","variant","edge","inset","compoundVariants","class","defaultVariants","sheetVariantFor","SheetContentProps","closeButton","Element","closeLabel","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","when","_$mergeProps","data-variant","_$memo","CloseButton","aria-label","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","band","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { overlayTitle } from '#lib/overlay'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * `variant` decides how it meets that edge. `inset` — the default for `end` —\n * docks the panel inside the main view: below the top bar, one equal gap from\n * the top bar, the end edge and the bottom, with no scrim, so the work it edits\n * stays visible and the top bar stays reachable. It is the shape for editing one\n * thing beside its context (appearance settings, a task, a record). `edge` runs\n * edge to edge over a scrim — the shape of a navigation drawer, and the default\n * for every other side.\n *\n * Its parts read alike everywhere: `SheetHeader` holds a heading, a description\n * and a full-width rule beneath, with the close button in the corner;\n * `SheetBody` scrolls on its own; `SheetFooter` is a full-width band that holds\n * the decision. Pass `band` to the header, the footer, or both to step those\n * parts onto the ladder's subtle-fill rung (see `SheetFooter`).\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\n// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be\n// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the\n// pinned footer out of view. Only SheetBody scrolls.\nconst sheetVariants = cva(\n  'bg-background text-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n      variant: {\n        edge: '',\n        inset: 'panel-dialog-inset w-lg rounded-xl border',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        variant: 'edge',\n        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',\n      },\n      {\n        side: 'bottom',\n        variant: 'edge',\n        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',\n      },\n      {\n        side: 'start',\n        variant: 'edge',\n        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',\n      },\n      {\n        side: 'end',\n        variant: 'edge',\n        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',\n      },\n    ],\n    defaultVariants: { side: 'end', variant: 'edge' },\n  }\n)\n\n/** `inset` for the end edge, `edge` for every other side, unless the caller says. */\nconst sheetVariantFor = (\n  side: SheetContentProps['side'],\n  variant: SheetContentProps['variant']\n): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** The close button's accessible name. Defaults to \"Close\". */\n    closeLabel?: string\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'variant',\n    'children',\n    'closeButton',\n    'closeLabel',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  const variant = () => sheetVariantFor(local.side, local.variant)\n\n  return (\n    <KobalteDialog.Portal>\n      {/* An inset panel is beside the work, so the work stays in view: no scrim.\n          It is still modal — focus stays inside and an outside click dismisses. */}\n      <Show when={variant() === 'edge'}>\n        <DialogOverlay />\n      </Show>\n      <KobalteDialogContent\n        data-variant={variant()}\n        class={cn(\n          sheetVariants({ side: local.side, variant: variant() }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label={local.closeLabel ?? 'Close'}\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\n/**\n * The sheet's title band: a heading, a description and the full-width rule\n * beneath, with the close button in the corner. `band` steps the band onto the\n * subtle-fill rung (see `SheetFooter`) — the two-toned anatomy of a sheet that\n * reads as a panel beside the work rather than one flat canvas.\n */\nexport function SheetHeader(props: ComponentProps<'div'> & { band?: boolean }) {\n  const [local, rest] = splitProps(props, ['class', 'band'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn(\n        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',\n        { 'bg-muted': local.band },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * The sheet's decision band: a full-width, hairline-ruled strip that holds the\n * actions. `band` paints it with `--muted` — the elevation ladder's\n * subtle-fill rung, one step up from the panel's `--background` — so the sheet\n * reads two-toned: title band and decision band on the raised rung, scrolling\n * body on the panel surface. The rung already exists for cards, sidebars and\n * input fills; this is the panel-shaped overlay family claiming it. Opt-in\n * because the flat panel is the documented default: the centred modal\n * separates with veil, hairline and shadow instead (the elevated overlay rung\n * amplifies the canvas chroma, which reads as a cast across a large panel),\n * and a host opts a whole sheet family in by passing the prop where it composes\n * the parts — not by restyling them from the outside.\n */\nexport function SheetFooter(props: ComponentProps<'div'> & { band?: boolean }) {\n  const [local, rest] = splitProps(props, ['class', 'band'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',\n        { 'bg-muted': local.band },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,IAAMiB,gBAAgBN,IACpB,0GACA;CACEO,UAAU;EACRC,MAAM;GACJC,KAAK;GACLC,QAAQ;GACRC,OAAO;GACPC,KAAK;EACP;EACAC,SAAS;GACPC,MAAM;GACNC,OAAO;EACT;CACF;CACAC,kBAAkB;EAChB;GACER,MAAM;GACNK,SAAS;GACTI,OAAO;EACT;EACA;GACET,MAAM;GACNK,SAAS;GACTI,OAAO;EACT;EACA;GACET,MAAM;GACNK,SAAS;GACTI,OAAO;EACT;EACA;GACET,MAAM;GACNK,SAAS;GACTI,OAAO;EACT;CAAC;CAEHC,iBAAiB;EAAEV,MAAM;EAAOK,SAAS;CAAO;AAClD,CACF;;AAGA,IAAMM,mBACJX,MACAK,YACqBA,aAAaL,QAAQ,WAAW,QAAQ,UAAU;AAWzE,SAAgBkB,aAAaC,OAA0B;CACrD,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAkB,CACnB;CACD,MAAMG,SAASrC,iBAAiB;CAChC,MAAMsC,mBAAmB3B,6BAA6B;EACpD4B,MAAMF,OAAOG;EACbT,iBAAiBI,MAAMJ;EACvBU,iBAAiBN,MAAMM;EACvBC,kBAAkBP,MAAMO;CAC1B,CAAC;CAED,MAAMtB,gBAAgBM,gBAAgBS,MAAMpB,MAAMoB,MAAMf,OAAO;CAE/D,OAAAuB,gBACG9C,OAAc+C,QAAM,EAAA,IAAAC,WAAA;EAAA,OAAA,CAAAF,gBAGlBtC,MAAI;GAAA,IAACyC,OAAI;IAAA,OAAE1B,QAAQ,MAAM;GAAM;GAAA,IAAAyB,WAAA;IAAA,OAAAF,gBAC7B/B,eAAa,CAAA,CAAA;GAAA;EAAA,CAAA,GAAA+B,gBAEf5C,SAAoBgD,WAAA;GAAA,KAAA,kBAAA;IAAA,OACL3B,QAAQ;GAAC;GAAA,KAAA,WAAA;IAAA,OAChBV,GACLG,cAAc;KAAEE,MAAMoB,MAAMpB;KAAMK,SAASA,QAAQ;IAAE,CAAC,GACtD,+EACA,2EACAe,MAAMX,KACR;GAAC;EAAA,GACGY,MAAI;GAAA,IACRK,kBAAe;IAAA,OAAEH,iBAAiBG;GAAe;GAAA,IACjDC,mBAAgB;IAAA,OAAEJ,iBAAiBI;GAAgB;GAAA,IAAAG,WAAA;IAAA,OAAA,CAAAI,WAElDd,MAAMU,QAAQ,GAAAF,gBACdtC,MAAI;KAAA,IAACyC,OAAI;MAAA,OAAEX,MAAMP,gBAAgB;KAAK;KAAA,IAAAiB,WAAA;MAAA,OAAAF,gBAKpC9C,OAAcqD,aAAW;OAAA,KAAA,gBAAA;QAAA,OACZf,MAAML,cAAc;OAAO;OACvCsB,UAAQ;OAAA,SAAA;OAAA,IAAAP,WAAA;QAAA,OAGPV,MAAMP,eAAWe,gBAAK1C,GAAC,EAAA,SAAA,SAAA,CAAA;OAAkB;MAAA,CAAA;KAAA;IAAA,CAAA,CAAA;GAAA;EAAA,CAAA,CAAA,CAAA;CAAA,EAAA,CAAA;AAMtD;AAEA,SAAgBoD,MAAMnB,OAA6C;CACjE,OAAAS,gBAAQ9C,QAAkBqC,KAAK;AACjC;AAEA,SAAgBoB,aAAapB,OAAqD;CAChF,OAAAS,gBAAQ9C,OAAc0D,SAAYrB,KAAK;AACzC;AAEA,SAAgBsB,iBAAiBtB,OAAyD;CACxF,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAS,gBAAQ9C,OAAcqD,aAAWH,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQrC,GAAGyB,MAAMX,KAAK;CAAC,EAAA,GAAMY,IAAI,CAAA;AACpE;;;;;;;AAQA,SAAgBqB,YAAYvB,OAAmD;CAC7E,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO,CAAC,SAAS,MAAM,CAAC;CACzD,cAAA;EAAA,IAAAyB,OAAAC,OAAA;EAAAC,OAAAF,MAAAZ,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWrC,GACL,8EACA,EAAE,YAAYyB,MAAMuB,KAAK,GACzBvB,MAAMX,KACR;EAAC,EAAA,GACGY,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAuB;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBG,UAAU5B,OAA8B;CACtD,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA6B,QAAAC,QAAA;EAAAH,OAAAE,OAAAhB,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWrC,GAAG,sCAAsCyB,MAAMX,KAAK;EAAC,EAAA,GACxDY,IAAI,GAAA,OAAA,KAAA;EAAA,OAAA2B;CAAA,EAAA,CAAA;AAGd;;;;;;;;;;;;;;AAeA,SAAgBE,YAAY/B,OAAmD;CAC7E,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO,CAAC,SAAS,MAAM,CAAC;CACzD,cAAA;EAAA,IAAAgC,QAAAC,QAAA;EAAAN,OAAAK,OAAAnB,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWrC,GACL,yGACA,EAAE,YAAYyB,MAAMuB,KAAK,GACzBvB,MAAMX,KACR;EAAC,EAAA,GACGY,IAAI,GAAA,OAAA,KAAA;EAAA,OAAA8B;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBE,WAAWlC,OAAmD;CAC5E,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAS,gBAAQ9C,OAAcwE,OAAKtB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQrC,GAAGD,cAAc0B,MAAMX,KAAK;CAAC,EAAA,GAAMY,IAAI,CAAA;AAC5E;AAEA,SAAgBkC,iBAAiBpC,OAAyD;CACxF,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAS,gBACG9C,OAAc0E,aAAWxB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQrC,GAAG,iCAAiCyB,MAAMX,KAAK;CAAC,EAAA,GAAMY,IAAI,CAAA;AAEhG"}
+{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","overlayTitle","cn","createDialogFocusRestoration","DialogOverlay","sheetVariants","variants","side","top","bottom","start","end","variant","edge","inset","size","default","panel","compoundVariants","class","defaultVariants","sheetVariantFor","SheetContentProps","closeButton","Element","closeLabel","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","when","_$mergeProps","data-variant","_$memo","CloseButton","aria-label","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","band","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { overlayTitle } from '#lib/overlay'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * `variant` decides how it meets that edge. `inset` — the default for `end` —\n * docks the panel inside the main view: below the top bar, one equal gap from\n * the top bar, the end edge and the bottom, with no scrim, so the work it edits\n * stays visible and the top bar stays reachable. It is the shape for editing one\n * thing beside its context (appearance settings, a task, a record). `edge` runs\n * edge to edge over a scrim — the shape of a navigation drawer, and the default\n * for every other side.\n *\n * Its parts read alike everywhere: `SheetHeader` holds a heading, a description\n * and a full-width rule beneath, with the close button in the corner;\n * `SheetBody` scrolls on its own; `SheetFooter` is a full-width band that holds\n * the decision. Pass `band` to the header, the footer, or both to step those\n * parts onto the ladder's subtle-fill rung (see `SheetFooter`).\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\n// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be\n// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the\n// pinned footer out of view. Only SheetBody scrolls.\nconst sheetVariants = cva(\n  'bg-background text-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n      variant: {\n        edge: '',\n        inset: 'panel-dialog-inset w-lg rounded-xl border',\n      },\n      /**\n       * `panel` gives a start or end sheet the shell's panel width\n       * (`--panel-width`, 390px) — the width a pane that collapses into a sheet\n       * on a narrow window already had beside the work, so its content does not\n       * reflow when it moves. Top and bottom sheets span the window either way.\n       */\n      size: {\n        default: '',\n        panel: '',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        variant: 'edge',\n        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',\n      },\n      {\n        side: 'bottom',\n        variant: 'edge',\n        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',\n      },\n      {\n        side: 'start',\n        variant: 'edge',\n        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',\n      },\n      {\n        side: 'end',\n        variant: 'edge',\n        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',\n      },\n      {\n        side: ['start', 'end'],\n        variant: 'edge',\n        size: 'panel',\n        class: 'w-panel max-w-[92vw]',\n      },\n      { side: ['start', 'end'], variant: 'inset', size: 'panel', class: 'w-panel' },\n    ],\n    defaultVariants: { side: 'end', variant: 'edge', size: 'default' },\n  }\n)\n\n/** `inset` for the end edge, `edge` for every other side, unless the caller says. */\nconst sheetVariantFor = (\n  side: SheetContentProps['side'],\n  variant: SheetContentProps['variant']\n): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** The close button's accessible name. Defaults to \"Close\". */\n    closeLabel?: string\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'variant',\n    'size',\n    'children',\n    'closeButton',\n    'closeLabel',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  const variant = () => sheetVariantFor(local.side, local.variant)\n\n  return (\n    <KobalteDialog.Portal>\n      {/* An inset panel is beside the work, so the work stays in view: no scrim.\n          It is still modal — focus stays inside and an outside click dismisses. */}\n      <Show when={variant() === 'edge'}>\n        <DialogOverlay />\n      </Show>\n      <KobalteDialogContent\n        data-variant={variant()}\n        class={cn(\n          sheetVariants({ side: local.side, variant: variant(), size: local.size }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label={local.closeLabel ?? 'Close'}\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\n/**\n * The sheet's title band: a heading, a description and the full-width rule\n * beneath, with the close button in the corner. `band` steps the band onto the\n * subtle-fill rung (see `SheetFooter`) — the two-toned anatomy of a sheet that\n * reads as a panel beside the work rather than one flat canvas.\n */\nexport function SheetHeader(props: ComponentProps<'div'> & { band?: boolean }) {\n  const [local, rest] = splitProps(props, ['class', 'band'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn(\n        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',\n        { 'bg-muted': local.band },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * The sheet's decision band: a full-width, hairline-ruled strip that holds the\n * actions. `band` paints it with `--muted` — the elevation ladder's\n * subtle-fill rung, one step up from the panel's `--background` — so the sheet\n * reads two-toned: title band and decision band on the raised rung, scrolling\n * body on the panel surface. The rung already exists for cards, sidebars and\n * input fills; this is the panel-shaped overlay family claiming it. Opt-in\n * because the flat panel is the documented default: the centred modal\n * separates with veil, hairline and shadow instead (the elevated overlay rung\n * amplifies the canvas chroma, which reads as a cast across a large panel),\n * and a host opts a whole sheet family in by passing the prop where it composes\n * the parts — not by restyling them from the outside.\n */\nexport function SheetFooter(props: ComponentProps<'div'> & { band?: boolean }) {\n  const [local, rest] = splitProps(props, ['class', 'band'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',\n        { 'bg-muted': local.band },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG;IAC/D,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAgFxC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG;IAC/D,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAiFxC"}