@szum-tech/design-system 2.6.0 → 3.0.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 (126) hide show
  1. package/dist/chunk-2Y2ZCPNV.cjs +61 -0
  2. package/dist/chunk-3376ZTRC.cjs +2 -0
  3. package/dist/chunk-3KMXFN6M.cjs +141 -0
  4. package/dist/chunk-5AA4IE2T.cjs +27 -0
  5. package/dist/chunk-5F2Y65JH.js +32 -0
  6. package/dist/chunk-6BSR3O2J.js +53 -0
  7. package/dist/chunk-BYXBJQAS.js +1 -0
  8. package/dist/{chunk-5RNHEHRL.js → chunk-DP7UEOTA.js} +173 -176
  9. package/dist/chunk-HCHVDUI6.cjs +34 -0
  10. package/dist/chunk-HD7ZDQWW.js +173 -0
  11. package/dist/chunk-I3RSTJP6.js +20 -0
  12. package/dist/chunk-I7AV5IQO.cjs +33 -0
  13. package/dist/chunk-N4O2GO6V.cjs +204 -0
  14. package/dist/chunk-NGVFYKAT.js +29 -0
  15. package/dist/chunk-NU5UQPBX.cjs +25 -0
  16. package/dist/chunk-OQCNPNPS.js +23 -0
  17. package/dist/chunk-S3ANEJJ7.cjs +22 -0
  18. package/dist/chunk-U4AWAABZ.js +4901 -0
  19. package/dist/chunk-UGSNASZM.js +25 -0
  20. package/dist/{chunk-Q2IKZZ3U.cjs → chunk-UIOBJSKZ.cjs} +2 -3
  21. package/dist/chunk-WJSS32MY.js +130 -0
  22. package/dist/{chunk-RXYZURP4.js → chunk-XJIUGEPN.js} +2 -3
  23. package/dist/chunk-Y6EVJSAH.cjs +4928 -0
  24. package/dist/{chunk-AIXT3Q3I.cjs → chunk-ZV4467OW.cjs} +176 -185
  25. package/dist/components/alert-dialog/index.cjs +1 -0
  26. package/dist/components/alert-dialog/index.js +1 -0
  27. package/dist/components/avatar/index.cjs +5 -4
  28. package/dist/components/avatar/index.d.cts +5 -19
  29. package/dist/components/avatar/index.d.ts +5 -19
  30. package/dist/components/avatar/index.js +2 -1
  31. package/dist/components/badge/index.cjs +1 -0
  32. package/dist/components/badge/index.js +1 -0
  33. package/dist/components/button/index.cjs +23 -3
  34. package/dist/components/button/index.d.cts +8 -15
  35. package/dist/components/button/index.d.ts +8 -15
  36. package/dist/components/button/index.js +22 -2
  37. package/dist/components/card/index.cjs +12 -7
  38. package/dist/components/card/index.d.cts +8 -5
  39. package/dist/components/card/index.d.ts +8 -5
  40. package/dist/components/card/index.js +2 -1
  41. package/dist/components/checkbox/index.cjs +12 -0
  42. package/dist/components/checkbox/index.d.cts +8 -0
  43. package/dist/components/checkbox/index.d.ts +8 -0
  44. package/dist/components/checkbox/index.js +3 -0
  45. package/dist/components/dialog/index.cjs +1 -0
  46. package/dist/components/dialog/index.d.cts +1 -1
  47. package/dist/components/dialog/index.d.ts +1 -1
  48. package/dist/components/dialog/index.js +1 -0
  49. package/dist/components/field/index.cjs +50 -0
  50. package/dist/components/field/index.d.cts +50 -0
  51. package/dist/components/field/index.d.ts +50 -0
  52. package/dist/components/field/index.js +5 -0
  53. package/dist/components/header/index.cjs +1 -0
  54. package/dist/components/header/index.js +1 -0
  55. package/dist/components/index.cjs +155 -82
  56. package/dist/components/index.d.cts +8 -8
  57. package/dist/components/index.d.ts +8 -8
  58. package/dist/components/index.js +13 -12
  59. package/dist/components/input/index.cjs +3 -2
  60. package/dist/components/input/index.d.cts +2 -4
  61. package/dist/components/input/index.d.ts +2 -4
  62. package/dist/components/input/index.js +2 -1
  63. package/dist/components/item/index.cjs +49 -0
  64. package/dist/components/item/index.d.cts +60 -0
  65. package/dist/components/item/index.d.ts +60 -0
  66. package/dist/components/item/index.js +4 -0
  67. package/dist/components/label/index.cjs +3 -2
  68. package/dist/components/label/index.js +2 -1
  69. package/dist/components/select/index.cjs +20 -3
  70. package/dist/components/select/index.d.cts +20 -6
  71. package/dist/components/select/index.d.ts +20 -6
  72. package/dist/components/select/index.js +2 -1
  73. package/dist/components/separator/index.cjs +3 -2
  74. package/dist/components/separator/index.js +2 -1
  75. package/dist/components/sheet/index.cjs +1 -0
  76. package/dist/components/sheet/index.d.cts +1 -1
  77. package/dist/components/sheet/index.d.ts +1 -1
  78. package/dist/components/sheet/index.js +1 -0
  79. package/dist/components/spinner/index.cjs +1 -0
  80. package/dist/components/spinner/index.js +1 -0
  81. package/dist/components/stepper/index.cjs +32 -31
  82. package/dist/components/stepper/index.js +13 -12
  83. package/dist/components/textarea/index.cjs +4 -2
  84. package/dist/components/textarea/index.d.cts +2 -2
  85. package/dist/components/textarea/index.d.ts +2 -2
  86. package/dist/components/textarea/index.js +3 -1
  87. package/dist/components/tooltip/index.cjs +1 -0
  88. package/dist/components/tooltip/index.js +1 -0
  89. package/dist/contexts/index.cjs +1 -0
  90. package/dist/contexts/index.js +1 -0
  91. package/dist/hooks/index.cjs +1 -0
  92. package/dist/hooks/index.js +1 -0
  93. package/dist/icons/index.cjs +89 -18
  94. package/dist/icons/index.js +88 -1
  95. package/dist/utils/index.cjs +1 -0
  96. package/dist/utils/index.js +1 -0
  97. package/package.json +8 -9
  98. package/tailwind/global.css +5 -9
  99. package/tailwind/palette.css +149 -204
  100. package/tailwind/typography.css +33 -57
  101. package/dist/chunk-36YD6ICC.js +0 -70
  102. package/dist/chunk-3DSBDIFJ.cjs +0 -31
  103. package/dist/chunk-4NO6IM75.cjs +0 -40
  104. package/dist/chunk-5PBHBOXI.js +0 -30
  105. package/dist/chunk-EU7G37IS.js +0 -36
  106. package/dist/chunk-FVSO3RHT.cjs +0 -17
  107. package/dist/chunk-G6VXQ7DJ.cjs +0 -63
  108. package/dist/chunk-IAI7BIAG.js +0 -31
  109. package/dist/chunk-K4TRAPRN.cjs +0 -341
  110. package/dist/chunk-MI3CQBHC.js +0 -60
  111. package/dist/chunk-OIWEXHFE.cjs +0 -33
  112. package/dist/chunk-P4J2TTH7.cjs +0 -32
  113. package/dist/chunk-UKWZ5BHD.cjs +0 -93
  114. package/dist/chunk-V5OVQTDR.js +0 -24
  115. package/dist/chunk-VZKTT6CG.js +0 -15
  116. package/dist/chunk-XTO7CMIM.js +0 -88
  117. package/dist/chunk-YJFJLF7Y.js +0 -319
  118. package/dist/chunk-ZZ3EBGSD.cjs +0 -72
  119. package/dist/components/form/index.cjs +0 -54
  120. package/dist/components/form/index.d.cts +0 -32
  121. package/dist/components/form/index.d.ts +0 -32
  122. package/dist/components/form/index.js +0 -21
  123. package/dist/components/helper-text/index.cjs +0 -10
  124. package/dist/components/helper-text/index.d.cts +0 -18
  125. package/dist/components/helper-text/index.d.ts +0 -18
  126. package/dist/components/helper-text/index.js +0 -1
