@luxfi/ui 6.1.2 → 7.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 (240) hide show
  1. package/dist/accordion.cjs +213 -0
  2. package/dist/accordion.d.cts +74 -0
  3. package/dist/accordion.d.ts +74 -0
  4. package/dist/accordion.js +186 -0
  5. package/dist/alert.cjs +553 -0
  6. package/dist/alert.d.cts +30 -0
  7. package/dist/alert.d.ts +30 -0
  8. package/dist/alert.js +531 -0
  9. package/dist/avatar.cjs +149 -0
  10. package/dist/avatar.d.cts +25 -0
  11. package/dist/avatar.d.ts +25 -0
  12. package/dist/avatar.js +125 -0
  13. package/dist/badge.cjs +611 -0
  14. package/dist/badge.d.cts +23 -0
  15. package/dist/badge.d.ts +23 -0
  16. package/dist/badge.js +589 -0
  17. package/dist/bank.cjs +272 -0
  18. package/dist/bank.d.cts +76 -0
  19. package/dist/bank.d.ts +76 -0
  20. package/dist/bank.js +258 -0
  21. package/dist/button.cjs +689 -0
  22. package/dist/button.d.cts +52 -0
  23. package/dist/button.d.ts +52 -0
  24. package/dist/button.js +664 -0
  25. package/dist/checkbox.cjs +265 -0
  26. package/dist/checkbox.d.cts +31 -0
  27. package/dist/checkbox.d.ts +31 -0
  28. package/dist/checkbox.js +241 -0
  29. package/dist/close-button.cjs +73 -0
  30. package/dist/close-button.d.cts +9 -0
  31. package/dist/close-button.d.ts +9 -0
  32. package/dist/close-button.js +51 -0
  33. package/dist/collapsible.cjs +702 -0
  34. package/dist/collapsible.d.cts +23 -0
  35. package/dist/collapsible.d.ts +23 -0
  36. package/dist/collapsible.js +679 -0
  37. package/dist/color-mode.cjs +96 -0
  38. package/dist/color-mode.d.cts +25 -0
  39. package/dist/color-mode.d.ts +25 -0
  40. package/dist/color-mode.js +72 -0
  41. package/dist/dialog.cjs +279 -0
  42. package/dist/dialog.d.cts +66 -0
  43. package/dist/dialog.d.ts +66 -0
  44. package/dist/dialog.js +246 -0
  45. package/dist/drawer.cjs +207 -0
  46. package/dist/drawer.d.cts +36 -0
  47. package/dist/drawer.d.ts +36 -0
  48. package/dist/drawer.js +175 -0
  49. package/dist/empty-state.cjs +93 -0
  50. package/dist/empty-state.d.cts +13 -0
  51. package/dist/empty-state.d.ts +13 -0
  52. package/dist/empty-state.js +71 -0
  53. package/dist/expiration-selector.cjs +138 -0
  54. package/dist/expiration-selector.d.cts +16 -0
  55. package/dist/expiration-selector.d.ts +16 -0
  56. package/dist/expiration-selector.js +116 -0
  57. package/dist/field.cjs +183 -0
  58. package/dist/field.d.cts +24 -0
  59. package/dist/field.d.ts +24 -0
  60. package/dist/field.js +160 -0
  61. package/dist/greeks-display.cjs +114 -0
  62. package/dist/greeks-display.d.cts +14 -0
  63. package/dist/greeks-display.d.ts +14 -0
  64. package/dist/greeks-display.js +92 -0
  65. package/dist/heading.cjs +46 -0
  66. package/dist/heading.d.cts +10 -0
  67. package/dist/heading.d.ts +10 -0
  68. package/dist/heading.js +40 -0
  69. package/dist/icon-button.cjs +491 -0
  70. package/dist/icon-button.d.cts +33 -0
  71. package/dist/icon-button.d.ts +33 -0
  72. package/dist/icon-button.js +470 -0
  73. package/dist/image.cjs +572 -0
  74. package/dist/image.d.cts +57 -0
  75. package/dist/image.d.ts +57 -0
  76. package/dist/image.js +551 -0
  77. package/dist/index.cjs +7316 -0
  78. package/dist/index.d.cts +58 -0
  79. package/dist/index.d.ts +58 -0
  80. package/dist/index.js +7137 -0
  81. package/dist/input-group.cjs +155 -0
  82. package/dist/input-group.d.cts +17 -0
  83. package/dist/input-group.d.ts +17 -0
  84. package/dist/input-group.js +133 -0
  85. package/dist/input.cjs +65 -0
  86. package/dist/input.d.cts +11 -0
  87. package/dist/input.d.ts +11 -0
  88. package/dist/input.js +59 -0
  89. package/dist/link.cjs +630 -0
  90. package/dist/link.d.cts +37 -0
  91. package/dist/link.d.ts +37 -0
  92. package/dist/link.js +606 -0
  93. package/dist/menu.cjs +305 -0
  94. package/dist/menu.d.cts +84 -0
  95. package/dist/menu.d.ts +84 -0
  96. package/dist/menu.js +269 -0
  97. package/dist/option-chain.cjs +221 -0
  98. package/dist/option-chain.d.cts +37 -0
  99. package/dist/option-chain.d.ts +37 -0
  100. package/dist/option-chain.js +199 -0
  101. package/dist/option-position.cjs +164 -0
  102. package/dist/option-position.d.cts +29 -0
  103. package/dist/option-position.d.ts +29 -0
  104. package/dist/option-position.js +142 -0
  105. package/dist/pin-input.cjs +182 -0
  106. package/dist/pin-input.d.cts +25 -0
  107. package/dist/pin-input.d.ts +25 -0
  108. package/dist/pin-input.js +160 -0
  109. package/dist/pnl-diagram.cjs +453 -0
  110. package/dist/pnl-diagram.d.cts +11 -0
  111. package/dist/pnl-diagram.d.ts +11 -0
  112. package/dist/pnl-diagram.js +431 -0
  113. package/dist/popover.cjs +327 -0
  114. package/dist/popover.d.cts +73 -0
  115. package/dist/popover.d.ts +73 -0
  116. package/dist/popover.js +294 -0
  117. package/dist/progress-circle.cjs +152 -0
  118. package/dist/progress-circle.d.cts +47 -0
  119. package/dist/progress-circle.d.ts +47 -0
  120. package/dist/progress-circle.js +128 -0
  121. package/dist/progress.cjs +117 -0
  122. package/dist/progress.d.cts +28 -0
  123. package/dist/progress.d.ts +28 -0
  124. package/dist/progress.js +94 -0
  125. package/dist/provider.cjs +62 -0
  126. package/dist/provider.d.cts +7 -0
  127. package/dist/provider.d.ts +7 -0
  128. package/dist/provider.js +40 -0
  129. package/dist/radio.cjs +177 -0
  130. package/dist/radio.d.cts +53 -0
  131. package/dist/radio.d.ts +53 -0
  132. package/dist/radio.js +153 -0
  133. package/dist/rating.cjs +80 -0
  134. package/dist/rating.d.cts +14 -0
  135. package/dist/rating.d.ts +14 -0
  136. package/dist/rating.js +58 -0
  137. package/dist/select.cjs +791 -0
  138. package/dist/select.d.cts +130 -0
  139. package/dist/select.d.ts +130 -0
  140. package/dist/select.js +757 -0
  141. package/dist/separator.cjs +57 -0
  142. package/dist/separator.d.cts +13 -0
  143. package/dist/separator.d.ts +13 -0
  144. package/dist/separator.js +51 -0
  145. package/dist/skeleton.cjs +370 -0
  146. package/dist/skeleton.d.cts +60 -0
  147. package/dist/skeleton.d.ts +60 -0
  148. package/dist/skeleton.js +346 -0
  149. package/dist/slider.cjs +138 -0
  150. package/dist/slider.d.cts +24 -0
  151. package/dist/slider.d.ts +24 -0
  152. package/dist/slider.js +115 -0
  153. package/dist/strategy-builder.cjs +373 -0
  154. package/dist/strategy-builder.d.cts +26 -0
  155. package/dist/strategy-builder.d.ts +26 -0
  156. package/dist/strategy-builder.js +351 -0
  157. package/dist/switch.cjs +163 -0
  158. package/dist/switch.d.cts +27 -0
  159. package/dist/switch.d.ts +27 -0
  160. package/dist/switch.js +140 -0
  161. package/dist/table.cjs +1044 -0
  162. package/dist/table.d.cts +107 -0
  163. package/dist/table.d.ts +107 -0
  164. package/dist/table.js +1013 -0
  165. package/dist/tabs.cjs +240 -0
  166. package/dist/tabs.d.cts +78 -0
  167. package/dist/tabs.d.ts +78 -0
  168. package/dist/tabs.js +213 -0
  169. package/dist/tag.cjs +651 -0
  170. package/dist/tag.d.cts +21 -0
  171. package/dist/tag.d.ts +21 -0
  172. package/dist/tag.js +628 -0
  173. package/dist/textarea.cjs +65 -0
  174. package/dist/textarea.d.cts +11 -0
  175. package/dist/textarea.d.ts +11 -0
  176. package/dist/textarea.js +59 -0
  177. package/dist/toaster.cjs +99 -0
  178. package/dist/toaster.d.cts +29 -0
  179. package/dist/toaster.d.ts +29 -0
  180. package/dist/toaster.js +96 -0
  181. package/dist/tooltip.cjs +171 -0
  182. package/dist/tooltip.d.cts +39 -0
  183. package/dist/tooltip.d.ts +39 -0
  184. package/dist/tooltip.js +148 -0
  185. package/dist/utils.cjs +11 -0
  186. package/dist/utils.d.cts +5 -0
  187. package/dist/utils.d.ts +5 -0
  188. package/dist/utils.js +9 -0
  189. package/package.json +284 -85
  190. package/src/accordion.tsx +285 -0
  191. package/src/alert.tsx +221 -0
  192. package/src/avatar.tsx +174 -0
  193. package/src/badge.tsx +158 -0
  194. package/src/bank.tsx +325 -0
  195. package/src/button.tsx +411 -0
  196. package/src/checkbox.tsx +307 -0
  197. package/src/close-button.tsx +51 -0
  198. package/src/collapsible.tsx +126 -0
  199. package/src/color-mode.tsx +125 -0
  200. package/src/dialog.tsx +356 -0
  201. package/src/drawer.tsx +186 -0
  202. package/src/empty-state.tsx +97 -0
  203. package/src/expiration-selector.tsx +163 -0
  204. package/src/field.tsx +202 -0
  205. package/src/greeks-display.tsx +138 -0
  206. package/src/heading.tsx +55 -0
  207. package/src/icon-button.tsx +192 -0
  208. package/src/image.tsx +280 -0
  209. package/src/index.ts +268 -0
  210. package/src/input-group.tsx +159 -0
  211. package/src/input.tsx +60 -0
  212. package/src/link.tsx +326 -0
  213. package/src/menu.tsx +471 -0
  214. package/src/option-chain.tsx +261 -0
  215. package/src/option-position.tsx +200 -0
  216. package/src/pin-input.tsx +187 -0
  217. package/src/pnl-diagram.tsx +458 -0
  218. package/src/popover.tsx +400 -0
  219. package/src/progress-circle.tsx +180 -0
  220. package/src/progress.tsx +109 -0
  221. package/src/provider.tsx +12 -0
  222. package/src/radio.tsx +175 -0
  223. package/src/rating.tsx +79 -0
  224. package/src/select.tsx +696 -0
  225. package/src/separator.tsx +59 -0
  226. package/src/skeleton.tsx +302 -0
  227. package/src/slider.tsx +152 -0
  228. package/src/strategy-builder.tsx +466 -0
  229. package/src/switch.tsx +158 -0
  230. package/src/table.tsx +621 -0
  231. package/src/tabs.tsx +354 -0
  232. package/src/tag.tsx +159 -0
  233. package/src/textarea.tsx +60 -0
  234. package/src/toaster.tsx +117 -0
  235. package/src/tokens.css +438 -0
  236. package/src/tooltip.tsx +184 -0
  237. package/src/utils/cn.ts +7 -0
  238. package/src/utils.ts +6 -0
  239. package/tokens.css +438 -0
  240. package/README.md +0 -109
