@devup-ui/components 0.1.27 → 0.1.29
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/dist/components/Checkbox/index.cjs +2 -1
- package/dist/components/Checkbox/index.d.ts +1 -1
- package/dist/components/Checkbox/index.d.ts.map +1 -1
- package/dist/components/Checkbox/index.js +110 -83
- package/dist/components/Select/index.cjs +1 -1
- package/dist/components/Select/index.d.ts +2 -2
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +21 -20
- package/package.json +16 -15
|
@@ -1 +1,2 @@
|
|
|
1
|
-
"use
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@devup-ui/react"),s=require("react"),k=require("./CheckIcon.cjs");function m({children:i,disabled:r,checked:l,defaultChecked:p=!1,colors:o,onChange:g,...h}){const a=s.useId(),[F,d]=s.useState(p),c=l??F,x=n=>{d(n),g?.(n)};return e.jsxs(t.Flex,{alignItems:"center",gap:"8px",children:[e.jsxs("label",{className:t.css({position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:"16px",height:"16px",cursor:r?"not-allowed":"pointer"}),htmlFor:a,children:[e.jsx(t.Input,{_active:!r&&{bg:"light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))"},_checked:{bg:"var(--primary, light-dark(#6159D4, #6670F9))",border:"none",_hover:!r&&{bg:"light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))"},_disabled:{bg:"light-dark(#F0F0F3, #47474A)"}},_disabled:{bg:"light-dark( #F0F0F3, #47474A)"},_hover:!r&&{bg:"light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))",border:"1px solid var(--primary, light-dark(#6159D4, #6670F9))"},accentColor:"var(--primary, light-dark(#6159D4, #6670F9))",appearance:"none",bg:"var(--inputBg, light-dark(#FFF, #2E2E2E))",border:"1px solid var(--border, light-dark(#E0E0E0, #333333))",borderRadius:"2px",checked:c,cursor:r?"not-allowed":"pointer",disabled:r,display:"block",height:"100%",id:a,left:0,m:"0",onChange:r?void 0:n=>x(n.target.checked),opacity:1,pointerEvents:"none",pos:"absolute",styleOrder:1,styleVars:{primary:o?.primary,border:o?.border,inputBg:o?.inputBg},top:0,type:"checkbox",width:"100%",zIndex:0,...h}),c&&e.jsx(t.Box,{as:k.CheckIcon,opacity:"1",pointerEvents:"none",props:{color:r?"light-dark(#D6D7DE, #47474A)":"var(--checkIcon, #FFF)"},styleVars:{checkIcon:o?.checkIcon},zIndex:"1"})]}),e.jsx("label",{className:t.css({cursor:r?"not-allowed":"pointer"}),htmlFor:a,children:typeof i=="string"?e.jsx(t.Text,{color:r?"light-dark(#D6D7DE, #6F6E6E)":"var(--text, light-dark(#2F2F2F, #EDEDED))",fontSize:"14px",styleVars:{text:o?.text},userSelect:"none",children:i}):i})]})}exports.Checkbox=m;
|
|
@@ -10,6 +10,6 @@ interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'onChange
|
|
|
10
10
|
checkIcon?: string;
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
export declare function Checkbox({ children, disabled, checked, colors, onChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function Checkbox({ children, disabled, checked, defaultChecked, colors, onChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export {};
|
|
15
15
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAmB,MAAM,OAAO,CAAA;AAIvD,UAAU,aACR,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,cAAsB,EACtB,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CA6Hf"}
|
|
@@ -1,102 +1,129 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as c, jsx as o } from "react/jsx-runtime";
|
|
3
|
+
import { Flex as x, css as p, Input as k, Box as y, Text as b } from "@devup-ui/react";
|
|
4
|
+
import { useId as v, useState as D } from "react";
|
|
5
|
+
import { CheckIcon as E } from "./CheckIcon.js";
|
|
6
|
+
function _({
|
|
7
|
+
children: i,
|
|
7
8
|
disabled: r,
|
|
8
|
-
checked:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
checked: l,
|
|
10
|
+
defaultChecked: g = !1,
|
|
11
|
+
colors: e,
|
|
12
|
+
onChange: h,
|
|
13
|
+
...s
|
|
12
14
|
}) {
|
|
13
|
-
const n =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
className: g({
|
|
70
|
-
left: "50%",
|
|
15
|
+
const n = v(), [F, m] = D(g), a = l ?? F, d = (t) => {
|
|
16
|
+
m(t), h?.(t);
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ c(x, { alignItems: "center", gap: "8px", children: [
|
|
19
|
+
/* @__PURE__ */ c(
|
|
20
|
+
"label",
|
|
21
|
+
{
|
|
22
|
+
className: p({
|
|
23
|
+
position: "relative",
|
|
24
|
+
display: "flex",
|
|
25
|
+
alignItems: "center",
|
|
26
|
+
justifyContent: "center",
|
|
27
|
+
width: "16px",
|
|
28
|
+
height: "16px",
|
|
29
|
+
cursor: r ? "not-allowed" : "pointer"
|
|
30
|
+
}),
|
|
31
|
+
htmlFor: n,
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ o(
|
|
34
|
+
k,
|
|
35
|
+
{
|
|
36
|
+
_active: !r && {
|
|
37
|
+
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))"
|
|
38
|
+
},
|
|
39
|
+
_checked: {
|
|
40
|
+
bg: "var(--primary, light-dark(#6159D4, #6670F9))",
|
|
41
|
+
border: "none",
|
|
42
|
+
_hover: !r && {
|
|
43
|
+
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))"
|
|
44
|
+
},
|
|
45
|
+
_disabled: {
|
|
46
|
+
bg: "light-dark(#F0F0F3, #47474A)"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
_disabled: {
|
|
50
|
+
bg: "light-dark( #F0F0F3, #47474A)"
|
|
51
|
+
},
|
|
52
|
+
_hover: !r && {
|
|
53
|
+
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))",
|
|
54
|
+
border: "1px solid var(--primary, light-dark(#6159D4, #6670F9))"
|
|
55
|
+
},
|
|
56
|
+
accentColor: "var(--primary, light-dark(#6159D4, #6670F9))",
|
|
57
|
+
appearance: "none",
|
|
58
|
+
bg: "var(--inputBg, light-dark(#FFF, #2E2E2E))",
|
|
59
|
+
border: "1px solid var(--border, light-dark(#E0E0E0, #333333))",
|
|
60
|
+
borderRadius: "2px",
|
|
61
|
+
checked: a,
|
|
62
|
+
cursor: r ? "not-allowed" : "pointer",
|
|
63
|
+
disabled: r,
|
|
64
|
+
display: "block",
|
|
65
|
+
height: "100%",
|
|
66
|
+
id: n,
|
|
67
|
+
left: 0,
|
|
68
|
+
m: "0",
|
|
69
|
+
onChange: r ? void 0 : (t) => d(t.target.checked),
|
|
70
|
+
opacity: 1,
|
|
71
71
|
pointerEvents: "none",
|
|
72
72
|
pos: "absolute",
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
73
|
+
styleOrder: 1,
|
|
74
|
+
styleVars: {
|
|
75
|
+
primary: e?.primary,
|
|
76
|
+
border: e?.border,
|
|
77
|
+
inputBg: e?.inputBg
|
|
78
|
+
},
|
|
79
|
+
top: 0,
|
|
80
|
+
type: "checkbox",
|
|
81
|
+
width: "100%",
|
|
82
|
+
zIndex: 0,
|
|
83
|
+
...s
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
a && /* @__PURE__ */ o(
|
|
87
|
+
y,
|
|
88
|
+
{
|
|
89
|
+
as: E,
|
|
90
|
+
opacity: "1",
|
|
91
|
+
pointerEvents: "none",
|
|
92
|
+
props: {
|
|
93
|
+
color: r ? "light-dark(#D6D7DE, #47474A)" : "var(--checkIcon, #FFF)"
|
|
94
|
+
},
|
|
95
|
+
styleVars: {
|
|
96
|
+
checkIcon: e?.checkIcon
|
|
97
|
+
},
|
|
98
|
+
zIndex: "1"
|
|
99
|
+
}
|
|
100
|
+
)
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ o(
|
|
81
105
|
"label",
|
|
82
106
|
{
|
|
83
|
-
className:
|
|
107
|
+
className: p({
|
|
84
108
|
cursor: r ? "not-allowed" : "pointer"
|
|
85
109
|
}),
|
|
86
110
|
htmlFor: n,
|
|
87
|
-
children: typeof
|
|
88
|
-
|
|
111
|
+
children: typeof i == "string" ? /* @__PURE__ */ o(
|
|
112
|
+
b,
|
|
89
113
|
{
|
|
90
|
-
color: r ? "light-dark(#D6D7DE, #
|
|
114
|
+
color: r ? "light-dark(#D6D7DE, #6F6E6E)" : "var(--text, light-dark(#2F2F2F, #EDEDED))",
|
|
91
115
|
fontSize: "14px",
|
|
116
|
+
styleVars: {
|
|
117
|
+
text: e?.text
|
|
118
|
+
},
|
|
92
119
|
userSelect: "none",
|
|
93
|
-
children:
|
|
120
|
+
children: i
|
|
94
121
|
}
|
|
95
|
-
) :
|
|
122
|
+
) : i
|
|
96
123
|
}
|
|
97
124
|
)
|
|
98
125
|
] });
|
|
99
126
|
}
|
|
100
127
|
export {
|
|
101
|
-
|
|
128
|
+
_ as Checkbox
|
|
102
129
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
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;
|
|
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","aria-label":"Select option",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;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DevupThemeTypographyKeys } from '@devup-ui/react';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
3
|
import { SelectType, SelectValue } from '../../types/select';
|
|
4
4
|
import { Button } from '../Button';
|
|
@@ -22,7 +22,7 @@ interface SelectProps extends Omit<ComponentProps<'div'>, 'onChange'> {
|
|
|
22
22
|
selectDisabled?: string;
|
|
23
23
|
primaryBg?: string;
|
|
24
24
|
};
|
|
25
|
-
typography?:
|
|
25
|
+
typography?: DevupThemeTypographyKeys;
|
|
26
26
|
options?: {
|
|
27
27
|
label?: string;
|
|
28
28
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as i, jsxs as
|
|
2
|
+
import { jsx as i, jsxs as S, Fragment as O } from "react/jsx-runtime";
|
|
3
3
|
import { useRef as R, useState as w, useEffect as z, createElement as L, Children as W } from "react";
|
|
4
4
|
import { Box as k, VStack as H, Flex as A, css as v } from "@devup-ui/react";
|
|
5
5
|
import N from "clsx";
|
|
6
|
-
import { SelectContext as T, useSelect as
|
|
6
|
+
import { SelectContext as T, useSelect as C } from "../../contexts/useSelect.js";
|
|
7
7
|
import { Button as B } from "../Button/index.js";
|
|
8
8
|
import { IconCheck as D } from "./IconCheck.js";
|
|
9
9
|
function G({
|
|
@@ -13,14 +13,14 @@ function G({
|
|
|
13
13
|
value: o,
|
|
14
14
|
onChange: c,
|
|
15
15
|
defaultOpen: g,
|
|
16
|
-
open:
|
|
16
|
+
open: u,
|
|
17
17
|
onOpenChange: f,
|
|
18
18
|
colors: t,
|
|
19
19
|
typography: d,
|
|
20
20
|
options: a,
|
|
21
21
|
...m
|
|
22
22
|
}) {
|
|
23
|
-
const r = R(null), [b, l] = w(g ?? !1), [
|
|
23
|
+
const r = R(null), [b, l] = w(g ?? !1), [p, x] = w(
|
|
24
24
|
h ?? (n === "checkbox" ? [] : "")
|
|
25
25
|
);
|
|
26
26
|
z(() => {
|
|
@@ -37,16 +37,16 @@ function G({
|
|
|
37
37
|
x(e);
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
Array.isArray(
|
|
40
|
+
Array.isArray(p) && p.includes(e) ? x(p.filter((E) => E !== e)) : x([...p, e]);
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
return /* @__PURE__ */ i(
|
|
44
44
|
T.Provider,
|
|
45
45
|
{
|
|
46
46
|
value: {
|
|
47
|
-
open:
|
|
47
|
+
open: u ?? b,
|
|
48
48
|
setOpen: y,
|
|
49
|
-
value: o ??
|
|
49
|
+
value: o ?? p,
|
|
50
50
|
setValue: F,
|
|
51
51
|
type: n,
|
|
52
52
|
ref: r
|
|
@@ -76,7 +76,7 @@ function G({
|
|
|
76
76
|
},
|
|
77
77
|
typography: d,
|
|
78
78
|
...m,
|
|
79
|
-
children: a ? /* @__PURE__ */
|
|
79
|
+
children: a ? /* @__PURE__ */ S(O, { children: [
|
|
80
80
|
/* @__PURE__ */ i($, { children: s }),
|
|
81
81
|
/* @__PURE__ */ i(j, { children: a?.map((e) => /* @__PURE__ */ L(I, { ...e, key: "option-" + e.value }, e.label ?? e.value)) })
|
|
82
82
|
] }) : s
|
|
@@ -91,7 +91,7 @@ function $({
|
|
|
91
91
|
asChild: h,
|
|
92
92
|
...o
|
|
93
93
|
}) {
|
|
94
|
-
const { open: c, setOpen: g } =
|
|
94
|
+
const { open: c, setOpen: g } = C(), u = () => {
|
|
95
95
|
g(!c);
|
|
96
96
|
};
|
|
97
97
|
if (h) {
|
|
@@ -101,7 +101,7 @@ function $({
|
|
|
101
101
|
{
|
|
102
102
|
"aria-expanded": c,
|
|
103
103
|
"aria-label": "Select toggle",
|
|
104
|
-
onClick:
|
|
104
|
+
onClick: u,
|
|
105
105
|
...f.props
|
|
106
106
|
}
|
|
107
107
|
);
|
|
@@ -118,7 +118,7 @@ function $({
|
|
|
118
118
|
}),
|
|
119
119
|
n
|
|
120
120
|
),
|
|
121
|
-
onClick:
|
|
121
|
+
onClick: u,
|
|
122
122
|
...o,
|
|
123
123
|
children: s
|
|
124
124
|
}
|
|
@@ -132,8 +132,8 @@ function j({
|
|
|
132
132
|
y: c = 0,
|
|
133
133
|
...g
|
|
134
134
|
}) {
|
|
135
|
-
const { open:
|
|
136
|
-
return
|
|
135
|
+
const { open: u, setOpen: f, type: t, ref: d } = C();
|
|
136
|
+
return u ? /* @__PURE__ */ S(
|
|
137
137
|
H,
|
|
138
138
|
{
|
|
139
139
|
ref: (a) => {
|
|
@@ -142,11 +142,11 @@ function j({
|
|
|
142
142
|
const {
|
|
143
143
|
height: b,
|
|
144
144
|
x: l,
|
|
145
|
-
y:
|
|
145
|
+
y: p,
|
|
146
146
|
top: x,
|
|
147
147
|
left: y
|
|
148
148
|
} = m.getBoundingClientRect(), F = a.offsetHeight + x + window.scrollY + b + c > document.documentElement.scrollHeight, e = a.offsetWidth + y + window.scrollX + o > document.documentElement.scrollWidth;
|
|
149
|
-
F ? a.style.bottom = `${window.innerHeight -
|
|
149
|
+
F ? a.style.bottom = `${window.innerHeight - p + 10}px` : a.style.top = `${p + b + 10 + c}px`, e ? a.style.left = `${Math.max(l - a.offsetWidth + m.offsetWidth, 0) + o}px` : a.style.left = `${l + o}px`;
|
|
150
150
|
};
|
|
151
151
|
return r(), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
|
|
152
152
|
window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
|
|
@@ -200,11 +200,11 @@ function I({
|
|
|
200
200
|
showCheck: c = !0,
|
|
201
201
|
...g
|
|
202
202
|
}) {
|
|
203
|
-
const { setOpen:
|
|
204
|
-
d !== "checkbox" &&
|
|
205
|
-
}, m = (l,
|
|
203
|
+
const { setOpen: u, setValue: f, value: t, type: d } = C(), a = () => {
|
|
204
|
+
d !== "checkbox" && u(!1);
|
|
205
|
+
}, m = (l, p) => {
|
|
206
206
|
if (s) {
|
|
207
|
-
s(l,
|
|
207
|
+
s(l, p);
|
|
208
208
|
return;
|
|
209
209
|
}
|
|
210
210
|
typeof l == "string" && f(l), a();
|
|
@@ -213,13 +213,14 @@ function I({
|
|
|
213
213
|
radio: t === o,
|
|
214
214
|
checkbox: Array.isArray(t) && o && t.includes(o)
|
|
215
215
|
}[d], b = !n && !(d === "radio" && r);
|
|
216
|
-
return /* @__PURE__ */
|
|
216
|
+
return /* @__PURE__ */ S(
|
|
217
217
|
A,
|
|
218
218
|
{
|
|
219
219
|
_hover: b && {
|
|
220
220
|
bg: "var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"
|
|
221
221
|
},
|
|
222
222
|
alignItems: "center",
|
|
223
|
+
"aria-label": "Select option",
|
|
223
224
|
borderRadius: "6px",
|
|
224
225
|
color: n ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
|
|
225
226
|
cursor: b ? "pointer" : "default",
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"css-in-js-framework",
|
|
17
17
|
"react"
|
|
18
18
|
],
|
|
19
|
-
"version": "0.1.
|
|
19
|
+
"version": "0.1.29",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
@@ -37,27 +37,28 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"csstype": "^3.1.3",
|
|
39
39
|
"react": "^19.1.1",
|
|
40
|
+
"react-dom": "^19.1.1",
|
|
40
41
|
"clsx": "^2.1",
|
|
41
|
-
"@devup-ui/react": "1.0.
|
|
42
|
+
"@devup-ui/react": "1.0.22"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
|
-
"@storybook/addon-docs": "^9.1
|
|
45
|
-
"@storybook/addon-onboarding": "^9.1
|
|
46
|
-
"@storybook/react-vite": "^9.1
|
|
47
|
-
"@types/react": "^19.
|
|
48
|
-
"eslint-plugin-storybook": "^9.1
|
|
49
|
-
"rollup-plugin-preserve-directives": "^0.4
|
|
50
|
-
"storybook": "^9.1
|
|
51
|
-
"typescript": "^5.9
|
|
52
|
-
"vite": "7.1
|
|
53
|
-
"vite-plugin-dts": "^4.5
|
|
54
|
-
"vitest": "^
|
|
55
|
-
"@devup-ui/vite-plugin": "1.0.
|
|
45
|
+
"@storybook/addon-docs": "^9.1",
|
|
46
|
+
"@storybook/addon-onboarding": "^9.1",
|
|
47
|
+
"@storybook/react-vite": "^9.1",
|
|
48
|
+
"@types/react": "^19.2.2",
|
|
49
|
+
"eslint-plugin-storybook": "^9.1",
|
|
50
|
+
"rollup-plugin-preserve-directives": "^0.4",
|
|
51
|
+
"storybook": "^9.1",
|
|
52
|
+
"typescript": "^5.9",
|
|
53
|
+
"vite": "^7.1",
|
|
54
|
+
"vite-plugin-dts": "^4.5",
|
|
55
|
+
"vitest": "^4.0",
|
|
56
|
+
"@devup-ui/vite-plugin": "1.0.46"
|
|
56
57
|
},
|
|
57
58
|
"peerDependencies": {
|
|
58
59
|
"csstype": "*",
|
|
59
60
|
"react": "*",
|
|
60
|
-
"@devup-ui/react": "1.0.
|
|
61
|
+
"@devup-ui/react": "1.0.22"
|
|
61
62
|
},
|
|
62
63
|
"scripts": {
|
|
63
64
|
"lint": "eslint",
|