@aristobyte-ui/switch 1.0.59 → 1.0.61
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.d.mts +1 -33
- package/dist/index.d.ts +1 -33
- package/dist/index.js +0 -80
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +0 -62
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -4
package/dist/index.d.mts
CHANGED
|
@@ -1,34 +1,2 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { IconPropsType } from '@aristobyte-ui/utils';
|
|
3
1
|
|
|
4
|
-
|
|
5
|
-
onChange?: () => void;
|
|
6
|
-
label?: string;
|
|
7
|
-
alignLabel?: "horizontal" | "vertical";
|
|
8
|
-
switchSize?: "xsm" | "sm" | "md" | "lg" | "xlg";
|
|
9
|
-
variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
|
|
10
|
-
trackIcon?: {
|
|
11
|
-
checked?: {
|
|
12
|
-
component: (props: IconPropsType) => React.JSX.Element;
|
|
13
|
-
size?: number;
|
|
14
|
-
color?: string;
|
|
15
|
-
};
|
|
16
|
-
unchecked?: {
|
|
17
|
-
component: (props: IconPropsType) => React.JSX.Element;
|
|
18
|
-
size?: number;
|
|
19
|
-
color?: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
thumbIcon?: {
|
|
23
|
-
component: (props: IconPropsType) => React.JSX.Element;
|
|
24
|
-
size?: number;
|
|
25
|
-
color?: string;
|
|
26
|
-
};
|
|
27
|
-
checked?: boolean;
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
className?: string;
|
|
30
|
-
style?: React.CSSProperties;
|
|
31
|
-
}
|
|
32
|
-
declare const Switch: React.FC<ISwitch>;
|
|
33
|
-
|
|
34
|
-
export { type ISwitch, Switch };
|
|
2
|
+
export { }
|
package/dist/index.d.ts
CHANGED
|
@@ -1,34 +1,2 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { IconPropsType } from '@aristobyte-ui/utils';
|
|
3
1
|
|
|
4
|
-
|
|
5
|
-
onChange?: () => void;
|
|
6
|
-
label?: string;
|
|
7
|
-
alignLabel?: "horizontal" | "vertical";
|
|
8
|
-
switchSize?: "xsm" | "sm" | "md" | "lg" | "xlg";
|
|
9
|
-
variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
|
|
10
|
-
trackIcon?: {
|
|
11
|
-
checked?: {
|
|
12
|
-
component: (props: IconPropsType) => React.JSX.Element;
|
|
13
|
-
size?: number;
|
|
14
|
-
color?: string;
|
|
15
|
-
};
|
|
16
|
-
unchecked?: {
|
|
17
|
-
component: (props: IconPropsType) => React.JSX.Element;
|
|
18
|
-
size?: number;
|
|
19
|
-
color?: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
thumbIcon?: {
|
|
23
|
-
component: (props: IconPropsType) => React.JSX.Element;
|
|
24
|
-
size?: number;
|
|
25
|
-
color?: string;
|
|
26
|
-
};
|
|
27
|
-
checked?: boolean;
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
className?: string;
|
|
30
|
-
style?: React.CSSProperties;
|
|
31
|
-
}
|
|
32
|
-
declare const Switch: React.FC<ISwitch>;
|
|
33
|
-
|
|
34
|
-
export { type ISwitch, Switch };
|
|
2
|
+
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "./index.css";
|
|
3
3
|
"use strict";
|
|
4
|
-
var __create = Object.create;
|
|
5
4
|
var __defProp = Object.defineProperty;
|
|
6
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __export = (target, all) => {
|
|
11
|
-
for (var name in all)
|
|
12
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
-
};
|
|
14
8
|
var __copyProps = (to, from, except, desc) => {
|
|
15
9
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
16
10
|
for (let key of __getOwnPropNames(from))
|
|
@@ -19,83 +13,9 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
13
|
}
|
|
20
14
|
return to;
|
|
21
15
|
};
|
|
22
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
24
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
25
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
26
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
27
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
28
|
-
mod
|
|
29
|
-
));
|
|
30
16
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
31
17
|
|
|
32
18
|
// index.ts
|
|
33
19
|
var index_exports = {};
|
|
34
|
-
__export(index_exports, {
|
|
35
|
-
Switch: () => Switch
|
|
36
|
-
});
|
|
37
20
|
module.exports = __toCommonJS(index_exports);
|
|
38
|
-
|
|
39
|
-
// components/Switch.tsx
|
|
40
|
-
var React = __toESM(require("react"));
|
|
41
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
-
var Switch = ({
|
|
43
|
-
onChange,
|
|
44
|
-
label,
|
|
45
|
-
alignLabel = "vertical",
|
|
46
|
-
checked,
|
|
47
|
-
switchSize = "md",
|
|
48
|
-
variant = "default",
|
|
49
|
-
disabled = false,
|
|
50
|
-
trackIcon,
|
|
51
|
-
thumbIcon,
|
|
52
|
-
className = "",
|
|
53
|
-
style = {}
|
|
54
|
-
}) => {
|
|
55
|
-
const id = React.useId();
|
|
56
|
-
const [isChecked, setIsChecked] = React.useState(!!checked);
|
|
57
|
-
const handleChange = () => {
|
|
58
|
-
setIsChecked((prev) => !prev);
|
|
59
|
-
if (onChange) onChange();
|
|
60
|
-
};
|
|
61
|
-
const baseClasses = [
|
|
62
|
-
"switch",
|
|
63
|
-
`switch-size-${switchSize}`,
|
|
64
|
-
`switch-variant-${variant}`,
|
|
65
|
-
`switch-align-label-${alignLabel}`,
|
|
66
|
-
disabled && "switch--disabled",
|
|
67
|
-
className
|
|
68
|
-
].filter(Boolean).join(" ");
|
|
69
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: id, className: baseClasses, style, children: [
|
|
70
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
-
"input",
|
|
72
|
-
{
|
|
73
|
-
id,
|
|
74
|
-
type: "checkbox",
|
|
75
|
-
disabled,
|
|
76
|
-
checked: isChecked,
|
|
77
|
-
onChange: handleChange
|
|
78
|
-
}
|
|
79
|
-
),
|
|
80
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "switch__track relative rounded-full overflow-hidden transition-colors duration-300 ease-in-out", children: [
|
|
81
|
-
(trackIcon == null ? void 0 : trackIcon.checked) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "switch__track-icon switch__track-icon--checked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0", children: trackIcon.checked.component({
|
|
82
|
-
size: trackIcon.checked.size,
|
|
83
|
-
color: trackIcon.checked.color
|
|
84
|
-
}) }),
|
|
85
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "switch__thumb absolute top-1/2 left-0 bg-white rounded-full transform -translate-y-1/2 transition-all duration-200 ease-out flex items-center justify-center z-10", children: thumbIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "switch__thumb-icon flex items-center justify-center", children: thumbIcon.component({
|
|
86
|
-
size: thumbIcon.size,
|
|
87
|
-
color: thumbIcon.color
|
|
88
|
-
}) }) }),
|
|
89
|
-
(trackIcon == null ? void 0 : trackIcon.unchecked) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "switch__track-icon switch__track-icon--unchecked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0", children: trackIcon.unchecked.component({
|
|
90
|
-
size: trackIcon.unchecked.size,
|
|
91
|
-
color: trackIcon.unchecked.color
|
|
92
|
-
}) })
|
|
93
|
-
] }),
|
|
94
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "switch__label ml-2", children: label })
|
|
95
|
-
] });
|
|
96
|
-
};
|
|
97
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
98
|
-
0 && (module.exports = {
|
|
99
|
-
Switch
|
|
100
|
-
});
|
|
101
21
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../index.ts"
|
|
1
|
+
{"version":3,"sources":["../index.ts"],"sourcesContent":["export * from \"./components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,65 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "./index.css";
|
|
3
|
-
|
|
4
|
-
// components/Switch.tsx
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
var Switch = ({
|
|
8
|
-
onChange,
|
|
9
|
-
label,
|
|
10
|
-
alignLabel = "vertical",
|
|
11
|
-
checked,
|
|
12
|
-
switchSize = "md",
|
|
13
|
-
variant = "default",
|
|
14
|
-
disabled = false,
|
|
15
|
-
trackIcon,
|
|
16
|
-
thumbIcon,
|
|
17
|
-
className = "",
|
|
18
|
-
style = {}
|
|
19
|
-
}) => {
|
|
20
|
-
const id = React.useId();
|
|
21
|
-
const [isChecked, setIsChecked] = React.useState(!!checked);
|
|
22
|
-
const handleChange = () => {
|
|
23
|
-
setIsChecked((prev) => !prev);
|
|
24
|
-
if (onChange) onChange();
|
|
25
|
-
};
|
|
26
|
-
const baseClasses = [
|
|
27
|
-
"switch",
|
|
28
|
-
`switch-size-${switchSize}`,
|
|
29
|
-
`switch-variant-${variant}`,
|
|
30
|
-
`switch-align-label-${alignLabel}`,
|
|
31
|
-
disabled && "switch--disabled",
|
|
32
|
-
className
|
|
33
|
-
].filter(Boolean).join(" ");
|
|
34
|
-
return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: baseClasses, style, children: [
|
|
35
|
-
/* @__PURE__ */ jsx(
|
|
36
|
-
"input",
|
|
37
|
-
{
|
|
38
|
-
id,
|
|
39
|
-
type: "checkbox",
|
|
40
|
-
disabled,
|
|
41
|
-
checked: isChecked,
|
|
42
|
-
onChange: handleChange
|
|
43
|
-
}
|
|
44
|
-
),
|
|
45
|
-
/* @__PURE__ */ jsxs("span", { className: "switch__track relative rounded-full overflow-hidden transition-colors duration-300 ease-in-out", children: [
|
|
46
|
-
(trackIcon == null ? void 0 : trackIcon.checked) && /* @__PURE__ */ jsx("span", { className: "switch__track-icon switch__track-icon--checked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0", children: trackIcon.checked.component({
|
|
47
|
-
size: trackIcon.checked.size,
|
|
48
|
-
color: trackIcon.checked.color
|
|
49
|
-
}) }),
|
|
50
|
-
/* @__PURE__ */ jsx("span", { className: "switch__thumb absolute top-1/2 left-0 bg-white rounded-full transform -translate-y-1/2 transition-all duration-200 ease-out flex items-center justify-center z-10", children: thumbIcon && /* @__PURE__ */ jsx("span", { className: "switch__thumb-icon flex items-center justify-center", children: thumbIcon.component({
|
|
51
|
-
size: thumbIcon.size,
|
|
52
|
-
color: thumbIcon.color
|
|
53
|
-
}) }) }),
|
|
54
|
-
(trackIcon == null ? void 0 : trackIcon.unchecked) && /* @__PURE__ */ jsx("span", { className: "switch__track-icon switch__track-icon--unchecked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0", children: trackIcon.unchecked.component({
|
|
55
|
-
size: trackIcon.unchecked.size,
|
|
56
|
-
color: trackIcon.unchecked.color
|
|
57
|
-
}) })
|
|
58
|
-
] }),
|
|
59
|
-
label && /* @__PURE__ */ jsx("span", { className: "switch__label ml-2", children: label })
|
|
60
|
-
] });
|
|
61
|
-
};
|
|
62
|
-
export {
|
|
63
|
-
Switch
|
|
64
|
-
};
|
|
65
3
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aristobyte-ui/switch",
|
|
3
3
|
"description": "A fully typed, customizable Switch/toggle component for React with multiple sizes, variants, label alignments, and optional icons. Built to integrate seamlessly with AristoByteUI design tokens and SCSS modules.",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.61",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
7
7
|
"author": "AristoByte <info@aristobyte.com>",
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"tsup": "^8.5.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@aristobyte-ui/eslint-config": "^1.0.
|
|
66
|
-
"@aristobyte-ui/typescript-config": "^1.0.
|
|
65
|
+
"@aristobyte-ui/eslint-config": "^1.0.61",
|
|
66
|
+
"@aristobyte-ui/typescript-config": "^1.0.61",
|
|
67
67
|
"@turbo/gen": "^2.5.0",
|
|
68
68
|
"@types/node": "^24.3.0",
|
|
69
69
|
"@types/react": "19.1.0",
|
|
@@ -72,7 +72,6 @@
|
|
|
72
72
|
"eslint": "^9.27.0",
|
|
73
73
|
"postcss": "^8.5.3",
|
|
74
74
|
"sass-embedded": "^1.91.0",
|
|
75
|
-
"tailwindcss": "^4.1.7",
|
|
76
75
|
"tsup": "^8.5.0",
|
|
77
76
|
"typescript": "^5.8.3"
|
|
78
77
|
}
|