@devup-ui/components 0.1.3 → 0.1.6

package/dist/components/Input/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("@devup-ui/react"),C=require("react");function S({defaultValue:a,value:k,onChange:n,typography:F,error:o=!1,errorMessage:b,allowClear:l=!0,icon:d,colors:t,disabled:u,className:B,classNames:e,ref:y,onClear:p,...D}){const[x,g]=C.useState(a||""),E=h=>{g(h.target.value),n==null||n(h)},j=()=>{g(""),p==null||p()},f=x&&!u&&l;return r.jsxs(i.Box,{display:"inline-block",pos:"relative",selectors:{"&,&>*":{boxSizing:"border-box"}},children:[d&&r.jsx(i.Center,{"aria-label":"icon",boxSize:"24px",className:e==null?void 0:e.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}),r.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(red, blue))"},_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||""} ${(e==null?void 0:e.input)||""}`.trim(),disabled:u,onChange:E,pl:d?"36px":"12px",pr:l?"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??x,...D}),f&&r.jsx(v,{onClick:j}),b&&r.jsx(i.Text,{"aria-label":"error-message",bottom:"-8px",className:e==null?void 0:e.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:b})]})}function v(a){return r.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%)",...a,children:r.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),r.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.d.ts

@@ -7,6 +7,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
     errorMessage?: string;
     allowClear?: boolean;
     classNames?: {
+        container?: string;
         input?: string;
         icon?: string;
         errorMessage?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,UAAU,EACV,KAAa,EACb,YAAY,EACZ,UAAiB,EACjB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,EACH,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,2CA6GZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA6C1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,UAAU,EACV,KAAa,EACb,YAAY,EACZ,UAAiB,EACjB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,EACH,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,2CA8GZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA6C1D"}

package/dist/components/Input/index.js

@@ -1,49 +1,50 @@
 "use client";
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { Box as m, Center as C, Input as A, Text as L, Button as j } from "@devup-ui/react";
+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,
-  onChange: a,
-  typography: v,
-  error: F = !1,
-  errorMessage: u,
-  allowClear: b = !0,
-  icon: n,
-  colors: r,
+  value: v,
+  onChange: n,
+  typography: F,
+  error: u = !1,
+  errorMessage: b,
+  allowClear: h = !0,
+  icon: a,
+  colors: t,
   disabled: d,
   className: o,
-  classNames: t,
+  classNames: r,
   ref: B,
   onClear: p,
   ...y
 }) {
-  const [h, l] = w(i || ""), D = (g) => {
-    l(g.target.value), a == null || a(g);
+  const [g, l] = w(i || ""), D = (x) => {
+    l(x.target.value), n == null || n(x);
   }, E = () => {
     l(""), p == null || p();
-  }, f = h && !d && b;
-  return /* @__PURE__ */ x(
-    m,
+  }, f = g && !d && h;
+  return /* @__PURE__ */ k(
+    C,
     {
+      className: r == null ? void 0 : r.container,
       display: "inline-block",
       pos: "relative",
-      selectors: { "&,&>*": { boxSizing: "border-box" } },
+      selectors: { "&, & *": { boxSizing: "border-box" } },
       children: [
-        n && /* @__PURE__ */ e(
-          C,
+        a && /* @__PURE__ */ e(
+          m,
           {
             "aria-label": "icon",
             boxSize: "24px",
-            className: t == null ? void 0 : t.icon,
+            className: r == null ? void 0 : r.icon,
             color: d ? "var(--inputDisabledText, light-dark(#D6D7DE, #373737))" : "var(--iconBold, light-dark(#8D8C9A, #666577))",
             left: "12px",
             pos: "absolute",
             styleOrder: 1,
             top: "50%",
             transform: "translateY(-50%)",
-            children: n
+            children: a
           }
         ),
         /* @__PURE__ */ e(
@@ -64,55 +65,55 @@ function T({
               outline: "none"
             },
             _hover: {
-              border: "1px solid var(--primary, light-dark(red, blue))"
+              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: 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",
-            className: `${o || ""} ${(t == null ? void 0 : t.input) || ""}`.trim(),
+            className: `${o || ""} ${(r == null ? void 0 : r.input) || ""}`.trim(),
             disabled: d,
             onChange: D,
-            pl: n ? "36px" : "12px",
-            pr: b ? "36px" : "12px",
+            pl: a ? "36px" : "12px",
+            pr: h ? "36px" : "12px",
             py: "12px",
             styleOrder: 1,
             styleVars: {
-              primary: r == null ? void 0 : r.primary,
-              error: r == null ? void 0 : r.error,
-              text: r == null ? void 0 : r.text,
-              base: r == null ? void 0 : r.base,
-              iconBold: r == null ? void 0 : r.iconBold,
-              border: r == null ? void 0 : r.border,
-              inputBackground: r == null ? void 0 : r.inputBackground,
-              primaryFocus: r == null ? void 0 : r.primaryFocus,
-              negative20: r == null ? void 0 : r.negative20
+              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: 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",
             bottom: "-8px",
-            className: t == null ? void 0 : t.errorMessage,
+            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: u
+            children: b
           }
         )
       ]
@@ -140,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/IconArrow.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from 'react';
+export declare function IconArrow({ className, ...props }: ComponentProps<'svg'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArrow.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+import { ComponentProps } from 'react';
+export declare function IconCheck({ ...props }: ComponentProps<'svg'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconCheck.d.ts.map

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

@@ -0,0 +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,2CAkB5D"}

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Select } from '.';
+export type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Select>;
+export declare const DefaultStory: Story;
+export declare const ControlledRadioStory: Story;
+export declare const ControlledCheckboxStory: Story;
+export default meta;
+//# sourceMappingURL=Select.stories.d.ts.map

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

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

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

@@ -0,0 +1,54 @@
+import { DevupThemeTypography } from '@devup-ui/react';
+import { ComponentProps } from 'react';
+import { Button } from '../Button';
+type SelectType = 'default' | 'radio' | 'checkbox';
+type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[];
+export declare const useSelect: () => {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    value: SelectValue<SelectType>;
+    setValue: (value: string) => void;
+    type: SelectType;
+};
+interface SelectProps extends ComponentProps<'div'> {
+    defaultValue?: SelectValue<SelectType>;
+    value?: SelectValue<SelectType>;
+    onValueChange?: (value: string) => void;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+    type?: SelectType;
+    colors?: {
+        primary?: string;
+        border?: string;
+        inputBackground?: string;
+        inputDisabledBackground?: string;
+        inputDisabledText?: string;
+        base10?: string;
+        title?: string;
+        selectDisabled?: string;
+        primaryBg?: string;
+    };
+    typography?: keyof DevupThemeTypography;
+}
+export declare function Select({ type, children, defaultValue, value: valueProp, onValueChange, defaultOpen, open: openProp, onOpenChange, colors, typography, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+interface SelectTriggerProps extends ComponentProps<typeof Button> {
+    asChild?: boolean;
+}
+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, 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;
+    value?: string;
+    showCheck?: boolean;
+}
+export declare function SelectOption({ disabled, onClick, children, value, showCheck, ...props }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectDivider({ ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+export declare function IconMinus({ ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconMinus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconMinus.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/IconMinus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,wBAAgB,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAkB9D"}

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

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+export declare function IconPlus({ ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconPlus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPlus.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/IconPlus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,wBAAgB,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAgB7D"}

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Stepper } from './index';
+type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Stepper>;
+export declare const Default: Story;
+export default meta;
+//# sourceMappingURL=Stepper.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EACL,OAAO,EAKR,MAAM,SAAS,CAAA;AAEhB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAU9B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Stepper/index.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime");require("@devup-ui/react");require("clsx");const n=require("react"),d=n.createContext(null);function q({children:a,defaultValue:i,value:s,onValueChange:e,min:t=0,max:r=100,type:o="input"}){const[c,l]=n.useState(i??0),p=v=>{const u=Math.min(Math.max(v,t),r);if(e){e(u);return}l(u)};return S.jsx(d.Provider,{value:{value:s??c,setValue:p,min:t,max:r,type:o},children:a})}exports.Stepper=q;

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

@@ -0,0 +1,30 @@
+import { ComponentProps } from 'react';
+import { Button } from '../Button';
+import { Input } from '../Input';
+type StepperContextType = {
+    value: number;
+    setValue: (value: number) => void;
+    min: number;
+    max: number;
+    type: 'input' | 'text';
+};
+export declare const useStepper: () => StepperContextType;
+type StepperProps = {
+    children?: React.ReactNode;
+    defaultValue?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    type?: 'input' | 'text';
+};
+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({ 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

@@ -0,0 +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;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,2CA6C/D;AAED,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,GACb,CAAA"}

package/dist/components/Stepper/index.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import "@devup-ui/react";
+import "clsx";
+import { useState as v, createContext as f } from "react";
+const x = f(null);
+function M({
+  children: n,
+  defaultValue: a,
+  value: u,
+  onValueChange: t,
+  min: e = 0,
+  max: r = 100,
+  type: i = "input"
+}) {
+  const [p, s] = v(a ?? 0), l = (c) => {
+    const o = Math.min(Math.max(c, e), r);
+    if (t) {
+      t(o);
+      return;
+    }
+    s(o);
+  };
+  return /* @__PURE__ */ m(
+    x.Provider,
+    {
+      value: {
+        value: u ?? p,
+        setValue: l,
+        min: e,
+        max: r,
+        type: i
+      },
+      children: n
+    }
+  );
+}
+export {
+  M as Stepper
+};

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { Button } from './components/Button';
 export { Input } from './components/Input';
+export { Stepper } 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"}
+{"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"}

package/dist/index.js

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

package/package.json

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