@devup-ui/components 0.1.8 → 0.1.9

package/dist/components/Select/Select.stories.d.ts

@@ -5,5 +5,6 @@ declare const meta: Meta<typeof Select>;
 export declare const DefaultStory: Story;
 export declare const ControlledRadioStory: Story;
 export declare const ControlledCheckboxStory: Story;
+export declare const SelectWithOptionsStory: Story;
 export default meta;
 //# sourceMappingURL=Select.stories.d.ts.map

package/dist/components/Select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGtD,OAAO,EACL,MAAM,EAKP,MAAM,GAAG,CAAA;AAGV,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAGlC,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAGrC,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGtD,OAAO,EACL,MAAM,EAKP,MAAM,GAAG,CAAA;AAGV,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAGlC,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAGrC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAGpC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Select/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react"),u=require("@devup-ui/react"),A=require("clsx"),v=require("../../contexts/useSelect.cjs"),E=require("../Button/index.cjs"),F=require("./IconCheck.cjs");function O({type:i="default",children:o,defaultValue:f,value:s,onChange:l,defaultOpen:g,open:b,onOpenChange:x,colors:e,typography:p,options:a,...k}){const r=m.useRef(null),[h,d]=m.useState(g??!1),[c,y]=m.useState(f??(i==="checkbox"?[]:""));m.useEffect(()=>{const n=S=>{r.current&&r.current.contains(S.target)||d(!1)};return document.addEventListener("click",n),()=>document.removeEventListener("click",n)},[h,d]);const B=n=>{x==null||x(n),d(n)},C=n=>{if(l==null||l(n),i!=="default"){if(i==="radio"){y(n);return}Array.isArray(c)&&c.includes(n)?y(c.filter(S=>S!==n)):y([...c,n])}};return t.jsx(v.SelectContext.Provider,{value:{open:b??h,setOpen:B,value:s??c,setValue:C,type:i,ref:r},children:t.jsx(u.Box,{ref:r,display:"inline-block",h:"fit-content",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:p,...k,children:a?t.jsxs(t.Fragment,{children:[t.jsx(j,{children:o}),t.jsx(w,{children:a==null?void 0:a.map(n=>m.createElement(D,{...n,key:"option-"+n.value},n.label??n.value))})]}):o})})}function j({className:i,children:o,asChild:f,...s}){const{open:l,setOpen:g}=v.useSelect(),b=()=>{g(!l)};if(f){const x=m.Children.only(o),e=x.type;return t.jsx(e,{"aria-expanded":l,"aria-label":"Select toggle",onClick:b,...x.props})}return t.jsx(E.Button,{"aria-expanded":l,"aria-label":"Select toggle",className:A(u.css({borderRadius:"8px",styleOrder:2}),i),onClick:b,...s,children:o})}function w({children:i,showConfirmButton:o,confirmButtonText:f="완료",x:s=0,y:l=0,...g}){const{open:b,setOpen:x,type:e,ref:p}=v.useSelect();return b?t.jsxs(u.VStack,{ref:a=>{if(!p.current||!a)return;const k=p.current,r=()=>{const{height:h,x:d,y:c}=k.getBoundingClientRect();a.offsetHeight+c+l>window.innerHeight?a.style.bottom=`${window.innerHeight-c+10}px`:a.style.top=`${c+h+10+l}px`,a.offsetWidth+d+s>window.innerWidth?a.style.left=`${d-a.offsetWidth+k.offsetWidth+s}px`:a.style.left=`${d+s}px`};return r(),window.addEventListener("scroll",r,!0),window.addEventListener("resize",r),()=>{window.removeEventListener("scroll",r,!0),window.removeEventListener("resize",r)}},"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,...g,children:[i,o&&e==="checkbox"&&t.jsx(u.Flex,{justifyContent:"end",w:"100%",children:t.jsx(E.Button,{"aria-label":"Select confirm button",className:u.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:f})})]}):null}function D({disabled:i,onClick:o,children:f,value:s,showCheck:l=!0,...g}){const{setOpen:b,setValue:x,value:e,type:p}=v.useSelect(),a=()=>{p!=="checkbox"&&b(!1)},k=(d,c)=>{if(o){o(d,c);return}typeof d=="string"&&x(d),a()},r={default:!1,radio:e===s,checkbox:Array.isArray(e)&&s&&e.includes(s)}[p],h=!i&&!(p==="radio"&&r);return t.jsxs(u.Flex,{_hover:h&&{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"},alignItems:"center",borderRadius:"6px",color:i?"var(--selectDisabled, light-dark(#C4C5D1, #45464D))":r?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--title, light-dark(#1A1A1A,#FAFAFA))",cursor:h?"pointer":"default","data-value":s,fontWeight:r?"700":"400",gap:{checkbox:"10px",radio:"6px",default:"0"}[p],h:"40px",onClick:i?void 0:d=>k(s,d),px:"10px",styleOrder:1,transition:"background-color 0.1s ease-in-out",...g,children:[l&&{checkbox:t.jsx(u.Box,{bg:i?"var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))":r?"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:r&&t.jsx(F.IconCheck,{className:u.css({color:i?"var(--inputDisabledText, light-dark(#E5E5E5, #373737))":"#FFF",position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)"})})}),radio:t.jsx(t.Fragment,{children:r&&t.jsx(u.Box,{borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:t.jsx(F.IconCheck,{className:u.css({position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)",color:"inherit"})})})}),default:null}[p],f]})}function R({...i}){return t.jsx(u.Box,{bg:"var(--border, light-dark(#E4E4E4,#434343)",h:"1px",styleOrder:1,w:"100%",...i})}exports.Select=O;exports.SelectContainer=w;exports.SelectDivider=R;exports.SelectOption=D;exports.SelectTrigger=j;

package/dist/components/Select/index.d.ts

@@ -1,19 +1,11 @@
 import { DevupThemeTypography } from '@devup-ui/react';
 import { ComponentProps } from 'react';
+import { SelectType, SelectValue } from '../../types/select';
 import { Button } from '../Button';
-type SelectType = 'default' | 'radio' | 'checkbox';
-type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[];
-export declare const useSelect: () => {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    value: SelectValue<SelectType>;
-    setValue: (value: string) => void;
-    type: SelectType;
-};
-interface SelectProps extends ComponentProps<'div'> {
+interface SelectProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     defaultValue?: SelectValue<SelectType>;
     value?: SelectValue<SelectType>;
-    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -31,8 +23,15 @@ interface SelectProps extends ComponentProps<'div'> {
         primaryBg?: string;
     };
     typography?: keyof DevupThemeTypography;
+    options?: {
+        label?: string;
+        disabled?: boolean;
+        onClick?: (value: string | undefined, e?: React.MouseEvent<HTMLDivElement>) => void;
+        showCheck?: boolean;
+        value: string;
+    }[];
 }
-export declare function Select({ type, children, defaultValue, value: valueProp, onValueChange, defaultOpen, open: openProp, onOpenChange, colors, typography, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ type, children, defaultValue, value: valueProp, onChange, defaultOpen, open: openProp, onOpenChange, colors, typography, options, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 interface SelectTriggerProps extends ComponentProps<typeof Button> {
     asChild?: boolean;
 }
@@ -40,12 +39,14 @@ export declare function SelectTrigger({ className, children, asChild, ...props }
 interface SelectContainerProps extends ComponentProps<'div'> {
     showConfirmButton?: boolean;
     confirmButtonText?: string;
+    x?: number;
+    y?: number;
 }
-export declare function SelectContainer({ children, showConfirmButton, confirmButtonText, ...props }: SelectContainerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SelectContainer({ children, showConfirmButton, confirmButtonText, x, y, ...props }: SelectContainerProps): import("react/jsx-runtime").JSX.Element | null;
 interface SelectOptionProps extends Omit<ComponentProps<'div'>, 'onClick'> {
-    onClick?: (value: string | undefined, e?: React.MouseEvent<HTMLDivElement>) => void;
-    disabled?: boolean;
     value?: string;
+    disabled?: boolean;
+    onClick?: (value: string | undefined, e?: React.MouseEvent<HTMLDivElement>) => void;
     showCheck?: boolean;
 }
 export declare function SelectOption({ disabled, onClick, children, value, showCheck, ...props }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/index.js

@@ -1,65 +1,62 @@
 "use client";
-import { jsx as r, jsxs as S, Fragment as w } from "react/jsx-runtime";
-import { Box as h, VStack as R, Flex as D, css as k } from "@devup-ui/react";
-import z from "clsx";
-import { useRef as N, useState as v, useEffect as T, createContext as j, Children as I, useContext as L } from "react";
-import { Button as A } from "../Button/index.js";
-import { IconCheck as E } from "./IconCheck.js";
-const C = j(null), y = () => {
-  const t = L(C);
-  if (!t)
-    throw new Error("useSelect must be used within a Select");
-  return t;
-};
-function G({
-  type: t = "default",
-  children: l,
-  defaultValue: c,
-  value: i,
-  onValueChange: a,
-  defaultOpen: o,
-  open: p,
-  onOpenChange: u,
+import { jsx as a, jsxs as F, Fragment as D } from "react/jsx-runtime";
+import { useRef as R, useState as S, useEffect as z, createElement as L, Children as W } from "react";
+import { Box as m, VStack as H, Flex as A, css as k } from "@devup-ui/react";
+import N from "clsx";
+import { SelectContext as T, useSelect as E } from "../../contexts/useSelect.js";
+import { Button as C } from "../Button/index.js";
+import { IconCheck as w } from "./IconCheck.js";
+function J({
+  type: r = "default",
+  children: c,
+  defaultValue: b,
+  value: d,
+  onChange: s,
+  defaultOpen: x,
+  open: f,
+  onOpenChange: p,
   colors: e,
-  typography: b,
-  ...m
+  typography: o,
+  options: n,
+  ...g
 }) {
-  const x = N(null), [s, f] = v(o ?? !1), [n, g] = v(
-    c ?? (t === "checkbox" ? [] : "")
+  const t = R(null), [h, l] = S(x ?? !1), [u, v] = S(
+    b ?? (r === "checkbox" ? [] : "")
   );
-  T(() => {
-    const d = (F) => {
-      x.current && x.current.contains(F.target) || f(!1);
+  z(() => {
+    const i = (y) => {
+      t.current && t.current.contains(y.target) || l(!1);
     };
-    return document.addEventListener("click", d), () => document.removeEventListener("click", d);
-  }, [s, f]);
-  const B = (d) => {
-    u == null || u(d), f(d);
-  }, O = (d) => {
-    if (a == null || a(d), t !== "default") {
-      if (t === "radio") {
-        g(d);
+    return document.addEventListener("click", i), () => document.removeEventListener("click", i);
+  }, [h, l]);
+  const B = (i) => {
+    p == null || p(i), l(i);
+  }, O = (i) => {
+    if (s == null || s(i), r !== "default") {
+      if (r === "radio") {
+        v(i);
         return;
       }
-      Array.isArray(n) && n.includes(d) ? g(n.filter((F) => F !== d)) : g([...n, d]);
+      Array.isArray(u) && u.includes(i) ? v(u.filter((y) => y !== i)) : v([...u, i]);
     }
   };
-  return /* @__PURE__ */ r(
-    C.Provider,
+  return /* @__PURE__ */ a(
+    T.Provider,
     {
       value: {
-        open: p ?? s,
+        open: f ?? h,
         setOpen: B,
-        value: i ?? n,
+        value: d ?? u,
         setValue: O,
-        type: t
+        type: r,
+        ref: t
       },
-      children: /* @__PURE__ */ r(
-        h,
+      children: /* @__PURE__ */ a(
+        m,
         {
-          ref: x,
+          ref: t,
           display: "inline-block",
-          pos: "relative",
+          h: "fit-content",
           selectors: {
             "&, & *": {
               boxSizing: "border-box"
@@ -77,83 +74,101 @@ function G({
             inputDisabledBackground: e == null ? void 0 : e.inputDisabledBackground,
             inputDisabledText: e == null ? void 0 : e.inputDisabledText
           },
-          typography: b,
-          ...m,
-          children: l
+          typography: o,
+          ...g,
+          children: n ? /* @__PURE__ */ F(D, { children: [
+            /* @__PURE__ */ a($, { children: c }),
+            /* @__PURE__ */ a(j, { children: n == null ? void 0 : n.map((i) => /* @__PURE__ */ L(I, { ...i, key: "option-" + i.value }, i.label ?? i.value)) })
+          ] }) : c
         }
       )
     }
   );
 }
-function J({
-  className: t,
-  children: l,
-  asChild: c,
-  ...i
+function $({
+  className: r,
+  children: c,
+  asChild: b,
+  ...d
 }) {
-  const { open: a, setOpen: o } = y(), p = () => {
-    o(!a);
+  const { open: s, setOpen: x } = E(), f = () => {
+    x(!s);
   };
-  if (c) {
-    const u = I.only(l), e = u.type;
-    return /* @__PURE__ */ r(
+  if (b) {
+    const p = W.only(c), e = p.type;
+    return /* @__PURE__ */ a(
       e,
       {
-        "aria-expanded": a,
+        "aria-expanded": s,
         "aria-label": "Select toggle",
-        onClick: p,
-        ...u.props
+        onClick: f,
+        ...p.props
       }
     );
   }
-  return /* @__PURE__ */ r(
-    A,
+  return /* @__PURE__ */ a(
+    C,
     {
-      "aria-expanded": a,
+      "aria-expanded": s,
       "aria-label": "Select toggle",
-      className: z(
+      className: N(
         k({
           borderRadius: "8px",
           styleOrder: 2
         }),
-        t
+        r
       ),
-      onClick: p,
-      ...i,
-      children: l
+      onClick: f,
+      ...d,
+      children: c
     }
   );
 }
-function K({
-  children: t,
-  showConfirmButton: l,
-  confirmButtonText: c = "완료",
-  ...i
+function j({
+  children: r,
+  showConfirmButton: c,
+  confirmButtonText: b = "완료",
+  x: d = 0,
+  y: s = 0,
+  ...x
 }) {
-  const { open: a, setOpen: o, type: p } = y();
-  return a ? /* @__PURE__ */ S(
-    R,
+  const { open: f, setOpen: p, type: e, ref: o } = E();
+  return f ? /* @__PURE__ */ F(
+    H,
     {
+      ref: (n) => {
+        if (!o.current || !n) return;
+        const g = o.current, t = () => {
+          const {
+            height: h,
+            x: l,
+            y: u
+          } = g.getBoundingClientRect();
+          n.offsetHeight + u + s > window.innerHeight ? n.style.bottom = `${window.innerHeight - u + 10}px` : n.style.top = `${u + h + 10 + s}px`, n.offsetWidth + l + d > window.innerWidth ? n.style.left = `${l - n.offsetWidth + g.offsetWidth + d}px` : n.style.left = `${l + d}px`;
+        };
+        return t(), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+          window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+        };
+      },
       "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",
-      h: "fit-content",
+      minW: "232px",
       p: "10px",
-      pos: "absolute",
+      pos: "fixed",
       styleOrder: 1,
-      transform: "translateY(100%)",
       userSelect: "none",
-      w: "232px",
       zIndex: 1,
-      ...i,
+      ...x,
       children: [
-        t,
-        l && p === "checkbox" && /* @__PURE__ */ r(D, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ r(
-          A,
+        r,
+        c && e === "checkbox" && /* @__PURE__ */ a(A, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ a(
+          C,
           {
             "aria-label": "Select confirm button",
             className: k({
@@ -166,74 +181,74 @@ function K({
               color: "#FFF",
               typography: "buttonS"
             }),
-            onClick: () => o(!1),
+            onClick: () => p(!1),
             variant: "primary",
-            children: c
+            children: b
           }
         ) })
       ]
     }
   ) : null;
 }
-function M({
-  disabled: t,
-  onClick: l,
-  children: c,
-  value: i,
-  showCheck: a = !0,
-  ...o
+function I({
+  disabled: r,
+  onClick: c,
+  children: b,
+  value: d,
+  showCheck: s = !0,
+  ...x
 }) {
-  const { setOpen: p, setValue: u, value: e, type: b } = y(), m = () => {
-    b !== "checkbox" && p(!1);
-  }, x = (n, g) => {
-    if (l) {
-      l(n, g);
+  const { setOpen: f, setValue: p, value: e, type: o } = E(), n = () => {
+    o !== "checkbox" && f(!1);
+  }, g = (l, u) => {
+    if (c) {
+      c(l, u);
       return;
     }
-    typeof n == "string" && u(n), m();
-  }, s = {
+    typeof l == "string" && p(l), n();
+  }, t = {
     default: !1,
-    radio: e === i,
-    checkbox: Array.isArray(e) && i && e.includes(i)
-  }[b], f = !t && !(b === "radio" && s);
-  return /* @__PURE__ */ S(
-    D,
+    radio: e === d,
+    checkbox: Array.isArray(e) && d && e.includes(d)
+  }[o], h = !r && !(o === "radio" && t);
+  return /* @__PURE__ */ F(
+    A,
     {
-      _hover: f && {
+      _hover: h && {
         bg: "var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"
       },
       alignItems: "center",
       borderRadius: "6px",
-      color: t ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : s ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
-      cursor: f ? "pointer" : "default",
-      "data-value": i,
-      fontWeight: s ? "700" : "400",
+      color: r ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : t ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
+      cursor: h ? "pointer" : "default",
+      "data-value": d,
+      fontWeight: t ? "700" : "400",
       gap: {
         checkbox: "10px",
         radio: "6px",
         default: "0"
-      }[b],
+      }[o],
       h: "40px",
-      onClick: t ? void 0 : (n) => x(i, n),
+      onClick: r ? void 0 : (l) => g(d, l),
       px: "10px",
       styleOrder: 1,
       transition: "background-color 0.1s ease-in-out",
-      ...o,
+      ...x,
       children: [
-        a && {
-          checkbox: /* @__PURE__ */ r(
-            h,
+        s && {
+          checkbox: /* @__PURE__ */ a(
+            m,
             {
-              bg: t ? "var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))" : s ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--border, light-dark(#E4E4E4, #434343))",
+              bg: r ? "var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))" : t ? "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: s && /* @__PURE__ */ r(
-                E,
+              children: t && /* @__PURE__ */ a(
+                w,
                 {
                   className: k({
-                    color: t ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
+                    color: r ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
                     position: "absolute",
                     top: "55%",
                     left: "50%",
@@ -243,15 +258,15 @@ function M({
               )
             }
           ),
-          radio: /* @__PURE__ */ r(w, { children: s && /* @__PURE__ */ r(
-            h,
+          radio: /* @__PURE__ */ a(D, { children: t && /* @__PURE__ */ a(
+            m,
             {
               borderRadius: "4px",
               boxSize: "18px",
               pos: "relative",
               transition: "background-color 0.1s ease-in-out",
-              children: /* @__PURE__ */ r(
-                E,
+              children: /* @__PURE__ */ a(
+                w,
                 {
                   className: k({
                     position: "absolute",
@@ -265,29 +280,28 @@ function M({
             }
           ) }),
           default: null
-        }[b],
-        c
+        }[o],
+        b
       ]
     }
   );
 }
-function Q({ ...t }) {
-  return /* @__PURE__ */ r(
-    h,
+function K({ ...r }) {
+  return /* @__PURE__ */ a(
+    m,
     {
       bg: "var(--border, light-dark(#E4E4E4,#434343)",
       h: "1px",
       styleOrder: 1,
       w: "100%",
-      ...t
+      ...r
     }
   );
 }
 export {
-  G as Select,
-  K as SelectContainer,
-  Q as SelectDivider,
-  M as SelectOption,
-  J as SelectTrigger,
-  y as useSelect
+  J as Select,
+  j as SelectContainer,
+  K as SelectDivider,
+  I as SelectOption,
+  $ as SelectTrigger
 };

package/dist/contexts/useSelect.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),c=t.createContext(null),n=()=>{const e=t.useContext(c);if(!e)throw new Error("useSelect must be used within a Select");return e};exports.SelectContext=c;exports.useSelect=n;

package/dist/contexts/useSelect.d.ts

@@ -0,0 +1,21 @@
+import { Context } from 'react';
+type SelectType = 'default' | 'radio' | 'checkbox';
+type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[];
+export declare const SelectContext: Context<{
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    value: SelectValue<SelectType>;
+    setValue: (value: string) => void;
+    type: SelectType;
+    ref: React.RefObject<HTMLDivElement | null>;
+} | null>;
+export declare const useSelect: () => {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    value: SelectValue<SelectType>;
+    setValue: (value: string) => void;
+    type: SelectType;
+    ref: React.RefObject<HTMLDivElement | null>;
+};
+export {};
+//# sourceMappingURL=useSelect.d.ts.map

package/dist/contexts/useSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../src/contexts/useSelect.ts"],"names":[],"mappings":";AAGA,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;AAE9E,eAAO,MAAM,aAAa;UAClB,OAAO;aACJ,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;WACzB,WAAW,CAAC,UAAU,CAAC;cACpB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;UAC3B,UAAU;SACX,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC;SAC9B,CAAA;AAEf,eAAO,MAAM,SAAS;UARd,OAAO;aACJ,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;WACzB,WAAW,CAAC,UAAU,CAAC;cACpB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;UAC3B,UAAU;SACX,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC;CAS5C,CAAA"}

package/dist/contexts/useSelect.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext as t, useContext as o } from "react";
+const n = t(null), c = () => {
+  const e = o(n);
+  if (!e)
+    throw new Error("useSelect must be used within a Select");
+  return e;
+};
+export {
+  n as SelectContext,
+  c as useSelect
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./components/Button/index.cjs"),n=require("./components/Input/index.cjs"),e=require("./components/Select/index.cjs"),t=require("./components/Stepper/index.cjs");exports.Button=r.Button;exports.Input=n.Input;exports.Select=e.Select;exports.SelectContainer=e.SelectContainer;exports.SelectDivider=e.SelectDivider;exports.SelectOption=e.SelectOption;exports.SelectTrigger=e.SelectTrigger;exports.useSelect=e.useSelect;exports.Stepper=t.Stepper;exports.StepperContainer=t.StepperContainer;exports.StepperDecreaseButton=t.StepperDecreaseButton;exports.StepperIncreaseButton=t.StepperIncreaseButton;exports.StepperInput=t.StepperInput;exports.useStepper=t.useStepper;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),p=require("./components/Input/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Input=p.Input;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Button } from './components/Button';
 export { Input } from './components/Input';
-export { Select, SelectContainer, SelectDivider, SelectOption, SelectTrigger, useSelect, } from './components/Select';
+export { Select, SelectContainer, SelectDivider, SelectOption, SelectTrigger, } from './components/Select';
 export { Stepper, StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput, useStepper, } from './components/Stepper';
+export { SelectContext, useSelect } from './contexts/useSelect';
+export type { SelectType, SelectValue } from './types/select';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,EACb,SAAS,GACV,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,20 +1,22 @@
 import { Button as r } from "./components/Button/index.js";
 import { Input as o } from "./components/Input/index.js";
-import { Select as n, SelectContainer as c, SelectDivider as u, SelectOption as i, SelectTrigger as l, useSelect as a } from "./components/Select/index.js";
-import { Stepper as m, StepperContainer as s, StepperDecreaseButton as x, StepperIncreaseButton as B, StepperInput as I, useStepper as g } from "./components/Stepper/index.js";
+import { Select as n, SelectContainer as c, SelectDivider as l, SelectOption as u, SelectTrigger as i } from "./components/Select/index.js";
+import { Stepper as f, StepperContainer as m, StepperDecreaseButton as a, StepperIncreaseButton as s, StepperInput as B, useStepper as C } from "./components/Stepper/index.js";
+import { SelectContext as g, useSelect as D } from "./contexts/useSelect.js";
 export {
   r as Button,
   o as Input,
   n as Select,
   c as SelectContainer,
-  u as SelectDivider,
-  i as SelectOption,
-  l as SelectTrigger,
-  m as Stepper,
-  s as StepperContainer,
-  x as StepperDecreaseButton,
-  B as StepperIncreaseButton,
-  I as StepperInput,
-  a as useSelect,
-  g as useStepper
+  g as SelectContext,
+  l as SelectDivider,
+  u as SelectOption,
+  i as SelectTrigger,
+  f as Stepper,
+  m as StepperContainer,
+  a as StepperDecreaseButton,
+  s as StepperIncreaseButton,
+  B as StepperInput,
+  D as useSelect,
+  C as useStepper
 };

package/dist/types/select.d.ts

@@ -0,0 +1,3 @@
+export type SelectType = 'default' | 'radio' | 'checkbox';
+export type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[];
+//# sourceMappingURL=select.d.ts.map

package/dist/types/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/types/select.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAA;AACzD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,SAAS,OAAO,GAC7D,MAAM,GACN,MAAM,EAAE,CAAA"}

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -41,18 +41,18 @@
     "@devup-ui/react": "1.0.15"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-onboarding": "^9.1.1",
-    "@storybook/react-vite": "^9.1.1",
-    "@types/react": "^19.1.9",
-    "eslint-plugin-storybook": "^9.1.1",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
+    "@types/react": "^19.1.10",
+    "eslint-plugin-storybook": "^9.1.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.2",
     "typescript": "^5.9.2",
-    "vite": "^7.1.1",
+    "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.27"
+    "@devup-ui/vite-plugin": "1.0.29"
   },
   "peerDependencies": {
     "csstype": "*",
@@ -63,6 +63,7 @@
     "lint": "eslint",
     "build": "tsc && vite build",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "package": "pnpm pack --pack-destination \"../../dist\""
   }
 }