@devup-ui/components 0.1.7 → 0.1.8
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("@devup-ui/react"),D=require("clsx"),g=require("react"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("@devup-ui/react"),D=require("clsx"),g=require("react"),v=require("../Button/index.cjs"),y=require("./IconCheck.cjs"),E=g.createContext(null),S=()=>{const t=g.useContext(E);if(!t)throw new Error("useSelect must be used within a Select");return t};function A({type:t="default",children:l,defaultValue:o,value:i,onValueChange:n,defaultOpen:x,open:u,onOpenChange:p,colors:e,typography:b,...F}){const h=g.useRef(null),[c,f]=g.useState(x??!1),[a,k]=g.useState(o??(t==="checkbox"?[]:""));g.useEffect(()=>{const s=m=>{h.current&&h.current.contains(m.target)||f(!1)};return document.addEventListener("click",s),()=>document.removeEventListener("click",s)},[c,f]);const j=s=>{p==null||p(s),f(s)},C=s=>{if(n==null||n(s),t!=="default"){if(t==="radio"){k(s);return}Array.isArray(a)&&a.includes(s)?k(a.filter(m=>m!==s)):k([...a,s])}};return r.jsx(E.Provider,{value:{open:u??c,setOpen:j,value:i??a,setValue:C,type:t},children:r.jsx(d.Box,{ref:h,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,inputBackground:e==null?void 0:e.inputBackground,base10:e==null?void 0:e.base10,title:e==null?void 0:e.title,selectDisabled:e==null?void 0:e.selectDisabled,primaryBg:e==null?void 0:e.primaryBg,inputDisabledBackground:e==null?void 0:e.inputDisabledBackground,inputDisabledText:e==null?void 0:e.inputDisabledText},typography:b,...F,children:l})})}function B({className:t,children:l,asChild:o,...i}){const{open:n,setOpen:x}=S(),u=()=>{x(!n)};if(o){const p=g.Children.only(l),e=p.type;return r.jsx(e,{"aria-expanded":n,"aria-label":"Select toggle",onClick:u,...p.props})}return r.jsx(v.Button,{"aria-expanded":n,"aria-label":"Select toggle",className:D(d.css({borderRadius:"8px",styleOrder:2}),t),onClick:u,...i,children:l})}function O({children:t,showConfirmButton:l,confirmButtonText:o="완료",...i}){const{open:n,setOpen:x,type:u}=S();return n?r.jsxs(d.VStack,{"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))",gap:"6px",h:"fit-content",p:"10px",pos:"absolute",styleOrder:1,transform:"translateY(100%)",userSelect:"none",w:"232px",zIndex:1,...i,children:[t,l&&u==="checkbox"&&r.jsx(d.Flex,{justifyContent:"end",w:"100%",children:r.jsx(v.Button,{"aria-label":"Select confirm button",className:d.css({textAlign:"end",bg:"var(--primary, light-dark(#674DC7, #8163E1))",borderRadius:"8px",w:"fit-content",px:"30px",py:"10px",color:"#FFF",typography:"buttonS"}),onClick:()=>x(!1),variant:"primary",children:o})})]}):null}function w({disabled:t,onClick:l,children:o,value:i,showCheck:n=!0,...x}){const{setOpen:u,setValue:p,value:e,type:b}=S(),F=()=>{b!=="checkbox"&&u(!1)},h=(a,k)=>{if(l){l(a,k);return}typeof a=="string"&&p(a),F()},c={default:!1,radio:e===i,checkbox:Array.isArray(e)&&i&&e.includes(i)}[b],f=!t&&!(b==="radio"&&c);return r.jsxs(d.Flex,{_hover:f&&{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"},alignItems:"center",borderRadius:"6px",color:t?"var(--selectDisabled, light-dark(#C4C5D1, #45464D))":c?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--title, light-dark(#1A1A1A,#FAFAFA))",cursor:f?"pointer":"default","data-value":i,fontWeight:c?"700":"400",gap:{checkbox:"10px",radio:"6px",default:"0"}[b],h:"40px",onClick:t?void 0:a=>h(i,a),px:"10px",styleOrder:1,transition:"background-color 0.1s ease-in-out",...x,children:[n&&{checkbox:r.jsx(d.Box,{bg:t?"var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))":c?"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:c&&r.jsx(y.IconCheck,{className:d.css({color:t?"var(--inputDisabledText, light-dark(#E5E5E5, #373737))":"#FFF",position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)"})})}),radio:r.jsx(r.Fragment,{children:c&&r.jsx(d.Box,{borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:r.jsx(y.IconCheck,{className:d.css({position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)",color:"inherit"})})})}),default:null}[b],o]})}function R({...t}){return r.jsx(d.Box,{bg:"var(--border, light-dark(#E4E4E4,#434343)",h:"1px",styleOrder:1,w:"100%",...t})}exports.Select=A;exports.SelectContainer=O;exports.SelectDivider=R;exports.SelectOption=w;exports.SelectTrigger=B;exports.useSelect=S;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,oBAAoB,EAAgB,MAAM,iBAAiB,CAAA;AAE9E,OAAO,EAEL,cAAc,EASf,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAA;AAClD,KAAK,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,SAAS,OAAO,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAU9E,eAAO,MAAM,SAAS;UAPd,OAAO;aACJ,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;WACzB,WAAW,CAAC,UAAU,CAAC;cACpB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;UAC3B,UAAU;CASjB,CAAA;AAED,UAAU,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACjD,YAAY,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACtC,KAAK,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;CACxC;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,WAAW,EACX,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,MAAM,EACN,UAAU,EACV,GAAG,KAAK,EACT,EAAE,WAAW,2CA0Eb;AAED,UAAU,kBAAmB,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AACD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as r, jsxs as S, Fragment as w } from "react/jsx-runtime";
|
|
3
3
|
import { Box as h, VStack as R, Flex as D, css as k } from "@devup-ui/react";
|
|
4
|
-
import
|
|
5
|
-
import { useRef as
|
|
4
|
+
import z from "clsx";
|
|
5
|
+
import { useRef as N, useState as v, useEffect as T, createContext as j, Children as I, useContext as L } from "react";
|
|
6
6
|
import { Button as A } from "../Button/index.js";
|
|
7
7
|
import { IconCheck as E } from "./IconCheck.js";
|
|
8
|
-
const C =
|
|
8
|
+
const C = j(null), y = () => {
|
|
9
9
|
const t = L(C);
|
|
10
10
|
if (!t)
|
|
11
11
|
throw new Error("useSelect must be used within a Select");
|
|
@@ -24,10 +24,10 @@ function G({
|
|
|
24
24
|
typography: b,
|
|
25
25
|
...m
|
|
26
26
|
}) {
|
|
27
|
-
const x =
|
|
27
|
+
const x = N(null), [s, f] = v(o ?? !1), [n, g] = v(
|
|
28
28
|
c ?? (t === "checkbox" ? [] : "")
|
|
29
29
|
);
|
|
30
|
-
|
|
30
|
+
T(() => {
|
|
31
31
|
const d = (F) => {
|
|
32
32
|
x.current && x.current.contains(F.target) || f(!1);
|
|
33
33
|
};
|
|
@@ -91,7 +91,7 @@ function J({
|
|
|
91
91
|
asChild: c,
|
|
92
92
|
...i
|
|
93
93
|
}) {
|
|
94
|
-
const { open: a, setOpen: o } =
|
|
94
|
+
const { open: a, setOpen: o } = y(), p = () => {
|
|
95
95
|
o(!a);
|
|
96
96
|
};
|
|
97
97
|
if (c) {
|
|
@@ -111,9 +111,10 @@ function J({
|
|
|
111
111
|
{
|
|
112
112
|
"aria-expanded": a,
|
|
113
113
|
"aria-label": "Select toggle",
|
|
114
|
-
className:
|
|
114
|
+
className: z(
|
|
115
115
|
k({
|
|
116
|
-
borderRadius: "8px"
|
|
116
|
+
borderRadius: "8px",
|
|
117
|
+
styleOrder: 2
|
|
117
118
|
}),
|
|
118
119
|
t
|
|
119
120
|
),
|
|
@@ -129,7 +130,7 @@ function K({
|
|
|
129
130
|
confirmButtonText: c = "완료",
|
|
130
131
|
...i
|
|
131
132
|
}) {
|
|
132
|
-
const { open: a, setOpen: o, type: p } =
|
|
133
|
+
const { open: a, setOpen: o, type: p } = y();
|
|
133
134
|
return a ? /* @__PURE__ */ S(
|
|
134
135
|
R,
|
|
135
136
|
{
|
|
@@ -147,6 +148,7 @@ function K({
|
|
|
147
148
|
transform: "translateY(100%)",
|
|
148
149
|
userSelect: "none",
|
|
149
150
|
w: "232px",
|
|
151
|
+
zIndex: 1,
|
|
150
152
|
...i,
|
|
151
153
|
children: [
|
|
152
154
|
t,
|
|
@@ -181,7 +183,7 @@ function M({
|
|
|
181
183
|
showCheck: a = !0,
|
|
182
184
|
...o
|
|
183
185
|
}) {
|
|
184
|
-
const { setOpen: p, setValue: u, value: e, type: b } =
|
|
186
|
+
const { setOpen: p, setValue: u, value: e, type: b } = y(), m = () => {
|
|
185
187
|
b !== "checkbox" && p(!1);
|
|
186
188
|
}, x = (n, g) => {
|
|
187
189
|
if (l) {
|
|
@@ -287,5 +289,5 @@ export {
|
|
|
287
289
|
Q as SelectDivider,
|
|
288
290
|
M as SelectOption,
|
|
289
291
|
J as SelectTrigger,
|
|
290
|
-
|
|
292
|
+
y as useSelect
|
|
291
293
|
};
|