@devup-ui/components 0.1.43 → 0.1.44

package/dist/components/Button/index.js

@@ -1,218 +1,221 @@
-import { jsx as a, jsxs as y } from "react/jsx-runtime";
-import { Button as F, Box as u, Center as c, css as E } from "@devup-ui/react";
-import { IconSpinner as g } from "./IconSpinner.js";
-function B({
-  variant: r = "default",
-  type: m = "button",
-  colors: e,
-  danger: o = !1,
-  children: s,
-  size: i = "md",
-  className: n,
-  icon: l,
-  ellipsis: x = !1,
-  typography: b,
-  disabled: p,
-  loading: t = !1,
-  loadingSpinner: d = "whole",
-  ...f
-}) {
-  return /* @__PURE__ */ a(
-    F,
-    {
-      _active: {
-        primary: {
-          bg: "color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)"
-        },
-        default: {
-          bg: {
-            true: "var(--error, #D52B2E)",
-            false: "color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)"
-          }[o.toString()],
-          border: {
-            true: "1px solid var(--error, #D52B2E)",
-            false: "1px solid var(--primary, #8163E1)"
-          }[o.toString()],
-          color: "var(--text, #272727)"
-        }
-      }[r],
-      _disabled: {
-        primary: {
-          color: "#D6D7DE",
-          bgColor: "#F0F0F3",
-          cursor: "not-allowed"
-        },
-        default: {
-          color: "#D6D7DE",
-          bgColor: "#F0F0F3",
-          cursor: "not-allowed",
-          borderColor: "var(--border, #E4E4E4)"
-        }
-      }[r],
-      _focusVisible: {
-        outline: "2px solid",
-        outlineColor: {
-          primary: "var(--primaryFocus, #9385D3)",
-          default: {
-            true: "var(--error, #FF5B5E)",
-            false: "var(--primaryFocus, #9385D3)"
-          }[o.toString()]
-        }[r]
-      },
-      _hover: {
-        primary: {
-          bg: "color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)"
-        },
-        default: {
-          borderColor: {
-            true: "var(--error, #D52B2E)",
-            false: "var(--primary, #8163E1)"
-          }[o.toString()],
-          bg: !o && "color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)"
-        }
-      }[r],
-      _themeDark: {
-        _active: {
-          primary: {
-            bg: "color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);"
-          },
-          default: {
-            bg: {
-              true: "var(--error, #FF5B5E)",
-              false: "var(--primary, #8163E1)"
-            }[o.toString()],
-            color: "var(--text, #F6F6F6)"
-          }
-        }[r],
-        _disabled: {
-          primary: {
-            color: "#373737",
-            bgColor: "#47474A",
-            borderColor: "transparent"
-          },
-          default: {
-            color: "#373737",
-            bgColor: "#47474A",
-            borderColor: "transparent"
-          }
-        }[r],
-        _hover: {
-          primary: {
-            bg: "color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);",
-            outlineColor: "var(--primary, #674DC7)"
-          },
-          default: {
-            borderColor: {
-              true: "var(--error, #FF5B5E)",
-              false: "var(--primary, #8163E1)"
-            }[o.toString()],
-            bg: !o && "color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)"
-          }
-        }[r],
-        _focusVisible: {
-          outlineColor: {
-            primary: "var(--primaryFocus, #927CE4)",
-            default: {
-              true: "var(--error, #D52B2E)",
-              false: "var(--primaryFocus, #927CE4)"
-            }[o.toString()]
-          }[r]
-        },
-        bg: {
-          primary: "var(--primary, #8163E1)",
-          default: "var(--inputBackground, #2E2E2E)"
-        }[r]
-      },
-      "aria-disabled": p,
-      "aria-label": "button",
-      bg: {
-        primary: "var(--primary, #8163E1)",
-        default: "var(--inputBackground, #FFF)"
-      }[r],
-      border: {
-        primary: "none",
-        default: "1px solid var(--border, #E4E4E4)"
-      }[r],
-      borderRadius: {
-        primary: "8px",
-        default: "10px"
-      }[r],
-      boxSizing: "border-box",
-      className: n,
-      color: {
-        primary: "#FFF",
-        default: {
-          true: "var(--error, #D52B2E)",
-          false: "var(--text, #272727)"
-        }[o.toString()]
-      }[r],
-      cursor: "pointer",
-      disabled: p,
-      fontSize: {
-        default: ["14px", null, null, null, "15px"],
-        primary: ["15px", null, null, null, "16px"]
-      }[r],
-      fontWeight: 700,
-      letterSpacing: {
-        default: ["-0.02em", null, null, null, "-0.03em"],
-        primary: ["0px", null, null, null, "-0.01em"]
-      }[r],
-      outlineOffset: "2px",
-      pos: "relative",
-      px: {
-        false: { sm: "12px", md: "16px", lg: "20px" }[i],
-        true: { sm: "24px", md: "28px", lg: "32px" }[i]
-      }[(!!(l || t)).toString()],
-      py: { sm: "8px", md: "10px", lg: "12px" }[i],
-      styleOrder: 1,
-      styleVars: {
-        primary: e?.primary,
-        error: e?.error,
-        text: e?.text,
-        border: e?.border,
-        inputBackground: e?.inputBackground,
-        primaryFocus: e?.primaryFocus
-      },
-      transition: ".25s",
-      type: m,
-      typography: b,
-      ...f,
-      children: /* @__PURE__ */ y(u, { maxW: "100%", mx: "auto", pos: "relative", w: "fit-content", children: [
-        (l || t) && /* @__PURE__ */ a(
-          c,
-          {
-            boxSize: "24px",
-            left: "4px",
-            pos: "absolute",
-            role: "presentation",
-            selectors: {
-              "&>svg": {
-                color: "inherit"
-              }
-            },
-            top: "50%",
-            transform: "translate(-100%, -50%)",
-            children: t ? /* @__PURE__ */ a(g, { type: d }) : l
-          }
-        ),
-        /* @__PURE__ */ a(
-          u,
-          {
-            className: x ? E({
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
-            }) : void 0,
-            lineHeight: "1.2",
-            minH: "1.2em",
-            transform: !!(l || t) && "translateX(8px)",
-            children: s
-          }
-        )
-      ] })
-    }
-  );
+import { IconSpinner as e } from "./IconSpinner.js";
+import { Box as t, Button as n, Center as r, css as i } from "@devup-ui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Button/index.tsx
+function s({ variant: s = "default", type: c = "button", colors: l, danger: u = !1, children: d, size: f = "md", className: p, icon: m, ellipsis: h = !1, typography: g, disabled: _, loading: v = !1, loadingSpinner: y = "whole", ...b }) {
+	return /* @__PURE__ */ a(n, {
+		_active: {
+			primary: { bg: "color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)" },
+			default: {
+				bg: {
+					true: "var(--error, #D52B2E)",
+					false: "color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)"
+				}[u.toString()],
+				border: {
+					true: "1px solid var(--error, #D52B2E)",
+					false: "1px solid var(--primary, #8163E1)"
+				}[u.toString()],
+				color: "var(--text, #272727)"
+			}
+		}[s],
+		_disabled: {
+			primary: {
+				color: "#D6D7DE",
+				bgColor: "#F0F0F3",
+				cursor: "not-allowed"
+			},
+			default: {
+				color: "#D6D7DE",
+				bgColor: "#F0F0F3",
+				cursor: "not-allowed",
+				borderColor: "var(--border, #E4E4E4)"
+			}
+		}[s],
+		_focusVisible: {
+			outline: "2px solid",
+			outlineColor: {
+				primary: "var(--primaryFocus, #9385D3)",
+				default: {
+					true: "var(--error, #FF5B5E)",
+					false: "var(--primaryFocus, #9385D3)"
+				}[u.toString()]
+			}[s]
+		},
+		_hover: {
+			primary: { bg: "color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)" },
+			default: {
+				borderColor: {
+					true: "var(--error, #D52B2E)",
+					false: "var(--primary, #8163E1)"
+				}[u.toString()],
+				bg: !u && "color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)"
+			}
+		}[s],
+		_themeDark: {
+			_active: {
+				primary: { bg: "color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);" },
+				default: {
+					bg: {
+						true: "var(--error, #FF5B5E)",
+						false: "var(--primary, #8163E1)"
+					}[u.toString()],
+					color: "var(--text, #F6F6F6)"
+				}
+			}[s],
+			_disabled: {
+				primary: {
+					color: "#373737",
+					bgColor: "#47474A",
+					borderColor: "transparent"
+				},
+				default: {
+					color: "#373737",
+					bgColor: "#47474A",
+					borderColor: "transparent"
+				}
+			}[s],
+			_hover: {
+				primary: {
+					bg: "color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);",
+					outlineColor: "var(--primary, #674DC7)"
+				},
+				default: {
+					borderColor: {
+						true: "var(--error, #FF5B5E)",
+						false: "var(--primary, #8163E1)"
+					}[u.toString()],
+					bg: !u && "color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)"
+				}
+			}[s],
+			_focusVisible: { outlineColor: {
+				primary: "var(--primaryFocus, #927CE4)",
+				default: {
+					true: "var(--error, #D52B2E)",
+					false: "var(--primaryFocus, #927CE4)"
+				}[u.toString()]
+			}[s] },
+			bg: {
+				primary: "var(--primary, #8163E1)",
+				default: "var(--inputBackground, #2E2E2E)"
+			}[s]
+		},
+		"aria-disabled": _,
+		"aria-label": "button",
+		bg: {
+			primary: "var(--primary, #8163E1)",
+			default: "var(--inputBackground, #FFF)"
+		}[s],
+		border: {
+			primary: "none",
+			default: "1px solid var(--border, #E4E4E4)"
+		}[s],
+		borderRadius: {
+			primary: "8px",
+			default: "10px"
+		}[s],
+		boxSizing: "border-box",
+		className: p,
+		color: {
+			primary: "#FFF",
+			default: {
+				true: "var(--error, #D52B2E)",
+				false: "var(--text, #272727)"
+			}[u.toString()]
+		}[s],
+		cursor: "pointer",
+		disabled: _,
+		fontSize: {
+			default: [
+				"14px",
+				null,
+				null,
+				null,
+				"15px"
+			],
+			primary: [
+				"15px",
+				null,
+				null,
+				null,
+				"16px"
+			]
+		}[s],
+		fontWeight: 700,
+		letterSpacing: {
+			default: [
+				"-0.02em",
+				null,
+				null,
+				null,
+				"-0.03em"
+			],
+			primary: [
+				"0px",
+				null,
+				null,
+				null,
+				"-0.01em"
+			]
+		}[s],
+		outlineOffset: "2px",
+		pos: "relative",
+		px: {
+			false: {
+				sm: "12px",
+				md: "16px",
+				lg: "20px"
+			}[f],
+			true: {
+				sm: "24px",
+				md: "28px",
+				lg: "32px"
+			}[f]
+		}[(!!(m || v)).toString()],
+		py: {
+			sm: "8px",
+			md: "10px",
+			lg: "12px"
+		}[f],
+		styleOrder: 1,
+		styleVars: {
+			primary: l?.primary,
+			error: l?.error,
+			text: l?.text,
+			border: l?.border,
+			inputBackground: l?.inputBackground,
+			primaryFocus: l?.primaryFocus
+		},
+		transition: ".25s",
+		type: c,
+		typography: g,
+		...b,
+		children: /* @__PURE__ */ o(t, {
+			maxW: "100%",
+			mx: "auto",
+			pos: "relative",
+			w: "fit-content",
+			children: [(m || v) && /* @__PURE__ */ a(r, {
+				boxSize: "24px",
+				left: "4px",
+				pos: "absolute",
+				role: "presentation",
+				selectors: { "&>svg": { color: "inherit" } },
+				top: "50%",
+				transform: "translate(-100%, -50%)",
+				children: v ? /* @__PURE__ */ a(e, { type: y }) : m
+			}), /* @__PURE__ */ a(t, {
+				className: h ? i({
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				}) : void 0,
+				lineHeight: "1.2",
+				minH: "1.2em",
+				transform: !!(m || v) && "translateX(8px)",
+				children: d
+			})]
+		})
+	});
 }
-export {
-  B as Button
-};
+//#endregion
+export { s as Button };

package/dist/components/Checkbox/CheckIcon.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function n({color:t,...i}){return e.jsx("svg",{height:"10",viewBox:"0 0 12 10",width:"12",xmlns:"http://www.w3.org/2000/svg",...i,children:e.jsx("path",{clipRule:"evenodd",d:"M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z",fill:t,fillRule:"evenodd"})})}exports.CheckIcon=n;
+require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`react/jsx-runtime`);function t({color:t,...n}){return(0,e.jsx)(`svg`,{height:`10`,viewBox:`0 0 12 10`,width:`12`,xmlns:`http://www.w3.org/2000/svg`,...n,children:(0,e.jsx)(`path`,{clipRule:`evenodd`,d:`M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z`,fill:t,fillRule:`evenodd`})})}exports.CheckIcon=t;

