@starasia/toggle 1.0.3 → 1.0.4

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 (3) hide show
  1. package/dist/toggle.es.js +28 -23
  2. package/dist/toggle.umd.js +17 -12
  3. package/package.json +1 -1
package/dist/toggle.es.js CHANGED
@@ -1,15 +1,20 @@
1
- import { jsxs as e, jsx as n } from "react/jsx-runtime";
1
+ import { jsxs as r, jsx as t } from "react/jsx-runtime";
2
2
  const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
3
3
  :root {
4
4
  /* toogle root color */
5
- --starasia-ui-background-toggle-checked: var(--starasia-ui-brand-primary-default);
6
- --starasia-ui-background-toggle-checked-hover: rgba(var(--starasia-ui-raw-color-brand-active), 1);
7
- --starasia-ui-shadow-toggle-checked: 0px 0px 0px 1px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.28);
5
+ --starasia-ui-background-toggle-checked: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
6
+ --starasia-ui-background-toggle-checked-hover: rgba(var(--starasia-ui-raw-color-brand-active, 57, 82, 116), 1);
7
+ --starasia-ui-shadow-toggle-checked: 0px 0px 0px 1px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.28);
8
8
 
9
9
  --starasia-ui-background-toggle-base: rgba(120, 134, 127, 0.2);
10
10
  --starasia-ui-shadow-toggle-base: 0px 0px 0px 1px rgba(201, 206, 204, 0.28);
11
11
 
12
12
  --starasia-ui-background-toggle-disable: rgba(120, 134, 127, 0.2);
13
+
14
+ --starasia-ui-toggle-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
15
+ --starasia-ui-toggle-color-text-secondary: rgba(120, 134, 127, 1);
16
+ --starasia-ui-toggle-shadow-thumb: rgba(13, 16, 23, 0.07);
17
+ --starasia-ui-toggle-color-thumb-disabled: rgba(255, 254, 255, 0.5);
13
18
  }
14
19
 
15
20
  * {
@@ -33,7 +38,7 @@ const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
33
38
  & p {
34
39
  font-size: var(--starasia-ui-fontSizes-lg, 16px);
35
40
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
36
- color: #78867f;
41
+ color: var(--starasia-ui-toggle-color-text-secondary);
37
42
  }
38
43
  }
39
44
 
@@ -46,7 +51,7 @@ const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
46
51
  & p {
47
52
  font-size: var(--starasia-ui-fontSizes-md, 14px);
48
53
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
49
- color: #78867f;
54
+ color: var(--starasia-ui-toggle-color-text-secondary);
50
55
  }
51
56
  }
52
57
  .starasia-toggle-container-sm {
@@ -58,7 +63,7 @@ const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
58
63
  & p {
59
64
  font-size: var(--starasia-ui-fontSizes-sm, 12px);
60
65
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
61
- color: #78867f;
66
+ color: var(--starasia-ui-toggle-color-text-secondary);
62
67
  }
63
68
  }
64
69
  .starasia-toggle-container-xs {
@@ -70,7 +75,7 @@ const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
70
75
  & p {
71
76
  font-size: var(--starasia-ui-fontSizes-xs, 10px);
72
77
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
73
- color: #78867f;
78
+ color: var(--starasia-ui-toggle-color-text-secondary);
74
79
  }
75
80
  }
76
81
 
@@ -101,7 +106,7 @@ const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
101
106
  }
102
107
 
103
108
  .starasia-toggle-slider::before {
104
- filter: drop-shadow(2px 0px 2px rgba(13, 16, 23, 0.07));
109
+ filter: drop-shadow(2px 0px 2px var(--starasia-ui-toggle-shadow-thumb));
105
110
  }
