@devup-ui/components 0.1.22 → 0.1.23
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.
- package/README.md +43 -34
- package/dist/components/Button/index.cjs +1 -1
- package/dist/components/Button/index.js +62 -62
- package/dist/components/Checkbox/index.cjs +1 -1
- package/dist/components/Checkbox/index.js +45 -45
- package/dist/components/Input/index.cjs +1 -1
- package/dist/components/Input/index.js +63 -63
- package/dist/components/Radio/index.cjs +1 -1
- package/dist/components/Radio/index.js +85 -85
- package/dist/components/RadioGroup/index.cjs +1 -1
- package/dist/components/RadioGroup/index.js +48 -48
- package/dist/components/Select/index.cjs +1 -1
- package/dist/components/Select/index.js +129 -129
- package/dist/components/Toggle/index.cjs +1 -1
- package/dist/components/Toggle/index.js +52 -52
- package/package.json +12 -12
|
@@ -1,56 +1,56 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Box as
|
|
4
|
-
import { useState as
|
|
5
|
-
function
|
|
6
|
-
defaultValue:
|
|
7
|
-
value:
|
|
8
|
-
onChange:
|
|
9
|
-
typography:
|
|
10
|
-
error:
|
|
11
|
-
errorMessage:
|
|
12
|
-
allowClear:
|
|
13
|
-
icon:
|
|
14
|
-
colors:
|
|
15
|
-
disabled:
|
|
16
|
-
className:
|
|
17
|
-
classNames:
|
|
18
|
-
ref:
|
|
19
|
-
onClear:
|
|
20
|
-
...
|
|
2
|
+
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { Box as D, Center as E, Input as C, Text as f, Button as A } from "@devup-ui/react";
|
|
4
|
+
import { useState as L } from "react";
|
|
5
|
+
function I({
|
|
6
|
+
defaultValue: a,
|
|
7
|
+
value: g,
|
|
8
|
+
onChange: b,
|
|
9
|
+
typography: c,
|
|
10
|
+
error: n = !1,
|
|
11
|
+
errorMessage: l,
|
|
12
|
+
allowClear: d = !0,
|
|
13
|
+
icon: o,
|
|
14
|
+
colors: r,
|
|
15
|
+
disabled: i,
|
|
16
|
+
className: x,
|
|
17
|
+
classNames: t,
|
|
18
|
+
ref: k,
|
|
19
|
+
onClear: v,
|
|
20
|
+
...F
|
|
21
21
|
}) {
|
|
22
|
-
const [
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
},
|
|
27
|
-
return /* @__PURE__ */
|
|
28
|
-
|
|
22
|
+
const [p, s] = L(a || ""), m = (u) => {
|
|
23
|
+
s(u.target.value), b?.(u);
|
|
24
|
+
}, B = () => {
|
|
25
|
+
s(""), v?.();
|
|
26
|
+
}, y = p && !i && d;
|
|
27
|
+
return /* @__PURE__ */ h(
|
|
28
|
+
D,
|
|
29
29
|
{
|
|
30
|
-
className:
|
|
30
|
+
className: t?.container,
|
|
31
31
|
display: "inline-block",
|
|
32
32
|
pos: "relative",
|
|
33
33
|
selectors: { "&, & *": { boxSizing: "border-box" } },
|
|
34
34
|
children: [
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
o && /* @__PURE__ */ e(
|
|
36
|
+
E,
|
|
37
37
|
{
|
|
38
38
|
"aria-label": "icon",
|
|
39
39
|
boxSize: "24px",
|
|
40
|
-
className:
|
|
41
|
-
color:
|
|
40
|
+
className: t?.icon,
|
|
41
|
+
color: i ? "var(--inputDisabledText, light-dark(#D6D7DE, #373737))" : "var(--iconBold, light-dark(#8D8C9A, #666577))",
|
|
42
42
|
left: "12px",
|
|
43
43
|
pos: "absolute",
|
|
44
44
|
styleOrder: 1,
|
|
45
45
|
top: "50%",
|
|
46
46
|
transform: "translateY(-50%)",
|
|
47
|
-
children:
|
|
47
|
+
children: o
|
|
48
48
|
}
|
|
49
49
|
),
|
|
50
50
|
/* @__PURE__ */ e(
|
|
51
|
-
|
|
51
|
+
C,
|
|
52
52
|
{
|
|
53
|
-
ref:
|
|
53
|
+
ref: k,
|
|
54
54
|
_disabled: {
|
|
55
55
|
_placeholder: {
|
|
56
56
|
color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
|
|
@@ -72,57 +72,57 @@ function T({
|
|
|
72
72
|
},
|
|
73
73
|
"aria-label": "input",
|
|
74
74
|
bg: "var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",
|
|
75
|
-
borderColor:
|
|
75
|
+
borderColor: n ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
|
|
76
76
|
borderRadius: "8px",
|
|
77
77
|
borderStyle: "solid",
|
|
78
78
|
borderWidth: "1px",
|
|
79
|
-
className: `${
|
|
80
|
-
disabled:
|
|
81
|
-
onChange:
|
|
82
|
-
pl:
|
|
83
|
-
pr:
|
|
79
|
+
className: `${x || ""} ${t?.input || ""}`.trim(),
|
|
80
|
+
disabled: i,
|
|
81
|
+
onChange: m,
|
|
82
|
+
pl: o ? "36px" : "12px",
|
|
83
|
+
pr: d ? "36px" : "12px",
|
|
84
84
|
py: "12px",
|
|
85
85
|
styleOrder: 1,
|
|
86
86
|
styleVars: {
|
|
87
|
-
primary:
|
|
88
|
-
error:
|
|
89
|
-
text:
|
|
90
|
-
base:
|
|
91
|
-
iconBold:
|
|
92
|
-
border:
|
|
93
|
-
inputBackground:
|
|
94
|
-
primaryFocus:
|
|
95
|
-
negative20:
|
|
87
|
+
primary: r?.primary,
|
|
88
|
+
error: r?.error,
|
|
89
|
+
text: r?.text,
|
|
90
|
+
base: r?.base,
|
|
91
|
+
iconBold: r?.iconBold,
|
|
92
|
+
border: r?.border,
|
|
93
|
+
inputBackground: r?.inputBackground,
|
|
94
|
+
primaryFocus: r?.primaryFocus,
|
|
95
|
+
negative20: r?.negative20
|
|
96
96
|
},
|
|
97
97
|
transition: "all 0.1s ease-in-out",
|
|
98
|
-
typography:
|
|
99
|
-
value:
|
|
100
|
-
...
|
|
98
|
+
typography: c,
|
|
99
|
+
value: g ?? p,
|
|
100
|
+
...F
|
|
101
101
|
}
|
|
102
102
|
),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
y && /* @__PURE__ */ e(j, { onClick: B }),
|
|
104
|
+
n && l && /* @__PURE__ */ e(
|
|
105
|
+
f,
|
|
106
106
|
{
|
|
107
107
|
"aria-label": "error-message",
|
|
108
108
|
bottom: "-8px",
|
|
109
|
-
className:
|
|
109
|
+
className: t?.errorMessage,
|
|
110
110
|
color: "var(--error, light-dark(#D52B2E, #FF5B5E))",
|
|
111
111
|
left: "0",
|
|
112
112
|
pos: "absolute",
|
|
113
113
|
styleOrder: 1,
|
|
114
114
|
transform: "translateY(100%)",
|
|
115
115
|
typography: "inputPlaceholder",
|
|
116
|
-
children:
|
|
116
|
+
children: l
|
|
117
117
|
}
|
|
118
118
|
)
|
|
119
119
|
]
|
|
120
120
|
}
|
|
121
121
|
);
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function j(a) {
|
|
124
124
|
return /* @__PURE__ */ e(
|
|
125
|
-
|
|
125
|
+
A,
|
|
126
126
|
{
|
|
127
127
|
alignItems: "center",
|
|
128
128
|
"aria-label": "clear-button",
|
|
@@ -140,8 +140,8 @@ function S(i) {
|
|
|
140
140
|
styleOrder: 1,
|
|
141
141
|
top: "50%",
|
|
142
142
|
transform: "translateY(-50%)",
|
|
143
|
-
...
|
|
144
|
-
children: /* @__PURE__ */
|
|
143
|
+
...a,
|
|
144
|
+
children: /* @__PURE__ */ h(
|
|
145
145
|
"svg",
|
|
146
146
|
{
|
|
147
147
|
fill: "none",
|
|
@@ -177,6 +177,6 @@ function S(i) {
|
|
|
177
177
|
);
|
|
178
178
|
}
|
|
179
179
|
export {
|
|
180
|
-
|
|
181
|
-
|
|
180
|
+
j as ClearButton,
|
|
181
|
+
I as Input
|
|
182
182
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("@devup-ui/react");function p({className:i,disabled:e,children:t,variant:l="default",checked:b,classNames:v,styles:s,style:h,firstButton:c,lastButton:n,colors:r,...g}){const d=l==="button";return a.jsxs(o.Box,{alignItems:d?void 0:"center","aria-disabled":e,as:"label",cursor:d?void 0:"pointer",display:d?void 0:"inline-flex",gap:d?void 0:2,selectors:{"&[aria-disabled=true]":{cursor:"default"}},children:[d?a.jsx(o.Input,{checked:b,className:i,"data-radio-input":!0,disabled:e,display:"none",opacity:0,styleOrder:1,type:"radio",...g}):a.jsx(o.Input,{_focus:{outline:"1px sold var(--border, var(--primary))"},appearance:"none",bg:"light-dark(#fff, #2E2E2E)",border:"1px solid",borderColor:"$border",borderRadius:"100%",checked:b,className:i,"data-radio-input":!0,disabled:e,height:"18px",m:0,selectors:{"&:checked:not(:disabled)":{bg:"var(--checkedBg, var(--primary, light-dark(#fff, #2E2E2E)))",border:"3px solid",borderColor:"var(--checkedBg, light-dark(#fff, #2E2E2E))",boxShadow:"0 0 0 1px var(--checkedBorder, var(--primary))"},"&:hover:not(:disabled,:checked)":{border:"1px solid var(--hoverBorder, var(--primary))",bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))"},"&:is(:disabled, [aria-disabled=true])":{bgColor:"var(--disabledBg, light-dark(#F0F0F3, #47474A))"}},styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,text:r?.text,bg:r?.bg,hoverBg:r?.hoverBg,hoverBorder:r?.hoverBorder,hoverColor:r?.hoverColor,checkedBg:r?.checkedBg,checkedBorder:r?.checkedBorder,checkedColor:r?.checkedColor,disabledBg:r?.disabledBg,disabledColor:r?.disabledColor},transition:".25s",type:"radio",width:"18px",...g}),l==="button"?a.jsx(o.Box,{_disabled:{cursor:"not-allowed"},"aria-disabled":e,bg:"var(--bg, light-dark(#fff, #2E2E2E))",border:"1px solid",borderColor:"$border",borderRadius:c?"8px 0 0 8px":n?"0 8px 8px 0":void 0,className:i,color:"var(--text, light-dark(#000, #fff))",cursor:"pointer","data-radio-button":!0,display:"flex",px:8,py:3,selectors:{"[data-radio-input]:checked + &:not([aria-disabled=true])":{fontWeight:600,bg:"var(--checkedBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 80%), color-mix(in srgb, var(--primary) 10%, black 80%)))",borderColor:"var(--checkedBorder, var(--primary))",color:"var(--checkedColor, var(--primary))"},"&:hover:not([aria-disabled=true])":{bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))",borderColor:"var(--hoverBorder, var(--primary))"},"[data-radio-input]:disabled + &":{bg:"var(--disabledBg, light-dark(#F0F0F3, #47474A))",color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:h,styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,text:r?.text,bg:r?.bg,hoverBg:r?.hoverBg,hoverBorder:r?.hoverBorder,hoverColor:r?.hoverColor,checkedBg:r?.checkedBg,checkedBorder:r?.checkedBorder,checkedColor:r?.checkedColor,disabledBg:r?.disabledBg,disabledColor:r?.disabledColor},transition:"background-color 0.25s, border-color 0.25s",w:"fit-content",children:t}):a.jsx(o.Text,{"aria-disabled":e,className:v?.label,color:"var(--text, light-dark(#000, #fff))",selectors:{"&[aria-disabled=true]":{color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:h,styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,text:r?.text,bg:r?.bg,hoverBg:r?.hoverBg,hoverBorder:r?.hoverBorder,hoverColor:r?.hoverColor,checkedBg:r?.checkedBg,checkedBorder:r?.checkedBorder,checkedColor:r?.checkedColor,disabledBg:r?.disabledBg,disabledColor:r?.disabledColor},children:t})]})}exports.Radio=p;
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Box as
|
|
3
|
-
function
|
|
4
|
-
className:
|
|
5
|
-
disabled:
|
|
6
|
-
children:
|
|
7
|
-
variant:
|
|
8
|
-
checked:
|
|
9
|
-
classNames:
|
|
10
|
-
styles:
|
|
11
|
-
style:
|
|
12
|
-
firstButton:
|
|
13
|
-
lastButton:
|
|
14
|
-
colors:
|
|
15
|
-
...
|
|
1
|
+
import { jsxs as n, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { Box as g, Input as v, Text as B } from "@devup-ui/react";
|
|
3
|
+
function m({
|
|
4
|
+
className: o,
|
|
5
|
+
disabled: e,
|
|
6
|
+
children: i,
|
|
7
|
+
variant: t = "default",
|
|
8
|
+
checked: b,
|
|
9
|
+
classNames: p,
|
|
10
|
+
styles: s,
|
|
11
|
+
style: l,
|
|
12
|
+
firstButton: c,
|
|
13
|
+
lastButton: k,
|
|
14
|
+
colors: r,
|
|
15
|
+
...h
|
|
16
16
|
}) {
|
|
17
|
-
const
|
|
18
|
-
return /* @__PURE__ */
|
|
19
|
-
|
|
17
|
+
const d = t === "button";
|
|
18
|
+
return /* @__PURE__ */ n(
|
|
19
|
+
g,
|
|
20
20
|
{
|
|
21
|
-
alignItems:
|
|
22
|
-
"aria-disabled":
|
|
21
|
+
alignItems: d ? void 0 : "center",
|
|
22
|
+
"aria-disabled": e,
|
|
23
23
|
as: "label",
|
|
24
|
-
cursor:
|
|
25
|
-
display:
|
|
26
|
-
gap:
|
|
24
|
+
cursor: d ? void 0 : "pointer",
|
|
25
|
+
display: d ? void 0 : "inline-flex",
|
|
26
|
+
gap: d ? void 0 : 2,
|
|
27
27
|
selectors: {
|
|
28
28
|
"&[aria-disabled=true]": {
|
|
29
29
|
cursor: "default"
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
children: [
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
d ? /* @__PURE__ */ a(
|
|
34
|
+
v,
|
|
35
35
|
{
|
|
36
|
-
checked:
|
|
37
|
-
className:
|
|
36
|
+
checked: b,
|
|
37
|
+
className: o,
|
|
38
38
|
"data-radio-input": !0,
|
|
39
|
-
disabled:
|
|
39
|
+
disabled: e,
|
|
40
40
|
display: "none",
|
|
41
41
|
opacity: 0,
|
|
42
42
|
styleOrder: 1,
|
|
43
43
|
type: "radio",
|
|
44
|
-
...
|
|
44
|
+
...h
|
|
45
45
|
}
|
|
46
|
-
) : /* @__PURE__ */
|
|
47
|
-
|
|
46
|
+
) : /* @__PURE__ */ a(
|
|
47
|
+
v,
|
|
48
48
|
{
|
|
49
49
|
_focus: {
|
|
50
50
|
outline: "1px sold var(--border, var(--primary))"
|
|
@@ -54,10 +54,10 @@ function E({
|
|
|
54
54
|
border: "1px solid",
|
|
55
55
|
borderColor: "$border",
|
|
56
56
|
borderRadius: "100%",
|
|
57
|
-
checked:
|
|
58
|
-
className:
|
|
57
|
+
checked: b,
|
|
58
|
+
className: o,
|
|
59
59
|
"data-radio-input": !0,
|
|
60
|
-
disabled:
|
|
60
|
+
disabled: e,
|
|
61
61
|
height: "18px",
|
|
62
62
|
m: 0,
|
|
63
63
|
selectors: {
|
|
@@ -80,37 +80,37 @@ function E({
|
|
|
80
80
|
},
|
|
81
81
|
styleOrder: 1,
|
|
82
82
|
styleVars: {
|
|
83
|
-
primary:
|
|
84
|
-
border:
|
|
85
|
-
text:
|
|
86
|
-
bg:
|
|
87
|
-
hoverBg:
|
|
88
|
-
hoverBorder:
|
|
89
|
-
hoverColor:
|
|
90
|
-
checkedBg:
|
|
91
|
-
checkedBorder:
|
|
92
|
-
checkedColor:
|
|
93
|
-
disabledBg:
|
|
94
|
-
disabledColor:
|
|
83
|
+
primary: r?.primary,
|
|
84
|
+
border: r?.border,
|
|
85
|
+
text: r?.text,
|
|
86
|
+
bg: r?.bg,
|
|
87
|
+
hoverBg: r?.hoverBg,
|
|
88
|
+
hoverBorder: r?.hoverBorder,
|
|
89
|
+
hoverColor: r?.hoverColor,
|
|
90
|
+
checkedBg: r?.checkedBg,
|
|
91
|
+
checkedBorder: r?.checkedBorder,
|
|
92
|
+
checkedColor: r?.checkedColor,
|
|
93
|
+
disabledBg: r?.disabledBg,
|
|
94
|
+
disabledColor: r?.disabledColor
|
|
95
95
|
},
|
|
96
96
|
transition: ".25s",
|
|
97
97
|
type: "radio",
|
|
98
98
|
width: "18px",
|
|
99
|
-
...
|
|
99
|
+
...h
|
|
100
100
|
}
|
|
101
101
|
),
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
t === "button" ? /* @__PURE__ */ a(
|
|
103
|
+
g,
|
|
104
104
|
{
|
|
105
105
|
_disabled: {
|
|
106
106
|
cursor: "not-allowed"
|
|
107
107
|
},
|
|
108
|
-
"aria-disabled":
|
|
108
|
+
"aria-disabled": e,
|
|
109
109
|
bg: "var(--bg, light-dark(#fff, #2E2E2E))",
|
|
110
110
|
border: "1px solid",
|
|
111
111
|
borderColor: "$border",
|
|
112
|
-
borderRadius:
|
|
113
|
-
className:
|
|
112
|
+
borderRadius: c ? "8px 0 0 8px" : k ? "0 8px 8px 0" : void 0,
|
|
113
|
+
className: o,
|
|
114
114
|
color: "var(--text, light-dark(#000, #fff))",
|
|
115
115
|
cursor: "pointer",
|
|
116
116
|
"data-radio-button": !0,
|
|
@@ -136,54 +136,54 @@ function E({
|
|
|
136
136
|
color: "var(--disabledColor, light-dark(#D6D7DE, #373737))"
|
|
137
137
|
}
|
|
138
138
|
},
|
|
139
|
-
style:
|
|
139
|
+
style: l,
|
|
140
140
|
styleOrder: 1,
|
|
141
141
|
styleVars: {
|
|
142
|
-
primary:
|
|
143
|
-
border:
|
|
144
|
-
text:
|
|
145
|
-
bg:
|
|
146
|
-
hoverBg:
|
|
147
|
-
hoverBorder:
|
|
148
|
-
hoverColor:
|
|
149
|
-
checkedBg:
|
|
150
|
-
checkedBorder:
|
|
151
|
-
checkedColor:
|
|
152
|
-
disabledBg:
|
|
153
|
-
disabledColor:
|
|
142
|
+
primary: r?.primary,
|
|
143
|
+
border: r?.border,
|
|
144
|
+
text: r?.text,
|
|
145
|
+
bg: r?.bg,
|
|
146
|
+
hoverBg: r?.hoverBg,
|
|
147
|
+
hoverBorder: r?.hoverBorder,
|
|
148
|
+
hoverColor: r?.hoverColor,
|
|
149
|
+
checkedBg: r?.checkedBg,
|
|
150
|
+
checkedBorder: r?.checkedBorder,
|
|
151
|
+
checkedColor: r?.checkedColor,
|
|
152
|
+
disabledBg: r?.disabledBg,
|
|
153
|
+
disabledColor: r?.disabledColor
|
|
154
154
|
},
|
|
155
155
|
transition: "background-color 0.25s, border-color 0.25s",
|
|
156
156
|
w: "fit-content",
|
|
157
|
-
children:
|
|
157
|
+
children: i
|
|
158
158
|
}
|
|
159
|
-
) : /* @__PURE__ */
|
|
160
|
-
|
|
159
|
+
) : /* @__PURE__ */ a(
|
|
160
|
+
B,
|
|
161
161
|
{
|
|
162
|
-
"aria-disabled":
|
|
163
|
-
className:
|
|
162
|
+
"aria-disabled": e,
|
|
163
|
+
className: p?.label,
|
|
164
164
|
color: "var(--text, light-dark(#000, #fff))",
|
|
165
165
|
selectors: {
|
|
166
166
|
"&[aria-disabled=true]": {
|
|
167
167
|
color: "var(--disabledColor, light-dark(#D6D7DE, #373737))"
|
|
168
168
|
}
|
|
169
169
|
},
|
|
170
|
-
style:
|
|
170
|
+
style: l,
|
|
171
171
|
styleOrder: 1,
|
|
172
172
|
styleVars: {
|
|
173
|
-
primary:
|
|
174
|
-
border:
|
|
175
|
-
text:
|
|
176
|
-
bg:
|
|
177
|
-
hoverBg:
|
|
178
|
-
hoverBorder:
|
|
179
|
-
hoverColor:
|
|
180
|
-
checkedBg:
|
|
181
|
-
checkedBorder:
|
|
182
|
-
checkedColor:
|
|
183
|
-
disabledBg:
|
|
184
|
-
disabledColor:
|
|
173
|
+
primary: r?.primary,
|
|
174
|
+
border: r?.border,
|
|
175
|
+
text: r?.text,
|
|
176
|
+
bg: r?.bg,
|
|
177
|
+
hoverBg: r?.hoverBg,
|
|
178
|
+
hoverBorder: r?.hoverBorder,
|
|
179
|
+
hoverColor: r?.hoverColor,
|
|
180
|
+
checkedBg: r?.checkedBg,
|
|
181
|
+
checkedBorder: r?.checkedBorder,
|
|
182
|
+
checkedColor: r?.checkedColor,
|
|
183
|
+
disabledBg: r?.disabledBg,
|
|
184
|
+
disabledColor: r?.disabledColor
|
|
185
185
|
},
|
|
186
|
-
children:
|
|
186
|
+
children: i
|
|
187
187
|
}
|
|
188
188
|
)
|
|
189
189
|
]
|
|
@@ -191,5 +191,5 @@ function E({
|
|
|
191
191
|
);
|
|
192
192
|
}
|
|
193
193
|
export {
|
|
194
|
-
|
|
194
|
+
m as Radio
|
|
195
195
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),w=require("@devup-ui/react"),V=require("react"),a=require("../Radio/index.cjs");function y({disabled:u,options:i,direction:c="row",variant:t="default",style:S,value:n,onChange:f,defaultValue:s,colors:g,className:j,classNames:d,styles:h}){const[R,q]=V.useState(n?String(n):s?String(s):void 0),b=n?String(n):R??"";function m(e){f?.(e),q(e)}return o.jsx(w.Flex,{className:d?.container,flexDir:t==="button"?"row":c,gap:t==="button"?0:c==="row"?"30px":"16px",style:h?.container,children:i.map(({value:e,label:l},p)=>{const r=String(e),x={checked:b===r,disabled:u,onChange:()=>!u&&m(r),className:j,classNames:d,styles:h,style:S};return t==="button"?o.jsx(a.Radio,{colors:g,firstButton:p===0,lastButton:p===i.length-1,variant:t,...x,children:l},r):o.jsx(a.Radio,{colors:g,variant:t,...x,children:l},r)})})}exports.RadioGroup=y;
|
|
@@ -1,61 +1,61 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { Flex as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { Radio as
|
|
6
|
-
function
|
|
7
|
-
disabled:
|
|
8
|
-
options:
|
|
9
|
-
direction:
|
|
10
|
-
variant:
|
|
11
|
-
style:
|
|
12
|
-
value:
|
|
13
|
-
onChange:
|
|
14
|
-
defaultValue:
|
|
15
|
-
colors:
|
|
16
|
-
className:
|
|
17
|
-
classNames:
|
|
18
|
-
styles:
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { Flex as a } from "@devup-ui/react";
|
|
4
|
+
import { useState as b } from "react";
|
|
5
|
+
import { Radio as x } from "../Radio/index.js";
|
|
6
|
+
function G({
|
|
7
|
+
disabled: i,
|
|
8
|
+
options: u,
|
|
9
|
+
direction: c = "row",
|
|
10
|
+
variant: t = "default",
|
|
11
|
+
style: S,
|
|
12
|
+
value: n,
|
|
13
|
+
onChange: d,
|
|
14
|
+
defaultValue: p,
|
|
15
|
+
colors: g,
|
|
16
|
+
className: w,
|
|
17
|
+
classNames: m,
|
|
18
|
+
styles: f
|
|
19
19
|
}) {
|
|
20
|
-
const [
|
|
21
|
-
|
|
22
|
-
),
|
|
23
|
-
function
|
|
24
|
-
|
|
20
|
+
const [V, B] = b(
|
|
21
|
+
n ? String(n) : p ? String(p) : void 0
|
|
22
|
+
), C = n ? String(n) : V ?? "";
|
|
23
|
+
function R(r) {
|
|
24
|
+
d?.(r), B(r);
|
|
25
25
|
}
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
-
|
|
26
|
+
return /* @__PURE__ */ e(
|
|
27
|
+
a,
|
|
28
28
|
{
|
|
29
|
-
className:
|
|
30
|
-
flexDir:
|
|
31
|
-
gap:
|
|
32
|
-
style:
|
|
33
|
-
children:
|
|
34
|
-
const
|
|
35
|
-
checked:
|
|
36
|
-
disabled:
|
|
37
|
-
onChange: () => !
|
|
38
|
-
className:
|
|
39
|
-
classNames:
|
|
40
|
-
styles:
|
|
41
|
-
style:
|
|
29
|
+
className: m?.container,
|
|
30
|
+
flexDir: t === "button" ? "row" : c,
|
|
31
|
+
gap: t === "button" ? 0 : c === "row" ? "30px" : "16px",
|
|
32
|
+
style: f?.container,
|
|
33
|
+
children: u.map(({ value: r, label: h }, s) => {
|
|
34
|
+
const o = String(r), l = {
|
|
35
|
+
checked: C === o,
|
|
36
|
+
disabled: i,
|
|
37
|
+
onChange: () => !i && R(o),
|
|
38
|
+
className: w,
|
|
39
|
+
classNames: m,
|
|
40
|
+
styles: f,
|
|
41
|
+
style: S
|
|
42
42
|
};
|
|
43
|
-
return
|
|
44
|
-
|
|
43
|
+
return t === "button" ? /* @__PURE__ */ e(
|
|
44
|
+
x,
|
|
45
45
|
{
|
|
46
|
-
colors:
|
|
47
|
-
firstButton:
|
|
48
|
-
lastButton:
|
|
49
|
-
variant:
|
|
50
|
-
...
|
|
51
|
-
children:
|
|
46
|
+
colors: g,
|
|
47
|
+
firstButton: s === 0,
|
|
48
|
+
lastButton: s === u.length - 1,
|
|
49
|
+
variant: t,
|
|
50
|
+
...l,
|
|
51
|
+
children: h
|
|
52
52
|
},
|
|
53
|
-
|
|
54
|
-
) : /* @__PURE__ */
|
|
53
|
+
o
|
|
54
|
+
) : /* @__PURE__ */ e(x, { colors: g, variant: t, ...l, children: h }, o);
|
|
55
55
|
})
|
|
56
56
|
}
|
|
57
57
|
);
|
|
58
58
|
}
|
|
59
59
|
export {
|
|
60
|
-
|
|
60
|
+
G as RadioGroup
|
|
61
61
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),k=require("react"),l=require("@devup-ui/react"),D=require("clsx"),y=require("../../contexts/useSelect.cjs"),j=require("../Button/index.cjs"),C=require("./IconCheck.cjs");function A({type:i="default",children:c,defaultValue:g,value:o,onChange:d,defaultOpen:h,open:x,onOpenChange:b,colors:r,typography:u,options:s,...m}){const n=k.useRef(null),[f,a]=k.useState(h??!1),[p,v]=k.useState(g??(i==="checkbox"?[]:""));k.useEffect(()=>{const t=E=>{n.current&&n.current.contains(E.target)||a(!1)};return document.addEventListener("click",t),()=>document.removeEventListener("click",t)},[f,a]);const S=t=>{b?.(t),a(t)},F=t=>{if(d?.(t),i!=="default"){if(i==="radio"){v(t);return}Array.isArray(p)&&p.includes(t)?v(p.filter(E=>E!==t)):v([...p,t])}};return e.jsx(y.SelectContext.Provider,{value:{open:x??f,setOpen:S,value:o??p,setValue:F,type:i,ref:n},children:e.jsx(l.Box,{ref:n,display:"inline-block",h:"fit-content",selectors:{"&, & *":{boxSizing:"border-box"}},styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,inputBackground:r?.inputBackground,base10:r?.base10,title:r?.title,selectDisabled:r?.selectDisabled,primaryBg:r?.primaryBg,inputDisabledBackground:r?.inputDisabledBackground,inputDisabledText:r?.inputDisabledText},typography:u,...m,children:s?e.jsxs(e.Fragment,{children:[e.jsx(w,{children:c}),e.jsx(O,{children:s?.map(t=>k.createElement(B,{...t,key:"option-"+t.value},t.label??t.value))})]}):c})})}function w({className:i,children:c,asChild:g,...o}){const{open:d,setOpen:h}=y.useSelect(),x=()=>{h(!d)};if(g){const b=k.Children.only(c),r=b.type;return e.jsx(r,{"aria-expanded":d,"aria-label":"Select toggle",onClick:x,...b.props})}return e.jsx(j.Button,{"aria-expanded":d,"aria-label":"Select toggle",className:D(l.css({borderRadius:"8px",styleOrder:2}),i),onClick:x,...o,children:c})}function O({children:i,showConfirmButton:c,confirmButtonText:g="완료",x:o=0,y:d=0,...h}){const{open:x,setOpen:b,type:r,ref:u}=y.useSelect();return x?e.jsxs(l.VStack,{ref:s=>{if(!u.current||!s)return;const m=u.current,n=()=>{const{height:f,x:a,y:p,top:v,left:S}=m.getBoundingClientRect(),F=s.offsetHeight+v+window.scrollY+f+d>document.documentElement.scrollHeight,t=s.offsetWidth+S+window.scrollX+o>document.documentElement.scrollWidth;F?s.style.bottom=`${window.innerHeight-p+10}px`:s.style.top=`${p+f+10+d}px`,t?s.style.left=`${Math.max(a-s.offsetWidth+m.offsetWidth,0)+o}px`:s.style.left=`${a+o}px`};return n(),window.addEventListener("scroll",n,!0),window.addEventListener("resize",n),()=>{window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",n)}},"aria-label":"Select container",bg:"var(--inputBg, light-dark(#FFF,#2E2E2E))",border:"1px solid var(--border, light-dark(#E4E4E4,#434343))",borderRadius:"8px",bottom:"-4px",boxShadow:"0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))",boxSize:"fit-content",gap:"6px",minW:"232px",p:"10px",pos:"fixed",styleOrder:1,userSelect:"none",zIndex:1,...h,children:[i,c&&r==="checkbox"&&e.jsx(l.Flex,{justifyContent:"end",w:"100%",children:e.jsx(j.Button,{"aria-label":"Select confirm button",className:l.css({textAlign:"end",bg:"var(--primary, light-dark(#674DC7, #8163E1))",borderRadius:"8px",w:"fit-content",px:"30px",py:"10px",color:"#FFF",typography:"buttonS"}),onClick:()=>b(!1),variant:"primary",children:g})})]}):null}function B({disabled:i,onClick:c,children:g,value:o,showCheck:d=!0,...h}){const{setOpen:x,setValue:b,value:r,type:u}=y.useSelect(),s=()=>{u!=="checkbox"&&x(!1)},m=(a,p)=>{if(c){c(a,p);return}typeof a=="string"&&b(a),s()},n={default:!1,radio:r===o,checkbox:Array.isArray(r)&&o&&r.includes(o)}[u],f=!i&&!(u==="radio"&&n);return e.jsxs(l.Flex,{_hover:f&&{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"},alignItems:"center",borderRadius:"6px",color:i?"var(--selectDisabled, light-dark(#C4C5D1, #45464D))":n?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--title, light-dark(#1A1A1A,#FAFAFA))",cursor:f?"pointer":"default","data-value":o,fontWeight:n?"700":"400",gap:{checkbox:"10px",radio:"6px",default:"0"}[u],h:"40px",onClick:i?void 0:a=>m(o,a),px:"10px",styleOrder:1,transition:"background-color 0.1s ease-in-out",...h,children:[d&&{checkbox:e.jsx(l.Box,{bg:i?"var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))":n?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:n&&e.jsx(C.IconCheck,{className:l.css({color:i?"var(--inputDisabledText, light-dark(#E5E5E5, #373737))":"#FFF",position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)"})})}),radio:e.jsx(e.Fragment,{children:n&&e.jsx(l.Box,{borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:e.jsx(C.IconCheck,{className:l.css({position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)",color:"inherit"})})})}),default:null}[u],g]})}function R({...i}){return e.jsx(l.Box,{bg:"var(--border, light-dark(#E4E4E4,#434343)",h:"1px",styleOrder:1,w:"100%",...i})}exports.Select=A;exports.SelectContainer=O;exports.SelectDivider=R;exports.SelectOption=B;exports.SelectTrigger=w;
|