@aiready/components 0.14.5 → 0.14.6
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/checkbox.js +3 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/separator.js +1 -0
- package/dist/components/separator.js.map +1 -1
- package/dist/components/switch.js +64 -42
- package/dist/components/switch.js.map +1 -1
- package/dist/index.js +68 -43
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/checkbox.tsx +3 -1
- package/src/components/separator.tsx +1 -0
- package/src/components/switch.tsx +62 -41
|
@@ -17,8 +17,10 @@ var Checkbox = React.forwardRef(
|
|
|
17
17
|
type: "checkbox",
|
|
18
18
|
id: checkboxId,
|
|
19
19
|
ref,
|
|
20
|
+
role: "checkbox",
|
|
21
|
+
"aria-checked": props.checked ? "true" : "false",
|
|
20
22
|
className: cn(
|
|
21
|
-
"h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
23
|
+
"peer h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
22
24
|
className
|
|
23
25
|
),
|
|
24
26
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/checkbox.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,IAAI,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC3C,IAAA,MAAM,UAAA,GAAa,MAAY,KAAA,CAAA,KAAA,EAAM;AAErC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,UAAA;AAAA,UACL,EAAA,EAAI,UAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAA,EAAW,EAAA;AAAA,YACT
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/checkbox.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,IAAI,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC3C,IAAA,MAAM,UAAA,GAAa,MAAY,KAAA,CAAA,KAAA,EAAM;AAErC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,UAAA;AAAA,UACL,EAAA,EAAI,UAAA;AAAA,UACJ,GAAA;AAAA,UACA,IAAA,EAAK,UAAA;AAAA,UACL,cAAA,EAAc,KAAA,CAAM,OAAA,GAAU,MAAA,GAAS,OAAA;AAAA,UACvC,SAAA,EAAW,EAAA;AAAA,YACT,oJAAA;AAAA,YACA;AAAA,WACF;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,KAAA,oBACC,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,UAAA;AAAA,UACT,SAAA,EAAU,iGAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"checkbox.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface CheckboxProps extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> {\n label?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n ({ className, label, id, ...props }, ref) => {\n const checkboxId = id || React.useId();\n\n return (\n <div className=\"flex items-center\">\n <input\n type=\"checkbox\"\n id={checkboxId}\n ref={ref}\n role=\"checkbox\"\n aria-checked={props.checked ? 'true' : 'false'}\n className={cn(\n 'peer h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n {...props}\n />\n {label && (\n <label\n htmlFor={checkboxId}\n className=\"ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n {label}\n </label>\n )}\n </div>\n );\n }\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"]}
|
|
@@ -14,6 +14,7 @@ var Separator = React.forwardRef(
|
|
|
14
14
|
ref,
|
|
15
15
|
role: decorative ? "none" : "separator",
|
|
16
16
|
"aria-orientation": orientation,
|
|
17
|
+
"data-orientation": orientation,
|
|
17
18
|
className: cn(
|
|
18
19
|
"shrink-0 bg-border",
|
|
19
20
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/separator.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACFA,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACtB,CACE,EAAE,SAAA,EAAW,WAAA,GAAc,YAAA,EAAc,aAAa,IAAA,EAAM,GAAG,KAAA,EAAM,EACrE,GAAA,qBAEA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAM,aAAa,MAAA,GAAS,WAAA;AAAA,MAC5B,kBAAA,EAAkB,WAAA;AAAA,MAClB,SAAA,EAAW,EAAA;AAAA,QACT,oBAAA;AAAA,QACA,WAAA,KAAgB,eAAe,gBAAA,GAAmB,gBAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"separator.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n orientation?: 'horizontal' | 'vertical';\n decorative?: boolean;\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n (\n { className, orientation = 'horizontal', decorative = true, ...props },\n ref\n ) => (\n <div\n ref={ref}\n role={decorative ? 'none' : 'separator'}\n aria-orientation={orientation}\n className={cn(\n 'shrink-0 bg-border',\n orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n className\n )}\n {...props}\n />\n )\n);\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/separator.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACFA,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACtB,CACE,EAAE,SAAA,EAAW,WAAA,GAAc,YAAA,EAAc,aAAa,IAAA,EAAM,GAAG,KAAA,EAAM,EACrE,GAAA,qBAEA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAM,aAAa,MAAA,GAAS,WAAA;AAAA,MAC5B,kBAAA,EAAkB,WAAA;AAAA,MAClB,kBAAA,EAAkB,WAAA;AAAA,MAClB,SAAA,EAAW,EAAA;AAAA,QACT,oBAAA;AAAA,QACA,WAAA,KAAgB,eAAe,gBAAA,GAAmB,gBAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"separator.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n orientation?: 'horizontal' | 'vertical';\n decorative?: boolean;\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n (\n { className, orientation = 'horizontal', decorative = true, ...props },\n ref\n ) => (\n <div\n ref={ref}\n role={decorative ? 'none' : 'separator'}\n aria-orientation={orientation}\n data-orientation={orientation}\n className={cn(\n 'shrink-0 bg-border',\n orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n className\n )}\n {...props}\n />\n )\n);\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"]}
|
|
@@ -7,48 +7,70 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
7
7
|
function cn(...inputs) {
|
|
8
8
|
return twMerge(clsx(inputs));
|
|
9
9
|
}
|
|
10
|
-
var Switch = React.forwardRef(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
10
|
+
var Switch = React.forwardRef((props, ref) => {
|
|
11
|
+
const {
|
|
12
|
+
className,
|
|
13
|
+
label,
|
|
14
|
+
id,
|
|
15
|
+
checked,
|
|
16
|
+
onCheckedChange,
|
|
17
|
+
onChange,
|
|
18
|
+
disabled,
|
|
19
|
+
...restProps
|
|
20
|
+
} = props;
|
|
21
|
+
const switchId = id || React.useId();
|
|
22
|
+
const isChecked = checked ?? false;
|
|
23
|
+
const { type: _type, ...buttonProps } = restProps;
|
|
24
|
+
const handleChange = (e) => {
|
|
25
|
+
onChange?.(e);
|
|
26
|
+
onCheckedChange?.(e.target.checked);
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
29
|
+
/* @__PURE__ */ jsxs(
|
|
30
|
+
"label",
|
|
31
|
+
{
|
|
32
|
+
htmlFor: switchId,
|
|
33
|
+
className: "relative inline-flex cursor-pointer items-center",
|
|
34
|
+
children: [
|
|
35
|
+
/* @__PURE__ */ jsx(
|
|
36
|
+
"input",
|
|
37
|
+
{
|
|
38
|
+
type: "checkbox",
|
|
39
|
+
id: switchId,
|
|
40
|
+
ref,
|
|
41
|
+
checked: isChecked,
|
|
42
|
+
onChange: handleChange,
|
|
43
|
+
className: "peer sr-only",
|
|
44
|
+
disabled
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ jsx(
|
|
48
|
+
"button",
|
|
49
|
+
{
|
|
50
|
+
type: "button",
|
|
51
|
+
role: "switch",
|
|
52
|
+
"aria-checked": isChecked,
|
|
53
|
+
disabled,
|
|
54
|
+
className: cn(
|
|
55
|
+
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
|
56
|
+
'bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[""] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
|
57
|
+
className
|
|
58
|
+
),
|
|
59
|
+
onClick: () => {
|
|
60
|
+
if (!disabled) {
|
|
61
|
+
const newChecked = !isChecked;
|
|
62
|
+
onCheckedChange?.(newChecked);
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
...buttonProps
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
),
|
|
71
|
+
label && /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm font-medium text-foreground", children: label })
|
|
72
|
+
] });
|
|
73
|
+
});
|
|
52
74
|
Switch.displayName = "Switch";
|
|
53
75
|
|
|
54
76
|
export { Switch };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/switch.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/switch.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC7E,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,QAAA,GAAW,MAAY,KAAA,CAAA,KAAA,EAAM;AACnC,EAAA,MAAM,YAAY,OAAA,IAAW,KAAA;AAG7B,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,GAAG,aAAY,GAAI,SAAA;AAExC,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,IAAA,QAAA,GAAW,CAAC,CAAA;AACZ,IAAA,eAAA,GAAkB,CAAA,CAAE,OAAO,OAAO,CAAA;AAAA,EACpC,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,QAAA;AAAA,QACT,SAAA,EAAU,kDAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,UAAA;AAAA,cACL,EAAA,EAAI,QAAA;AAAA,cACJ,GAAA;AAAA,cACA,OAAA,EAAS,SAAA;AAAA,cACT,QAAA,EAAU,YAAA;AAAA,cACV,SAAA,EAAU,cAAA;AAAA,cACV;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,IAAA,EAAK,QAAA;AAAA,cACL,cAAA,EAAc,SAAA;AAAA,cACd,QAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACT,oXAAA;AAAA,gBACA,4aAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,IAAI,CAAC,QAAA,EAAU;AACb,kBAAA,MAAM,aAAa,CAAC,SAAA;AACpB,kBAAA,eAAA,GAAkB,UAAU,CAAA;AAAA,gBAC9B;AAAA,cACF,CAAA;AAAA,cACC,GAAG;AAAA;AAAA;AACN;AAAA;AAAA,KACF;AAAA,IACC,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4CACb,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAC;AACD,MAAA,CAAO,WAAA,GAAc,QAAA","file":"switch.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface SwitchProps extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> {\n label?: string;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {\n const {\n className,\n label,\n id,\n checked,\n onCheckedChange,\n onChange,\n disabled,\n ...restProps\n } = props;\n const switchId = id || React.useId();\n const isChecked = checked ?? false;\n\n // Destructure restProps to omit attributes that cause React warnings/errors on buttons\n const { type: _type, ...buttonProps } = restProps as any;\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onCheckedChange?.(e.target.checked);\n };\n\n return (\n <div className=\"flex items-center\">\n <label\n htmlFor={switchId}\n className=\"relative inline-flex cursor-pointer items-center\"\n >\n <input\n type=\"checkbox\"\n id={switchId}\n ref={ref}\n checked={isChecked}\n onChange={handleChange}\n className=\"peer sr-only\"\n disabled={disabled}\n />\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={isChecked}\n disabled={disabled}\n className={cn(\n 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n 'bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[\"\"] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n className\n )}\n onClick={() => {\n if (!disabled) {\n const newChecked = !isChecked;\n onCheckedChange?.(newChecked);\n }\n }}\n {...buttonProps}\n />\n </label>\n {label && (\n <span className=\"ml-3 text-sm font-medium text-foreground\">\n {label}\n </span>\n )}\n </div>\n );\n});\nSwitch.displayName = 'Switch';\n\nexport { Switch };\n"]}
|
package/dist/index.js
CHANGED
|
@@ -631,6 +631,7 @@ var Separator = React2.forwardRef(
|
|
|
631
631
|
ref,
|
|
632
632
|
role: decorative ? "none" : "separator",
|
|
633
633
|
"aria-orientation": orientation,
|
|
634
|
+
"data-orientation": orientation,
|
|
634
635
|
className: cn(
|
|
635
636
|
"shrink-0 bg-border",
|
|
636
637
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
@@ -651,8 +652,10 @@ var Checkbox = React2.forwardRef(
|
|
|
651
652
|
type: "checkbox",
|
|
652
653
|
id: checkboxId,
|
|
653
654
|
ref,
|
|
655
|
+
role: "checkbox",
|
|
656
|
+
"aria-checked": props.checked ? "true" : "false",
|
|
654
657
|
className: cn(
|
|
655
|
-
"h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
658
|
+
"peer h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
656
659
|
className
|
|
657
660
|
),
|
|
658
661
|
...props
|
|
@@ -721,48 +724,70 @@ var RadioGroup = React2.forwardRef(
|
|
|
721
724
|
}
|
|
722
725
|
);
|
|
723
726
|
RadioGroup.displayName = "RadioGroup";
|
|
724
|
-
var Switch = React2.forwardRef(
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
727
|
+
var Switch = React2.forwardRef((props, ref) => {
|
|
728
|
+
const {
|
|
729
|
+
className,
|
|
730
|
+
label,
|
|
731
|
+
id,
|
|
732
|
+
checked,
|
|
733
|
+
onCheckedChange,
|
|
734
|
+
onChange,
|
|
735
|
+
disabled,
|
|
736
|
+
...restProps
|
|
737
|
+
} = props;
|
|
738
|
+
const switchId = id || React2.useId();
|
|
739
|
+
const isChecked = checked ?? false;
|
|
740
|
+
const { type: _type, ...buttonProps } = restProps;
|
|
741
|
+
const handleChange = (e) => {
|
|
742
|
+
onChange?.(e);
|
|
743
|
+
onCheckedChange?.(e.target.checked);
|
|
744
|
+
};
|
|
745
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
746
|
+
/* @__PURE__ */ jsxs(
|
|
747
|
+
"label",
|
|
748
|
+
{
|
|
749
|
+
htmlFor: switchId,
|
|
750
|
+
className: "relative inline-flex cursor-pointer items-center",
|
|
751
|
+
children: [
|
|
752
|
+
/* @__PURE__ */ jsx(
|
|
753
|
+
"input",
|
|
754
|
+
{
|
|
755
|
+
type: "checkbox",
|
|
756
|
+
id: switchId,
|
|
757
|
+
ref,
|
|
758
|
+
checked: isChecked,
|
|
759
|
+
onChange: handleChange,
|
|
760
|
+
className: "peer sr-only",
|
|
761
|
+
disabled
|
|
762
|
+
}
|
|
763
|
+
),
|
|
764
|
+
/* @__PURE__ */ jsx(
|
|
765
|
+
"button",
|
|
766
|
+
{
|
|
767
|
+
type: "button",
|
|
768
|
+
role: "switch",
|
|
769
|
+
"aria-checked": isChecked,
|
|
770
|
+
disabled,
|
|
771
|
+
className: cn(
|
|
772
|
+
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
|
773
|
+
'bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[""] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
|
774
|
+
className
|
|
775
|
+
),
|
|
776
|
+
onClick: () => {
|
|
777
|
+
if (!disabled) {
|
|
778
|
+
const newChecked = !isChecked;
|
|
779
|
+
onCheckedChange?.(newChecked);
|
|
780
|
+
}
|
|
781
|
+
},
|
|
782
|
+
...buttonProps
|
|
783
|
+
}
|
|
784
|
+
)
|
|
785
|
+
]
|
|
786
|
+
}
|
|
787
|
+
),
|
|
788
|
+
label && /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm font-medium text-foreground", children: label })
|
|
789
|
+
] });
|
|
790
|
+
});
|
|
766
791
|
Switch.displayName = "Switch";
|
|
767
792
|
var Textarea = React2.forwardRef(
|
|
768
793
|
({ className, ...props }, ref) => {
|