@starasia/checkbox 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/checkbox.es.js +15 -12
  2. package/dist/checkbox.umd.js +10 -7
  3. package/package.json +1 -1
package/dist/checkbox.es.js CHANGED
@@ -5,16 +5,19 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
5
5
  /* color */
6
6
  --starasia-ui-checkbox-color-primary-black: var(
7
7
  --starasia-ui-color-gray-700,
8
- #374151
8
+ rgba(55, 65, 81, 1)
9
9
  );
10
10
  --starasia-ui-checkbox-color-secondary-black: var(
11
11
  --starasia-ui-color-gray-50,
12
- #f9fafb
12
+ rgba(249, 250, 251, 1)
13
13
  );
14
14
  --starasia-ui-checkbox-color-primary-blue: var(
15
15
  --starasia-ui-brand-primary-default,
16
16
  rgba(74, 106, 148, 1)
17
17
  );
18
+ --starasia-ui-checkbox-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
19
+ --starasia-ui-checkbox-color-border-default: rgba(24, 26, 25, 1);
20
+ --starasia-ui-checkbox-color-hover-shadow: rgba(201, 206, 204, 0.2);
18
21
 
19
22
  /* border radius */
20
23
  --starasia-ui-checkbox-border-radius: var(--starasia-ui-radii-sm, 2px);
@@ -86,19 +89,19 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
86
89
  width: var(--starasia-ui-checkbox-width-sm);
87
90
  height: var(--starasia-ui-checkbox-height-sm);
88
91
  border-radius: 2px;
89
- border: 1px solid #181a19;
92
+ border: 1px solid var(--starasia-ui-checkbox-color-border-default);
90
93
  }
91
94
  .starasia-checkbox[type="checkbox"].md {
92
95
  width: var(--starasia-ui-checkbox-width-md);
93
96
  height: var(--starasia-ui-checkbox-height-md);
94
97
  border-radius: 3px;
95
- border: 1px solid #181a19;
98
+ border: 1px solid var(--starasia-ui-checkbox-color-border-default);
96
99
  }
97
100
  .starasia-checkbox[type="checkbox"].lg {
98
101
  width: var(--starasia-ui-checkbox-width-lg);
99
102
  height: var(--starasia-ui-checkbox-height-lg);
100
103
  border-radius: 3px;
101
- border: 1px solid #181a19;
104
+ border: 1px solid var(--starasia-ui-checkbox-color-border-default);
102
105
  }
103
106
 
