@adea-ai/ui 0.72.0 → 0.72.2
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.
- package/dist/components/ui/checkbox/checkbox.d.ts +2 -0
- package/dist/components/ui/checkbox/checkbox.d.ts.map +1 -1
- package/dist/components/ui/checkbox/checkbox.js +52 -13
- package/dist/components/ui/checkbox/checkbox.js.map +1 -1
- package/dist/components/ui/combobox/combobox.d.ts.map +1 -1
- package/dist/components/ui/combobox/combobox.js +10 -6
- package/dist/components/ui/combobox/combobox.js.map +1 -1
- package/dist/components/ui/radio-group/radio-group.d.ts +2 -1
- package/dist/components/ui/radio-group/radio-group.d.ts.map +1 -1
- package/dist/components/ui/radio-group/radio-group.js +46 -13
- package/dist/components/ui/radio-group/radio-group.js.map +1 -1
- package/dist/components/ui/slider/slider.d.ts +5 -1
- package/dist/components/ui/slider/slider.d.ts.map +1 -1
- package/dist/components/ui/slider/slider.js +36 -20
- package/dist/components/ui/slider/slider.js.map +1 -1
- package/dist/components/ui/switch/switch.d.ts +2 -0
- package/dist/components/ui/switch/switch.d.ts.map +1 -1
- package/dist/components/ui/switch/switch.js +51 -12
- package/dist/components/ui/switch/switch.js.map +1 -1
- package/dist/r/src/components/ui/checkbox/checkbox.tsx +34 -9
- package/dist/r/src/components/ui/combobox/combobox.tsx +1 -0
- package/dist/r/src/components/ui/radio-group/radio-group.tsx +22 -5
- package/dist/r/src/components/ui/slider/slider.tsx +43 -15
- package/dist/r/src/components/ui/switch/switch.tsx +34 -9
- package/package.json +1 -1
- package/src/components/ui/checkbox/checkbox.tsx +34 -9
- package/src/components/ui/combobox/combobox.tsx +1 -0
- package/src/components/ui/radio-group/radio-group.tsx +22 -5
- package/src/components/ui/slider/slider.tsx +43 -15
- package/src/components/ui/switch/switch.tsx +34 -9
|
@@ -17,6 +17,8 @@ export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'childr
|
|
|
17
17
|
controlClass?: string;
|
|
18
18
|
labelClass?: string;
|
|
19
19
|
descriptionClass?: string;
|
|
20
|
+
label?: JSX.Element;
|
|
21
|
+
description?: JSX.Element;
|
|
20
22
|
/**
|
|
21
23
|
* Replaces the control and label. Omit it to get the default control beside
|
|
22
24
|
* `label` and `description`; supply it to compose the parts yourself.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAwE5C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,eAGhF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,eAQ5F"}
|
|
@@ -4,7 +4,7 @@ import { Check, Minus } from "lucide-solid";
|
|
|
4
4
|
import { splitProps } from "solid-js";
|
|
5
5
|
import { Checkbox } from "@kobalte/core/checkbox";
|
|
6
6
|
//#region src/components/ui/checkbox/checkbox.tsx
|
|
7
|
-
var _tmpl$ = /*#__PURE__*/ template(`<div class="grid gap-0.5
|
|
7
|
+
var _tmpl$ = /*#__PURE__*/ template(`<div class="grid gap-0.5">`);
|
|
8
8
|
function Checkbox$1(props) {
|
|
9
9
|
const [local, rest] = splitProps(props, [
|
|
10
10
|
"class",
|
|
@@ -12,13 +12,24 @@ function Checkbox$1(props) {
|
|
|
12
12
|
"labelClass",
|
|
13
13
|
"descriptionClass",
|
|
14
14
|
"children",
|
|
15
|
+
"label",
|
|
16
|
+
"description",
|
|
15
17
|
"indeterminate",
|
|
16
18
|
"aria-label",
|
|
17
|
-
"aria-labelledby"
|
|
19
|
+
"aria-labelledby",
|
|
20
|
+
"aria-describedby",
|
|
21
|
+
"aria-invalid",
|
|
22
|
+
"aria-busy",
|
|
23
|
+
"title"
|
|
18
24
|
]);
|
|
19
|
-
return createComponent(Checkbox, mergeProps({
|
|
20
|
-
|
|
21
|
-
|
|
25
|
+
return createComponent(Checkbox, mergeProps({
|
|
26
|
+
get title() {
|
|
27
|
+
return local.title;
|
|
28
|
+
},
|
|
29
|
+
get ["class"]() {
|
|
30
|
+
return cn("group/checkbox flex items-start gap-2.5", local.class);
|
|
31
|
+
}
|
|
32
|
+
}, rest, { get children() {
|
|
22
33
|
return [
|
|
23
34
|
createComponent(Checkbox.Input, {
|
|
24
35
|
get ["aria-label"]() {
|
|
@@ -26,6 +37,18 @@ function Checkbox$1(props) {
|
|
|
26
37
|
},
|
|
27
38
|
get ["aria-labelledby"]() {
|
|
28
39
|
return local["aria-labelledby"];
|
|
40
|
+
},
|
|
41
|
+
get ["aria-describedby"]() {
|
|
42
|
+
return local["aria-describedby"];
|
|
43
|
+
},
|
|
44
|
+
get ["aria-invalid"]() {
|
|
45
|
+
return local["aria-invalid"];
|
|
46
|
+
},
|
|
47
|
+
get ["aria-busy"]() {
|
|
48
|
+
return local["aria-busy"];
|
|
49
|
+
},
|
|
50
|
+
get title() {
|
|
51
|
+
return local.title;
|
|
29
52
|
}
|
|
30
53
|
}),
|
|
31
54
|
createComponent(Checkbox.Control, {
|
|
@@ -41,16 +64,32 @@ function Checkbox$1(props) {
|
|
|
41
64
|
});
|
|
42
65
|
}
|
|
43
66
|
}),
|
|
44
|
-
memo(() => local.children ?? (() => {
|
|
67
|
+
memo(() => local.children ?? (local.label || local.description ? (() => {
|
|
45
68
|
var _el$ = _tmpl$();
|
|
46
|
-
insert(_el$,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
69
|
+
insert(_el$, (() => {
|
|
70
|
+
var _c$ = memo(() => !!local.label);
|
|
71
|
+
return () => _c$() ? createComponent(Checkbox.Label, {
|
|
72
|
+
get ["class"]() {
|
|
73
|
+
return cn("text-sm font-medium", local.labelClass);
|
|
74
|
+
},
|
|
75
|
+
get children() {
|
|
76
|
+
return local.label;
|
|
77
|
+
}
|
|
78
|
+
}) : null;
|
|
79
|
+
})(), null);
|
|
80
|
+
insert(_el$, (() => {
|
|
81
|
+
var _c$2 = memo(() => !!local.description);
|
|
82
|
+
return () => _c$2() ? createComponent(Checkbox.Description, {
|
|
83
|
+
get ["class"]() {
|
|
84
|
+
return cn("text-muted-foreground text-sm", local.descriptionClass);
|
|
85
|
+
},
|
|
86
|
+
get children() {
|
|
87
|
+
return local.description;
|
|
88
|
+
}
|
|
89
|
+
}) : null;
|
|
90
|
+
})(), null);
|
|
52
91
|
return _el$;
|
|
53
|
-
})())
|
|
92
|
+
})() : null))
|
|
54
93
|
];
|
|
55
94
|
} }));
|
|
56
95
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","names":["Checkbox","KobalteCheckbox","Check","Minus","ComponentProps","JSX","splitProps","cn","CheckboxProps","Omit","controlClass","labelClass","descriptionClass","
|
|
1
|
+
{"version":3,"file":"checkbox.js","names":["Checkbox","KobalteCheckbox","Check","Minus","ComponentProps","JSX","splitProps","cn","CheckboxProps","Omit","controlClass","labelClass","descriptionClass","label","Element","description","children","props","local","rest","_$createComponent","_$mergeProps","title","class","Input","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-busy","Control","Indicator","_$memo","indeterminate","_el$","_tmpl$","_$insert","_c$","Label","_c$2","Description","CheckboxLabel","CheckboxDescription","Checkbox","_$createComponent","KobalteCheckbox","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as KobalteCheckbox } from '@kobalte/core/checkbox'\nimport { Check, Minus } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Checkbox.\n *\n * Three states: unchecked, checked, and indeterminate. Indeterminate is what a\n * \"select all\" box shows when only some rows are selected; Kobalte expresses\n * it through `checked=\"indeterminate\"` rather than a second boolean, so there\n * is no way to render a box that is both.\n *\n * The paint is `Control` and the value is a real hidden `Input`, so the control\n * participates in a form submission and in native validation while looking\n * nothing like a browser checkbox. Focus is tracked by the input, which is why\n * the ring lives on the control and reads the input's focus state.\n */\nexport type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {\n controlClass?: string\n labelClass?: string\n descriptionClass?: string\n label?: JSX.Element\n description?: JSX.Element\n /**\n * Replaces the control and label. Omit it to get the default control beside\n * `label` and `description`; supply it to compose the parts yourself.\n */\n children?: JSX.Element\n}\n\nexport function Checkbox(props: CheckboxProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'controlClass',\n 'labelClass',\n 'descriptionClass',\n 'children',\n 'label',\n 'description',\n 'indeterminate',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby',\n 'aria-invalid',\n 'aria-busy',\n 'title',\n ])\n\n return (\n <KobalteCheckbox\n title={local.title}\n class={cn('group/checkbox flex items-start gap-2.5', local.class)}\n {...rest}\n >\n {/*\n * The name goes on the input, which is what carries the value and takes\n * focus. On the Root it would land on a plain div and name nothing — the\n * box would announce its state with no subject.\n */}\n <KobalteCheckbox.Input\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 <KobalteCheckbox.Control\n class={cn(\n 'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-sm 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]:bg-primary data-[checked]:border-primary data-[checked]:text-primary-foreground',\n 'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary-foreground',\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 <KobalteCheckbox.Indicator class=\"flex items-center justify-center\">\n {local.indeterminate ? <Minus class=\"size-3\" /> : <Check class=\"size-3\" />}\n </KobalteCheckbox.Indicator>\n </KobalteCheckbox.Control>\n {local.children ??\n (local.label || local.description ? (\n <div class=\"grid gap-0.5\">\n {local.label ? (\n <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>\n {local.label}\n </KobalteCheckbox.Label>\n ) : null}\n {local.description ? (\n <KobalteCheckbox.Description\n class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n >\n {local.description}\n </KobalteCheckbox.Description>\n ) : null}\n </div>\n ) : null)}\n </KobalteCheckbox>\n )\n}\n\n/**\n * The box's own label. Valid only inside a `<Checkbox>`, for the same reason as\n * `SwitchLabel`: outside its root there is no control to associate with.\n */\nexport function CheckboxLabel(props: ComponentProps<typeof KobalteCheckbox.Label>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteCheckbox.Label class={cn('text-sm font-medium', local.class)} {...rest} />\n}\n\nexport function CheckboxDescription(props: ComponentProps<typeof KobalteCheckbox.Description>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteCheckbox.Description\n class={cn('text-muted-foreground text-sm', local.class)}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;AAgCA,SAAgBA,WAASiB,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGnB,UAAeoB,WAAA;EAAA,IACdC,QAAK;GAAA,OAAEJ,MAAMI;EAAK;EAAA,KAAA,WAAA;GAAA,OACXf,GAAG,2CAA2CW,MAAMK,KAAK;EAAC;CAAA,GAC7DJ,MAAI,EAAA,IAAAH,WAAA;EAAA,OAAA;GAAAI,gBAOPnB,SAAgBuB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACRN,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,IAC7BI,QAAK;KAAA,OAAEJ,MAAMI;IAAK;GAAA,CAAA;GAAAF,gBAEnBnB,SAAgB6B,SAAO;IAAA,KAAA,WAAA;KAAA,OACfvB,GACL,kGACA,qFACA,oFACA,kGACA,oHACA,kGACA,iEACAW,MAAMR,YACR;IAAC;IAAA,IAAAM,WAAA;KAAA,OAAAI,gBAEAnB,SAAgB8B,WAAS;MAAA,SAAA;MAAA,IAAAf,WAAA;OAAA,OACvBgB,WAAA,CAAA,CAAAd,MAAMe,aAAa,CAAA,CAAA,IAAAb,gBAAIjB,OAAK,EAAA,SAAA,SAAA,CAAA,IAAAiB,gBAAsBlB,OAAK,EAAA,SAAA,SAAA,CAAA;MAAkB;KAAA,CAAA;IAAA;GAAA,CAAA;GAAA8B,WAG7Ed,MAAMF,aACJE,MAAML,SAASK,MAAMH,qBAAW;IAAA,IAAAmB,OAAAC,OAAA;IAAAC,OAAAF,aAAA;KAAA,IAAAG,MAAAL,WAAA,CAAA,CAE5Bd,MAAML,KAAK;KAAA,aAAXwB,IAAA,IAAAjB,gBACEnB,SAAgBqC,OAAK;MAAA,KAAA,WAAA;OAAA,OAAQ/B,GAAG,uBAAuBW,MAAMP,UAAU;MAAC;MAAA,IAAAK,WAAA;OAAA,OACtEE,MAAML;MAAK;KAAA,CAAA,IAEZ;IAAI,EAAA,CAAA,GAAA,IAAA;IAAAuB,OAAAF,aAAA;KAAA,IAAAK,OAAAP,WAAA,CAAA,CACPd,MAAMH,WAAW;KAAA,aAAjBwB,KAAA,IAAAnB,gBACEnB,SAAgBuC,aAAW;MAAA,KAAA,WAAA;OAAA,OACnBjC,GAAG,iCAAiCW,MAAMN,gBAAgB;MAAC;MAAA,IAAAI,WAAA;OAAA,OAEjEE,MAAMH;MAAW;KAAA,CAAA,IAElB;IAAI,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAmB;GAAA,EAAA,CAAA,IAER,KAAK;EAAA;CAAA,EAAA,CAAA,CAAA;AAGjB;;;;;AAMA,SAAgBO,cAAcxB,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQnB,SAAgBqC,OAAKjB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQd,GAAG,uBAAuBW,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AACvF;AAEA,SAAgBuB,oBAAoBzB,OAA2D;CAC7F,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGnB,SAAgBuC,aAAWnB,WAAA,EAAA,KAAA,WAAA;EAAA,OACnBd,GAAG,iCAAiCW,MAAMK,KAAK;CAAC,EAAA,GACnDJ,IAAI,CAAA;AAGd"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC/C,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAGhE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAgBpF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAahF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAoBpF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC/C,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAGhE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAgBpF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAahF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAoBpF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAsBpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,kCAW9E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAGpF;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,kCAkB3E"}
|
|
@@ -50,12 +50,16 @@ function ComboboxContent(props) {
|
|
|
50
50
|
return createComponent(Combobox.Content, mergeProps({ get ["class"]() {
|
|
51
51
|
return cn("bg-popover text-popover-foreground rounded-xl border border-border shadow-lg", "z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden", "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-expanded:duration-150 data-closed:duration-100", local.class);
|
|
52
52
|
} }, rest, { get children() {
|
|
53
|
-
return [
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
return [
|
|
54
|
+
createComponent(Combobox.Listbox, { get ["class"]() {
|
|
55
|
+
return cn("max-h-72 overflow-y-auto", "p-1");
|
|
56
|
+
} }),
|
|
57
|
+
memo(() => local.children),
|
|
58
|
+
createComponent(Combobox.Arrow, {
|
|
59
|
+
"aria-hidden": "true",
|
|
60
|
+
"class": popoverArrow
|
|
61
|
+
})
|
|
62
|
+
];
|
|
59
63
|
} }));
|
|
60
64
|
} });
|
|
61
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","names":["Combobox","KobalteCombobox","Check","ChevronDown","X","ComponentProps","Show","splitProps","menuContentPadding","menuItem","popoverArrow","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","ComboboxTrigger","Trigger","children","_$memo","Icon","ComboboxContent","Content","Portal","Listbox","Arrow","ComboboxItem","Item","ItemLabel","ItemIndicator","ComboboxSection","Section","ComboboxClear","onClear","when","_el$","_tmpl$","$$click","_$insert","_$effect","_$className","_$delegateEvents","Combobox","_$createComponent","KobalteCombobox","_$mergeProps","_$memo","_$className","_$delegateEvents"],"sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'\nimport { Check, ChevronDown, X } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Combobox.\n *\n * A Select whose list is filterable by typing. The difference from Select is\n * not cosmetic: a Combobox has a text input, so the user can narrow forty\n * options to one without reading the list. Above roughly ten options the\n * search is the feature; below it, a Select is quieter and a RadioGroup is\n * better still.\n *\n * Kobalte supplies the filtering, the `aria-activedescendant` wiring, the\n * keyboard selection and the multiple-selection mode, which is the part a\n * hand-rolled version reliably gets wrong.\n */\nexport function Combobox<Option, OptGroup = never>(\n props: ComponentProps<typeof KobalteCombobox<Option, OptGroup>>\n) {\n return <KobalteCombobox {...props} />\n}\n\nexport function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Control>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteCombobox.Control\n class={cn(\n 'border-input bg-transparent flex h-control-md w-full items-center gap-1.5 rounded-md border px-control-sm',\n 'transition-[color,box-shadow,border-color] ease-out',\n 'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\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.class\n )}\n {...rest}\n />\n )\n}\n\nexport function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteCombobox.Input\n class={cn(\n 'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n 'disabled:cursor-not-allowed',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function ComboboxTrigger(props: ComponentProps<typeof KobalteCombobox.Trigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteCombobox.Trigger\n class={cn(\n 'text-muted-foreground flex shrink-0 items-center justify-center rounded-sm outline-none',\n 'transition-colors ease-out hover:text-foreground',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'disabled:pointer-events-none disabled:opacity-50',\n local.class\n )}\n {...rest}\n >\n {local.children}\n <KobalteCombobox.Icon>\n <ChevronDown class=\"size-4\" />\n </KobalteCombobox.Icon>\n </KobalteCombobox.Trigger>\n )\n}\n\nexport function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Content>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteCombobox.Portal>\n <KobalteCombobox.Content\n class={cn(\n 'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n 'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',\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 <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />\n <KobalteCombobox.Arrow aria-hidden=\"true\" class={popoverArrow} />\n </KobalteCombobox.Content>\n </KobalteCombobox.Portal>\n )\n}\n\nexport function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>\n <KobalteCombobox.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Check class=\"size-4\" />\n </KobalteCombobox.ItemIndicator>\n </KobalteCombobox.Item>\n )\n}\n\nexport function ComboboxSection(props: ComponentProps<typeof KobalteCombobox.Section>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteCombobox.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\n/** The clear affordance for a single-select Combobox with a value. */\nexport function ComboboxClear(props: { class?: string; onClear: () => void }) {\n return (\n <Show when={props.onClear}>\n <button\n type=\"button\"\n aria-label=\"Clear selection\"\n onClick={() => props.onClear()}\n class={cn(\n 'text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded-sm',\n 'transition-colors ease-out outline-none hover:text-foreground',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n props.class\n )}\n >\n <X class=\"size-3.5\" />\n </button>\n </Show>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgBA,WACdY,OACA;CACA,OAAAG,gBAAQd,UAAoBW,KAAK;AACnC;AAEA,SAAgBI,gBAAgBJ,OAAuD;CACrF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAG,gBACGd,SAAgBgB,SAAOG,WAAA,EAAA,KAAA,WAAA;EAAA,OACfT,GACL,6GACA,uDACA,iFACA,kGACA,iEACAO,MAAMG,KACR;CAAC,EAAA,GACGF,IAAI,CAAA;AAGd;AAEA,SAAgBG,cAAcV,OAAqD;CACjF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAG,gBACGd,SAAgBsB,OAAKH,WAAA,EAAA,KAAA,WAAA;EAAA,OACbT,GACL,uFACA,+BACAO,MAAMG,KACR;CAAC,EAAA,GACGF,IAAI,CAAA;AAGd;AAEA,SAAgBK,gBAAgBZ,OAAuD;CACrF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGd,SAAgBwB,SAAOL,WAAA,EAAA,KAAA,WAAA;EAAA,OACfT,GACL,2FACA,oDACA,oFACA,oDACAO,MAAMG,KACR;CAAC,EAAA,GACGF,MAAI,EAAA,IAAAO,WAAA;EAAA,OAAA,CAAAC,WAEPT,MAAMQ,QAAQ,GAAAX,gBACdd,SAAgB2B,MAAI,EAAA,IAAAF,WAAA;GAAA,OAAAX,gBAClBZ,aAAW,EAAA,SAAA,SAAA,CAAA;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAIpB;AAEA,SAAgB0B,gBAAgBjB,OAAuD;CACrF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGd,SAAgB8B,QAAM,EAAA,IAAAL,WAAA;EAAA,OAAAX,gBACpBd,SAAgB6B,SAAOV,WAAA,EAAA,KAAA,WAAA;GAAA,OACfT,GACL,gFACA,0HACA,6EACA,0EACA,uDACAO,MAAMG,KACR;EAAC,EAAA,GACGF,MAAI,EAAA,IAAAO,WAAA;GAAA,OAAA,
|
|
1
|
+
{"version":3,"file":"combobox.js","names":["Combobox","KobalteCombobox","Check","ChevronDown","X","ComponentProps","Show","splitProps","menuContentPadding","menuItem","popoverArrow","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","ComboboxTrigger","Trigger","children","_$memo","Icon","ComboboxContent","Content","Portal","Listbox","Arrow","ComboboxItem","Item","ItemLabel","ItemIndicator","ComboboxSection","Section","ComboboxClear","onClear","when","_el$","_tmpl$","$$click","_$insert","_$effect","_$className","_$delegateEvents","Combobox","_$createComponent","KobalteCombobox","_$mergeProps","_$memo","_$className","_$delegateEvents"],"sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'\nimport { Check, ChevronDown, X } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Combobox.\n *\n * A Select whose list is filterable by typing. The difference from Select is\n * not cosmetic: a Combobox has a text input, so the user can narrow forty\n * options to one without reading the list. Above roughly ten options the\n * search is the feature; below it, a Select is quieter and a RadioGroup is\n * better still.\n *\n * Kobalte supplies the filtering, the `aria-activedescendant` wiring, the\n * keyboard selection and the multiple-selection mode, which is the part a\n * hand-rolled version reliably gets wrong.\n */\nexport function Combobox<Option, OptGroup = never>(\n props: ComponentProps<typeof KobalteCombobox<Option, OptGroup>>\n) {\n return <KobalteCombobox {...props} />\n}\n\nexport function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Control>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteCombobox.Control\n class={cn(\n 'border-input bg-transparent flex h-control-md w-full items-center gap-1.5 rounded-md border px-control-sm',\n 'transition-[color,box-shadow,border-color] ease-out',\n 'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\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.class\n )}\n {...rest}\n />\n )\n}\n\nexport function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteCombobox.Input\n class={cn(\n 'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n 'disabled:cursor-not-allowed',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function ComboboxTrigger(props: ComponentProps<typeof KobalteCombobox.Trigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteCombobox.Trigger\n class={cn(\n 'text-muted-foreground flex shrink-0 items-center justify-center rounded-sm outline-none',\n 'transition-colors ease-out hover:text-foreground',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'disabled:pointer-events-none disabled:opacity-50',\n local.class\n )}\n {...rest}\n >\n {local.children}\n <KobalteCombobox.Icon>\n <ChevronDown class=\"size-4\" />\n </KobalteCombobox.Icon>\n </KobalteCombobox.Trigger>\n )\n}\n\nexport function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Content>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteCombobox.Portal>\n <KobalteCombobox.Content\n class={cn(\n 'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n 'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',\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 <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />\n {local.children}\n <KobalteCombobox.Arrow aria-hidden=\"true\" class={popoverArrow} />\n </KobalteCombobox.Content>\n </KobalteCombobox.Portal>\n )\n}\n\nexport function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>\n <KobalteCombobox.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Check class=\"size-4\" />\n </KobalteCombobox.ItemIndicator>\n </KobalteCombobox.Item>\n )\n}\n\nexport function ComboboxSection(props: ComponentProps<typeof KobalteCombobox.Section>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteCombobox.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\n/** The clear affordance for a single-select Combobox with a value. */\nexport function ComboboxClear(props: { class?: string; onClear: () => void }) {\n return (\n <Show when={props.onClear}>\n <button\n type=\"button\"\n aria-label=\"Clear selection\"\n onClick={() => props.onClear()}\n class={cn(\n 'text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded-sm',\n 'transition-colors ease-out outline-none hover:text-foreground',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n props.class\n )}\n >\n <X class=\"size-3.5\" />\n </button>\n </Show>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgBA,WACdY,OACA;CACA,OAAAG,gBAAQd,UAAoBW,KAAK;AACnC;AAEA,SAAgBI,gBAAgBJ,OAAuD;CACrF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAG,gBACGd,SAAgBgB,SAAOG,WAAA,EAAA,KAAA,WAAA;EAAA,OACfT,GACL,6GACA,uDACA,iFACA,kGACA,iEACAO,MAAMG,KACR;CAAC,EAAA,GACGF,IAAI,CAAA;AAGd;AAEA,SAAgBG,cAAcV,OAAqD;CACjF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAG,gBACGd,SAAgBsB,OAAKH,WAAA,EAAA,KAAA,WAAA;EAAA,OACbT,GACL,uFACA,+BACAO,MAAMG,KACR;CAAC,EAAA,GACGF,IAAI,CAAA;AAGd;AAEA,SAAgBK,gBAAgBZ,OAAuD;CACrF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGd,SAAgBwB,SAAOL,WAAA,EAAA,KAAA,WAAA;EAAA,OACfT,GACL,2FACA,oDACA,oFACA,oDACAO,MAAMG,KACR;CAAC,EAAA,GACGF,MAAI,EAAA,IAAAO,WAAA;EAAA,OAAA,CAAAC,WAEPT,MAAMQ,QAAQ,GAAAX,gBACdd,SAAgB2B,MAAI,EAAA,IAAAF,WAAA;GAAA,OAAAX,gBAClBZ,aAAW,EAAA,SAAA,SAAA,CAAA;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAIpB;AAEA,SAAgB0B,gBAAgBjB,OAAuD;CACrF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGd,SAAgB8B,QAAM,EAAA,IAAAL,WAAA;EAAA,OAAAX,gBACpBd,SAAgB6B,SAAOV,WAAA,EAAA,KAAA,WAAA;GAAA,OACfT,GACL,gFACA,0HACA,6EACA,0EACA,uDACAO,MAAMG,KACR;EAAC,EAAA,GACGF,MAAI,EAAA,IAAAO,WAAA;GAAA,OAAA;IAAAX,gBAEPd,SAAgB+B,SAAO,EAAA,KAAA,WAAA;KAAA,OAAQrB,GAAG,4BAAA,KAA8C;IAAC,EAAA,CAAA;IAAAgB,WACjFT,MAAMQ,QAAQ;IAAAX,gBACdd,SAAgBgC,OAAK;KAAA,eAAA;KAAA,SAA2BvB;IAAY,CAAA;GAAA;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA;AAIrE;AAEA,SAAgBwB,aAAatB,OAAoD;CAC/E,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGd,SAAgBkC,MAAIf,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQT,GAAGF,UAAU,QAAQS,MAAMG,KAAK;CAAC,EAAA,GAAMF,MAAI,EAAA,IAAAO,WAAA;EAAA,OAAA,CAAAX,gBACrEd,SAAgBmC,WAAS,EAAA,IAAAV,WAAA;GAAA,OAAER,MAAMQ;EAAQ,EAAA,CAAA,GAAAX,gBACzCd,SAAgBoC,eAAa;GAAA,SAAA;GAAA,IAAAX,WAAA;IAAA,OAAAX,gBAC3Bb,OAAK,EAAA,SAAA,SAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAId;AAEA,SAAgBoC,gBAAgB1B,OAAuD;CACrF,MAAM,CAACM,OAAOC,QAAQZ,WAAWK,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQd,SAAgBsC,SAAOnB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQT,GAAG,iBAAiBO,MAAMG,KAAK;CAAC,EAAA,GAAMF,IAAI,CAAA;AACnF;;AAGA,SAAgBqB,cAAc5B,OAAgD;CAC5E,OAAAG,gBACGT,MAAI;EAAA,IAACoC,OAAI;GAAA,OAAE9B,MAAM6B;EAAO;EAAA,IAAAf,WAAA;GAAA,IAAAiB,OAAAC,OAAA;GAAAD,KAAAE,gBAINjC,MAAM6B,QAAQ;GAACK,OAAAH,MAAA5B,gBAQ7BX,GAAC,EAAA,SAAA,WAAA,CAAA,CAAA;GAAA2C,aAAAC,UAAAL,MAPKhC,GACL,qFACA,iEACA,oFACAC,MAAMS,KACR,CAAC,CAAA;GAAA,OAAAsB;EAAA;CAAA,CAAA;AAMT;AAACM,eAAA,CAAA,OAAA,CAAA"}
|
|
@@ -17,7 +17,8 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
|
|
|
17
17
|
controlClass?: string;
|
|
18
18
|
/**
|
|
19
19
|
* The option's visible label. A radio with no accessible name is unreachable
|
|
20
|
-
* by a screen reader and by voice control, so supply this
|
|
20
|
+
* by a screen reader and by voice control, so supply this, a labelled child,
|
|
21
|
+
* `aria-label`, or `aria-labelledby`.
|
|
21
22
|
*/
|
|
22
23
|
label?: string;
|
|
23
24
|
description?: string;
|
|
@@ -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;AAI9C;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,kCAGzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB
|
|
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;AAI9C;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,kCAGzE;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"}
|
|
@@ -29,13 +29,43 @@ function RadioGroupItem(props) {
|
|
|
29
29
|
"controlClass",
|
|
30
30
|
"label",
|
|
31
31
|
"description",
|
|
32
|
-
"children"
|
|
32
|
+
"children",
|
|
33
|
+
"aria-label",
|
|
34
|
+
"aria-labelledby",
|
|
35
|
+
"aria-describedby",
|
|
36
|
+
"aria-invalid",
|
|
37
|
+
"aria-busy",
|
|
38
|
+
"title"
|
|
33
39
|
]);
|
|
34
|
-
return createComponent(RadioGroup.Item, mergeProps({
|
|
35
|
-
|
|
36
|
-
|
|
40
|
+
return createComponent(RadioGroup.Item, mergeProps({
|
|
41
|
+
get title() {
|
|
42
|
+
return local.title;
|
|
43
|
+
},
|
|
44
|
+
get ["class"]() {
|
|
45
|
+
return cn("group/radio flex items-start gap-2.5", local.class);
|
|
46
|
+
}
|
|
47
|
+
}, rest, { get children() {
|
|
37
48
|
return [
|
|
38
|
-
createComponent(RadioGroup.ItemInput, {
|
|
49
|
+
createComponent(RadioGroup.ItemInput, {
|
|
50
|
+
get ["aria-label"]() {
|
|
51
|
+
return local["aria-label"];
|
|
52
|
+
},
|
|
53
|
+
get ["aria-labelledby"]() {
|
|
54
|
+
return local["aria-labelledby"];
|
|
55
|
+
},
|
|
56
|
+
get ["aria-describedby"]() {
|
|
57
|
+
return local["aria-describedby"];
|
|
58
|
+
},
|
|
59
|
+
get ["aria-invalid"]() {
|
|
60
|
+
return local["aria-invalid"];
|
|
61
|
+
},
|
|
62
|
+
get ["aria-busy"]() {
|
|
63
|
+
return local["aria-busy"];
|
|
64
|
+
},
|
|
65
|
+
get title() {
|
|
66
|
+
return local.title;
|
|
67
|
+
}
|
|
68
|
+
}),
|
|
39
69
|
createComponent(RadioGroup.ItemControl, {
|
|
40
70
|
get ["class"]() {
|
|
41
71
|
return cn("border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border", "transition-[color,box-shadow,border-color,background-color] ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "data-[checked]:border-primary data-[checked]:text-primary", "data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", local.controlClass);
|
|
@@ -51,15 +81,18 @@ function RadioGroupItem(props) {
|
|
|
51
81
|
}),
|
|
52
82
|
memo(() => local.children ?? (() => {
|
|
53
83
|
var _el$ = _tmpl$();
|
|
54
|
-
insert(_el$, createComponent(RadioGroup.ItemLabel, {
|
|
55
|
-
"class": "text-sm font-medium",
|
|
56
|
-
get children() {
|
|
57
|
-
return local.label;
|
|
58
|
-
}
|
|
59
|
-
}), null);
|
|
60
84
|
insert(_el$, (() => {
|
|
61
|
-
var _c$ = memo(() => !!local.
|
|
62
|
-
return () => _c$() ? createComponent(RadioGroup.
|
|
85
|
+
var _c$ = memo(() => !!local.label);
|
|
86
|
+
return () => _c$() ? createComponent(RadioGroup.ItemLabel, {
|
|
87
|
+
"class": "text-sm font-medium",
|
|
88
|
+
get children() {
|
|
89
|
+
return local.label;
|
|
90
|
+
}
|
|
91
|
+
}) : null;
|
|
92
|
+
})(), null);
|
|
93
|
+
insert(_el$, (() => {
|
|
94
|
+
var _c$2 = memo(() => !!local.description);
|
|
95
|
+
return () => _c$2() ? createComponent(RadioGroup.ItemDescription, {
|
|
63
96
|
"class": "text-muted-foreground text-sm",
|
|
64
97
|
get children() {
|
|
65
98
|
return local.description;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","RadioGroupItemProps","Item","controlClass","label","description","RadioGroupItem","children","ItemInput","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","ItemLabel","_c$","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 { 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, ['class'])\n return <KobalteRadioGroup class={cn('grid gap-2', local.class)} {...rest} />\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
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","RadioGroupItemProps","Item","controlClass","label","description","RadioGroupItem","title","children","ItemInput","aria-label","aria-labelledby","aria-describedby","aria-invalid","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 { 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, ['class'])\n return <KobalteRadioGroup class={cn('grid gap-2', local.class)} {...rest} />\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":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgBA,aAAWM,OAAiD;CAC1E,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQR,YAAiBS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,cAAcE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAC1E;AAaA,SAAgBS,eAAeX,OAA4B;CACzD,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGR,WAAkBY,MAAIH,WAAA;EAAA,IACrBQ,QAAK;GAAA,OAAEX,MAAMW;EAAK;EAAA,KAAA,WAAA;GAAA,OACXb,GAAG,wCAAwCE,MAAMI,KAAK;EAAC;CAAA,GAC1DH,MAAI,EAAA,IAAAW,WAAA;EAAA,OAAA;GAAAV,gBAEPR,WAAkBmB,WAAS;IAAA,KAAA,gBAAA;KAAA,OACdb,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,IAC7BW,QAAK;KAAA,OAAEX,MAAMW;IAAK;GAAA,CAAA;GAAAT,gBAEnBR,WAAkByB,aAAW;IAAA,KAAA,WAAA;KAAA,OACrBrB,GACL,oGACA,qFACA,oFACA,6DACA,kGACA,iEACAE,MAAMO,YACR;IAAC;IAAA,IAAAK,WAAA;KAAA,OAAAV,gBAEAR,WAAkB0B,eAAa;MAAA,SAAA;MAAA,IAAAR,WAAA;OAAA,OAAAV,gBAC7BP,QAAM,EAAA,SAAA,sBAAA,CAAA;MAAA;KAAA,CAAA;IAAA;GAAA,CAAA;GAAA0B,WAGVrB,MAAMY,mBAAQ;IAAA,IAAAU,OAAAC,OAAA;IAAAC,OAAAF,aAAA;KAAA,IAAAG,MAAAJ,WAAA,CAAA,CAEVrB,MAAMQ,KAAK;KAAA,aAAXiB,IAAA,IAAAvB,gBACER,WAAkBgC,WAAS;MAAA,SAAA;MAAA,IAAAd,WAAA;OAAA,OACzBZ,MAAMQ;MAAK;KAAA,CAAA,IAEZ;IAAI,EAAA,CAAA,GAAA,IAAA;IAAAgB,OAAAF,aAAA;KAAA,IAAAK,OAAAN,WAAA,CAAA,CACPrB,MAAMS,WAAW;KAAA,aAAjBkB,KAAA,IAAAzB,gBACER,WAAkBkC,iBAAe;MAAA,SAAA;MAAA,IAAAhB,WAAA;OAAA,OAC/BZ,MAAMS;MAAW;KAAA,CAAA,IAElB;IAAI,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAa;GAAA,EAAA,CAAA,CAEX;EAAA;CAAA,EAAA,CAAA,CAAA;AAGP"}
|
|
@@ -9,9 +9,13 @@ import type { ComponentProps } from 'solid-js';
|
|
|
9
9
|
* nobody can set exactly.
|
|
10
10
|
*
|
|
11
11
|
* Kobalte handles pointer capture, keyboard stepping and the ARIA value
|
|
12
|
-
* wiring; this paints the track, fill and thumb.
|
|
12
|
+
* wiring; this paints the track, fill and one thumb per value. Each thumb
|
|
13
|
+
* contains a form-native input, hidden from accessibility because the visible
|
|
14
|
+
* thumb already exposes the slider role.
|
|
13
15
|
*/
|
|
14
16
|
export type SliderProps = ComponentProps<typeof KobalteSlider> & {
|
|
17
|
+
/** Accessible names for individual thumbs, in value order (for example minimum and maximum). */
|
|
18
|
+
thumbLabels?: readonly string[];
|
|
15
19
|
trackClass?: string;
|
|
16
20
|
rangeClass?: string;
|
|
17
21
|
thumbClass?: string;
|
|
@@ -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
|
|
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,14 +1,16 @@
|
|
|
1
1
|
import { cn } from "../../../lib/utils.js";
|
|
2
2
|
import { createComponent, memo, mergeProps } from "solid-js/web";
|
|
3
|
-
import { Show, splitProps } from "solid-js";
|
|
3
|
+
import { For, Show, createRenderEffect, createUniqueId, splitProps } from "solid-js";
|
|
4
4
|
import { Slider } from "@kobalte/core/slider";
|
|
5
5
|
//#region src/components/ui/slider/slider.tsx
|
|
6
6
|
function Slider$1(props) {
|
|
7
|
+
const inputId = createUniqueId();
|
|
7
8
|
const [local, rest] = splitProps(props, [
|
|
8
9
|
"class",
|
|
9
10
|
"trackClass",
|
|
10
11
|
"rangeClass",
|
|
11
12
|
"thumbClass",
|
|
13
|
+
"thumbLabels",
|
|
12
14
|
"valueLabel",
|
|
13
15
|
"children",
|
|
14
16
|
"aria-label",
|
|
@@ -29,26 +31,40 @@ function Slider$1(props) {
|
|
|
29
31
|
}
|
|
30
32
|
}),
|
|
31
33
|
memo(() => local.children),
|
|
32
|
-
createComponent(
|
|
33
|
-
get
|
|
34
|
-
return
|
|
34
|
+
createComponent(For, {
|
|
35
|
+
get each() {
|
|
36
|
+
return Array.from({ length: (props.value ?? props.defaultValue ?? [0]).length }, (_, index) => index);
|
|
35
37
|
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
38
|
+
children: (index) => createComponent(Slider.Thumb, {
|
|
39
|
+
get ["aria-label"]() {
|
|
40
|
+
return local.thumbLabels?.[index] ?? local["aria-label"];
|
|
41
|
+
},
|
|
42
|
+
get ["aria-labelledby"]() {
|
|
43
|
+
return memo(() => !!local.thumbLabels?.[index])() ? void 0 : local["aria-labelledby"];
|
|
44
|
+
},
|
|
45
|
+
get ["class"]() {
|
|
46
|
+
return cn("border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs", "transition-[color,box-shadow] ease-out outline-none", "hover:ring-4 hover:ring-primary-subtle", "focus-visible:ring-4 focus-visible:ring-primary-subtle", local.thumbClass);
|
|
47
|
+
},
|
|
48
|
+
get children() {
|
|
49
|
+
return [createComponent(Slider.Input, {
|
|
50
|
+
id: `slider-${inputId}-${index}`,
|
|
51
|
+
ref: (input) => {
|
|
52
|
+
createRenderEffect(() => {
|
|
53
|
+
input.defaultValue = String(props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0);
|
|
54
|
+
});
|
|
55
|
+
},
|
|
56
|
+
hidden: true,
|
|
57
|
+
"aria-hidden": "true"
|
|
58
|
+
}), createComponent(Show, {
|
|
59
|
+
get when() {
|
|
60
|
+
return local.valueLabel;
|
|
61
|
+
},
|
|
62
|
+
get children() {
|
|
63
|
+
return createComponent(Slider.ValueLabel, { "class": "bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" });
|
|
64
|
+
}
|
|
65
|
+
})];
|
|
66
|
+
}
|
|
67
|
+
})
|
|
52
68
|
})
|
|
53
69
|
];
|
|
54
70
|
} }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","names":["Slider","KobalteSlider","ComponentProps","Show","splitProps","cn","SliderProps","trackClass","rangeClass","thumbClass","valueLabel","props","local","rest","_$createComponent","_$mergeProps","class","children","Track","Fill","_$memo","Thumb","aria-label","aria-labelledby","when","ValueLabel","Slider","_$createComponent","KobalteSlider","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as KobalteSlider } from '@kobalte/core/slider'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Slider.\n *\n * For a value on a continuum where position matters more than precision — a\n * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so\n * the value is both adjustable *and* readable; a bare slider is a control\n * nobody can set exactly.\n *\n * Kobalte handles pointer capture, keyboard stepping and the ARIA value\n * wiring; this paints the track, fill and thumb.\n */\nexport type SliderProps = ComponentProps<typeof KobalteSlider> & {\n trackClass?: string\n rangeClass?: string\n thumbClass?: string\n /** Show the current value beside the thumb while dragging. */\n valueLabel?: boolean\n}\n\nexport function Slider(props: SliderProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'trackClass',\n 'rangeClass',\n 'thumbClass',\n 'valueLabel',\n 'children',\n 'aria-label',\n 'aria-labelledby',\n ])\n\n return (\n <KobalteSlider\n class={cn(\n 'relative flex touch-none flex-col justify-center select-none',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',\n 'data-[disabled]:opacity-50',\n local.class\n )}\n {...rest}\n >\n <KobalteSlider.Track\n class={cn(\n 'bg-input relative grow overflow-hidden rounded-full',\n 'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n local.trackClass\n )}\n >\n <KobalteSlider.Fill\n class={cn(\n 'bg-primary absolute rounded-full',\n 'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',\n local.rangeClass\n )}\n />\n </KobalteSlider.Track>\n {local.children}\n <KobalteSlider.Thumb\n
|
|
1
|
+
{"version":3,"file":"slider.js","names":["Slider","KobalteSlider","ComponentProps","For","Show","createUniqueId","createRenderEffect","splitProps","cn","SliderProps","thumbLabels","trackClass","rangeClass","thumbClass","valueLabel","props","inputId","local","rest","_$createComponent","_$mergeProps","class","children","Track","Fill","_$memo","each","Array","from","length","value","defaultValue","_","index","Thumb","aria-label","aria-labelledby","undefined","Input","id","ref","input","String","minValue","hidden","when","ValueLabel","Slider","_$createComponent","KobalteSlider","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as KobalteSlider } from '@kobalte/core/slider'\nimport type { ComponentProps } from 'solid-js'\nimport { For, Show, createUniqueId, createRenderEffect, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Slider.\n *\n * For a value on a continuum where position matters more than precision — a\n * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so\n * the value is both adjustable *and* readable; a bare slider is a control\n * nobody can set exactly.\n *\n * Kobalte handles pointer capture, keyboard stepping and the ARIA value\n * wiring; this paints the track, fill and one thumb per value. Each thumb\n * contains a form-native input, hidden from accessibility because the visible\n * thumb already exposes the slider role.\n */\nexport type SliderProps = ComponentProps<typeof KobalteSlider> & {\n /** Accessible names for individual thumbs, in value order (for example minimum and maximum). */\n thumbLabels?: readonly string[]\n trackClass?: string\n rangeClass?: string\n thumbClass?: string\n /** Show the current value beside the thumb while dragging. */\n valueLabel?: boolean\n}\n\nexport function Slider(props: SliderProps) {\n const inputId = createUniqueId()\n const [local, rest] = splitProps(props, [\n 'class',\n 'trackClass',\n 'rangeClass',\n 'thumbClass',\n 'thumbLabels',\n 'valueLabel',\n 'children',\n 'aria-label',\n 'aria-labelledby',\n ])\n\n return (\n <KobalteSlider\n class={cn(\n 'relative flex touch-none flex-col justify-center select-none',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',\n 'data-[disabled]:opacity-50',\n local.class\n )}\n {...rest}\n >\n <KobalteSlider.Track\n class={cn(\n 'bg-input relative grow overflow-hidden rounded-full',\n 'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n local.trackClass\n )}\n >\n <KobalteSlider.Fill\n class={cn(\n 'bg-primary absolute rounded-full',\n 'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',\n local.rangeClass\n )}\n />\n </KobalteSlider.Track>\n {local.children}\n <For\n each={Array.from(\n { length: (props.value ?? props.defaultValue ?? [0]).length },\n (_, index) => index\n )}\n >\n {(index) => (\n <KobalteSlider.Thumb\n aria-label={local.thumbLabels?.[index] ?? local['aria-label']}\n aria-labelledby={local.thumbLabels?.[index] ? undefined : local['aria-labelledby']}\n class={cn(\n 'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',\n 'transition-[color,box-shadow] ease-out outline-none',\n 'hover:ring-4 hover:ring-primary-subtle',\n 'focus-visible:ring-4 focus-visible:ring-primary-subtle',\n local.thumbClass\n )}\n >\n {/* Native reset uses the value property’s default, not an HTML defaultValue attribute. */}\n <KobalteSlider.Input\n id={`slider-${inputId}-${index}`}\n ref={(input) => {\n createRenderEffect(() => {\n input.defaultValue = String(\n props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0\n )\n })\n }}\n hidden\n aria-hidden=\"true\"\n />\n <Show when={local.valueLabel}>\n <KobalteSlider.ValueLabel class=\"bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums\" />\n </Show>\n </KobalteSlider.Thumb>\n )}\n </For>\n </KobalteSlider>\n )\n}\n"],"mappings":";;;;;AA4BA,SAAgBA,SAAOe,OAAoB;CACzC,MAAMC,UAAUX,eAAe;CAC/B,MAAM,CAACY,OAAOC,QAAQX,WAAWQ,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAI,gBACGlB,QAAamB,WAAA,EAAA,KAAA,WAAA;EAAA,OACLZ,GACL,gEACA,2GACA,8BACAS,MAAMI,KACR;CAAC,EAAA,GACGH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA;GAAAH,gBAEPlB,OAAcsB,OAAK;IAAA,KAAA,WAAA;KAAA,OACXf,GACL,uDACA,4EACA,wEACAS,MAAMN,UACR;IAAC;IAAA,IAAAW,WAAA;KAAA,OAAAH,gBAEAlB,OAAcuB,MAAI,EAAA,KAAA,WAAA;MAAA,OACVhB,GACL,oCACA,2EACAS,MAAML,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAa,WAGJR,MAAMK,QAAQ;GAAAH,gBACdhB,KAAG;IAAA,IACFuB,OAAI;KAAA,OAAEC,MAAMC,KACV,EAAEC,SAASd,MAAMe,SAASf,MAAMgB,gBAAgB,CAAC,CAAC,EAAA,CAAGF,OAAO,IAC3DG,GAAGC,UAAUA,KAChB;IAAC;IAAAX,WAECW,UAAKd,gBACJlB,OAAciC,OAAK;KAAA,KAAA,gBAAA;MAAA,OACNjB,MAAMP,cAAcuB,UAAUhB,MAAM;KAAa;KAAA,KAAA,qBAAA;MAAA,OAC5CQ,WAAA,CAAA,CAAAR,MAAMP,cAAcuB,MAAM,CAAA,CAAA,IAAGI,KAAAA,IAAYpB,MAAM;KAAkB;KAAA,KAAA,WAAA;MAAA,OAC3ET,GACL,sFACA,uDACA,0CACA,0DACAS,MAAMJ,UACR;KAAC;KAAA,IAAAS,WAAA;MAAA,OAAA,CAAAH,gBAGAlB,OAAcqC,OAAK;OAClBC,IAAI,UAAUvB,QAAO,GAAIiB;OAAOO,MAC1BC,UAAU;QACdnC,yBAAyB;SACvBmC,MAAMV,eAAeW,OACnB3B,MAAMgB,eAAeE,UAAUlB,MAAMe,QAAQG,UAAUlB,MAAM4B,YAAY,CAC3E;QACF,CAAC;OACH;OACAC,QAAM;OAAA,eAAA;MAAA,CAAA,GAAAzB,gBAGPf,MAAI;OAAA,IAACyC,OAAI;QAAA,OAAE5B,MAAMH;OAAU;OAAA,IAAAQ,WAAA;QAAA,OAAAH,gBACzBlB,OAAc6C,YAAU,EAAA,SAAA,0IAAA,CAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAG9B,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA;AAIT"}
|
|
@@ -18,6 +18,8 @@ export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'>
|
|
|
18
18
|
thumbClass?: string;
|
|
19
19
|
labelClass?: string;
|
|
20
20
|
descriptionClass?: string;
|
|
21
|
+
label?: JSX.Element;
|
|
22
|
+
description?: JSX.Element;
|
|
21
23
|
/**
|
|
22
24
|
* Replaces the control and label. Omit it to get the default control beside
|
|
23
25
|
* `label` and `description`; supply it to compose the parts yourself.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAwExC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,eAK5E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAKxF"}
|
|
@@ -12,12 +12,23 @@ function Switch$1(props) {
|
|
|
12
12
|
"labelClass",
|
|
13
13
|
"descriptionClass",
|
|
14
14
|
"children",
|
|
15
|
+
"label",
|
|
16
|
+
"description",
|
|
15
17
|
"aria-label",
|
|
16
|
-
"aria-labelledby"
|
|
18
|
+
"aria-labelledby",
|
|
19
|
+
"aria-describedby",
|
|
20
|
+
"aria-invalid",
|
|
21
|
+
"aria-busy",
|
|
22
|
+
"title"
|
|
17
23
|
]);
|
|
18
|
-
return createComponent(Switch, mergeProps({
|
|
19
|
-
|
|
20
|
-
|
|
24
|
+
return createComponent(Switch, mergeProps({
|
|
25
|
+
get title() {
|
|
26
|
+
return local.title;
|
|
27
|
+
},
|
|
28
|
+
get ["class"]() {
|
|
29
|
+
return cn("group/switch flex items-center gap-2.5", local.class);
|
|
30
|
+
}
|
|
31
|
+
}, rest, { get children() {
|
|
21
32
|
return [
|
|
22
33
|
createComponent(Switch.Input, {
|
|
23
34
|
get ["aria-label"]() {
|
|
@@ -25,6 +36,18 @@ function Switch$1(props) {
|
|
|
25
36
|
},
|
|
26
37
|
get ["aria-labelledby"]() {
|
|
27
38
|
return local["aria-labelledby"];
|
|
39
|
+
},
|
|
40
|
+
get ["aria-describedby"]() {
|
|
41
|
+
return local["aria-describedby"];
|
|
42
|
+
},
|
|
43
|
+
get ["aria-invalid"]() {
|
|
44
|
+
return local["aria-invalid"];
|
|
45
|
+
},
|
|
46
|
+
get ["aria-busy"]() {
|
|
47
|
+
return local["aria-busy"];
|
|
48
|
+
},
|
|
49
|
+
get title() {
|
|
50
|
+
return local.title;
|
|
28
51
|
}
|
|
29
52
|
}),
|
|
30
53
|
createComponent(Switch.Control, {
|
|
@@ -37,16 +60,32 @@ function Switch$1(props) {
|
|
|
37
60
|
} });
|
|
38
61
|
}
|
|
39
62
|
}),
|
|
40
|
-
memo(() => local.children ?? (() => {
|
|
63
|
+
memo(() => local.children ?? (local.label || local.description ? (() => {
|
|
41
64
|
var _el$ = _tmpl$();
|
|
42
|
-
insert(_el$,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
65
|
+
insert(_el$, (() => {
|
|
66
|
+
var _c$ = memo(() => !!local.label);
|
|
67
|
+
return () => _c$() ? createComponent(Switch.Label, {
|
|
68
|
+
get ["class"]() {
|
|
69
|
+
return cn("text-sm leading-none font-medium", local.labelClass);
|
|
70
|
+
},
|
|
71
|
+
get children() {
|
|
72
|
+
return local.label;
|
|
73
|
+
}
|
|
74
|
+
}) : null;
|
|
75
|
+
})(), null);
|
|
76
|
+
insert(_el$, (() => {
|
|
77
|
+
var _c$2 = memo(() => !!local.description);
|
|
78
|
+
return () => _c$2() ? createComponent(Switch.Description, {
|
|
79
|
+
get ["class"]() {
|
|
80
|
+
return cn("text-muted-foreground text-sm", local.descriptionClass);
|
|
81
|
+
},
|
|
82
|
+
get children() {
|
|
83
|
+
return local.description;
|
|
84
|
+
}
|
|
85
|
+
}) : null;
|
|
86
|
+
})(), null);
|
|
48
87
|
return _el$;
|
|
49
|
-
})())
|
|
88
|
+
})() : null))
|
|
50
89
|
];
|
|
51
90
|
} }));
|
|
52
91
|
}
|