@stackframe/stack 2.3.4 → 2.3.7

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 (262) hide show
  1. package/README.md +2 -2
  2. package/dist/components/card-frame.d.mts +9 -0
  3. package/dist/components/card-frame.d.ts +8 -5
  4. package/dist/components/card-frame.js +58 -23
  5. package/dist/components/credential-sign-in.d.mts +5 -0
  6. package/dist/components/credential-sign-in.d.ts +5 -1
  7. package/dist/components/credential-sign-in.js +109 -41
  8. package/dist/components/credential-sign-up.d.mts +5 -0
  9. package/dist/components/credential-sign-up.d.ts +5 -1
  10. package/dist/components/credential-sign-up.js +140 -62
  11. package/dist/components/forgot-password.d.mts +7 -0
  12. package/dist/components/forgot-password.d.ts +6 -2
  13. package/dist/components/forgot-password.js +83 -26
  14. package/dist/components/form-warning.d.mts +7 -0
  15. package/dist/components/form-warning.d.ts +6 -2
  16. package/dist/components/form-warning.js +34 -8
  17. package/dist/components/magic-link-sign-in.d.mts +5 -0
  18. package/dist/components/magic-link-sign-in.d.ts +5 -1
  19. package/dist/components/magic-link-sign-in.js +89 -31
  20. package/dist/components/message-card.d.mts +10 -0
  21. package/dist/components/message-card.d.ts +8 -4
  22. package/dist/components/message-card.js +45 -6
  23. package/dist/components/oauth-button.d.mts +8 -0
  24. package/dist/components/oauth-button.d.ts +6 -2
  25. package/dist/components/oauth-button.js +142 -63
  26. package/dist/components/oauth-group.d.mts +7 -0
  27. package/dist/components/oauth-group.d.ts +6 -2
  28. package/dist/components/oauth-group.js +46 -8
  29. package/dist/components/password-field.d.mts +5 -0
  30. package/dist/components/password-field.d.ts +5 -3
  31. package/dist/components/password-field.js +111 -41
  32. package/dist/components/password-reset-inner.d.mts +8 -0
  33. package/dist/components/password-reset-inner.d.ts +6 -2
  34. package/dist/components/password-reset-inner.js +120 -58
  35. package/dist/components/redirect-message-card.d.mts +8 -0
  36. package/dist/components/redirect-message-card.d.ts +6 -2
  37. package/dist/components/redirect-message-card.js +110 -58
  38. package/dist/components/separator-with-text.d.mts +7 -0
  39. package/dist/components/separator-with-text.d.ts +6 -2
  40. package/dist/components/separator-with-text.js +35 -5
  41. package/dist/components/user-avatar.d.mts +13 -0
  42. package/dist/components/user-avatar.d.ts +12 -2
  43. package/dist/components/user-avatar.js +34 -8
  44. package/dist/components/user-button.d.mts +15 -0
  45. package/dist/components/user-button.d.ts +14 -3
  46. package/dist/components/user-button.js +160 -24
  47. package/dist/components-core/avatar.d.mts +8 -0
  48. package/dist/components-core/avatar.d.ts +7 -5
  49. package/dist/components-core/avatar.js +73 -18
  50. package/dist/components-core/button.d.mts +12 -0
  51. package/dist/components-core/button.d.ts +8 -6
  52. package/dist/components-core/button.js +177 -113
  53. package/dist/components-core/card.d.mts +8 -0
  54. package/dist/components-core/card.d.ts +4 -2
  55. package/dist/components-core/card.js +73 -22
  56. package/dist/components-core/collapsible.d.mts +8 -0
  57. package/dist/components-core/collapsible.d.ts +8 -6
  58. package/dist/components-core/collapsible.js +48 -5
  59. package/dist/components-core/container.d.mts +8 -0
  60. package/dist/components-core/container.d.ts +5 -3
  61. package/dist/components-core/container.js +61 -11
  62. package/dist/components-core/dropdown.d.mts +15 -0
  63. package/dist/components-core/dropdown.d.ts +10 -8
  64. package/dist/components-core/dropdown.js +108 -36
  65. package/dist/components-core/index.d.mts +59 -0
  66. package/dist/components-core/index.d.ts +52 -38
  67. package/dist/components-core/index.js +144 -45
  68. package/dist/components-core/input.d.mts +6 -0
  69. package/dist/components-core/input.d.ts +5 -3
  70. package/dist/components-core/input.js +97 -28
  71. package/dist/components-core/label.d.mts +6 -0
  72. package/dist/components-core/label.d.ts +5 -3
  73. package/dist/components-core/label.js +65 -15
  74. package/dist/components-core/link.d.mts +10 -0
  75. package/dist/components-core/link.d.ts +7 -6
  76. package/dist/components-core/link.js +72 -18
  77. package/dist/components-core/loading-indicator.d.mts +13 -0
  78. package/dist/components-core/loading-indicator.d.ts +11 -4
  79. package/dist/components-core/loading-indicator.js +46 -6
  80. package/dist/components-core/popover.d.mts +8 -0
  81. package/dist/components-core/popover.d.ts +8 -6
  82. package/dist/components-core/popover.js +72 -16
  83. package/dist/components-core/separator.d.mts +6 -0
  84. package/dist/components-core/separator.d.ts +5 -3
  85. package/dist/components-core/separator.js +66 -16
  86. package/dist/components-core/skeleton.d.mts +7 -0
  87. package/dist/components-core/skeleton.d.ts +7 -0
  88. package/dist/components-core/skeleton.js +86 -0
  89. package/dist/components-core/tabs.d.mts +9 -0
  90. package/dist/components-core/tabs.d.ts +8 -6
  91. package/dist/components-core/tabs.js +87 -20
  92. package/dist/components-core/text.d.mts +10 -0
  93. package/dist/components-core/text.d.ts +5 -3
  94. package/dist/components-core/text.js +95 -40
  95. package/dist/components-core-joy/button.d.mts +6 -0
  96. package/dist/components-core-joy/button.d.ts +6 -2
  97. package/dist/components-core-joy/button.js +86 -28
  98. package/dist/components-core-joy/input.d.mts +5 -0
  99. package/dist/components-core-joy/input.d.ts +5 -2
  100. package/dist/components-core-joy/input.js +51 -6
  101. package/dist/components-core-joy/separator.d.mts +6 -0
  102. package/dist/components-core-joy/separator.d.ts +6 -2
  103. package/dist/components-core-joy/separator.js +50 -6
  104. package/dist/components-core-joy/tabs.d.mts +9 -0
  105. package/dist/components-core-joy/tabs.d.ts +9 -5
  106. package/dist/components-core-joy/tabs.js +62 -16
  107. package/dist/components-core-joy/text.d.mts +9 -0
  108. package/dist/components-core-joy/text.d.ts +6 -3
  109. package/dist/components-core-joy/text.js +68 -28
  110. package/dist/components-page/account-settings.d.mts +7 -0
  111. package/dist/components-page/account-settings.d.ts +6 -2
  112. package/dist/components-page/account-settings.js +213 -81
  113. package/dist/components-page/auth-page.d.mts +8 -0
  114. package/dist/components-page/auth-page.d.ts +6 -2
  115. package/dist/components-page/auth-page.js +79 -19
  116. package/dist/components-page/email-verification.d.mts +8 -0
  117. package/dist/components-page/email-verification.d.ts +6 -2
  118. package/dist/components-page/email-verification.js +65 -28
  119. package/dist/components-page/forgot-password.d.mts +7 -0
  120. package/dist/components-page/forgot-password.d.ts +6 -2
  121. package/dist/components-page/forgot-password.js +64 -20
  122. package/dist/components-page/magic-link-callback.d.mts +8 -0
  123. package/dist/components-page/magic-link-callback.d.ts +6 -2
  124. package/dist/components-page/magic-link-callback.js +72 -34
  125. package/dist/components-page/oauth-callback.d.mts +5 -0
  126. package/dist/components-page/oauth-callback.d.ts +5 -1
  127. package/dist/components-page/oauth-callback.js +52 -16
  128. package/dist/components-page/password-reset.d.mts +8 -0
  129. package/dist/components-page/password-reset.d.ts +6 -2
  130. package/dist/components-page/password-reset.js +70 -34
  131. package/dist/components-page/sign-in.d.mts +7 -0
  132. package/dist/components-page/sign-in.d.ts +6 -2
  133. package/dist/components-page/sign-in.js +41 -5
  134. package/dist/components-page/sign-out.d.mts +5 -0
  135. package/dist/components-page/sign-out.d.ts +5 -1
  136. package/dist/components-page/sign-out.js +47 -11
  137. package/dist/components-page/sign-up.d.mts +7 -0
  138. package/dist/components-page/sign-up.d.ts +6 -2
  139. package/dist/components-page/sign-up.js +41 -5
  140. package/dist/components-page/stack-handler.d.mts +16 -0
  141. package/dist/components-page/stack-handler.d.ts +11 -3
  142. package/dist/components-page/stack-handler.js +102 -64
  143. package/dist/esm/components/card-frame.js +39 -0
  144. package/dist/esm/components/credential-sign-in.js +82 -0
  145. package/dist/esm/components/credential-sign-up.js +114 -0
  146. package/dist/esm/components/forgot-password.js +55 -0
  147. package/dist/esm/components/form-warning.js +15 -0
  148. package/dist/esm/components/magic-link-sign-in.js +61 -0
  149. package/dist/esm/components/message-card.js +16 -0
  150. package/dist/esm/components/oauth-button.js +124 -0
  151. package/dist/esm/components/oauth-group.js +17 -0
  152. package/dist/esm/components/password-field.js +82 -0
  153. package/dist/esm/components/password-reset-inner.js +93 -0
  154. package/dist/esm/components/redirect-message-card.js +83 -0
  155. package/dist/esm/components/separator-with-text.js +16 -0
  156. package/dist/esm/components/user-avatar.js +14 -0
  157. package/dist/esm/components/user-button.js +133 -0
  158. package/dist/esm/components-core/avatar.js +56 -0
  159. package/dist/esm/components-core/button.js +165 -0
  160. package/dist/esm/components-core/card.js +51 -0
  161. package/dist/esm/components-core/collapsible.js +13 -0
  162. package/dist/esm/components-core/container.js +35 -0
  163. package/dist/esm/components-core/dropdown.js +106 -0
  164. package/dist/esm/components-core/index.js +93 -0
  165. package/dist/esm/components-core/input.js +80 -0
  166. package/dist/esm/components-core/label.js +38 -0
  167. package/dist/esm/components-core/link.js +38 -0
  168. package/dist/esm/components-core/loading-indicator.js +27 -0
  169. package/dist/esm/components-core/popover.js +43 -0
  170. package/dist/esm/components-core/separator.js +36 -0
  171. package/dist/esm/components-core/skeleton.js +52 -0
  172. package/dist/esm/components-core/tabs.js +79 -0
  173. package/dist/esm/components-core/text.js +63 -0
  174. package/dist/esm/components-core-joy/button.js +53 -0
  175. package/dist/esm/components-core-joy/input.js +18 -0
  176. package/dist/esm/components-core-joy/separator.js +17 -0
  177. package/dist/esm/components-core-joy/tabs.js +29 -0
  178. package/dist/esm/components-core-joy/text.js +35 -0
  179. package/dist/esm/components-page/account-settings.js +197 -0
  180. package/dist/esm/components-page/auth-page.js +50 -0
  181. package/dist/esm/components-page/email-verification.js +36 -0
  182. package/dist/esm/components-page/forgot-password.js +35 -0
  183. package/dist/esm/components-page/magic-link-callback.js +43 -0
  184. package/dist/esm/components-page/oauth-callback.js +23 -0
  185. package/dist/esm/components-page/password-reset.js +42 -0
  186. package/dist/esm/components-page/sign-in.js +12 -0
  187. package/dist/esm/components-page/sign-out.js +18 -0
  188. package/dist/esm/components-page/sign-up.js +12 -0
  189. package/dist/esm/components-page/stack-handler.js +75 -0
  190. package/dist/esm/index.js +47 -0
  191. package/dist/esm/joy.js +5 -0
  192. package/dist/esm/lib/auth.js +62 -0
  193. package/dist/esm/lib/cookie.js +185 -0
  194. package/dist/esm/lib/hooks.js +29 -0
  195. package/dist/esm/lib/stack-app.js +940 -0
  196. package/dist/esm/providers/component-provider.js +76 -0
  197. package/dist/esm/providers/design-provider.js +36 -0
  198. package/dist/esm/providers/joy-provider.js +35 -0
  199. package/dist/esm/providers/stack-provider-client.js +31 -0
  200. package/dist/esm/providers/stack-provider.js +21 -0
  201. package/dist/esm/providers/styled-components-registry.js +24 -0
  202. package/dist/esm/providers/theme-provider.js +22 -0
  203. package/dist/esm/utils/browser-script.js +25 -0
  204. package/dist/esm/utils/constants.js +34 -0
  205. package/dist/esm/utils/email.js +10 -0
  206. package/dist/esm/utils/next.js +7 -0
  207. package/dist/esm/utils/url.js +21 -0
  208. package/dist/index.d.mts +37 -0
  209. package/dist/index.d.ts +37 -22
  210. package/dist/index.js +106 -21
  211. package/dist/joy.d.mts +16 -0
  212. package/dist/joy.d.ts +16 -1
  213. package/dist/joy.js +30 -1
  214. package/dist/lib/auth.d.mts +11 -0
  215. package/dist/lib/auth.d.ts +8 -4
  216. package/dist/lib/auth.js +83 -57
  217. package/dist/lib/cookie.d.mts +14 -0
  218. package/dist/lib/cookie.d.ts +8 -6
  219. package/dist/lib/cookie.js +217 -45
  220. package/dist/lib/hooks.d.mts +35 -0
  221. package/dist/lib/hooks.d.ts +14 -8
  222. package/dist/lib/hooks.js +53 -28
  223. package/dist/lib/stack-app.d.mts +227 -0
  224. package/dist/lib/stack-app.d.ts +45 -44
  225. package/dist/lib/stack-app.js +937 -861
  226. package/dist/providers/component-provider.d.mts +113 -0
  227. package/dist/providers/component-provider.d.ts +97 -73
  228. package/dist/providers/component-provider.js +92 -56
  229. package/dist/providers/design-provider.d.mts +34 -0
  230. package/dist/providers/design-provider.d.ts +16 -21
  231. package/dist/providers/design-provider.js +57 -64
  232. package/dist/providers/joy-provider.d.mts +36 -0
  233. package/dist/providers/joy-provider.d.ts +30 -14
  234. package/dist/providers/joy-provider.js +58 -30
  235. package/dist/providers/stack-provider-client.d.mts +20 -0
  236. package/dist/providers/stack-provider-client.d.ts +18 -7
  237. package/dist/providers/stack-provider-client.js +65 -12
  238. package/dist/providers/stack-provider.d.mts +14 -0
  239. package/dist/providers/stack-provider.d.ts +13 -5
  240. package/dist/providers/stack-provider.js +41 -5
  241. package/dist/providers/styled-components-registry.d.mts +8 -0
  242. package/dist/providers/styled-components-registry.d.ts +8 -4
  243. package/dist/providers/styled-components-registry.js +43 -17
  244. package/dist/providers/theme-provider.d.mts +22 -0
  245. package/dist/providers/theme-provider.d.ts +21 -9
  246. package/dist/providers/theme-provider.js +55 -19
  247. package/dist/utils/browser-script.d.mts +5 -0
  248. package/dist/utils/browser-script.d.ts +5 -0
  249. package/dist/utils/browser-script.js +50 -0
  250. package/dist/utils/constants.d.mts +48 -0
  251. package/dist/utils/constants.d.ts +11 -9
  252. package/dist/utils/constants.js +66 -21
  253. package/dist/utils/email.d.mts +3 -0
  254. package/dist/utils/email.d.ts +3 -1
  255. package/dist/utils/email.js +44 -6
  256. package/dist/utils/next.d.mts +3 -0
  257. package/dist/utils/next.d.ts +3 -1
  258. package/dist/utils/next.js +31 -3
  259. package/dist/utils/url.d.mts +4 -0
  260. package/dist/utils/url.d.ts +4 -2
  261. package/dist/utils/url.js +44 -13
  262. package/package.json +20 -11
