@devup-ui/components 0.1.42 → 0.1.44

package/dist/components/Stepper/index.cjs

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

package/dist/components/Stepper/index.js

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

package/dist/components/Textarea/index.cjs

@@ -1,2 +1 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("@devup-ui/react");function g({typography:d,error:t=!1,errorMessage:l,colors:r,disabled:i,className:n,classNames:e,rows:b=3,...s}){return a.jsxs(o.Box,{className:e?.container,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},w:"100%",children:[a.jsx(o.Box,{_disabled:{_placeholder:{color:"var(--disabledText, light-dark(#D6D7DE, #373737))"},bg:"var(--disabledBg, light-dark(#F0F0F3, #414244))",borderColor:"var(--border, light-dark(#E4E4E4, #434343))",color:"var(--disabledText, light-dark(#D6D7DE, #373737))",cursor:"not-allowed",opacity:.5},_focus:{borderColor:"var(--primary, light-dark(#674DC7, #8163E1))",boxShadow:"0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))",outline:"none"},_hover:!i&&{borderColor:"var(--primary, light-dark(#674DC7, #8163E1))"},_placeholder:{color:"var(--placeholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-invalid":t||void 0,"aria-label":"textarea",as:"textarea",bg:"var(--background, light-dark(#FFFFFF, #2E2E2E))",borderColor:"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${n||""} ${e?.textarea||""}`.trim(),color:"var(--text, light-dark(#272727, #F6F6F6))",disabled:i,fontSize:["16px",null,null,null,"14px"],lineHeight:"1.5",minH:"80px",p:"12px",rows:b,selectors:{'&[aria-invalid="true"]':{borderColor:"var(--error, light-dark(#D52B2E, #FF5B5E))"},'&[aria-invalid="true"]:focus':{borderColor:"var(--error, light-dark(#D52B2E, #FF5B5E))",boxShadow:"0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))"}},styleOrder:1,styleVars:{primary:r?.primary,error:r?.error,text:r?.text,border:r?.border,background:r?.background,placeholder:r?.placeholder,focusRing:r?.focusRing},transition:"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",typography:d,w:"100%",...s}),t&&l&&a.jsx(o.Text,{"aria-label":"error-message",bottom:"-8px",className:e?.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",fontSize:"12px",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",children:l})]})}exports.Textarea=g;
+"use client";"use client";require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`@devup-ui/react`),t=require(`react/jsx-runtime`);function n({typography:n,error:r=!1,errorMessage:i,colors:a,disabled:o,className:s,classNames:c,rows:l=3,...u}){return(0,t.jsxs)(e.Box,{className:c?.container,display:`inline-block`,pos:`relative`,selectors:{"&, & *":{boxSizing:`border-box`}},w:`100%`,children:[(0,t.jsx)(e.Box,{_disabled:{_placeholder:{color:`var(--disabledText, light-dark(#D6D7DE, #373737))`},bg:`var(--disabledBg, light-dark(#F0F0F3, #414244))`,borderColor:`var(--border, light-dark(#E4E4E4, #434343))`,color:`var(--disabledText, light-dark(#D6D7DE, #373737))`,cursor:`not-allowed`,opacity:.5},_focus:{borderColor:`var(--primary, light-dark(#674DC7, #8163E1))`,boxShadow:`0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))`,outline:`none`},_hover:!o&&{borderColor:`var(--primary, light-dark(#674DC7, #8163E1))`},_placeholder:{color:`var(--placeholder, light-dark(#A9A8AB, #CBCBCB))`},"aria-invalid":r||void 0,"aria-label":`textarea`,as:`textarea`,bg:`var(--background, light-dark(#FFFFFF, #2E2E2E))`,borderColor:`var(--border, light-dark(#E4E4E4, #434343))`,borderRadius:`8px`,borderStyle:`solid`,borderWidth:`1px`,className:`${s||``} ${c?.textarea||``}`.trim(),color:`var(--text, light-dark(#272727, #F6F6F6))`,disabled:o,fontSize:[`16px`,null,null,null,`14px`],lineHeight:`1.5`,minH:`80px`,p:`12px`,rows:l,selectors:{'&[aria-invalid="true"]':{borderColor:`var(--error, light-dark(#D52B2E, #FF5B5E))`},'&[aria-invalid="true"]:focus':{borderColor:`var(--error, light-dark(#D52B2E, #FF5B5E))`,boxShadow:`0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))`}},styleOrder:1,styleVars:{primary:a?.primary,error:a?.error,text:a?.text,border:a?.border,background:a?.background,placeholder:a?.placeholder,focusRing:a?.focusRing},transition:`border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out`,typography:n,w:`100%`,...u}),r&&i&&(0,t.jsx)(e.Text,{"aria-label":`error-message`,bottom:`-8px`,className:c?.errorMessage,color:`var(--error, light-dark(#D52B2E, #FF5B5E))`,fontSize:`12px`,left:`0`,pos:`absolute`,styleOrder:1,transform:`translateY(100%)`,children:i})]})}exports.Textarea=n;

package/dist/components/Textarea/index.js

@@ -1,110 +1,87 @@
 "use client";
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import { Box as t, Text as x } from "@devup-ui/react";
-function c({
-  typography: d,
-  error: e = !1,
-  errorMessage: o,
-  colors: r,
-  disabled: l,
-  className: b,
-  classNames: a,
-  rows: n = 3,
-  ...s
-}) {
-  return /* @__PURE__ */ g(
-    t,
-    {
-      className: a?.container,
-      display: "inline-block",
-      pos: "relative",
-      selectors: { "&, & *": { boxSizing: "border-box" } },
-      w: "100%",
-      children: [
-        /* @__PURE__ */ i(
-          t,
-          {
-            _disabled: {
-              _placeholder: {
-                color: "var(--disabledText, light-dark(#D6D7DE, #373737))"
-              },
-              bg: "var(--disabledBg, light-dark(#F0F0F3, #414244))",
-              borderColor: "var(--border, light-dark(#E4E4E4, #434343))",
-              color: "var(--disabledText, light-dark(#D6D7DE, #373737))",
-              cursor: "not-allowed",
-              opacity: 0.5
-            },
-            _focus: {
-              borderColor: "var(--primary, light-dark(#674DC7, #8163E1))",
-              boxShadow: "0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))",
-              outline: "none"
-            },
-            _hover: !l && {
-              borderColor: "var(--primary, light-dark(#674DC7, #8163E1))"
-            },
-            _placeholder: {
-              color: "var(--placeholder, light-dark(#A9A8AB, #CBCBCB))"
-            },
-            "aria-invalid": e || void 0,
-            "aria-label": "textarea",
-            as: "textarea",
-            bg: "var(--background, light-dark(#FFFFFF, #2E2E2E))",
-            borderColor: "var(--border, light-dark(#E4E4E4, #434343))",
-            borderRadius: "8px",
-            borderStyle: "solid",
-            borderWidth: "1px",
-            className: `${b || ""} ${a?.textarea || ""}`.trim(),
-            color: "var(--text, light-dark(#272727, #F6F6F6))",
-            disabled: l,
-            fontSize: ["16px", null, null, null, "14px"],
-            lineHeight: "1.5",
-            minH: "80px",
-            p: "12px",
-            rows: n,
-            selectors: {
-              '&[aria-invalid="true"]': {
-                borderColor: "var(--error, light-dark(#D52B2E, #FF5B5E))"
-              },
-              '&[aria-invalid="true"]:focus': {
-                borderColor: "var(--error, light-dark(#D52B2E, #FF5B5E))",
-                boxShadow: "0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))"
-              }
-            },
-            styleOrder: 1,
-            styleVars: {
-              primary: r?.primary,
-              error: r?.error,
-              text: r?.text,
-              border: r?.border,
-              background: r?.background,
-              placeholder: r?.placeholder,
-              focusRing: r?.focusRing
-            },
-            transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
-            typography: d,
-            w: "100%",
-            ...s
-          }
-        ),
-        e && o && /* @__PURE__ */ i(
-          x,
-          {
-            "aria-label": "error-message",
-            bottom: "-8px",
-            className: a?.errorMessage,
-            color: "var(--error, light-dark(#D52B2E, #FF5B5E))",
-            fontSize: "12px",
-            left: "0",
-            pos: "absolute",
-            styleOrder: 1,
-            transform: "translateY(100%)",
-            children: o
-          }
-        )
-      ]
-    }
-  );
+"use client";
+import { Box as e, Text as t } from "@devup-ui/react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Textarea/index.tsx
+function i({ typography: i, error: a = !1, errorMessage: o, colors: s, disabled: c, className: l, classNames: u, rows: d = 3, ...f }) {
+	return /* @__PURE__ */ r(e, {
+		className: u?.container,
+		display: "inline-block",
+		pos: "relative",
+		selectors: { "&, & *": { boxSizing: "border-box" } },
+		w: "100%",
+		children: [/* @__PURE__ */ n(e, {
+			_disabled: {
+				_placeholder: { color: "var(--disabledText, light-dark(#D6D7DE, #373737))" },
+				bg: "var(--disabledBg, light-dark(#F0F0F3, #414244))",
+				borderColor: "var(--border, light-dark(#E4E4E4, #434343))",
+				color: "var(--disabledText, light-dark(#D6D7DE, #373737))",
+				cursor: "not-allowed",
+				opacity: .5
+			},
+			_focus: {
+				borderColor: "var(--primary, light-dark(#674DC7, #8163E1))",
+				boxShadow: "0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))",
+				outline: "none"
+			},
+			_hover: !c && { borderColor: "var(--primary, light-dark(#674DC7, #8163E1))" },
+			_placeholder: { color: "var(--placeholder, light-dark(#A9A8AB, #CBCBCB))" },
+			"aria-invalid": a || void 0,
+			"aria-label": "textarea",
+			as: "textarea",
+			bg: "var(--background, light-dark(#FFFFFF, #2E2E2E))",
+			borderColor: "var(--border, light-dark(#E4E4E4, #434343))",
+			borderRadius: "8px",
+			borderStyle: "solid",
+			borderWidth: "1px",
+			className: `${l || ""} ${u?.textarea || ""}`.trim(),
+			color: "var(--text, light-dark(#272727, #F6F6F6))",
+			disabled: c,
+			fontSize: [
+				"16px",
+				null,
+				null,
+				null,
+				"14px"
+			],
+			lineHeight: "1.5",
+			minH: "80px",
+			p: "12px",
+			rows: d,
+			selectors: {
+				"&[aria-invalid=\"true\"]": { borderColor: "var(--error, light-dark(#D52B2E, #FF5B5E))" },
+				"&[aria-invalid=\"true\"]:focus": {
+					borderColor: "var(--error, light-dark(#D52B2E, #FF5B5E))",
+					boxShadow: "0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))"
+				}
+			},
+			styleOrder: 1,
+			styleVars: {
+				primary: s?.primary,
+				error: s?.error,
+				text: s?.text,
+				border: s?.border,
+				background: s?.background,
+				placeholder: s?.placeholder,
+				focusRing: s?.focusRing
+			},
+			transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+			typography: i,
+			w: "100%",
+			...f
+		}), a && o && /* @__PURE__ */ n(t, {
+			"aria-label": "error-message",
+			bottom: "-8px",
+			className: u?.errorMessage,
+			color: "var(--error, light-dark(#D52B2E, #FF5B5E))",
+			fontSize: "12px",
+			left: "0",
+			pos: "absolute",
+			styleOrder: 1,
+			transform: "translateY(100%)",
+			children: o
+		})]
+	});
 }
-export {
-  c as Textarea
-};
+//#endregion
+export { i as Textarea };

package/dist/components/Toggle/index.cjs

@@ -1,2 +1 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),t=require("@devup-ui/react"),y=require("react");function f({defaultValue:l=null,value:o=null,onChange:s,disabled:n,className:g,style:p,variant:d="default",colors:r,classNames:u,styles:x}){const[b,v]=y.useState(o??l??!1),e=o??b;function c(h){s?.(!h),v(m=>!m)}const a=d==="default";return i.jsxs(i.Fragment,{children:[i.jsx(t.Box,{"aria-disabled":n,bg:e?"var(--primary)":"var(--bg, light-dark(#E4E4E4, #383838))",borderRadius:"500px",boxSizing:"border-box",className:g,cursor:"pointer",h:a?"28px":"8px",justifyContent:e&&"flex-end",onClick:()=>!n&&c(e),p:a&&1,position:"relative",role:"group",selectors:{"&[aria-disabled=true]":{cursor:"not-allowed",bg:"var(--disabledBg, light-dark(#D6D7DE, #373737))"},"&:hover:not([aria-disabled=true]):not(:disabled)":{bg:e?"var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))":"var(--hoverBg, light-dark(#C3C2C8, #696A6F))"}},style:p,styleVars:{primary:r?.primary,bg:r?.bg,primaryHoverBg:r?.primaryHoverBg,hoverBg:r?.hoverBg,disabledBg:r?.disabledBg},"test-id":"toggle-wrapper",transition:".25s",w:a?"50px":"40px",children:i.jsx(t.Box,{_groupHover:!a&&{outline:"4px solid",outlineColor:"var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"},backgroundColor:"#fff",borderRadius:"100%",boxSize:"20px",className:u?.toggle,filter:!a&&"drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",outline:"4px",pos:"absolute",style:x?.toggle,styleVars:{primary:r?.primary,primaryHoverBg:r?.primaryHoverBg,switchShadow:r?.switchShadow,switchHoverOutline:r?.switchHoverOutline},top:!a&&"-6px",transform:e&&"translateX(calc(100% + 2px))",transition:".25s"})}),i.jsx(t.Input,{type:"hidden",value:String(e)})]})}exports.Toggle=f;
+"use client";"use client";require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`@devup-ui/react`),t=require(`react/jsx-runtime`),n=require(`react`);function r({defaultValue:r=null,value:i=null,onChange:a,disabled:o,className:s,style:c,variant:l=`default`,colors:u,classNames:d,styles:f}){let[p,m]=(0,n.useState)(i??r??!1),h=i??p;function g(e){a?.(!e),m(e=>!e)}let _=l===`default`;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.Box,{"aria-disabled":o,bg:h?`var(--primary)`:`var(--bg, light-dark(#E4E4E4, #383838))`,borderRadius:`500px`,boxSizing:`border-box`,className:s,cursor:`pointer`,h:_?`28px`:`8px`,justifyContent:h&&`flex-end`,onClick:()=>!o&&g(h),p:_&&1,position:`relative`,role:`group`,selectors:{"&[aria-disabled=true]":{cursor:`not-allowed`,bg:`var(--disabledBg, light-dark(#D6D7DE, #373737))`},"&:hover:not([aria-disabled=true]):not(:disabled)":{bg:h?`var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))`:`var(--hoverBg, light-dark(#C3C2C8, #696A6F))`}},style:c,styleVars:{primary:u?.primary,bg:u?.bg,primaryHoverBg:u?.primaryHoverBg,hoverBg:u?.hoverBg,disabledBg:u?.disabledBg},"test-id":`toggle-wrapper`,transition:`.25s`,w:_?`50px`:`40px`,children:(0,t.jsx)(e.Box,{_groupHover:!_&&{outline:`4px solid`,outlineColor:`var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`},backgroundColor:`#fff`,borderRadius:`100%`,boxSize:`20px`,className:d?.toggle,filter:!_&&`drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));`,outline:`4px`,pos:`absolute`,style:f?.toggle,styleVars:{primary:u?.primary,primaryHoverBg:u?.primaryHoverBg,switchShadow:u?.switchShadow,switchHoverOutline:u?.switchHoverOutline},top:!_&&`-6px`,transform:h&&`translateX(calc(100% + 2px))`,transition:`.25s`})}),(0,t.jsx)(e.Input,{type:`hidden`,value:String(h)})]})}exports.Toggle=r;