@starasia/radio 1.0.4 → 2.0.1

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/radio.es.js +52 -70
  2. package/dist/radio.umd.js +41 -59
  3. package/package.json +1 -1
package/dist/radio.es.js CHANGED
@@ -1,40 +1,22 @@
1
- import { jsxs as s, jsx as o } from "react/jsx-runtime";
1
+ import { jsxs as t, jsx as s } from "react/jsx-runtime";
2
2
  const e = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
3
3
 
4
4
  :root {
5
- /* font weight */
6
- --starasia-ui-radio-font-weight-normal: var(
7
- --starasia-ui-fontWeights-normal,
8
- 300
9
- );
10
- --starasia-ui-radio-font-weight-medium: var(
11
- --starasia-ui-fontWeights-medium,
12
- 400
13
- );
14
-
15
- /* width */
16
- --starasia-ui-radio-width-sm: 14px;
17
- --starasia-ui-radio-width-md: var(--starasia-ui-w-4, 16px);
18
- --starasia-ui-radio-width-lg: 18px;
19
-
20
- /* height */
21
- --starasia-ui-radio-height-sm: 14px;
22
- --starasia-ui-radio-height-md: var(--starasia-ui-h-4, 16px);
23
- --starasia-ui-radio-height-lg: 18px;
24
-
25
- /* font size */
26
- --starasia-ui-radio-font-size-sm: var(--starasia-ui-fontSizes-sm, 12px);
27
- --starasia-ui-radio-font-size-md: var(--starasia-ui-fontSizes-md, 14px);
28
- --starasia-ui-radio-font-size-lg: var(--starasia-ui-fontSizes-lg, 16px);
29
-
30
- /* color */
31
- --starasia-ui-radio-color-primary-blue: var(
32
- --starasia-ui-brand-primary-default,
33
- rgba(74, 106, 148, 1)
34
- );
35
- --starasia-ui-radio-color-border-default: rgba(0, 0, 0, 1);
36
- --starasia-ui-radio-color-disabled: rgba(174, 182, 178, 1);
37
- --starasia-ui-radio-color-hover-shadow: rgba(201, 206, 204, 0.2);
5
+ --sa-radio-font-weight-normal: var(--sa-font-weight-normal, 300);
6
+ --sa-radio-font-weight-medium: var(--sa-font-weight-medium, 400);
7
+ --sa-radio-width-sm: 14px;
8
+ --sa-radio-width-md: 16px;
9
+ --sa-radio-width-lg: 18px;
10
+ --sa-radio-height-sm: 14px;
11
+ --sa-radio-height-md: 16px;
12
+ --sa-radio-height-lg: 18px;
13
+ --sa-radio-font-size-sm: var(--sa-font-size-sm, 0.75rem);
14
+ --sa-radio-font-size-md: var(--sa-font-size-md, 0.875rem);
15
+ --sa-radio-font-size-lg: var(--sa-font-size-lg, 1rem);
16
+ --sa-radio-color-brand: var(--sa-background-brand, #04254f);
17
+ --sa-radio-color-border-default: #000000;
18
+ --sa-radio-color-disabled: var(--sa-color-gray-400, #b7b9be);
19
+ --sa-radio-color-hover-shadow: var(--sa-color-black-alpha-a20, #0b120e24);
38
20
  }
39
21
 
40
22
  * {
@@ -47,36 +29,36 @@ const e = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
47
29
  width: max-content;
48
30
  display: flex;
49
31
  & label {
50
- font-weight: var(--starasia-ui-radio-font-weight-medium);
32
+ font-weight: var(--sa-radio-font-weight-medium);
51
33
  }
52
34
  & span {
53
- font-weight: var(--starasia-ui-radio-font-weight-normal);
35
+ font-weight: var(--sa-radio-font-weight-normal);
54
36
  }
55
37
  }
56
38
 
57
39
  .starasia-radio-container:has(.starasia-radio-input-sm) {
58
40
  gap: 12px;
59
- font-size: var(--starasia-ui-radio-font-size-sm);
41
+ font-size: var(--sa-radio-font-size-sm);
60
42
  }
61
43
  .starasia-radio-container:has(.starasia-radio-input-md) {
62
44
  gap: 12px;
63
- font-size: var(--starasia-ui-radio-font-size-md);
45
+ font-size: var(--sa-radio-font-size-md);
64
46
  }
65
47
  .starasia-radio-container:has(.starasia-radio-input-lg) {
66
48
  gap: 16px;
67
- font-size: var(--starasia-ui-radio-font-size-lg);
49
+ font-size: var(--sa-radio-font-size-lg);
68
50
  }
69
51
 
70
52
  input.starasia-radio-input[type="radio"] {
71
53
  appearance: none;
72
- border: 1px solid var(--starasia-ui-radio-color-border-default);
54
+ border: 1px solid var(--sa-radio-color-border-default);
73
55
  border-radius: 50%;
74
56
  outline: none;
75
57
  background-color: transparent;
76
58
  cursor: pointer;
77
59
  position: relative;
78
60
  &:checked {
79
- border-color: var(--starasia-ui-radio-color-primary-blue);
61
+ border-color: var(--sa-radio-color-brand);
80
62
  }
81
63
 
82
64
  &::after {
@@ -90,55 +72,55 @@ input.starasia-radio-input[type="radio"] {
90
72
  transform: translate(-50%, -50%);
91
73
  border-radius: 50%;
92
74
  transition: 0.3s;
93
- background-color: var(--starasia-ui-radio-color-primary-blue);
75
+ background-color: var(--sa-radio-color-brand);
94
76
  }
95
77
 
96
78
  &:disabled {
97
- border-color: var(--starasia-ui-radio-color-disabled);
79
+ border-color: var(--sa-radio-color-disabled);
98
80
  cursor: not-allowed;
99
81
  }
100
82
 
101
83
  &:checked:disabled {
102
- border-color: var(--starasia-ui-radio-color-disabled);
84
+ border-color: var(--sa-radio-color-disabled);
103
85
  cursor: not-allowed;
104
86
  }
105
87
 
106
88
  &:checked:disabled::after {
107
- background-color: var(--starasia-ui-radio-color-disabled);
89
+ background-color: var(--sa-radio-color-disabled);
108
90
  }
109
91
 
110
92
  &:hover:not(:disabled) {
111
- box-shadow: 0px 0px 0px 4px var(--starasia-ui-radio-color-hover-shadow);
93
+ box-shadow: 0px 0px 0px 4px var(--sa-radio-color-hover-shadow);
112
94
  }
113
95
  }
114
96
 
115
97
  input.starasia-radio-input-sm[type="radio"] {
116
- width: var(--starasia-ui-radio-width-sm);
117
- height: var(--starasia-ui-radio-height-sm);
98
+ width: var(--sa-radio-width-sm);
99
+ height: var(--sa-radio-height-sm);
118
100
 
119
101
  &:checked::after {
120
- width: calc(var(--starasia-ui-radio-width-sm) - 5px);
121
- height: calc(var(--starasia-ui-radio-height-sm) - 5px);
102
+ width: calc(var(--sa-radio-width-sm) - 5px);
103
+ height: calc(var(--sa-radio-height-sm) - 5px);
122
104
  }
123
105
  }
124
106
 
125
107
  input.starasia-radio-input-md[type="radio"] {
126
- width: var(--starasia-ui-radio-width-md);
127
- height: var(--starasia-ui-radio-height-md);
108
+ width: var(--sa-radio-width-md);
109
+ height: var(--sa-radio-height-md);
128
110
 
129
111
  &:checked::after {
130
- width: calc(var(--starasia-ui-radio-width-md) - 6px);
131
- height: calc(var(--starasia-ui-radio-height-md) - 6px);
112
+ width: calc(var(--sa-radio-width-md) - 6px);
113
+ height: calc(var(--sa-radio-height-md) - 6px);
132
114
  }
133
115
  }
134
116
 
135
117
  input.starasia-radio-input-lg[type="radio"] {
136
- width: var(--starasia-ui-radio-width-lg);
137
- height: var(--starasia-ui-radio-height-lg);
118
+ width: var(--sa-radio-width-lg);
119
+ height: var(--sa-radio-height-lg);
138
120
 
139
121
  &:checked::after {
140
- width: calc(var(--starasia-ui-radio-width-lg) - 7px);
141
- height: calc(var(--starasia-ui-radio-height-lg) - 7px);
122
+ width: calc(var(--sa-radio-width-lg) - 7px);
123
+ height: calc(var(--sa-radio-height-lg) - 7px);
142
124
  }
143
125
  }
144
126
  `, d = "starasia-radio-styles", l = (r) => {
@@ -148,35 +130,35 @@ input.starasia-radio-input-lg[type="radio"] {
148
130
  }
149
131
  };
150
132
  l(e);
151
- const u = (r) => {
152
- const { size: a = "md", label: n, description: i, ...t } = r;
153
- return /* @__PURE__ */ s(
133
+ const h = (r) => {
134
+ const { size: a = "md", label: i, description: n, ...o } = r;
135
+ return /* @__PURE__ */ t(
154
136
  "div",
155
137
  {
156
138
  className: "starasia-radio-container",
157
139
  style: {
158
- alignItems: i ? "start" : "center"
140
+ alignItems: n ? "start" : "center"
159
141
  },
160
142
  children: [
161
- /* @__PURE__ */ o(
143
+ /* @__PURE__ */ s(
162
144
  "input",
163
145
  {
164
146
  type: "radio",
165
147
  className: `starasia-radio-input starasia-radio-input-${a}`,
166
- ...t
148
+ ...o
167
149
  }
168
150
  ),
169
- n || i ? /* @__PURE__ */ s("label", { htmlFor: t.id, style: { lineHeight: 1.07 }, children: [
170
- n,
171
- i ? /* @__PURE__ */ o(
151
+ i || n ? /* @__PURE__ */ t("label", { htmlFor: o.id, style: { lineHeight: 1.07 }, children: [
152
+ i,
153
+ n ? /* @__PURE__ */ s(
172
154
  "span",
173
155
  {
174
156
  style: {
175
157
  display: "block",
176
- color: "#78867F",
158
+ color: "var(--sa-text-subtle, #8c8f97)",
177
159
  lineHeight: "initial"
178
160
  },
179
- children: i
161
+ children: n
180
162
  }
181
163
  ) : null
182
164
  ] }) : null
@@ -185,5 +167,5 @@ const u = (r) => {
185
167
  );
186
168
  };
187
169
  export {
188
- u as Radio
170
+ h as Radio
189
171
  };
package/dist/radio.umd.js CHANGED
@@ -1,39 +1,21 @@
1
- (function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i.Radio={},i.jsxRuntime))})(this,function(i,a){"use strict";const d=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
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.Radio={},n.jsxRuntime))})(this,function(n,a){"use strict";const d=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
2
2
 
3
3
  :root {
4
- /* font weight */
5
- --starasia-ui-radio-font-weight-normal: var(
6
- --starasia-ui-fontWeights-normal,
7
- 300
8
- );
9
- --starasia-ui-radio-font-weight-medium: var(
10
- --starasia-ui-fontWeights-medium,
11
- 400
12
- );
13
-
14
- /* width */
15
- --starasia-ui-radio-width-sm: 14px;
16
- --starasia-ui-radio-width-md: var(--starasia-ui-w-4, 16px);
17
- --starasia-ui-radio-width-lg: 18px;
18
-
19
- /* height */
20
- --starasia-ui-radio-height-sm: 14px;
21
- --starasia-ui-radio-height-md: var(--starasia-ui-h-4, 16px);
22
- --starasia-ui-radio-height-lg: 18px;
23
-
24
- /* font size */
25
- --starasia-ui-radio-font-size-sm: var(--starasia-ui-fontSizes-sm, 12px);
26
- --starasia-ui-radio-font-size-md: var(--starasia-ui-fontSizes-md, 14px);
27
- --starasia-ui-radio-font-size-lg: var(--starasia-ui-fontSizes-lg, 16px);
28
-
29
- /* color */
30
- --starasia-ui-radio-color-primary-blue: var(
31
- --starasia-ui-brand-primary-default,
32
- rgba(74, 106, 148, 1)
33
- );
34
- --starasia-ui-radio-color-border-default: rgba(0, 0, 0, 1);
35
- --starasia-ui-radio-color-disabled: rgba(174, 182, 178, 1);
36
- --starasia-ui-radio-color-hover-shadow: rgba(201, 206, 204, 0.2);
4
+ --sa-radio-font-weight-normal: var(--sa-font-weight-normal, 300);
5
+ --sa-radio-font-weight-medium: var(--sa-font-weight-medium, 400);
6
+ --sa-radio-width-sm: 14px;
7
+ --sa-radio-width-md: 16px;
8
+ --sa-radio-width-lg: 18px;
9
+ --sa-radio-height-sm: 14px;
10
+ --sa-radio-height-md: 16px;
11
+ --sa-radio-height-lg: 18px;
12
+ --sa-radio-font-size-sm: var(--sa-font-size-sm, 0.75rem);
13
+ --sa-radio-font-size-md: var(--sa-font-size-md, 0.875rem);
14
+ --sa-radio-font-size-lg: var(--sa-font-size-lg, 1rem);
15
+ --sa-radio-color-brand: var(--sa-background-brand, #04254f);
16
+ --sa-radio-color-border-default: #000000;
17
+ --sa-radio-color-disabled: var(--sa-color-gray-400, #b7b9be);
18
+ --sa-radio-color-hover-shadow: var(--sa-color-black-alpha-a20, #0b120e24);
37
19
  }
38
20
 
39
21
  * {
@@ -46,36 +28,36 @@
46
28
  width: max-content;
47
29
  display: flex;
48
30
  & label {
49
- font-weight: var(--starasia-ui-radio-font-weight-medium);
31
+ font-weight: var(--sa-radio-font-weight-medium);
50
32
  }
51
33
  & span {
52
- font-weight: var(--starasia-ui-radio-font-weight-normal);
34
+ font-weight: var(--sa-radio-font-weight-normal);
53
35
  }
54
36
  }
55
37
 
56
38
  .starasia-radio-container:has(.starasia-radio-input-sm) {
57
39
  gap: 12px;
58
- font-size: var(--starasia-ui-radio-font-size-sm);
40
+ font-size: var(--sa-radio-font-size-sm);
59
41
  }
60
42
  .starasia-radio-container:has(.starasia-radio-input-md) {
61
43
  gap: 12px;
62
- font-size: var(--starasia-ui-radio-font-size-md);
44
+ font-size: var(--sa-radio-font-size-md);
63
45
  }
64
46
  .starasia-radio-container:has(.starasia-radio-input-lg) {
65
47
  gap: 16px;
66
- font-size: var(--starasia-ui-radio-font-size-lg);
48
+ font-size: var(--sa-radio-font-size-lg);
67
49
  }
68
50
 
69
51
  input.starasia-radio-input[type="radio"] {
70
52
  appearance: none;
71
- border: 1px solid var(--starasia-ui-radio-color-border-default);
53
+ border: 1px solid var(--sa-radio-color-border-default);
72
54
  border-radius: 50%;
73
55
  outline: none;
74
56
  background-color: transparent;
75
57
  cursor: pointer;
76
58
  position: relative;
77
59
  &:checked {
78
- border-color: var(--starasia-ui-radio-color-primary-blue);
60
+ border-color: var(--sa-radio-color-brand);
79
61
  }
80
62
 
81
63
  &::after {
@@ -89,55 +71,55 @@ input.starasia-radio-input[type="radio"] {
89
71
  transform: translate(-50%, -50%);
90
72
  border-radius: 50%;
91
73
  transition: 0.3s;
92
- background-color: var(--starasia-ui-radio-color-primary-blue);
74
+ background-color: var(--sa-radio-color-brand);
93
75
  }
94
76
 
95
77
  &:disabled {
96
- border-color: var(--starasia-ui-radio-color-disabled);
78
+ border-color: var(--sa-radio-color-disabled);
97
79
  cursor: not-allowed;
98
80
  }
99
81
 
100
82
  &:checked:disabled {
101
- border-color: var(--starasia-ui-radio-color-disabled);
83
+ border-color: var(--sa-radio-color-disabled);
102
84
  cursor: not-allowed;
103
85
  }
104
86
 
105
87
  &:checked:disabled::after {
106
- background-color: var(--starasia-ui-radio-color-disabled);
88
+ background-color: var(--sa-radio-color-disabled);
107
89
  }
108
90
 
109
91
  &:hover:not(:disabled) {
110
- box-shadow: 0px 0px 0px 4px var(--starasia-ui-radio-color-hover-shadow);
92
+ box-shadow: 0px 0px 0px 4px var(--sa-radio-color-hover-shadow);
111
93
  }
112
94
  }
113
95
 
114
96
  input.starasia-radio-input-sm[type="radio"] {
115
- width: var(--starasia-ui-radio-width-sm);
116
- height: var(--starasia-ui-radio-height-sm);
97
+ width: var(--sa-radio-width-sm);
98
+ height: var(--sa-radio-height-sm);
117
99
 
118
100
  &:checked::after {
119
- width: calc(var(--starasia-ui-radio-width-sm) - 5px);
120
- height: calc(var(--starasia-ui-radio-height-sm) - 5px);
101
+ width: calc(var(--sa-radio-width-sm) - 5px);
102
+ height: calc(var(--sa-radio-height-sm) - 5px);
121
103
  }
122
104
  }
123
105
 
124
106
  input.starasia-radio-input-md[type="radio"] {
125
- width: var(--starasia-ui-radio-width-md);
126
- height: var(--starasia-ui-radio-height-md);
107
+ width: var(--sa-radio-width-md);
108
+ height: var(--sa-radio-height-md);
127
109
 
128
110
  &:checked::after {
129
- width: calc(var(--starasia-ui-radio-width-md) - 6px);
130
- height: calc(var(--starasia-ui-radio-height-md) - 6px);
111
+ width: calc(var(--sa-radio-width-md) - 6px);
112
+ height: calc(var(--sa-radio-height-md) - 6px);
131
113
  }
132
114
  }
133
115
 
134
116
  input.starasia-radio-input-lg[type="radio"] {
135
- width: var(--starasia-ui-radio-width-lg);
136
- height: var(--starasia-ui-radio-height-lg);
117
+ width: var(--sa-radio-width-lg);
118
+ height: var(--sa-radio-height-lg);
137
119
 
138
120
  &:checked::after {
139
- width: calc(var(--starasia-ui-radio-width-lg) - 7px);
140
- height: calc(var(--starasia-ui-radio-height-lg) - 7px);
121
+ width: calc(var(--sa-radio-width-lg) - 7px);
122
+ height: calc(var(--sa-radio-height-lg) - 7px);
141
123
  }
142
124
  }
143
- `,s="starasia-radio-styles";(t=>{if(!document.getElementById(s)){const n=document.createElement("style");n.id=s,n.textContent=t,document.head.appendChild(n)}})(d);const l=t=>{const{size:n="md",label:o,description:r,...e}=t;return a.jsxs("div",{className:"starasia-radio-container",style:{alignItems:r?"start":"center"},children:[a.jsx("input",{type:"radio",className:`starasia-radio-input starasia-radio-input-${n}`,...e}),o||r?a.jsxs("label",{htmlFor:e.id,style:{lineHeight:1.07},children:[o,r?a.jsx("span",{style:{display:"block",color:"#78867F",lineHeight:"initial"},children:r}):null]}):null]})};i.Radio=l,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
125
+ `,t="starasia-radio-styles";(o=>{if(!document.getElementById(t)){const i=document.createElement("style");i.id=t,i.textContent=o,document.head.appendChild(i)}})(d);const l=o=>{const{size:i="md",label:e,description:r,...s}=o;return a.jsxs("div",{className:"starasia-radio-container",style:{alignItems:r?"start":"center"},children:[a.jsx("input",{type:"radio",className:`starasia-radio-input starasia-radio-input-${i}`,...s}),e||r?a.jsxs("label",{htmlFor:s.id,style:{lineHeight:1.07},children:[e,r?a.jsx("span",{style:{display:"block",color:"var(--sa-text-subtle, #8c8f97)",lineHeight:"initial"},children:r}):null]}):null]})};n.Radio=l,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/radio",
3
- "version": "1.0.4",
3
+ "version": "2.0.1",
4
4
  "description": "radio component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/radio.umd.js",