@devup-ui/components 0.1.5 → 0.1.7

package/dist/components/Input/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@devup-ui/react"),C=require("react");function S({defaultValue:n,value:k,onChange:a,typography:F,error:o=!1,errorMessage:b,allowClear:x=!0,icon:d,colors:t,disabled:u,className:B,classNames:r,ref:y,onClear:p,...D}){const[g,h]=C.useState(n||""),E=l=>{h(l.target.value),a==null||a(l)},j=()=>{h(""),p==null||p()},f=g&&!u&&x;return e.jsxs(i.Box,{className:r==null?void 0:r.container,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},children:[d&&e.jsx(i.Center,{"aria-label":"icon",boxSize:"24px",className:r==null?void 0:r.icon,color:u?"var(--inputDisabledText, light-dark(#D6D7DE, #373737))":"var(--iconBold, light-dark(#8D8C9A, #666577))",left:"12px",pos:"absolute",styleOrder:1,top:"50%",transform:"translateY(-50%)",children:d}),e.jsx(i.Input,{ref:y,_disabled:{_placeholder:{color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},bg:"var(--inputDisabledBg, light-dark(#F0F0F3, #414244))",border:"1px solid var(--border, light-dark(#E4E4E4, #434343))",color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},_focus:{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))",border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))",outline:"none"},_hover:{border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))"},_placeholder:{color:"var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-label":"input",bg:"var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",borderColor:o?"var(--error, light-dark(#D52B2E, #FF5B5E))":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${B||""} ${(r==null?void 0:r.input)||""}`.trim(),disabled:u,onChange:E,pl:d?"36px":"12px",pr:x?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:t==null?void 0:t.primary,error:t==null?void 0:t.error,text:t==null?void 0:t.text,base:t==null?void 0:t.base,iconBold:t==null?void 0:t.iconBold,border:t==null?void 0:t.border,inputBackground:t==null?void 0:t.inputBackground,primaryFocus:t==null?void 0:t.primaryFocus,negative20:t==null?void 0:t.negative20},transition:"all 0.1s ease-in-out",typography:F,value:k??g,...D}),f&&e.jsx(v,{onClick:j}),b&&e.jsx(i.Text,{"aria-label":"error-message",bottom:"-8px",className:r==null?void 0:r.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:b})]})}function v(n){return e.jsx(i.Button,{alignItems:"center","aria-label":"clear-button",bg:"var(--negative20, light-dark(#0003, #FFF6))",border:"none",borderRadius:"50%",boxSize:"20px",color:"var(--base, light-dark(#FFF, #000))",cursor:"pointer",display:"flex",justifyContent:"center",p:"2px",pos:"absolute",right:"12px",styleOrder:1,top:"50%",transform:"translateY(-50%)",...n,children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),e.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=v;exports.Input=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@devup-ui/react"),C=require("react");function S({defaultValue:n,value:F,onChange:a,typography:o,error:b=!1,errorMessage:x,allowClear:g=!0,icon:d,colors:t,disabled:u,className:B,classNames:r,ref:y,onClear:p,...D}){const[h,l]=C.useState(n||""),E=v=>{l(v.target.value),a==null||a(v)},j=()=>{l(""),p==null||p()},f=h&&!u&&g;return e.jsxs(i.Box,{className:r==null?void 0:r.container,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},children:[d&&e.jsx(i.Center,{"aria-label":"icon",boxSize:"24px",className:r==null?void 0:r.icon,color:u?"var(--inputDisabledText, light-dark(#D6D7DE, #373737))":"var(--iconBold, light-dark(#8D8C9A, #666577))",left:"12px",pos:"absolute",styleOrder:1,top:"50%",transform:"translateY(-50%)",children:d}),e.jsx(i.Input,{ref:y,_disabled:{_placeholder:{color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},bg:"var(--inputDisabledBg, light-dark(#F0F0F3, #414244))",border:"1px solid var(--border, light-dark(#E4E4E4, #434343))",color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},_focus:{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))",border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))",outline:"none"},_hover:{border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))"},_placeholder:{color:"var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-label":"input",bg:"var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",borderColor:b?"var(--error, light-dark(#D52B2E, #FF5B5E))":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${B||""} ${(r==null?void 0:r.input)||""}`.trim(),disabled:u,onChange:E,pl:d?"36px":"12px",pr:g?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:t==null?void 0:t.primary,error:t==null?void 0:t.error,text:t==null?void 0:t.text,base:t==null?void 0:t.base,iconBold:t==null?void 0:t.iconBold,border:t==null?void 0:t.border,inputBackground:t==null?void 0:t.inputBackground,primaryFocus:t==null?void 0:t.primaryFocus,negative20:t==null?void 0:t.negative20},transition:"all 0.1s ease-in-out",typography:o,value:F??h,...D}),f&&e.jsx(k,{onClick:j}),b&&x&&e.jsx(i.Text,{"aria-label":"error-message",bottom:"-8px",className:r==null?void 0:r.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:x})]})}function k(n){return e.jsx(i.Button,{alignItems:"center","aria-label":"clear-button",bg:"var(--negative20, light-dark(#0003, #FFF6))",border:"none",borderRadius:"50%",boxSize:"20px",color:"var(--base, light-dark(#FFF, #000))",cursor:"pointer",display:"flex",justifyContent:"center",p:"2px",pos:"absolute",right:"12px",styleOrder:1,top:"50%",transform:"translateY(-50%)",...n,children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),e.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=k;exports.Input=S;

package/dist/components/Input/index.js

@@ -1,15 +1,15 @@
 "use client";
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
 import { Box as C, Center as m, Input as A, Text as L, Button as j } from "@devup-ui/react";
 import { useState as w } from "react";
 function T({
   defaultValue: i,
-  value: k,
+  value: v,
   onChange: n,
-  typography: v,
-  error: F = !1,
-  errorMessage: u,
-  allowClear: b = !0,
+  typography: F,
+  error: u = !1,
+  errorMessage: b,
+  allowClear: h = !0,
   icon: a,
   colors: t,
   disabled: d,
@@ -19,12 +19,12 @@ function T({
   onClear: p,
   ...y
 }) {
-  const [h, g] = w(i || ""), D = (l) => {
-    g(l.target.value), n == null || n(l);
+  const [g, l] = w(i || ""), D = (x) => {
+    l(x.target.value), n == null || n(x);
   }, E = () => {
-    g(""), p == null || p();
-  }, f = h && !d && b;
-  return /* @__PURE__ */ x(
+    l(""), p == null || p();
+  }, f = g && !d && h;
+  return /* @__PURE__ */ k(
     C,
     {
       className: r == null ? void 0 : r.container,
@@ -72,7 +72,7 @@ function T({
             },
             "aria-label": "input",
             bg: "var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",
-            borderColor: F ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
+            borderColor: u ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
             borderRadius: "8px",
             borderStyle: "solid",
             borderWidth: "1px",
@@ -80,7 +80,7 @@ function T({
             disabled: d,
             onChange: D,
             pl: a ? "36px" : "12px",
-            pr: b ? "36px" : "12px",
+            pr: h ? "36px" : "12px",
             py: "12px",
             styleOrder: 1,
             styleVars: {
@@ -95,13 +95,13 @@ function T({
               negative20: t == null ? void 0 : t.negative20
             },
             transition: "all 0.1s ease-in-out",
-            typography: v,
-            value: k ?? h,
+            typography: F,
+            value: v ?? g,
             ...y
           }
         ),
         f && /* @__PURE__ */ e(S, { onClick: E }),
-        u && /* @__PURE__ */ e(
+        u && b && /* @__PURE__ */ e(
           L,
           {
             "aria-label": "error-message",
@@ -113,7 +113,7 @@ function T({
             styleOrder: 1,
             transform: "translateY(100%)",
             typography: "inputPlaceholder",
-            children: u
+            children: b
           }
         )
       ]
@@ -141,7 +141,7 @@ function S(i) {
       top: "50%",
       transform: "translateY(-50%)",
       ...i,
-      children: /* @__PURE__ */ x(
+      children: /* @__PURE__ */ k(
         "svg",
         {
           fill: "none",

package/dist/components/Select/IconCheck.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function t({...n}){return e.jsx("svg",{fill:"none",height:"10",viewBox:"0 0 12 10",width:"12",xmlns:"http://www.w3.org/2000/svg",...n,children:e.jsx("path",{clipRule:"evenodd",d:"M11.6044 0.825663C12.1054 1.28367 12.1344 2.05481 11.6692 2.54805L5.4787 9.11055C5.24011 9.36348 4.90375 9.50497 4.55315 9.49987C4.20254 9.49477 3.87058 9.34356 3.63968 9.0838L0.30635 5.3338C-0.143922 4.82725 -0.0917767 4.05729 0.42282 3.61405C0.937417 3.17081 1.7196 3.22214 2.16987 3.7287L4.59876 6.4612L9.85463 0.889455C10.3199 0.396214 11.1033 0.367654 11.6044 0.825663Z",fill:"currentColor",fillRule:"evenodd"})})}exports.IconCheck=t;

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

@@ -1 +1 @@
-{"version":3,"file":"IconCheck.d.ts","sourceRoot":"","sources":["../../../src/components/Select/IconCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,wBAAgB,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAmB5D"}
+{"version":3,"file":"IconCheck.d.ts","sourceRoot":"","sources":["../../../src/components/Select/IconCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,wBAAgB,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAkB5D"}

package/dist/components/Select/IconCheck.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+function n({ ...l }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      fill: "none",
+      height: "10",
+      viewBox: "0 0 12 10",
+      width: "12",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...l,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M11.6044 0.825663C12.1054 1.28367 12.1344 2.05481 11.6692 2.54805L5.4787 9.11055C5.24011 9.36348 4.90375 9.50497 4.55315 9.49987C4.20254 9.49477 3.87058 9.34356 3.63968 9.0838L0.30635 5.3338C-0.143922 4.82725 -0.0917767 4.05729 0.42282 3.61405C0.937417 3.17081 1.7196 3.22214 2.16987 3.7287L4.59876 6.4612L9.85463 0.889455C10.3199 0.396214 11.1033 0.367654 11.6044 0.825663Z",
+          fill: "currentColor",
+          fillRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+export {
+  n as IconCheck
+};

package/dist/components/Select/index.cjs

@@ -0,0 +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"),y=require("../Button/index.cjs"),v=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(y.Button,{"aria-expanded":n,"aria-label":"Select toggle",className:D(d.css({borderRadius:"8px"}),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",...i,children:[t,l&&u==="checkbox"&&r.jsx(d.Flex,{justifyContent:"end",w:"100%",children:r.jsx(y.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(v.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(v.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;

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

@@ -23,6 +23,8 @@ interface SelectProps extends ComponentProps<'div'> {
         primary?: string;
         border?: string;
         inputBackground?: string;
+        inputDisabledBackground?: string;
+        inputDisabledText?: string;
         base10?: string;
         title?: string;
         selectDisabled?: string;
@@ -37,8 +39,9 @@ interface SelectTriggerProps extends ComponentProps<typeof Button> {
 export declare function SelectTrigger({ className, children, asChild, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
 interface SelectContainerProps extends ComponentProps<'div'> {
     showConfirmButton?: boolean;
+    confirmButtonText?: string;
 }
-export declare function SelectContainer({ children, showConfirmButton, ...props }: SelectContainerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SelectContainer({ children, showConfirmButton, confirmButtonText, ...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;

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

@@ -0,0 +1,291 @@
+"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 N from "clsx";
+import { useRef as T, useState as y, useEffect as j, createContext as z, 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 = z(null), v = () => {
+  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,
+  colors: e,
+  typography: b,
+  ...m
+}) {
+  const x = T(null), [s, f] = y(o ?? !1), [n, g] = y(
+    c ?? (t === "checkbox" ? [] : "")
+  );
+  j(() => {
+    const d = (F) => {
+      x.current && x.current.contains(F.target) || f(!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;
+      }
+      Array.isArray(n) && n.includes(d) ? g(n.filter((F) => F !== d)) : g([...n, d]);
+    }
+  };
+  return /* @__PURE__ */ r(
+    C.Provider,
+    {
+      value: {
+        open: p ?? s,
+        setOpen: B,
+        value: i ?? n,
+        setValue: O,
+        type: t
+      },
+      children: /* @__PURE__ */ r(
+        h,
+        {
+          ref: x,
+          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,
+          ...m,
+          children: l
+        }
+      )
+    }
+  );
+}
+function J({
+  className: t,
+  children: l,
+  asChild: c,
+  ...i
+}) {
+  const { open: a, setOpen: o } = v(), p = () => {
+    o(!a);
+  };
+  if (c) {
+    const u = I.only(l), e = u.type;
+    return /* @__PURE__ */ r(
+      e,
+      {
+        "aria-expanded": a,
+        "aria-label": "Select toggle",
+        onClick: p,
+        ...u.props
+      }
+    );
+  }
+  return /* @__PURE__ */ r(
+    A,
+    {
+      "aria-expanded": a,
+      "aria-label": "Select toggle",
+      className: N(
+        k({
+          borderRadius: "8px"
+        }),
+        t
+      ),
+      onClick: p,
+      ...i,
+      children: l
+    }
+  );
+}
+function K({
+  children: t,
+  showConfirmButton: l,
+  confirmButtonText: c = "완료",
+  ...i
+}) {
+  const { open: a, setOpen: o, type: p } = v();
+  return a ? /* @__PURE__ */ S(
+    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))",
+      gap: "6px",
+      h: "fit-content",
+      p: "10px",
+      pos: "absolute",
+      styleOrder: 1,
+      transform: "translateY(100%)",
+      userSelect: "none",
+      w: "232px",
+      ...i,
+      children: [
+        t,
+        l && p === "checkbox" && /* @__PURE__ */ r(D, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ r(
+          A,
+          {
+            "aria-label": "Select confirm button",
+            className: k({
+              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: c
+          }
+        ) })
+      ]
+    }
+  ) : null;
+}
+function M({
+  disabled: t,
+  onClick: l,
+  children: c,
+  value: i,
+  showCheck: a = !0,
+  ...o
+}) {
+  const { setOpen: p, setValue: u, value: e, type: b } = v(), m = () => {
+    b !== "checkbox" && p(!1);
+  }, x = (n, g) => {
+    if (l) {
+      l(n, g);
+      return;
+    }
+    typeof n == "string" && u(n), m();
+  }, s = {
+    default: !1,
+    radio: e === i,
+    checkbox: Array.isArray(e) && i && e.includes(i)
+  }[b], f = !t && !(b === "radio" && s);
+  return /* @__PURE__ */ S(
+    D,
+    {
+      _hover: f && {
+        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",
+      gap: {
+        checkbox: "10px",
+        radio: "6px",
+        default: "0"
+      }[b],
+      h: "40px",
+      onClick: t ? void 0 : (n) => x(i, n),
+      px: "10px",
+      styleOrder: 1,
+      transition: "background-color 0.1s ease-in-out",
+      ...o,
+      children: [
+        a && {
+          checkbox: /* @__PURE__ */ r(
+            h,
+            {
+              bg: t ? "var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))" : s ? "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,
+                {
+                  className: k({
+                    color: t ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
+                    position: "absolute",
+                    top: "55%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)"
+                  })
+                }
+              )
+            }
+          ),
+          radio: /* @__PURE__ */ r(w, { children: s && /* @__PURE__ */ r(
+            h,
+            {
+              borderRadius: "4px",
+              boxSize: "18px",
+              pos: "relative",
+              transition: "background-color 0.1s ease-in-out",
+              children: /* @__PURE__ */ r(
+                E,
+                {
+                  className: k({
+                    position: "absolute",
+                    top: "55%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    color: "inherit"
+                  })
+                }
+              )
+            }
+          ) }),
+          default: null
+        }[b],
+        c
+      ]
+    }
+  );
+}
+function Q({ ...t }) {
+  return /* @__PURE__ */ r(
+    h,
+    {
+      bg: "var(--border, light-dark(#E4E4E4,#434343)",
+      h: "1px",
+      styleOrder: 1,
+      w: "100%",
+      ...t
+    }
+  );
+}
+export {
+  G as Select,
+  K as SelectContainer,
+  Q as SelectDivider,
+  M as SelectOption,
+  J as SelectTrigger,
+  v as useSelect
+};

package/dist/components/Stepper/IconMinus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function i({...n}){return e.jsx("svg",{fill:"none",height:"28",viewBox:"0 0 28 28",width:"28",xmlns:"http://www.w3.org/2000/svg",...n,children:e.jsx("path",{clipRule:"evenodd",d:"M9 14C9 13.4477 9.3731 13 9.83333 13H18.1667C18.6269 13 19 13.4477 19 14C19 14.5523 18.6269 15 18.1667 15H9.83333C9.3731 15 9 14.5523 9 14Z",fill:"currentColor",fillRule:"evenodd"})})}exports.IconMinus=i;

package/dist/components/Stepper/IconMinus.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+function o({ ...l }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      fill: "none",
+      height: "28",
+      viewBox: "0 0 28 28",
+      width: "28",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...l,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M9 14C9 13.4477 9.3731 13 9.83333 13H18.1667C18.6269 13 19 13.4477 19 14C19 14.5523 18.6269 15 18.1667 15H9.83333C9.3731 15 9 14.5523 9 14Z",
+          fill: "currentColor",
+          fillRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+export {
+  o as IconMinus
+};

package/dist/components/Stepper/IconPlus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function n({...t}){return e.jsx("svg",{fill:"none",height:"28",viewBox:"0 0 28 28",width:"28",xmlns:"http://www.w3.org/2000/svg",...t,children:e.jsx("path",{d:"M14.8333 9.83333C14.8333 9.3731 14.4602 9 14 9C13.5397 9 13.1666 9.3731 13.1666 9.83333V13.1667H9.8333C9.37307 13.1667 8.99997 13.5398 8.99997 14C8.99997 14.4602 9.37307 14.8333 9.8333 14.8333H13.1666V18.1667C13.1666 18.6269 13.5397 19 14 19C14.4602 19 14.8333 18.6269 14.8333 18.1667V14.8333H18.1666C18.6269 14.8333 19 14.4602 19 14C19 13.5398 18.6269 13.1667 18.1666 13.1667H14.8333V9.83333Z",fill:"currentColor"})})}exports.IconPlus=n;

package/dist/components/Stepper/IconPlus.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+function n({ ...r }) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      fill: "none",
+      height: "28",
+      viewBox: "0 0 28 28",
+      width: "28",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...r,
+      children: /* @__PURE__ */ o(
+        "path",
+        {
+          d: "M14.8333 9.83333C14.8333 9.3731 14.4602 9 14 9C13.5397 9 13.1666 9.3731 13.1666 9.83333V13.1667H9.8333C9.37307 13.1667 8.99997 13.5398 8.99997 14C8.99997 14.4602 9.37307 14.8333 9.8333 14.8333H13.1666V18.1667C13.1666 18.6269 13.5397 19 14 19C14.4602 19 14.8333 18.6269 14.8333 18.1667V14.8333H18.1666C18.6269 14.8333 19 14.4602 19 14C19 13.5398 18.6269 13.1667 18.1666 13.1667H14.8333V9.83333Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+export {
+  n as IconPlus
+};

package/dist/components/Stepper/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime");require("@devup-ui/react");require("clsx");const n=require("react"),S=n.createContext(null);function d({children:a,defaultValue:s,value:i,onValueChange:e,min:t=0,max:r=100}){const[o,c]=n.useState(s??0),l=p=>{const u=Math.min(Math.max(p,t),r);if(e){e(u);return}c(u)};return v.jsx(S.Provider,{value:{value:i??o,setValue:l,min:t,max:r},children:a})}exports.Stepper=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("@devup-ui/react"),m=require("clsx"),d=require("react"),b=require("../Button/index.cjs"),h=require("../Input/index.cjs"),g=require("./IconMinus.cjs"),I=require("./IconPlus.cjs"),S=d.createContext(null),c=()=>{const e=d.useContext(S);if(!e)throw new Error("useStepper must be used within a StepperProvider");return e};function f({children:e,defaultValue:r,value:n,onValueChange:s,min:t=0,max:i=100,type:u="input"}){const[l,p]=d.useState(r??0),v=F=>{const x=Math.min(Math.max(F,t),i);if(s){s(x);return}p(x)};return a.jsx(S.Provider,{value:{value:n??l,setValue:v,min:t,max:i,type:u},children:e})}function C(e){return a.jsx(o.Flex,{alignItems:"center",gap:"8px",styleOrder:1,...e})}function y({...e}){const{value:r,setValue:n,min:s}=c(),t=r<=s;return a.jsx(b.Button,{"aria-label":"Decrease button",className:o.css({p:"0",boxSize:"28px",borderRadius:"4px"}),disabled:t,onClick:()=>n(r-1),...e,children:a.jsx(g.IconMinus,{className:o.css({color:t?"var(--base10, light-dark(#0000001A,#FFFFFF1A))":"var(--text, light-dark(#272727, #F6F6F6))"})})})}function j({...e}){const{value:r,setValue:n,max:s}=c(),t=r>=s;return a.jsx(b.Button,{"aria-label":"Increase button",className:o.css({p:"0",boxSize:"28px",borderRadius:"4px",selectors:{"&>div>div":{}}}),disabled:t,onClick:()=>n(r+1),...e,children:a.jsx(I.IconPlus,{className:o.css({color:t?"var(--base10, light-dark(#0000001A,#FFFFFF1A))":"var(--text, light-dark(#272727, #F6F6F6))"})})})}function k({className:e,...r}){const{value:n,setValue:s,type:t}=c(),i=o.css({p:"0",border:"none",w:"fit-content",h:"fit-content",styleOrder:3}),u=t==="input",l=u?h.Input:"div";return a.jsx(l,{allowClear:!1,"aria-label":"Stepper value",className:m(o.css({styleOrder:2,w:"60px",textAlign:"center",borderRadius:"6px",selectors:{"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button":{display:"none"}}}),!u&&i,e),dangerouslySetInnerHTML:u?void 0:{__html:Number(n).toString()},"data-value":n,onChange:p=>s(Number(p.target.value)),readOnly:!u,type:"number",value:n,...r})}exports.Stepper=f;exports.StepperContainer=C;exports.StepperDecreaseButton=y;exports.StepperIncreaseButton=j;exports.StepperInput=k;exports.useStepper=c;

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

@@ -6,6 +6,7 @@ type StepperContextType = {
     setValue: (value: number) => void;
     min: number;
     max: number;
+    type: 'input' | 'text';
 };
 export declare const useStepper: () => StepperContextType;
 type StepperProps = {
@@ -15,14 +16,15 @@ type StepperProps = {
     onValueChange?: (value: number) => void;
     min?: number;
     max?: number;
+    type?: 'input' | 'text';
 };
-declare function Stepper({ children, defaultValue, value: valueProp, onValueChange, min, max, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+declare function Stepper({ children, defaultValue, value: valueProp, onValueChange, min, max, type, }: StepperProps): import("react/jsx-runtime").JSX.Element;
 declare function StepperContainer(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function StepperDecreaseButton({ ...props }: ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
 declare function StepperIncreaseButton({ ...props }: ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
 interface StepperInputProps extends ComponentProps<typeof Input> {
     editable?: boolean;
 }
-declare function StepperInput({ editable, className, ...props }: StepperInputProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperInput({ className, ...props }: StepperInputProps): import("react/jsx-runtime").JSX.Element;
 export { Stepper, StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAA;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAID,eAAO,MAAM,UAAU,0BAMtB,CAAA;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,GAAO,EACP,GAAS,GACV,EAAE,YAAY,2CAmBd;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAErD;AAED,iBAAS,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,2CAwBzE;AAED,iBAAS,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,2CA2BzE;AAED,UAAU,iBAAkB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,YAAY,CAAC,EACpB,QAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,2CA6CnB;AAED,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,GACb,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAA;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,OAAO,GAAG,MAAM,CAAA;CACvB,CAAA;AAID,eAAO,MAAM,UAAU,0BAMtB,CAAA;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAc,GACf,EAAE,YAAY,2CAyBd;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAErD;AAED,iBAAS,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,2CAwBzE;AAED,iBAAS,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,2CA2BzE;AAED,UAAU,iBAAkB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CA0C/D;AAED,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,GACb,CAAA"}

package/dist/components/Stepper/index.js

@@ -1,33 +1,148 @@
 "use client";
-import { jsx as c } from "react/jsx-runtime";
-import "@devup-ui/react";
-import "clsx";
-import { useState as m, createContext as v } from "react";
-const f = v(null);
-function C({
-  children: n,
-  defaultValue: a,
-  value: u,
-  onValueChange: t,
-  min: e = 0,
-  max: r = 100
+import { jsx as a } from "react/jsx-runtime";
+import { Flex as F, css as i } from "@devup-ui/react";
+import f from "clsx";
+import { useState as S, createContext as h, useContext as g } from "react";
+import { Button as m } from "../Button/index.js";
+import { Input as C } from "../Input/index.js";
+import { IconMinus as k } from "./IconMinus.js";
+import { IconPlus as w } from "./IconPlus.js";
+const b = h(null), p = () => {
+  const e = g(b);
+  if (!e)
+    throw new Error("useStepper must be used within a StepperProvider");
+  return e;
+};
+function B({
+  children: e,
+  defaultValue: r,
+  value: n,
+  onValueChange: o,
+  min: t = 0,
+  max: l = 100,
+  type: s = "input"
 }) {
-  const [i, p] = m(a ?? 0), s = (l) => {
-    const o = Math.min(Math.max(l, e), r);
-    if (t) {
-      t(o);
+  const [c, u] = S(r ?? 0), x = (v) => {
+    const d = Math.min(Math.max(v, t), l);
+    if (o) {
+      o(d);
       return;
     }
-    p(o);
+    u(d);
   };
-  return /* @__PURE__ */ c(
-    f.Provider,
+  return /* @__PURE__ */ a(
+    b.Provider,
+    {
+      value: {
+        value: n ?? c,
+        setValue: x,
+        min: t,
+        max: l,
+        type: s
+      },
+      children: e
+    }
+  );
+}
+function P(e) {
+  return /* @__PURE__ */ a(F, { alignItems: "center", gap: "8px", styleOrder: 1, ...e });
+}
+function R({ ...e }) {
+  const { value: r, setValue: n, min: o } = p(), t = r <= o;
+  return /* @__PURE__ */ a(
+    m,
+    {
+      "aria-label": "Decrease button",
+      className: i({
+        p: "0",
+        boxSize: "28px",
+        borderRadius: "4px"
+      }),
+      disabled: t,
+      onClick: () => n(r - 1),
+      ...e,
+      children: /* @__PURE__ */ a(
+        k,
+        {
+          className: i({
+            color: t ? "var(--base10, light-dark(#0000001A,#FFFFFF1A))" : "var(--text, light-dark(#272727, #F6F6F6))"
+          })
+        }
+      )
+    }
+  );
+}
+function D({ ...e }) {
+  const { value: r, setValue: n, max: o } = p(), t = r >= o;
+  return /* @__PURE__ */ a(
+    m,
+    {
+      "aria-label": "Increase button",
+      className: i({
+        p: "0",
+        boxSize: "28px",
+        borderRadius: "4px",
+        selectors: {
+          "&>div>div": {}
+        }
+      }),
+      disabled: t,
+      onClick: () => n(r + 1),
+      ...e,
+      children: /* @__PURE__ */ a(
+        w,
+        {
+          className: i({
+            color: t ? "var(--base10, light-dark(#0000001A,#FFFFFF1A))" : "var(--text, light-dark(#272727, #F6F6F6))"
+          })
+        }
+      )
+    }
+  );
+}
+function E({ className: e, ...r }) {
+  const { value: n, setValue: o, type: t } = p(), l = i({
+    p: "0",
+    border: "none",
+    w: "fit-content",
+    h: "fit-content",
+    styleOrder: 3
+  }), s = t === "input";
+  return /* @__PURE__ */ a(
+    s ? C : "div",
     {
-      value: { value: u ?? i, setValue: s, min: e, max: r },
-      children: n
+      allowClear: !1,
+      "aria-label": "Stepper value",
+      className: f(
+        i({
+          styleOrder: 2,
+          w: "60px",
+          textAlign: "center",
+          borderRadius: "6px",
+          selectors: {
+            "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
+              display: "none"
+            }
+          }
+        }),
+        !s && l,
+        e
+      ),
+      dangerouslySetInnerHTML: s ? void 0 : { __html: Number(n).toString() },
+      "data-value": n,
+      onChange: (u) => o(Number(u.target.value)),
+      readOnly: !s,
+      type: "number",
+      value: n,
+      ...r
     }
   );
 }
 export {
-  C as Stepper
+  B as Stepper,
+  P as StepperContainer,
+  R as StepperDecreaseButton,
+  D as StepperIncreaseButton,
+  E as StepperInput,
+  p as useStepper
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/Button/index.cjs"),t=require("./components/Input/index.cjs"),n=require("./components/Stepper/index.cjs");exports.Button=e.Button;exports.Input=t.Input;exports.Stepper=n.Stepper;
+"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;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { Button } from './components/Button';
 export { Input } from './components/Input';
-export { Stepper } from './components/Stepper';
+export { Select, SelectContainer, SelectDivider, SelectOption, SelectTrigger, useSelect, } from './components/Select';
+export { Stepper, StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput, useStepper, } from './components/Stepper';
 //# 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,EAAE,OAAO,EAAE,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,EACb,SAAS,GACV,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA"}

package/dist/index.js

@@ -1,8 +1,20 @@
-import { Button as t } from "./components/Button/index.js";
-import { Input as e } from "./components/Input/index.js";
-import { Stepper as m } from "./components/Stepper/index.js";
+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";
 export {
-  t as Button,
-  e as Input,
-  m as Stepper
+  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
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "publishConfig": {
     "access": "public"