@devup-ui/components 0.1.26 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/Button/Button.stories.d.ts +1 -0
  2. package/dist/components/Button/Button.stories.d.ts.map +1 -1
  3. package/dist/components/Button/IconSpinner.cjs +1 -0
  4. package/dist/components/Button/IconSpinner.d.ts +7 -0
  5. package/dist/components/Button/IconSpinner.d.ts.map +1 -0
  6. package/dist/components/Button/IconSpinner.js +85 -0
  7. package/dist/components/Button/index.cjs +1 -1
  8. package/dist/components/Button/index.d.ts +3 -1
  9. package/dist/components/Button/index.d.ts.map +1 -1
  10. package/dist/components/Button/index.js +34 -31
  11. package/package.json +1 -1
package/dist/components/Button/Button.stories.d.ts CHANGED
@@ -5,5 +5,6 @@ declare const meta: Meta<typeof Button>;
5
5
  export declare const Default: Story;
6
6
  export declare const WithIcon: Story;
7
7
  export declare const WithForm: Story;
8
+ export declare const WithLoading: Story;
8
9
  export default meta;
9
10
  //# sourceMappingURL=Button.stories.d.ts.map
package/dist/components/Button/Button.stories.d.ts.map CHANGED
@@ -1 +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"}
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,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAA;AAED,eAAe,IAAI,CAAA"}
package/dist/components/Button/IconSpinner.cjs ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,7 @@
1
+ import { SVGProps } from 'react';
2
+ interface IconSpinnerProps extends SVGProps<SVGSVGElement> {
3
+ type?: 'whole' | 'partial';
4
+ }
5
+ export declare function IconSpinner({ type, ...props }: IconSpinnerProps): import("react/jsx-runtime").JSX.Element;
6
+ export {};
7
+ //# sourceMappingURL=IconSpinner.d.ts.map
package/dist/components/Button/IconSpinner.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,85 @@
1
+ import { jsx as i, jsxs as e } from "react/jsx-runtime";
2
+ import { Box as a, keyframes as o } from "@devup-ui/react";
3
+ const r = o({
4
+ "0%": {
5
+ transform: "rotateZ(0deg)"
6
+ },
7
+ "100%": {
8
+ transform: "rotateZ(360deg)"
9
+ }
10
+ });
11
+ function d({ type: t = "whole", ...n }) {
12
+ return t === "partial" ? /* @__PURE__ */ i(
13
+ a,
14
+ {
15
+ animationDuration: "1s",
16
+ animationIterationCount: "infinite",
17
+ animationName: r,
18
+ animationTimingFunction: "linear",
19
+ "aria-label": "Partial loading spinner",
20
+ as: "svg",
21
+ props: {
22
+ fill: "none",
23
+ height: "20",
24
+ viewBox: "0 0 20 20",
25
+ width: "20",
26
+ xmlns: "http://www.w3.org/2000/svg",
27
+ ...n
28
+ },
29
+ children: /* @__PURE__ */ i(
30
+ "path",
31
+ {
32
+ 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",
33
+ stroke: "light-dark(var(--primary, #272727), var(--primary, #F6F6F6))",
34
+ strokeLinecap: "round",
35
+ strokeWidth: "3"
36
+ }
37
+ )
38
+ }
39
+ ) : /* @__PURE__ */ e(
40
+ a,
41
+ {
42
+ animationDuration: "1s",
43
+ animationIterationCount: "infinite",
44
+ animationName: r,
45
+ animationTimingFunction: "linear",
46
+ "aria-label": "Whole loading spinner",
47
+ as: "svg",
48
+ props: {
49
+ fill: "none",
50
+ height: "20",
51
+ viewBox: "0 0 20 20",
52
+ width: "20",
53
+ xmlns: "http://www.w3.org/2000/svg",
54
+ ...n
55
+ },
56
+ children: [
57
+ /* @__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(
58
+ "foreignObject",
59
+ {
60
+ height: "2857.14",
61
+ width: "2857.14",
62
+ x: "-1428.57",
63
+ y: "-1428.57",
64
+ children: /* @__PURE__ */ i(
65
+ "div",
66
+ {
67
+ style: {
68
+ background: "conic-gradient(from 90deg, light-dark(var(--primary, #272727), var(--primary, #F6F6F6)) 0deg,rgba(0,0,0,0) 360deg)",
69
+ height: "100%",
70
+ width: "100%",
71
+ opacity: 1
72
+ }
73
+ }
74
+ )
75
+ }
76
+ ) }) }),
77
+ /* @__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" }),
78
+ /* @__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" }) }) })
79
+ ]
80
+ }
81
+ );
82
+ }
83
+ export {
84
+ d as IconSpinner
85
+ };
package/dist/components/Button/index.cjs CHANGED
@@ -1 +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;
1
+ "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 CHANGED
@@ -14,7 +14,9 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
14
14
  size?: 'sm' | 'md' | 'lg';
15
15
  icon?: React.ReactNode;
16
16
  ellipsis?: boolean;
17
+ loading?: boolean;
18
+ loadingSpinner?: 'whole' | 'partial';
17
19
  };
18
- export declare function Button({ variant, type, colors, danger, children, size, className, icon, ellipsis, typography, disabled, ...props }: ButtonProps): React.ReactElement;
20
+ export declare function Button({ variant, type, colors, danger, children, size, className, icon, ellipsis, typography, disabled, loading, loadingSpinner, ...props }: ButtonProps): React.ReactElement;
19
21
  export {};
20
22
  //# sourceMappingURL=index.d.ts.map
package/dist/components/Button/index.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -1,21 +1,24 @@
1
- import { jsx as a, jsxs as b } from "react/jsx-runtime";
2
- import { Button as f, Box as p, Center as y, css as F } from "@devup-ui/react";
3
- function E({
1
+ import { jsx as a, jsxs as y } from "react/jsx-runtime";
2
+ import { Button as F, Box as u, Center as c, css as E } from "@devup-ui/react";
3
+ import { IconSpinner as g } from "./IconSpinner.js";
4
+ function B({
4
5
  variant: r = "default",
5
- type: u = "button",
6
+ type: m = "button",
6
7
  colors: e,
7
8
  danger: o = !1,
8
- children: m,
9
- size: t = "md",
10
- className: s,
9
+ children: s,
10
+ size: i = "md",
11
+ className: n,
11
12
  icon: l,
12
- ellipsis: n = !1,
13
- typography: d,
14
- disabled: i,
15
- ...x
13
+ ellipsis: x = !1,
14
+ typography: b,
15
+ disabled: p,
16
+ loading: t = !1,
17
+ loadingSpinner: d = "whole",
18
+ ...f
16
19
  }) {
17
20
  return /* @__PURE__ */ a(
18
- f,
21
+ F,
19
22
  {
20
23
  _active: {
21
24
  primary: {
@@ -120,7 +123,7 @@ function E({
120
123
  default: "var(--inputBackground, #2E2E2E)"
121
124
  }[r]
122
125
  },
123
- "aria-disabled": i,
126
+ "aria-disabled": p,
124
127
  "aria-label": "button",
125
128
  bg: {
126
129
  primary: "var(--primary, #8163E1)",
@@ -135,7 +138,7 @@ function E({
135
138
  default: "10px"
136
139
  }[r],
137
140
  boxSizing: "border-box",
138
- className: s,
141
+ className: n,
139
142
  color: {
140
143
  primary: "#FFF",
141
144
  default: {
@@ -144,7 +147,7 @@ function E({
144
147
  }[o.toString()]
145
148
  }[r],
146
149
  cursor: "pointer",
147
- disabled: i,
150
+ disabled: p,
148
151
  fontSize: {
149
152
  default: ["14px", null, null, null, "15px"],
150
153
  primary: ["15px", null, null, null, "16px"]
@@ -157,10 +160,10 @@ function E({
157
160
  outlineOffset: "2px",
158
161
  pos: "relative",
159
162
  px: {
160
- false: { sm: "12px", md: "16px", lg: "20px" }[t],
161
- true: { sm: "24px", md: "28px", lg: "32px" }[t]
162
- }[(!!l).toString()],
163
- py: { sm: "8px", md: "10px", lg: "12px" }[t],
163
+ false: { sm: "12px", md: "16px", lg: "20px" }[i],
164
+ true: { sm: "24px", md: "28px", lg: "32px" }[i]
165
+ }[(!!(l || t)).toString()],
166
+ py: { sm: "8px", md: "10px", lg: "12px" }[i],
164
167
  styleOrder: 1,
165
168
  styleVars: {
166
169
  primary: e?.primary,
@@ -171,12 +174,12 @@ function E({
171
174
  primaryFocus: e?.primaryFocus
172
175
  },
173
176
  transition: ".25s",
174
- type: u,
175
- typography: d,
176
- ...x,
177
- children: /* @__PURE__ */ b(p, { maxW: "100%", mx: "auto", pos: "relative", w: "fit-content", children: [
178
- l && /* @__PURE__ */ a(
179
- y,
177
+ type: m,
178
+ typography: b,
179
+ ...f,
180
+ children: /* @__PURE__ */ y(u, { maxW: "100%", mx: "auto", pos: "relative", w: "fit-content", children: [
181
+ (l || t) && /* @__PURE__ */ a(
182
+ c,
180
183
  {
181
184
  boxSize: "24px",
182
185
  left: "4px",
@@ -189,21 +192,21 @@ function E({
189
192
  },
190
193
  top: "50%",
191
194
  transform: "translate(-100%, -50%)",
192
- children: l
195
+ children: t ? /* @__PURE__ */ a(g, { type: d }) : l
193
196
  }
194
197
  ),
195
198
  /* @__PURE__ */ a(
196
- p,
199
+ u,
197
200
  {
198
- className: n ? F({
201
+ className: x ? E({
199
202
  overflow: "hidden",
200
203
  textOverflow: "ellipsis",
201
204
  whiteSpace: "nowrap"
202
205
  }) : void 0,
203
206
  lineHeight: "1.2",
204
207
  minH: "1.2em",
205
- transform: !!l && "translateX(8px)",
206
- children: m
208
+ transform: !!(l || t) && "translateX(8px)",
209
+ children: s
207
210
  }
208
211
  )
209
212
  ] })
@@ -211,5 +214,5 @@ function E({
211
214
  );
212
215
  }
213
216
  export {
214
- E as Button
217
+ B as Button
215
218
  };
package/package.json CHANGED
@@ -16,7 +16,7 @@
16
16
  "css-in-js-framework",
17
17
  "react"
18
18
  ],
19
- "version": "0.1.26",
19
+ "version": "0.1.27",
20
20
  "type": "module",
21
21
  "publishConfig": {
22
22
  "access": "public"