@starasia/badges 1.0.2 → 1.0.3

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/badges.es.js +64 -41
  2. package/dist/badges.umd.js +49 -26
  3. package/package.json +6 -6
package/dist/badges.es.js CHANGED
@@ -1,6 +1,29 @@
1
- import { jsxs as c } from "react/jsx-runtime";
1
+ import { jsxs as b } from "react/jsx-runtime";
2
2
  import o from "react";
3
- const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
3
+ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
4
+
5
+ :root {
6
+ /* info (semantic blue) */
7
+ --starasia-ui-badges-color-info-bg: var(--starasia-ui-color-blue-50, rgba(227, 242, 253, 1));
8
+ --starasia-ui-badges-color-info-text: var(--starasia-ui-color-blue-700, rgba(25, 118, 210, 1));
9
+ --starasia-ui-badges-color-info-border: var(--starasia-ui-color-blue-300, rgba(100, 181, 246, 1));
10
+ /* success */
11
+ --starasia-ui-badges-color-success-bg: var(--starasia-ui-color-green-50, rgba(220, 246, 234, 1));
12
+ --starasia-ui-badges-color-success-text: var(--starasia-ui-color-green-700, rgba(32, 137, 88, 1));
13
+ /* danger */
14
+ --starasia-ui-badges-color-danger-bg: var(--starasia-ui-color-red-50, rgba(255, 240, 243, 1));
15
+ --starasia-ui-badges-color-danger-text: var(--starasia-ui-color-red-700, rgba(164, 19, 60, 1));
16
+ /* warning */
17
+ --starasia-ui-badges-color-warning-bg: var(--starasia-ui-color-orange-50, rgba(250, 246, 224, 1));
18
+ --starasia-ui-badges-color-warning-text: var(--starasia-ui-color-orange-700, rgba(152, 104, 0, 1));
19
+ /* dark */
20
+ --starasia-ui-badges-color-dark-bg: var(--starasia-ui-color-gray-100, rgba(239, 243, 248, 1));
21
+ --starasia-ui-badges-color-dark-text: var(--starasia-ui-color-gray-700, rgba(72, 80, 76, 1));
22
+ /* neutral */
23
+ --starasia-ui-badges-color-neutral-border: var(--starasia-ui-color-gray-50, rgba(249, 250, 251, 1));
24
+ --starasia-ui-badges-color-neutral-bg: var(--starasia-ui-color-purple-50, rgba(233, 222, 245, 1));
25
+ --starasia-ui-badges-color-neutral-text: var(--starasia-ui-color-purple-500, rgba(126, 57, 197, 1));
26
+ }
4
27
 