package/dist/dialog.js ADDED
@@ -0,0 +1,246 @@
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 };
@@ -0,0 +1,207 @@
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/drawer.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
+ var DrawerPlacementContext = React2__namespace.createContext("right");
75
+ var DrawerSizeContext = React2__namespace.createContext("md");
76
+ var DrawerRoot = (props) => {
77
+ const {
78
+ children,
79
+ open,
80
+ defaultOpen,
81
+ onOpenChange,
82
+ placement = "right",
83
+ modal = true,
84
+ size = "md"
85
+ } = props;
86
+ const handleOpenChange = React2__namespace.useCallback((nextOpen) => {
87
+ onOpenChange?.({ open: nextOpen });
88
+ }, [onOpenChange]);
89
+ return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
90
+ RadixDialog__namespace.Root,
91
+ {
92
+ open,
93
+ defaultOpen,
94
+ onOpenChange: handleOpenChange,
95
+ modal,
96
+ children
97
+ }
98
+ ) }) });
99
+ };
100
+ var PLACEMENT_CLASSES = {
101
+ right: [
102
+ "inset-y-0 right-0",
103
+ "data-[state=open]:animate-in data-[state=open]:slide-in-from-right",
104
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right"
105
+ ].join(" "),
106
+ left: [
107
+ "inset-y-0 left-0",
108
+ "data-[state=open]:animate-in data-[state=open]:slide-in-from-left",
109
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
110
+ ].join(" "),
111
+ top: [
112
+ "inset-x-0 top-0",
113
+ "data-[state=open]:animate-in data-[state=open]:slide-in-from-top",
114
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top"
115
+ ].join(" "),
116
+ bottom: [
117
+ "inset-x-0 bottom-0",
118
+ "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
119
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
120
+ ].join(" ")
121
+ };
122
+ var SIZE_CLASSES = {
123
+ right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
124
+ left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
125
+ top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
126
+ bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
127
+ };
128
+ var DrawerContent = React2__namespace.forwardRef(
129
+ function DrawerContent2(props, ref) {
130
+ const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
131
+ const placement = React2__namespace.useContext(DrawerPlacementContext);
132
+ const size = React2__namespace.useContext(DrawerSizeContext);
133
+ const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
134
+ backdrop && /* @__PURE__ */ jsxRuntime.jsx(
135
+ RadixDialog__namespace.Overlay,
136
+ {
137
+ className: cn(
138
+ "fixed inset-0 z-50 bg-black/50",
139
+ "data-[state=open]:animate-in data-[state=open]:fade-in-0",
140
+ "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
141
+ )
142
+ }
143
+ ),
144
+ /* @__PURE__ */ jsxRuntime.jsx(
145
+ RadixDialog__namespace.Content,
146
+ {
147
+ ref,
148
+ className: cn(
149
+ "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
150
+ PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
151
+ SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
152
+ className
153
+ ),
154
+ ...rest,
155
+ children
156
+ }
157
+ )
158
+ ] });
159
+ if (portalled) {
160
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
161
+ }
162
+ return content;
163
+ }
164
+ );
165
+ var DrawerCloseTrigger = React2__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
166
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
167
+ CloseButton,
168
+ {
169
+ ref,
170
+ className: cn("absolute top-7 right-5", props.className),
171
+ ...props
172
+ }
173
+ ) });
174
+ });
175
+ var DrawerTrigger = (props) => {
176
+ const { asChild = true, ...rest } = props;
177
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild, ...rest });
178
+ };
179
+ var DrawerHeader = React2__namespace.forwardRef(
180
+ function DrawerHeader2({ className, ...props }, ref) {
181
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
182
+ }
183
+ );
184
+ var DrawerBody = React2__namespace.forwardRef(
185
+ function DrawerBody2({ className, ...props }, ref) {
186
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
187
+ }
188
+ );
189
+ var DrawerFooter = React2__namespace.forwardRef(
190
+ function DrawerFooter2({ className, ...props }, ref) {
191
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
192
+ }
193
+ );
194
+ var DrawerTitle = RadixDialog__namespace.Title;
195
+ var DrawerDescription = RadixDialog__namespace.Description;
196
+ var DrawerActionTrigger = RadixDialog__namespace.Close;
197
+
198
+ exports.DrawerActionTrigger = DrawerActionTrigger;
199
+ exports.DrawerBody = DrawerBody;
200
+ exports.DrawerCloseTrigger = DrawerCloseTrigger;
201
+ exports.DrawerContent = DrawerContent;
202
+ exports.DrawerDescription = DrawerDescription;
203
+ exports.DrawerFooter = DrawerFooter;
204
+ exports.DrawerHeader = DrawerHeader;
205
+ exports.DrawerRoot = DrawerRoot;
206
+ exports.DrawerTitle = DrawerTitle;
207
+ exports.DrawerTrigger = DrawerTrigger;
@@ -0,0 +1,36 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as RadixDialog from '@radix-ui/react-dialog';
3
+ import * as React from 'react';
4
+
5
+ interface DrawerRootProps {
6
+ children?: React.ReactNode;
7
+ open?: boolean;
8
+ defaultOpen?: boolean;
9
+ onOpenChange?: (details: {
10
+ open: boolean;
11
+ }) => void;
12
+ placement?: 'left' | 'right' | 'top' | 'bottom';
13
+ initialFocusEl?: (() => HTMLElement | null) | React.RefObject<HTMLElement>;
14
+ lazyMount?: boolean;
15
+ unmountOnExit?: boolean;
16
+ modal?: boolean;
17
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
18
+ }
19
+ declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
20
+ interface DrawerContentProps extends React.ComponentPropsWithoutRef<'div'> {
21
+ portalled?: boolean;
22
+ portalRef?: React.RefObject<HTMLElement>;
23
+ offset?: string | number;
24
+ backdrop?: boolean;
25
+ }
26
+ declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
27
+ declare const DrawerCloseTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
28
+ declare const DrawerTrigger: (props: React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger>) => react_jsx_runtime.JSX.Element;
29
+ declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
30
+ declare const DrawerBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
31
+ declare const DrawerFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
32
+ declare const DrawerTitle: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
33
+ declare const DrawerDescription: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
34
+ declare const DrawerActionTrigger: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
35
+
36
+ export { DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, type DrawerRootProps, DrawerTitle, DrawerTrigger };
@@ -0,0 +1,36 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as RadixDialog from '@radix-ui/react-dialog';
3
+ import * as React from 'react';
4
+
5
+ interface DrawerRootProps {
6
+ children?: React.ReactNode;
7
+ open?: boolean;
8
+ defaultOpen?: boolean;
9
+ onOpenChange?: (details: {
10
+ open: boolean;
11
+ }) => void;
12
+ placement?: 'left' | 'right' | 'top' | 'bottom';
13
+ initialFocusEl?: (() => HTMLElement | null) | React.RefObject<HTMLElement>;
14
+ lazyMount?: boolean;
15
+ unmountOnExit?: boolean;
16
+ modal?: boolean;
17
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
18
+ }
19
+ declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
20
+ interface DrawerContentProps extends React.ComponentPropsWithoutRef<'div'> {
21
+ portalled?: boolean;
22
+ portalRef?: React.RefObject<HTMLElement>;
23
+ offset?: string | number;
24
+ backdrop?: boolean;
25
+ }
26
+ declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
27
+ declare const DrawerCloseTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
28
+ declare const DrawerTrigger: (props: React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger>) => react_jsx_runtime.JSX.Element;
29
+ declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
30
+ declare const DrawerBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
31
+ declare const DrawerFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
32
+ declare const DrawerTitle: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
33
+ declare const DrawerDescription: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
34
+ declare const DrawerActionTrigger: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
35
+
36
+ export { DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, type DrawerRootProps, DrawerTitle, DrawerTrigger };