@luxfi/ui 5.6.0 → 6.1.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 (155) hide show
  1. package/dist/components/Badge.d.ts.map +1 -0
  2. package/dist/components/Badge.js +91 -0
  3. package/dist/components/Button.d.ts.map +1 -0
  4. package/dist/components/Button.js +137 -0
  5. package/dist/components/Card.d.ts.map +1 -0
  6. package/dist/components/Card.js +86 -0
  7. package/dist/components/IconButton.d.ts.map +1 -0
  8. package/dist/components/IconButton.js +64 -0
  9. package/dist/components/Input.d.ts.map +1 -0
  10. package/dist/components/Input.js +71 -0
  11. package/dist/components/Modal.d.ts.map +1 -0
  12. package/dist/components/Modal.js +98 -0
  13. package/dist/components/Skeleton.d.ts.map +1 -0
  14. package/dist/components/Skeleton.js +44 -0
  15. package/dist/components/Spinner.d.ts.map +1 -0
  16. package/dist/components/Spinner.js +42 -0
  17. package/dist/components/Switch.d.ts.map +1 -0
  18. package/dist/components/Switch.js +10 -0
  19. package/dist/components/TokenLogo.d.ts.map +1 -0
  20. package/dist/components/TokenLogo.js +57 -0
  21. package/dist/components/Tooltip.d.ts.map +1 -0
  22. package/dist/components/Tooltip.js +34 -0
  23. package/dist/components/index.d.ts.map +1 -0
  24. package/dist/components/index.js +19 -0
  25. package/dist/index.d.ts.map +1 -0
  26. package/dist/index.js +35 -5618
  27. package/dist/theme/index.d.ts.map +1 -0
  28. package/dist/theme/index.js +6 -0
  29. package/dist/theme/themes.d.ts.map +1 -0
  30. package/dist/theme/themes.js +73 -0
  31. package/dist/theme/tokens.d.ts.map +1 -0
  32. package/dist/theme/tokens.js +101 -0
  33. package/package.json +81 -278
  34. package/dist/accordion.cjs +0 -213
  35. package/dist/accordion.js +0 -186
  36. package/dist/alert.cjs +0 -553
  37. package/dist/alert.js +0 -531
  38. package/dist/avatar.cjs +0 -149
  39. package/dist/avatar.js +0 -125
  40. package/dist/badge.cjs +0 -611
  41. package/dist/badge.js +0 -589
  42. package/dist/button.cjs +0 -689
  43. package/dist/button.js +0 -664
  44. package/dist/checkbox.cjs +0 -265
  45. package/dist/checkbox.js +0 -241
  46. package/dist/close-button.cjs +0 -73
  47. package/dist/close-button.js +0 -51
  48. package/dist/collapsible.cjs +0 -702
  49. package/dist/collapsible.js +0 -679
  50. package/dist/color-mode.cjs +0 -96
  51. package/dist/color-mode.js +0 -72
  52. package/dist/dialog.cjs +0 -279
  53. package/dist/dialog.js +0 -246
  54. package/dist/drawer.cjs +0 -207
  55. package/dist/drawer.js +0 -175
  56. package/dist/empty-state.cjs +0 -93
  57. package/dist/empty-state.js +0 -71
  58. package/dist/field.cjs +0 -183
  59. package/dist/field.js +0 -160
  60. package/dist/heading.cjs +0 -46
  61. package/dist/heading.js +0 -40
  62. package/dist/icon-button.cjs +0 -491
  63. package/dist/icon-button.js +0 -470
  64. package/dist/image.cjs +0 -572
  65. package/dist/image.js +0 -551
  66. package/dist/index.cjs +0 -5779
  67. package/dist/input-group.cjs +0 -155
  68. package/dist/input-group.js +0 -133
  69. package/dist/input.cjs +0 -65
  70. package/dist/input.js +0 -59
  71. package/dist/link.cjs +0 -630
  72. package/dist/link.js +0 -606
  73. package/dist/menu.cjs +0 -305
  74. package/dist/menu.js +0 -269
  75. package/dist/pin-input.cjs +0 -182
  76. package/dist/pin-input.js +0 -160
  77. package/dist/popover.cjs +0 -327
  78. package/dist/popover.js +0 -294
  79. package/dist/progress-circle.cjs +0 -152
  80. package/dist/progress-circle.js +0 -128
  81. package/dist/progress.cjs +0 -117
  82. package/dist/progress.js +0 -94
  83. package/dist/provider.cjs +0 -62
  84. package/dist/provider.js +0 -40
  85. package/dist/radio.cjs +0 -177
  86. package/dist/radio.js +0 -153
  87. package/dist/rating.cjs +0 -80
  88. package/dist/rating.js +0 -58
  89. package/dist/select.cjs +0 -791
  90. package/dist/select.js +0 -757
  91. package/dist/separator.cjs +0 -57
  92. package/dist/separator.js +0 -51
  93. package/dist/skeleton.cjs +0 -370
  94. package/dist/skeleton.js +0 -346
  95. package/dist/slider.cjs +0 -138
  96. package/dist/slider.js +0 -115
  97. package/dist/switch.cjs +0 -163
  98. package/dist/switch.js +0 -140
  99. package/dist/table.cjs +0 -1044
  100. package/dist/table.js +0 -1013
  101. package/dist/tabs.cjs +0 -240
  102. package/dist/tabs.js +0 -213
  103. package/dist/tag.cjs +0 -651
  104. package/dist/tag.js +0 -628
  105. package/dist/textarea.cjs +0 -65
  106. package/dist/textarea.js +0 -59
  107. package/dist/toaster.cjs +0 -99
  108. package/dist/toaster.js +0 -96
  109. package/dist/tooltip.cjs +0 -171
  110. package/dist/tooltip.js +0 -148
  111. package/dist/utils.cjs +0 -11
  112. package/dist/utils.js +0 -9
  113. package/src/accordion.tsx +0 -285
  114. package/src/alert.tsx +0 -221
  115. package/src/avatar.tsx +0 -174
  116. package/src/badge.tsx +0 -158
  117. package/src/button.tsx +0 -411
  118. package/src/checkbox.tsx +0 -307
  119. package/src/close-button.tsx +0 -51
  120. package/src/collapsible.tsx +0 -126
  121. package/src/color-mode.tsx +0 -125
  122. package/src/dialog.tsx +0 -356
  123. package/src/drawer.tsx +0 -186
  124. package/src/empty-state.tsx +0 -97
  125. package/src/field.tsx +0 -202
  126. package/src/heading.tsx +0 -55
  127. package/src/icon-button.tsx +0 -192
  128. package/src/image.tsx +0 -280
  129. package/src/index.ts +0 -192
  130. package/src/input-group.tsx +0 -159
  131. package/src/input.tsx +0 -60
  132. package/src/link.tsx +0 -326
  133. package/src/menu.tsx +0 -471
  134. package/src/pin-input.tsx +0 -187
  135. package/src/popover.tsx +0 -400
  136. package/src/progress-circle.tsx +0 -180
  137. package/src/progress.tsx +0 -109
  138. package/src/provider.tsx +0 -12
  139. package/src/radio.tsx +0 -175
  140. package/src/rating.tsx +0 -79
  141. package/src/select.tsx +0 -696
  142. package/src/separator.tsx +0 -59
  143. package/src/skeleton.tsx +0 -302
  144. package/src/slider.tsx +0 -152
  145. package/src/switch.tsx +0 -158
  146. package/src/table.tsx +0 -621
  147. package/src/tabs.tsx +0 -354
  148. package/src/tag.tsx +0 -159
  149. package/src/textarea.tsx +0 -60
  150. package/src/toaster.tsx +0 -117
  151. package/src/tokens.css +0 -438
  152. package/src/tooltip.tsx +0 -184
  153. package/src/utils/cn.ts +0 -7
  154. package/src/utils.ts +0 -6
  155. package/tokens.css +0 -438
