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