@devup-ui/components 0.1.9 → 0.1.11

package/dist/components/Select/index.cjs

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

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

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "csstype": "^3.1.3",
     "react": "^19.1.1",
     "clsx": "^2.1",
-    "@devup-ui/react": "1.0.15"
+    "@devup-ui/react": "1.0.16"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.2",
@@ -57,7 +57,7 @@
   "peerDependencies": {
     "csstype": "*",
     "react": "*",
-    "@devup-ui/react": "1.0.15"
+    "@devup-ui/react": "1.0.16"
   },
   "scripts": {
     "lint": "eslint",