@@ -1,96 +0,0 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var React = require('react');
5
- var jsxRuntime = require('react/jsx-runtime');
6
-
7
- function _interopNamespace(e) {
8
- if (e && e.__esModule) return e;
9
- var n = Object.create(null);
10
- if (e) {
11
- Object.keys(e).forEach(function (k) {
12
- if (k !== 'default') {
13
- var d = Object.getOwnPropertyDescriptor(e, k);
14
- Object.defineProperty(n, k, d.get ? d : {
15
- enumerable: true,
16
- get: function () { return e[k]; }
17
- });
18
- }
19
- });
20
- }
21
- n.default = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
-
27
- var ColorModeContext = React__namespace.createContext(void 0);
28
- function ColorModeProvider(props) {
29
- const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
30
- const [internalMode, setInternalMode] = React__namespace.useState(() => {
31
- if (controlledValue === "dark" || controlledValue === "light") {
32
- return controlledValue;
33
- }
34
- if (typeof document !== "undefined") {
35
- if (document.documentElement.classList.contains("dark")) return "dark";
36
- }
37
- return defaultTheme === "dark" ? "dark" : "light";
38
- });
39
- const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
40
- const setColorMode = React__namespace.useCallback((mode) => {
41
- const resolved = mode === "dark" ? "dark" : "light";
42
- setInternalMode(resolved);
43
- onValueChange?.(resolved);
44
- if (typeof document !== "undefined") {
45
- document.documentElement.classList.toggle("dark", resolved === "dark");
46
- document.documentElement.classList.toggle("light", resolved === "light");
47
- }
48
- }, [onValueChange]);
49
- const toggleColorMode = React__namespace.useCallback(() => {
50
- setColorMode(colorMode === "dark" ? "light" : "dark");
51
- }, [colorMode, setColorMode]);
52
- const ctx = React__namespace.useMemo(
53
- () => ({ colorMode, setColorMode, toggleColorMode }),
54
- [colorMode, setColorMode, toggleColorMode]
55
- );
56
- return /* @__PURE__ */ jsxRuntime.jsx(ColorModeContext.Provider, { value: ctx, children });
57
- }
58
- function useColorMode() {
59
- const ctx = React__namespace.useContext(ColorModeContext);
60
- if (!ctx) {
61
- const [mode, setMode] = React__namespace.useState(() => {
62
- if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
63
- return "dark";
64
- }
65
- return "light";
66
- });
67
- return {
68
- colorMode: mode,
69
- setColorMode: (m) => {
70
- const resolved = m === "dark" ? "dark" : "light";
71
- setMode(resolved);
72
- if (typeof document !== "undefined") {
73
- document.documentElement.classList.toggle("dark", resolved === "dark");
74
- document.documentElement.classList.toggle("light", resolved === "light");
75
- }
76
- },
77
- toggleColorMode: () => {
78
- const next = mode === "dark" ? "light" : "dark";
79
- setMode(next);
80
- if (typeof document !== "undefined") {
81
- document.documentElement.classList.toggle("dark", next === "dark");
82
- document.documentElement.classList.toggle("light", next === "light");
83
- }
84
- }
85
- };
86
- }
87
- return ctx;
88
- }
89
- function useColorModeValue(light, dark) {
90
- const { colorMode } = useColorMode();
91
- return colorMode === "dark" ? dark : light;
92
- }
93
-
94
- exports.ColorModeProvider = ColorModeProvider;
95
- exports.useColorMode = useColorMode;
96
- exports.useColorModeValue = useColorModeValue;
@@ -1,72 +0,0 @@
1
- "use client";
2
- import * as React from 'react';
3
- import { jsx } from 'react/jsx-runtime';
4
-
5
- var ColorModeContext = React.createContext(void 0);
6
- function ColorModeProvider(props) {
7
- const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
8
- const [internalMode, setInternalMode] = React.useState(() => {
9
- if (controlledValue === "dark" || controlledValue === "light") {
10
- return controlledValue;
11
- }
12
- if (typeof document !== "undefined") {
13
- if (document.documentElement.classList.contains("dark")) return "dark";
14
- }
15
- return defaultTheme === "dark" ? "dark" : "light";
16
- });
17
- const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
18
- const setColorMode = React.useCallback((mode) => {
19
- const resolved = mode === "dark" ? "dark" : "light";
20
- setInternalMode(resolved);
21
- onValueChange?.(resolved);
22
- if (typeof document !== "undefined") {
23
- document.documentElement.classList.toggle("dark", resolved === "dark");
24
- document.documentElement.classList.toggle("light", resolved === "light");
25
- }
26
- }, [onValueChange]);
27
- const toggleColorMode = React.useCallback(() => {
28
- setColorMode(colorMode === "dark" ? "light" : "dark");
29
- }, [colorMode, setColorMode]);
30
- const ctx = React.useMemo(
31
- () => ({ colorMode, setColorMode, toggleColorMode }),
32
- [colorMode, setColorMode, toggleColorMode]
33
- );
34
- return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: ctx, children });
35
- }
36
- function useColorMode() {
37
- const ctx = React.useContext(ColorModeContext);
38
- if (!ctx) {
39
- const [mode, setMode] = React.useState(() => {
40
- if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
41
- return "dark";
42
- }
43
- return "light";
44
- });
45
- return {
46
- colorMode: mode,
47
- setColorMode: (m) => {
48
- const resolved = m === "dark" ? "dark" : "light";
49
- setMode(resolved);
50
- if (typeof document !== "undefined") {
51
- document.documentElement.classList.toggle("dark", resolved === "dark");
52
- document.documentElement.classList.toggle("light", resolved === "light");
53
- }
54
- },
55
- toggleColorMode: () => {
56
- const next = mode === "dark" ? "light" : "dark";
57
- setMode(next);
58
- if (typeof document !== "undefined") {
59
- document.documentElement.classList.toggle("dark", next === "dark");
60
- document.documentElement.classList.toggle("light", next === "light");
61
- }
62
- }
63
- };
64
- }
65
- return ctx;
66
- }
67
- function useColorModeValue(light, dark) {
68
- const { colorMode } = useColorMode();
69
- return colorMode === "dark" ? dark : light;
70
- }
71
-
72
- export { ColorModeProvider, useColorMode, useColorModeValue };
package/dist/dialog.cjs DELETED
@@ -1,279 +0,0 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var RadixDialog = require('@radix-ui/react-dialog');
5
- var React2 = require('react');
6
- var clsx = require('clsx');
7
- var tailwindMerge = require('tailwind-merge');
8
- var jsxRuntime = require('react/jsx-runtime');
9
-
10
- function _interopNamespace(e) {
11
- if (e && e.__esModule) return e;
12
- var n = Object.create(null);
13
- if (e) {
14
- Object.keys(e).forEach(function (k) {
15
- if (k !== 'default') {
16
- var d = Object.getOwnPropertyDescriptor(e, k);
17
- Object.defineProperty(n, k, d.get ? d : {
18
- enumerable: true,
19
- get: function () { return e[k]; }
20
- });
21
- }
22
- });
23
- }
24
- n.default = e;
25
- return Object.freeze(n);
26
- }
27
-
28
- var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
29
- var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
30
-
31
- // src/dialog.tsx
32
- function cn(...inputs) {
33
- return tailwindMerge.twMerge(clsx.clsx(inputs));
34
- }
35
- var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
36
- var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
37
- const { variant: _variant, size: _size, className, children, ...rest } = props;
38
- return /* @__PURE__ */ jsxRuntime.jsx(
39
- "button",
40
- {
41
- type: "button",
42
- "aria-label": "Close",
43
- ref,
44
- className: cn(
45
- "inline-flex items-center justify-center",
46
- "size-5 min-w-0 shrink-0 p-0",
47
- "rounded-sm border-0 overflow-hidden",
48
- "bg-transparent text-[var(--closeButton-fg,currentColor)]",
49
- "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
50
- "disabled:opacity-40",
51
- "cursor-pointer",
52
- className
53
- ),
54
- ...rest,
55
- children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
56
- "svg",
57
- {
58
- className: "size-5",
59
- viewBox: "0 0 20 20",
60
- fill: "none",
61
- "aria-hidden": "true",
62
- children: /* @__PURE__ */ jsxRuntime.jsx(
63
- "path",
64
- {
65
- d: CLOSE_ICON_PATH,
66
- fill: "currentColor"
67
- }
68
- )
69
- }
70
- )
71
- }
72
- );
73
- });
74
- function BackToButton({ onClick }) {
75
- return /* @__PURE__ */ jsxRuntime.jsx(
76
- "button",
77
- {
78
- type: "button",
79
- onClick,
80
- className: "inline-flex items-center justify-center size-8 rounded-md bg-transparent text-current hover:bg-[var(--color-button-subtle-bg)] cursor-pointer",
81
- "aria-label": "Go back",
82
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-5", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
83
- }
84
- );
85
- }
86
- var DialogContext = React2__namespace.createContext({ size: "md" });
87
- function useDialogContext() {
88
- return React2__namespace.useContext(DialogContext);
89
- }
90
- var CONTENT_SIZE_MAP = {
91
- sm: "max-w-[400px]",
92
- md: "max-w-[728px]",
93
- full: "max-w-[100vw] min-h-dvh rounded-none [--dialog-margin:0]",
94
- cover: "w-full h-full [--dialog-margin:0]"
95
- };
96
- function sizeClasses(size) {
97
- if (typeof size === "string") {
98
- return CONTENT_SIZE_MAP[size];
99
- }
100
- const parts = [];
101
- const small = size.base ?? size.lgDown;
102
- if (small) {
103
- parts.push(CONTENT_SIZE_MAP[small]);
104
- }
105
- if (size.lg) {
106
- const lgClasses = CONTENT_SIZE_MAP[size.lg].split(" ").map((c) => `lg:${c}`).join(" ");
107
- parts.push(lgClasses);
108
- }
109
- return parts.join(" ");
110
- }
111
- var DialogRoot = ({
112
- children,
113
- open,
114
- defaultOpen,
115
- onOpenChange,
116
- size = "md",
117
- modal = true
118
- // motionPreset is intentionally unused — kept for API compat
119
- }) => {
120
- const handleOpenChange = React2__namespace.useCallback(
121
- (nextOpen) => {
122
- onOpenChange?.({ open: nextOpen });
123
- },
124
- [onOpenChange]
125
- );
126
- const ctx = React2__namespace.useMemo(() => ({ size }), [size]);
127
- return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
128
- RadixDialog__namespace.Root,
129
- {
130
- open,
131
- defaultOpen,
132
- onOpenChange: handleOpenChange,
133
- modal,
134
- children
135
- }
136
- ) });
137
- };
138
- var DialogContent = React2__namespace.forwardRef(function DialogContent2(props, ref) {
139
- const {
140
- children,
141
- portalled = true,
142
- portalRef,
143
- backdrop = true,
144
- className,
145
- paddingTop: _paddingTop,
146
- style: styleProp,
147
- ...rest
148
- } = props;
149
- const contentInlineStyle = {
150
- ...styleProp,
151
- ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
152
- };
153
- const { size } = useDialogContext();
154
- let portalProps;
155
- if (!portalled) {
156
- portalProps = { container: void 0 };
157
- } else if (portalRef) {
158
- portalProps = { container: portalRef.current };
159
- } else {
160
- portalProps = {};
161
- }
162
- const Wrapper = portalled ? RadixDialog__namespace.Portal : React2__namespace.Fragment;
163
- const wrapperProps = portalled ? portalProps : {};
164
- return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { ...wrapperProps, children: [
165
- backdrop && /* @__PURE__ */ jsxRuntime.jsx(
166
- RadixDialog__namespace.Overlay,
167
- {
168
- className: "fixed inset-0 z-[1400] bg-black/80"
169
- }
170
- ),
171
- /* @__PURE__ */ jsxRuntime.jsx(
172
- "div",
173
- {
174
- className: cn(
175
- "fixed inset-0 z-[1400] flex w-screen h-dvh",
176
- "items-start lg:items-center justify-center",
177
- "overflow-hidden"
178
- ),
179
- children: /* @__PURE__ */ jsxRuntime.jsx(
180
- RadixDialog__namespace.Content,
181
- {
182
- ref,
183
- className: cn(
184
- // Base content styles
185
- "relative flex flex-col w-full p-6 outline-none text-base",
186
- "bg-dialog-bg text-dialog-fg shadow-lg rounded-xl",
187
- "my-[var(--dialog-margin,var(--dialog-base-margin))]",
188
- "mx-auto [--dialog-base-margin:4rem] lg:[--dialog-base-margin:auto]",
189
- "max-h-[calc(100%-7.5rem)] overflow-hidden",
190
- // Size variant
191
- sizeClasses(size),
192
- className
193
- ),
194
- style: Object.keys(contentInlineStyle).length > 0 ? contentInlineStyle : void 0,
195
- ...rest,
196
- children
197
- }
198
- )
199
- }
200
- )
201
- ] });
202
- });
203
- var DialogCloseTrigger = React2__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
204
- const { className, ...rest } = props;
205
- return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
206
- });
207
- var DialogHeader = React2__namespace.forwardRef(function DialogHeader2(props, ref) {
208
- const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
209
- const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsxRuntime.jsx(BackToButton, { onClick: onBackToClick }) : void 0);
210
- return /* @__PURE__ */ jsxRuntime.jsxs(
211
- "div",
212
- {
213
- ref,
214
- className: cn(
215
- "flex-none p-0 mb-2 flex items-center gap-x-2 min-h-[40px]",
216
- className
217
- ),
218
- ...rest,
219
- children: [
220
- startElement,
221
- /* @__PURE__ */ jsxRuntime.jsx(
222
- RadixDialog__namespace.Title,
223
- {
224
- className: cn(
225
- "text-base lg:text-lg font-medium",
226
- "whitespace-nowrap overflow-hidden text-ellipsis"
227
- ),
228
- children
229
- }
230
- ),
231
- /* @__PURE__ */ jsxRuntime.jsx(DialogCloseTrigger, { className: "ml-auto" })
232
- ]
233
- }
234
- );
235
- });
236
- var DialogBody = React2__namespace.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
237
- const bodyStyle = {
238
- ...styleProp,
239
- ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
240
- ...display ? { display } : {},
241
- ...flexDir ? { flexDirection: flexDir } : {}
242
- };
243
- return /* @__PURE__ */ jsxRuntime.jsx(
244
- "div",
245
- {
246
- ref,
247
- className: cn("flex-1 p-0 overflow-auto", className),
248
- style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
249
- ...props
250
- }
251
- );
252
- });
253
- var DialogFooter = React2__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
254
- return /* @__PURE__ */ jsxRuntime.jsx(
255
- "div",
256
- {
257
- ref,
258
- className: cn("flex items-center justify-start gap-6 p-0 mt-6", className),
259
- ...props
260
- }
261
- );
262
- });
263
- var DialogBackdrop = RadixDialog__namespace.Overlay;
264
- var DialogTitle = RadixDialog__namespace.Title;
265
- var DialogDescription = RadixDialog__namespace.Description;
266
- var DialogTrigger = RadixDialog__namespace.Trigger;
267
- var DialogActionTrigger = RadixDialog__namespace.Close;
268
-
269
- exports.DialogActionTrigger = DialogActionTrigger;
270
- exports.DialogBackdrop = DialogBackdrop;
271
- exports.DialogBody = DialogBody;
272
- exports.DialogCloseTrigger = DialogCloseTrigger;
273
- exports.DialogContent = DialogContent;
274
- exports.DialogDescription = DialogDescription;
275
- exports.DialogFooter = DialogFooter;
276
- exports.DialogHeader = DialogHeader;
277
- exports.DialogRoot = DialogRoot;
278
- exports.DialogTitle = DialogTitle;
279
- exports.DialogTrigger = DialogTrigger;
package/dist/dialog.js DELETED
@@ -1,246 +0,0 @@
1
- "use client";
2
- import * as RadixDialog from '@radix-ui/react-dialog';
3
- import * as React2 from 'react';
4
- import { clsx } from 'clsx';
5
- import { twMerge } from 'tailwind-merge';
6
- import { jsx, jsxs } from 'react/jsx-runtime';
7
-
8
- // src/dialog.tsx
9
- function cn(...inputs) {
10
- return twMerge(clsx(inputs));
11
- }
12
- var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
13
- var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
14
- const { variant: _variant, size: _size, className, children, ...rest } = props;
15
- return /* @__PURE__ */ jsx(
16
- "button",
17
- {
18
- type: "button",
19
- "aria-label": "Close",
20
- ref,
21
- className: cn(
22
- "inline-flex items-center justify-center",
23
- "size-5 min-w-0 shrink-0 p-0",
24
- "rounded-sm border-0 overflow-hidden",
25
- "bg-transparent text-[var(--closeButton-fg,currentColor)]",
26
- "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
27
- "disabled:opacity-40",
28
- "cursor-pointer",
29
- className
30
- ),
31
- ...rest,
32
- children: children ?? /* @__PURE__ */ jsx(
33
- "svg",
34
- {
35
- className: "size-5",
36
- viewBox: "0 0 20 20",
37
- fill: "none",
38
- "aria-hidden": "true",
39
- children: /* @__PURE__ */ jsx(
40
- "path",
41
- {
42
- d: CLOSE_ICON_PATH,
43
- fill: "currentColor"
44
- }
45
- )
46
- }
47
- )
48
- }
49
- );
50
- });
51
- function BackToButton({ onClick }) {
52
- return /* @__PURE__ */ jsx(
53
- "button",
54
- {
55
- type: "button",
56
- onClick,
57
- className: "inline-flex items-center justify-center size-8 rounded-md bg-transparent text-current hover:bg-[var(--color-button-subtle-bg)] cursor-pointer",
58
- "aria-label": "Go back",
59
- children: /* @__PURE__ */ jsx("svg", { className: "size-5", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
60
- }
61
- );
62
- }
63
- var DialogContext = React2.createContext({ size: "md" });
64
- function useDialogContext() {
65
- return React2.useContext(DialogContext);
66
- }
67
- var CONTENT_SIZE_MAP = {
68
- sm: "max-w-[400px]",
69
- md: "max-w-[728px]",
70
- full: "max-w-[100vw] min-h-dvh rounded-none [--dialog-margin:0]",
71
- cover: "w-full h-full [--dialog-margin:0]"
72
- };
73
- function sizeClasses(size) {
74
- if (typeof size === "string") {
75
- return CONTENT_SIZE_MAP[size];
76
- }
77
- const parts = [];
78
- const small = size.base ?? size.lgDown;
79
- if (small) {
80
- parts.push(CONTENT_SIZE_MAP[small]);
81
- }
82
- if (size.lg) {
83
- const lgClasses = CONTENT_SIZE_MAP[size.lg].split(" ").map((c) => `lg:${c}`).join(" ");
84
- parts.push(lgClasses);
85
- }
86
- return parts.join(" ");
87
- }
88
- var DialogRoot = ({
89
- children,
90
- open,
91
- defaultOpen,
92
- onOpenChange,
93
- size = "md",
94
- modal = true
95
- // motionPreset is intentionally unused — kept for API compat
96
- }) => {
97
- const handleOpenChange = React2.useCallback(
98
- (nextOpen) => {
99
- onOpenChange?.({ open: nextOpen });
100
- },
101
- [onOpenChange]
102
- );
103
- const ctx = React2.useMemo(() => ({ size }), [size]);
104
- return /* @__PURE__ */ jsx(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
105
- RadixDialog.Root,
106
- {
107
- open,
108
- defaultOpen,
109
- onOpenChange: handleOpenChange,
110
- modal,
111
- children
112
- }
113
- ) });
114
- };
115
- var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
116
- const {
117
- children,
118
- portalled = true,
119
- portalRef,
120
- backdrop = true,
121
- className,
122
- paddingTop: _paddingTop,
123
- style: styleProp,
124
- ...rest
125
- } = props;
126
- const contentInlineStyle = {
127
- ...styleProp,
128
- ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
129
- };
130
- const { size } = useDialogContext();
131
- let portalProps;
132
- if (!portalled) {
133
- portalProps = { container: void 0 };
134
- } else if (portalRef) {
135
- portalProps = { container: portalRef.current };
136
- } else {
137
- portalProps = {};
138
- }
139
- const Wrapper = portalled ? RadixDialog.Portal : React2.Fragment;
140
- const wrapperProps = portalled ? portalProps : {};
141
- return /* @__PURE__ */ jsxs(Wrapper, { ...wrapperProps, children: [
142
- backdrop && /* @__PURE__ */ jsx(
143
- RadixDialog.Overlay,
144
- {
145
- className: "fixed inset-0 z-[1400] bg-black/80"
146
- }
147
- ),
148
- /* @__PURE__ */ jsx(
149
- "div",
150
- {
151
- className: cn(
152
- "fixed inset-0 z-[1400] flex w-screen h-dvh",
153
- "items-start lg:items-center justify-center",
154
- "overflow-hidden"
155
- ),
156
- children: /* @__PURE__ */ jsx(
157
- RadixDialog.Content,
158
- {
159
- ref,
160
- className: cn(
161
- // Base content styles
162
- "relative flex flex-col w-full p-6 outline-none text-base",
163
- "bg-dialog-bg text-dialog-fg shadow-lg rounded-xl",
164
- "my-[var(--dialog-margin,var(--dialog-base-margin))]",
165
- "mx-auto [--dialog-base-margin:4rem] lg:[--dialog-base-margin:auto]",
166
- "max-h-[calc(100%-7.5rem)] overflow-hidden",
167
- // Size variant
168
- sizeClasses(size),
169
- className
170
- ),
171
- style: Object.keys(contentInlineStyle).length > 0 ? contentInlineStyle : void 0,
172
- ...rest,
173
- children
174
- }
175
- )
176
- }
177
- )
178
- ] });
179
- });
180
- var DialogCloseTrigger = React2.forwardRef(function DialogCloseTrigger2(props, ref) {
181
- const { className, ...rest } = props;
182
- return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
183
- });
184
- var DialogHeader = React2.forwardRef(function DialogHeader2(props, ref) {
185
- const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
186
- const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsx(BackToButton, { onClick: onBackToClick }) : void 0);
187
- return /* @__PURE__ */ jsxs(
188
- "div",
189
- {
190
- ref,
191
- className: cn(
192
- "flex-none p-0 mb-2 flex items-center gap-x-2 min-h-[40px]",
193
- className
194
- ),
195
- ...rest,
196
- children: [
197
- startElement,
198
- /* @__PURE__ */ jsx(
199
- RadixDialog.Title,
200
- {
201
- className: cn(
202
- "text-base lg:text-lg font-medium",
203
- "whitespace-nowrap overflow-hidden text-ellipsis"
204
- ),
205
- children
206
- }
207
- ),
208
- /* @__PURE__ */ jsx(DialogCloseTrigger, { className: "ml-auto" })
209
- ]
210
- }
211
- );
212
- });
213
- var DialogBody = React2.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
214
- const bodyStyle = {
215
- ...styleProp,
216
- ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
217
- ...display ? { display } : {},
218
- ...flexDir ? { flexDirection: flexDir } : {}
219
- };
220
- return /* @__PURE__ */ jsx(
221
- "div",
222
- {
223
- ref,
224
- className: cn("flex-1 p-0 overflow-auto", className),
225
- style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
226
- ...props
227
- }
228
- );
229
- });
230
- var DialogFooter = React2.forwardRef(function DialogFooter2({ className, ...props }, ref) {
231
- return /* @__PURE__ */ jsx(
232
- "div",
233
- {
234
- ref,
235
- className: cn("flex items-center justify-start gap-6 p-0 mt-6", className),
236
- ...props
237
- }
238
- );
239
- });
240
- var DialogBackdrop = RadixDialog.Overlay;
241
- var DialogTitle = RadixDialog.Title;
242
- var DialogDescription = RadixDialog.Description;
243
- var DialogTrigger = RadixDialog.Trigger;
244
- var DialogActionTrigger = RadixDialog.Close;
245
-
246
- export { DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger };