@devup-ui/components 0.1.26 → 0.1.28

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

@@ -5,5 +5,6 @@ declare const meta: Meta<typeof Button>;
 export declare const Default: Story;
 export declare const WithIcon: Story;
 export declare const WithForm: Story;
+export declare const WithLoading: Story;
 export default meta;
 //# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwDtB,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwDtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Button/IconSpinner.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("@devup-ui/react"),t=n.keyframes({"0%":{transform:"rotateZ(0deg)"},"100%":{transform:"rotateZ(360deg)"}});function e({type:r="whole",...a}){return r==="partial"?i.jsx(n.Box,{animationDuration:"1s",animationIterationCount:"infinite",animationName:t,animationTimingFunction:"linear","aria-label":"Partial loading spinner",as:"svg",props:{fill:"none",height:"20",viewBox:"0 0 20 20",width:"20",xmlns:"http://www.w3.org/2000/svg",...a},children:i.jsx("path",{d:"M17 10C17 11.291 16.643 12.5568 15.9685 13.6575C15.294 14.7582 14.3282 15.651 13.1779 16.237C12.0277 16.8231 10.7378 17.0797 9.45078 16.9784C8.1638 16.8771 6.9299 16.4219 5.8855 15.6631",stroke:"light-dark(var(--primary, #272727), var(--primary, #F6F6F6))",strokeLinecap:"round",strokeWidth:"3"})}):i.jsxs(n.Box,{animationDuration:"1s",animationIterationCount:"infinite",animationName:t,animationTimingFunction:"linear","aria-label":"Whole loading spinner",as:"svg",props:{fill:"none",height:"20",viewBox:"0 0 20 20",width:"20",xmlns:"http://www.w3.org/2000/svg",...a},children:[i.jsx("g",{clipPath:"url(#paint0_angular_1842_200_clip_path)",children:i.jsx("g",{transform:"matrix(0 0.007 -0.007 0 10 10)",children:i.jsx("foreignObject",{height:"2857.14",width:"2857.14",x:"-1428.57",y:"-1428.57",children:i.jsx("div",{style:{background:"conic-gradient(from 90deg, light-dark(var(--primary, #272727), var(--primary, #F6F6F6)) 0deg,rgba(0,0,0,0) 360deg)",height:"100%",width:"100%",opacity:1}})})})}),i.jsx("path",{d:"M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z"}),i.jsx("defs",{children:i.jsx("clipPath",{id:"paint0_angular_1842_200_clip_path",children:i.jsx("path",{d:"M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z"})})})]})}exports.IconSpinner=e;

