globalfy-design-system 1.4.0 → 1.5.0
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/atoms/Button/Button.d.ts +3 -2
- package/dist/components/atoms/Button/Button.stories.d.ts +0 -1
- package/dist/components/atoms/Button/SpinnerIcon.d.ts +111 -0
- package/dist/globalfy-design-system.js +163 -68
- package/dist/globalfy-design-system.umd.cjs +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { ButtonProps as NextUIButtonProps } from '@nextui-org/react';
|
|
2
|
+
|
|
2
3
|
export type ButtonVariant = "primaryDark" | "primaryLight" | "primary" | "negative" | "secondaryNegative" | "secondary" | "tertiary" | "tertiaryDark" | "tertiaryLight" | "direction" | "directionCircle" | "icon";
|
|
3
|
-
export type ButtonProps = {
|
|
4
|
+
export type ButtonProps = Omit<NextUIButtonProps, "variant" | "size"> & {
|
|
4
5
|
children: React.ReactNode;
|
|
5
6
|
iconLeft?: React.ReactNode;
|
|
6
7
|
iconRight?: React.ReactNode;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { VariantProps } from 'tailwind-variants';
|
|
2
|
+
|
|
3
|
+
declare const iconLoadingVariants: import('tailwind-variants').TVReturnType<{
|
|
4
|
+
variant: {
|
|
5
|
+
primaryDark: string;
|
|
6
|
+
primaryLight: string;
|
|
7
|
+
primary: string;
|
|
8
|
+
negative: string;
|
|
9
|
+
secondaryNegative: string;
|
|
10
|
+
secondary: string;
|
|
11
|
+
tertiary: string;
|
|
12
|
+
tertiaryDark: string;
|
|
13
|
+
tertiaryLight: string;
|
|
14
|
+
direction: string;
|
|
15
|
+
directionCircle: string;
|
|
16
|
+
icon: string;
|
|
17
|
+
};
|
|
18
|
+
}, undefined, "h-5 w-5 animate-spin", import('tailwind-variants/dist/config.js').TVConfig<{
|
|
19
|
+
variant: {
|
|
20
|
+
primaryDark: string;
|
|
21
|
+
primaryLight: string;
|
|
22
|
+
primary: string;
|
|
23
|
+
negative: string;
|
|
24
|
+
secondaryNegative: string;
|
|
25
|
+
secondary: string;
|
|
26
|
+
tertiary: string;
|
|
27
|
+
tertiaryDark: string;
|
|
28
|
+
tertiaryLight: string;
|
|
29
|
+
direction: string;
|
|
30
|
+
directionCircle: string;
|
|
31
|
+
icon: string;
|
|
32
|
+
};
|
|
33
|
+
}, {
|
|
34
|
+
variant: {
|
|
35
|
+
primaryDark: string;
|
|
36
|
+
primaryLight: string;
|
|
37
|
+
primary: string;
|
|
38
|
+
negative: string;
|
|
39
|
+
secondaryNegative: string;
|
|
40
|
+
secondary: string;
|
|
41
|
+
tertiary: string;
|
|
42
|
+
tertiaryDark: string;
|
|
43
|
+
tertiaryLight: string;
|
|
44
|
+
direction: string;
|
|
45
|
+
directionCircle: string;
|
|
46
|
+
icon: string;
|
|
47
|
+
};
|
|
48
|
+
}>, {
|
|
49
|
+
variant: {
|
|
50
|
+
primaryDark: string;
|
|
51
|
+
primaryLight: string;
|
|
52
|
+
primary: string;
|
|
53
|
+
negative: string;
|
|
54
|
+
secondaryNegative: string;
|
|
55
|
+
secondary: string;
|
|
56
|
+
tertiary: string;
|
|
57
|
+
tertiaryDark: string;
|
|
58
|
+
tertiaryLight: string;
|
|
59
|
+
direction: string;
|
|
60
|
+
directionCircle: string;
|
|
61
|
+
icon: string;
|
|
62
|
+
};
|
|
63
|
+
}, undefined, import('tailwind-variants').TVReturnType<{
|
|
64
|
+
variant: {
|
|
65
|
+
primaryDark: string;
|
|
66
|
+
primaryLight: string;
|
|
67
|
+
primary: string;
|
|
68
|
+
negative: string;
|
|
69
|
+
secondaryNegative: string;
|
|
70
|
+
secondary: string;
|
|
71
|
+
tertiary: string;
|
|
72
|
+
tertiaryDark: string;
|
|
73
|
+
tertiaryLight: string;
|
|
74
|
+
direction: string;
|
|
75
|
+
directionCircle: string;
|
|
76
|
+
icon: string;
|
|
77
|
+
};
|
|
78
|
+
}, undefined, "h-5 w-5 animate-spin", import('tailwind-variants/dist/config.js').TVConfig<{
|
|
79
|
+
variant: {
|
|
80
|
+
primaryDark: string;
|
|
81
|
+
primaryLight: string;
|
|
82
|
+
primary: string;
|
|
83
|
+
negative: string;
|
|
84
|
+
secondaryNegative: string;
|
|
85
|
+
secondary: string;
|
|
86
|
+
tertiary: string;
|
|
87
|
+
tertiaryDark: string;
|
|
88
|
+
tertiaryLight: string;
|
|
89
|
+
direction: string;
|
|
90
|
+
directionCircle: string;
|
|
91
|
+
icon: string;
|
|
92
|
+
};
|
|
93
|
+
}, {
|
|
94
|
+
variant: {
|
|
95
|
+
primaryDark: string;
|
|
96
|
+
primaryLight: string;
|
|
97
|
+
primary: string;
|
|
98
|
+
negative: string;
|
|
99
|
+
secondaryNegative: string;
|
|
100
|
+
secondary: string;
|
|
101
|
+
tertiary: string;
|
|
102
|
+
tertiaryDark: string;
|
|
103
|
+
tertiaryLight: string;
|
|
104
|
+
direction: string;
|
|
105
|
+
directionCircle: string;
|
|
106
|
+
icon: string;
|
|
107
|
+
};
|
|
108
|
+
}>, unknown, unknown, undefined>>;
|
|
109
|
+
type SpinIconProps = React.SVGProps<SVGSVGElement> & VariantProps<typeof iconLoadingVariants>;
|
|
110
|
+
export declare const SpinnerIcon: (props: SpinIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
111
|
+
export {};
|
|
@@ -43559,7 +43559,67 @@ const qm0 = ({
|
|
|
43559
43559
|
] }, d.id))
|
|
43560
43560
|
}
|
|
43561
43561
|
), BF = w0({
|
|
43562
|
-
base: "
|
|
43562
|
+
base: "h-5 w-5 animate-spin",
|
|
43563
|
+
variants: {
|
|
43564
|
+
variant: {
|
|
43565
|
+
primaryDark: "text-primary-green-500",
|
|
43566
|
+
primaryLight: "text-secondary-green-500",
|
|
43567
|
+
primary: "text-white",
|
|
43568
|
+
negative: "text-white",
|
|
43569
|
+
secondaryNegative: "text-complementary-red-700",
|
|
43570
|
+
secondary: "text-secondary-green-500",
|
|
43571
|
+
tertiary: "text-primary-green-500",
|
|
43572
|
+
tertiaryDark: "text-secondary-green-500",
|
|
43573
|
+
tertiaryLight: "text-primary-green-500",
|
|
43574
|
+
direction: "text-white",
|
|
43575
|
+
directionCircle: "text-white",
|
|
43576
|
+
icon: "text-primary-green-500"
|
|
43577
|
+
}
|
|
43578
|
+
}
|
|
43579
|
+
}), OF = (e) => /* @__PURE__ */ V.jsxs(
|
|
43580
|
+
"svg",
|
|
43581
|
+
{
|
|
43582
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
43583
|
+
fill: "none",
|
|
43584
|
+
viewBox: "0 0 24 24",
|
|
43585
|
+
...e,
|
|
43586
|
+
className: Me(
|
|
43587
|
+
BF({ variant: e.variant }),
|
|
43588
|
+
e.className
|
|
43589
|
+
),
|
|
43590
|
+
children: [
|
|
43591
|
+
/* @__PURE__ */ V.jsx(
|
|
43592
|
+
"circle",
|
|
43593
|
+
{
|
|
43594
|
+
className: "opacity-25",
|
|
43595
|
+
cx: "12",
|
|
43596
|
+
cy: "12",
|
|
43597
|
+
r: "10",
|
|
43598
|
+
stroke: "currentColor",
|
|
43599
|
+
"stroke-width": "4"
|
|
43600
|
+
}
|
|
43601
|
+
),
|
|
43602
|
+
/* @__PURE__ */ V.jsx(
|
|
43603
|
+
"path",
|
|
43604
|
+
{
|
|
43605
|
+
className: "opacity-75",
|
|
43606
|
+
fill: "currentColor",
|
|
43607
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
43608
|
+
}
|
|
43609
|
+
)
|
|
43610
|
+
]
|
|
43611
|
+
}
|
|
43612
|
+
), $F = w0({
|
|
43613
|
+
base: [
|
|
43614
|
+
// "important"
|
|
43615
|
+
"!overflow-hidden !ring-0 !ring-transparent",
|
|
43616
|
+
// default
|
|
43617
|
+
"relative rounded-full border border-transparent px-10 py-4 font-bold text-white",
|
|
43618
|
+
// hover
|
|
43619
|
+
"hover:text-white",
|
|
43620
|
+
// focus
|
|
43621
|
+
"focus:outline focus:outline-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
|
|
43622
|
+
].join(" "),
|
|
43563
43623
|
variants: {
|
|
43564
43624
|
size: {
|
|
43565
43625
|
small: "h-9",
|
|
@@ -43567,18 +43627,102 @@ const qm0 = ({
|
|
|
43567
43627
|
large: "h-14"
|
|
43568
43628
|
},
|
|
43569
43629
|
variant: {
|
|
43570
|
-
primaryDark:
|
|
43571
|
-
|
|
43572
|
-
|
|
43573
|
-
|
|
43574
|
-
|
|
43575
|
-
|
|
43576
|
-
|
|
43577
|
-
|
|
43578
|
-
|
|
43579
|
-
|
|
43580
|
-
|
|
43581
|
-
|
|
43630
|
+
primaryDark: [
|
|
43631
|
+
// default
|
|
43632
|
+
"bg-white text-primary-green-500",
|
|
43633
|
+
// hover
|
|
43634
|
+
"hover:bg-secondary-green-500",
|
|
43635
|
+
// focus
|
|
43636
|
+
"focus:bg-secondary-green-500 focus:text-white focus:outline-secondary-green-500 data-[focus-visible=true]:outline-secondary-green-500"
|
|
43637
|
+
].join(" "),
|
|
43638
|
+
primaryLight: [
|
|
43639
|
+
// default
|
|
43640
|
+
"bg-primary-green-500",
|
|
43641
|
+
// hover
|
|
43642
|
+
"hover:bg-white hover:text-secondary-green-500",
|
|
43643
|
+
// focus
|
|
43644
|
+
"focus:bg-white focus:text-secondary-green-500 focus:outline-white data-[focus-visible=true]:outline-white"
|
|
43645
|
+
].join(" "),
|
|
43646
|
+
primary: [
|
|
43647
|
+
// default
|
|
43648
|
+
"bg-primary-green-500",
|
|
43649
|
+
// hover
|
|
43650
|
+
"hover:bg-secondary-green-500",
|
|
43651
|
+
// focus
|
|
43652
|
+
"focus:bg-secondary-green-500 focus:outline-secondary-green-500 data-[focus-visible=true]:outline-secondary-green-500"
|
|
43653
|
+
].join(" "),
|
|
43654
|
+
negative: [
|
|
43655
|
+
// default
|
|
43656
|
+
"bg-complementary-red-700",
|
|
43657
|
+
// hover
|
|
43658
|
+
" hover:border-transparent hover:bg-complementary-red-500",
|
|
43659
|
+
// focus
|
|
43660
|
+
"focus:bg-complementary-red-500 focus:outline-complementary-red-500 data-[focus-visible=true]:outline-complementary-red-500"
|
|
43661
|
+
].join(" "),
|
|
43662
|
+
secondaryNegative: [
|
|
43663
|
+
// default
|
|
43664
|
+
"border-complementary-red-700 !bg-white font-medium text-complementary-red-700",
|
|
43665
|
+
// hover
|
|
43666
|
+
"hover:border-complementary-red-500 hover:text-complementary-red-500",
|
|
43667
|
+
// focus
|
|
43668
|
+
"focus:border-complementary-red-500 focus:text-complementary-red-500 focus:outline-complementary-red-500 focus-visible:outline-offset-0 data-[focus-visible=true]:outline-offset-0 data-[focus-visible=true]:outline-complementary-red-500"
|
|
43669
|
+
].join(" "),
|
|
43670
|
+
secondary: [
|
|
43671
|
+
// default
|
|
43672
|
+
"border-primary-green-500 bg-white font-medium text-primary-green-500",
|
|
43673
|
+
// hover
|
|
43674
|
+
"hover:border-secondary-green-500 hover:text-secondary-green-500",
|
|
43675
|
+
// focus
|
|
43676
|
+
"focus:border-secondary-green-500 focus:text-secondary-green-500 focus:outline-secondary-green-500 focus-visible:outline-offset-0 data-[focus-visible=true]:outline-offset-0 data-[focus-visible=true]:outline-secondary-green-500"
|
|
43677
|
+
].join(" "),
|
|
43678
|
+
tertiary: [
|
|
43679
|
+
// default
|
|
43680
|
+
"!bg-transparent px-4 font-medium text-primary-green-500",
|
|
43681
|
+
// hover
|
|
43682
|
+
"hover:text-secondary-green-500",
|
|
43683
|
+
// focus
|
|
43684
|
+
"focus:text-secondary-green-500 data-[focus-visible=true]:outline-secondary-green-500"
|
|
43685
|
+
].join(" "),
|
|
43686
|
+
tertiaryDark: [
|
|
43687
|
+
// default
|
|
43688
|
+
"!bg-transparent px-4 font-medium text-secondary-green-500",
|
|
43689
|
+
// hover
|
|
43690
|
+
"hover:text-white",
|
|
43691
|
+
// focus
|
|
43692
|
+
"focus:text-secondary-green-500 data-[focus-visible=true]:outline-secondary-green-500"
|
|
43693
|
+
].join(" "),
|
|
43694
|
+
tertiaryLight: [
|
|
43695
|
+
// default
|
|
43696
|
+
"!bg-transparent px-4 font-medium text-primary-green-500",
|
|
43697
|
+
// hover
|
|
43698
|
+
"hover:text-white",
|
|
43699
|
+
// focus
|
|
43700
|
+
"focus:text-primary-green-500 data-[focus-visible=true]:outline-white"
|
|
43701
|
+
].join(" "),
|
|
43702
|
+
direction: [
|
|
43703
|
+
// default
|
|
43704
|
+
"h-10 bg-primary-green-500 p-2.5 font-medium",
|
|
43705
|
+
// hover
|
|
43706
|
+
" hover:bg-secondary-green-500",
|
|
43707
|
+
// focus
|
|
43708
|
+
"focus:border-none focus:bg-secondary-green-500 focus-visible:outline-secondary-green-500 data-[focus-visible=true]:outline-secondary-green-500"
|
|
43709
|
+
].join(" "),
|
|
43710
|
+
directionCircle: [
|
|
43711
|
+
// default
|
|
43712
|
+
"!min-w-unit-10 !min-w-10 bg-primary-green-500 !px-0 font-medium",
|
|
43713
|
+
// hover
|
|
43714
|
+
"hover:bg-secondary-green-500",
|
|
43715
|
+
// focus
|
|
43716
|
+
"focus:bg-secondary-green-500 focus-visible:outline-secondary-green-500 data-[focus-visible=true]:outline-secondary-green-500"
|
|
43717
|
+
].join(" "),
|
|
43718
|
+
icon: [
|
|
43719
|
+
// default
|
|
43720
|
+
"!min-w-unit-10 !min-w-10 !border-none bg-transparent !px-0 text-primary-green-500",
|
|
43721
|
+
// hover
|
|
43722
|
+
"hover:text-secondary-green-500",
|
|
43723
|
+
// focus
|
|
43724
|
+
"focus:none focus-visible:outline-none data-[focus-visible=true]:outline-secondary-green-500"
|
|
43725
|
+
].join(" ")
|
|
43582
43726
|
},
|
|
43583
43727
|
full: {
|
|
43584
43728
|
true: "w-full",
|
|
@@ -43606,7 +43750,7 @@ const qm0 = ({
|
|
|
43606
43750
|
{
|
|
43607
43751
|
variant: "primaryDark",
|
|
43608
43752
|
isLoading: !0,
|
|
43609
|
-
class: "!bg-secondary-green-500 !text-primary-green-500 focus:bg-secondary-green-500 focus:outline-secondary-green-500
|
|
43753
|
+
class: "!bg-secondary-green-500 !text-primary-green-500 focus:bg-secondary-green-500 focus:outline-secondary-green-500"
|
|
43610
43754
|
},
|
|
43611
43755
|
{
|
|
43612
43756
|
variant: "primaryLight",
|
|
@@ -43691,24 +43835,6 @@ const qm0 = ({
|
|
|
43691
43835
|
class: "!min-w-unit-10 !min-w-10 !px-0"
|
|
43692
43836
|
}
|
|
43693
43837
|
]
|
|
43694
|
-
}), OF = w0({
|
|
43695
|
-
base: "h-5 w-5 animate-spin",
|
|
43696
|
-
variants: {
|
|
43697
|
-
variant: {
|
|
43698
|
-
primaryDark: "text-primary-green-500",
|
|
43699
|
-
primaryLight: "text-secondary-green-500",
|
|
43700
|
-
primary: "text-white",
|
|
43701
|
-
negative: "text-white",
|
|
43702
|
-
secondaryNegative: "text-complementary-red-700",
|
|
43703
|
-
secondary: "text-secondary-green-500",
|
|
43704
|
-
tertiary: "text-primary-green-500",
|
|
43705
|
-
tertiaryDark: "text-secondary-green-500",
|
|
43706
|
-
tertiaryLight: "text-primary-green-500",
|
|
43707
|
-
direction: "text-white",
|
|
43708
|
-
directionCircle: "text-white",
|
|
43709
|
-
icon: "text-primary-green-500"
|
|
43710
|
-
}
|
|
43711
|
-
}
|
|
43712
43838
|
}), Cn = ({
|
|
43713
43839
|
children: e,
|
|
43714
43840
|
size: r,
|
|
@@ -43727,9 +43853,12 @@ const qm0 = ({
|
|
|
43727
43853
|
gD,
|
|
43728
43854
|
{
|
|
43729
43855
|
disabled: d || o,
|
|
43856
|
+
isDisabled: d || o,
|
|
43857
|
+
isLoading: d,
|
|
43858
|
+
spinner: /* @__PURE__ */ V.jsx(OF, { variant: t }),
|
|
43730
43859
|
className: Me(
|
|
43731
43860
|
c,
|
|
43732
|
-
|
|
43861
|
+
$F({
|
|
43733
43862
|
size: r,
|
|
43734
43863
|
variant: t,
|
|
43735
43864
|
disabled: o,
|
|
@@ -43741,45 +43870,11 @@ const qm0 = ({
|
|
|
43741
43870
|
...h,
|
|
43742
43871
|
children: /* @__PURE__ */ V.jsxs("div", { className: "relative flex items-center gap-3 text-center", children: [
|
|
43743
43872
|
!!s && (typeof s == "string" ? /* @__PURE__ */ V.jsx(ue, { "data-testid": "button-component-icon-left", name: s }) : s),
|
|
43744
|
-
d && /* @__PURE__ */ V.jsx($F, { variant: t }),
|
|
43745
43873
|
e && /* @__PURE__ */ V.jsx("span", { className: t.includes("tertiary") ? "underline" : "", children: e }),
|
|
43746
43874
|
!!l && (typeof l == "string" ? /* @__PURE__ */ V.jsx(ue, { "data-testid": "button-component-icon-right", name: l }) : l)
|
|
43747
43875
|
] })
|
|
43748
43876
|
}
|
|
43749
|
-
)),
|
|
43750
|
-
"svg",
|
|
43751
|
-
{
|
|
43752
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
43753
|
-
fill: "none",
|
|
43754
|
-
viewBox: "0 0 24 24",
|
|
43755
|
-
...e,
|
|
43756
|
-
className: Me(
|
|
43757
|
-
OF({ variant: e.variant }),
|
|
43758
|
-
e.className
|
|
43759
|
-
),
|
|
43760
|
-
children: [
|
|
43761
|
-
/* @__PURE__ */ V.jsx(
|
|
43762
|
-
"circle",
|
|
43763
|
-
{
|
|
43764
|
-
className: "opacity-25",
|
|
43765
|
-
cx: "12",
|
|
43766
|
-
cy: "12",
|
|
43767
|
-
r: "10",
|
|
43768
|
-
stroke: "currentColor",
|
|
43769
|
-
"stroke-width": "4"
|
|
43770
|
-
}
|
|
43771
|
-
),
|
|
43772
|
-
/* @__PURE__ */ V.jsx(
|
|
43773
|
-
"path",
|
|
43774
|
-
{
|
|
43775
|
-
className: "opacity-75",
|
|
43776
|
-
fill: "currentColor",
|
|
43777
|
-
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
43778
|
-
}
|
|
43779
|
-
)
|
|
43780
|
-
]
|
|
43781
|
-
}
|
|
43782
|
-
), rv0 = ({
|
|
43877
|
+
)), rv0 = ({
|
|
43783
43878
|
children: e,
|
|
43784
43879
|
className: r,
|
|
43785
43880
|
avatar: t,
|