@devup-ui/components 0.1.35 → 0.1.36

package/dist/components/Select/index.cjs

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

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

@@ -30,8 +30,11 @@ interface SelectProps extends Omit<ComponentProps<'div'>, 'onChange'> {
         showCheck?: boolean;
         value: string;
     }[];
+    triggerProps?: ComponentProps<typeof SelectTrigger>;
+    containerProps?: ComponentProps<typeof SelectContainer>;
+    optionProps?: ComponentProps<typeof SelectOption>;
 }
-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;
+export declare function Select({ type, children, defaultValue, value: valueProp, onChange, defaultOpen, open: openProp, onOpenChange, colors, typography, options, triggerProps, containerProps, optionProps, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 interface SelectTriggerProps extends ComponentProps<typeof Button> {
     asChild?: boolean;
 }

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,60 +1,63 @@
 "use client";
-import { jsx as i, jsxs as S, Fragment as O } from "react/jsx-runtime";
-import { useRef as R, useState as w, useEffect as z, createElement as L, Children as W } from "react";
-import { Box as k, VStack as H, Flex as A, css as v } from "@devup-ui/react";
-import N from "clsx";
-import { SelectContext as T, useSelect as C } from "../../contexts/useSelect.js";
-import { Button as B } from "../Button/index.js";
-import { IconCheck as D } from "./IconCheck.js";
-function G({
-  type: n = "default",
-  children: s,
-  defaultValue: h,
+import { jsx as i, jsxs as C, Fragment as A } from "react/jsx-runtime";
+import { useRef as W, useState as D, useEffect as H, createElement as N, Children as T } from "react";
+import { Box as F, VStack as $, Flex as B, css as E } from "@devup-ui/react";
+import j from "clsx";
+import { SelectContext as I, useSelect as w } from "../../contexts/useSelect.js";
+import { Button as R } from "../Button/index.js";
+import { IconCheck as O } from "./IconCheck.js";
+function Q({
+  type: t = "default",
+  children: l,
+  defaultValue: b,
   value: o,
-  onChange: c,
-  defaultOpen: g,
+  onChange: s,
+  defaultOpen: h,
   open: u,
   onOpenChange: f,
-  colors: t,
-  typography: d,
+  colors: e,
+  typography: c,
   options: a,
-  ...m
+  triggerProps: x,
+  containerProps: n,
+  optionProps: g,
+  ...d
 }) {
-  const r = R(null), [b, l] = w(g ?? !1), [p, x] = w(
-    h ?? (n === "checkbox" ? [] : "")
+  const p = W(null), [y, k] = D(h ?? !1), [m, v] = D(
+    b ?? (t === "checkbox" ? [] : "")
   );
-  z(() => {
-    const e = (E) => {
-      r.current && r.current.contains(E.target) || l(!1);
+  H(() => {
+    const r = (S) => {
+      p.current && p.current.contains(S.target) || k(!1);
     };
-    return document.addEventListener("click", e), () => document.removeEventListener("click", e);
-  }, [b, l]);
-  const y = (e) => {
-    f?.(e), l(e);
-  }, F = (e) => {
-    if (c?.(e), n !== "default") {
-      if (n === "radio") {
-        x(e);
+    return document.addEventListener("click", r), () => document.removeEventListener("click", r);
+  }, [y, k]);
+  const z = (r) => {
+    f?.(r), k(r);
+  }, L = (r) => {
+    if (s?.(r), t !== "default") {
+      if (t === "radio") {
+        v(r);
         return;
       }
-      Array.isArray(p) && p.includes(e) ? x(p.filter((E) => E !== e)) : x([...p, e]);
+      Array.isArray(m) && m.includes(r) ? v(m.filter((S) => S !== r)) : v([...m, r]);
     }
   };
   return /* @__PURE__ */ i(
-    T.Provider,
+    I.Provider,
     {
       value: {
-        open: u ?? b,
-        setOpen: y,
-        value: o ?? p,
-        setValue: F,
-        type: n,
-        ref: r
+        open: u ?? y,
+        setOpen: z,
+        value: o ?? m,
+        setValue: L,
+        type: t,
+        ref: p
       },
       children: /* @__PURE__ */ i(
-        k,
+        F,
         {
-          ref: r,
+          ref: p,
           display: "inline-block",
           h: "fit-content",
           selectors: {
@@ -64,42 +67,50 @@ function G({
           },
           styleOrder: 1,
           styleVars: {
-            primary: t?.primary,
-            border: t?.border,
-            inputBackground: t?.inputBackground,
-            base10: t?.base10,
-            title: t?.title,
-            selectDisabled: t?.selectDisabled,
-            primaryBg: t?.primaryBg,
-            inputDisabledBackground: t?.inputDisabledBackground,
-            inputDisabledText: t?.inputDisabledText
+            primary: e?.primary,
+            border: e?.border,
+            inputBackground: e?.inputBackground,
+            base10: e?.base10,
+            title: e?.title,
+            selectDisabled: e?.selectDisabled,
+            primaryBg: e?.primaryBg,
+            inputDisabledBackground: e?.inputDisabledBackground,
+            inputDisabledText: e?.inputDisabledText
           },
-          typography: d,
-          ...m,
-          children: a ? /* @__PURE__ */ S(O, { children: [
-            /* @__PURE__ */ i($, { children: s }),
-            /* @__PURE__ */ i(j, { children: a?.map((e) => /* @__PURE__ */ L(I, { ...e, key: "option-" + e.value }, e.label ?? e.value)) })
-          ] }) : s
+          typography: c,
+          ...d,
+          children: a ? /* @__PURE__ */ C(A, { children: [
+            /* @__PURE__ */ i(V, { ...x, children: l }),
+            /* @__PURE__ */ i(P, { ...n, children: a?.map((r) => /* @__PURE__ */ N(
+              X,
+              {
+                ...g,
+                ...r,
+                key: "option-" + r.value
+              },
+              r.label ?? r.value
+            )) })
+          ] }) : l
         }
       )
     }
   );
 }
-function $({
-  className: n,
-  children: s,
-  asChild: h,
+function V({
+  className: t,
+  children: l,
+  asChild: b,
   ...o
 }) {
-  const { open: c, setOpen: g } = C(), u = () => {
-    g(!c);
+  const { open: s, setOpen: h } = w(), u = () => {
+    h(!s);
   };
-  if (h) {
-    const f = W.only(s), t = f.type;
+  if (b) {
+    const f = T.only(l), e = f.type;
     return /* @__PURE__ */ i(
-      t,
+      e,
       {
-        "aria-expanded": c,
+        "aria-expanded": s,
         "aria-label": "Select toggle",
         onClick: u,
         ...f.props
@@ -107,49 +118,49 @@ function $({
     );
   }
   return /* @__PURE__ */ i(
-    B,
+    R,
     {
-      "aria-expanded": c,
+      "aria-expanded": s,
       "aria-label": "Select toggle",
-      className: N(
-        v({
+      className: j(
+        E({
           borderRadius: "8px",
           styleOrder: 2
         }),
-        n
+        t
       ),
       onClick: u,
       ...o,
-      children: s
+      children: l
     }
   );
 }
-function j({
-  children: n,
-  showConfirmButton: s,
-  confirmButtonText: h = "완료",
+function P({
+  children: t,
+  showConfirmButton: l,
+  confirmButtonText: b = "완료",
   x: o = 0,
-  y: c = 0,
-  ...g
+  y: s = 0,
+  ...h
 }) {
-  const { open: u, setOpen: f, type: t, ref: d } = C();
-  return u ? /* @__PURE__ */ S(
-    H,
+  const { open: u, setOpen: f, type: e, ref: c } = w();
+  return u ? /* @__PURE__ */ C(
+    $,
     {
       ref: (a) => {
-        if (!d.current || !a) return;
-        const m = d.current, r = () => {
+        if (!c.current || !a) return;
+        const x = c.current, n = () => {
           const {
-            height: b,
-            x: l,
+            height: g,
+            x: d,
             y: p,
-            top: x,
-            left: y
-          } = m.getBoundingClientRect(), F = a.offsetHeight + x + window.scrollY + b + c > document.documentElement.scrollHeight, e = a.offsetWidth + y + window.scrollX + o > document.documentElement.scrollWidth;
-          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`;
+            top: y,
+            left: k
+          } = x.getBoundingClientRect(), m = a.offsetHeight + y + window.scrollY + g + s > document.documentElement.scrollHeight, v = a.offsetWidth + k + window.scrollX + o > document.documentElement.scrollWidth;
+          m ? a.style.bottom = `${window.innerHeight - p + 10}px` : a.style.top = `${p + g + 10 + s}px`, v ? a.style.left = `${Math.max(d - a.offsetWidth + x.offsetWidth, 0) + o}px` : a.style.left = `${d + o}px`;
         };
-        return r(), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
-          window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
+        return n(), window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), () => {
+          window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n);
         };
       },
       "aria-label": "Select container",
@@ -166,14 +177,14 @@ function j({
       styleOrder: 1,
       userSelect: "none",
       zIndex: 1,
-      ...g,
+      ...h,
       children: [
-        n,
-        s && t === "checkbox" && /* @__PURE__ */ i(A, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ i(
-          B,
+        t,
+        l && e === "checkbox" && /* @__PURE__ */ i(B, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ i(
+          R,
           {
             "aria-label": "Select confirm button",
-            className: v({
+            className: E({
               textAlign: "end",
               bg: "var(--primary, light-dark(#674DC7, #8163E1))",
               borderRadius: "8px",
@@ -185,73 +196,73 @@ function j({
             }),
             onClick: () => f(!1),
             variant: "primary",
-            children: h
+            children: b
           }
         ) })
       ]
     }
   ) : null;
 }
-function I({
-  disabled: n,
-  onClick: s,
-  children: h,
+function X({
+  disabled: t,
+  onClick: l,
+  children: b,
   value: o,
-  showCheck: c = !0,
-  ...g
+  showCheck: s = !0,
+  ...h
 }) {
-  const { setOpen: u, setValue: f, value: t, type: d } = C(), a = () => {
-    d !== "checkbox" && u(!1);
-  }, m = (l, p) => {
-    if (s) {
-      s(l, p);
+  const { setOpen: u, setValue: f, value: e, type: c } = w(), a = () => {
+    c !== "checkbox" && u(!1);
+  }, x = (d, p) => {
+    if (l) {
+      l(d, p);
       return;
     }
-    typeof l == "string" && f(l), a();
-  }, r = {
+    typeof d == "string" && f(d), a();
+  }, n = {
     default: !1,
-    radio: t === o,
-    checkbox: Array.isArray(t) && o && t.includes(o)
-  }[d], b = !n && !(d === "radio" && r);
-  return /* @__PURE__ */ S(
-    A,
+    radio: e === o,
+    checkbox: Array.isArray(e) && o && e.includes(o)
+  }[c], g = !t && !(c === "radio" && n);
+  return /* @__PURE__ */ C(
+    B,
     {
-      _hover: b && {
+      _hover: g && {
         bg: "var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"
       },
       alignItems: "center",
       "aria-label": "Select option",
       borderRadius: "6px",
-      color: n ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
-      cursor: b ? "pointer" : "default",
+      color: t ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : n ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
+      cursor: g ? "pointer" : "default",
       "data-value": o,
-      fontWeight: r ? "700" : "400",
+      fontWeight: n ? "700" : "400",
       gap: {
         checkbox: "10px",
         radio: "6px",
         default: "0"
-      }[d],
+      }[c],
       h: "40px",
-      onClick: n ? void 0 : (l) => m(o, l),
+      onClick: t ? void 0 : (d) => x(o, d),
       px: "10px",
       styleOrder: 1,
       transition: "background-color 0.1s ease-in-out",
-      ...g,
+      ...h,
       children: [
-        c && {
+        s && {
           checkbox: /* @__PURE__ */ i(
-            k,
+            F,
             {
-              bg: n ? "var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--border, light-dark(#E4E4E4, #434343))",
+              bg: t ? "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: r && /* @__PURE__ */ i(
-                D,
+              children: n && /* @__PURE__ */ i(
+                O,
                 {
-                  className: v({
-                    color: n ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
+                  className: E({
+                    color: t ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
                     position: "absolute",
                     top: "55%",
                     left: "50%",
@@ -261,17 +272,17 @@ function I({
               )
             }
           ),
-          radio: /* @__PURE__ */ i(O, { children: r && /* @__PURE__ */ i(
-            k,
+          radio: /* @__PURE__ */ i(A, { children: n && /* @__PURE__ */ i(
+            F,
             {
               borderRadius: "4px",
               boxSize: "18px",
               pos: "relative",
               transition: "background-color 0.1s ease-in-out",
               children: /* @__PURE__ */ i(
-                D,
+                O,
                 {
-                  className: v({
+                  className: E({
                     position: "absolute",
                     top: "55%",
                     left: "50%",
@@ -283,28 +294,28 @@ function I({
             }
           ) }),
           default: null
-        }[d],
-        h
+        }[c],
+        b
       ]
     }
   );
 }
-function J({ ...n }) {
+function U({ ...t }) {
   return /* @__PURE__ */ i(
-    k,
+    F,
     {
       bg: "var(--border, light-dark(#E4E4E4,#434343)",
       h: "1px",
       styleOrder: 1,
       w: "100%",
-      ...n
+      ...t
     }
   );
 }
 export {
-  G as Select,
-  j as SelectContainer,
-  J as SelectDivider,
-  I as SelectOption,
-  $ as SelectTrigger
+  Q as Select,
+  P as SelectContainer,
+  U as SelectDivider,
+  X as SelectOption,
+  V as SelectTrigger
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.35",
+  "version": "0.1.36",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -36,21 +36,21 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "csstype-extra": "latest",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "clsx": "^2.1",
-    "@devup-ui/react": "1.0.26"
+    "@devup-ui/react": "1.0.27"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1",
-    "@storybook/addon-onboarding": "^9.1",
-    "@storybook/react-vite": "^9.1",
-    "@types/react": "^19.2.2",
-    "eslint-plugin-storybook": "^9.1",
+    "@storybook/addon-docs": "^10.0",
+    "@storybook/addon-onboarding": "^10.0",
+    "@storybook/react-vite": "^10.0",
+    "@types/react": "^19.2.6",
+    "eslint-plugin-storybook": "^10.0",
     "rollup-plugin-preserve-directives": "^0.4",
-    "storybook": "^9.1",
+    "storybook": "^10.0",
     "typescript": "^5.9",
-    "vite": "^7.1",
+    "vite": "^7.2",
     "vite-plugin-dts": "^4.5",
     "vitest": "^4.0",
     "@devup-ui/vite-plugin": "1.0.49"
@@ -58,7 +58,7 @@
   "peerDependencies": {
     "csstype-extra": "*",
     "react": "*",
-    "@devup-ui/react": "1.0.26"
+    "@devup-ui/react": "1.0.27"
   },
   "scripts": {
     "lint": "eslint",