package/dist/components/Button/IconSpinner.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+interface IconSpinnerProps extends SVGProps<SVGSVGElement> {
+    type?: 'whole' | 'partial';
+}
+export declare function IconSpinner({ type, ...props }: IconSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/Button/IconSpinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAWhC,UAAU,gBAAiB,SAAQ,QAAQ,CAAC,aAAa,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAc,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAyEzE"}

package/dist/components/Button/IconSpinner.js

@@ -0,0 +1,85 @@
+import { jsx as i, jsxs as e } from "react/jsx-runtime";
+import { Box as a, keyframes as o } from "@devup-ui/react";
+const r = o({
+  "0%": {
+    transform: "rotateZ(0deg)"
+  },
+  "100%": {
+    transform: "rotateZ(360deg)"
+  }
+});
+function d({ type: t = "whole", ...n }) {
+  return t === "partial" ? /* @__PURE__ */ i(
+    a,
+    {
+      animationDuration: "1s",
+      animationIterationCount: "infinite",
+      animationName: r,
+      animationTimingFunction: "linear",
+      "aria-label": "Partial loading spinner",
+      as: "svg",
+      props: {
+        fill: "none",
+        height: "20",
+        viewBox: "0 0 20 20",
+        width: "20",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...n
+      },
+      children: /* @__PURE__ */ i(
+        "path",
+        {
+          d: "M17 10C17 11.291 16.643 12.5568 15.9685 13.6575C15.294 14.7582 14.3282 15.651 13.1779 16.237C12.0277 16.8231 10.7378 17.0797 9.45078 16.9784C8.1638 16.8771 6.9299 16.4219 5.8855 15.6631",
+          stroke: "light-dark(var(--primary, #272727), var(--primary, #F6F6F6))",
+          strokeLinecap: "round",
+          strokeWidth: "3"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    a,
+    {
+      animationDuration: "1s",
+      animationIterationCount: "infinite",
+      animationName: r,
+      animationTimingFunction: "linear",
+      "aria-label": "Whole loading spinner",
+      as: "svg",
+      props: {
+        fill: "none",
+        height: "20",
+        viewBox: "0 0 20 20",
+        width: "20",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...n
+      },
+      children: [
+        /* @__PURE__ */ i("g", { clipPath: "url(#paint0_angular_1842_200_clip_path)", children: /* @__PURE__ */ i("g", { transform: "matrix(0 0.007 -0.007 0 10 10)", children: /* @__PURE__ */ i(
+          "foreignObject",
+          {
+            height: "2857.14",
+            width: "2857.14",
+            x: "-1428.57",
+            y: "-1428.57",
+            children: /* @__PURE__ */ i(
+              "div",
+              {
+                style: {
+                  background: "conic-gradient(from 90deg, light-dark(var(--primary, #272727), var(--primary, #F6F6F6)) 0deg,rgba(0,0,0,0) 360deg)",
+                  height: "100%",
+                  width: "100%",
+                  opacity: 1
+                }
+              }
+            )
+          }
+        ) }) }),
+        /* @__PURE__ */ i("path", { d: "M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z" }),
+        /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "paint0_angular_1842_200_clip_path", children: /* @__PURE__ */ i("path", { d: "M17 10H15.5C15.5 13.0376 13.0376 15.5 10 15.5V17V18.5C14.6944 18.5 18.5 14.6944 18.5 10H17ZM10 17V15.5C6.96243 15.5 4.5 13.0376 4.5 10H3H1.5C1.5 14.6944 5.30558 18.5 10 18.5V17ZM3 10H4.5C4.5 6.96243 6.96243 4.5 10 4.5V3V1.5C5.30558 1.5 1.5 5.30558 1.5 10H3ZM10 3V4.5C13.0376 4.5 15.5 6.96243 15.5 10H17H18.5C18.5 5.30558 14.6944 1.5 10 1.5V3Z" }) }) })
+      ]
+    }
+  );
+}
+export {
+  d as IconSpinner
+};

package/dist/components/Button/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("@devup-ui/react");function b({variant:r="default",type:u="button",colors:e,danger:o=!1,children:s,size:i="md",className:m,icon:t,ellipsis:n=!1,typography:x,disabled:p,...d}){return a.jsx(l.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%)"}[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:m,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]}[(!!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:u,typography:x,...d,children:a.jsxs(l.Box,{maxW:"100%",mx:"auto",pos:"relative",w:"fit-content",children:[t&&a.jsx(l.Center,{boxSize:"24px",left:"4px",pos:"absolute",role:"presentation",selectors:{"&>svg":{color:"inherit"}},top:"50%",transform:"translate(-100%, -50%)",children:t}),a.jsx(l.Box,{className:n?l.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}):void 0,lineHeight:"1.2",minH:"1.2em",transform:!!t&&"translateX(8px)",children:s})]})})}exports.Button=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),t=require("@devup-ui/react"),y=require("./IconSpinner.cjs");function f({variant:r="default",type:s="button",colors:e,danger:o=!1,children:n,size:p="md",className:m,icon:a,ellipsis:x=!1,typography:b,disabled:u,loading:i=!1,loadingSpinner:d="whole",...c}){return l.jsx(t.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%)"}[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":u,"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:m,color:{primary:"#FFF",default:{true:"var(--error, #D52B2E)",false:"var(--text, #272727)"}[o.toString()]}[r],cursor:"pointer",disabled:u,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"}[p],true:{sm:"24px",md:"28px",lg:"32px"}[p]}[(!!(a||i)).toString()],py:{sm:"8px",md:"10px",lg:"12px"}[p],styleOrder:1,styleVars:{primary:e?.primary,error:e?.error,text:e?.text,border:e?.border,inputBackground:e?.inputBackground,primaryFocus:e?.primaryFocus},transition:".25s",type:s,typography:b,...c,children:l.jsxs(t.Box,{maxW:"100%",mx:"auto",pos:"relative",w:"fit-content",children:[(a||i)&&l.jsx(t.Center,{boxSize:"24px",left:"4px",pos:"absolute",role:"presentation",selectors:{"&>svg":{color:"inherit"}},top:"50%",transform:"translate(-100%, -50%)",children:i?l.jsx(y.IconSpinner,{type:d}):a}),l.jsx(t.Box,{className:x?t.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}):void 0,lineHeight:"1.2",minH:"1.2em",transform:!!(a||i)&&"translateX(8px)",children:n})]})})}exports.Button=f;

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

@@ -14,7 +14,9 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: 'sm' | 'md' | 'lg';
     icon?: React.ReactNode;
     ellipsis?: boolean;
+    loading?: boolean;
+    loadingSpinner?: 'whole' | 'partial';
 };
