@devup-ui/components 0.1.42 → 0.1.44

package/dist/components/Checkbox/index.js

@@ -1,129 +1,89 @@
 "use client";
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { Flex as x, Input as k, Box as y, css as p, Text as b } from "@devup-ui/react";
-import { useId as v, useState as D } from "react";
-import { CheckIcon as E } from "./CheckIcon.js";
-function _({
-  children: i,
-  disabled: r,
-  checked: l,
-  defaultChecked: g = !1,
-  colors: e,
-  onChange: h,
-  ...s
-}) {
-  const n = v(), [F, m] = D(g), a = l ?? F, d = (t) => {
-    m(t), h?.(t);
-  };
-  return /* @__PURE__ */ c(x, { alignItems: "center", gap: "8px", children: [
-    /* @__PURE__ */ c(
-      "label",
-      {
-        className: p({
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "16px",
-          height: "16px",
-          cursor: r ? "not-allowed" : "pointer"
-        }),
-        htmlFor: n,
-        children: [
-          /* @__PURE__ */ o(
-            k,
-            {
-              _active: !r && {
-                bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))"
-              },
-              _checked: {
-                bg: "var(--primary, light-dark(#6159D4, #6670F9))",
-                border: "none",
-                _hover: !r && {
-                  bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))"
-                },
-                _disabled: {
-                  bg: "light-dark(#F0F0F3, #47474A)"
-                }
-              },
-              _disabled: {
-                bg: "light-dark( #F0F0F3, #47474A)"
-              },
-              _hover: !r && {
-                bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))",
-                border: "1px solid var(--primary, light-dark(#6159D4, #6670F9))"
-              },
-              accentColor: "var(--primary, light-dark(#6159D4, #6670F9))",
-              appearance: "none",
-              bg: "var(--inputBg, light-dark(#FFF, #2E2E2E))",
-              border: "1px solid var(--border, light-dark(#E0E0E0, #333333))",
-              borderRadius: "2px",
-              checked: a,
-              cursor: r ? "not-allowed" : "pointer",
-              disabled: r,
-              display: "block",
-              height: "100%",
-              id: n,
-              left: 0,
-              m: "0",
-              onChange: r ? void 0 : (t) => d(t.target.checked),
-              opacity: 1,
-              pointerEvents: "none",
-              pos: "absolute",
-              styleOrder: 1,
-              styleVars: {
-                primary: e?.primary,
-                border: e?.border,
-                inputBg: e?.inputBg
-              },
-              top: 0,
-              type: "checkbox",
-              width: "100%",
-              zIndex: 0,
-              ...s
-            }
-          ),
-          a && /* @__PURE__ */ o(
-            y,
-            {
-              as: E,
-              opacity: "1",
-              pointerEvents: "none",
-              props: {
-                color: r ? "light-dark(#D6D7DE, #47474A)" : "var(--checkIcon, #FFF)"
-              },
-              styleVars: {
-                checkIcon: e?.checkIcon
-              },
-              zIndex: "1"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ o(
-      "label",
-      {
-        className: p({
-          cursor: r ? "not-allowed" : "pointer"
-        }),
-        htmlFor: n,
-        children: typeof i == "string" ? /* @__PURE__ */ o(
-          b,
-          {
-            color: r ? "light-dark(#D6D7DE, #6F6E6E)" : "var(--text, light-dark(#2F2F2F, #EDEDED))",
-            fontSize: "14px",
-            styleVars: {
-              text: e?.text
-            },
-            userSelect: "none",
-            children: i
-          }
-        ) : i
-      }
-    )
-  ] });
+"use client";
+import { CheckIcon as e } from "./CheckIcon.js";
+import { Box as t, Flex as n, Input as r, Text as i, css as a } from "@devup-ui/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useId as c, useState as l } from "react";
+//#region src/components/Checkbox/index.tsx
+function u({ children: u, disabled: d, checked: f, defaultChecked: p = !1, colors: m, onChange: h, ...g }) {
+	let _ = c(), [v, y] = l(p), b = f ?? v, x = (e) => {
+		y(e), h?.(e);
+	};
+	return /* @__PURE__ */ s(n, {
+		alignItems: "center",
+		gap: "8px",
+		children: [/* @__PURE__ */ s("label", {
+			className: a({
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: "16px",
+				height: "16px",
+				cursor: d ? "not-allowed" : "pointer"
+			}),
+			htmlFor: _,
+			children: [/* @__PURE__ */ o(r, {
+				_active: !d && { bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))" },
+				_checked: {
+					bg: "var(--primary, light-dark(#6159D4, #6670F9))",
+					border: "none",
+					_hover: !d && { bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))" },
+					_disabled: { bg: "light-dark(#F0F0F3, #47474A)" }
+				},
+				_disabled: { bg: "light-dark( #F0F0F3, #47474A)" },
+				_hover: !d && {
+					bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))",
+					border: "1px solid var(--primary, light-dark(#6159D4, #6670F9))"
+				},
+				accentColor: "var(--primary, light-dark(#6159D4, #6670F9))",
+				appearance: "none",
+				bg: "var(--inputBg, light-dark(#FFF, #2E2E2E))",
+				border: "1px solid var(--border, light-dark(#E0E0E0, #333333))",
+				borderRadius: "2px",
+				checked: b,
+				cursor: d ? "not-allowed" : "pointer",
+				disabled: d,
+				display: "block",
+				height: "100%",
+				id: _,
+				left: 0,
+				m: "0",
+				onChange: d ? void 0 : (e) => x(e.target.checked),
+				opacity: 1,
+				pointerEvents: "none",
+				pos: "absolute",
+				styleOrder: 1,
+				styleVars: {
+					primary: m?.primary,
+					border: m?.border,
+					inputBg: m?.inputBg
+				},
+				top: 0,
+				type: "checkbox",
+				width: "100%",
+				zIndex: 0,
+				...g
+			}), b && /* @__PURE__ */ o(t, {
+				as: e,
+				opacity: "1",
+				pointerEvents: "none",
+				props: { color: d ? "light-dark(#D6D7DE, #47474A)" : "var(--checkIcon, #FFF)" },
+				styleVars: { checkIcon: m?.checkIcon },
+				zIndex: "1"
+			})]
+		}), /* @__PURE__ */ o("label", {
+			className: a({ cursor: d ? "not-allowed" : "pointer" }),
+			htmlFor: _,
+			children: typeof u == "string" ? /* @__PURE__ */ o(i, {
+				color: d ? "light-dark(#D6D7DE, #6F6E6E)" : "var(--text, light-dark(#2F2F2F, #EDEDED))",
+				fontSize: "14px",
+				styleVars: { text: m?.text },
+				userSelect: "none",
+				children: u
+			}) : u
+		})]
+	});
 }
