@starasia/radio 1.0.3 → 2.0.0

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