@devup-ui/components 0.1.32 → 0.1.33

package/dist/components/Stepper/index.cjs

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

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

@@ -22,9 +22,7 @@ declare function Stepper({ children, defaultValue, value: valueProp, onValueChan
 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;
-}
+type StepperInputProps = ComponentProps<typeof Input>;
 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;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"}
+{"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,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAA;AAErD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAgD/D;AAED,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,GACb,CAAA"}

package/dist/components/Stepper/index.js

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

package/package.json

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