@devup-ui/components 0.1.2 → 0.1.5

package/dist/components/Input/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("@devup-ui/react"),f=require("react");function C({defaultValue:a,value:v,onChange:n,typography:k,error:o=!1,errorMessage:p,allowClear:l=!0,icon:d,colors:e,disabled:u,className:F,classNames:r,ref:B,...y}){const[b,x]=f.useState(a||""),D=g=>{x(g.target.value),n==null||n(g)},E=()=>{x("")},j=b&&!u&&l;return t.jsxs(i.Box,{display:"inline-block",pos:"relative",selectors:{"&,&>*":{boxSizing:"border-box"}},children:[d&&t.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}),t.jsx(i.Input,{ref:B,_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:`${F||""} ${(r==null?void 0:r.input)||""}`.trim(),disabled:u,onChange:D,pl:d?"36px":"12px",pr:l?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,error:e==null?void 0:e.error,text:e==null?void 0:e.text,base:e==null?void 0:e.base,iconBold:e==null?void 0:e.iconBold,border:e==null?void 0:e.border,inputBackground:e==null?void 0:e.inputBackground,primaryFocus:e==null?void 0:e.primaryFocus,negative20:e==null?void 0:e.negative20},transition:"all 0.1s ease-in-out",typography:k,value:v??b,...y}),j&&t.jsx(h,{onClick:E}),p&&t.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:p})]})}function h(a){return t.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:t.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),t.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=h;exports.Input=C;
+"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;

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

@@ -7,10 +7,12 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
     errorMessage?: string;
     allowClear?: boolean;
     classNames?: {
+        container?: string;
         input?: string;
         icon?: string;
         errorMessage?: string;
     };
+    onClear?: () => void;
     colors?: {
         primary?: string;
         error?: string;
@@ -24,7 +26,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
     };
     icon?: React.ReactNode;
 }
-export declare function Input({ defaultValue, value: valueProp, onChange: onChangeProp, typography, error, errorMessage, allowClear, icon, colors, disabled, className, classNames, ref, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ defaultValue, value: valueProp, onChange: onChangeProp, typography, error, errorMessage, allowClear, icon, colors, disabled, className, classNames, ref, onClear, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export declare function ClearButton(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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,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,GAAG,KAAK,EACT,EAAE,UAAU,2CA4GZ;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,54 +1,56 @@
 "use client";
-import { jsxs as g, jsx as e } from "react/jsx-runtime";
-import { Box as f, Center as C, Input as m, Text as A, Button as L } from "@devup-ui/react";
-import { useState as j } from "react";
-function O({
+import { jsxs as x, 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: x,
-  onChange: a,
-  typography: k,
-  error: v = !1,
-  errorMessage: p,
-  allowClear: u = !0,
-  icon: n,
-  colors: r,
+  value: k,
+  onChange: n,
+  typography: v,
+  error: F = !1,
+  errorMessage: u,
+  allowClear: b = !0,
+  icon: a,
+  colors: t,
   disabled: d,
   className: o,
-  classNames: t,
-  ref: F,
-  ...B
+  classNames: r,
+  ref: B,
+  onClear: p,
+  ...y
 }) {
-  const [l, b] = j(i || ""), y = (h) => {
-    b(h.target.value), a == null || a(h);
-  }, D = () => {
-    b("");
-  }, E = l && !d && u;
-  return /* @__PURE__ */ g(
-    f,
+  const [h, g] = w(i || ""), D = (l) => {
+    g(l.target.value), n == null || n(l);
+  }, E = () => {
+    g(""), p == null || p();
+  }, f = h && !d && b;
+  return /* @__PURE__ */ x(
+    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(
-          m,
+          A,
           {
-            ref: F,
+            ref: B,
             _disabled: {
               _placeholder: {
                 color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
@@ -63,64 +65,64 @@ function O({
               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: v ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
+            borderColor: F ? "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: y,
-            pl: n ? "36px" : "12px",
-            pr: u ? "36px" : "12px",
+            onChange: D,
+            pl: a ? "36px" : "12px",
+            pr: b ? "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: k,
-            value: x ?? l,
-            ...B
+            typography: v,
+            value: k ?? h,
+            ...y
           }
         ),
-        E && /* @__PURE__ */ e(w, { onClick: D }),
-        p && /* @__PURE__ */ e(
-          A,
+        f && /* @__PURE__ */ e(S, { onClick: E }),
+        u && /* @__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: p
+            children: u
           }
         )
       ]
     }
   );
 }
-function w(i) {
+function S(i) {
   return /* @__PURE__ */ e(
-    L,
+    j,
     {
       alignItems: "center",
       "aria-label": "clear-button",
@@ -139,7 +141,7 @@ function w(i) {
       top: "50%",
       transform: "translateY(-50%)",
       ...i,
-      children: /* @__PURE__ */ g(
+      children: /* @__PURE__ */ x(
         "svg",
         {
           fill: "none",
@@ -175,6 +177,6 @@ function w(i) {
   );
 }
 export {
-  w as ClearButton,
-  O as Input
+  S as ClearButton,
+  T as Input
 };

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,2CAmB5D"}

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,51 @@
+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;
+        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;
+}
+export declare function SelectContainer({ children, showConfirmButton, ...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 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;

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

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

package/dist/components/Stepper/index.js

@@ -0,0 +1,33 @@
+"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
+}) {
+  const [i, p] = m(a ?? 0), s = (l) => {
+    const o = Math.min(Math.max(l, e), r);
+    if (t) {
+      t(o);
+      return;
+    }
+    p(o);
+  };
+  return /* @__PURE__ */ c(
+    f.Provider,
+    {
+      value: { value: u ?? i, setValue: s, min: e, max: r },
+      children: n
+    }
+  );
+}
+export {
+  C 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.2",
+  "version": "0.1.5",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -49,10 +49,10 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "^9.1.1",
     "typescript": "^5.9.2",
-    "vite": "^7.0.6",
+    "vite": "^7.1.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.26"
+    "@devup-ui/vite-plugin": "1.0.27"
   },
   "peerDependencies": {
     "csstype": "*",