globalfy-design-system 1.4.0 → 1.6.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.
Files changed (7) hide show
  1. package/dist/components/atoms/Button/Button.d.ts +3 -2
  2. package/dist/components/atoms/Button/Button.stories.d.ts +0 -1
  3. package/dist/components/atoms/Button/SpinnerIcon.d.ts +111 -0
  4. package/dist/components/atoms/Tag/Tag.types.d.ts +2 -1
  5. package/dist/globalfy-design-system.js +163 -68
  6. package/dist/globalfy-design-system.umd.cjs +1 -1
  7. package/package.json +1 -1
package/dist/components/atoms/Button/Button.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- /// <reference types="react" />
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;
package/dist/components/atoms/Button/Button.stories.d.ts CHANGED
@@ -9,5 +9,4 @@ export declare const Variants: Story;
9
9
  export declare const Sizes: Story;
10
10
  export declare const Loading: Story;
11
11
  export declare const Disabled: Story;
12
- export declare const LoadingDisabled: Story;
13
12
  export declare const SimulateLoading: Story;
package/dist/components/atoms/Button/SpinnerIcon.d.ts ADDED
@@ -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 {};
package/dist/components/atoms/Tag/Tag.types.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { ReactNode } from 'react';
2
2
 
3
3
  export type TagColor = "red" | "orange" | "lightGreen" | "violet" | "blue" | "darkGreen" | "gray" | "yellow";
4
+ export type TagVariant = "light" | "dark" | "ghost";
4
5
  export type TagProps = {
5
6
  children: ReactNode;
6
7
  className?: string;
7
- variant?: "light" | "dark" | "ghost";
8
+ variant?: TagVariant;
8
9
  color?: TagColor;
9
10
  "data-testid"?: string;
10
11
  };
package/dist/globalfy-design-system.js CHANGED
@@ -43559,7 +43559,67 @@ const qm0 = ({
43559
43559
  ] }, d.id))
43560
43560
  }
43561
43561
  ), BF = w0({
43562
- base: "relative !overflow-hidden rounded-full border-transparent px-10 py-4 font-bold text-white !ring-0 !ring-transparent hover:text-white focus:outline focus:outline-2 focus:-outline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white",
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
+ strokeWidth: "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: "bg-white text-primary-green-500 hover:bg-secondary-green-500 focus:bg-secondary-green-500 focus:text-white focus:outline-primary-green-500",
43571
- primaryLight: "bg-primary-green-500 hover:bg-white hover:text-secondary-green-500 focus:bg-white focus:text-secondary-green-500 focus:outline-secondary-green-500",
43572
- primary: "bg-primary-green-500 hover:bg-secondary-green-500 focus:bg-secondary-green-500 focus:outline-white",
43573
- negative: "bg-complementary-red-700 hover:border-transparent hover:bg-complementary-red-500 focus:bg-complementary-red-500 focus:outline-white",
43574
- secondaryNegative: "border border-complementary-red-700 !bg-white font-medium text-complementary-red-700 hover:border-2 hover:border-complementary-red-500 hover:text-complementary-red-500 focus:border-[3px] focus:border-complementary-red-500 focus:text-complementary-red-500",
43575
- secondary: "border border-primary-green-500 !bg-transparent font-medium text-primary-green-500 hover:border-2 hover:border-secondary-green-500 hover:text-secondary-green-500 focus:border-[3px] focus:border-secondary-green-500 focus:text-secondary-green-500",
43576
- tertiary: "!bg-transparent px-4 font-medium text-primary-green-500 hover:text-secondary-green-500 focus:font-bold focus:text-secondary-green-500 focus:outline-none",
43577
- tertiaryDark: "!bg-transparent px-4 font-medium text-secondary-green-500 focus:font-bold focus:text-secondary-green-500 focus:outline-none",
43578
- tertiaryLight: "!bg-transparent px-4 font-medium text-primary-green-500 focus:font-bold focus:text-primary-green-500 focus:outline-none",
43579
- direction: "h-10 bg-primary-green-500 p-2.5 font-medium hover:bg-secondary-green-500 focus:border-none focus:bg-secondary-green-500 focus:outline-none focus-visible:outline-none",
43580
- directionCircle: "font:medium !min-w-unit-10 !min-w-10 bg-primary-green-500 !px-0 hover:bg-secondary-green-500 focus:border-none focus:bg-secondary-green-500 focus:outline-none",
43581
- icon: "focus:none !min-w-unit-10 !min-w-10 !border-none bg-transparent !px-0 text-primary-green-500 hover:text-secondary-green-500 focus:outline-none focus-visible:outline-none"
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
- BF({
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
- )), $F = (e) => /* @__PURE__ */ V.jsxs(
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,