@adea-ai/ui 0.72.0 → 0.72.1
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/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/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/radio-group/radio-group.tsx +22 -5
- 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/radio-group/radio-group.tsx +22 -5
- 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"}
|
|
@@ -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"}
|
|
@@ -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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","names":["Switch","KobalteSwitch","ComponentProps","JSX","splitProps","cn","SwitchProps","Omit","controlClass","thumbClass","labelClass","descriptionClass","
|
|
1
|
+
{"version":3,"file":"switch.js","names":["Switch","KobalteSwitch","ComponentProps","JSX","splitProps","cn","SwitchProps","Omit","controlClass","thumbClass","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","Thumb","_$memo","_el$","_tmpl$","_$insert","_c$","Label","_c$2","Description","SwitchLabel","SwitchDescription","Switch","_$createComponent","KobalteSwitch","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import { Switch as KobalteSwitch } from '@kobalte/core/switch'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Switch.\n *\n * For a setting that takes effect the moment it is flipped. The distinction\n * from Checkbox is behaviour, not looks: a switch applies immediately and\n * belongs in a settings row, while a checkbox is a value the user is still\n * composing and is applied when a form is submitted. A switch inside an unsaved\n * form is the mistake this split exists to prevent.\n *\n * `Switch.Input` renders a real hidden checkbox, so the control is\n * form-native, keyboard-operable, and its `aria-checked` follows the state the\n * user sees.\n */\nexport type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {\n controlClass?: string\n thumbClass?: 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 Switch(props: SwitchProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'controlClass',\n 'thumbClass',\n 'labelClass',\n 'descriptionClass',\n 'children',\n 'label',\n 'description',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby',\n 'aria-invalid',\n 'aria-busy',\n 'title',\n ])\n\n return (\n <KobalteSwitch\n title={local.title}\n class={cn('group/switch flex items-center gap-2.5', local.class)}\n {...rest}\n >\n {/* The name belongs on the input; see Checkbox for why. */}\n <KobalteSwitch.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 <KobalteSwitch.Control\n class={cn(\n 'bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent',\n 'transition-colors ease-out outline-none',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'data-[checked]:bg-primary',\n 'data-[invalid]:border-destructive',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n local.controlClass\n )}\n >\n <KobalteSwitch.Thumb\n class={cn(\n 'bg-background pointer-events-none block size-4 rounded-full shadow-xs',\n 'transition-transform ease-out',\n 'data-[checked]:translate-x-4',\n local.thumbClass\n )}\n />\n </KobalteSwitch.Control>\n {local.children ??\n (local.label || local.description ? (\n <div class=\"grid gap-0.5\">\n {local.label ? (\n <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>\n {local.label}\n </KobalteSwitch.Label>\n ) : null}\n {local.description ? (\n <KobalteSwitch.Description\n class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n >\n {local.description}\n </KobalteSwitch.Description>\n ) : null}\n </div>\n ) : null)}\n </KobalteSwitch>\n )\n}\n\n/**\n * The switch's own label. Valid only inside a `<Switch>`: it is Kobalte's label\n * for that root's control, and outside one there is nothing to associate with.\n * A label drawn *beside* a switch — a settings row with the control trailing —\n * is plain text, and the switch takes an `aria-label` instead.\n */\nexport function SwitchLabel(props: ComponentProps<typeof KobalteSwitch.Label>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n )\n}\n\nexport function SwitchDescription(props: ComponentProps<typeof KobalteSwitch.Description>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteSwitch.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n )\n}\n"],"mappings":";;;;;;AAgCA,SAAgBA,SAAOgB,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGlB,QAAamB,WAAA;EAAA,IACZC,QAAK;GAAA,OAAEJ,MAAMI;EAAK;EAAA,KAAA,WAAA;GAAA,OACXhB,GAAG,0CAA0CY,MAAMK,KAAK;EAAC;CAAA,GAC5DJ,MAAI,EAAA,IAAAH,WAAA;EAAA,OAAA;GAAAI,gBAGPlB,OAAcsB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACNN,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,gBAEnBlB,OAAc4B,SAAO;IAAA,KAAA,WAAA;KAAA,OACbxB,GACL,6FACA,2CACA,oFACA,6BACA,qCACA,iEACAY,MAAMT,YACR;IAAC;IAAA,IAAAO,WAAA;KAAA,OAAAI,gBAEAlB,OAAc6B,OAAK,EAAA,KAAA,WAAA;MAAA,OACXzB,GACL,yEACA,iCACA,gCACAY,MAAMR,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAsB,WAGJd,MAAMF,aACJE,MAAML,SAASK,MAAMH,qBAAW;IAAA,IAAAkB,OAAAC,OAAA;IAAAC,OAAAF,aAAA;KAAA,IAAAG,MAAAJ,WAAA,CAAA,CAE5Bd,MAAML,KAAK;KAAA,aAAXuB,IAAA,IAAAhB,gBACElB,OAAcmC,OAAK;MAAA,KAAA,WAAA;OAAA,OAAQ/B,GAAG,oCAAoCY,MAAMP,UAAU;MAAC;MAAA,IAAAK,WAAA;OAAA,OACjFE,MAAML;MAAK;KAAA,CAAA,IAEZ;IAAI,EAAA,CAAA,GAAA,IAAA;IAAAsB,OAAAF,aAAA;KAAA,IAAAK,OAAAN,WAAA,CAAA,CACPd,MAAMH,WAAW;KAAA,aAAjBuB,KAAA,IAAAlB,gBACElB,OAAcqC,aAAW;MAAA,KAAA,WAAA;OAAA,OACjBjC,GAAG,iCAAiCY,MAAMN,gBAAgB;MAAC;MAAA,IAAAI,WAAA;OAAA,OAEjEE,MAAMH;MAAW;KAAA,CAAA,IAElB;IAAI,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAkB;GAAA,EAAA,CAAA,IAER,KAAK;EAAA;CAAA,EAAA,CAAA,CAAA;AAGjB;;;;;;;AAQA,SAAgBO,YAAYvB,OAAmD;CAC7E,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGlB,OAAcmC,OAAKhB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQf,GAAG,oCAAoCY,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AAE7F;AAEA,SAAgBsB,kBAAkBxB,OAAyD;CACzF,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGlB,OAAcqC,aAAWlB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQf,GAAG,iCAAiCY,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AAEhG"}
|
|
@@ -21,6 +21,8 @@ export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'childr
|
|
|
21
21
|
controlClass?: string
|
|
22
22
|
labelClass?: string
|
|
23
23
|
descriptionClass?: string
|
|
24
|
+
label?: JSX.Element
|
|
25
|
+
description?: JSX.Element
|
|
24
26
|
/**
|
|
25
27
|
* Replaces the control and label. Omit it to get the default control beside
|
|
26
28
|
* `label` and `description`; supply it to compose the parts yourself.
|
|
@@ -35,13 +37,23 @@ export function Checkbox(props: CheckboxProps) {
|
|
|
35
37
|
'labelClass',
|
|
36
38
|
'descriptionClass',
|
|
37
39
|
'children',
|
|
40
|
+
'label',
|
|
41
|
+
'description',
|
|
38
42
|
'indeterminate',
|
|
39
43
|
'aria-label',
|
|
40
44
|
'aria-labelledby',
|
|
45
|
+
'aria-describedby',
|
|
46
|
+
'aria-invalid',
|
|
47
|
+
'aria-busy',
|
|
48
|
+
'title',
|
|
41
49
|
])
|
|
42
50
|
|
|
43
51
|
return (
|
|
44
|
-
<KobalteCheckbox
|
|
52
|
+
<KobalteCheckbox
|
|
53
|
+
title={local.title}
|
|
54
|
+
class={cn('group/checkbox flex items-start gap-2.5', local.class)}
|
|
55
|
+
{...rest}
|
|
56
|
+
>
|
|
45
57
|
{/*
|
|
46
58
|
* The name goes on the input, which is what carries the value and takes
|
|
47
59
|
* focus. On the Root it would land on a plain div and name nothing — the
|
|
@@ -50,6 +62,10 @@ export function Checkbox(props: CheckboxProps) {
|
|
|
50
62
|
<KobalteCheckbox.Input
|
|
51
63
|
aria-label={local['aria-label']}
|
|
52
64
|
aria-labelledby={local['aria-labelledby']}
|
|
65
|
+
aria-describedby={local['aria-describedby']}
|
|
66
|
+
aria-invalid={local['aria-invalid']}
|
|
67
|
+
aria-busy={local['aria-busy']}
|
|
68
|
+
title={local.title}
|
|
53
69
|
/>
|
|
54
70
|
<KobalteCheckbox.Control
|
|
55
71
|
class={cn(
|
|
@@ -67,14 +83,23 @@ export function Checkbox(props: CheckboxProps) {
|
|
|
67
83
|
{local.indeterminate ? <Minus class="size-3" /> : <Check class="size-3" />}
|
|
68
84
|
</KobalteCheckbox.Indicator>
|
|
69
85
|
</KobalteCheckbox.Control>
|
|
70
|
-
{local.children ??
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
86
|
+
{local.children ??
|
|
87
|
+
(local.label || local.description ? (
|
|
88
|
+
<div class="grid gap-0.5">
|
|
89
|
+
{local.label ? (
|
|
90
|
+
<KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>
|
|
91
|
+
{local.label}
|
|
92
|
+
</KobalteCheckbox.Label>
|
|
93
|
+
) : null}
|
|
94
|
+
{local.description ? (
|
|
95
|
+
<KobalteCheckbox.Description
|
|
96
|
+
class={cn('text-muted-foreground text-sm', local.descriptionClass)}
|
|
97
|
+
>
|
|
98
|
+
{local.description}
|
|
99
|
+
</KobalteCheckbox.Description>
|
|
100
|
+
) : null}
|
|
101
|
+
</div>
|
|
102
|
+
) : null)}
|
|
78
103
|
</KobalteCheckbox>
|
|
79
104
|
)
|
|
80
105
|
}
|
|
@@ -25,7 +25,8 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
|
|
|
25
25
|
controlClass?: string
|
|
26
26
|
/**
|
|
27
27
|
* The option's visible label. A radio with no accessible name is unreachable
|
|
28
|
-
* by a screen reader and by voice control, so supply this
|
|
28
|
+
* by a screen reader and by voice control, so supply this, a labelled child,
|
|
29
|
+
* `aria-label`, or `aria-labelledby`.
|
|
29
30
|
*/
|
|
30
31
|
label?: string
|
|
31
32
|
description?: string
|
|
@@ -38,14 +39,28 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
|
|
|
38
39
|
'label',
|
|
39
40
|
'description',
|
|
40
41
|
'children',
|
|
42
|
+
'aria-label',
|
|
43
|
+
'aria-labelledby',
|
|
44
|
+
'aria-describedby',
|
|
45
|
+
'aria-invalid',
|
|
46
|
+
'aria-busy',
|
|
47
|
+
'title',
|
|
41
48
|
])
|
|
42
49
|
|
|
43
50
|
return (
|
|
44
51
|
<KobalteRadioGroup.Item
|
|
52
|
+
title={local.title}
|
|
45
53
|
class={cn('group/radio flex items-start gap-2.5', local.class)}
|
|
46
54
|
{...rest}
|
|
47
55
|
>
|
|
48
|
-
<KobalteRadioGroup.ItemInput
|
|
56
|
+
<KobalteRadioGroup.ItemInput
|
|
57
|
+
aria-label={local['aria-label']}
|
|
58
|
+
aria-labelledby={local['aria-labelledby']}
|
|
59
|
+
aria-describedby={local['aria-describedby']}
|
|
60
|
+
aria-invalid={local['aria-invalid']}
|
|
61
|
+
aria-busy={local['aria-busy']}
|
|
62
|
+
title={local.title}
|
|
63
|
+
/>
|
|
49
64
|
<KobalteRadioGroup.ItemControl
|
|
50
65
|
class={cn(
|
|
51
66
|
'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',
|
|
@@ -63,9 +78,11 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
|
|
|
63
78
|
</KobalteRadioGroup.ItemControl>
|
|
64
79
|
{local.children ?? (
|
|
65
80
|
<div class="grid gap-0.5 leading-none">
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
81
|
+
{local.label ? (
|
|
82
|
+
<KobalteRadioGroup.ItemLabel class="text-sm font-medium">
|
|
83
|
+
{local.label}
|
|
84
|
+
</KobalteRadioGroup.ItemLabel>
|
|
85
|
+
) : null}
|
|
69
86
|
{local.description ? (
|
|
70
87
|
<KobalteRadioGroup.ItemDescription class="text-muted-foreground text-sm">
|
|
71
88
|
{local.description}
|
|
@@ -21,6 +21,8 @@ export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'>
|
|
|
21
21
|
thumbClass?: string
|
|
22
22
|
labelClass?: string
|
|
23
23
|
descriptionClass?: string
|
|
24
|
+
label?: JSX.Element
|
|
25
|
+
description?: JSX.Element
|
|
24
26
|
/**
|
|
25
27
|
* Replaces the control and label. Omit it to get the default control beside
|
|
26
28
|
* `label` and `description`; supply it to compose the parts yourself.
|
|
@@ -36,16 +38,30 @@ export function Switch(props: SwitchProps) {
|
|
|
36
38
|
'labelClass',
|
|
37
39
|
'descriptionClass',
|
|
38
40
|
'children',
|
|
41
|
+
'label',
|
|
42
|
+
'description',
|
|
39
43
|
'aria-label',
|
|
40
44
|
'aria-labelledby',
|
|
45
|
+
'aria-describedby',
|
|
46
|
+
'aria-invalid',
|
|
47
|
+
'aria-busy',
|
|
48
|
+
'title',
|
|
41
49
|
])
|
|
42
50
|
|
|
43
51
|
return (
|
|
44
|
-
<KobalteSwitch
|
|
52
|
+
<KobalteSwitch
|
|
53
|
+
title={local.title}
|
|
54
|
+
class={cn('group/switch flex items-center gap-2.5', local.class)}
|
|
55
|
+
{...rest}
|
|
56
|
+
>
|
|
45
57
|
{/* The name belongs on the input; see Checkbox for why. */}
|
|
46
58
|
<KobalteSwitch.Input
|
|
47
59
|
aria-label={local['aria-label']}
|
|
48
60
|
aria-labelledby={local['aria-labelledby']}
|
|
61
|
+
aria-describedby={local['aria-describedby']}
|
|
62
|
+
aria-invalid={local['aria-invalid']}
|
|
63
|
+
aria-busy={local['aria-busy']}
|
|
64
|
+
title={local.title}
|
|
49
65
|
/>
|
|
50
66
|
<KobalteSwitch.Control
|
|
51
67
|
class={cn(
|
|
@@ -67,14 +83,23 @@ export function Switch(props: SwitchProps) {
|
|
|
67
83
|
)}
|
|
68
84
|
/>
|
|
69
85
|
</KobalteSwitch.Control>
|
|
70
|
-
{local.children ??
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
86
|
+
{local.children ??
|
|
87
|
+
(local.label || local.description ? (
|
|
88
|
+
<div class="grid gap-0.5">
|
|
89
|
+
{local.label ? (
|
|
90
|
+
<KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>
|
|
91
|
+
{local.label}
|
|
92
|
+
</KobalteSwitch.Label>
|
|
93
|
+
) : null}
|
|
94
|
+
{local.description ? (
|
|
95
|
+
<KobalteSwitch.Description
|
|
96
|
+
class={cn('text-muted-foreground text-sm', local.descriptionClass)}
|
|
97
|
+
>
|
|
98
|
+
{local.description}
|
|
99
|
+
</KobalteSwitch.Description>
|
|
100
|
+
) : null}
|
|
101
|
+
</div>
|
|
102
|
+
) : null)}
|
|
78
103
|
</KobalteSwitch>
|
|
79
104
|
)
|
|
80
105
|
}
|
package/package.json
CHANGED
|
@@ -21,6 +21,8 @@ export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'childr
|
|
|
21
21
|
controlClass?: string
|
|
22
22
|
labelClass?: string
|
|
23
23
|
descriptionClass?: string
|
|
24
|
+
label?: JSX.Element
|
|
25
|
+
description?: JSX.Element
|
|
24
26
|
/**
|
|
25
27
|
* Replaces the control and label. Omit it to get the default control beside
|
|
26
28
|
* `label` and `description`; supply it to compose the parts yourself.
|
|
@@ -35,13 +37,23 @@ export function Checkbox(props: CheckboxProps) {
|
|
|
35
37
|
'labelClass',
|
|
36
38
|
'descriptionClass',
|
|
37
39
|
'children',
|
|
40
|
+
'label',
|
|
41
|
+
'description',
|
|
38
42
|
'indeterminate',
|
|
39
43
|
'aria-label',
|
|
40
44
|
'aria-labelledby',
|
|
45
|
+
'aria-describedby',
|
|
46
|
+
'aria-invalid',
|
|
47
|
+
'aria-busy',
|
|
48
|
+
'title',
|
|
41
49
|
])
|
|
42
50
|
|
|
43
51
|
return (
|
|
44
|
-
<KobalteCheckbox
|
|
52
|
+
<KobalteCheckbox
|
|
53
|
+
title={local.title}
|
|
54
|
+
class={cn('group/checkbox flex items-start gap-2.5', local.class)}
|
|
55
|
+
{...rest}
|
|
56
|
+
>
|
|
45
57
|
{/*
|
|
46
58
|
* The name goes on the input, which is what carries the value and takes
|
|
47
59
|
* focus. On the Root it would land on a plain div and name nothing — the
|
|
@@ -50,6 +62,10 @@ export function Checkbox(props: CheckboxProps) {
|
|
|
50
62
|
<KobalteCheckbox.Input
|
|
51
63
|
aria-label={local['aria-label']}
|
|
52
64
|
aria-labelledby={local['aria-labelledby']}
|
|
65
|
+
aria-describedby={local['aria-describedby']}
|
|
66
|
+
aria-invalid={local['aria-invalid']}
|
|
67
|
+
aria-busy={local['aria-busy']}
|
|
68
|
+
title={local.title}
|
|
53
69
|
/>
|
|
54
70
|
<KobalteCheckbox.Control
|
|
55
71
|
class={cn(
|
|
@@ -67,14 +83,23 @@ export function Checkbox(props: CheckboxProps) {
|
|
|
67
83
|
{local.indeterminate ? <Minus class="size-3" /> : <Check class="size-3" />}
|
|
68
84
|
</KobalteCheckbox.Indicator>
|
|
69
85
|
</KobalteCheckbox.Control>
|
|
70
|
-
{local.children ??
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
86
|
+
{local.children ??
|
|
87
|
+
(local.label || local.description ? (
|
|
88
|
+
<div class="grid gap-0.5">
|
|
89
|
+
{local.label ? (
|
|
90
|
+
<KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>
|
|
91
|
+
{local.label}
|
|
92
|
+
</KobalteCheckbox.Label>
|
|
93
|
+
) : null}
|
|
94
|
+
{local.description ? (
|
|
95
|
+
<KobalteCheckbox.Description
|
|
96
|
+
class={cn('text-muted-foreground text-sm', local.descriptionClass)}
|
|
97
|
+
>
|
|
98
|
+
{local.description}
|
|
99
|
+
</KobalteCheckbox.Description>
|
|
100
|
+
) : null}
|
|
101
|
+
</div>
|
|
102
|
+
) : null)}
|
|
78
103
|
</KobalteCheckbox>
|
|
79
104
|
)
|
|
80
105
|
}
|
|
@@ -25,7 +25,8 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
|
|
|
25
25
|
controlClass?: string
|
|
26
26
|
/**
|
|
27
27
|
* The option's visible label. A radio with no accessible name is unreachable
|
|
28
|
-
* by a screen reader and by voice control, so supply this
|
|
28
|
+
* by a screen reader and by voice control, so supply this, a labelled child,
|
|
29
|
+
* `aria-label`, or `aria-labelledby`.
|
|
29
30
|
*/
|
|
30
31
|
label?: string
|
|
31
32
|
description?: string
|
|
@@ -38,14 +39,28 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
|
|
|
38
39
|
'label',
|
|
39
40
|
'description',
|
|
40
41
|
'children',
|
|
42
|
+
'aria-label',
|
|
43
|
+
'aria-labelledby',
|
|
44
|
+
'aria-describedby',
|
|
45
|
+
'aria-invalid',
|
|
46
|
+
'aria-busy',
|
|
47
|
+
'title',
|
|
41
48
|
])
|
|
42
49
|
|
|
43
50
|
return (
|
|
44
51
|
<KobalteRadioGroup.Item
|
|
52
|
+
title={local.title}
|
|
45
53
|
class={cn('group/radio flex items-start gap-2.5', local.class)}
|
|
46
54
|
{...rest}
|
|
47
55
|
>
|
|
48
|
-
<KobalteRadioGroup.ItemInput
|
|
56
|
+
<KobalteRadioGroup.ItemInput
|
|
57
|
+
aria-label={local['aria-label']}
|
|
58
|
+
aria-labelledby={local['aria-labelledby']}
|
|
59
|
+
aria-describedby={local['aria-describedby']}
|
|
60
|
+
aria-invalid={local['aria-invalid']}
|
|
61
|
+
aria-busy={local['aria-busy']}
|
|
62
|
+
title={local.title}
|
|
63
|
+
/>
|
|
49
64
|
<KobalteRadioGroup.ItemControl
|
|
50
65
|
class={cn(
|
|
51
66
|
'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',
|
|
@@ -63,9 +78,11 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
|
|
|
63
78
|
</KobalteRadioGroup.ItemControl>
|
|
64
79
|
{local.children ?? (
|
|
65
80
|
<div class="grid gap-0.5 leading-none">
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
81
|
+
{local.label ? (
|
|
82
|
+
<KobalteRadioGroup.ItemLabel class="text-sm font-medium">
|
|
83
|
+
{local.label}
|
|
84
|
+
</KobalteRadioGroup.ItemLabel>
|
|
85
|
+
) : null}
|
|
69
86
|
{local.description ? (
|
|
70
87
|
<KobalteRadioGroup.ItemDescription class="text-muted-foreground text-sm">
|
|
71
88
|
{local.description}
|
|
@@ -21,6 +21,8 @@ export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'>
|
|
|
21
21
|
thumbClass?: string
|
|
22
22
|
labelClass?: string
|
|
23
23
|
descriptionClass?: string
|
|
24
|
+
label?: JSX.Element
|
|
25
|
+
description?: JSX.Element
|
|
24
26
|
/**
|
|
25
27
|
* Replaces the control and label. Omit it to get the default control beside
|
|
26
28
|
* `label` and `description`; supply it to compose the parts yourself.
|
|
@@ -36,16 +38,30 @@ export function Switch(props: SwitchProps) {
|
|
|
36
38
|
'labelClass',
|
|
37
39
|
'descriptionClass',
|
|
38
40
|
'children',
|
|
41
|
+
'label',
|
|
42
|
+
'description',
|
|
39
43
|
'aria-label',
|
|
40
44
|
'aria-labelledby',
|
|
45
|
+
'aria-describedby',
|
|
46
|
+
'aria-invalid',
|
|
47
|
+
'aria-busy',
|
|
48
|
+
'title',
|
|
41
49
|
])
|
|
42
50
|
|
|
43
51
|
return (
|
|
44
|
-
<KobalteSwitch
|
|
52
|
+
<KobalteSwitch
|
|
53
|
+
title={local.title}
|
|
54
|
+
class={cn('group/switch flex items-center gap-2.5', local.class)}
|
|
55
|
+
{...rest}
|
|
56
|
+
>
|
|
45
57
|
{/* The name belongs on the input; see Checkbox for why. */}
|
|
46
58
|
<KobalteSwitch.Input
|
|
47
59
|
aria-label={local['aria-label']}
|
|
48
60
|
aria-labelledby={local['aria-labelledby']}
|
|
61
|
+
aria-describedby={local['aria-describedby']}
|
|
62
|
+
aria-invalid={local['aria-invalid']}
|
|
63
|
+
aria-busy={local['aria-busy']}
|
|
64
|
+
title={local.title}
|
|
49
65
|
/>
|
|
50
66
|
<KobalteSwitch.Control
|
|
51
67
|
class={cn(
|
|
@@ -67,14 +83,23 @@ export function Switch(props: SwitchProps) {
|
|
|
67
83
|
)}
|
|
68
84
|
/>
|
|
69
85
|
</KobalteSwitch.Control>
|
|
70
|
-
{local.children ??
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
86
|
+
{local.children ??
|
|
87
|
+
(local.label || local.description ? (
|
|
88
|
+
<div class="grid gap-0.5">
|
|
89
|
+
{local.label ? (
|
|
90
|
+
<KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>
|
|
91
|
+
{local.label}
|
|
92
|
+
</KobalteSwitch.Label>
|
|
93
|
+
) : null}
|
|
94
|
+
{local.description ? (
|
|
95
|
+
<KobalteSwitch.Description
|
|
96
|
+
class={cn('text-muted-foreground text-sm', local.descriptionClass)}
|
|
97
|
+
>
|
|
98
|
+
{local.description}
|
|
99
|
+
</KobalteSwitch.Description>
|
|
100
|
+
) : null}
|
|
101
|
+
</div>
|
|
102
|
+
) : null)}
|
|
78
103
|
</KobalteSwitch>
|
|
79
104
|
)
|
|
80
105
|
}
|