@@ -1,9 +1,46 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as React from 'react';
3
- import * as AvatarPrimitive from '@radix-ui/react-avatar';
4
- import styled from 'styled-components';
5
- import { useDesign } from '..';
6
- const StyledAvatar = styled(AvatarPrimitive.Root) `
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/components-core/avatar.tsx
31
+ var avatar_exports = {};
32
+ __export(avatar_exports, {
33
+ Avatar: () => Avatar,
34
+ AvatarFallback: () => AvatarFallback,
35
+ AvatarImage: () => AvatarImage
36
+ });
37
+ module.exports = __toCommonJS(avatar_exports);
38
+ var React = __toESM(require("react"));
39
+ var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
40
+ var import_styled_components = __toESM(require("styled-components"));
41
+ var import__ = require("..");
42
+ var import_jsx_runtime = require("react/jsx-runtime");
43
+ var StyledAvatar = (0, import_styled_components.default)(AvatarPrimitive.Root)`
7
44
  position: relative;
8
45
  display: flex;
9
46
  height: 2rem;
@@ -12,27 +49,45 @@ const StyledAvatar = styled(AvatarPrimitive.Root) `
12
49
  overflow: hidden;
13
50
  border-radius: 9999px;
14
51
  `;
15
- const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(StyledAvatar, { ref: ref, className: className, ...props })));
16
- Avatar.displayName = 'Avatar';
17
- const StyledAvatarImage = styled(AvatarPrimitive.Image) `
52
+ var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAvatar, { ref, className, ...props }));
53
+ Avatar.displayName = "Avatar";
54
+ var StyledAvatarImage = (0, import_styled_components.default)(AvatarPrimitive.Image)`
18
55
  aspect-ratio: 1 / 1;