@@ -1,93 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
-
5
- // src/icons/google-logo.tsx
6
- function GoogleLogoIcon(props) {
7
- return /* @__PURE__ */ jsxRuntime.jsxs(
8
- "svg",
9
- {
10
- xmlns: "http://www.w3.org/2000/svg",
11
- viewBox: "0 0 24 24",
12
- strokeWidth: "2",
13
- stroke: "currentColor",
14
- fill: "none",
15
- strokeLinecap: "round",
16
- strokeLinejoin: "round",
17
- ...props,
18
- children: [
19
- /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
20
- /* @__PURE__ */ jsxRuntime.jsx(
21
- "path",
22
- {
23
- d: "M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z",
24
- strokeWidth: "0",
25
- fill: "currentColor"
26
- }
27
- )
28
- ]
29
- }
30
- );
31
- }
32
- function LoadingIcon(props) {
33
- return /* @__PURE__ */ jsxRuntime.jsx(
34
- "svg",
35
- {
36
- xmlns: "http://www.w3.org/2000/svg",
37
- xmlnsXlink: "http://www.w3.org/1999/xlink",
38
- fill: "currentColor",
39
- version: "1.1",
40
- viewBox: "0 0 26.349 26.35",
41
- xmlSpace: "preserve",
42
- ...props,
43
- children: /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
44
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "13.792", cy: "3.082", r: "3.082" }),
45
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "13.792", cy: "24.501", r: "1.849" }),
46
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6.219", cy: "6.218", r: "2.774" }),
47
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "21.365", cy: "21.363", r: "1.541" }),
48
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "3.082", cy: "13.792", r: "2.465" }),
49
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24.501", cy: "13.791", r: "1.232" }),
50
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05 C6.902,18.996,5.537,18.988,4.694,19.84z" }),
51
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "21.364", cy: "6.218", r: "0.924" })
52
- ] }) })
53
- }
54
- );
55
- }
56
- function Auth0LogoIcon(props) {
57
- return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
58
- /* @__PURE__ */ jsxRuntime.jsx("title", {}),
59
- /* @__PURE__ */ jsxRuntime.jsx(
60
- "path",
61
- {
62
- d: "M21.98 7.448L19.62 0H4.347L2.02 7.448c-1.352 4.312.03 9.206 3.815 12.015L12.007 24l6.157-4.552c3.755-2.81 5.182-7.688 3.815-12.015l-6.16 4.58 2.343 7.45-6.157-4.597-6.158 4.58 2.358-7.433-6.188-4.55 7.63-.045L12.008 0l2.356 7.404 7.615.044z",
63
- fill: "currentColor"
64
- }
65
- )
66
- ] });
67
- }
68
- function XLogoIcon(props) {
69
- return /* @__PURE__ */ jsxRuntime.jsx(
70
- "svg",
71
- {
72
- xmlns: "http://www.w3.org/2000/svg",
73
- version: "1.1",
74
- id: "Layer_1",
75
- width: "24px",
76
- height: "24px",
77
- viewBox: "0 0 24 24",
78
- ...props,
79
- children: /* @__PURE__ */ jsxRuntime.jsx(
80
- "path",
81
- {
82
- d: "M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z",
83
- fill: "currentColor"
84
- }
85
- )
86
- }
87
- );
88
- }
89
-
90
- exports.Auth0LogoIcon = Auth0LogoIcon;
91
- exports.GoogleLogoIcon = GoogleLogoIcon;
92
- exports.LoadingIcon = LoadingIcon;
93
- exports.XLogoIcon = XLogoIcon;
@@ -1,24 +0,0 @@
1
- import { cn } from './chunk-ZD2QRAOX.js';
2
- import { twMerge } from 'tailwind-merge';
3
- import { jsx } from 'react/jsx-runtime';
4
-
5
- function Card({ className, ...props }) {
6
- return /* @__PURE__ */ jsx("div", { className: twMerge("bg-app-foreground h-full rounded border border-gray-800", className), ...props });
7
- }
8
- function CardHeader({ className, ...props }) {
9
- return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col p-6", className), ...props });
10
- }
11
- function CardTitle({ className, ...props }) {
12
- return /* @__PURE__ */ jsx("h3", { className: twMerge("text-heading-5", className), ...props });
13
- }
14
- function CardDescription({ className, ...props }) {
15
- return /* @__PURE__ */ jsx("p", { className: cn("text-body-2 text-gray-300", className), ...props });
16
- }
17
- function CardContent({ className, ...props }) {
18
- return /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ...props });
19
- }
20
- function CardFooter({ className, ...props }) {
21
- return /* @__PURE__ */ jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
22
- }
23
-
24
- export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
@@ -1,15 +0,0 @@
1
- import { cn } from './chunk-ZD2QRAOX.js';
2
- import { Label as Label$1 } from 'radix-ui';
3
- import { jsx } from 'react/jsx-runtime';
4
-
5
- function Label({ className, ...props }) {
6
- return /* @__PURE__ */ jsx(
7
- Label$1.Root,
8
- {
9
- className: cn("text-subtitle-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className),
10
- ...props
11
- }
12
- );
13
- }
14
-
15
- export { Label };
@@ -1,88 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
-
3
- // src/icons/google-logo.tsx
4
- function GoogleLogoIcon(props) {
5
- return /* @__PURE__ */ jsxs(
6
- "svg",
7
- {
8
- xmlns: "http://www.w3.org/2000/svg",
9
- viewBox: "0 0 24 24",
10
- strokeWidth: "2",
11
- stroke: "currentColor",
12
- fill: "none",
13
- strokeLinecap: "round",
14
- strokeLinejoin: "round",
15
- ...props,
16
- children: [
17
- /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
18
- /* @__PURE__ */ jsx(
19
- "path",
20
- {
21
- d: "M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z",
22
- strokeWidth: "0",
23
- fill: "currentColor"
24
- }
25
- )
26
- ]
27
- }
28
- );
29
- }
30
- function LoadingIcon(props) {
31
- return /* @__PURE__ */ jsx(
32
- "svg",
33
- {
34
- xmlns: "http://www.w3.org/2000/svg",
35
- xmlnsXlink: "http://www.w3.org/1999/xlink",
36
- fill: "currentColor",
37
- version: "1.1",
38
- viewBox: "0 0 26.349 26.35",
39
- xmlSpace: "preserve",
40
- ...props,
41
- children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs("g", { children: [
42
- /* @__PURE__ */ jsx("circle", { cx: "13.792", cy: "3.082", r: "3.082" }),
43
- /* @__PURE__ */ jsx("circle", { cx: "13.792", cy: "24.501", r: "1.849" }),
44
- /* @__PURE__ */ jsx("circle", { cx: "6.219", cy: "6.218", r: "2.774" }),
45
- /* @__PURE__ */ jsx("circle", { cx: "21.365", cy: "21.363", r: "1.541" }),
46
- /* @__PURE__ */ jsx("circle", { cx: "3.082", cy: "13.792", r: "2.465" }),
47
- /* @__PURE__ */ jsx("circle", { cx: "24.501", cy: "13.791", r: "1.232" }),
48
- /* @__PURE__ */ jsx("path", { d: "M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05 C6.902,18.996,5.537,18.988,4.694,19.84z" }),
49
- /* @__PURE__ */ jsx("circle", { cx: "21.364", cy: "6.218", r: "0.924" })
50
- ] }) })
51
- }
52
- );
53
- }
54
- function Auth0LogoIcon(props) {
55
- return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
56
- /* @__PURE__ */ jsx("title", {}),
57
- /* @__PURE__ */ jsx(
58
- "path",
59
- {
60
- d: "M21.98 7.448L19.62 0H4.347L2.02 7.448c-1.352 4.312.03 9.206 3.815 12.015L12.007 24l6.157-4.552c3.755-2.81 5.182-7.688 3.815-12.015l-6.16 4.58 2.343 7.45-6.157-4.597-6.158 4.58 2.358-7.433-6.188-4.55 7.63-.045L12.008 0l2.356 7.404 7.615.044z",
61
- fill: "currentColor"
62
- }
63
- )
64
- ] });
65
- }
66
- function XLogoIcon(props) {
67
- return /* @__PURE__ */ jsx(
68
- "svg",
69
- {
70
- xmlns: "http://www.w3.org/2000/svg",
71
- version: "1.1",
72
- id: "Layer_1",
73
- width: "24px",
74
- height: "24px",
75
- viewBox: "0 0 24 24",
76
- ...props,
77
- children: /* @__PURE__ */ jsx(
78
- "path",
79
- {
80
- d: "M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z",
81
- fill: "currentColor"
82
- }
83
- )
84
- }
85
- );
86
- }
87
-
88
- export { Auth0LogoIcon, GoogleLogoIcon, LoadingIcon, XLogoIcon };
@@ -1,319 +0,0 @@
1
- import { LoadingIcon } from './chunk-XTO7CMIM.js';
2
- import * as React from 'react';
3
- import { Slot } from '@radix-ui/react-slot';
4
- import { cva } from 'class-variance-authority';
5
- import { jsx, jsxs } from 'react/jsx-runtime';
6
-
7
- var buttonCva = cva(
8
- [
9
- "inline-flex cursor-pointer items-center justify-center align-middle no-underline transition-colors duration-300 ease-in-out",
10
- "select-none appearance-none rounded-sm border font-sans font-medium tracking-[.02857em]",
11
- "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
12
- ],
13
- {
14
- variants: {
15
- fullWidth: {
16
- true: "w-full"
17
- },
18
- color: {
19
- neutral: "",
20
- primary: "",
21
- success: "",
22
- warning: "",
23
- error: ""
24
- },
25
- size: {
26
- sm: "px-2.5 py-1 text-[.8125rem] leading-4",
27
- md: "px-4 py-1.5 text-[0.875rem] leading-5",
28
- lg: "px-5 py-2 text-[.9375rem] leading-6"
29
- },
30
- variant: {
31
- text: "border-transparent bg-transparent",
32
- outlined: "bg-transparent",
33
- contained: ""
34
- }
35
- },
36
- compoundVariants: [
37
- // ---------- TEXT ---------- //
38
- {
39
- variant: "text",
40
- color: "neutral",
41
- class: [
42
- "text-gray-100",
43
- "hover:text-app-foreground hover:border-gray-500 hover:bg-gray-500",
44
- "active:border-gray-600 active:bg-gray-600"
45
- ]
46
- },
47
- {
48
- variant: "text",
49
- color: "primary",
50
- class: [
51
- "text-primary-500",
52
- "hover:border-primary-500 hover:bg-primary-500 hover:text-white",
53
- "active:border-primary-600 active:bg-primary-600 active:text-white"
54
- ]
55
- },
56
- {
57
- variant: "text",
58
- color: "success",
59
- class: [
60
- "text-success-500",
61
- "hover:border-success-500 hover:bg-success-500 hover:text-white",
62
- "active:border-success-600 active:bg-success-600 active:text-white"
63
- ]
64
- },
65
- {
66
- variant: "text",
67
- color: "warning",
68
- class: [
69
- "text-warning-500",
70
- "hover:border-warning-500 hover:bg-warning-500 hover:text-white",
71
- "active:border-warning-600 active:bg-warning-600 active:text-white"
72
- ]
73
- },
74
- {
75
- variant: "text",
76
- color: "error",
77
- class: [
78
- "text-error-500",
79
- "hover:border-error-500 hover:bg-error-500 hover:text-white",
80
- "active:border-error-600 active:bg-error-600 active:text-white"
81
- ]
82
- },
83
- // ---------- OUTLINED ---------- //
84
- {
85
- variant: "outlined",
86
- color: "neutral",
87
- class: ["border-gray-500 text-gray-100", "hover:text-app-foreground hover:bg-gray-500", "active:bg-gray-600"]
88
- },
89
- {
90
- variant: "outlined",
91
- color: "primary",
92
- class: [
93
- "text-primary-500 border-primary-500",
94
- "hover:bg-primary-500 hover:text-white",
95
- "active:bg-primary-600 active:text-white"
96
- ]
97
- },
98
- {
99
- variant: "outlined",
100
- color: "success",
101
- class: [
102
- "text-success-500 border-success-500",
103
- "hover:bg-success-500 hover:text-white",
104
- "active:bg-success-600 active:text-white"
105
- ]
106
- },
107
- {
108
- variant: "outlined",
109
- color: "warning",
110
- class: [
111
- "text-warning-500 border-warning-500",
112
- "hover:bg-warning-500 hover:text-white",
113
- "active:bg-warning-600 active:text-white"
114
- ]
115
- },
116
- {
117
- variant: "outlined",
118
- color: "error",
119
- class: [
120
- "text-error-500 border-error-500",
121
- "hover:bg-error-500 hover:text-white",
122
- "active:bg-error-600 active:text-white"
123
- ]
124
- },
125
- // ---------- OUTLINED ---------- //
126
- {
127
- variant: "contained",
128
- color: "neutral",
129
- class: [
130
- "border-gray-500 bg-gray-500 text-gray-100",
131
- "hover:text-app-foreground hover:border-gray-400 hover:bg-gray-400",
132
- "active:border-gray-600 active:bg-gray-600"
133
- ]
134
- },
135
- {
136
- variant: "contained",
137
- color: "primary",
138
- class: [
139
- "border-primary-500 bg-primary-500 text-white",
140
- "hover:border-primary-400 hover:bg-primary-400",
141
- "active:border-primary-600 active:bg-primary-600"
142
- ]
143
- },
144
- {
145
- variant: "contained",
146
- color: "success",
147
- class: [
148
- "border-success-500 bg-success-500 text-white",
149
- "hover:border-success-400 hover:bg-success-400",
150
- "active:border-success-600 active:bg-success-600"
151
- ]
152
- },
153
- {
154
- variant: "contained",
155
- color: "warning",
156
- class: [
157
- "border-warning-500 bg-warning-500 text-white",
158
- "hover:border-warning-400 hover:bg-warning-400",
159
- "active:border-warning-600 active:bg-warning-600"
160
- ]
161
- },
162
- {
163
- variant: "contained",
164
- color: "error",
165
- class: [
166
- "border-error-500 bg-error-500 text-white",
167
- "hover:border-error-400 hover:bg-error-400",
168
- "active:border-error-600 active:bg-error-600"
169
- ]
170
- }
171
- ],
172
- defaultVariants: {
173
- fullWidth: false,
174
- color: "primary",
175
- size: "md",
176
- variant: "text"
177
- }
178
- }
179
- );
180
- var iconContainerCva = cva("", {
181
- variants: {
182
- site: {
183
- left: "",
184
- right: ""
185
- },
186
- size: {
187
- sm: "",
188
- md: "",
189
- lg: ""
190
- }
191
- },
192
- compoundVariants: [
193
- // ---------- LEFT ---------- //
194
- {
195
- site: "left",
196
- size: "sm",
197
- class: "-ml-0.5 mr-1.5"
198
- },
199
- {
200
- site: "left",
201
- size: "md",
202
- class: "-ml-1 mr-2"
203
- },
204
- {
205
- site: "left",
206
- size: "lg",
207
- class: "-ml-1.5 mr-2.5"
208
- },
209
- // ---------- RIGHT ---------- //
210
- {
211
- site: "right",
212
- size: "sm",
213
- class: "-mr-0.5 ml-1.5"
214
- },
215
- {
216
- site: "right",
217
- size: "md",
218
- class: "-mr-1 ml-2"
219
- },
220
- {
221
- site: "right",
222
- size: "lg",
223
- class: "-mr-1.5 ml-2.5"
224
- }
225
- ],
226
- defaultVariants: {
227
- site: "left",
228
- size: "md"
229
- }
230
- });
231
- var iconCva = cva("", {
232
- variants: {
233
- loading: {
234
- true: "animate-spin motion-reduce:hidden"
235
- },
236
- size: {
237
- sm: "h-4.5 w-4.5",
238
- md: "size-5",
239
- lg: "h-5.5 w-5.5"
240
- }
241
- },
242
- defaultVariants: {
243
- loading: false,
244
- size: "md"
245
- }
246
- });
247
- function Button({
248
- asChild = false,
249
- variant = "text",
250
- color = "primary",
251
- disabled = false,
252
- fullWidth = false,
253
- loadingPosition = "start",
254
- ref,
255
- ...props
256
- }) {
257
- const {
258
- children,
259
- type = "button",
260
- loading = false,
261
- size = "md",
262
- endIcon,
263
- startIcon,
264
- ...rest
265
- } = { ...props, loadingPosition };
266
- const Comp = asChild ? Slot : "button";
267
- const buttonStyles = buttonCva({ fullWidth, size, variant, color });
268
- const isDisabled = disabled || loading;
269
- return /* @__PURE__ */ jsx(
270
- Comp,
271
- {
272
- ...asChild ? props : rest,
273
- "aria-disabled": isDisabled || void 0,
274
- className: buttonStyles,
275
- "data-state": loading ? "loading" : void 0,
276
- disabled: isDisabled,
277
- ref,
278
- role: Comp !== "button" ? "button" : void 0,
279
- tabIndex: isDisabled ? -1 : 0,
280
- type: Comp === "button" ? type : void 0,
281
- children: asChild ? /* @__PURE__ */ jsx(ButtonContent, { children }) : /* @__PURE__ */ jsx(ButtonContent, { ...props })
282
- }
283
- );
284
- }
285
- function ButtonContent({
286
- children,
287
- loading = false,
288
- size = "md",
289
- loadingPosition = "start",
290
- startIcon,
291
- endIcon,
292
- ...props
293
- }) {
294
- const isStartLoading = loading && loadingPosition === "start";
295
- const StartIcon = isStartLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : startIcon || null;
296
- const startIconStyles = iconCva({ size, loading: isStartLoading });
297
- const startIconContainerStyles = iconContainerCva({ size, site: "left" });
298
- const isEndLoading = loading && loadingPosition === "end";
299
- const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
300
- const endIconStyles = iconCva({ size, loading: isEndLoading });
301
- const endIconContainerStyles = iconContainerCva({ size, site: "right" });
302
- const LeadingIcon = StartIcon ? /* @__PURE__ */ jsx("span", { className: startIconContainerStyles, role: isStartLoading ? "progressbar" : void 0, children: React.cloneElement(StartIcon, { className: startIconStyles }) }) : null;
303
- const TrailingIcon = EndIcon ? /* @__PURE__ */ jsx("span", { className: endIconContainerStyles, role: isEndLoading ? "progressbar" : void 0, children: React.cloneElement(EndIcon, { className: endIconStyles }) }) : null;
304
- return React.isValidElement(children) ? React.cloneElement(
305
- children,
306
- props,
307
- /* @__PURE__ */ jsxs(React.Fragment, { children: [
308
- LeadingIcon,
309
- React.isValidElement(children) ? children.props?.children : null,
310
- TrailingIcon
311
- ] })
312
- ) : /* @__PURE__ */ jsxs(React.Fragment, { children: [
313
- LeadingIcon,
314
- children,
315
- TrailingIcon
316
- ] });
317
- }
318
-
319
- export { Button };
@@ -1,72 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
4
- var classVarianceAuthority = require('class-variance-authority');
5
- var jsxRuntime = require('react/jsx-runtime');
6
-
7
- var inputCva = classVarianceAuthority.cva(
8
- [
9
- "bg-app-foreground font-poppins h-10 w-full appearance-none border py-2 outline-0 transition-colors duration-300 ease-in-out",
10
- "placeholder:select-none placeholder:text-gray-400",
11
- "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
12
- "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600"
13
- ],
14
- {
15
- variants: {
16
- invalid: {
17
- true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
18
- false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
19
- },
20
- withStartIcon: {
21
- true: "pl-11",
22
- false: "pl-3"
23
- },
24
- withEndIcon: {
25
- true: "pr-11",
26
- false: "pr-3"
27
- }
28
- },
29
- defaultVariants: {
30
- invalid: false,
31
- withStartIcon: false,
32
- withEndIcon: false
33
- }
34
- }
35
- );
36
- var inputIconContainerCva = classVarianceAuthority.cva(
37
- ["pointer-events-none absolute inset-y-2 inline-flex w-10 place-content-center items-center text-center"],
38
- {
39
- variants: {
40
- disabled: {
41
- true: "text-gray-300"
42
- },
43
- site: {
44
- right: "right-0 border-l border-l-gray-800 pr-1",
45
- left: "left-0 border-r border-r-gray-800 pl-1"
46
- }
47
- },
48
- defaultVariants: {
49
- disabled: false
50
- }
51
- }
52
- );
53
- function Input({ invalid = false, startIcon, endIcon, disabled = false, className, ...props }) {
54
- const inputStyles = inputCva({ withEndIcon: !!endIcon, withStartIcon: !!startIcon, invalid });
55
- const inputIconStartContainer = inputIconContainerCva({ site: "left", disabled });
56
- const inputIconEndContainer = inputIconContainerCva({ site: "right", disabled });
57
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-body-2 relative text-gray-100", children: [
58
- startIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: inputIconStartContainer, children: startIcon }) : null,
59
- /* @__PURE__ */ jsxRuntime.jsx(
60
- "input",
61
- {
62
- "aria-invalid": invalid || void 0,
63
- disabled,
64
- className: chunkH2BWO3SI_cjs.cn(inputStyles, className),
65
- ...props
66
- }
67
- ),
68
- endIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: inputIconEndContainer, children: endIcon }) : null
69
- ] });
70
- }
71
-
72
- exports.Input = Input;
@@ -1,54 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkAIXT3Q3I_cjs = require('../../chunk-AIXT3Q3I.cjs');
4
- require('../../chunk-G6VXQ7DJ.cjs');
5
- require('../../chunk-3WSQRFUY.cjs');
6
- require('../../chunk-GHV2TURY.cjs');
7
- require('../../chunk-Q2IKZZ3U.cjs');
8
- require('../../chunk-OIWEXHFE.cjs');
9
- require('../../chunk-GR37JJQK.cjs');
10
- require('../../chunk-K4TRAPRN.cjs');
11
- require('../../chunk-3DSBDIFJ.cjs');
12
- require('../../chunk-PH4LO5TE.cjs');
13
- require('../../chunk-P4J2TTH7.cjs');
14
- require('../../chunk-YWG7TML6.cjs');
15
- require('../../chunk-FVSO3RHT.cjs');
16
- require('../../chunk-ZZ3EBGSD.cjs');
17
- require('../../chunk-EW6TE3N5.cjs');
18
- require('../../chunk-7EYMOUWG.cjs');
19
- require('../../chunk-UKWZ5BHD.cjs');
20
- require('../../chunk-TMXVL5CV.cjs');
21
- require('../../chunk-4NO6IM75.cjs');
22
- require('../../chunk-NHFHKMX2.cjs');
23
- require('../../chunk-H2BWO3SI.cjs');
24
-
25
-
26
-
27
- Object.defineProperty(exports, "Form", {
28
- enumerable: true,
29
- get: function () { return chunkAIXT3Q3I_cjs.Form; }
30
- });
31
- Object.defineProperty(exports, "FormControl", {
32
- enumerable: true,
33
- get: function () { return chunkAIXT3Q3I_cjs.FormControl; }
34
- });
35
- Object.defineProperty(exports, "FormDescription", {
36
- enumerable: true,
37
- get: function () { return chunkAIXT3Q3I_cjs.FormDescription; }
38
- });
39
- Object.defineProperty(exports, "FormField", {
40
- enumerable: true,
41
- get: function () { return chunkAIXT3Q3I_cjs.FormField; }
42
- });
43
- Object.defineProperty(exports, "FormItem", {
44
- enumerable: true,
45
- get: function () { return chunkAIXT3Q3I_cjs.FormItem; }
46
- });
47
- Object.defineProperty(exports, "FormLabel", {
48
- enumerable: true,
49
- get: function () { return chunkAIXT3Q3I_cjs.FormLabel; }
50
- });
51
- Object.defineProperty(exports, "FormMessage", {
52
- enumerable: true,
53
- get: function () { return chunkAIXT3Q3I_cjs.FormMessage; }
54
- });