106
111
  .starasia-toggle-slider.starasia-toggle-xs::before {
107
112
  height: 12px;
@@ -139,7 +144,7 @@ const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
139
144
  .starasia-toggle-slider:before {
140
145
  position: absolute;
141
146
  content: "";
142
- background-color: #fffeff;
147
+ background-color: var(--starasia-ui-toggle-color-white);
143
148
  border-radius: 50%;
144
149
  transition: 0.4s;
145
150
  bottom: 50%;
@@ -164,7 +169,7 @@ input:disabled + .starasia-toggle-slider {
164
169
  background-color: var(--starasia-ui-background-toggle-disable);
165
170
  }
166
171
  input:disabled + .starasia-toggle-slider:before {
167
- background-color: rgba(255, 254, 255, 0.5);
172
+ background-color: var(--starasia-ui-toggle-color-thumb-disabled);
168
173
  /* background-color: var(--starasia-ui-background-active-toggle); */
169
174
  }
170
175
 
@@ -181,27 +186,27 @@ input:checked + .starasia-toggle-slider:before {
181
186
  .starasia-toggle-slider.starasia-toggle-round:before {
182
187
  border-radius: 50%;
183
188
  }
184
- `, o = "starasia-toggle-styles", l = (t) => {
189
+ `, o = "starasia-toggle-styles", l = (n) => {
185
190
  if (!document.getElementById(o)) {
186
191
  const a = document.createElement("style");
187
- a.id = o, a.textContent = t, document.head.appendChild(a);
192
+ a.id = o, a.textContent = n, document.head.appendChild(a);
188
193
  }
189
194
  };
190
195
  l(g);
191
- const c = (t) => {
192
- const { size: a = "md", label: s, description: i, ...r } = t;
193
- return /* @__PURE__ */ e(
196
+ const c = (n) => {
197
+ const { size: a = "md", label: s, description: i, ...e } = n;
198
+ return /* @__PURE__ */ r(
194
199
  "div",
195
200
  {
196
201
  className: `starasia-toggle-container starasia-toggle-container-${a}`,
197
202
  children: [
198
- /* @__PURE__ */ e(
203
+ /* @__PURE__ */ r(
199
204
  "label",
200
205
  {
201
206
  className: `starasia-toggle-switch starasia-toggle-switch-${a}`,
202
207
  children: [
203
- /* @__PURE__ */ n("input", { type: "checkbox", ...r }),
204
- /* @__PURE__ */ n(
208
+ /* @__PURE__ */ t("input", { type: "checkbox", ...e }),
209
+ /* @__PURE__ */ t(
205
210
  "span",
206
211
  {
207
212
  className: `starasia-toggle-slider starasia-toggle-round starasia-toggle-${a}`
@@ -210,18 +215,18 @@ const c = (t) => {
210
215
  ]
211
216
  }
212
217
  ),
213
- s || i ? /* @__PURE__ */ e("div", { children: [
214
- s ? /* @__PURE__ */ n(
218
+ s || i ? /* @__PURE__ */ r("div", { children: [
219
+ s ? /* @__PURE__ */ t(
215
220
  "label",
216
221
  {
217
- htmlFor: r.id,
222
+ htmlFor: e.id,
218
223
  style: {
219
224
  display: "block"
220
225
  },
221
226
  children: s
222
227
  }
223
228
  ) : null,
224
- i ? /* @__PURE__ */ n("p", { children: i }) : null
229
+ i ? /* @__PURE__ */ t("p", { children: i }) : null
225
230
  ] }) : null
226
231
  ]
227
232
  }
package/dist/toggle.umd.js CHANGED
@@ -1,14 +1,19 @@
1
- (function(n,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],a):(n=typeof globalThis<"u"?globalThis:n||self,a(n.Toggle={},n.jsxRuntime))})(this,function(n,a){"use strict";const g=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ (function(t,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],a):(t=typeof globalThis<"u"?globalThis:t||self,a(t.Toggle={},t.jsxRuntime))})(this,function(t,a){"use strict";const g=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
2
2
  :root {
3
3
  /* toogle root color */
4
- --starasia-ui-background-toggle-checked: var(--starasia-ui-brand-primary-default);
5
- --starasia-ui-background-toggle-checked-hover: rgba(var(--starasia-ui-raw-color-brand-active), 1);
6
- --starasia-ui-shadow-toggle-checked: 0px 0px 0px 1px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.28);
4
+ --starasia-ui-background-toggle-checked: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
5
+ --starasia-ui-background-toggle-checked-hover: rgba(var(--starasia-ui-raw-color-brand-active, 57, 82, 116), 1);
6
+ --starasia-ui-shadow-toggle-checked: 0px 0px 0px 1px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.28);
7
7
 
8
8
  --starasia-ui-background-toggle-base: rgba(120, 134, 127, 0.2);
9
9
  --starasia-ui-shadow-toggle-base: 0px 0px 0px 1px rgba(201, 206, 204, 0.28);
10
10
 
11
11
  --starasia-ui-background-toggle-disable: rgba(120, 134, 127, 0.2);
12
+
13
+ --starasia-ui-toggle-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
14
+ --starasia-ui-toggle-color-text-secondary: rgba(120, 134, 127, 1);
15
+ --starasia-ui-toggle-shadow-thumb: rgba(13, 16, 23, 0.07);
16
+ --starasia-ui-toggle-color-thumb-disabled: rgba(255, 254, 255, 0.5);
12
17
  }
13
18
 
14
19
  * {
@@ -32,7 +37,7 @@
32
37
  & p {
33
38
  font-size: var(--starasia-ui-fontSizes-lg, 16px);
34
39
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
35
- color: #78867f;
40
+ color: var(--starasia-ui-toggle-color-text-secondary);
36
41
  }
37
42
  }
38
43
 
@@ -45,7 +50,7 @@
45
50
  & p {
46
51
  font-size: var(--starasia-ui-fontSizes-md, 14px);
47
52
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
48
- color: #78867f;
53
+ color: var(--starasia-ui-toggle-color-text-secondary);
49
54
  }
50
55
  }
51
56
  .starasia-toggle-container-sm {
@@ -57,7 +62,7 @@
57
62
  & p {
58
63
  font-size: var(--starasia-ui-fontSizes-sm, 12px);
59
64
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
60
- color: #78867f;
65
+ color: var(--starasia-ui-toggle-color-text-secondary);
61
66
  }
62
67
  }
63
68
  .starasia-toggle-container-xs {
@@ -69,7 +74,7 @@
69
74
  & p {
70
75
  font-size: var(--starasia-ui-fontSizes-xs, 10px);
71
76
  font-weight: var(--starasia-ui-fontWeights-normal, 300);
72
- color: #78867f;
77
+ color: var(--starasia-ui-toggle-color-text-secondary);
73
78
  }
74
79
  }
75
80
 
@@ -100,7 +105,7 @@
100
105
  }
101
106
 
102
107
  .starasia-toggle-slider::before {
103
- filter: drop-shadow(2px 0px 2px rgba(13, 16, 23, 0.07));
108
+ filter: drop-shadow(2px 0px 2px var(--starasia-ui-toggle-shadow-thumb));
104
109
  }
105
110
  .starasia-toggle-slider.starasia-toggle-xs::before {
106
111
  height: 12px;
@@ -138,7 +143,7 @@
138
143
  .starasia-toggle-slider:before {
139
144
  position: absolute;
140
145
  content: "";
141
- background-color: #fffeff;
146
+ background-color: var(--starasia-ui-toggle-color-white);
142
147
  border-radius: 50%;
143
148
  transition: 0.4s;
144
149
  bottom: 50%;
@@ -163,7 +168,7 @@ input:disabled + .starasia-toggle-slider {
163
168
  background-color: var(--starasia-ui-background-toggle-disable);
164
169
  }
165
170
  input:disabled + .starasia-toggle-slider:before {
166
- background-color: rgba(255, 254, 255, 0.5);
171
+ background-color: var(--starasia-ui-toggle-color-thumb-disabled);
167
172
  /* background-color: var(--starasia-ui-background-active-toggle); */
168
173
  }
169
174
 
@@ -180,4 +185,4 @@ input:checked + .starasia-toggle-slider:before {
180
185
  .starasia-toggle-slider.starasia-toggle-round:before {
181
186
  border-radius: 50%;
182
187
  }
183
- `,o="starasia-toggle-styles";(s=>{if(!document.getElementById(o)){const t=document.createElement("style");t.id=o,t.textContent=s,document.head.appendChild(t)}})(g);const l=s=>{const{size:t="md",label:e,description:i,...r}=s;return a.jsxs("div",{className:`starasia-toggle-container starasia-toggle-container-${t}`,children:[a.jsxs("label",{className:`starasia-toggle-switch starasia-toggle-switch-${t}`,children:[a.jsx("input",{type:"checkbox",...r}),a.jsx("span",{className:`starasia-toggle-slider starasia-toggle-round starasia-toggle-${t}`})]}),e||i?a.jsxs("div",{children:[e?a.jsx("label",{htmlFor:r.id,style:{display:"block"},children:e}):null,i?a.jsx("p",{children:i}):null]}):null]})};n.Toggle=l,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
188
+ `,o="starasia-toggle-styles";(s=>{if(!document.getElementById(o)){const n=document.createElement("style");n.id=o,n.textContent=s,document.head.appendChild(n)}})(g);const l=s=>{const{size:n="md",label:e,description:i,...r}=s;return a.jsxs("div",{className:`starasia-toggle-container starasia-toggle-container-${n}`,children:[a.jsxs("label",{className:`starasia-toggle-switch starasia-toggle-switch-${n}`,children:[a.jsx("input",{type:"checkbox",...r}),a.jsx("span",{className:`starasia-toggle-slider starasia-toggle-round starasia-toggle-${n}`})]}),e||i?a.jsxs("div",{children:[e?a.jsx("label",{htmlFor:r.id,style:{display:"block"},children:e}):null,i?a.jsx("p",{children:i}):null]}):null]})};t.Toggle=l,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/toggle",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "toggle component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/toggle.umd.js",