@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.
- package/dist/components/Badge.d.ts.map +1 -0
- package/dist/components/Badge.js +91 -0
- package/dist/components/Button.d.ts.map +1 -0
- package/dist/components/Button.js +137 -0
- package/dist/components/Card.d.ts.map +1 -0
- package/dist/components/Card.js +86 -0
- package/dist/components/IconButton.d.ts.map +1 -0
- package/dist/components/IconButton.js +64 -0
- package/dist/components/Input.d.ts.map +1 -0
- package/dist/components/Input.js +71 -0
- package/dist/components/Modal.d.ts.map +1 -0
- package/dist/components/Modal.js +98 -0
- package/dist/components/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton.js +44 -0
- package/dist/components/Spinner.d.ts.map +1 -0
- package/dist/components/Spinner.js +42 -0
- package/dist/components/Switch.d.ts.map +1 -0
- package/dist/components/Switch.js +10 -0
- package/dist/components/TokenLogo.d.ts.map +1 -0
- package/dist/components/TokenLogo.js +57 -0
- package/dist/components/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip.js +34 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +19 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +35 -5618
- package/dist/theme/index.d.ts.map +1 -0
- package/dist/theme/index.js +6 -0
- package/dist/theme/themes.d.ts.map +1 -0
- package/dist/theme/themes.js +73 -0
- package/dist/theme/tokens.d.ts.map +1 -0
- package/dist/theme/tokens.js +101 -0
- package/package.json +81 -278
- package/dist/accordion.cjs +0 -213
- package/dist/accordion.js +0 -186
- package/dist/alert.cjs +0 -553
- package/dist/alert.js +0 -531
- package/dist/avatar.cjs +0 -149
- package/dist/avatar.js +0 -125
- package/dist/badge.cjs +0 -611
- package/dist/badge.js +0 -589
- package/dist/button.cjs +0 -689
- package/dist/button.js +0 -664
- package/dist/checkbox.cjs +0 -265
- package/dist/checkbox.js +0 -241
- package/dist/close-button.cjs +0 -73
- package/dist/close-button.js +0 -51
- package/dist/collapsible.cjs +0 -702
- package/dist/collapsible.js +0 -679
- package/dist/color-mode.cjs +0 -96
- package/dist/color-mode.js +0 -72
- package/dist/dialog.cjs +0 -279
- package/dist/dialog.js +0 -246
- package/dist/drawer.cjs +0 -207
- package/dist/drawer.js +0 -175
- package/dist/empty-state.cjs +0 -93
- package/dist/empty-state.js +0 -71
- package/dist/field.cjs +0 -183
- package/dist/field.js +0 -160
- package/dist/heading.cjs +0 -46
- package/dist/heading.js +0 -40
- package/dist/icon-button.cjs +0 -491
- package/dist/icon-button.js +0 -470
- package/dist/image.cjs +0 -572
- package/dist/image.js +0 -551
- package/dist/index.cjs +0 -5779
- package/dist/input-group.cjs +0 -155
- package/dist/input-group.js +0 -133
- package/dist/input.cjs +0 -65
- package/dist/input.js +0 -59
- package/dist/link.cjs +0 -630
- package/dist/link.js +0 -606
- package/dist/menu.cjs +0 -305
- package/dist/menu.js +0 -269
- package/dist/pin-input.cjs +0 -182
- package/dist/pin-input.js +0 -160
- package/dist/popover.cjs +0 -327
- package/dist/popover.js +0 -294
- package/dist/progress-circle.cjs +0 -152
- package/dist/progress-circle.js +0 -128
- package/dist/progress.cjs +0 -117
- package/dist/progress.js +0 -94
- package/dist/provider.cjs +0 -62
- package/dist/provider.js +0 -40
- package/dist/radio.cjs +0 -177
- package/dist/radio.js +0 -153
- package/dist/rating.cjs +0 -80
- package/dist/rating.js +0 -58
- package/dist/select.cjs +0 -791
- package/dist/select.js +0 -757
- package/dist/separator.cjs +0 -57
- package/dist/separator.js +0 -51
- package/dist/skeleton.cjs +0 -370
- package/dist/skeleton.js +0 -346
- package/dist/slider.cjs +0 -138
- package/dist/slider.js +0 -115
- package/dist/switch.cjs +0 -163
- package/dist/switch.js +0 -140
- package/dist/table.cjs +0 -1044
- package/dist/table.js +0 -1013
- package/dist/tabs.cjs +0 -240
- package/dist/tabs.js +0 -213
- package/dist/tag.cjs +0 -651
- package/dist/tag.js +0 -628
- package/dist/textarea.cjs +0 -65
- package/dist/textarea.js +0 -59
- package/dist/toaster.cjs +0 -99
- package/dist/toaster.js +0 -96
- package/dist/tooltip.cjs +0 -171
- package/dist/tooltip.js +0 -148
- package/dist/utils.cjs +0 -11
- package/dist/utils.js +0 -9
- package/src/accordion.tsx +0 -285
- package/src/alert.tsx +0 -221
- package/src/avatar.tsx +0 -174
- package/src/badge.tsx +0 -158
- package/src/button.tsx +0 -411
- package/src/checkbox.tsx +0 -307
- package/src/close-button.tsx +0 -51
- package/src/collapsible.tsx +0 -126
- package/src/color-mode.tsx +0 -125
- package/src/dialog.tsx +0 -356
- package/src/drawer.tsx +0 -186
- package/src/empty-state.tsx +0 -97
- package/src/field.tsx +0 -202
- package/src/heading.tsx +0 -55
- package/src/icon-button.tsx +0 -192
- package/src/image.tsx +0 -280
- package/src/index.ts +0 -192
- package/src/input-group.tsx +0 -159
- package/src/input.tsx +0 -60
- package/src/link.tsx +0 -326
- package/src/menu.tsx +0 -471
- package/src/pin-input.tsx +0 -187
- package/src/popover.tsx +0 -400
- package/src/progress-circle.tsx +0 -180
- package/src/progress.tsx +0 -109
- package/src/provider.tsx +0 -12
- package/src/radio.tsx +0 -175
- package/src/rating.tsx +0 -79
- package/src/select.tsx +0 -696
- package/src/separator.tsx +0 -59
- package/src/skeleton.tsx +0 -302
- package/src/slider.tsx +0 -152
- package/src/switch.tsx +0 -158
- package/src/table.tsx +0 -621
- package/src/tabs.tsx +0 -354
- package/src/tag.tsx +0 -159
- package/src/textarea.tsx +0 -60
- package/src/toaster.tsx +0 -117
- package/src/tokens.css +0 -438
- package/src/tooltip.tsx +0 -184
- package/src/utils/cn.ts +0 -7
- package/src/utils.ts +0 -6
- package/tokens.css +0 -438
package/dist/menu.cjs
DELETED
|
@@ -1,305 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var DropdownMenu = require('@radix-ui/react-dropdown-menu');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var lu = require('react-icons/lu');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var tailwindMerge = require('tailwind-merge');
|
|
9
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
-
|
|
11
|
-
function _interopNamespace(e) {
|
|
12
|
-
if (e && e.__esModule) return e;
|
|
13
|
-
var n = Object.create(null);
|
|
14
|
-
if (e) {
|
|
15
|
-
Object.keys(e).forEach(function (k) {
|
|
16
|
-
if (k !== 'default') {
|
|
17
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () { return e[k]; }
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
n.default = e;
|
|
26
|
-
return Object.freeze(n);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
|
|
30
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
31
|
-
|
|
32
|
-
function cn(...inputs) {
|
|
33
|
-
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
34
|
-
}
|
|
35
|
-
function parsePlacement(placement) {
|
|
36
|
-
if (!placement) {
|
|
37
|
-
return { side: "bottom", align: "start" };
|
|
38
|
-
}
|
|
39
|
-
const parts = placement.split("-");
|
|
40
|
-
const side = parts[0] ?? "bottom";
|
|
41
|
-
const alignPart = parts[1];
|
|
42
|
-
let align = "center";
|
|
43
|
-
if (alignPart === "start") {
|
|
44
|
-
align = "start";
|
|
45
|
-
} else if (alignPart === "end") {
|
|
46
|
-
align = "end";
|
|
47
|
-
}
|
|
48
|
-
return { side, align };
|
|
49
|
-
}
|
|
50
|
-
var PositioningContext = React__namespace.createContext({
|
|
51
|
-
side: "bottom",
|
|
52
|
-
align: "start",
|
|
53
|
-
sideOffset: 4,
|
|
54
|
-
alignOffset: 0
|
|
55
|
-
});
|
|
56
|
-
var MenuRoot = (props) => {
|
|
57
|
-
const {
|
|
58
|
-
children,
|
|
59
|
-
open,
|
|
60
|
-
defaultOpen,
|
|
61
|
-
onOpenChange,
|
|
62
|
-
positioning,
|
|
63
|
-
modal = true,
|
|
64
|
-
// lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
|
|
65
|
-
// mount/unmount automatically.
|
|
66
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
67
|
-
lazyMount: _lazyMount,
|
|
68
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
69
|
-
unmountOnExit: _unmountOnExit
|
|
70
|
-
} = props;
|
|
71
|
-
const mergedPositioning = {
|
|
72
|
-
placement: "bottom-start",
|
|
73
|
-
...positioning,
|
|
74
|
-
offset: {
|
|
75
|
-
mainAxis: 4,
|
|
76
|
-
...positioning?.offset
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
const { side, align } = parsePlacement(mergedPositioning.placement);
|
|
80
|
-
const positioningValue = React__namespace.useMemo(() => ({
|
|
81
|
-
side,
|
|
82
|
-
align,
|
|
83
|
-
sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
|
|
84
|
-
alignOffset: mergedPositioning.offset?.crossAxis ?? 0
|
|
85
|
-
}), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
|
|
86
|
-
const handleOpenChange = React__namespace.useCallback((isOpen) => {
|
|
87
|
-
onOpenChange?.({ open: isOpen });
|
|
88
|
-
}, [onOpenChange]);
|
|
89
|
-
return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
90
|
-
DropdownMenu__namespace.Root,
|
|
91
|
-
{
|
|
92
|
-
open,
|
|
93
|
-
defaultOpen,
|
|
94
|
-
onOpenChange: handleOpenChange,
|
|
95
|
-
modal,
|
|
96
|
-
children
|
|
97
|
-
}
|
|
98
|
-
) });
|
|
99
|
-
};
|
|
100
|
-
var MenuTrigger = React__namespace.forwardRef(function MenuTrigger2(props, ref) {
|
|
101
|
-
const { asChild = false, ...rest } = props;
|
|
102
|
-
return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild, ref, ...rest });
|
|
103
|
-
});
|
|
104
|
-
var MenuContent = React__namespace.forwardRef(function MenuContent2(props, ref) {
|
|
105
|
-
const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
|
|
106
|
-
const positioning = React__namespace.useContext(PositioningContext);
|
|
107
|
-
const mergedStyle = {
|
|
108
|
-
...style,
|
|
109
|
-
...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
|
|
110
|
-
...minW !== void 0 ? { minWidth: minW } : {}
|
|
111
|
-
};
|
|
112
|
-
const content = /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
-
DropdownMenu__namespace.Content,
|
|
114
|
-
{
|
|
115
|
-
ref,
|
|
116
|
-
side: positioning.side,
|
|
117
|
-
align: positioning.align,
|
|
118
|
-
sideOffset: positioning.sideOffset,
|
|
119
|
-
alignOffset: positioning.alignOffset,
|
|
120
|
-
className: cn(
|
|
121
|
-
"z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
|
|
122
|
-
"border border-[var(--color-popover-border,var(--color-border-divider))]",
|
|
123
|
-
"bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
|
|
124
|
-
"shadow-[0_4px_12px_var(--color-popover-shadow)]",
|
|
125
|
-
"outline-none",
|
|
126
|
-
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
127
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
128
|
-
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
|
|
129
|
-
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
130
|
-
className
|
|
131
|
-
),
|
|
132
|
-
style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
|
|
133
|
-
...rest
|
|
134
|
-
}
|
|
135
|
-
);
|
|
136
|
-
if (!portalled) {
|
|
137
|
-
return content;
|
|
138
|
-
}
|
|
139
|
-
return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
|
|
140
|
-
});
|
|
141
|
-
var MenuItem = React__namespace.forwardRef(function MenuItem2(props, ref) {
|
|
142
|
-
const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
|
|
143
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
144
|
-
DropdownMenu__namespace.Item,
|
|
145
|
-
{
|
|
146
|
-
ref,
|
|
147
|
-
asChild,
|
|
148
|
-
disabled,
|
|
149
|
-
onClick,
|
|
150
|
-
className: cn(
|
|
151
|
-
"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
|
|
152
|
-
"outline-none transition-colors",
|
|
153
|
-
"text-[var(--color-text-primary,inherit)]",
|
|
154
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
155
|
-
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
156
|
-
className
|
|
157
|
-
),
|
|
158
|
-
...rest,
|
|
159
|
-
children
|
|
160
|
-
}
|
|
161
|
-
);
|
|
162
|
-
});
|
|
163
|
-
var MenuItemText = React__namespace.forwardRef(function MenuItemText2(props, ref) {
|
|
164
|
-
const { className, ...rest } = props;
|
|
165
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("flex-1", className), ...rest });
|
|
166
|
-
});
|
|
167
|
-
var MenuItemCommand = React__namespace.forwardRef(function MenuItemCommand2(props, ref) {
|
|
168
|
-
const { className, ...rest } = props;
|
|
169
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
170
|
-
"span",
|
|
171
|
-
{
|
|
172
|
-
ref,
|
|
173
|
-
className: cn("ml-auto text-xs tracking-widest opacity-60", className),
|
|
174
|
-
...rest
|
|
175
|
-
}
|
|
176
|
-
);
|
|
177
|
-
});
|
|
178
|
-
var MenuSeparator = React__namespace.forwardRef(function MenuSeparator2(props, ref) {
|
|
179
|
-
const { className, ...rest } = props;
|
|
180
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
181
|
-
DropdownMenu__namespace.Separator,
|
|
182
|
-
{
|
|
183
|
-
ref,
|
|
184
|
-
className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
|
|
185
|
-
...rest
|
|
186
|
-
}
|
|
187
|
-
);
|
|
188
|
-
});
|
|
189
|
-
var MenuItemGroup = React__namespace.forwardRef(function MenuItemGroup2(props, ref) {
|
|
190
|
-
const { title, children, className, ...rest } = props;
|
|
191
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Group, { ref, className, ...rest, children: [
|
|
192
|
-
title && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
|
|
193
|
-
children
|
|
194
|
-
] });
|
|
195
|
-
});
|
|
196
|
-
var MenuArrow = React__namespace.forwardRef(function MenuArrow2(props, ref) {
|
|
197
|
-
const { className, ...rest } = props;
|
|
198
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
199
|
-
DropdownMenu__namespace.Arrow,
|
|
200
|
-
{
|
|
201
|
-
ref,
|
|
202
|
-
className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
|
|
203
|
-
...rest
|
|
204
|
-
}
|
|
205
|
-
);
|
|
206
|
-
});
|
|
207
|
-
var MenuCheckboxItem = React__namespace.forwardRef(function MenuCheckboxItem2(props, ref) {
|
|
208
|
-
const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
|
|
209
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
210
|
-
DropdownMenu__namespace.CheckboxItem,
|
|
211
|
-
{
|
|
212
|
-
ref,
|
|
213
|
-
checked,
|
|
214
|
-
onCheckedChange,
|
|
215
|
-
onClick,
|
|
216
|
-
className: cn(
|
|
217
|
-
"relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
|
|
218
|
-
"outline-none transition-colors",
|
|
219
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
220
|
-
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
221
|
-
className
|
|
222
|
-
),
|
|
223
|
-
...rest,
|
|
224
|
-
children: [
|
|
225
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCheck, { className: "h-4 w-4" }) }) }),
|
|
226
|
-
children
|
|
227
|
-
]
|
|
228
|
-
}
|
|
229
|
-
);
|
|
230
|
-
});
|
|
231
|
-
var MenuRadioItemGroup = React__namespace.forwardRef(function MenuRadioItemGroup2(props, ref) {
|
|
232
|
-
const { value, onValueChange, ...rest } = props;
|
|
233
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
234
|
-
DropdownMenu__namespace.RadioGroup,
|
|
235
|
-
{
|
|
236
|
-
ref,
|
|
237
|
-
value,
|
|
238
|
-
onValueChange,
|
|
239
|
-
...rest
|
|
240
|
-
}
|
|
241
|
-
);
|
|
242
|
-
});
|
|
243
|
-
var MenuRadioItem = React__namespace.forwardRef(function MenuRadioItem2(props, ref) {
|
|
244
|
-
const { className, children, value, onClick, ...rest } = props;
|
|
245
|
-
const { value: _v, ...radixRest } = rest;
|
|
246
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
247
|
-
DropdownMenu__namespace.RadioItem,
|
|
248
|
-
{
|
|
249
|
-
ref,
|
|
250
|
-
value,
|
|
251
|
-
onClick,
|
|
252
|
-
className: cn(
|
|
253
|
-
"relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
|
|
254
|
-
"outline-none transition-colors",
|
|
255
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
256
|
-
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
257
|
-
className
|
|
258
|
-
),
|
|
259
|
-
children: [
|
|
260
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCheck, { className: "h-4 w-4" }) }) }),
|
|
261
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children })
|
|
262
|
-
]
|
|
263
|
-
}
|
|
264
|
-
);
|
|
265
|
-
});
|
|
266
|
-
var MenuContextTrigger = React__namespace.forwardRef(function MenuContextTrigger2(props, ref) {
|
|
267
|
-
const { asChild: _asChild, ...rest } = props;
|
|
268
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...rest });
|
|
269
|
-
});
|
|
270
|
-
var MenuTriggerItem = React__namespace.forwardRef(function MenuTriggerItem2(props, ref) {
|
|
271
|
-
const { startIcon, children, className, ...rest } = props;
|
|
272
|
-
return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Sub, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
273
|
-
DropdownMenu__namespace.SubTrigger,
|
|
274
|
-
{
|
|
275
|
-
ref,
|
|
276
|
-
className: cn(
|
|
277
|
-
"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
|
|
278
|
-
"outline-none transition-colors",
|
|
279
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
280
|
-
className
|
|
281
|
-
),
|
|
282
|
-
...rest,
|
|
283
|
-
children: [
|
|
284
|
-
startIcon,
|
|
285
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
|
|
286
|
-
/* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronRight, { className: "h-4 w-4" })
|
|
287
|
-
]
|
|
288
|
-
}
|
|
289
|
-
) });
|
|
290
|
-
});
|
|
291
|
-
|
|
292
|
-
exports.MenuArrow = MenuArrow;
|
|
293
|
-
exports.MenuCheckboxItem = MenuCheckboxItem;
|
|
294
|
-
exports.MenuContent = MenuContent;
|
|
295
|
-
exports.MenuContextTrigger = MenuContextTrigger;
|
|
296
|
-
exports.MenuItem = MenuItem;
|
|
297
|
-
exports.MenuItemCommand = MenuItemCommand;
|
|
298
|
-
exports.MenuItemGroup = MenuItemGroup;
|
|
299
|
-
exports.MenuItemText = MenuItemText;
|
|
300
|
-
exports.MenuRadioItem = MenuRadioItem;
|
|
301
|
-
exports.MenuRadioItemGroup = MenuRadioItemGroup;
|
|
302
|
-
exports.MenuRoot = MenuRoot;
|
|
303
|
-
exports.MenuSeparator = MenuSeparator;
|
|
304
|
-
exports.MenuTrigger = MenuTrigger;
|
|
305
|
-
exports.MenuTriggerItem = MenuTriggerItem;
|
package/dist/menu.js
DELETED
|
@@ -1,269 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { LuCheck, LuChevronRight } from 'react-icons/lu';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { twMerge } from 'tailwind-merge';
|
|
7
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
|
-
|
|
9
|
-
function cn(...inputs) {
|
|
10
|
-
return twMerge(clsx(inputs));
|
|
11
|
-
}
|
|
12
|
-
function parsePlacement(placement) {
|
|
13
|
-
if (!placement) {
|
|
14
|
-
return { side: "bottom", align: "start" };
|
|
15
|
-
}
|
|
16
|
-
const parts = placement.split("-");
|
|
17
|
-
const side = parts[0] ?? "bottom";
|
|
18
|
-
const alignPart = parts[1];
|
|
19
|
-
let align = "center";
|
|
20
|
-
if (alignPart === "start") {
|
|
21
|
-
align = "start";
|
|
22
|
-
} else if (alignPart === "end") {
|
|
23
|
-
align = "end";
|
|
24
|
-
}
|
|
25
|
-
return { side, align };
|
|
26
|
-
}
|
|
27
|
-
var PositioningContext = React.createContext({
|
|
28
|
-
side: "bottom",
|
|
29
|
-
align: "start",
|
|
30
|
-
sideOffset: 4,
|
|
31
|
-
alignOffset: 0
|
|
32
|
-
});
|
|
33
|
-
var MenuRoot = (props) => {
|
|
34
|
-
const {
|
|
35
|
-
children,
|
|
36
|
-
open,
|
|
37
|
-
defaultOpen,
|
|
38
|
-
onOpenChange,
|
|
39
|
-
positioning,
|
|
40
|
-
modal = true,
|
|
41
|
-
// lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
|
|
42
|
-
// mount/unmount automatically.
|
|
43
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
44
|
-
lazyMount: _lazyMount,
|
|
45
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
46
|
-
unmountOnExit: _unmountOnExit
|
|
47
|
-
} = props;
|
|
48
|
-
const mergedPositioning = {
|
|
49
|
-
placement: "bottom-start",
|
|
50
|
-
...positioning,
|
|
51
|
-
offset: {
|
|
52
|
-
mainAxis: 4,
|
|
53
|
-
...positioning?.offset
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
const { side, align } = parsePlacement(mergedPositioning.placement);
|
|
57
|
-
const positioningValue = React.useMemo(() => ({
|
|
58
|
-
side,
|
|
59
|
-
align,
|
|
60
|
-
sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
|
|
61
|
-
alignOffset: mergedPositioning.offset?.crossAxis ?? 0
|
|
62
|
-
}), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
|
|
63
|
-
const handleOpenChange = React.useCallback((isOpen) => {
|
|
64
|
-
onOpenChange?.({ open: isOpen });
|
|
65
|
-
}, [onOpenChange]);
|
|
66
|
-
return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
|
|
67
|
-
DropdownMenu.Root,
|
|
68
|
-
{
|
|
69
|
-
open,
|
|
70
|
-
defaultOpen,
|
|
71
|
-
onOpenChange: handleOpenChange,
|
|
72
|
-
modal,
|
|
73
|
-
children
|
|
74
|
-
}
|
|
75
|
-
) });
|
|
76
|
-
};
|
|
77
|
-
var MenuTrigger = React.forwardRef(function MenuTrigger2(props, ref) {
|
|
78
|
-
const { asChild = false, ...rest } = props;
|
|
79
|
-
return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
|
|
80
|
-
});
|
|
81
|
-
var MenuContent = React.forwardRef(function MenuContent2(props, ref) {
|
|
82
|
-
const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
|
|
83
|
-
const positioning = React.useContext(PositioningContext);
|
|
84
|
-
const mergedStyle = {
|
|
85
|
-
...style,
|
|
86
|
-
...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
|
|
87
|
-
...minW !== void 0 ? { minWidth: minW } : {}
|
|
88
|
-
};
|
|
89
|
-
const content = /* @__PURE__ */ jsx(
|
|
90
|
-
DropdownMenu.Content,
|
|
91
|
-
{
|
|
92
|
-
ref,
|
|
93
|
-
side: positioning.side,
|
|
94
|
-
align: positioning.align,
|
|
95
|
-
sideOffset: positioning.sideOffset,
|
|
96
|
-
alignOffset: positioning.alignOffset,
|
|
97
|
-
className: cn(
|
|
98
|
-
"z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
|
|
99
|
-
"border border-[var(--color-popover-border,var(--color-border-divider))]",
|
|
100
|
-
"bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
|
|
101
|
-
"shadow-[0_4px_12px_var(--color-popover-shadow)]",
|
|
102
|
-
"outline-none",
|
|
103
|
-
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
104
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
105
|
-
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
|
|
106
|
-
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
107
|
-
className
|
|
108
|
-
),
|
|
109
|
-
style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
|
|
110
|
-
...rest
|
|
111
|
-
}
|
|
112
|
-
);
|
|
113
|
-
if (!portalled) {
|
|
114
|
-
return content;
|
|
115
|
-
}
|
|
116
|
-
return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
|
|
117
|
-
});
|
|
118
|
-
var MenuItem = React.forwardRef(function MenuItem2(props, ref) {
|
|
119
|
-
const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
|
|
120
|
-
return /* @__PURE__ */ jsx(
|
|
121
|
-
DropdownMenu.Item,
|
|
122
|
-
{
|
|
123
|
-
ref,
|
|
124
|
-
asChild,
|
|
125
|
-
disabled,
|
|
126
|
-
onClick,
|
|
127
|
-
className: cn(
|
|
128
|
-
"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
|
|
129
|
-
"outline-none transition-colors",
|
|
130
|
-
"text-[var(--color-text-primary,inherit)]",
|
|
131
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
132
|
-
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
133
|
-
className
|
|
134
|
-
),
|
|
135
|
-
...rest,
|
|
136
|
-
children
|
|
137
|
-
}
|
|
138
|
-
);
|
|
139
|
-
});
|
|
140
|
-
var MenuItemText = React.forwardRef(function MenuItemText2(props, ref) {
|
|
141
|
-
const { className, ...rest } = props;
|
|
142
|
-
return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
|
|
143
|
-
});
|
|
144
|
-
var MenuItemCommand = React.forwardRef(function MenuItemCommand2(props, ref) {
|
|
145
|
-
const { className, ...rest } = props;
|
|
146
|
-
return /* @__PURE__ */ jsx(
|
|
147
|
-
"span",
|
|
148
|
-
{
|
|
149
|
-
ref,
|
|
150
|
-
className: cn("ml-auto text-xs tracking-widest opacity-60", className),
|
|
151
|
-
...rest
|
|
152
|
-
}
|
|
153
|
-
);
|
|
154
|
-
});
|
|
155
|
-
var MenuSeparator = React.forwardRef(function MenuSeparator2(props, ref) {
|
|
156
|
-
const { className, ...rest } = props;
|
|
157
|
-
return /* @__PURE__ */ jsx(
|
|
158
|
-
DropdownMenu.Separator,
|
|
159
|
-
{
|
|
160
|
-
ref,
|
|
161
|
-
className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
|
|
162
|
-
...rest
|
|
163
|
-
}
|
|
164
|
-
);
|
|
165
|
-
});
|
|
166
|
-
var MenuItemGroup = React.forwardRef(function MenuItemGroup2(props, ref) {
|
|
167
|
-
const { title, children, className, ...rest } = props;
|
|
168
|
-
return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
|
|
169
|
-
title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
|
|
170
|
-
children
|
|
171
|
-
] });
|
|
172
|
-
});
|
|
173
|
-
var MenuArrow = React.forwardRef(function MenuArrow2(props, ref) {
|
|
174
|
-
const { className, ...rest } = props;
|
|
175
|
-
return /* @__PURE__ */ jsx(
|
|
176
|
-
DropdownMenu.Arrow,
|
|
177
|
-
{
|
|
178
|
-
ref,
|
|
179
|
-
className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
|
|
180
|
-
...rest
|
|
181
|
-
}
|
|
182
|
-
);
|
|
183
|
-
});
|
|
184
|
-
var MenuCheckboxItem = React.forwardRef(function MenuCheckboxItem2(props, ref) {
|
|
185
|
-
const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
|
|
186
|
-
return /* @__PURE__ */ jsxs(
|
|
187
|
-
DropdownMenu.CheckboxItem,
|
|
188
|
-
{
|
|
189
|
-
ref,
|
|
190
|
-
checked,
|
|
191
|
-
onCheckedChange,
|
|
192
|
-
onClick,
|
|
193
|
-
className: cn(
|
|
194
|
-
"relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
|
|
195
|
-
"outline-none transition-colors",
|
|
196
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
197
|
-
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
198
|
-
className
|
|
199
|
-
),
|
|
200
|
-
...rest,
|
|
201
|
-
children: [
|
|
202
|
-
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
|
|
203
|
-
children
|
|
204
|
-
]
|
|
205
|
-
}
|
|
206
|
-
);
|
|
207
|
-
});
|
|
208
|
-
var MenuRadioItemGroup = React.forwardRef(function MenuRadioItemGroup2(props, ref) {
|
|
209
|
-
const { value, onValueChange, ...rest } = props;
|
|
210
|
-
return /* @__PURE__ */ jsx(
|
|
211
|
-
DropdownMenu.RadioGroup,
|
|
212
|
-
{
|
|
213
|
-
ref,
|
|
214
|
-
value,
|
|
215
|
-
onValueChange,
|
|
216
|
-
...rest
|
|
217
|
-
}
|
|
218
|
-
);
|
|
219
|
-
});
|
|
220
|
-
var MenuRadioItem = React.forwardRef(function MenuRadioItem2(props, ref) {
|
|
221
|
-
const { className, children, value, onClick, ...rest } = props;
|
|
222
|
-
const { value: _v, ...radixRest } = rest;
|
|
223
|
-
return /* @__PURE__ */ jsxs(
|
|
224
|
-
DropdownMenu.RadioItem,
|
|
225
|
-
{
|
|
226
|
-
ref,
|
|
227
|
-
value,
|
|
228
|
-
onClick,
|
|
229
|
-
className: cn(
|
|
230
|
-
"relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
|
|
231
|
-
"outline-none transition-colors",
|
|
232
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
233
|
-
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
234
|
-
className
|
|
235
|
-
),
|
|
236
|
-
children: [
|
|
237
|
-
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
|
|
238
|
-
/* @__PURE__ */ jsx("span", { children })
|
|
239
|
-
]
|
|
240
|
-
}
|
|
241
|
-
);
|
|
242
|
-
});
|
|
243
|
-
var MenuContextTrigger = React.forwardRef(function MenuContextTrigger2(props, ref) {
|
|
244
|
-
const { asChild: _asChild, ...rest } = props;
|
|
245
|
-
return /* @__PURE__ */ jsx("span", { ref, ...rest });
|
|
246
|
-
});
|
|
247
|
-
var MenuTriggerItem = React.forwardRef(function MenuTriggerItem2(props, ref) {
|
|
248
|
-
const { startIcon, children, className, ...rest } = props;
|
|
249
|
-
return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
|
|
250
|
-
DropdownMenu.SubTrigger,
|
|
251
|
-
{
|
|
252
|
-
ref,
|
|
253
|
-
className: cn(
|
|
254
|
-
"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
|
|
255
|
-
"outline-none transition-colors",
|
|
256
|
-
"data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
|
|
257
|
-
className
|
|
258
|
-
),
|
|
259
|
-
...rest,
|
|
260
|
-
children: [
|
|
261
|
-
startIcon,
|
|
262
|
-
/* @__PURE__ */ jsx("span", { className: "flex-1", children }),
|
|
263
|
-
/* @__PURE__ */ jsx(LuChevronRight, { className: "h-4 w-4" })
|
|
264
|
-
]
|
|
265
|
-
}
|
|
266
|
-
) });
|
|
267
|
-
});
|
|
268
|
-
|
|
269
|
-
export { MenuArrow, MenuCheckboxItem, MenuContent, MenuContextTrigger, MenuItem, MenuItemCommand, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem };
|