5
28
  .starasia-badges {
6
29
  display: flex;
@@ -59,104 +82,104 @@ const g = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@40
59
82
 
60
83
  /* STYLES FOR BADGE VARIANT */
61
84
  .starasia-badges-info {
62
- border-color: var(--starasia-ui-color-blue-50, #e3f2fd);
63
- background: var(--starasia-ui-color-blue-50, #e3f2fd);
64
- color: var(--starasia-ui-color-blue-700, #1976d2);
85
+ border-color: var(--starasia-ui-badges-color-info-bg);
86
+ background: var(--starasia-ui-badges-color-info-bg);
87
+ color: var(--starasia-ui-badges-color-info-text);
65
88
  }
66
89
 
67
90
  .starasia-badges-info.starasia-badges-border {
68
- border-color: var(--starasia-ui-color-blue-700, #64b5f6);
91
+ border-color: var(--starasia-ui-badges-color-info-border);
69
92
  }
70
93
 
71
94
  .starasia-badges-success {
72
- border-color: var(--starasia-ui-color-green-50, #dcf6ea);
73
- background: var(--starasia-ui-color-green-50, #dcf6ea);
74
- color: var(--starasia-ui-color-green-700, #208958);
95
+ border-color: var(--starasia-ui-badges-color-success-bg);
96
+ background: var(--starasia-ui-badges-color-success-bg);
97
+ color: var(--starasia-ui-badges-color-success-text);
75
98
  }
76
99
 
77
100
  .starasia-badges-success.starasia-badges-border {
78
- border-color: var(--starasia-ui-color-green-700, #208958);
101
+ border-color: var(--starasia-ui-badges-color-success-text);
79
102
  }
80
103
 
81
104
  .starasia-badges-danger {
82
- border-color: var(--starasia-ui-color-red-50, #fff0f3);
83
- background: var(--starasia-ui-color-red-50, #fff0f3);
84
- color: var(--starasia-ui-color-red-700, #a4133c);
105
+ border-color: var(--starasia-ui-badges-color-danger-bg);
106
+ background: var(--starasia-ui-badges-color-danger-bg);
107
+ color: var(--starasia-ui-badges-color-danger-text);
85
108
  }
86
109
 
87
110
  .starasia-badges-danger.starasia-badges-border {
88
- border-color: var(--starasia-ui-color-red-700, #a4133c);
111
+ border-color: var(--starasia-ui-badges-color-danger-text);
89
112
  }
90
113
 
91
114
  .starasia-badges-warning {
92
- border-color: var(--starasia-ui-color-orange-50, #faf6e0);
93
- background: var(--starasia-ui-color-orange-50, #faf6e0);
94
- color: var(--starasia-ui-color-orange-700, #986800);
115
+ border-color: var(--starasia-ui-badges-color-warning-bg);
116
+ background: var(--starasia-ui-badges-color-warning-bg);
117
+ color: var(--starasia-ui-badges-color-warning-text);
95
118
  }
96
119
 
97
120
  .starasia-badges-warning.starasia-badges-border {
98
- border-color: var(--starasia-ui-color-orange-700, #986800);
121
+ border-color: var(--starasia-ui-badges-color-warning-text);
99
122
  }
100
123
 
101
124
  .starasia-badges-dark {
102
- border-color: var(--starasia-ui-color-gray-100, #eff3f8);
103
- background: var(--starasia-ui-color-gray-100, #eff3f8);
104
- color: var(--starasia-ui-color-gray-700, #48504c);
125
+ border-color: var(--starasia-ui-badges-color-dark-bg);
126
+ background: var(--starasia-ui-badges-color-dark-bg);
127
+ color: var(--starasia-ui-badges-color-dark-text);
105
128
  }
106
129
 
107
130
  .starasia-badges-dark.starasia-badges-border {
108
- border-color: var(--starasia-ui-color-gray-700, #48504c);
131
+ border-color: var(--starasia-ui-badges-color-dark-text);
109
132
  }
110
133
 
111
134
  .starasia-badges-neutral {
112
- border-color: var(--starasia-ui-color-gray-50, #f9fafb);
113
- background: var(--starasia-ui-color-purple-50, #e9def5);
114
- color: var(--starasia-ui-color-purple-500, #7e39c5);
135
+ border-color: var(--starasia-ui-badges-color-neutral-border);
136
+ background: var(--starasia-ui-badges-color-neutral-bg);
137
+ color: var(--starasia-ui-badges-color-neutral-text);
115
138
  }
116
139
 
117
140
  .starasia-badges-neutral.starasia-badges-border {
118
- border-color: var(--starasia-ui-color-purple-500, #7e39c5);
141
+ border-color: var(--starasia-ui-badges-color-neutral-text);
119
142
  }
120
- `, t = "starasia-badges-styles", u = (a) => {
143
+ `, t = "starasia-badges-styles", c = (a) => {
121
144
  if (!document.getElementById(t)) {
122
145
  const s = document.createElement("style");
123
146
  s.id = t, s.textContent = a, document.head.appendChild(s);
124
147
  }
125
148
  };
126
- u(g);
127
- const i = {
149
+ c(l);
150
+ const n = {
128
151
  xs: 14,
129
152
  sm: 16,
130
153
  md: 18,
131
154
  lg: 18
132
- }, v = ({
155
+ }, x = ({
133
156
  size: a = "md",
134
157
  variant: s = "info",
135
158
  text: e,
136
- LeftIcon: n,
159
+ LeftIcon: i,
137
160
  RightIcon: r,
138
161
  border: d,
139
- corners: l = "rounded"
140
- }) => /* @__PURE__ */ c("div", { className: b(a, s, d, l), children: [
141
- n ? o.cloneElement(n, {
142
- width: i[a],
143
- height: i[a],
162
+ corners: g = "rounded"
163
+ }) => /* @__PURE__ */ b("div", { className: u(a, s, d, g), children: [
164
+ i ? o.cloneElement(i, {
165
+ width: n[a],
166
+ height: n[a],
144
167
  style: {
145
168
  color: "inherit"
146
169
  }
147
170
  }) : null,
148
171
  e,
149
172
  r ? o.cloneElement(r, {
150
- width: i[a],
151
- height: i[a],
173
+ width: n[a],
174
+ height: n[a],
152
175
  style: {
153
176
  color: "inherit"
154
177
  }
155
178
  }) : null
156
- ] }), b = (a, s, e, n) => {
179
+ ] }), u = (a, s, e, i) => {
157
180
  let r = ["starasia-badges"];
158
- return a && r.push(`starasia-badges-${a}`), s && r.push(`starasia-badges-${s}`), e && r.push("starasia-badges-border"), n === "rounded" ? r.push("starasia-badges-rounded") : r.push("starasia-badges-circular"), r.join(" ");
181
+ return a && r.push(`starasia-badges-${a}`), s && r.push(`starasia-badges-${s}`), e && r.push("starasia-badges-border"), i === "rounded" ? r.push("starasia-badges-rounded") : r.push("starasia-badges-circular"), r.join(" ");
159
182
  };
160
183
  export {
161
- v as Badges
184
+ x as Badges
162
185
  };
package/dist/badges.umd.js CHANGED
@@ -1,4 +1,27 @@
1
- (function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.Badges={},r.jsxRuntime,r.React))})(this,function(r,e,d){"use strict";const l=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
1
+ (function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r.Badges={},r.jsxRuntime,r.React))})(this,function(r,i,d){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
2
+
3
+ :root {
4
+ /* info (semantic blue) */
5
+ --starasia-ui-badges-color-info-bg: var(--starasia-ui-color-blue-50, rgba(227, 242, 253, 1));
6
+ --starasia-ui-badges-color-info-text: var(--starasia-ui-color-blue-700, rgba(25, 118, 210, 1));
7
+ --starasia-ui-badges-color-info-border: var(--starasia-ui-color-blue-300, rgba(100, 181, 246, 1));
8
+ /* success */
9
+ --starasia-ui-badges-color-success-bg: var(--starasia-ui-color-green-50, rgba(220, 246, 234, 1));
10
+ --starasia-ui-badges-color-success-text: var(--starasia-ui-color-green-700, rgba(32, 137, 88, 1));
11
+ /* danger */
12
+ --starasia-ui-badges-color-danger-bg: var(--starasia-ui-color-red-50, rgba(255, 240, 243, 1));
13
+ --starasia-ui-badges-color-danger-text: var(--starasia-ui-color-red-700, rgba(164, 19, 60, 1));
14
+ /* warning */
15
+ --starasia-ui-badges-color-warning-bg: var(--starasia-ui-color-orange-50, rgba(250, 246, 224, 1));
16
+ --starasia-ui-badges-color-warning-text: var(--starasia-ui-color-orange-700, rgba(152, 104, 0, 1));
17
+ /* dark */
18
+ --starasia-ui-badges-color-dark-bg: var(--starasia-ui-color-gray-100, rgba(239, 243, 248, 1));
19
+ --starasia-ui-badges-color-dark-text: var(--starasia-ui-color-gray-700, rgba(72, 80, 76, 1));
20
+ /* neutral */
21
+ --starasia-ui-badges-color-neutral-border: var(--starasia-ui-color-gray-50, rgba(249, 250, 251, 1));
22
+ --starasia-ui-badges-color-neutral-bg: var(--starasia-ui-color-purple-50, rgba(233, 222, 245, 1));
23
+ --starasia-ui-badges-color-neutral-text: var(--starasia-ui-color-purple-500, rgba(126, 57, 197, 1));
24
+ }
2
25
 
3
26
  .starasia-badges {
4
27
  display: flex;
@@ -57,62 +80,62 @@
57
80
 
58
81
  /* STYLES FOR BADGE VARIANT */
59
82
  .starasia-badges-info {
60
- border-color: var(--starasia-ui-color-blue-50, #e3f2fd);
61
- background: var(--starasia-ui-color-blue-50, #e3f2fd);
62
- color: var(--starasia-ui-color-blue-700, #1976d2);
83
+ border-color: var(--starasia-ui-badges-color-info-bg);
84
+ background: var(--starasia-ui-badges-color-info-bg);
85
+ color: var(--starasia-ui-badges-color-info-text);
63
86
  }
64
87
 
65
88
  .starasia-badges-info.starasia-badges-border {
66
- border-color: var(--starasia-ui-color-blue-700, #64b5f6);
89
+ border-color: var(--starasia-ui-badges-color-info-border);
67
90
  }
68
91
 
69
92
  .starasia-badges-success {
70
- border-color: var(--starasia-ui-color-green-50, #dcf6ea);
71
- background: var(--starasia-ui-color-green-50, #dcf6ea);
72
- color: var(--starasia-ui-color-green-700, #208958);
93
+ border-color: var(--starasia-ui-badges-color-success-bg);
94
+ background: var(--starasia-ui-badges-color-success-bg);
95
+ color: var(--starasia-ui-badges-color-success-text);
73
96
  }
74
97
 
75
98
  .starasia-badges-success.starasia-badges-border {
76
- border-color: var(--starasia-ui-color-green-700, #208958);
99
+ border-color: var(--starasia-ui-badges-color-success-text);
77
100
  }
78
101
 
79
102
  .starasia-badges-danger {
80
- border-color: var(--starasia-ui-color-red-50, #fff0f3);
81
- background: var(--starasia-ui-color-red-50, #fff0f3);
82
- color: var(--starasia-ui-color-red-700, #a4133c);
103
+ border-color: var(--starasia-ui-badges-color-danger-bg);
104
+ background: var(--starasia-ui-badges-color-danger-bg);
105
+ color: var(--starasia-ui-badges-color-danger-text);
83
106
  }
84
107
 
85
108
  .starasia-badges-danger.starasia-badges-border {
86
- border-color: var(--starasia-ui-color-red-700, #a4133c);
109
+ border-color: var(--starasia-ui-badges-color-danger-text);
87
110
  }
88
111
 
89
112
  .starasia-badges-warning {
90
- border-color: var(--starasia-ui-color-orange-50, #faf6e0);
91
- background: var(--starasia-ui-color-orange-50, #faf6e0);
92
- color: var(--starasia-ui-color-orange-700, #986800);
113
+ border-color: var(--starasia-ui-badges-color-warning-bg);
114
+ background: var(--starasia-ui-badges-color-warning-bg);
115
+ color: var(--starasia-ui-badges-color-warning-text);
93
116
  }
94
117
 
95
118
  .starasia-badges-warning.starasia-badges-border {
96
- border-color: var(--starasia-ui-color-orange-700, #986800);
119
+ border-color: var(--starasia-ui-badges-color-warning-text);
97
120
  }
98
121
 
99
122
  .starasia-badges-dark {
100
- border-color: var(--starasia-ui-color-gray-100, #eff3f8);
101
- background: var(--starasia-ui-color-gray-100, #eff3f8);
102
- color: var(--starasia-ui-color-gray-700, #48504c);
123
+ border-color: var(--starasia-ui-badges-color-dark-bg);
124
+ background: var(--starasia-ui-badges-color-dark-bg);
125
+ color: var(--starasia-ui-badges-color-dark-text);
103
126
  }
104
127
 
105
128
  .starasia-badges-dark.starasia-badges-border {
106
- border-color: var(--starasia-ui-color-gray-700, #48504c);
129
+ border-color: var(--starasia-ui-badges-color-dark-text);
107
130
  }
108
131
 
109
132
  .starasia-badges-neutral {
110
- border-color: var(--starasia-ui-color-gray-50, #f9fafb);
111
- background: var(--starasia-ui-color-purple-50, #e9def5);
112
- color: var(--starasia-ui-color-purple-500, #7e39c5);
133
+ border-color: var(--starasia-ui-badges-color-neutral-border);
134
+ background: var(--starasia-ui-badges-color-neutral-bg);
135
+ color: var(--starasia-ui-badges-color-neutral-text);
113
136
  }
114
137
 
115
138
  .starasia-badges-neutral.starasia-badges-border {
116
- border-color: var(--starasia-ui-color-purple-500, #7e39c5);
139
+ border-color: var(--starasia-ui-badges-color-neutral-text);
117
140
  }
118
- `,c="starasia-badges-styles";(a=>{if(!document.getElementById(c)){const n=document.createElement("style");n.id=c,n.textContent=a,document.head.appendChild(n)}})(l);const i={xs:14,sm:16,md:18,lg:18},u=({size:a="md",variant:n="info",text:t,LeftIcon:o,RightIcon:s,border:b,corners:f="rounded"})=>e.jsxs("div",{className:g(a,n,b,f),children:[o?d.cloneElement(o,{width:i[a],height:i[a],style:{color:"inherit"}}):null,t,s?d.cloneElement(s,{width:i[a],height:i[a],style:{color:"inherit"}}):null]}),g=(a,n,t,o)=>{let s=["starasia-badges"];return a&&s.push(`starasia-badges-${a}`),n&&s.push(`starasia-badges-${n}`),t&&s.push("starasia-badges-border"),o==="rounded"?s.push("starasia-badges-rounded"):s.push("starasia-badges-circular"),s.join(" ")};r.Badges=u,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
141
+ `,g="starasia-badges-styles";(a=>{if(!document.getElementById(g)){const n=document.createElement("style");n.id=g,n.textContent=a,document.head.appendChild(n)}})(b);const e={xs:14,sm:16,md:18,lg:18},u=({size:a="md",variant:n="info",text:t,LeftIcon:o,RightIcon:s,border:l,corners:p="rounded"})=>i.jsxs("div",{className:c(a,n,l,p),children:[o?d.cloneElement(o,{width:e[a],height:e[a],style:{color:"inherit"}}):null,t,s?d.cloneElement(s,{width:e[a],height:e[a],style:{color:"inherit"}}):null]}),c=(a,n,t,o)=>{let s=["starasia-badges"];return a&&s.push(`starasia-badges-${a}`),n&&s.push(`starasia-badges-${n}`),t&&s.push("starasia-badges-border"),o==="rounded"?s.push("starasia-badges-rounded"):s.push("starasia-badges-circular"),s.join(" ")};r.Badges=u,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/badges",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Badges component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/badges.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
+ }