19
56
  height: 100%;
20
57
  width: 100%;
21
58
  `;
22
- const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(StyledAvatarImage, { ref: ref, className: className, ...props })));
23
- AvatarImage.displayName = 'AvatarImage';
24
- const StyledAvatarFallback = styled(AvatarPrimitive.Fallback) `
59
+ var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAvatarImage, { ref, className, ...props }));
60
+ AvatarImage.displayName = "AvatarImage";
61
+ var StyledAvatarFallback = (0, import_styled_components.default)(AvatarPrimitive.Fallback)`
25
62
  display: flex;
26
63
  height: 100%;
27
64
  width: 100%;
28
65
  align-items: center;
29
66
  justify-content: center;
30
67
  border-radius: 9999px;
31
- background-color: ${(p) => p.$backgroundColor};
68
+
69
+ background-color: ${({ $colors }) => $colors.light.secondaryColor};
70
+
71
+ html[data-theme='dark'] & {
72
+ background-color: ${({ $colors }) => $colors.dark.secondaryColor};
73
+ }
32
74
  `;
33
- const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
34
- const { colors } = useDesign();
35
- return _jsx(StyledAvatarFallback, { ref: ref, className: className, "$backgroundColor": colors.secondaryColor, ...props });
75
+ var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
76
+ const { colors } = (0, import__.useDesign)();
77
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
+ StyledAvatarFallback,
79
+ {
80
+ ref,
81
+ className,
82
+ $colors: colors,
83
+ ...props
84
+ }
85
+ );
86
+ });
87
+ AvatarFallback.displayName = "AvatarFallback";
88
+ // Annotate the CommonJS export names for ESM import in node:
89
+ 0 && (module.exports = {
90
+ Avatar,
91
+ AvatarFallback,
92
+ AvatarImage
36
93
  });