-export declare function Button({ variant, type, colors, danger, children, size, className, icon, ellipsis, typography, disabled, ...props }: ButtonProps): React.ReactElement;
+export declare function Button({ variant, type, colors, danger, children, size, className, icon, ellipsis, typography, disabled, loading, loadingSpinner, ...props }: ButtonProps): React.ReactElement;
 export {};
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,iBAAiB,CAAA;AAIxB,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;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACrC,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,OAAe,EACf,cAAwB,EACxB,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA8NlC"}

package/dist/components/Button/index.js

@@ -1,21 +1,24 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import { Button as f, Box as p, Center as y, css as F } from "@devup-ui/react";
-function E({
+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: u = "button",
+  type: m = "button",
   colors: e,
   danger: o = !1,
-  children: m,
-  size: t = "md",
-  className: s,
+  children: s,
+  size: i = "md",
+  className: n,
   icon: l,
-  ellipsis: n = !1,
-  typography: d,
-  disabled: i,
-  ...x
+  ellipsis: x = !1,
+  typography: b,
+  disabled: p,
+  loading: t = !1,
+  loadingSpinner: d = "whole",
+  ...f
 }) {
   return /* @__PURE__ */ a(
-    f,
+    F,
     {
       _active: {
         primary: {
@@ -120,7 +123,7 @@ function E({
           default: "var(--inputBackground, #2E2E2E)"
         }[r]
       },
-      "aria-disabled": i,
+      "aria-disabled": p,
       "aria-label": "button",
       bg: {
         primary: "var(--primary, #8163E1)",
@@ -135,7 +138,7 @@ function E({
         default: "10px"
       }[r],
       boxSizing: "border-box",
-      className: s,
+      className: n,
       color: {
         primary: "#FFF",
         default: {
@@ -144,7 +147,7 @@ function E({
         }[o.toString()]
       }[r],
       cursor: "pointer",
-      disabled: i,
+      disabled: p,
       fontSize: {
         default: ["14px", null, null, null, "15px"],
         primary: ["15px", null, null, null, "16px"]
@@ -157,10 +160,10 @@ function E({
       outlineOffset: "2px",
       pos: "relative",
       px: {
-        false: { sm: "12px", md: "16px", lg: "20px" }[t],
-        true: { sm: "24px", md: "28px", lg: "32px" }[t]
-      }[(!!l).toString()],
-      py: { sm: "8px", md: "10px", lg: "12px" }[t],
+        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,
@@ -171,12 +174,12 @@ function E({
         primaryFocus: e?.primaryFocus
       },
       transition: ".25s",
-      type: u,
-      typography: d,
-      ...x,
-      children: /* @__PURE__ */ b(p, { maxW: "100%", mx: "auto", pos: "relative", w: "fit-content", children: [
-        l && /* @__PURE__ */ a(
-          y,
+      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",
@@ -189,21 +192,21 @@ function E({
             },
             top: "50%",
             transform: "translate(-100%, -50%)",
-            children: l
+            children: t ? /* @__PURE__ */ a(g, { type: d }) : l
           }
         ),
         /* @__PURE__ */ a(
-          p,
+          u,
           {
-            className: n ? F({
+            className: x ? E({
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap"
             }) : void 0,
             lineHeight: "1.2",
             minH: "1.2em",
-            transform: !!l && "translateX(8px)",
-            children: m
+            transform: !!(l || t) && "translateX(8px)",
+            children: s
           }
         )
       ] })
@@ -211,5 +214,5 @@ function E({
   );
 }
 export {
-  E as Button
+  B as Button
 };

package/dist/components/Select/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),k=require("react"),l=require("@devup-ui/react"),D=require("clsx"),y=require("../../contexts/useSelect.cjs"),j=require("../Button/index.cjs"),C=require("./IconCheck.cjs");function A({type:i="default",children:c,defaultValue:g,value:o,onChange:d,defaultOpen:h,open:x,onOpenChange:b,colors:r,typography:u,options:s,...m}){const n=k.useRef(null),[f,a]=k.useState(h??!1),[p,v]=k.useState(g??(i==="checkbox"?[]:""));k.useEffect(()=>{const t=E=>{n.current&&n.current.contains(E.target)||a(!1)};return document.addEventListener("click",t),()=>document.removeEventListener("click",t)},[f,a]);const S=t=>{b?.(t),a(t)},F=t=>{if(d?.(t),i!=="default"){if(i==="radio"){v(t);return}Array.isArray(p)&&p.includes(t)?v(p.filter(E=>E!==t)):v([...p,t])}};return e.jsx(y.SelectContext.Provider,{value:{open:x??f,setOpen:S,value:o??p,setValue:F,type:i,ref:n},children:e.jsx(l.Box,{ref:n,display:"inline-block",h:"fit-content",selectors:{"&, & *":{boxSizing:"border-box"}},styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,inputBackground:r?.inputBackground,base10:r?.base10,title:r?.title,selectDisabled:r?.selectDisabled,primaryBg:r?.primaryBg,inputDisabledBackground:r?.inputDisabledBackground,inputDisabledText:r?.inputDisabledText},typography:u,...m,children:s?e.jsxs(e.Fragment,{children:[e.jsx(w,{children:c}),e.jsx(O,{children:s?.map(t=>k.createElement(B,{...t,key:"option-"+t.value},t.label??t.value))})]}):c})})}function w({className:i,children:c,asChild:g,...o}){const{open:d,setOpen:h}=y.useSelect(),x=()=>{h(!d)};if(g){const b=k.Children.only(c),r=b.type;return e.jsx(r,{"aria-expanded":d,"aria-label":"Select toggle",onClick:x,...b.props})}return e.jsx(j.Button,{"aria-expanded":d,"aria-label":"Select toggle",className:D(l.css({borderRadius:"8px",styleOrder:2}),i),onClick:x,...o,children:c})}function O({children:i,showConfirmButton:c,confirmButtonText:g="완료",x:o=0,y:d=0,...h}){const{open:x,setOpen:b,type:r,ref:u}=y.useSelect();return x?e.jsxs(l.VStack,{ref:s=>{if(!u.current||!s)return;const m=u.current,n=()=>{const{height:f,x:a,y:p,top:v,left:S}=m.getBoundingClientRect(),F=s.offsetHeight+v+window.scrollY+f+d>document.documentElement.scrollHeight,t=s.offsetWidth+S+window.scrollX+o>document.documentElement.scrollWidth;F?s.style.bottom=`${window.innerHeight-p+10}px`:s.style.top=`${p+f+10+d}px`,t?s.style.left=`${Math.max(a-s.offsetWidth+m.offsetWidth,0)+o}px`:s.style.left=`${a+o}px`};return n(),window.addEventListener("scroll",n,!0),window.addEventListener("resize",n),()=>{window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",n)}},"aria-label":"Select container",bg:"var(--inputBg, light-dark(#FFF,#2E2E2E))",border:"1px solid var(--border, light-dark(#E4E4E4,#434343))",borderRadius:"8px",bottom:"-4px",boxShadow:"0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))",boxSize:"fit-content",gap:"6px",minW:"232px",p:"10px",pos:"fixed",styleOrder:1,userSelect:"none",zIndex:1,...h,children:[i,c&&r==="checkbox"&&e.jsx(l.Flex,{justifyContent:"end",w:"100%",children:e.jsx(j.Button,{"aria-label":"Select confirm button",className:l.css({textAlign:"end",bg:"var(--primary, light-dark(#674DC7, #8163E1))",borderRadius:"8px",w:"fit-content",px:"30px",py:"10px",color:"#FFF",typography:"buttonS"}),onClick:()=>b(!1),variant:"primary",children:g})})]}):null}function B({disabled:i,onClick:c,children:g,value:o,showCheck:d=!0,...h}){const{setOpen:x,setValue:b,value:r,type:u}=y.useSelect(),s=()=>{u!=="checkbox"&&x(!1)},m=(a,p)=>{if(c){c(a,p);return}typeof a=="string"&&b(a),s()},n={default:!1,radio:r===o,checkbox:Array.isArray(r)&&o&&r.includes(o)}[u],f=!i&&!(u==="radio"&&n);return e.jsxs(l.Flex,{_hover:f&&{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"},alignItems:"center",borderRadius:"6px",color:i?"var(--selectDisabled, light-dark(#C4C5D1, #45464D))":n?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--title, light-dark(#1A1A1A,#FAFAFA))",cursor:f?"pointer":"default","data-value":o,fontWeight:n?"700":"400",gap:{checkbox:"10px",radio:"6px",default:"0"}[u],h:"40px",onClick:i?void 0:a=>m(o,a),px:"10px",styleOrder:1,transition:"background-color 0.1s ease-in-out",...h,children:[d&&{checkbox:e.jsx(l.Box,{bg:i?"var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))":n?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:n&&e.jsx(C.IconCheck,{className:l.css({color:i?"var(--inputDisabledText, light-dark(#E5E5E5, #373737))":"#FFF",position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)"})})}),radio:e.jsx(e.Fragment,{children:n&&e.jsx(l.Box,{borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:e.jsx(C.IconCheck,{className:l.css({position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)",color:"inherit"})})})}),default:null}[u],g]})}function R({...i}){return e.jsx(l.Box,{bg:"var(--border, light-dark(#E4E4E4,#434343)",h:"1px",styleOrder:1,w:"100%",...i})}exports.Select=A;exports.SelectContainer=O;exports.SelectDivider=R;exports.SelectOption=B;exports.SelectTrigger=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),k=require("react"),l=require("@devup-ui/react"),D=require("clsx"),y=require("../../contexts/useSelect.cjs"),j=require("../Button/index.cjs"),C=require("./IconCheck.cjs");function A({type:i="default",children:c,defaultValue:g,value:o,onChange:d,defaultOpen:h,open:x,onOpenChange:b,colors:r,typography:u,options:s,...m}){const n=k.useRef(null),[f,a]=k.useState(h??!1),[p,v]=k.useState(g??(i==="checkbox"?[]:""));k.useEffect(()=>{const t=E=>{n.current&&n.current.contains(E.target)||a(!1)};return document.addEventListener("click",t),()=>document.removeEventListener("click",t)},[f,a]);const S=t=>{b?.(t),a(t)},F=t=>{if(d?.(t),i!=="default"){if(i==="radio"){v(t);return}Array.isArray(p)&&p.includes(t)?v(p.filter(E=>E!==t)):v([...p,t])}};return e.jsx(y.SelectContext.Provider,{value:{open:x??f,setOpen:S,value:o??p,setValue:F,type:i,ref:n},children:e.jsx(l.Box,{ref:n,display:"inline-block",h:"fit-content",selectors:{"&, & *":{boxSizing:"border-box"}},styleOrder:1,styleVars:{primary:r?.primary,border:r?.border,inputBackground:r?.inputBackground,base10:r?.base10,title:r?.title,selectDisabled:r?.selectDisabled,primaryBg:r?.primaryBg,inputDisabledBackground:r?.inputDisabledBackground,inputDisabledText:r?.inputDisabledText},typography:u,...m,children:s?e.jsxs(e.Fragment,{children:[e.jsx(w,{children:c}),e.jsx(O,{children:s?.map(t=>k.createElement(B,{...t,key:"option-"+t.value},t.label??t.value))})]}):c})})}function w({className:i,children:c,asChild:g,...o}){const{open:d,setOpen:h}=y.useSelect(),x=()=>{h(!d)};if(g){const b=k.Children.only(c),r=b.type;return e.jsx(r,{"aria-expanded":d,"aria-label":"Select toggle",onClick:x,...b.props})}return e.jsx(j.Button,{"aria-expanded":d,"aria-label":"Select toggle",className:D(l.css({borderRadius:"8px",styleOrder:2}),i),onClick:x,...o,children:c})}function O({children:i,showConfirmButton:c,confirmButtonText:g="완료",x:o=0,y:d=0,...h}){const{open:x,setOpen:b,type:r,ref:u}=y.useSelect();return x?e.jsxs(l.VStack,{ref:s=>{if(!u.current||!s)return;const m=u.current,n=()=>{const{height:f,x:a,y:p,top:v,left:S}=m.getBoundingClientRect(),F=s.offsetHeight+v+window.scrollY+f+d>document.documentElement.scrollHeight,t=s.offsetWidth+S+window.scrollX+o>document.documentElement.scrollWidth;F?s.style.bottom=`${window.innerHeight-p+10}px`:s.style.top=`${p+f+10+d}px`,t?s.style.left=`${Math.max(a-s.offsetWidth+m.offsetWidth,0)+o}px`:s.style.left=`${a+o}px`};return n(),window.addEventListener("scroll",n,!0),window.addEventListener("resize",n),()=>{window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",n)}},"aria-label":"Select container",bg:"var(--inputBg, light-dark(#FFF,#2E2E2E))",border:"1px solid var(--border, light-dark(#E4E4E4,#434343))",borderRadius:"8px",bottom:"-4px",boxShadow:"0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))",boxSize:"fit-content",gap:"6px",minW:"232px",p:"10px",pos:"fixed",styleOrder:1,userSelect:"none",zIndex:1,...h,children:[i,c&&r==="checkbox"&&e.jsx(l.Flex,{justifyContent:"end",w:"100%",children:e.jsx(j.Button,{"aria-label":"Select confirm button",className:l.css({textAlign:"end",bg:"var(--primary, light-dark(#674DC7, #8163E1))",borderRadius:"8px",w:"fit-content",px:"30px",py:"10px",color:"#FFF",typography:"buttonS"}),onClick:()=>b(!1),variant:"primary",children:g})})]}):null}function B({disabled:i,onClick:c,children:g,value:o,showCheck:d=!0,...h}){const{setOpen:x,setValue:b,value:r,type:u}=y.useSelect(),s=()=>{u!=="checkbox"&&x(!1)},m=(a,p)=>{if(c){c(a,p);return}typeof a=="string"&&b(a),s()},n={default:!1,radio:r===o,checkbox:Array.isArray(r)&&o&&r.includes(o)}[u],f=!i&&!(u==="radio"&&n);return e.jsxs(l.Flex,{_hover:f&&{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"},alignItems:"center","aria-label":"Select option",borderRadius:"6px",color:i?"var(--selectDisabled, light-dark(#C4C5D1, #45464D))":n?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--title, light-dark(#1A1A1A,#FAFAFA))",cursor:f?"pointer":"default","data-value":o,fontWeight:n?"700":"400",gap:{checkbox:"10px",radio:"6px",default:"0"}[u],h:"40px",onClick:i?void 0:a=>m(o,a),px:"10px",styleOrder:1,transition:"background-color 0.1s ease-in-out",...h,children:[d&&{checkbox:e.jsx(l.Box,{bg:i?"var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))":n?"var(--primary, light-dark(#674DC7, #8163E1)":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:n&&e.jsx(C.IconCheck,{className:l.css({color:i?"var(--inputDisabledText, light-dark(#E5E5E5, #373737))":"#FFF",position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)"})})}),radio:e.jsx(e.Fragment,{children:n&&e.jsx(l.Box,{borderRadius:"4px",boxSize:"18px",pos:"relative",transition:"background-color 0.1s ease-in-out",children:e.jsx(C.IconCheck,{className:l.css({position:"absolute",top:"55%",left:"50%",transform:"translate(-50%, -50%)",color:"inherit"})})})}),default:null}[u],g]})}function R({...i}){return e.jsx(l.Box,{bg:"var(--border, light-dark(#E4E4E4,#434343)",h:"1px",styleOrder:1,w:"100%",...i})}exports.Select=A;exports.SelectContainer=O;exports.SelectDivider=R;exports.SelectOption=B;exports.SelectTrigger=w;

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

@@ -1,4 +1,4 @@
-import { DevupThemeTypography } from '@devup-ui/react';
+import { DevupThemeTypographyKeys } from '@devup-ui/react';
 import { ComponentProps } from 'react';
 import { SelectType, SelectValue } from '../../types/select';
 import { Button } from '../Button';
@@ -22,7 +22,7 @@ interface SelectProps extends Omit<ComponentProps<'div'>, 'onChange'> {
         selectDisabled?: string;
         primaryBg?: string;
     };
-    typography?: keyof DevupThemeTypography;
+    typography?: DevupThemeTypographyKeys;
     options?: {
         label?: string;
         disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/index.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as i, jsxs as C, Fragment as O } from "react/jsx-runtime";
+import { jsx as i, jsxs as S, Fragment as O } from "react/jsx-runtime";
 import { useRef as R, useState as w, useEffect as z, createElement as L, Children as W } from "react";
 import { Box as k, VStack as H, Flex as A, css as v } from "@devup-ui/react";
 import N from "clsx";
-import { SelectContext as T, useSelect as S } from "../../contexts/useSelect.js";
+import { SelectContext as T, useSelect as C } from "../../contexts/useSelect.js";
 import { Button as B } from "../Button/index.js";
 import { IconCheck as D } from "./IconCheck.js";
 function G({
@@ -13,14 +13,14 @@ function G({
   value: o,
   onChange: c,
   defaultOpen: g,
-  open: p,
+  open: u,
   onOpenChange: f,
   colors: t,
   typography: d,
   options: a,
   ...m
 }) {
-  const r = R(null), [b, l] = w(g ?? !1), [u, x] = w(
+  const r = R(null), [b, l] = w(g ?? !1), [p, x] = w(
     h ?? (n === "checkbox" ? [] : "")
   );
   z(() => {
@@ -37,16 +37,16 @@ function G({
         x(e);
         return;
       }
-      Array.isArray(u) && u.includes(e) ? x(u.filter((E) => E !== e)) : x([...u, e]);
+      Array.isArray(p) && p.includes(e) ? x(p.filter((E) => E !== e)) : x([...p, e]);
     }
   };
   return /* @__PURE__ */ i(
     T.Provider,
     {
       value: {
-        open: p ?? b,
+        open: u ?? b,
         setOpen: y,
-        value: o ?? u,
+        value: o ?? p,
         setValue: F,
         type: n,
         ref: r
@@ -76,7 +76,7 @@ function G({
           },
           typography: d,
           ...m,
-          children: a ? /* @__PURE__ */ C(O, { children: [
+          children: a ? /* @__PURE__ */ S(O, { children: [
             /* @__PURE__ */ i($, { children: s }),
             /* @__PURE__ */ i(j, { children: a?.map((e) => /* @__PURE__ */ L(I, { ...e, key: "option-" + e.value }, e.label ?? e.value)) })
           ] }) : s
@@ -91,7 +91,7 @@ function $({
   asChild: h,
   ...o
 }) {
-  const { open: c, setOpen: g } = S(), p = () => {
+  const { open: c, setOpen: g } = C(), u = () => {
     g(!c);
   };
   if (h) {
@@ -101,7 +101,7 @@ function $({
       {
         "aria-expanded": c,
         "aria-label": "Select toggle",
-        onClick: p,
+        onClick: u,
         ...f.props
       }
     );
@@ -118,7 +118,7 @@ function $({
         }),
         n
       ),
-      onClick: p,
+      onClick: u,
       ...o,
       children: s
     }
@@ -132,8 +132,8 @@ function j({
   y: c = 0,
   ...g
 }) {
-  const { open: p, setOpen: f, type: t, ref: d } = S();
-  return p ? /* @__PURE__ */ C(
+  const { open: u, setOpen: f, type: t, ref: d } = C();
+  return u ? /* @__PURE__ */ S(
     H,
     {
       ref: (a) => {
@@ -142,11 +142,11 @@ function j({
           const {
             height: b,
             x: l,
-            y: u,
+            y: p,
             top: x,
             left: y
           } = m.getBoundingClientRect(), F = a.offsetHeight + x + window.scrollY + b + c > document.documentElement.scrollHeight, e = a.offsetWidth + y + window.scrollX + o > document.documentElement.scrollWidth;
-          F ? a.style.bottom = `${window.innerHeight - u + 10}px` : a.style.top = `${u + b + 10 + c}px`, e ? a.style.left = `${Math.max(l - a.offsetWidth + m.offsetWidth, 0) + o}px` : a.style.left = `${l + o}px`;
+          F ? a.style.bottom = `${window.innerHeight - p + 10}px` : a.style.top = `${p + b + 10 + c}px`, e ? a.style.left = `${Math.max(l - a.offsetWidth + m.offsetWidth, 0) + o}px` : a.style.left = `${l + o}px`;
         };
         return r(), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
           window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
@@ -200,11 +200,11 @@ function I({
   showCheck: c = !0,
   ...g
 }) {
-  const { setOpen: p, setValue: f, value: t, type: d } = S(), a = () => {
-    d !== "checkbox" && p(!1);
-  }, m = (l, u) => {
+  const { setOpen: u, setValue: f, value: t, type: d } = C(), a = () => {
+    d !== "checkbox" && u(!1);
+  }, m = (l, p) => {
     if (s) {
-      s(l, u);
+      s(l, p);
       return;
     }
     typeof l == "string" && f(l), a();
@@ -213,13 +213,14 @@ function I({
     radio: t === o,
     checkbox: Array.isArray(t) && o && t.includes(o)
   }[d], b = !n && !(d === "radio" && r);
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ S(
     A,
     {
       _hover: b && {
         bg: "var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"
       },
       alignItems: "center",
+      "aria-label": "Select option",
       borderRadius: "6px",
       color: n ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
       cursor: b ? "pointer" : "default",

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.26",
+  "version": "0.1.28",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -35,29 +35,29 @@
   ],
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "csstype": "^3.1.3",
-    "react": "^19.1.1",
+    "csstype": "^3.1",
+    "react": "^19.2",
     "clsx": "^2.1",
-    "@devup-ui/react": "1.0.21"
+    "@devup-ui/react": "1.0.22"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
-    "@types/react": "^19.1.16",
-    "eslint-plugin-storybook": "^9.1.10",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.10",
-    "typescript": "^5.9.3",
-    "vite": "7.1.10",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.45"
+    "@storybook/addon-docs": "^9.1",
+    "@storybook/addon-onboarding": "^9.1",
+    "@storybook/react-vite": "^9.1",
+    "@types/react": "^19.2.2",
+    "eslint-plugin-storybook": "^9.1",
+    "rollup-plugin-preserve-directives": "^0.4",
+    "storybook": "^9.1",
+    "typescript": "^5.9",
+    "vite": "^7.1",
+    "vite-plugin-dts": "^4.5",
+    "vitest": "^4.0",
+    "@devup-ui/vite-plugin": "1.0.46"
   },
   "peerDependencies": {
     "csstype": "*",
     "react": "*",
-    "@devup-ui/react": "1.0.21"
+    "@devup-ui/react": "1.0.22"
   },
   "scripts": {
     "lint": "eslint",