@nucleux/switch 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAM,KAAA,GAAoC;AAAA,EACxC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AACA,IAAM,KAAA,GAAoC;AAAA,EACxC,EAAA,EAAI,uFAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAGO,IAAM,MAAA,GAAeA,gBAAA,CAAA,UAAA;AAAA,EAC1B,CACE,EAAE,OAAA,EAAS,cAAA,GAAiB,KAAA,EAAO,eAAA,EAAiB,IAAA,GAAO,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,IACzF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAUA,0BAAS,cAAc,CAAA;AAC7D,IAAA,MAAM,eAAe,OAAA,IAAW,IAAA;AAChC,IAAA,MAAM,KAAA,GAAQ,eAAe,OAAA,GAAU,QAAA;AAEvC,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,IAAI,CAAC,YAAA,EAAc,WAAA,CAAY,CAAC,KAAK,CAAA;AACrC,MAAA,eAAA,GAAkB,CAAC,KAAK,CAAA;AAAA,IAC1B,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,cAAA,EAAc,KAAA;AAAA,QACd,QAAA;AAAA,QACA,YAAA,EAAY,QAAQ,SAAA,GAAY,WAAA;AAAA,QAChC,OAAA,EAAS,MAAA;AAAA,QACT,SAAA,EAAWC,QAAA;AAAA,UACT,sSAAA;AAAA,UACA,QAAQ,YAAA,GAAe,UAAA;AAAA,UACvB,MAAM,IAAI,CAAA;AAAA,UACV;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,QAAQ,SAAA,GAAY,WAAA;AAAA,YAChC,SAAA,EAAWC,QAAA;AAAA,cACT,mGAAA;AAAA,cACA,MAAM,IAAI;AAAA;AACZ;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type SwitchSize = \"sm\" | \"md\";\n\nexport interface SwitchProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\"> {\n /** Controlled on/off state. */\n checked?: boolean;\n /** Initial state when uncontrolled. */\n defaultChecked?: boolean;\n /** Called with the next state when toggled. */\n onCheckedChange?: (checked: boolean) => void;\n /** Size preset: \"sm\" or \"md\" (default). */\n size?: SwitchSize;\n}\n\nconst track: Record<SwitchSize, string> = {\n sm: \"h-4 w-7\",\n md: \"h-5 w-9\",\n};\nconst thumb: Record<SwitchSize, string> = {\n sm: \"size-3 data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-0.5\",\n md: \"size-4 data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5\",\n};\n\n/** Accessible on/off toggle. Controlled via `checked`, or uncontrolled via `defaultChecked`. */\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n (\n { checked, defaultChecked = false, onCheckedChange, size = \"md\", disabled, className, ...props },\n ref,\n ) => {\n const [internal, setInternal] = React.useState(defaultChecked);\n const isControlled = checked != null;\n const value = isControlled ? checked : internal;\n\n const toggle = () => {\n if (disabled) return;\n if (!isControlled) setInternal(!value);\n onCheckedChange?.(!value);\n };\n\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"switch\"\n aria-checked={value}\n disabled={disabled}\n data-state={value ? \"checked\" : \"unchecked\"}\n onClick={toggle}\n className={cn(\n \"inline-flex 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\",\n value ? \"bg-primary\" : \"bg-input\",\n track[size],\n className,\n )}\n {...props}\n >\n <span\n data-state={value ? \"checked\" : \"unchecked\"}\n className={cn(\n \"pointer-events-none inline-block rounded-full bg-background shadow-sm ring-0 transition-transform\",\n thumb[size],\n )}\n />\n </button>\n );\n },\n);\nSwitch.displayName = \"Switch\";\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -8,6 +8,7 @@ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
8
8
|
defaultChecked?: boolean;
|
|
9
9
|
/** Called with the next state when toggled. */
|
|
10
10
|
onCheckedChange?: (checked: boolean) => void;
|
|
11
|
+
/** Size preset: "sm" or "md" (default). */
|
|
11
12
|
size?: SwitchSize;
|
|
12
13
|
}
|
|
13
14
|
/** Accessible on/off toggle. Controlled via `checked`, or uncontrolled via `defaultChecked`. */
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
8
8
|
defaultChecked?: boolean;
|
|
9
9
|
/** Called with the next state when toggled. */
|
|
10
10
|
onCheckedChange?: (checked: boolean) => void;
|
|
11
|
+
/** Size preset: "sm" or "md" (default). */
|
|
11
12
|
size?: SwitchSize;
|
|
12
13
|
}
|
|
13
14
|
/** Accessible on/off toggle. Controlled via `checked`, or uncontrolled via `defaultChecked`. */
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;AAiBA,IAAM,KAAA,GAAoC;AAAA,EACxC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AACA,IAAM,KAAA,GAAoC;AAAA,EACxC,EAAA,EAAI,uFAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAGO,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EAC1B,CACE,EAAE,OAAA,EAAS,cAAA,GAAiB,KAAA,EAAO,eAAA,EAAiB,IAAA,GAAO,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,IACzF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAU,eAAS,cAAc,CAAA;AAC7D,IAAA,MAAM,eAAe,OAAA,IAAW,IAAA;AAChC,IAAA,MAAM,KAAA,GAAQ,eAAe,OAAA,GAAU,QAAA;AAEvC,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,IAAI,CAAC,YAAA,EAAc,WAAA,CAAY,CAAC,KAAK,CAAA;AACrC,MAAA,eAAA,GAAkB,CAAC,KAAK,CAAA;AAAA,IAC1B,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,cAAA,EAAc,KAAA;AAAA,QACd,QAAA;AAAA,QACA,YAAA,EAAY,QAAQ,SAAA,GAAY,WAAA;AAAA,QAChC,OAAA,EAAS,MAAA;AAAA,QACT,SAAA,EAAW,EAAA;AAAA,UACT,sSAAA;AAAA,UACA,QAAQ,YAAA,GAAe,UAAA;AAAA,UACvB,MAAM,IAAI,CAAA;AAAA,UACV;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,QAAQ,SAAA,GAAY,WAAA;AAAA,YAChC,SAAA,EAAW,EAAA;AAAA,cACT,mGAAA;AAAA,cACA,MAAM,IAAI;AAAA;AACZ;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type SwitchSize = \"sm\" | \"md\";\n\nexport interface SwitchProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\"> {\n /** Controlled on/off state. */\n checked?: boolean;\n /** Initial state when uncontrolled. */\n defaultChecked?: boolean;\n /** Called with the next state when toggled. */\n onCheckedChange?: (checked: boolean) => void;\n /** Size preset: \"sm\" or \"md\" (default). */\n size?: SwitchSize;\n}\n\nconst track: Record<SwitchSize, string> = {\n sm: \"h-4 w-7\",\n md: \"h-5 w-9\",\n};\nconst thumb: Record<SwitchSize, string> = {\n sm: \"size-3 data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-0.5\",\n md: \"size-4 data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5\",\n};\n\n/** Accessible on/off toggle. Controlled via `checked`, or uncontrolled via `defaultChecked`. */\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n (\n { checked, defaultChecked = false, onCheckedChange, size = \"md\", disabled, className, ...props },\n ref,\n ) => {\n const [internal, setInternal] = React.useState(defaultChecked);\n const isControlled = checked != null;\n const value = isControlled ? checked : internal;\n\n const toggle = () => {\n if (disabled) return;\n if (!isControlled) setInternal(!value);\n onCheckedChange?.(!value);\n };\n\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"switch\"\n aria-checked={value}\n disabled={disabled}\n data-state={value ? \"checked\" : \"unchecked\"}\n onClick={toggle}\n className={cn(\n \"inline-flex 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\",\n value ? \"bg-primary\" : \"bg-input\",\n track[size],\n className,\n )}\n {...props}\n >\n <span\n data-state={value ? \"checked\" : \"unchecked\"}\n className={cn(\n \"pointer-events-none inline-block rounded-full bg-background shadow-sm ring-0 transition-transform\",\n thumb[size],\n )}\n />\n </button>\n );\n },\n);\nSwitch.displayName = \"Switch\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nucleux/switch",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"react-dom": ">=18"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@nucleux/utils": "0.
|
|
25
|
+
"@nucleux/utils": "0.6.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"tsup": "^8.3.5",
|