ar-design 0.2.33 → 0.2.34

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.
Files changed (4) hide show
  1. package/dist/assets/css/components/form/switch/core/border.css +18 -18
  2. package/dist/assets/css/components/form/switch/styles.css +3 -3
  3. package/dist/components/form/switch/index.js +3 -1
  4. package/package.json +1 -1
package/dist/assets/css/components/form/switch/core/border.css CHANGED
@@ -1,88 +1,88 @@
1
1
  /* #region Border Color -> PRIMARY */
2
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary {
2
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary {
3
3
  box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), .1);
4
4
  }
5
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary > .handle {
5
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary > .handle {
6
6
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .5);
7
7
  }
8
8
  /* #endregion */
9
9
  /* Border Color -> PRIMARY */
10
10
 
11
11
  /* #region Border Color -> PRIMARY-LIGHT */
12
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light {
12
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary-light {
13
13
  box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), .1);
14
14
  }
15
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light > .handle {
15
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary-light > .handle {
16
16
  box-shadow: 0 0 0 2px rgba(var(--primary-light-rgb), .5);
17
17
  }
18
18
  /* #endregion */
19
19
  /* Border Color -> PRIMARY-LIGHT */
20
20
 
21
21
  /* #region Border Color -> SECONDARY */
22
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary {
22
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.secondary {
23
23
  box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), .1);
24
24
  }
25
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary > .handle {
25
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.secondary > .handle {
26
26
  box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), .5);
27
27
  }
28
28
  /* #endregion */
29
29
  /* Border Color -> SECONDARY */
30
30
 
31
31
  /* #region Border Color -> SUCCESS */
32
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.success {
32
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.success {
33
33
  box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), .1);
34
34
  }
35
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.success > .handle {
35
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.success > .handle {
36
36
  box-shadow: 0 0 0 2px rgba(var(--success-rgb), .5);
37
37
  }
38
38
  /* #endregion */
39
39
  /* Border Color -> SUCCESS */
40
40
 
41
41
  /* #region Border Color -> WARNING */
42
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.warning {
42
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.warning {
43
43
  box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), .1);
44
44
  }
45
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.warning > .handle {
45
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.warning > .handle {
46
46
  box-shadow: 0 0 0 2px rgba(var(--warning-rgb), .5);
47
47
  }
48
48
  /* #endregion */
49
49
  /* Border Color -> WARNING */
50
50
 
51
51
  /* #region Border Color -> DANGER */
52
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.danger {
52
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.danger {
53
53
  box-shadow: 0 0 0 2.5px rgba(var(--danger-rgb), .1);
54
54
  }
55
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.danger > .handle {
55
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.danger > .handle {
56
56
  box-shadow: 0 0 0 2px rgba(var(--danger-rgb), .5);
57
57
  }
58
58
  /* #endregion */
59
59
  /* Border Color -> DANGER */
60
60
 
61
61
  /* #region Border Color -> INFORMATION */
62
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.information {
62
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.information {
63
63
  box-shadow: 0 0 0 2.5px rgba(var(--information-rgb), .1);
64
64
  }
65
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.information > .handle {
65
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.information > .handle {
66
66
  box-shadow: 0 0 0 2px rgba(var(--information-rgb), .5);
67
67
  }
68
68
  /* #endregion */
69
69
  /* Border Color -> INFORMATION */
70
70
 
71
71
  /* #region Border Color -> DARK */
72
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.dark {
72
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.dark {
73
73
  box-shadow: 0 0 0 2.5px rgba(var(--dark-rgb), .1);
74
74
  }
75
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.dark > .handle {
75
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.dark > .handle {
76
76
  box-shadow: 0 0 0 2px rgba(var(--dark-rgb), .5);
77
77
  }
78
78
  /* #endregion */
79
79
  /* Border Color -> DARK */
80
80
 
81
81
  /* #region Border Color -> LIGHT */
82
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.light {
82
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.light {
83
83
  box-shadow: 0 0 0 2.5px rgba(var(--light-rgb), .1);
84
84
  }
85
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.light > .handle {
85
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.light > .handle {
86
86
  box-shadow: 0 0 0 2px rgba(var(--light-rgb), .5);
87
87
  }
88
88
  /* #endregion */
package/dist/assets/css/components/form/switch/styles.css CHANGED
@@ -14,7 +14,7 @@
14
14
  /* width: 100%; */
15
15
  user-select: none;
16
16
  }
17
- .ar-switch-wrapper > label > :is(input[type="checkbox"]) {
17
+ .ar-switch-wrapper > label > input[type="checkbox"] {
18
18
  display: none;
19
19
  }
20
20
 
@@ -26,7 +26,7 @@
26
26
  transition: box-shadow 250ms ease-in-out;
27
27
  }
28
28
 
29
- .ar-switch-wrapper > label > :is(input[type="checkbox"]) + .ar-switch > .handle {
29
+ .ar-switch-wrapper > label > input[type="checkbox"] + .ar-switch > .handle {
30
30
  position: absolute;
31
31
  top: 50%;
32
32
  left: 0.15rem;
@@ -38,7 +38,7 @@
38
38
  height: 0.75rem;
39
39
  transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
40
40
  }
41
- .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch > .handle {
41
+ .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch > .handle {
42
42
  left: calc(2.25rem - 0.9rem);
43
43
  width: 1rem;
44
44
  height: 1rem;
package/dist/components/form/switch/index.js CHANGED
@@ -5,9 +5,11 @@ import Utils from "../../../libs/infrastructure/shared/Utils";
5
5
  const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...attributes }) => {
6
6
  // refs
7
7
  let _switch = useRef(null);
8
+ const _inputClassName = [];
8
9
  const _switchClassName = ["ar-switch"];
9
10
  // states
10
11
  const [checked, setChecked] = useState(attributes.checked ?? false);
12
+ _inputClassName.push(attributes.checked ? "checked" : "unchecked");
11
13
  _switchClassName.push(...Utils.GetClassName("filled", attributes.checked ? status : "light", border, undefined, undefined, attributes.className));
12
14
  // useEffects
13
15
  useEffect(() => {
@@ -15,7 +17,7 @@ const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...att
15
17
  }, [attributes.checked]);
16
18
  return (React.createElement("div", { className: "ar-switch-wrapper" },
17
19
  React.createElement("label", null,
18
- React.createElement("input", { type: "checkbox", ...attributes, checked: checked, size: 0, onChange: (event) => {
20
+ React.createElement("input", { type: "checkbox", ...attributes, className: _inputClassName.map((c) => c).join(" "), checked: checked, size: 0, onChange: (event) => {
19
21
  event.stopPropagation();
20
22
  (() => {
21
23
  setChecked(event.target.checked);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.2.33",
3
+ "version": "0.2.34",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",