@devup-ui/components 0.1.25 → 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.
- package/dist/components/Button/Button.stories.d.ts +1 -0
- package/dist/components/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Button/IconSpinner.cjs +1 -0
- package/dist/components/Button/IconSpinner.d.ts +7 -0
- package/dist/components/Button/IconSpinner.d.ts.map +1 -0
- package/dist/components/Button/IconSpinner.js +85 -0
- package/dist/components/Button/index.cjs +1 -1
- package/dist/components/Button/index.d.ts +3 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +34 -31
- package/package.json +4 -4
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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;
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
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;
|
|
@@ -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
|
|
@@ -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;
|
|
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"}
|
|
@@ -1,21 +1,24 @@
|
|
|
1
|
-
import { jsx as a, jsxs as
|
|
2
|
-
import { Button as
|
|
3
|
-
|
|
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:
|
|
6
|
+
type: m = "button",
|
|
6
7
|
colors: e,
|
|
7
8
|
danger: o = !1,
|
|
8
|
-
children:
|
|
9
|
-
size:
|
|
10
|
-
className:
|
|
9
|
+
children: s,
|
|
10
|
+
size: i = "md",
|
|
11
|
+
className: n,
|
|
11
12
|
icon: l,
|
|
12
|
-
ellipsis:
|
|
13
|
-
typography:
|
|
14
|
-
disabled:
|
|
15
|
-
|
|
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
|
-
|
|
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":
|
|
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:
|
|
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:
|
|
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" }[
|
|
161
|
-
true: { sm: "24px", md: "28px", lg: "32px" }[
|
|
162
|
-
}[(!!l).toString()],
|
|
163
|
-
py: { sm: "8px", md: "10px", lg: "12px" }[
|
|
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:
|
|
175
|
-
typography:
|
|
176
|
-
...
|
|
177
|
-
children: /* @__PURE__ */
|
|
178
|
-
l && /* @__PURE__ */ a(
|
|
179
|
-
|
|
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
|
-
|
|
199
|
+
u,
|
|
197
200
|
{
|
|
198
|
-
className:
|
|
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:
|
|
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
|
-
|
|
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.
|
|
19
|
+
"version": "0.1.27",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"csstype": "^3.1.3",
|
|
39
39
|
"react": "^19.1.1",
|
|
40
40
|
"clsx": "^2.1",
|
|
41
|
-
"@devup-ui/react": "1.0.
|
|
41
|
+
"@devup-ui/react": "1.0.21"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@storybook/addon-docs": "^9.1.10",
|
|
@@ -52,12 +52,12 @@
|
|
|
52
52
|
"vite": "7.1.10",
|
|
53
53
|
"vite-plugin-dts": "^4.5.4",
|
|
54
54
|
"vitest": "^3.2.4",
|
|
55
|
-
"@devup-ui/vite-plugin": "1.0.
|
|
55
|
+
"@devup-ui/vite-plugin": "1.0.45"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"csstype": "*",
|
|
59
59
|
"react": "*",
|
|
60
|
-
"@devup-ui/react": "1.0.
|
|
60
|
+
"@devup-ui/react": "1.0.21"
|
|
61
61
|
},
|
|
62
62
|
"scripts": {
|
|
63
63
|
"lint": "eslint",
|