package/dist/components/Checkbox/CheckIcon.js

@@ -1,25 +1,19 @@
 import { jsx as e } from "react/jsx-runtime";
-function t({ color: i, ...l }) {
-  return /* @__PURE__ */ e(
-    "svg",
-    {
-      height: "10",
-      viewBox: "0 0 12 10",
-      width: "12",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...l,
-      children: /* @__PURE__ */ e(
-        "path",
-        {
-          clipRule: "evenodd",
-          d: "M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z",
-          fill: i,
-          fillRule: "evenodd"
-        }
-      )
-    }
-  );
+//#region src/components/Checkbox/CheckIcon.tsx
+function t({ color: t, ...n }) {
+	return /* @__PURE__ */ e("svg", {
+		height: "10",
+		viewBox: "0 0 12 10",
+		width: "12",
+		xmlns: "http://www.w3.org/2000/svg",
+		...n,
+		children: /* @__PURE__ */ e("path", {
+			clipRule: "evenodd",
+			d: "M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z",
+			fill: t,
+			fillRule: "evenodd"
+		})
+	});
 }
-export {
-  t as CheckIcon
-};
+//#endregion
+export { t as CheckIcon };

package/dist/components/Checkbox/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"),s=require("react"),k=require("./CheckIcon.cjs");function m({children:i,disabled:r,checked:l,defaultChecked:p=!1,colors:o,onChange:g,...h}){const a=s.useId(),[F,d]=s.useState(p),c=l??F,x=n=>{d(n),g?.(n)};return e.jsxs(t.Flex,{alignItems:"center",gap:"8px",children:[e.jsxs("label",{className:t.css({position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:"16px",height:"16px",cursor:r?"not-allowed":"pointer"}),htmlFor:a,children:[e.jsx(t.Input,{_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:c,cursor:r?"not-allowed":"pointer",disabled:r,display:"block",height:"100%",id:a,left:0,m:"0",onChange:r?void 0:n=>x(n.target.checked),opacity:1,pointerEvents:"none",pos:"absolute",styleOrder:1,styleVars:{primary:o?.primary,border:o?.border,inputBg:o?.inputBg},top:0,type:"checkbox",width:"100%",zIndex:0,...h}),c&&e.jsx(t.Box,{as:k.CheckIcon,opacity:"1",pointerEvents:"none",props:{color:r?"light-dark(#D6D7DE, #47474A)":"var(--checkIcon, #FFF)"},styleVars:{checkIcon:o?.checkIcon},zIndex:"1"})]}),e.jsx("label",{className:t.css({cursor:r?"not-allowed":"pointer"}),htmlFor:a,children:typeof i=="string"?e.jsx(t.Text,{color:r?"light-dark(#D6D7DE, #6F6E6E)":"var(--text, light-dark(#2F2F2F, #EDEDED))",fontSize:"14px",styleVars:{text:o?.text},userSelect:"none",children:i}):i})]})}exports.Checkbox=m;
+"use client";"use client";require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`./CheckIcon.cjs`);let t=require(`@devup-ui/react`),n=require(`react/jsx-runtime`),r=require(`react`);function i({children:i,disabled:a,checked:o,defaultChecked:s=!1,colors:c,onChange:l,...u}){let d=(0,r.useId)(),[f,p]=(0,r.useState)(s),m=o??f,h=e=>{p(e),l?.(e)};return(0,n.jsxs)(t.Flex,{alignItems:`center`,gap:`8px`,children:[(0,n.jsxs)(`label`,{className:(0,t.css)({position:`relative`,display:`flex`,alignItems:`center`,justifyContent:`center`,width:`16px`,height:`16px`,cursor:a?`not-allowed`:`pointer`}),htmlFor:d,children:[(0,n.jsx)(t.Input,{_active:!a&&{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:!a&&{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:!a&&{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:m,cursor:a?`not-allowed`:`pointer`,disabled:a,display:`block`,height:`100%`,id:d,left:0,m:`0`,onChange:a?void 0:e=>h(e.target.checked),opacity:1,pointerEvents:`none`,pos:`absolute`,styleOrder:1,styleVars:{primary:c?.primary,border:c?.border,inputBg:c?.inputBg},top:0,type:`checkbox`,width:`100%`,zIndex:0,...u}),m&&(0,n.jsx)(t.Box,{as:e.CheckIcon,opacity:`1`,pointerEvents:`none`,props:{color:a?`light-dark(#D6D7DE, #47474A)`:`var(--checkIcon, #FFF)`},styleVars:{checkIcon:c?.checkIcon},zIndex:`1`})]}),(0,n.jsx)(`label`,{className:(0,t.css)({cursor:a?`not-allowed`:`pointer`}),htmlFor:d,children:typeof i==`string`?(0,n.jsx)(t.Text,{color:a?`light-dark(#D6D7DE, #6F6E6E)`:`var(--text, light-dark(#2F2F2F, #EDEDED))`,fontSize:`14px`,styleVars:{text:c?.text},userSelect:`none`,children:i}):i})]})}exports.Checkbox=i;