@devup-ui/components 0.1.20 → 0.1.22

package/README.md

@@ -42,6 +42,12 @@ npm install @devup-ui/next-plugin
 
 # on vite
 npm install @devup-ui/vite-plugin
+
+# on rsbuild
+npm install @devup-ui/rsbuild-plugin
+
+# on webpack
+npm install @devup-ui/webpack-plugin
 ```
 
 ## Features
@@ -68,13 +74,19 @@ npm install @devup-ui/vite-plugin
 
 ## Comparison Benchmarks
 
-Next.js Build Time and Build Size (AMD Ryzen 9 9950X, 128GB RAM, Windows 11)
-
-| Library   | Build Time | Build Size   |
-|-----------|------------|--------------|
-| kuma-ui   | 20.933s    | 57,295,073b  |
-| chakra-ui | 36.961s    | 129,527,610b |
-| devup-ui  | 15.162s    | 48,047,678b  |
+Next.js Build Time and Build Size (github action - ubuntu-latest)
+
+| Library                  | Version  | Build Time | Build Size        |
+|--------------------------|----------|------------|-------------------|
+| tailwindcss              | 4.1.13   | 20.22s     | 57,415,796 bytes  |
+| styleX                   | 0.15.4   | 38.97s     | 76,257,820 bytes  |
+| vanilla-extract          | 1.17.4   | 20.09s     | 59,366,237 bytes  |
+| kuma-ui                  | 1.5.9    | 21.61s     | 67,422,085 bytes  |
+| panda-css                | 1.3.1    | 22.01s     | 62,431,065 bytes  |
+| chakra-ui                | 3.27.0   | 29.99s     | 210,122,493 bytes |
+| mui                      | 7.3.2    | 22.21s     | 94,231,958 bytes  |
+| devup-ui(per-file css)   | 1.0.18   | 18.23s     | 57,440,953 bytes  |
+| devup-ui(single css)     | 1.0.18   | 18.35s     | 57,409,008 bytes  |
 
 ## How it works
 

package/dist/components/Button/index.cjs

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

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,iBAAiB,CAAA;AAGxB,KAAK,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAQD,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAe,EACf,MAAM,EACN,MAAc,EACd,QAAQ,EACR,IAAW,EACX,SAAS,EACT,IAAI,EACJ,QAAgB,EAChB,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAsNlC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,iBAAiB,CAAA;AAExB,KAAK,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAe,EACf,MAAM,EACN,MAAc,EACd,QAAQ,EACR,IAAW,EACX,SAAS,EACT,IAAI,EACJ,QAAgB,EAChB,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA8NlC"}

package/dist/components/Button/index.js

@@ -1,12 +1,6 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { css as f, Button as y, Box as p, Center as F } from "@devup-ui/react";
-import { clsx as E } from "clsx";
-const g = f({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-});
-function B({
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { Button as s, Box as p, Center as y, css as F } from "@devup-ui/react";
+function v({
   variant: e = "default",
   type: u = "button",
   colors: r,
@@ -15,13 +9,13 @@ function B({
   size: i = "md",
   className: n,
   icon: a,
-  ellipsis: x = !1,
-  typography: b,
+  ellipsis: d = !1,
+  typography: x,
   disabled: l,
-  ...d
+  ...b
 }) {
   return /* @__PURE__ */ o(
-    y,
+    s,
     {
       _active: {
         primary: {
@@ -178,11 +172,11 @@ function B({
       },
       transition: ".25s",
       type: u,
-      typography: b,
-      ...d,
-      children: /* @__PURE__ */ s(p, { maxW: "100%", mx: "auto", pos: "relative", w: "fit-content", children: [
+      typography: x,
+      ...b,
+      children: /* @__PURE__ */ f(p, { maxW: "100%", mx: "auto", pos: "relative", w: "fit-content", children: [
         a && /* @__PURE__ */ o(
-          F,
+          y,
           {
             boxSize: "24px",
             left: "4px",
@@ -201,7 +195,11 @@ function B({
         /* @__PURE__ */ o(
           p,
           {
-            className: E(x && g),
+            className: d ? F({
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }) : void 0,
             lineHeight: "1.2",
             minH: "1.2em",
             transform: !!a && "translateX(8px)",
@@ -213,5 +211,5 @@ function B({
   );
 }
 export {
-  B as Button
+  v as Button
 };

package/dist/components/Checkbox/CheckIcon.cjs

@@ -0,0 +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;

package/dist/components/Checkbox/CheckIcon.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+type CheckIconProps = SVGProps<SVGSVGElement> & {
+    color?: string;
+};
+export declare function CheckIcon({ color, ...props }: CheckIconProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckIcon.d.ts.map

package/dist/components/Checkbox/CheckIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,KAAK,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAiB5D"}

package/dist/components/Checkbox/CheckIcon.js

@@ -0,0 +1,25 @@
+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"
+        }
+      )
+    }
+  );
+}
+export {
+  t as CheckIcon
+};

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Checkbox } from './index';
+type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Checkbox>;
+export declare const Default: Story;
+export default meta;
+//# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/components/Checkbox/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAwB/B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Checkbox/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("@devup-ui/react"),m=require("react"),c=require("./CheckIcon.cjs");function h({children:i,disabled:e,checked:n,colors:r,onChange:p,...x}){const g=m.useId();return a.jsxs(t.Flex,{alignItems:"center",gap:"8px",children:[a.jsxs(t.Box,{h:"18px",pos:"relative",w:"fit-content",children:[a.jsx(t.Input,{_active:!e&&{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:"light-dark(var(--primary, #6159D4), var(--primary, #6670F9))",border:"none",_hover:!e&&{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:!e&&{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 light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"},accentColor:"light-dark(var(--primary, #6159D4), var(--primary, #6670F9))",appearance:"none",bg:"light-dark(#FFF, var(--inputBg, #2E2E2E))",border:"1px solid light-dark(var(--border, #E0E0E0), var(--border, #333333))",borderRadius:"2px",boxSize:"16px",checked:n,cursor:e?"not-allowed":"pointer",disabled:e,id:g,m:"0",onChange:e||!p?void 0:F=>p(F.target.checked),styleOrder:1,styleVars:{primary:r==null?void 0:r.primary,border:r==null?void 0:r.border,text:r==null?void 0:r.text,inputBg:r==null?void 0:r.inputBg,checkIcon:r==null?void 0:r.checkIcon},type:"checkbox",...x}),n&&a.jsx(t.Box,{as:c.CheckIcon,props:{color:e?"light-dark(#D6D7DE, #373737)":"var(--checkIcon, #FFF)",className:t.css({left:"50%",pointerEvents:"none",pos:"absolute",top:"60%",transform:"translate(-50%, -50%)"})}})]}),a.jsx("label",{className:t.css({cursor:e?"not-allowed":"pointer"}),htmlFor:g,children:typeof i=="string"?a.jsx(t.Text,{color:e?"light-dark(#D6D7DE, #373737)":"light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))",fontSize:"14px",userSelect:"none",children:i}):i})]})}exports.Checkbox=h;

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

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'onChange'> {
+    children: React.ReactNode;
+    onChange?: (checked: boolean) => void;
+    colors?: {
+        primary?: string;
+        border?: string;
+        text?: string;
+        inputBg?: string;
+        checkIcon?: string;
+    };
+}
+export declare function Checkbox({ children, disabled, checked, colors, onChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAS,MAAM,OAAO,CAAA;AAI7C,UAAU,aACR,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAqGf"}

package/dist/components/Checkbox/index.js

@@ -0,0 +1,102 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { Flex as o, Box as m, Input as v, css as F, Text as d } from "@devup-ui/react";
+import { useId as b } from "react";
+import { CheckIcon as k } from "./CheckIcon.js";
+function u({
+  children: e,
+  disabled: t,
+  checked: i,
+  colors: r,
+  onChange: n,
+  ...x
+}) {
+  const p = b();
+  return /* @__PURE__ */ g(o, { alignItems: "center", gap: "8px", children: [
+    /* @__PURE__ */ g(m, { h: "18px", pos: "relative", w: "fit-content", children: [
+      /* @__PURE__ */ a(
+        v,
+        {
+          _active: !t && {
+            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: "light-dark(var(--primary, #6159D4), var(--primary, #6670F9))",
+            border: "none",
+            _hover: !t && {
+              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: !t && {
+            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 light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"
+          },
+          accentColor: "light-dark(var(--primary, #6159D4), var(--primary, #6670F9))",
+          appearance: "none",
+          bg: "light-dark(#FFF, var(--inputBg, #2E2E2E))",
+          border: "1px solid light-dark(var(--border, #E0E0E0), var(--border, #333333))",
+          borderRadius: "2px",
+          boxSize: "16px",
+          checked: i,
+          cursor: t ? "not-allowed" : "pointer",
+          disabled: t,
+          id: p,
+          m: "0",
+          onChange: t || !n ? void 0 : (h) => n(h.target.checked),
+          styleOrder: 1,
+          styleVars: {
+            primary: r == null ? void 0 : r.primary,
+            border: r == null ? void 0 : r.border,
+            text: r == null ? void 0 : r.text,
+            inputBg: r == null ? void 0 : r.inputBg,
+            checkIcon: r == null ? void 0 : r.checkIcon
+          },
+          type: "checkbox",
+          ...x
+        }
+      ),
+      i && /* @__PURE__ */ a(
+        m,
+        {
+          as: k,
+          props: {
+            color: t ? "light-dark(#D6D7DE, #373737)" : "var(--checkIcon, #FFF)",
+            className: F({
+              left: "50%",
+              pointerEvents: "none",
+              pos: "absolute",
+              top: "60%",
+              transform: "translate(-50%, -50%)"
+            })
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(
+      "label",
+      {
+        className: F({
+          cursor: t ? "not-allowed" : "pointer"
+        }),
+        htmlFor: p,
+        children: typeof e == "string" ? /* @__PURE__ */ a(
+          d,
+          {
+            color: t ? "light-dark(#D6D7DE, #373737)" : "light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))",
+            fontSize: "14px",
+            userSelect: "none",
+            children: e
+          }
+        ) : e
+      }
+    )
+  ] });
+}
+export {
+  u as Checkbox
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),i=require("./components/Input/index.cjs"),o=require("./components/Radio/index.cjs"),p=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),c=require("./components/Toggle/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Input=i.Input;exports.Radio=o.Radio;exports.RadioGroup=p.RadioGroup;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.Toggle=c.Toggle;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),o=require("./components/Checkbox/index.cjs"),i=require("./components/Input/index.cjs"),p=require("./components/Radio/index.cjs"),c=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),u=require("./components/Toggle/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Checkbox=o.Checkbox;exports.Input=i.Input;exports.Radio=p.Radio;exports.RadioGroup=c.RadioGroup;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.Toggle=u.Toggle;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { Button } from './components/Button';
+export { Checkbox } from './components/Checkbox';
 export { Input } from './components/Input';
 export { Radio } from './components/Radio';
 export { RadioGroup } from './components/RadioGroup';

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;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,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,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,28 +1,30 @@
 import { Button as r } from "./components/Button/index.js";
-import { Input as p } from "./components/Input/index.js";
-import { Radio as n } from "./components/Radio/index.js";
-import { RadioGroup as x } from "./components/RadioGroup/index.js";
-import { Select as i, SelectContainer as l, SelectDivider as m, SelectOption as u, SelectTrigger as a } from "./components/Select/index.js";
-import { Stepper as s, StepperContainer as d, StepperDecreaseButton as B, StepperIncreaseButton as C, StepperInput as I, useStepper as D } from "./components/Stepper/index.js";
-import { Toggle as T } from "./components/Toggle/index.js";
-import { SelectContext as G, useSelect as O } from "./contexts/useSelect.js";
+import { Checkbox as p } from "./components/Checkbox/index.js";
+import { Input as n } from "./components/Input/index.js";
+import { Radio as c } from "./components/Radio/index.js";
+import { RadioGroup as m } from "./components/RadioGroup/index.js";
+import { Select as l, SelectContainer as u, SelectDivider as a, SelectOption as g, SelectTrigger as s } from "./components/Select/index.js";
+import { Stepper as d, StepperContainer as B, StepperDecreaseButton as I, StepperIncreaseButton as D, StepperInput as R, useStepper as T } from "./components/Stepper/index.js";
+import { Toggle as h } from "./components/Toggle/index.js";
+import { SelectContext as v, useSelect as G } from "./contexts/useSelect.js";
 export {
   r as Button,
-  p as Input,
-  n as Radio,
-  x as RadioGroup,
-  i as Select,
-  l as SelectContainer,
-  G as SelectContext,
-  m as SelectDivider,
-  u as SelectOption,
-  a as SelectTrigger,
-  s as Stepper,
-  d as StepperContainer,
-  B as StepperDecreaseButton,
-  C as StepperIncreaseButton,
-  I as StepperInput,
-  T as Toggle,
-  O as useSelect,
-  D as useStepper
+  p as Checkbox,
+  n as Input,
+  c as Radio,
+  m as RadioGroup,
+  l as Select,
+  u as SelectContainer,
+  v as SelectContext,
+  a as SelectDivider,
+  g as SelectOption,
+  s as SelectTrigger,
+  d as Stepper,
+  B as StepperContainer,
+  I as StepperDecreaseButton,
+  D as StepperIncreaseButton,
+  R as StepperInput,
+  h as Toggle,
+  G as useSelect,
+  T as useStepper
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.20",
+  "version": "0.1.22",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -38,26 +38,26 @@
     "csstype": "^3.1.3",
     "react": "^19.1.1",
     "clsx": "^2.1",
-    "@devup-ui/react": "1.0.18"
+    "@devup-ui/react": "1.0.19"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-onboarding": "^9.1.5",
-    "@storybook/react-vite": "^9.1.5",
-    "@types/react": "^19.1.12",
-    "eslint-plugin-storybook": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.7",
+    "@storybook/addon-onboarding": "^9.1.7",
+    "@storybook/react-vite": "^9.1.7",
+    "@types/react": "^19.1.13",
+    "eslint-plugin-storybook": "^9.1.7",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.5",
+    "storybook": "^9.1.7",
     "typescript": "^5.9.2",
-    "vite": "^7.1.5",
+    "vite": "^7.1.6",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.40"
+    "@devup-ui/vite-plugin": "1.0.41"
   },
   "peerDependencies": {
     "csstype": "*",
     "react": "*",
-    "@devup-ui/react": "1.0.18"
+    "@devup-ui/react": "1.0.19"
   },
   "scripts": {
     "lint": "eslint",