37
- AvatarFallback.displayName = 'AvatarFallback';
38
- export { Avatar, AvatarImage, AvatarFallback };
@@ -0,0 +1,12 @@
1
+ import React__default from 'react';
2
+
3
+ type ButtonProps = {
4
+ variant?: 'primary' | 'secondary' | 'warning';
5
+ color?: string;
6
+ size?: 'sm' | 'md' | 'lg';
7
+ loading?: boolean;
8
+ onClick?: (() => void) | (() => Promise<void>);
9
+ } & Omit<React__default.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
10
+ declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
11
+
12
+ export { Button, type ButtonProps };
@@ -1,10 +1,12 @@
1
- import React from "react";
2
- export type ButtonProps = {
3
- variant?: 'primary' | 'secondary' | 'warning' | "link";
1
+ import React__default from 'react';
2
+
3
+ type ButtonProps = {
4
+ variant?: 'primary' | 'secondary' | 'warning';
4
5
  color?: string;
5
6
  size?: 'sm' | 'md' | 'lg';
6
7
  loading?: boolean;
7
8
  onClick?: (() => void) | (() => Promise<void>);
8
- } & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
9
- declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
10
- export { Button, };
9
+ } & Omit<React__default.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
10
+ declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
11
+
12
+ export { Button, type ButtonProps };
@@ -1,135 +1,199 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import React from "react";
4
- import { useDesign } from "../providers/design-provider";
5
- import Color from 'color';
6
- import styled from 'styled-components';
7
- import { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES, LINK_COLORS } from "../utils/constants";
8
- import LoadingIndicator from "./loading-indicator";
9
- function getColors({ propsColor, colors, variant, colorMode, }) {
10
- let bgColor;
11
- switch (variant) {
12
- case 'primary': {
13
- bgColor = colors.primaryColor;
14
- break;
15
- }
16
- case 'secondary': {
17
- bgColor = colors.secondaryColor;
18
- break;
19
- }
20
- case 'warning': {
21
- bgColor = '#ff4500';
22
- break;
23
- }
24
- case 'link': {
25
- bgColor = 'transparent';
26
- break;
27
- }
1
+ "use client";
2
+ "use strict";
3
+ "use client";
4
+ var __create = Object.create;
5
+ var __defProp = Object.defineProperty;
6
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __export = (target, all) => {
11
+ for (var name in all)
12
+ __defProp(target, name, { get: all[name], enumerable: true });
13
+ };
14
+ var __copyProps = (to, from, except, desc) => {
15
+ if (from && typeof from === "object" || typeof from === "function") {
16
+ for (let key of __getOwnPropNames(from))
17
+ if (!__hasOwnProp.call(to, key) && key !== except)
18
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
19
+ }
20
+ return to;
21
+ };
22
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
+ // If the importer is in node compatibility mode or this is not an ESM
24
+ // file that has been converted to a CommonJS file using a Babel-
25
+ // compatible transform (i.e. "__esModule" has not been set), then set
26
+ // "default" to the CommonJS "module.exports" for node compatibility.
27
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
28
+ mod
29
+ ));
30
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
31
+
32
+ // src/components-core/button.tsx
33
+ var button_exports = {};
34
+ __export(button_exports, {
35
+ Button: () => Button
36
+ });
37
+ module.exports = __toCommonJS(button_exports);
38
+ var import_react = __toESM(require("react"));
39
+ var import_design_provider = require("../providers/design-provider");
40
+ var import_color = __toESM(require("color"));
41
+ var import_styled_components = __toESM(require("styled-components"));
42
+ var import_constants = require("../utils/constants");
43
+ var import_loading_indicator = __toESM(require("./loading-indicator"));
44
+ var import_jsx_runtime = require("react/jsx-runtime");
45
+ function getColors({
46
+ propsColor,
47
+ colors,
48
+ variant
49
+ }) {
50
+ let bgColor;
51
+ switch (variant) {
52
+ case "primary": {
53
+ bgColor = colors.primaryColor;
54
+ break;
28
55
  }
29
- if (propsColor) {
30
- bgColor = propsColor;
56
+ case "secondary": {
57
+ bgColor = colors.secondaryColor;
58
+ break;
31
59
  }
32
- const c = Color(bgColor);
33
- const pc = Color(colors.primaryColor);
34
- const changeColor = (value) => {
35
- return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
60
+ case "warning": {
61
+ bgColor = "#ff4500";
62
+ break;
63
+ }
64
+ }
65
+ if (propsColor) {
66
+ bgColor = propsColor;
67
+ }
68
+ const c = (0, import_color.default)(bgColor);
69
+ const pc = (0, import_color.default)(colors.primaryColor);
70
+ const changeColor = (value) => {
71
+ return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
72
+ };
73
+ const getAlpha = (alpha) => {
74
+ return (0, import_color.default)(
75
+ pc.isDark() ? "white" : "black"
76
+ ).alpha(alpha).toString();
77
+ };
78
+ if (c.alpha() === 0) {
79
+ return {
80
+ bgColor: "transparent",
81
+ hoverBgColor: getAlpha(0.1),
82
+ activeBgColor: getAlpha(0.2),
83
+ textColor: colors.primaryColor
84
+ };
85
+ } else if (c.isLight()) {
86
+ return {
87
+ bgColor,
88
+ hoverBgColor: changeColor(-10),
89
+ activeBgColor: changeColor(-20),
90
+ textColor: "black"
36
91
  };
37
- const getAlpha = (alpha) => {
38
- return Color(pc.isDark() ? 'white' : 'black').alpha(alpha).toString();
92
+ } else {
93
+ return {
94
+ bgColor,
95
+ hoverBgColor: changeColor(10),
96
+ activeBgColor: changeColor(20),
97
+ textColor: "white"
39
98
  };
40
- if (variant === 'link') {
41
- return {
42
- bgColor: 'transparent',
43
- hoverBgColor: getAlpha(0.1),
44
- activeBgColor: getAlpha(0.2),
45
- textColor: LINK_COLORS[colorMode],
46
- };
99
+ }
100
+ }
101
+ var StyledButton = import_styled_components.default.button`
102
+ border: 0;
103
+ border-radius: ${import_constants.BORDER_RADIUS};
104
+ padding: ${(props) => {
105
+ switch (props.$size) {
106
+ case "sm": {
107
+ return "0rem 0.75rem";
47
108
  }
48
- if (c.alpha() === 0) {
49
- return {
50
- bgColor: 'transparent',
51
- hoverBgColor: getAlpha(0.1),
52
- activeBgColor: getAlpha(0.2),
53
- textColor: colors.primaryColor,
54
- };
109
+ case "md": {
110
+ return "0rem 1rem";
55
111
  }
56
- else if (c.isLight()) {
57
- return {
58
- bgColor,
59
- hoverBgColor: changeColor(-10),
60
- activeBgColor: changeColor(-20),
61
- textColor: 'black',
62
- };
112
+ case "lg": {
113
+ return "0rem 2rem";
63
114
  }
64
- else {
65
- return {
66
- bgColor,
67
- hoverBgColor: changeColor(10),
68
- activeBgColor: changeColor(20),
69
- textColor: 'white',
70
- };
115
+ }
116
+ }};
117
+ height: ${(props) => {
118
+ switch (props.$size) {
119
+ case "sm": {
120
+ return "2rem";
71
121
  }
72
- }
73
- const StyledButton = styled.button `
74
- border: 0;
75
- border-radius: ${BORDER_RADIUS};
76
- padding: ${props => {
77
- switch (props.$size) {
78
- case 'sm': {
79
- return '0rem 0.75rem';
80
- }
81
- case 'md': {
82
- return '0rem 1rem';
83
- }
84
- case 'lg': {
85
- return '0rem 2rem';
86
- }
122
+ case "md": {
123
+ return "2.5rem";
87
124
  }
88
- }};
89
- height: ${props => {
90
- switch (props.$size) {
91
- case 'sm': {
92
- return '2rem';
93
- }
94
- case 'md': {
95
- return '2.5rem';
96
- }
97
- case 'lg': {
98
- return '3rem';
99
- }
125
+ case "lg": {
126
+ return "3rem";
100
127
  }
128
+ }
101
129
  }};
102
- font-size: ${FONT_SIZES.md};
103
- background-color: ${props => props.$bgColor};
104
- color: ${props => props.$textColor};
105
- opacity: ${props => props.disabled ? 0.5 : 1};
130
+ font-family: ${import_constants.FONT_FAMILY};
131
+ font-size: ${import_constants.FONT_SIZES.md};
132
+ opacity: ${(props) => props.disabled ? 0.5 : 1};
106
133
  transition: background-color 0.2s;
107
134
  cursor: pointer;
135
+ position: relative;
136
+ &:disabled {
137
+ cursor: auto;
138
+ opacity: 0.5;
139
+ }
140
+
141
+ background-color: ${(props) => props.$colors.light.bgColor};
142
+ color: ${(props) => props.$colors.light.textColor};
108
143
  &:not([disabled]) {
109
144
  &:active,&:hover:active {
110
- background-color: ${props => props.$activeBgColor};
145
+ background-color: ${(props) => props.$colors.light.activeBgColor};
111
146
  }
112
147
  &:hover {
113
- background-color: ${props => props.$hoverBgColor};
148
+ background-color: ${(props) => props.$colors.light.hoverBgColor};
114
149
  }
115
150
  }
116
- &:disabled {
117
- cursor: auto;
118
- opacity: 0.5;
151
+
152
+ html[data-theme='dark'] & {
153
+ background-color: ${(props) => props.$colors.dark.bgColor};
154
+ color: ${(props) => props.$colors.dark.textColor};
155
+ &:not([disabled]) {
156
+ &:active,&:hover:active {
157
+ background-color: ${(props) => props.$colors.dark.activeBgColor};
158
+ }
159
+ &:hover {
160
+ background-color: ${(props) => props.$colors.dark.hoverBgColor};
161
+ }
162
+ }
119
163
  }
120
- font-family: ${FONT_FAMILY};
121
- text-decoration: ${props => props.$underline ? 'underline' : 'none'};
122
- position: relative;
123
164
  `;
124
- const Button = React.forwardRef(({ variant = 'primary', size = 'md', loading = false, ...props }, ref) => {
125
- const { colors, colorMode } = useDesign();
126
- const buttonColors = getColors({
127
- propsColor: props.color,
128
- colors,
129
- variant,
130
- colorMode,
131
- });
132
- return (_jsxs(StyledButton, { ref: ref, "$size": size, "$bgColor": buttonColors.bgColor, "$hoverBgColor": buttonColors.hoverBgColor, "$activeBgColor": buttonColors.activeBgColor, "$textColor": buttonColors.textColor, "$underline": variant === 'link', "$loading": loading, ...props, children: [_jsx("div", { style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }, children: _jsx(LoadingIndicator, { color: buttonColors.textColor }) }), _jsx("div", { style: { visibility: loading ? 'hidden' : 'visible' }, children: props.children })] }));
165
+ var Button = import_react.default.forwardRef(
166
+ ({
167
+ variant = "primary",
168
+ size = "md",
169
+ loading = false,
170
+ ...props
171
+ }, ref) => {
172
+ const { colors } = (0, import_design_provider.useDesign)();
173
+ const { dark, light } = (0, import_react.useMemo)(() => {
174
+ return {
175
+ dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),
176
+ light: getColors({ propsColor: props.color, colors: colors.light, variant })
177
+ };
178
+ }, [props.color, colors, variant]);
179
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
180
+ StyledButton,
181
+ {
182
+ ref,
183
+ $size: size,
184
+ $loading: loading,
185
+ $colors: { dark, light },
186
+ ...props,
187
+ children: [
188
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", visibility: loading ? "visible" : "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading_indicator.default, { color: { light: light.textColor, dark: dark.textColor } }) }),
189
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { visibility: loading ? "hidden" : "visible" }, children: props.children })
190
+ ]
191
+ }
192
+ );
193
+ }
194
+ );
195
+ Button.displayName = "Button";
196
+ // Annotate the CommonJS export names for ESM import in node:
197
+ 0 && (module.exports = {
198
+ Button
133
199
  });
134
- Button.displayName = 'Button';
135
- export { Button, };
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+
3
+ declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
4
+ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
5
+ declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
6
+ declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
7
+
8
+ export { Card, CardContent, CardFooter, CardHeader };
@@ -1,6 +1,8 @@
1
- import * as React from "react";
1
+ import * as React from 'react';
2
+
2
3
  declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
3
4
  declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
4
5
  declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
5
6
  declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
6
- export { Card, CardHeader, CardFooter, CardContent, };
7
+
8
+ export { Card, CardContent, CardFooter, CardHeader };
@@ -1,37 +1,88 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import * as React from "react";
4
- import styled from "styled-components";
5
- import { useDesign } from "..";
6
- const Card = React.forwardRef((props, ref) => {
7
- const { colors } = useDesign();
8
- return _jsx(StyledCard, { ref: ref, ...props, backgroundColor: colors.backgroundColor, borderColor: colors.neutralColor });
1
+ "use client";
2
+ "use strict";
3
+ "use client";
4
+ var __create = Object.create;
5
+ var __defProp = Object.defineProperty;
6
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __export = (target, all) => {
11
+ for (var name in all)
12
+ __defProp(target, name, { get: all[name], enumerable: true });
13
+ };
14
+ var __copyProps = (to, from, except, desc) => {
15
+ if (from && typeof from === "object" || typeof from === "function") {
16
+ for (let key of __getOwnPropNames(from))
17
+ if (!__hasOwnProp.call(to, key) && key !== except)
18
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
19
+ }
20
+ return to;
21
+ };
22
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
+ // If the importer is in node compatibility mode or this is not an ESM
24
+ // file that has been converted to a CommonJS file using a Babel-
25
+ // compatible transform (i.e. "__esModule" has not been set), then set
26
+ // "default" to the CommonJS "module.exports" for node compatibility.
27
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
28
+ mod
29
+ ));
30
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
31
+
32
+ // src/components-core/card.tsx
33
+ var card_exports = {};
34
+ __export(card_exports, {
35
+ Card: () => Card,
36
+ CardContent: () => CardContent,
37
+ CardFooter: () => CardFooter,
38
+ CardHeader: () => CardHeader
9
39
  });
10
- Card.displayName = "Card";
11
- const CardHeader = React.forwardRef((props, ref) => (_jsx(StyledCardHeader, { ref: ref, ...props })));
12
- CardHeader.displayName = "CardHeader";
13
- const CardContent = React.forwardRef((props, ref) => (_jsx(StyledCardContent, { ref: ref, ...props })));
14
- CardContent.displayName = "CardContent";
15
- const CardFooter = React.forwardRef((props, ref) => (_jsx(StyledCardFooter, { ref: ref, ...props })));
16
- CardFooter.displayName = "CardFooter";
17
- const StyledCard = styled.div `
40
+ module.exports = __toCommonJS(card_exports);
41
+ var React = __toESM(require("react"));
42
+ var import_styled_components = __toESM(require("styled-components"));
43
+ var import__ = require("..");
44
+ var import_jsx_runtime = require("react/jsx-runtime");
45
+ var StyledCard = import_styled_components.default.div`
18
46
  border-radius: 0.5rem;
19
- border: 1px solid ${props => props.borderColor};
20
- background-color: ${props => props.backgroundColor};
21
47
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
22
48
  padding: 1.5rem;
49
+
50
+ border: 1px solid ${(props) => props.$colors.light.neutralColor};
51
+ background-color: ${(props) => props.$colors.light.backgroundColor};
52
+
53
+ html[data-theme='dark'] & {
54
+ border-color: ${(props) => props.$colors.dark.neutralColor};
55
+ background-color: ${(props) => props.$colors.dark.backgroundColor};
56
+ }
23
57
  `;
24
- const StyledCardHeader = styled.div `
58
+ var StyledCardHeader = import_styled_components.default.div`
25
59
  display: flex;
26
60
  flex-direction: column;
27
61
  gap: 0.375rem;
28
62
  margin-bottom: 1.5rem;
29
63
  `;
30
- const StyledCardContent = styled.div `
64
+ var StyledCardContent = import_styled_components.default.div`
31
65
  `;
32
- const StyledCardFooter = styled.div `
66
+ var StyledCardFooter = import_styled_components.default.div`
33
67
  display: flex;
34
68
  align-items: center;
35
69
  margin-top: 1.5rem;
36
70
  `;
37
- export { Card, CardHeader, CardFooter, CardContent, };
71
+ var Card = React.forwardRef((props, ref) => {
72
+ const { colors } = (0, import__.useDesign)();
73
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCard, { ref, ...props, $colors: colors });
74
+ });
75
+ Card.displayName = "Card";
76
+ var CardHeader = React.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardHeader, { ref, ...props }));
77
+ CardHeader.displayName = "CardHeader";
78
+ var CardContent = React.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardContent, { ref, ...props }));
79
+ CardContent.displayName = "CardContent";
80
+ var CardFooter = React.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardFooter, { ref, ...props }));
81
+ CardFooter.displayName = "CardFooter";
82
+ // Annotate the CommonJS export names for ESM import in node:
83
+ 0 && (module.exports = {
84
+ Card,
85
+ CardContent,
86
+ CardFooter,
87
+ CardHeader
88
+ });
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+ import * as _radix_ui_react_collapsible from '@radix-ui/react-collapsible';
3
+
4
+ declare const Collapsible: React.ForwardRefExoticComponent<_radix_ui_react_collapsible.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
5
+ declare const CollapsibleTrigger: React.ForwardRefExoticComponent<_radix_ui_react_collapsible.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
6
+ declare const CollapsibleContent: React.ForwardRefExoticComponent<_radix_ui_react_collapsible.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
7
+
8
+ export { Collapsible, CollapsibleContent, CollapsibleTrigger };
@@ -1,6 +1,8 @@
1
- /// <reference types="react" />
2
- import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
3
- declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
4
- declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
5
- declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
6
- export { Collapsible, CollapsibleTrigger, CollapsibleContent };
1
+ import * as React from 'react';
2
+ import * as _radix_ui_react_collapsible from '@radix-ui/react-collapsible';
3
+
4
+ declare const Collapsible: React.ForwardRefExoticComponent<_radix_ui_react_collapsible.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
5
+ declare const CollapsibleTrigger: React.ForwardRefExoticComponent<_radix_ui_react_collapsible.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
6
+ declare const CollapsibleContent: React.ForwardRefExoticComponent<_radix_ui_react_collapsible.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
7
+
8
+ export { Collapsible, CollapsibleContent, CollapsibleTrigger };