npm - @adea-ai/ui - Versions diffs - 0.116.0 → 0.118.0 - Mend

@adea-ai/ui 0.116.0 → 0.118.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"~~;;;;;;;;;;;;;;;;;;;;~~AAmBA,SAAgBA,~~aAAWO~~,OAAiD;CAC1E,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,MAAMG,QAAQL,oBAAoB,SAAS;EACzCM,IAAIH,MAAMG;EACV,cAAcH,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CACD,OAAAI,~~gBACGX~~,~~YAAiBY~~,WAAA;EAAA,~~IAChBF~~,KAAE;GAAA,OAAED,OAAOC,MAAMH,MAAMG;EAAE;EAAA,KAAA,gBAAA;GAAA,OACbH,MAAM;EAAa;EAAA,KAAA,qBAAA;GAAA,OACdE,QAAQ,sBAAsBF,MAAM;EAAkB;EAAA,KAAA,sBAAA;GAAA,OACrDE,QAAQ,uBAAuBF,MAAM;EAAmB;EAAA,KAAA,kBAAA;GAAA,OAC5DE,QAAQ,mBAAmBF,MAAM;EAAe;EAAA,KAAA,uBAAA;GAAA,OAC3CE,QAAQ,wBAAwBF,MAAM;EAAoB;EAAA,KAAA,WAAA;GAAA,OACtEF,GAAG,cAAcE,MAAMW,KAAK;EAAC;CAAA,GAChCV,IAAI,CAAA;AAGd~~;AAaA~~,~~SAAgBgB~~,~~eAAelB~~,OAA4B;CACzD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;~~CAED~~,~~OAAAK~~,~~gBACGX~~,~~WAAkBoB~~,MAAIR,WAAA;EAAA,~~IACrBa~~,QAAK;GAAA,~~OAAElB~~,~~MAAMkB~~;EAAK;EAAA,KAAA,WAAA;GAAA,~~OACXpB~~,~~GAAG~~,~~wCAAwCE~~,~~MAAMW~~,KAAK;EAAC;CAAA,~~GAC1DV~~,MAAI,EAAA,~~IAAAkB~~,WAAA;EAAA,OAAA;~~GAAAf~~,~~gBAEPX~~,~~WAAkB2B~~,WAAS;IAAA,KAAA,gBAAA;KAAA,~~OACdpB~~,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,sBAAA;KAAA,OACvBA,MAAM;IAAmB;IAAA,KAAA,kBAAA;KAAA,OAC7BA,MAAM;IAAe;IAAA,KAAA,eAAA;KAAA,OACxBA,MAAM;IAAY;IAAA,~~IAC7BkB~~,QAAK;KAAA,~~OAAElB~~,~~MAAMkB~~;IAAK;GAAA,CAAA;~~GAAAd~~,~~gBAEnBX~~,~~WAAkB6B~~,aAAW;IAAA,KAAA,WAAA;KAAA,~~OACrBxB~~,GACL,oGACA,qFACA,oFACA,6DACA,kGACA,iEACAE,MAAMc,YACR;IAAC;IAAA,~~IAAAK~~,WAAA;KAAA,~~OAAAf~~,~~gBAEAX~~,~~WAAkB8B~~,eAAa;MAAA,SAAA;MAAA,IAAAJ,WAAA;OAAA,~~OAAAf~~,~~gBAC7BV~~,QAAM,EAAA,SAAA,sBAAA,CAAA;MAAA;KAAA,CAAA;IAAA;GAAA,CAAA;~~GAAA8B~~,~~WAGVxB~~,~~MAAMmB~~,~~mBAAQ~~;IAAA,~~IAAAM~~,OAAAC,OAAA;IAAAC,OAAAF,~~aAAA~~;KAAA,~~IAAAG~~,~~MAAAJ~~,WAAA,CAAA,~~CAEVxB~~,MAAMe,KAAK;KAAA,~~aAAXa~~,IAAA,~~IAAAxB~~,~~gBACEX~~,~~WAAkBoC~~,WAAS;MAAA,~~SAAA~~;MAAA,~~IAAAV~~,WAAA;OAAA,~~OACzBnB~~,MAAMe;MAAK;KAAA,CAAA,IAEZ;IAAI,EAAA,CAAA,GAAA,IAAA;~~IAAAY~~,~~OAAAF~~,~~aAAA~~;KAAA,~~IAAAK~~,~~OAAAN~~,WAAA,CAAA,~~CACPxB~~,MAAMgB,WAAW;KAAA,~~aAAjBc~~,KAAA,~~IAAA1B~~,~~gBACEX~~,~~WAAkBsC~~,iBAAe;MAAA,SAAA;MAAA,~~IAAAZ~~,WAAA;OAAA,OAC/~~BnB~~,MAAMgB;MAAW;KAAA,CAAA,IAElB;IAAI,EAAA,CAAA,GAAA,IAAA;IAAA,~~OAAAS~~;GAAA,EAAA,CAAA,CAEX;EAAA;CAAA,EAAA,CAAA,CAAA;AAGP"}
1	+ {"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/resizable/resizable.d.ts CHANGED Viewed

@@ -8,8 +8,13 @@ export declare function ResizablePanel(props: ComponentProps<typeof Resizable.Pa
 }): import("solid-js").JSX.Element;
 export type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {
     class?: string;
-    /** Draw a visible grip in the middle of the divider. */
-    withHandle?: boolean;
+    /**
+     * Draw a visible grip in the middle of the divider: `true` is the bordered
+     * chip with its grip icon; `'rung'` is a quieter translucent bar with no
+     * icon, for edges that should read as barely there. Either way the divider
+     * keeps its full 24px hit target.
+     */
+    withHandle?: boolean | 'rung';
     /**
      * The divider's accessible name. It is a focusable control — arrow keys move
      * the split — so it needs one; without it a screen reader announces an

package/dist/components/ui/resizable/resizable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/resizable/resizable.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAExC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAuB9C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,kCAa/F;AAgBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,kCAchG;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd~~,wDAAwD~~;~~IACxD~~,UAAU,CAAC,EAAE,OAAO,CAAA;~~IACpB~~;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,~~kCAgC1D~~"}
1	+ {"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/resizable/resizable.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAExC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAuB9C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,kCAa/F;AAgBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,kCAchG;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kCAsC1D"}

package/dist/components/ui/resizable/resizable.js CHANGED Viewed

@@ -4,7 +4,8 @@ import { GripVertical } from "lucide-solid";
 import { createContext, splitProps, useContext } from "solid-js";
 import Resizable from "@corvu/resizable";
 //#region src/components/ui/resizable/resizable.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="bg-border z-(--z-docked) flex h-4 w-2.5 items-center justify-center rounded-sm border border-border">`);
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=resizable-grip class="z-(--z-docked) h-11 w-1.5 flex-none rounded-full bg-border/55 group-data-[orientation=vertical]/resize:h-1.5 group-data-[orientation=vertical]/resize:w-11">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="bg-border z-(--z-docked) flex h-4 w-2.5 items-center justify-center rounded-sm border border-border">`);
 /**
 * Resizable.
 *
@@ -75,13 +76,13 @@ function ResizableHandle(props) {
 			return group.orientation() === "horizontal" ? "vertical" : "horizontal";
 		},
 		get ["class"]() {
-			return cn("group/resize bg-border relative flex w-px shrink-0 items-center justify-center", "after:absolute after:inset-y-0 after:-inset-x-3 after:w-6", "transition-colors ease-out hover:bg-primary", "focus-visible:bg-primary focus-visible:outline-none", "data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full", "data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-3 data-[orientation=vertical]:after:h-6 data-[orientation=vertical]:after:w-full", local.class);
+			return cn("group/resize bg-border relative flex w-px shrink-0 items-center justify-center", "after:absolute after:inset-y-0 after:-inset-x-3 after:w-6", "transition-colors ease-out", local.withHandle === "rung" ? "hover:bg-primary/45" : "hover:bg-primary", "focus-visible:bg-primary focus-visible:outline-none", "data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full", "data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-3 data-[orientation=vertical]:after:h-6 data-[orientation=vertical]:after:w-full", local.class);
 		}
 	}, rest, { get children() {
-		return memo(() => !!local.withHandle)() ? (() => {
-			var _el$ = _tmpl$();
-			insert(_el$, createComponent(GripVertical, { "class": "size-2.5 text-muted-foreground" }));
-			return _el$;
+		return memo(() => local.withHandle === "rung")() ? _tmpl$() : memo(() => !!local.withHandle)() ? (() => {
+			var _el$2 = _tmpl$2();
+			insert(_el$2, createComponent(GripVertical, { "class": "size-2.5 text-muted-foreground" }));
+			return _el$2;
 		})() : null;
 	} }));
 }

package/dist/components/ui/resizable/resizable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable.js","names":["Resizable","GripVertical","ComponentProps","createContext","splitProps","useContext","cn","GroupSizesContext","ResizablePanelGroup","props","class","local","rest","_$createComponent","Provider","value","initialSizes","undefined","sizes","children","_$mergeProps","remainingSize","left","reduce","total","size","length","ResizablePanel","Panel","group","contextId","groupHasSizes","initialSize","ResizableHandleProps","Handle","withHandle","label","ResizableHandle","aria-label","aria-orientation","orientation","_$memo","_el$","_tmpl$","_$insert","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/resizable/resizable.tsx"],"sourcesContent":["import Resizable from '@corvu/resizable'\nimport { GripVertical } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createContext, splitProps, useContext } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/*\n Resizable.\n \n A split layout: panels the user can resize, with a handle between them. This\n * is the shape of every IDE-like surface — rail, file tree, editor, terminal —\n * and the reason it is a primitive rather than something each view improvises.\n \n corvu supplies the pointer capture, the min/max constraints and the keyboard\n * resizing, which is what makes a divider operable without a mouse. The handle\n * is a real focusable element with an accessible role, so a split pane can be\n * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.\n /\n/\n Whether the group was given `initialSizes` or controlled `sizes`. Those are corvu's to apply, and a\n * panel's own `initialSize` overrides them — so an unsized panel must not invent\n * one when the group already has an answer.\n /\nconst GroupSizesContext = createContext<() => boolean>(() => false)\n\nexport function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & { class?: string }) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <GroupSizesContext.Provider\n value={() => rest.initialSizes !== undefined \|\| rest.sizes !== undefined}\n >\n <Resizable\n class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}\n {...rest}\n />\n </GroupSizesContext.Provider>\n )\n}\n\n/\n The size an unsized panel registers with: whatever its earlier siblings left.\n \n corvu registers a panel without `initialSize` at a flat 50%, so `0.28` beside\n * an unsized panel summed to 78% and left a gap. Panels register in document\n * order, so at registration `sizes` holds exactly the panels before this one.\n * When nothing is left — a second unsized panel — it takes an equal share, and\n * corvu shrinks the earlier panels by that share to keep the total at 100%.\n /\nfunction remainingSize(sizes: readonly number[]): number {\n const left = 1 - sizes.reduce((total, size) => total + size, 0)\n return left > 0.001 ? left : 1 / (sizes.length + 1)\n}\n\nexport function ResizablePanel(props: ComponentProps<typeof Resizable.Panel> & { class?: string }) {\n const [local, rest] = splitProps(props, ['class', 'initialSize'])\n const group = Resizable.useContext(rest.contextId)\n const groupHasSizes = useContext(GroupSizesContext)\n\n return (\n <Resizable.Panel\n initialSize={\n local.initialSize ?? (groupHasSizes() ? undefined : remainingSize(group.sizes()))\n }\n class={cn('min-h-0 min-w-0 overflow-hidden', local.class)}\n {...rest}\n />\n )\n}\n\nexport type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {\n class?: string\n /* Draw a visible grip in the middle of the divider. /\n withHandle?: boolean\n /\n The divider's accessible name. It is a focusable control — arrow keys move\n * the split — so it needs one; without it a screen reader announces an\n * unlabelled button between the two panels.\n /\n label?: string\n}\n\nexport function ResizableHandle(props: ResizableHandleProps) {\n const [local, rest] = splitProps(props, ['class', 'withHandle', 'label'])\n const group = Resizable.useContext(rest.contextId)\n\n return (\n <Resizable.Handle\n aria-label={local.label ?? 'Resize panels'}\n // A separator's orientation is the line's own, which runs across the\n // group: a row of panels is divided by a vertical line, a column by a\n // horizontal one. corvu reports the group's orientation instead.\n aria-orientation={group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'}\n class={cn(\n 'group/resize bg-border relative flex w-px shrink-0 items-center justify-center',\n / Widen the hit target without moving the visual line: the divider is\n a hairline, but a hairline is far too small to grab. 24px on the\n drag axis meets WCAG 2.5.8's minimum target. */\n 'after:absolute after:inset-y-0 after:-inset-x-3 after:w-6',\n 'transition-colors ease-out hover:bg-primary',\n 'focus-visible:bg-primary focus-visible:outline-none',\n 'data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full',\n 'data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-3 data-[orientation=vertical]:after:h-6 data-[orientation=vertical]:after:w-full',\n local.class\n )}\n {...rest}\n >\n {local.withHandle ? (\n <div class=\"bg-border z-(--z-docked) flex h-4 w-2.5 items-center justify-center rounded-sm border border-border\">\n <GripVertical class=\"size-2.5 text-muted-foreground\" />\n </div>\n ) : null}\n </Resizable.Handle>\n )\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;~~AAuBA,IAAMO,oBAAoBJ,oBAAmC,KAAK;AAElE,SAAgBK,oBAAoBC,OAA8D;CAChG,MAAM,CAACE,OAAOC,QAAQR,WAAWK,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAI,gBACGN,kBAAkBO,UAAQ;EACzBC,aAAaH,KAAKI,iBAAiBC,KAAAA,KAAaL,KAAKM,UAAUD,KAAAA;EAAS,IAAAE,WAAA;GAAA,OAAAN,gBAEvEb,WAASoB,WAAA,EAAA,KAAA,WAAA;IAAA,OACDd,GAAG,uDAAuDK,MAAMD,KAAK;GAAC,EAAA,GACzEE,IAAI,CAAA;EAAA;CAAA,CAAA;AAIhB;;;;;;;;;;AAWA,SAASS,cAAcH,OAAkC;CACvD,MAAMI,OAAO,IAAIJ,MAAMK,QAAQC,OAAOC,SAASD,QAAQC,MAAM,CAAC;CAC9D,OAAOH,OAAO,OAAQA,OAAO,KAAKJ,MAAMQ,SAAS;AACnD;AAEA,SAAgBC,eAAelB,OAAoE;CACjG,MAAM,CAACE,OAAOC,QAAQR,WAAWK,OAAO,CAAC,SAAS,aAAa,CAAC;CAChE,MAAMoB,QAAQ7B,UAAUK,WAAWO,KAAKkB,SAAS;CACjD,MAAMC,gBAAgB1B,WAAWE,iBAAiB;CAElD,OAAAM,gBACGb,UAAU4B,OAAKR,WAAA;EAAA,IACdY,cAAW;GAAA,OACTrB,MAAMqB,gBAAgBD,cAAc,IAAId,KAAAA,IAAYI,cAAcQ,MAAMX,MAAM,CAAC;EAAE;EAAA,KAAA,WAAA;GAAA,OAE5EZ,GAAG,mCAAmCK,MAAMD,KAAK;EAAC;CAAA,GACrDE,IAAI,CAAA;AAGd;~~AAcA~~,SAAgByB,gBAAgB5B,OAA6B;CAC3D,MAAM,CAACE,OAAOC,QAAQR,WAAWK,OAAO;EAAC;EAAS;EAAc;CAAO,CAAC;CACxE,MAAMoB,QAAQ7B,UAAUK,WAAWO,KAAKkB,SAAS;CAEjD,OAAAjB,gBACGb,UAAUkC,QAAMd,WAAA;EAAA,KAAA,gBAAA;GAAA,OACHT,MAAMyB,SAAS;EAAe;EAAA,KAAA,sBAAA;GAAA,OAIxBP,MAAMW,YAAY,MAAM,eAAe,aAAa;EAAY;EAAA,KAAA,WAAA;GAAA,OAC3ElC,GACL,kFAIA,6DACA~~,+CACA~~,uDACA,uEACA,~~2KACAK~~,MAAMD,KACR;EAAC;CAAA,GACGE,MAAI,EAAA,IAAAO,WAAA;EAAA,OAEPsB,WAAA,CAAA,CAAA9B,MAAMwB,UAAU,CAAA,CAAA,WAAA;GAAA,~~IAAAO~~,~~OAAAC~~,~~OAAA~~;GAAAC,OAAAF,~~MAAA7B~~,~~gBAEZZ~~,cAAY,EAAA,SAAA,iCAAA,CAAA,CAAA;GAAA,~~OAAAyC~~;EAAA,EAAA,CAAA,IAEb;CAAI,EAAA,CAAA,CAAA;AAGd"}
1	+ {"version":3,"file":"resizable.js","names":["Resizable","GripVertical","ComponentProps","createContext","splitProps","useContext","cn","GroupSizesContext","ResizablePanelGroup","props","class","local","rest","_$createComponent","Provider","value","initialSizes","undefined","sizes","children","_$mergeProps","remainingSize","left","reduce","total","size","length","ResizablePanel","Panel","group","contextId","groupHasSizes","initialSize","ResizableHandleProps","Handle","withHandle","label","ResizableHandle","aria-label","aria-orientation","orientation","_$memo","_tmpl$","_el$2","_tmpl$2","_$insert","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/resizable/resizable.tsx"],"sourcesContent":["import Resizable from '@corvu/resizable'\nimport { GripVertical } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createContext, splitProps, useContext } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/*\n Resizable.\n \n A split layout: panels the user can resize, with a handle between them. This\n * is the shape of every IDE-like surface — rail, file tree, editor, terminal —\n * and the reason it is a primitive rather than something each view improvises.\n \n corvu supplies the pointer capture, the min/max constraints and the keyboard\n * resizing, which is what makes a divider operable without a mouse. The handle\n * is a real focusable element with an accessible role, so a split pane can be\n * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.\n /\n/\n Whether the group was given `initialSizes` or controlled `sizes`. Those are corvu's to apply, and a\n * panel's own `initialSize` overrides them — so an unsized panel must not invent\n * one when the group already has an answer.\n /\nconst GroupSizesContext = createContext<() => boolean>(() => false)\n\nexport function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & { class?: string }) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <GroupSizesContext.Provider\n value={() => rest.initialSizes !== undefined \|\| rest.sizes !== undefined}\n >\n <Resizable\n class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}\n {...rest}\n />\n </GroupSizesContext.Provider>\n )\n}\n\n/\n The size an unsized panel registers with: whatever its earlier siblings left.\n \n corvu registers a panel without `initialSize` at a flat 50%, so `0.28` beside\n * an unsized panel summed to 78% and left a gap. Panels register in document\n * order, so at registration `sizes` holds exactly the panels before this one.\n * When nothing is left — a second unsized panel — it takes an equal share, and\n * corvu shrinks the earlier panels by that share to keep the total at 100%.\n /\nfunction remainingSize(sizes: readonly number[]): number {\n const left = 1 - sizes.reduce((total, size) => total + size, 0)\n return left > 0.001 ? left : 1 / (sizes.length + 1)\n}\n\nexport function ResizablePanel(props: ComponentProps<typeof Resizable.Panel> & { class?: string }) {\n const [local, rest] = splitProps(props, ['class', 'initialSize'])\n const group = Resizable.useContext(rest.contextId)\n const groupHasSizes = useContext(GroupSizesContext)\n\n return (\n <Resizable.Panel\n initialSize={\n local.initialSize ?? (groupHasSizes() ? undefined : remainingSize(group.sizes()))\n }\n class={cn('min-h-0 min-w-0 overflow-hidden', local.class)}\n {...rest}\n />\n )\n}\n\nexport type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {\n class?: string\n /\n Draw a visible grip in the middle of the divider: `true` is the bordered\n * chip with its grip icon; `'rung'` is a quieter translucent bar with no\n * icon, for edges that should read as barely there. Either way the divider\n * keeps its full 24px hit target.\n /\n withHandle?: boolean \| 'rung'\n /\n The divider's accessible name. It is a focusable control — arrow keys move\n * the split — so it needs one; without it a screen reader announces an\n * unlabelled button between the two panels.\n /\n label?: string\n}\n\nexport function ResizableHandle(props: ResizableHandleProps) {\n const [local, rest] = splitProps(props, ['class', 'withHandle', 'label'])\n const group = Resizable.useContext(rest.contextId)\n\n return (\n <Resizable.Handle\n aria-label={local.label ?? 'Resize panels'}\n // A separator's orientation is the line's own, which runs across the\n // group: a row of panels is divided by a vertical line, a column by a\n // horizontal one. corvu reports the group's orientation instead.\n aria-orientation={group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'}\n class={cn(\n 'group/resize bg-border relative flex w-px shrink-0 items-center justify-center',\n / Widen the hit target without moving the visual line: the divider is\n a hairline, but a hairline is far too small to grab. 24px on the\n drag axis meets WCAG 2.5.8's minimum target. */\n 'after:absolute after:inset-y-0 after:-inset-x-3 after:w-6',\n 'transition-colors ease-out',\n local.withHandle === 'rung' ? 'hover:bg-primary/45' : 'hover:bg-primary',\n 'focus-visible:bg-primary focus-visible:outline-none',\n 'data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full',\n 'data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-3 data-[orientation=vertical]:after:h-6 data-[orientation=vertical]:after:w-full',\n local.class\n )}\n {...rest}\n >\n {local.withHandle === 'rung' ? (\n <div\n data-slot=\"resizable-grip\"\n class=\"z-(--z-docked) h-11 w-1.5 flex-none rounded-full bg-border/55 group-data-[orientation=vertical]/resize:h-1.5 group-data-[orientation=vertical]/resize:w-11\"\n />\n ) : local.withHandle ? (\n <div class=\"bg-border z-(--z-docked) flex h-4 w-2.5 items-center justify-center rounded-sm border border-border\">\n <GripVertical class=\"size-2.5 text-muted-foreground\" />\n </div>\n ) : null}\n </Resizable.Handle>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAMO,oBAAoBJ,oBAAmC,KAAK;AAElE,SAAgBK,oBAAoBC,OAA8D;CAChG,MAAM,CAACE,OAAOC,QAAQR,WAAWK,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAI,gBACGN,kBAAkBO,UAAQ;EACzBC,aAAaH,KAAKI,iBAAiBC,KAAAA,KAAaL,KAAKM,UAAUD,KAAAA;EAAS,IAAAE,WAAA;GAAA,OAAAN,gBAEvEb,WAASoB,WAAA,EAAA,KAAA,WAAA;IAAA,OACDd,GAAG,uDAAuDK,MAAMD,KAAK;GAAC,EAAA,GACzEE,IAAI,CAAA;EAAA;CAAA,CAAA;AAIhB;;;;;;;;;;AAWA,SAASS,cAAcH,OAAkC;CACvD,MAAMI,OAAO,IAAIJ,MAAMK,QAAQC,OAAOC,SAASD,QAAQC,MAAM,CAAC;CAC9D,OAAOH,OAAO,OAAQA,OAAO,KAAKJ,MAAMQ,SAAS;AACnD;AAEA,SAAgBC,eAAelB,OAAoE;CACjG,MAAM,CAACE,OAAOC,QAAQR,WAAWK,OAAO,CAAC,SAAS,aAAa,CAAC;CAChE,MAAMoB,QAAQ7B,UAAUK,WAAWO,KAAKkB,SAAS;CACjD,MAAMC,gBAAgB1B,WAAWE,iBAAiB;CAElD,OAAAM,gBACGb,UAAU4B,OAAKR,WAAA;EAAA,IACdY,cAAW;GAAA,OACTrB,MAAMqB,gBAAgBD,cAAc,IAAId,KAAAA,IAAYI,cAAcQ,MAAMX,MAAM,CAAC;EAAE;EAAA,KAAA,WAAA;GAAA,OAE5EZ,GAAG,mCAAmCK,MAAMD,KAAK;EAAC;CAAA,GACrDE,IAAI,CAAA;AAGd;AAmBA,SAAgByB,gBAAgB5B,OAA6B;CAC3D,MAAM,CAACE,OAAOC,QAAQR,WAAWK,OAAO;EAAC;EAAS;EAAc;CAAO,CAAC;CACxE,MAAMoB,QAAQ7B,UAAUK,WAAWO,KAAKkB,SAAS;CAEjD,OAAAjB,gBACGb,UAAUkC,QAAMd,WAAA;EAAA,KAAA,gBAAA;GAAA,OACHT,MAAMyB,SAAS;EAAe;EAAA,KAAA,sBAAA;GAAA,OAIxBP,MAAMW,YAAY,MAAM,eAAe,aAAa;EAAY;EAAA,KAAA,WAAA;GAAA,OAC3ElC,GACL,kFAIA,6DACA,8BACAK,MAAMwB,eAAe,SAAS,wBAAwB,oBACtD,uDACA,uEACA,2KACAxB,MAAMD,KACR;EAAC;CAAA,GACGE,MAAI,EAAA,IAAAO,WAAA;EAAA,OAEPsB,WAAA9B,MAAMwB,eAAe,MAAM,CAAA,CAAA,IAAAO,OAAA,IAKxBD,WAAA,CAAA,CAAA9B,MAAMwB,UAAU,CAAA,CAAA,WAAA;GAAA,IAAAQ,QAAAC,QAAA;GAAAC,OAAAF,OAAA9B,gBAEfZ,cAAY,EAAA,SAAA,iCAAA,CAAA,CAAA;GAAA,OAAA0C;EAAA,EAAA,CAAA,IAEb;CAAI,EAAA,CAAA,CAAA;AAGd"}

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

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"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"}
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","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 CHANGED Viewed

	@@ -1 +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~~"}
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,kCAiFxC"}

package/dist/components/ui/slider/slider.js CHANGED Viewed

@@ -16,9 +16,12 @@ function Slider$1(props) {
 		"aria-label",
 		"aria-labelledby"
 	]);
-	return createComponent(Slider, mergeProps({ get ["class"]() {
-		return cn("relative flex touch-none flex-col justify-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full", "data-[disabled]:opacity-50", local.class);
-	} }, rest, { get children() {
+	return createComponent(Slider, mergeProps({
+		"data-slot": "slider",
+		get ["class"]() {
+			return cn("relative flex touch-none flex-col justify-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full", "data-[disabled]:opacity-50", local.class);
+		}
+	}, rest, { get children() {
 		return [
 			createComponent(Slider.Track, {
 				get ["class"]() {