104
107
  .starasia-checkbox[type="checkbox"]:checked {
@@ -150,7 +153,7 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
150
153
 
151
154
  .starasia-checkbox[type="checkbox"]:hover:not(:disabled) {
152
155
  /* border-color: var(--starasia-ui-checkbox-color-primary-blue); */
153
- box-shadow: 0px 0px 1px 5px rgba(201, 206, 204, 0.2);
156
+ box-shadow: 0px 0px 1px 5px var(--starasia-ui-checkbox-color-hover-shadow);
154
157
  }
155
158
  .starasia-checkbox[type="checkbox"]:checked:hover:not(:disabled) {
156
159
  /* border-color: var(--starasia-ui-checkbox-color-primary-blue); */
@@ -182,8 +185,8 @@ x(l);
182
185
  const p = (o) => {
183
186
  const {
184
187
  color: a = "blue",
185
- label: n,
186
- sizes: c = "md",
188
+ label: c,
189
+ sizes: n = "md",
187
190
  id: i,
188
191
  description: r,
189
192
  variant: h = "select",
@@ -193,7 +196,7 @@ const p = (o) => {
193
196
  "label",
194
197
  {
195
198
  htmlFor: i,
196
- className: `starasia-checkbox-container ${c}`,
199
+ className: `starasia-checkbox-container ${n}`,
197
200
  style: { alignItems: r ? "start" : "center" },
198
201
  children: [
199
202
  /* @__PURE__ */ e(
@@ -201,12 +204,12 @@ const p = (o) => {
201
204
  {
202
205
  id: i,
203
206
  type: "checkbox",
204
- className: `starasia-checkbox ${c} starasia-checkbox-${h}`,
207
+ className: `starasia-checkbox ${n} starasia-checkbox-${h}`,
205
208
  ...b
206
209
  }
207
210
  ),
208
- n || r ? /* @__PURE__ */ s("div", { children: [
209
- n ? /* @__PURE__ */ e("p", { style: { lineHeight: 1.07 }, children: n }) : null,
211
+ c || r ? /* @__PURE__ */ s("div", { children: [
212
+ c ? /* @__PURE__ */ e("p", { style: { lineHeight: 1.07 }, children: c }) : null,
210
213
  r ? /* @__PURE__ */ e(
211
214
  "p",
212
215
  {
package/dist/checkbox.umd.js CHANGED
@@ -4,16 +4,19 @@
4
4
  /* color */
5
5
  --starasia-ui-checkbox-color-primary-black: var(
6
6
  --starasia-ui-color-gray-700,
7
- #374151
7
+ rgba(55, 65, 81, 1)
8
8
  );
9
9
  --starasia-ui-checkbox-color-secondary-black: var(
10
10
  --starasia-ui-color-gray-50,
11
- #f9fafb
11
+ rgba(249, 250, 251, 1)
12
12
  );
13
13
  --starasia-ui-checkbox-color-primary-blue: var(
14
14
  --starasia-ui-brand-primary-default,
15
15
  rgba(74, 106, 148, 1)
16
16
  );
17
+ --starasia-ui-checkbox-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
18
+ --starasia-ui-checkbox-color-border-default: rgba(24, 26, 25, 1);
19
+ --starasia-ui-checkbox-color-hover-shadow: rgba(201, 206, 204, 0.2);
17
20
 
18
21
  /* border radius */
19
22
  --starasia-ui-checkbox-border-radius: var(--starasia-ui-radii-sm, 2px);
@@ -85,19 +88,19 @@
85
88
  width: var(--starasia-ui-checkbox-width-sm);
86
89
  height: var(--starasia-ui-checkbox-height-sm);
87
90
  border-radius: 2px;
88
- border: 1px solid #181a19;
91
+ border: 1px solid var(--starasia-ui-checkbox-color-border-default);
89
92
  }
90
93
  .starasia-checkbox[type="checkbox"].md {
91
94
  width: var(--starasia-ui-checkbox-width-md);
92
95
  height: var(--starasia-ui-checkbox-height-md);
93
96
  border-radius: 3px;
94
- border: 1px solid #181a19;
97
+ border: 1px solid var(--starasia-ui-checkbox-color-border-default);
95
98
  }
96
99
  .starasia-checkbox[type="checkbox"].lg {
97
100
  width: var(--starasia-ui-checkbox-width-lg);
98
101
  height: var(--starasia-ui-checkbox-height-lg);
99
102
  border-radius: 3px;
100
- border: 1px solid #181a19;
103
+ border: 1px solid var(--starasia-ui-checkbox-color-border-default);
101
104
  }
102
105
 
103
106
  .starasia-checkbox[type="checkbox"]:checked {
@@ -149,7 +152,7 @@
149
152
 
150
153
  .starasia-checkbox[type="checkbox"]:hover:not(:disabled) {
151
154
  /* border-color: var(--starasia-ui-checkbox-color-primary-blue); */
152
- box-shadow: 0px 0px 1px 5px rgba(201, 206, 204, 0.2);
155
+ box-shadow: 0px 0px 1px 5px var(--starasia-ui-checkbox-color-hover-shadow);
153
156
  }
154
157
  .starasia-checkbox[type="checkbox"]:checked:hover:not(:disabled) {
155
158
  /* border-color: var(--starasia-ui-checkbox-color-primary-blue); */
@@ -171,4 +174,4 @@
171
174
  box-shadow: none;
172
175
  background-color: #aeb6b2;
173
176
  }
174
- `,i="starasia-checkbox-styles";(o=>{if(!document.getElementById(i)){const e=document.createElement("style");e.id=i,e.textContent=o,document.head.appendChild(e)}})(h);const b=o=>{const{color:e="blue",label:c,sizes:s="md",id:t,description:n,variant:l="select",...x}=o;return a.jsxs("label",{htmlFor:t,className:`starasia-checkbox-container ${s}`,style:{alignItems:n?"start":"center"},children:[a.jsx("input",{id:t,type:"checkbox",className:`starasia-checkbox ${s} starasia-checkbox-${l}`,...x}),c||n?a.jsxs("div",{children:[c?a.jsx("p",{style:{lineHeight:1.07},children:c}):null,n?a.jsx("p",{className:"starasia-checkbox-description",style:{color:"#78867F"},children:n}):null]}):null]})};r.Checkbox=b,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
177
+ `,i="starasia-checkbox-styles";(c=>{if(!document.getElementById(i)){const e=document.createElement("style");e.id=i,e.textContent=c,document.head.appendChild(e)}})(h);const b=c=>{const{color:e="blue",label:n,sizes:s="md",id:t,description:o,variant:l="select",...x}=c;return a.jsxs("label",{htmlFor:t,className:`starasia-checkbox-container ${s}`,style:{alignItems:o?"start":"center"},children:[a.jsx("input",{id:t,type:"checkbox",className:`starasia-checkbox ${s} starasia-checkbox-${l}`,...x}),n||o?a.jsxs("div",{children:[n?a.jsx("p",{style:{lineHeight:1.07},children:n}):null,o?a.jsx("p",{className:"starasia-checkbox-description",style:{color:"#78867F"},children:o}):null]}):null]})};r.Checkbox=b,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/checkbox",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "checkbox component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/checkbox.umd.js",