-export {
-  _ as Checkbox
-};
+//#endregion
+export { u as Checkbox };

package/dist/components/Input/index.cjs

@@ -1,2 +1 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@devup-ui/react"),C=require("react");function j({defaultValue:o="",value:h,onChange:l,typography:x,error:s=!1,errorMessage:d,allowClear:p=!0,icon:i,colors:r,disabled:n,className:v,classNames:a,readOnly:k,onClear:F,...y}){const[B,u]=C.useState(o),D=g=>{u(g.target.value),l?.(g)},m=()=>{u(""),l?.({target:{value:""}}),F?.()},c=h??B,E=!!c&&!n&&p&&!k;return e.jsxs(t.Box,{className:a?.container,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},children:[i&&e.jsx(t.Center,{"aria-label":"icon",boxSize:"24px",className:a?.icon,color:n?"var(--inputDisabledText, light-dark(#D6D7DE, #373737))":"var(--iconBold, light-dark(#8D8C9A, #666577))",left:"12px",pos:"absolute",styleOrder:1,top:"50%",transform:"translateY(-50%)",children:i}),e.jsx(t.Input,{_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:s?"var(--error, light-dark(#D52B2E, #FF5B5E))":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${v||""} ${a?.input||""}`.trim(),disabled:n,onChange:D,pl:i?"36px":"12px",pr:p?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:r?.primary,error:r?.error,text:r?.text,base:r?.base,iconBold:r?.iconBold,border:r?.border,inputBackground:r?.inputBackground,primaryFocus:r?.primaryFocus,negative20:r?.negative20},transition:"all 0.1s ease-in-out",typography:x,value:c,...y}),E&&e.jsx(b,{onClick:m}),s&&d&&e.jsx(t.Text,{"aria-label":"error-message",bottom:"-8px",className:a?.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:d})]})}function b(o){return e.jsx(t.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%)",type:"button",...o,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=b;exports.Input=j;
+"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=``,value:a,onChange:o,typography:s,error:c=!1,errorMessage:l,allowClear:u=!0,icon:d,colors:f,disabled:p,className:m,classNames:h,readOnly:g,onClear:_,...v}){let[y,b]=(0,n.useState)(r),x=e=>{b(e.target.value),o?.(e)},S=()=>{b(``),o?.({target:{value:``}}),_?.()},C=a??y,w=!!C&&!p&&u&&!g;return(0,t.jsxs)(e.Box,{className:h?.container,display:`inline-block`,pos:`relative`,selectors:{"&, & *":{boxSizing:`border-box`}},children:[d&&(0,t.jsx)(e.Center,{"aria-label":`icon`,boxSize:`24px`,className:h?.icon,color:p?`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}),(0,t.jsx)(e.Input,{_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:c?`var(--error, light-dark(#D52B2E, #FF5B5E))`:`var(--border, light-dark(#E4E4E4, #434343))`,borderRadius:`8px`,borderStyle:`solid`,borderWidth:`1px`,className:`${m||``} ${h?.input||``}`.trim(),disabled:p,onChange:x,pl:d?`36px`:`12px`,pr:u?`36px`:`12px`,py:`12px`,styleOrder:1,styleVars:{primary:f?.primary,error:f?.error,text:f?.text,base:f?.base,iconBold:f?.iconBold,border:f?.border,inputBackground:f?.inputBackground,primaryFocus:f?.primaryFocus,negative20:f?.negative20},transition:`all 0.1s ease-in-out`,typography:s,value:C,...v}),w&&(0,t.jsx)(i,{onClick:S}),c&&l&&(0,t.jsx)(e.Text,{"aria-label":`error-message`,bottom:`-8px`,className:h?.errorMessage,color:`var(--error, light-dark(#D52B2E, #FF5B5E))`,left:`0`,pos:`absolute`,styleOrder:1,transform:`translateY(100%)`,typography:`inputPlaceholder`,children:l})]})}function i(n){return(0,t.jsx)(e.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%)`,type:`button`,...n,children:(0,t.jsxs)(`svg`,{fill:`none`,height:`24`,viewBox:`0 0 24 24`,width:`24`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,t.jsx)(`path`,{d:`M18 6L6 18`,stroke:`currentColor`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:`2`}),(0,t.jsx)(`path`,{d:`M6 6L18 18`,stroke:`currentColor`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:`2`})]})})}exports.Input=r;

package/dist/components/Input/index.js

@@ -1,184 +1,133 @@
 "use client";
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { Box as E, Center as f, Input as C, Text as A, Button as L } from "@devup-ui/react";
-import { useState as j } from "react";
-function O({
-  defaultValue: a = "",
-  value: b,
-  onChange: n,
-  typography: c,
-  error: l = !1,
-  errorMessage: d,
-  allowClear: p = !0,
-  icon: o,
-  colors: r,
-  disabled: i,
-  className: x,
-  classNames: t,
-  readOnly: v,
-  onClear: k,
-  ...F
-}) {
-  const [m, s] = j(a), B = (g) => {
-    s(g.target.value), n?.(g);
-  }, y = () => {
-    s(""), n?.({
-      target: { value: "" }
-    }), k?.();
-  }, u = b ?? m, D = !!u && !i && p && !v;
-  return /* @__PURE__ */ h(
-    E,
-    {
-      className: t?.container,
-      display: "inline-block",
-      pos: "relative",
-      selectors: { "&, & *": { boxSizing: "border-box" } },
-      children: [
-        o && /* @__PURE__ */ e(
-          f,
-          {
-            "aria-label": "icon",
-            boxSize: "24px",
-            className: t?.icon,
-            color: i ? "var(--inputDisabledText, light-dark(#D6D7DE, #373737))" : "var(--iconBold, light-dark(#8D8C9A, #666577))",
-            left: "12px",
-            pos: "absolute",
-            styleOrder: 1,
-            top: "50%",
-            transform: "translateY(-50%)",
-            children: o
-          }
-        ),
-        /* @__PURE__ */ e(
-          C,
-          {
-            _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: l ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
-            borderRadius: "8px",
-            borderStyle: "solid",
-            borderWidth: "1px",
-            className: `${x || ""} ${t?.input || ""}`.trim(),
-            disabled: i,
-            onChange: B,
-            pl: o ? "36px" : "12px",
-            pr: p ? "36px" : "12px",
-            py: "12px",
-            styleOrder: 1,
-            styleVars: {
-              primary: r?.primary,
-              error: r?.error,
-              text: r?.text,
-              base: r?.base,
-              iconBold: r?.iconBold,
-              border: r?.border,
-              inputBackground: r?.inputBackground,
-              primaryFocus: r?.primaryFocus,
-              negative20: r?.negative20
-            },
-            transition: "all 0.1s ease-in-out",
-            typography: c,
-            value: u,
-            ...F
-          }
-        ),
-        D && /* @__PURE__ */ e(w, { onClick: y }),
-        l && d && /* @__PURE__ */ e(
-          A,
-          {
-            "aria-label": "error-message",
-            bottom: "-8px",
-            className: t?.errorMessage,
-            color: "var(--error, light-dark(#D52B2E, #FF5B5E))",
-            left: "0",
-            pos: "absolute",
-            styleOrder: 1,
-            transform: "translateY(100%)",
-            typography: "inputPlaceholder",
-            children: d
-          }
-        )
-      ]
-    }
-  );
+"use client";
+import { Box as e, Button as t, Center as n, Input as r, Text as i } from "@devup-ui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useState as s } from "react";
+//#region src/components/Input/index.tsx
+function c({ defaultValue: t = "", value: c, onChange: u, typography: d, error: f = !1, errorMessage: p, allowClear: m = !0, icon: h, colors: g, disabled: _, className: v, classNames: y, readOnly: b, onClear: x, ...S }) {
+	let [C, w] = s(t), T = (e) => {
+		w(e.target.value), u?.(e);
+	}, E = () => {
+		w(""), u?.({ target: { value: "" } }), x?.();
+	}, D = c ?? C, O = !!D && !_ && m && !b;
+	return /* @__PURE__ */ o(e, {
+		className: y?.container,
+		display: "inline-block",
+		pos: "relative",
+		selectors: { "&, & *": { boxSizing: "border-box" } },
+		children: [
+			h && /* @__PURE__ */ a(n, {
+				"aria-label": "icon",
+				boxSize: "24px",
+				className: y?.icon,
+				color: _ ? "var(--inputDisabledText, light-dark(#D6D7DE, #373737))" : "var(--iconBold, light-dark(#8D8C9A, #666577))",
+				left: "12px",
+				pos: "absolute",
+				styleOrder: 1,
+				top: "50%",
+				transform: "translateY(-50%)",
+				children: h
+			}),
+			/* @__PURE__ */ a(r, {
+				_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: f ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
+				borderRadius: "8px",
+				borderStyle: "solid",
+				borderWidth: "1px",
+				className: `${v || ""} ${y?.input || ""}`.trim(),
+				disabled: _,
+				onChange: T,
+				pl: h ? "36px" : "12px",
+				pr: m ? "36px" : "12px",
+				py: "12px",
+				styleOrder: 1,
+				styleVars: {
+					primary: g?.primary,
+					error: g?.error,
+					text: g?.text,
+					base: g?.base,
+					iconBold: g?.iconBold,
+					border: g?.border,
+					inputBackground: g?.inputBackground,
+					primaryFocus: g?.primaryFocus,
+					negative20: g?.negative20
+				},
+				transition: "all 0.1s ease-in-out",
+				typography: d,
+				value: D,
+				...S
+			}),
+			O && /* @__PURE__ */ a(l, { onClick: E }),
+			f && p && /* @__PURE__ */ a(i, {
+				"aria-label": "error-message",
+				bottom: "-8px",
+				className: y?.errorMessage,
+				color: "var(--error, light-dark(#D52B2E, #FF5B5E))",
+				left: "0",
+				pos: "absolute",
+				styleOrder: 1,
+				transform: "translateY(100%)",
+				typography: "inputPlaceholder",
+				children: p
+			})
+		]
+	});
 }
-function w(a) {
-  return /* @__PURE__ */ e(
-    L,
-    {
-      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%)",
-      type: "button",
-      ...a,
-      children: /* @__PURE__ */ h(
-        "svg",
-        {
-          fill: "none",
-          height: "24",
-          viewBox: "0 0 24 24",
-          width: "24",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: [
-            /* @__PURE__ */ e(
-              "path",
-              {
-                d: "M18 6L6 18",
-                stroke: "currentColor",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: "2"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "path",
-              {
-                d: "M6 6L18 18",
-                stroke: "currentColor",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: "2"
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
+function l(e) {
+	return /* @__PURE__ */ a(t, {
+		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%)",
+		type: "button",
+		...e,
+		children: /* @__PURE__ */ o("svg", {
+			fill: "none",
+			height: "24",
+			viewBox: "0 0 24 24",
+			width: "24",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ a("path", {
+				d: "M18 6L6 18",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}), /* @__PURE__ */ a("path", {
+				d: "M6 6L18 18",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			})]
+		})
+	});
 }
-export {
-  w as ClearButton,
-  O as Input
-};
+//#endregion
+export { c as Input };

package/dist/components/Radio/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("@devup-ui/react");function p({className:i,disabled:e,children:t,variant:l="default",checked:b,classNames:v,styles:s,style:h,firstButton:c,lastButton:n,colors:r,...g}){const d=l==="button";return a.jsxs(o.Box,{alignItems:d?void 0:"center","aria-disabled":e,as:"label",cursor:d?void 0:"pointer",display:d?void 0:"inline-flex",gap:d?void 0:2,selectors:{"&[aria-disabled=true]":{cursor:"default"}},children:[d?a.jsx(o.Input,{checked:b,className:i,"data-radio-input":!0,disabled:e,display:"none",opacity:0,styleOrder:1,type:"radio",...g}):a.jsx(o.Input,{_focus:{outline:"1px sold var(--border, var(--primary))"},appearance:"none",bg:"light-dark(#fff, #2E2E2E)",border:"1px solid",borderColor:"$border",borderRadius:"100%",checked:b,className:i,"data-radio-input":!0,disabled:e,height:"18px",m:0,selectors:{"&:checked:not(:disabled)":{bg:"var(--checkedBg, var(--primary, light-dark(#fff, #2E2E2E)))",border:"3px solid",borderColor:"var(--checkedBg, light-dark(#fff, #2E2E2E))",boxShadow:"0 0 0 1px var(--checkedBorder, var(--primary))"},"&:hover:not(:disabled,:checked)":{border:"1px solid var(--hoverBorder, var(--primary))",bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))"},"&:is(:disabled, [aria-disabled=true])":{bgColor:"var(--disabledBg, light-dark(#F0F0F3, #47474A))"}},styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,text:r?.text,bg:r?.bg,hoverBg:r?.hoverBg,hoverBorder:r?.hoverBorder,hoverColor:r?.hoverColor,checkedBg:r?.checkedBg,checkedBorder:r?.checkedBorder,checkedColor:r?.checkedColor,disabledBg:r?.disabledBg,disabledColor:r?.disabledColor},transition:".25s",type:"radio",width:"18px",...g}),l==="button"?a.jsx(o.Box,{_disabled:{cursor:"not-allowed"},"aria-disabled":e,bg:"var(--bg, light-dark(#fff, #2E2E2E))",border:"1px solid",borderColor:"$border",borderRadius:c?"8px 0 0 8px":n?"0 8px 8px 0":void 0,className:i,color:"var(--text, light-dark(#000, #fff))",cursor:"pointer","data-radio-button":!0,display:"flex",px:8,py:3,selectors:{"[data-radio-input]:checked + &:not([aria-disabled=true])":{fontWeight:600,bg:"var(--checkedBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 80%), color-mix(in srgb, var(--primary) 10%, black 80%)))",borderColor:"var(--checkedBorder, var(--primary))",color:"var(--checkedColor, var(--primary))"},"&:hover:not([aria-disabled=true])":{bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))",borderColor:"var(--hoverBorder, var(--primary))"},"[data-radio-input]:disabled + &":{bg:"var(--disabledBg, light-dark(#F0F0F3, #47474A))",color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:h,styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,text:r?.text,bg:r?.bg,hoverBg:r?.hoverBg,hoverBorder:r?.hoverBorder,hoverColor:r?.hoverColor,checkedBg:r?.checkedBg,checkedBorder:r?.checkedBorder,checkedColor:r?.checkedColor,disabledBg:r?.disabledBg,disabledColor:r?.disabledColor},transition:"background-color 0.25s, border-color 0.25s",w:"fit-content",children:t}):a.jsx(o.Text,{"aria-disabled":e,className:v?.label,color:"var(--text, light-dark(#000, #fff))",selectors:{"&[aria-disabled=true]":{color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:h,styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,text:r?.text,bg:r?.bg,hoverBg:r?.hoverBg,hoverBorder:r?.hoverBorder,hoverColor:r?.hoverColor,checkedBg:r?.checkedBg,checkedBorder:r?.checkedBorder,checkedColor:r?.checkedColor,disabledBg:r?.disabledBg,disabledColor:r?.disabledColor},children:t})]})}exports.Radio=p;
+require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`@devup-ui/react`),t=require(`react/jsx-runtime`);function n({className:n,disabled:r,children:i,variant:a=`default`,checked:o,classNames:s,styles:c,style:l,firstButton:u,lastButton:d,colors:f,...p}){let m=a===`button`;return(0,t.jsxs)(e.Box,{alignItems:m?void 0:`center`,"aria-disabled":r,as:`label`,cursor:m?void 0:`pointer`,display:m?void 0:`inline-flex`,gap:m?void 0:2,selectors:{"&[aria-disabled=true]":{cursor:`default`}},children:[m?(0,t.jsx)(e.Input,{checked:o,className:n,"data-radio-input":!0,disabled:r,display:`none`,opacity:0,styleOrder:1,type:`radio`,...p}):(0,t.jsx)(e.Input,{_focus:{outline:`1px sold var(--border, var(--primary))`},appearance:`none`,bg:`light-dark(#fff, #2E2E2E)`,border:`1px solid`,borderColor:`$border`,borderRadius:`100%`,checked:o,className:n,"data-radio-input":!0,disabled:r,height:`18px`,m:0,selectors:{"&:checked:not(:disabled)":{bg:`var(--checkedBg, var(--primary, light-dark(#fff, #2E2E2E)))`,border:`3px solid`,borderColor:`var(--checkedBg, light-dark(#fff, #2E2E2E))`,boxShadow:`0 0 0 1px var(--checkedBorder, var(--primary))`},"&:hover:not(:disabled,:checked)":{border:`1px solid var(--hoverBorder, var(--primary))`,bg:`var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))`},"&:is(:disabled, [aria-disabled=true])":{bgColor:`var(--disabledBg, light-dark(#F0F0F3, #47474A))`}},styleOrder:1,styleVars:{primary:f?.primary,border:f?.border,text:f?.text,bg:f?.bg,hoverBg:f?.hoverBg,hoverBorder:f?.hoverBorder,hoverColor:f?.hoverColor,checkedBg:f?.checkedBg,checkedBorder:f?.checkedBorder,checkedColor:f?.checkedColor,disabledBg:f?.disabledBg,disabledColor:f?.disabledColor},transition:`.25s`,type:`radio`,width:`18px`,...p}),a===`button`?(0,t.jsx)(e.Box,{_disabled:{cursor:`not-allowed`},"aria-disabled":r,bg:`var(--bg, light-dark(#fff, #2E2E2E))`,border:`1px solid`,borderColor:`$border`,borderRadius:u?`8px 0 0 8px`:d?`0 8px 8px 0`:void 0,className:n,color:`var(--text, light-dark(#000, #fff))`,cursor:`pointer`,"data-radio-button":!0,display:`flex`,px:8,py:3,selectors:{"[data-radio-input]:checked + &:not([aria-disabled=true])":{fontWeight:600,bg:`var(--checkedBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 80%), color-mix(in srgb, var(--primary) 10%, black 80%)))`,borderColor:`var(--checkedBorder, var(--primary))`,color:`var(--checkedColor, var(--primary))`},"&:hover:not([aria-disabled=true])":{bg:`var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))`,borderColor:`var(--hoverBorder, var(--primary))`},"[data-radio-input]:disabled + &":{bg:`var(--disabledBg, light-dark(#F0F0F3, #47474A))`,color:`var(--disabledColor, light-dark(#D6D7DE, #373737))`}},style:l,styleOrder:1,styleVars:{primary:f?.primary,border:f?.border,text:f?.text,bg:f?.bg,hoverBg:f?.hoverBg,hoverBorder:f?.hoverBorder,hoverColor:f?.hoverColor,checkedBg:f?.checkedBg,checkedBorder:f?.checkedBorder,checkedColor:f?.checkedColor,disabledBg:f?.disabledBg,disabledColor:f?.disabledColor},transition:`background-color 0.25s, border-color 0.25s`,w:`fit-content`,children:i}):(0,t.jsx)(e.Text,{"aria-disabled":r,className:s?.label,color:`var(--text, light-dark(#000, #fff))`,selectors:{"&[aria-disabled=true]":{color:`var(--disabledColor, light-dark(#D6D7DE, #373737))`}},style:l,styleOrder:1,styleVars:{primary:f?.primary,border:f?.border,text:f?.text,bg:f?.bg,hoverBg:f?.hoverBg,hoverBorder:f?.hoverBorder,hoverColor:f?.hoverColor,checkedBg:f?.checkedBg,checkedBorder:f?.checkedBorder,checkedColor:f?.checkedColor,disabledBg:f?.disabledBg,disabledColor:f?.disabledColor},children:i})]})}exports.Radio=n;