@starasia/checkbox 1.0.2 → 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 +17 -14
  2. package/dist/checkbox.umd.js +13 -10
  3. package/package.json +6 -6
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
- #1976d2
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,11 +153,11 @@ 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); */
157
- box-shadow: 0px 0px 1px 5px rgba(25, 118, 210, 0.1);
160
+ box-shadow: 0px 0px 1px 5px rgba(var(--starasia-ui-raw-color-brand-default, 74, 106, 148), 0.1);
158
161
  }
159
162
 
160
163
  .starasia-checkbox[type="checkbox"]:disabled {
@@ -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
@@ -1,19 +1,22 @@
1
- (function(e,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],a):(e=typeof globalThis<"u"?globalThis:e||self,a(e.Checkbox={},e.jsxRuntime))})(this,function(e,a){"use strict";const h=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ (function(r,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],a):(r=typeof globalThis<"u"?globalThis:r||self,a(r.Checkbox={},r.jsxRuntime))})(this,function(r,a){"use strict";const h=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
2
2
 
3
3
  :root {
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
- #1976d2
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,11 +152,11 @@
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); */
156
- box-shadow: 0px 0px 1px 5px rgba(25, 118, 210, 0.1);
159
+ box-shadow: 0px 0px 1px 5px rgba(var(--starasia-ui-raw-color-brand-default, 74, 106, 148), 0.1);
157
160
  }
158
161
 
159
162
  .starasia-checkbox[type="checkbox"]:disabled {
@@ -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 r=document.createElement("style");r.id=i,r.textContent=o,document.head.appendChild(r)}})(h);const b=o=>{const{color:r="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]})};e.Checkbox=b,Object.defineProperty(e,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.2",
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",
@@ -12,6 +12,10 @@
12
12
  "dist/*.map",
13
13
  "dist/*.css"
14
14
  ],
15
+ "scripts": {
16
+ "dev": "vite --config vite.config.ts --port 3000",
17
+ "build": "vite build --config vite.config.ts"
18
+ },
15
19
  "keywords": [],
16
20
  "license": "ISC",
17
21
  "type": "module",
@@ -33,9 +37,5 @@
33
37
  "react-dom": "^18.2.0",
34
38
  "@types/react": "^18.2.55",
35
39
  "@types/react-dom": "^18.2.19"
36
- },
37
- "scripts": {
38
- "dev": "vite --config vite.config.ts --port 3000",
39
- "build": "vite build --config vite.config.ts"
40
40
  }
41
- }
41
+ }