@fanvue/ui 3.15.0 → 3.16.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/cjs/components/AudioRecordButton/AudioRecordButton.cjs +54 -0
- package/dist/cjs/components/AudioRecordButton/AudioRecordButton.cjs.map +1 -0
- package/dist/cjs/components/AudioUpload/AudioUpload.cjs +5 -5
- package/dist/cjs/components/AudioUpload/AudioUpload.cjs.map +1 -1
- package/dist/cjs/components/ChatInput/ChatInput.cjs +6 -11
- package/dist/cjs/components/ChatInput/ChatInput.cjs.map +1 -1
- package/dist/cjs/components/ChatMessage/ChatMessage.cjs +228 -0
- package/dist/cjs/components/ChatMessage/ChatMessage.cjs.map +1 -0
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs +160 -71
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/cjs/components/Icons/DenseGridViewIcon.cjs +52 -0
- package/dist/cjs/components/Icons/DenseGridViewIcon.cjs.map +1 -0
- package/dist/cjs/components/MediaStatusIndicator/MediaStatusIndicator.cjs +66 -0
- package/dist/cjs/components/MediaStatusIndicator/MediaStatusIndicator.cjs.map +1 -0
- package/dist/cjs/components/Select/Select.cjs +61 -17
- package/dist/cjs/components/Select/Select.cjs.map +1 -1
- package/dist/cjs/components/SubscribeButton/SubscribeButton.cjs +53 -0
- package/dist/cjs/components/SubscribeButton/SubscribeButton.cjs.map +1 -0
- package/dist/cjs/index.cjs +10 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/AudioRecordButton/AudioRecordButton.mjs +37 -0
- package/dist/components/AudioRecordButton/AudioRecordButton.mjs.map +1 -0
- package/dist/components/AudioUpload/AudioUpload.mjs +5 -5
- package/dist/components/AudioUpload/AudioUpload.mjs.map +1 -1
- package/dist/components/ChatInput/ChatInput.mjs +6 -11
- package/dist/components/ChatInput/ChatInput.mjs.map +1 -1
- package/dist/components/ChatMessage/ChatMessage.mjs +211 -0
- package/dist/components/ChatMessage/ChatMessage.mjs.map +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.mjs +161 -72
- package/dist/components/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/dist/components/Icons/DenseGridViewIcon.mjs +35 -0
- package/dist/components/Icons/DenseGridViewIcon.mjs.map +1 -0
- package/dist/components/MediaStatusIndicator/MediaStatusIndicator.mjs +49 -0
- package/dist/components/MediaStatusIndicator/MediaStatusIndicator.mjs.map +1 -0
- package/dist/components/Select/Select.mjs +61 -17
- package/dist/components/Select/Select.mjs.map +1 -1
- package/dist/components/SubscribeButton/SubscribeButton.mjs +36 -0
- package/dist/components/SubscribeButton/SubscribeButton.mjs.map +1 -0
- package/dist/index.d.ts +245 -4
- package/dist/index.mjs +10 -0
- package/dist/index.mjs.map +1 -1
- package/dist/styles/theme.css +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
4
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
5
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
5
6
|
import * as React from "react";
|
|
6
7
|
import { cn } from "../../utils/cn.mjs";
|
|
7
8
|
import { FLOATING_CONTENT_COLLISION_PADDING } from "../../utils/floatingContentCollisionPadding.mjs";
|
|
9
|
+
import { Drawer, DrawerContent, DrawerTrigger } from "../Drawer/Drawer.mjs";
|
|
8
10
|
import { IconButton } from "../IconButton/IconButton.mjs";
|
|
11
|
+
import { CheckIcon } from "../Icons/CheckIcon.mjs";
|
|
9
12
|
import { CloseIcon } from "../Icons/CloseIcon.mjs";
|
|
10
13
|
import { SearchIcon } from "../Icons/SearchIcon.mjs";
|
|
11
14
|
const TAP_MOVEMENT_THRESHOLD_PX = 10;
|
|
@@ -19,10 +22,12 @@ const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
|
|
|
19
22
|
"Enter"
|
|
20
23
|
]);
|
|
21
24
|
const ToggleOpenContext = React.createContext(null);
|
|
25
|
+
const DropdownMenuVariantContext = React.createContext("menu");
|
|
22
26
|
function DropdownMenu({
|
|
23
27
|
open: openProp,
|
|
24
28
|
defaultOpen,
|
|
25
29
|
onOpenChange,
|
|
30
|
+
variant = "menu",
|
|
26
31
|
children,
|
|
27
32
|
...props
|
|
28
33
|
}) {
|
|
@@ -31,11 +36,18 @@ function DropdownMenu({
|
|
|
31
36
|
defaultProp: defaultOpen ?? false,
|
|
32
37
|
onChange: onOpenChange
|
|
33
38
|
});
|
|
34
|
-
|
|
39
|
+
if (variant === "sheet") {
|
|
40
|
+
return /* @__PURE__ */ jsx(DropdownMenuVariantContext.Provider, { value: "sheet", children: /* @__PURE__ */ jsx(ToggleOpenContext.Provider, { value: setOpen, children: /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, children }) }) });
|
|
41
|
+
}
|
|
42
|
+
return /* @__PURE__ */ jsx(DropdownMenuVariantContext.Provider, { value: "menu", children: /* @__PURE__ */ jsx(ToggleOpenContext.Provider, { value: setOpen, children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { open, onOpenChange: setOpen, ...props, children }) }) });
|
|
35
43
|
}
|
|
36
44
|
const DropdownMenuTrigger = React.forwardRef((props, ref) => {
|
|
45
|
+
const variant = React.useContext(DropdownMenuVariantContext);
|
|
37
46
|
const toggleOpen = React.useContext(ToggleOpenContext);
|
|
38
47
|
const tapRef = React.useRef(null);
|
|
48
|
+
if (variant === "sheet") {
|
|
49
|
+
return /* @__PURE__ */ jsx(DrawerTrigger, { ...props, ref });
|
|
50
|
+
}
|
|
39
51
|
if (toggleOpen === null) {
|
|
40
52
|
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ...props, ref });
|
|
41
53
|
}
|
|
@@ -94,46 +106,68 @@ const DropdownMenuContent = React.forwardRef(
|
|
|
94
106
|
className,
|
|
95
107
|
style,
|
|
96
108
|
sideOffset = 4,
|
|
109
|
+
// Radix defaults `avoidCollisions` to true, so passing `collisionPadding`
|
|
110
|
+
// is enough to keep the menu flipping/shifting to stay on screen — no
|
|
111
|
+
// hand-rolled reposition logic needed.
|
|
97
112
|
collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,
|
|
113
|
+
children,
|
|
98
114
|
...props
|
|
99
|
-
}, ref) =>
|
|
100
|
-
|
|
101
|
-
{
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
zIndex: "var(--fanvue-ui-portal-z-index, 50)",
|
|
115
|
-
maxHeight: "var(--radix-dropdown-menu-content-available-height)",
|
|
116
|
-
...style
|
|
117
|
-
},
|
|
118
|
-
...props
|
|
115
|
+
}, ref) => {
|
|
116
|
+
const variant = React.useContext(DropdownMenuVariantContext);
|
|
117
|
+
if (variant === "sheet") {
|
|
118
|
+
return /* @__PURE__ */ jsx(
|
|
119
|
+
DrawerContent,
|
|
120
|
+
{
|
|
121
|
+
ref,
|
|
122
|
+
position: "bottom",
|
|
123
|
+
variant: "sheet",
|
|
124
|
+
className: cn("flex flex-col gap-1 p-1", className),
|
|
125
|
+
style,
|
|
126
|
+
...props,
|
|
127
|
+
children
|
|
128
|
+
}
|
|
129
|
+
);
|
|
119
130
|
}
|
|
120
|
-
|
|
131
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
132
|
+
DropdownMenuPrimitive.Content,
|
|
133
|
+
{
|
|
134
|
+
ref,
|
|
135
|
+
sideOffset,
|
|
136
|
+
collisionPadding,
|
|
137
|
+
className: cn(
|
|
138
|
+
"w-max min-w-(--radix-dropdown-menu-trigger-width) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-sm border border-neutral-alphas-200 bg-surface-primary p-1 text-content-primary shadow-lg",
|
|
139
|
+
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
140
|
+
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
141
|
+
"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2",
|
|
142
|
+
"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
|
|
143
|
+
className
|
|
144
|
+
),
|
|
145
|
+
style: {
|
|
146
|
+
zIndex: "var(--fanvue-ui-portal-z-index, 50)",
|
|
147
|
+
maxHeight: "var(--radix-dropdown-menu-content-available-height)",
|
|
148
|
+
...style
|
|
149
|
+
},
|
|
150
|
+
...props,
|
|
151
|
+
children
|
|
152
|
+
}
|
|
153
|
+
) });
|
|
154
|
+
}
|
|
121
155
|
);
|
|
122
156
|
DropdownMenuContent.displayName = "DropdownMenuContent";
|
|
123
157
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
|
124
158
|
DropdownMenuGroup.displayName = "DropdownMenuGroup";
|
|
125
|
-
const DropdownMenuLabel = React.forwardRef(({ className, position = "default", ...props }, ref) =>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
)
|
|
134
|
-
...props
|
|
159
|
+
const DropdownMenuLabel = React.forwardRef(({ className, position = "default", ...props }, ref) => {
|
|
160
|
+
const variant = React.useContext(DropdownMenuVariantContext);
|
|
161
|
+
const labelClassName = cn(
|
|
162
|
+
"typography-description-12px-regular flex items-center px-3 text-content-secondary",
|
|
163
|
+
position === "top" ? "py-2" : "pb-2 pt-4",
|
|
164
|
+
className
|
|
165
|
+
);
|
|
166
|
+
if (variant === "sheet") {
|
|
167
|
+
return /* @__PURE__ */ jsx("div", { ref, className: labelClassName, ...props });
|
|
135
168
|
}
|
|
136
|
-
)
|
|
169
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, { ref, className: labelClassName, ...props });
|
|
170
|
+
});
|
|
137
171
|
DropdownMenuLabel.displayName = "DropdownMenuLabel";
|
|
138
172
|
const SIZE_NORMALIZED = {
|
|
139
173
|
"40": "40",
|
|
@@ -145,14 +179,18 @@ const ITEM_SIZE_CLASSES = {
|
|
|
145
179
|
"40": "min-h-10 py-2 typography-body-default-16px-regular",
|
|
146
180
|
"32": "min-h-8 py-[7px] typography-body-small-14px-regular"
|
|
147
181
|
};
|
|
148
|
-
const ITEM_SELECTED_TYPOGRAPHY = {
|
|
149
|
-
"40": "typography-body-default-16px-semibold",
|
|
150
|
-
"32": "typography-body-small-14px-semibold"
|
|
151
|
-
};
|
|
152
182
|
const ITEM_COUNT_TYPOGRAPHY = {
|
|
153
183
|
"40": "typography-body-default-16px-regular",
|
|
154
184
|
"32": "typography-body-small-14px-regular"
|
|
155
185
|
};
|
|
186
|
+
function SelectedCheckIndicator({ hasDescription }) {
|
|
187
|
+
return /* @__PURE__ */ jsx(
|
|
188
|
+
CheckIcon,
|
|
189
|
+
{
|
|
190
|
+
className: cn("size-4 shrink-0 text-content-primary", hasDescription && "self-start")
|
|
191
|
+
}
|
|
192
|
+
);
|
|
193
|
+
}
|
|
156
194
|
const DropdownMenuItem = React.forwardRef(
|
|
157
195
|
({
|
|
158
196
|
size = "40",
|
|
@@ -166,8 +204,12 @@ const DropdownMenuItem = React.forwardRef(
|
|
|
166
204
|
className,
|
|
167
205
|
children,
|
|
168
206
|
asChild,
|
|
207
|
+
onSelect,
|
|
208
|
+
disabled,
|
|
169
209
|
...props
|
|
170
210
|
}, ref) => {
|
|
211
|
+
const variant = React.useContext(DropdownMenuVariantContext);
|
|
212
|
+
const toggleOpen = React.useContext(ToggleOpenContext);
|
|
171
213
|
const normalizedSize = SIZE_NORMALIZED[size];
|
|
172
214
|
const hasDescription = description != null;
|
|
173
215
|
const hasAvatar = avatar != null;
|
|
@@ -180,17 +222,19 @@ const DropdownMenuItem = React.forwardRef(
|
|
|
180
222
|
hasAvatar && !hasDescription && normalizedSize === "32" && "py-1",
|
|
181
223
|
"data-[highlighted]:bg-neutral-alphas-50",
|
|
182
224
|
"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled",
|
|
225
|
+
"disabled:cursor-not-allowed disabled:text-content-disabled",
|
|
226
|
+
// Sheet-variant asChild items are marked disabled via aria-disabled
|
|
227
|
+
// (see below), not the native disabled attribute or Radix's
|
|
228
|
+
// data-disabled — neither selector above matches them.
|
|
229
|
+
"aria-disabled:cursor-not-allowed aria-disabled:text-content-disabled",
|
|
183
230
|
destructive && "text-error-content",
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
],
|
|
231
|
+
// bg-interaction-hover aliases to the same token as the plain hover
|
|
232
|
+
// background above, so a selected row would be indistinguishable from a
|
|
233
|
+
// hovered-but-unselected one. Use the next step up the neutral-alphas
|
|
234
|
+
// ramp instead (still a subtle overlay, not the heavy filled style).
|
|
235
|
+
selected && ["bg-neutral-alphas-100", "data-[highlighted]:bg-neutral-alphas-200"],
|
|
189
236
|
className
|
|
190
237
|
);
|
|
191
|
-
if (asChild) {
|
|
192
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, asChild: true, className: itemClassName, ...props, children });
|
|
193
|
-
}
|
|
194
238
|
const iconAlignClassName = hasDescription ? "flex shrink-0 items-center pt-1" : null;
|
|
195
239
|
const countNode = count != null && /* @__PURE__ */ jsx(
|
|
196
240
|
"span",
|
|
@@ -198,41 +242,85 @@ const DropdownMenuItem = React.forwardRef(
|
|
|
198
242
|
className: cn(
|
|
199
243
|
"shrink-0 tabular-nums",
|
|
200
244
|
ITEM_COUNT_TYPOGRAPHY[normalizedSize],
|
|
201
|
-
destructive ? "text-error-content" :
|
|
245
|
+
destructive ? "text-error-content" : "text-content-tertiary",
|
|
202
246
|
"group-data-[disabled]:text-content-disabled"
|
|
203
247
|
),
|
|
204
248
|
children: count
|
|
205
249
|
}
|
|
206
250
|
);
|
|
207
|
-
|
|
251
|
+
const trailingNode = trailingIcon != null ? hasDescription ? /* @__PURE__ */ jsx("span", { className: iconAlignClassName, children: trailingIcon }) : trailingIcon : selected && /* @__PURE__ */ jsx(SelectedCheckIndicator, { hasDescription });
|
|
252
|
+
const itemChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
208
253
|
avatar != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: avatar }) : leadingIcon != null && (hasDescription ? /* @__PURE__ */ jsx("span", { className: iconAlignClassName, children: leadingIcon }) : leadingIcon),
|
|
209
254
|
hasDescription ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
210
255
|
/* @__PURE__ */ jsx("span", { className: "truncate", children }),
|
|
211
|
-
/* @__PURE__ */ jsx(
|
|
212
|
-
"span",
|
|
213
|
-
{
|
|
214
|
-
className: cn(
|
|
215
|
-
"typography-body-small-14px-regular truncate",
|
|
216
|
-
selected ? "text-content-primary-inverted" : "text-content-secondary"
|
|
217
|
-
),
|
|
218
|
-
children: description
|
|
219
|
-
}
|
|
220
|
-
)
|
|
256
|
+
/* @__PURE__ */ jsx("span", { className: "typography-body-small-14px-regular truncate text-content-secondary", children: description })
|
|
221
257
|
] }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
|
|
222
258
|
countNode,
|
|
223
|
-
|
|
259
|
+
trailingNode
|
|
224
260
|
] });
|
|
261
|
+
if (variant === "sheet") {
|
|
262
|
+
const Comp = asChild ? Slot : "button";
|
|
263
|
+
const { onClick: consumerOnClick, ...restProps } = props;
|
|
264
|
+
const sheetSpecificProps = !asChild ? { type: "button", disabled } : disabled ? { "aria-disabled": true } : {};
|
|
265
|
+
return /* @__PURE__ */ jsx(
|
|
266
|
+
Comp,
|
|
267
|
+
{
|
|
268
|
+
ref,
|
|
269
|
+
...restProps,
|
|
270
|
+
...sheetSpecificProps,
|
|
271
|
+
role: "option",
|
|
272
|
+
"aria-selected": selected,
|
|
273
|
+
className: itemClassName,
|
|
274
|
+
onClick: (event) => {
|
|
275
|
+
if (disabled) {
|
|
276
|
+
event.preventDefault();
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
consumerOnClick?.(event);
|
|
280
|
+
if (event.defaultPrevented) return;
|
|
281
|
+
onSelect?.(event.nativeEvent);
|
|
282
|
+
if (!event.nativeEvent.defaultPrevented) toggleOpen?.(() => false);
|
|
283
|
+
},
|
|
284
|
+
children: asChild ? children : itemChildren
|
|
285
|
+
}
|
|
286
|
+
);
|
|
287
|
+
}
|
|
288
|
+
if (asChild) {
|
|
289
|
+
return /* @__PURE__ */ jsx(
|
|
290
|
+
DropdownMenuPrimitive.Item,
|
|
291
|
+
{
|
|
292
|
+
ref,
|
|
293
|
+
asChild: true,
|
|
294
|
+
className: itemClassName,
|
|
295
|
+
disabled,
|
|
296
|
+
onSelect,
|
|
297
|
+
...props,
|
|
298
|
+
children
|
|
299
|
+
}
|
|
300
|
+
);
|
|
301
|
+
}
|
|
302
|
+
return /* @__PURE__ */ jsx(
|
|
303
|
+
DropdownMenuPrimitive.Item,
|
|
304
|
+
{
|
|
305
|
+
ref,
|
|
306
|
+
className: itemClassName,
|
|
307
|
+
disabled,
|
|
308
|
+
onSelect,
|
|
309
|
+
...props,
|
|
310
|
+
children: itemChildren
|
|
311
|
+
}
|
|
312
|
+
);
|
|
225
313
|
}
|
|
226
314
|
);
|
|
227
315
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
228
|
-
const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) =>
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
...props
|
|
316
|
+
const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => {
|
|
317
|
+
const variant = React.useContext(DropdownMenuVariantContext);
|
|
318
|
+
const separatorClassName = cn("my-1 h-px bg-neutral-alphas-200", className);
|
|
319
|
+
if (variant === "sheet") {
|
|
320
|
+
return /* @__PURE__ */ jsx("hr", { ref, className: separatorClassName, ...props });
|
|
234
321
|
}
|
|
235
|
-
)
|
|
322
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: separatorClassName, ...props });
|
|
323
|
+
});
|
|
236
324
|
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
|
237
325
|
const DropdownMenuHeader = React.forwardRef(
|
|
238
326
|
({
|
|
@@ -338,8 +426,11 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, helper, s
|
|
|
338
426
|
"group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none",
|
|
339
427
|
"data-[highlighted]:bg-neutral-alphas-50",
|
|
340
428
|
"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled",
|
|
341
|
-
|
|
342
|
-
|
|
429
|
+
// See DropdownMenuItem above: bg-interaction-hover aliases to the same
|
|
430
|
+
// token as the plain hover background, so it can't distinguish the
|
|
431
|
+
// checked state from an unchecked-but-hovered row.
|
|
432
|
+
"data-[state=checked]:bg-neutral-alphas-100",
|
|
433
|
+
"data-[state=checked]:data-[highlighted]:bg-neutral-alphas-200",
|
|
343
434
|
className
|
|
344
435
|
),
|
|
345
436
|
...props,
|
|
@@ -349,11 +440,10 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, helper, s
|
|
|
349
440
|
{
|
|
350
441
|
className: cn(
|
|
351
442
|
"mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border border-icons-primary",
|
|
352
|
-
"group-data-[disabled]:border-content-disabled"
|
|
353
|
-
"group-data-[state=checked]:border-icons-primary-inverted"
|
|
443
|
+
"group-data-[disabled]:border-content-disabled"
|
|
354
444
|
),
|
|
355
445
|
"aria-hidden": "true",
|
|
356
|
-
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-content-primary
|
|
446
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-content-primary" }) })
|
|
357
447
|
}
|
|
358
448
|
),
|
|
359
449
|
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
|
|
@@ -363,7 +453,6 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, helper, s
|
|
|
363
453
|
{
|
|
364
454
|
className: cn(
|
|
365
455
|
"typography-description-12px-regular text-content-secondary",
|
|
366
|
-
"group-data-[state=checked]:text-content-primary-inverted",
|
|
367
456
|
"group-data-[disabled]:text-content-disabled"
|
|
368
457
|
),
|
|
369
458
|
children: helper
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.mjs","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SearchIcon } from \"../Icons/SearchIcon\";\n\n// Movement, in CSS px, above which a touch press-and-release counts as a drag.\nconst TAP_MOVEMENT_THRESHOLD_PX = 10;\n\n// Keys that the menu must keep handling even when focus is inside a child\n// input — arrows move the highlight into the list, Tab leaves the menu, and\n// Enter / Escape close it.\nconst NAVIGATION_KEYS = new Set([\n \"ArrowDown\",\n \"ArrowUp\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Escape\",\n \"Tab\",\n \"Enter\",\n]);\n\ntype ActiveTap = {\n pointerId: number;\n x: number;\n y: number;\n movedPastThreshold: boolean;\n};\n\n// Lets DropdownMenuTrigger toggle the menu directly so it can gate on touch\n// movement — see radix-ui/primitives#1912.\nconst ToggleOpenContext = React.createContext<\n ((updater: (prev: boolean) => boolean) => void) | null\n>(null);\n\n/** Props for the {@link DropdownMenu} root component. */\nexport interface DropdownMenuProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\n\n/** Root component that manages open/close state for a dropdown menu. */\nexport function DropdownMenu({\n open: openProp,\n defaultOpen,\n onOpenChange,\n children,\n ...props\n}: DropdownMenuProps) {\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n });\n\n return (\n <ToggleOpenContext.Provider value={setOpen}>\n <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n {children}\n </DropdownMenuPrimitive.Root>\n </ToggleOpenContext.Provider>\n );\n}\n\n/** Props for the {@link DropdownMenuTrigger} component. */\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Trigger\n>;\n\n/**\n * The element that toggles the dropdown menu when clicked.\n *\n * On touch devices, the menu only opens if the press-and-release stays within\n * a small movement threshold. A drag that incidentally ends over the trigger\n * (common when scrolling a feed on Android Chrome) is ignored. Mouse and\n * keyboard interactions are unchanged.\n */\nexport const DropdownMenuTrigger = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,\n DropdownMenuTriggerProps\n>((props, ref) => {\n const toggleOpen = React.useContext(ToggleOpenContext);\n const tapRef = React.useRef<ActiveTap | null>(null);\n\n // Used outside our DropdownMenu wrapper — fall through to Radix defaults.\n if (toggleOpen === null) {\n return <DropdownMenuPrimitive.Trigger {...props} ref={ref} />;\n }\n\n return (\n <DropdownMenuPrimitive.Trigger\n {...props}\n ref={ref}\n onPointerDown={(event) => {\n props.onPointerDown?.(event);\n if (event.pointerType === \"mouse\" || props.disabled) return;\n // Keep pointerup / pointercancel on this element if the finger drifts off.\n // Optional because jsdom (used in tests) doesn't implement it.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n tapRef.current = {\n pointerId: event.pointerId,\n x: event.clientX,\n y: event.clientY,\n movedPastThreshold: false,\n };\n // preventDefault stops Radix's pointerdown open path via composeEventHandlers.\n event.preventDefault();\n }}\n onPointerMove={(event) => {\n props.onPointerMove?.(event);\n const tap = tapRef.current;\n if (tap === null || event.pointerId !== tap.pointerId || tap.movedPastThreshold) {\n return;\n }\n const dx = event.clientX - tap.x;\n const dy = event.clientY - tap.y;\n if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {\n tap.movedPastThreshold = true;\n }\n }}\n onPointerUp={(event) => {\n props.onPointerUp?.(event);\n const tap = tapRef.current;\n if (tap === null || event.pointerId !== tap.pointerId) return;\n const wasDrag = tap.movedPastThreshold;\n tapRef.current = null;\n if (!wasDrag && !props.disabled) {\n toggleOpen((prev) => !prev);\n }\n }}\n onPointerCancel={(event) => {\n props.onPointerCancel?.(event);\n const tap = tapRef.current;\n if (tap !== null && event.pointerId === tap.pointerId) {\n tapRef.current = null;\n }\n }}\n />\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/** Props for the {@link DropdownMenuContent} component. */\nexport interface DropdownMenuContentProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/**\n * The positioned content panel rendered inside a portal.\n *\n * Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenuTrigger asChild>\n * <Button>Open</Button>\n * </DropdownMenuTrigger>\n * <DropdownMenuContent>\n * <DropdownMenuItem>Option 1</DropdownMenuItem>\n * <DropdownMenuItem>Option 2</DropdownMenuItem>\n * </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nexport const DropdownMenuContent = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n DropdownMenuContentProps\n>(\n (\n {\n className,\n style,\n sideOffset = 4,\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n ...props\n },\n ref,\n ) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n className={cn(\n \"w-max min-w-(--radix-dropdown-menu-trigger-width) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-sm border border-neutral-alphas-200 bg-surface-primary p-1 text-content-primary shadow-lg\",\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n className,\n )}\n style={{\n zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n ...style,\n }}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n ),\n);\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/** Props for the {@link DropdownMenuGroup} component. */\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Group\n>;\n\n/** Groups related menu items. Accepts an optional `DropdownMenuLabel`. */\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/** Vertical placement of a {@link DropdownMenuLabel} within its group. */\nexport type DropdownMenuLabelPosition = \"default\" | \"top\";\n\n/** Props for the {@link DropdownMenuLabel} component. */\nexport interface DropdownMenuLabelProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n /**\n * Vertical placement within the surrounding group. `\"top\"` is used for the\n * first label directly under a header; `\"default\"` adds extra top padding to\n * separate it from preceding items. @default \"default\"\n */\n position?: DropdownMenuLabelPosition;\n}\n\n/** A non-interactive label that groups related items within a menu. */\nexport const DropdownMenuLabel = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n DropdownMenuLabelProps\n>(({ className, position = \"default\", ...props }, ref) => (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"typography-description-12px-regular flex items-center px-3 text-content-secondary\",\n position === \"top\" ? \"py-2\" : \"pb-2 pt-4\",\n className,\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * Height preset for a dropdown menu item.\n *\n * `\"40\"` (default) and `\"32\"` are the v2 numeric tokens that mirror the Figma\n * design system. `\"sm\"` and `\"md\"` are deprecated aliases retained for\n * backwards compatibility — `\"sm\"` maps to `\"32\"`, `\"md\"` maps to `\"40\"`.\n */\nexport type DropdownMenuItemSize =\n | \"40\"\n | \"32\"\n /** @deprecated Use `\"32\"` instead. */\n | \"sm\"\n /** @deprecated Use `\"40\"` instead. */\n | \"md\";\n\nconst SIZE_NORMALIZED: Record<DropdownMenuItemSize, \"40\" | \"32\"> = {\n \"40\": \"40\",\n md: \"40\",\n \"32\": \"32\",\n sm: \"32\",\n};\n\nconst ITEM_SIZE_CLASSES: Record<\"40\" | \"32\", string> = {\n \"40\": \"min-h-10 py-2 typography-body-default-16px-regular\",\n \"32\": \"min-h-8 py-[7px] typography-body-small-14px-regular\",\n};\n\nconst ITEM_SELECTED_TYPOGRAPHY: Record<\"40\" | \"32\", string> = {\n \"40\": \"typography-body-default-16px-semibold\",\n \"32\": \"typography-body-small-14px-semibold\",\n};\n\nconst ITEM_COUNT_TYPOGRAPHY: Record<\"40\" | \"32\", string> = {\n \"40\": \"typography-body-default-16px-regular\",\n \"32\": \"typography-body-small-14px-regular\",\n};\n\nexport interface DropdownMenuItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n /** Height of the menu item row. @default \"40\" */\n size?: DropdownMenuItemSize;\n /** Applies the destructive (error) treatment. Use for irreversible actions. @default false */\n destructive?: boolean;\n /** Icon (or other node) rendered before the label. Ignored when {@link DropdownMenuItemProps.avatar} is set. */\n leadingIcon?: React.ReactNode;\n /**\n * Leading avatar rendered in place of {@link DropdownMenuItemProps.leadingIcon},\n * for rows that represent a person or account. Pass an `Avatar` sized to `24`.\n * Takes precedence over `leadingIcon`.\n */\n avatar?: React.ReactNode;\n /** Icon (or other node) rendered after the label. */\n trailingIcon?: React.ReactNode;\n /** Trailing count or number (e.g. an unread total) rendered before {@link DropdownMenuItemProps.trailingIcon}. */\n count?: React.ReactNode;\n /**\n * Optional secondary text rendered on a second line below the label. When\n * provided, the row switches to a two-line layout and the leading/trailing\n * icons align to the title line (top) rather than the row's vertical centre.\n */\n description?: React.ReactNode;\n /** Marks the item as the current selection in a single-select menu. @default false */\n selected?: boolean;\n}\n\n/**\n * An individual item within a {@link DropdownMenuContent}.\n *\n * @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n *\n * // Feature-rich row with an avatar and a trailing count\n * <DropdownMenuItem avatar={<Avatar size={24} src={src} />} count=\"12\">\n * Jane Doe\n * </DropdownMenuItem>\n *\n * // As a link\n * <DropdownMenuItem asChild>\n * <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n */\nexport const DropdownMenuItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n DropdownMenuItemProps\n>(\n (\n {\n size = \"40\",\n destructive,\n leadingIcon,\n avatar,\n trailingIcon,\n count,\n description,\n selected,\n className,\n children,\n asChild,\n ...props\n },\n ref,\n ) => {\n const normalizedSize = SIZE_NORMALIZED[size];\n const hasDescription = description != null;\n const hasAvatar = avatar != null;\n const itemClassName = cn(\n \"group flex w-full cursor-pointer gap-2 rounded-xs px-3 outline-none\",\n hasDescription ? \"items-start\" : \"items-center\",\n ITEM_SIZE_CLASSES[normalizedSize],\n // A 24px avatar would push the compact 32px row past its height with the\n // default padding; tighten it so the avatar variant keeps the 32px contract.\n hasAvatar && !hasDescription && normalizedSize === \"32\" && \"py-1\",\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n destructive && \"text-error-content\",\n selected && [\n \"bg-buttons-primary-default text-content-primary-inverted\",\n \"data-[highlighted]:bg-buttons-primary-default\",\n ITEM_SELECTED_TYPOGRAPHY[normalizedSize],\n ],\n className,\n );\n\n if (asChild) {\n return (\n <DropdownMenuPrimitive.Item ref={ref} asChild className={itemClassName} {...props}>\n {children}\n </DropdownMenuPrimitive.Item>\n );\n }\n\n // In the two-line (description) layout, icons sit on the title's line.\n // 24px title line-height vs 16px icon → 4px (pt-1) centres the icon on it.\n const iconAlignClassName = hasDescription ? \"flex shrink-0 items-center pt-1\" : null;\n\n const countNode = count != null && (\n <span\n className={cn(\n \"shrink-0 tabular-nums\",\n ITEM_COUNT_TYPOGRAPHY[normalizedSize],\n destructive\n ? \"text-error-content\"\n : selected\n ? \"text-content-primary-inverted\"\n : \"text-content-tertiary\",\n \"group-data-[disabled]:text-content-disabled\",\n )}\n >\n {count}\n </span>\n );\n\n return (\n <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n {avatar != null ? (\n <span className=\"shrink-0\">{avatar}</span>\n ) : (\n leadingIcon != null &&\n (hasDescription ? (\n <span className={iconAlignClassName!}>{leadingIcon}</span>\n ) : (\n leadingIcon\n ))\n )}\n {hasDescription ? (\n <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <span className=\"truncate\">{children}</span>\n <span\n className={cn(\n \"typography-body-small-14px-regular truncate\",\n selected ? \"text-content-primary-inverted\" : \"text-content-secondary\",\n )}\n >\n {description}\n </span>\n </span>\n ) : (\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n )}\n {countNode}\n {trailingIcon != null &&\n (hasDescription ? (\n <span className={iconAlignClassName!}>{trailingIcon}</span>\n ) : (\n trailingIcon\n ))}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/** Props for the {@link DropdownMenuSeparator} component. */\nexport interface DropdownMenuSeparatorProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/** Visual separator between groups of items. */\nexport const DropdownMenuSeparator = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"my-1 h-px bg-neutral-alphas-200\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\n/** Header type. `\"default\"` shows a title; `\"search\"` shows a search input. */\nexport type DropdownMenuHeaderType = \"default\" | \"search\";\n\n/** Header height preset. Matches the menu item sizing scale. */\nexport type DropdownMenuHeaderSize = \"40\" | \"32\";\n\n/** Search-input configuration for {@link DropdownMenuHeader} when `type=\"search\"`. */\nexport interface DropdownMenuHeaderSearchProps {\n /** Controlled value of the search input. */\n value?: string;\n /** Uncontrolled default value. */\n defaultValue?: string;\n /** Fires when the input value changes. */\n onChange?: (value: string) => void;\n /** Placeholder text shown when the input is empty. @default \"Search…\" */\n placeholder?: string;\n /** Accessible label for the search input. @default \"Search\" */\n \"aria-label\"?: string;\n}\n\nexport interface DropdownMenuHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Visual type. `\"default\"` shows a title; `\"search\"` shows a search input. @default \"default\" */\n type?: DropdownMenuHeaderType;\n /** Height preset for the header row. @default \"40\" */\n size?: DropdownMenuHeaderSize;\n /** Title text shown when `type=\"default\"`. Ignored if `children` is provided. */\n title?: string;\n /** Configuration for the embedded search input when `type=\"search\"`. */\n searchProps?: DropdownMenuHeaderSearchProps;\n /** Whether to render the close icon button on the right. @default true */\n showClose?: boolean;\n /** Fires when the close icon button is activated. */\n onClose?: () => void;\n /** Accessible label for the close button. @default \"Close menu\" */\n closeLabel?: string;\n}\n\n/**\n * Optional header rendered at the top of a {@link DropdownMenuContent}. Use\n * `type=\"default\"` to title the menu, or `type=\"search\"` to embed a search\n * input for filtering long lists.\n *\n * Renders an inset separator beneath the row so it slots cleanly above the\n * first group of items.\n *\n * @example\n * ```tsx\n * <DropdownMenuContent>\n * <DropdownMenuHeader title=\"Sort by\" onClose={() => setOpen(false)} />\n * <DropdownMenuItem>Newest</DropdownMenuItem>\n * <DropdownMenuItem>Oldest</DropdownMenuItem>\n * </DropdownMenuContent>\n * ```\n */\nexport const DropdownMenuHeader = React.forwardRef<HTMLDivElement, DropdownMenuHeaderProps>(\n (\n {\n type = \"default\",\n size = \"40\",\n title,\n searchProps,\n showClose = true,\n onClose,\n closeLabel = \"Close menu\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const titleTypography =\n size === \"32\"\n ? \"typography-body-small-14px-semibold\"\n : \"typography-body-default-16px-semibold\";\n const toggleOpen = React.useContext(ToggleOpenContext);\n\n const handleClose = () => {\n onClose?.();\n // Also dismiss the Radix menu when used in uncontrolled mode — otherwise\n // the close button would look broken to consumers that don't wire up\n // `open` / `onOpenChange` themselves.\n toggleOpen?.(() => false);\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n \"flex flex-col px-1 pt-1 mb-1\",\n // Search needs an 8px gap between the input and the divider; the\n // default (title) variant uses 4px because the title baseline sits\n // closer to the divider naturally.\n type === \"search\" ? \"gap-2\" : \"gap-1\",\n className,\n )}\n {...props}\n >\n <div className=\"flex items-center gap-4 pl-2\">\n {type === \"default\" ? (\n <div className={cn(\"min-w-0 flex-1 truncate text-content-primary\", titleTypography)}>\n {children ?? title}\n </div>\n ) : (\n <SearchInput {...searchProps} />\n )}\n {showClose && (\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<CloseIcon />}\n onClick={handleClose}\n aria-label={closeLabel}\n />\n )}\n </div>\n <DropdownMenuSeparator className=\"my-0\" />\n </div>\n );\n },\n);\nDropdownMenuHeader.displayName = \"DropdownMenuHeader\";\n\nfunction SearchInput({\n value,\n defaultValue,\n onChange,\n placeholder = \"Search\\u2026\",\n \"aria-label\": ariaLabel = \"Search\",\n}: DropdownMenuHeaderSearchProps = {}) {\n return (\n <label\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-xs border border-border-primary\",\n \"bg-neutral-alphas-50 px-3 py-1 text-content-primary\",\n \"focus-within:shadow-focus-ring focus-within:outline-none\",\n )}\n >\n <SearchIcon className=\"size-4 shrink-0 text-content-tertiary\" aria-hidden=\"true\" />\n <input\n type=\"search\"\n className={cn(\n \"typography-body-default-16px-regular min-w-0 flex-1 bg-transparent outline-none\",\n \"placeholder:text-content-tertiary\",\n )}\n value={value}\n defaultValue={defaultValue}\n placeholder={placeholder}\n aria-label={ariaLabel}\n onChange={(event) => onChange?.(event.target.value)}\n // Radix DropdownMenu listens for keystrokes on Content for its\n // typeahead (typing letters jumps focus to a matching item). That\n // listener steals focus from the input after the first letter, so we\n // stop character keys from bubbling. Navigation keys (arrows / Tab /\n // Escape / Enter) are still allowed through so the user can leave the\n // input for the list or close the menu. Pointer events are stopped so\n // clicking back into the input doesn't fight the menu's focus\n // management either.\n onKeyDown={(event) => {\n if (!NAVIGATION_KEYS.has(event.key)) event.stopPropagation();\n }}\n onPointerDown={(event) => event.stopPropagation()}\n onMouseDown={(event) => event.stopPropagation()}\n />\n </label>\n );\n}\n\n/** Props for the {@link DropdownMenuRadioGroup} component. */\nexport interface DropdownMenuRadioGroupProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {}\n\n/**\n * Groups {@link DropdownMenuRadioItem} children so they behave as a\n * single-select set. Controlled via `value`/`onValueChange`.\n *\n * @example\n * ```tsx\n * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>\n * <DropdownMenuRadioItem value=\"newest\">Newest first</DropdownMenuRadioItem>\n * <DropdownMenuRadioItem value=\"oldest\">Oldest first</DropdownMenuRadioItem>\n * </DropdownMenuRadioGroup>\n * ```\n */\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/** Height preset for a {@link DropdownMenuRadioItem}. */\nexport type DropdownMenuRadioItemSize = \"40\";\n\nexport interface DropdownMenuRadioItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n /** Optional secondary text shown below the title. */\n helper?: string;\n /** Height of the item row. @default \"40\" */\n size?: DropdownMenuRadioItemSize;\n}\n\n/**\n * A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows\n * a circular indicator that fills when selected, plus an optional helper line\n * underneath the title.\n */\nexport const DropdownMenuRadioItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n DropdownMenuRadioItemProps\n>(({ className, children, helper, size: _size = \"40\", ...props }, ref) => {\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none\",\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n \"data-[state=checked]:bg-buttons-primary-default data-[state=checked]:text-content-primary-inverted\",\n \"data-[state=checked]:data-[highlighted]:bg-buttons-primary-default\",\n className,\n )}\n {...props}\n >\n <span\n className={cn(\n \"mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border border-icons-primary\",\n \"group-data-[disabled]:border-content-disabled\",\n \"group-data-[state=checked]:border-icons-primary-inverted\",\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator asChild>\n <span className=\"size-2 rounded-full bg-content-primary-inverted\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <span className=\"typography-body-default-16px-semibold truncate\">{children}</span>\n {helper && (\n <span\n className={cn(\n \"typography-description-12px-regular text-content-secondary\",\n \"group-data-[state=checked]:text-content-primary-inverted\",\n \"group-data-[disabled]:text-content-disabled\",\n )}\n >\n {helper}\n </span>\n )}\n </span>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DropdownMenu.mjs","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { Drawer, DrawerContent, DrawerTrigger } from \"../Drawer/Drawer\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SearchIcon } from \"../Icons/SearchIcon\";\n\n// Movement, in CSS px, above which a touch press-and-release counts as a drag.\nconst TAP_MOVEMENT_THRESHOLD_PX = 10;\n\n// Keys that the menu must keep handling even when focus is inside a child\n// input — arrows move the highlight into the list, Tab leaves the menu, and\n// Enter / Escape close it.\nconst NAVIGATION_KEYS = new Set([\n \"ArrowDown\",\n \"ArrowUp\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Escape\",\n \"Tab\",\n \"Enter\",\n]);\n\ntype ActiveTap = {\n pointerId: number;\n x: number;\n y: number;\n movedPastThreshold: boolean;\n};\n\n// Lets DropdownMenuTrigger toggle the menu directly so it can gate on touch\n// movement — see radix-ui/primitives#1912.\nconst ToggleOpenContext = React.createContext<\n ((updater: (prev: boolean) => boolean) => void) | null\n>(null);\n\n/**\n * How a {@link DropdownMenu} presents its content.\n * - `\"menu\"` (default) — a Radix-positioned panel anchored to the trigger.\n * - `\"sheet\"` — a bottom drawer (via {@link Drawer}), for mobile/touch viewports.\n *\n * The viewport decision belongs to the consumer (it owns the breakpoint\n * source of truth), so pass e.g. `variant={isDesktop ? \"menu\" : \"sheet\"}`.\n */\nexport type DropdownMenuVariant = \"menu\" | \"sheet\";\n\nconst DropdownMenuVariantContext = React.createContext<DropdownMenuVariant>(\"menu\");\n\n/** Props for the {@link DropdownMenu} root component. */\nexport interface DropdownMenuProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {\n /** How the menu presents its content. @default \"menu\" */\n variant?: DropdownMenuVariant;\n}\n\n/** Root component that manages open/close state for a dropdown menu. */\nexport function DropdownMenu({\n open: openProp,\n defaultOpen,\n onOpenChange,\n variant = \"menu\",\n children,\n ...props\n}: DropdownMenuProps) {\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n });\n\n if (variant === \"sheet\") {\n return (\n <DropdownMenuVariantContext.Provider value=\"sheet\">\n <ToggleOpenContext.Provider value={setOpen}>\n <Drawer open={open} onOpenChange={setOpen}>\n {children}\n </Drawer>\n </ToggleOpenContext.Provider>\n </DropdownMenuVariantContext.Provider>\n );\n }\n\n return (\n <DropdownMenuVariantContext.Provider value=\"menu\">\n <ToggleOpenContext.Provider value={setOpen}>\n <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n {children}\n </DropdownMenuPrimitive.Root>\n </ToggleOpenContext.Provider>\n </DropdownMenuVariantContext.Provider>\n );\n}\n\n/** Props for the {@link DropdownMenuTrigger} component. */\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Trigger\n>;\n\n/**\n * The element that toggles the dropdown menu when clicked.\n *\n * On touch devices, the menu only opens if the press-and-release stays within\n * a small movement threshold. A drag that incidentally ends over the trigger\n * (common when scrolling a feed on Android Chrome) is ignored. Mouse and\n * keyboard interactions are unchanged.\n */\nexport const DropdownMenuTrigger = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,\n DropdownMenuTriggerProps\n>((props, ref) => {\n const variant = React.useContext(DropdownMenuVariantContext);\n const toggleOpen = React.useContext(ToggleOpenContext);\n const tapRef = React.useRef<ActiveTap | null>(null);\n\n // The sheet variant opens a Drawer (Dialog), which already suppresses\n // scroll-drag-end synthetic clicks itself — no need for the touch-tap gating below.\n if (variant === \"sheet\") {\n return <DrawerTrigger {...props} ref={ref} />;\n }\n\n // Used outside our DropdownMenu wrapper — fall through to Radix defaults.\n if (toggleOpen === null) {\n return <DropdownMenuPrimitive.Trigger {...props} ref={ref} />;\n }\n\n return (\n <DropdownMenuPrimitive.Trigger\n {...props}\n ref={ref}\n onPointerDown={(event) => {\n props.onPointerDown?.(event);\n if (event.pointerType === \"mouse\" || props.disabled) return;\n // Keep pointerup / pointercancel on this element if the finger drifts off.\n // Optional because jsdom (used in tests) doesn't implement it.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n tapRef.current = {\n pointerId: event.pointerId,\n x: event.clientX,\n y: event.clientY,\n movedPastThreshold: false,\n };\n // preventDefault stops Radix's pointerdown open path via composeEventHandlers.\n event.preventDefault();\n }}\n onPointerMove={(event) => {\n props.onPointerMove?.(event);\n const tap = tapRef.current;\n if (tap === null || event.pointerId !== tap.pointerId || tap.movedPastThreshold) {\n return;\n }\n const dx = event.clientX - tap.x;\n const dy = event.clientY - tap.y;\n if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {\n tap.movedPastThreshold = true;\n }\n }}\n onPointerUp={(event) => {\n props.onPointerUp?.(event);\n const tap = tapRef.current;\n if (tap === null || event.pointerId !== tap.pointerId) return;\n const wasDrag = tap.movedPastThreshold;\n tapRef.current = null;\n if (!wasDrag && !props.disabled) {\n toggleOpen((prev) => !prev);\n }\n }}\n onPointerCancel={(event) => {\n props.onPointerCancel?.(event);\n const tap = tapRef.current;\n if (tap !== null && event.pointerId === tap.pointerId) {\n tapRef.current = null;\n }\n }}\n />\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/** Props for the {@link DropdownMenuContent} component. */\nexport interface DropdownMenuContentProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/**\n * The positioned content panel rendered inside a portal.\n *\n * Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenuTrigger asChild>\n * <Button>Open</Button>\n * </DropdownMenuTrigger>\n * <DropdownMenuContent>\n * <DropdownMenuItem>Option 1</DropdownMenuItem>\n * <DropdownMenuItem>Option 2</DropdownMenuItem>\n * </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nexport const DropdownMenuContent = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n DropdownMenuContentProps\n>(\n (\n {\n className,\n style,\n sideOffset = 4,\n // Radix defaults `avoidCollisions` to true, so passing `collisionPadding`\n // is enough to keep the menu flipping/shifting to stay on screen — no\n // hand-rolled reposition logic needed.\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n children,\n ...props\n },\n ref,\n ) => {\n const variant = React.useContext(DropdownMenuVariantContext);\n\n if (variant === \"sheet\") {\n return (\n <DrawerContent\n ref={ref}\n position=\"bottom\"\n variant=\"sheet\"\n className={cn(\"flex flex-col gap-1 p-1\", className)}\n style={style}\n {...props}\n >\n {children}\n </DrawerContent>\n );\n }\n\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n className={cn(\n \"w-max min-w-(--radix-dropdown-menu-trigger-width) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-sm border border-neutral-alphas-200 bg-surface-primary p-1 text-content-primary shadow-lg\",\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n className,\n )}\n style={{\n zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n ...style,\n }}\n {...props}\n >\n {children}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/** Props for the {@link DropdownMenuGroup} component. */\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Group\n>;\n\n/**\n * Groups related menu items. Accepts an optional `DropdownMenuLabel`.\n *\n * Requires Radix menu context — not supported inside a `variant=\"sheet\"` menu.\n */\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/** Vertical placement of a {@link DropdownMenuLabel} within its group. */\nexport type DropdownMenuLabelPosition = \"default\" | \"top\";\n\n/** Props for the {@link DropdownMenuLabel} component. */\nexport interface DropdownMenuLabelProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n /**\n * Vertical placement within the surrounding group. `\"top\"` is used for the\n * first label directly under a header; `\"default\"` adds extra top padding to\n * separate it from preceding items. @default \"default\"\n */\n position?: DropdownMenuLabelPosition;\n}\n\n/** A non-interactive label that groups related items within a menu. */\nexport const DropdownMenuLabel = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n DropdownMenuLabelProps\n>(({ className, position = \"default\", ...props }, ref) => {\n const variant = React.useContext(DropdownMenuVariantContext);\n const labelClassName = cn(\n \"typography-description-12px-regular flex items-center px-3 text-content-secondary\",\n position === \"top\" ? \"py-2\" : \"pb-2 pt-4\",\n className,\n );\n\n // DropdownMenuPrimitive.Label requires Radix menu context, unavailable when\n // the sheet variant renders inside a Drawer (Dialog) instead.\n if (variant === \"sheet\") {\n return <div ref={ref} className={labelClassName} {...props} />;\n }\n\n return <DropdownMenuPrimitive.Label ref={ref} className={labelClassName} {...props} />;\n});\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * Height preset for a dropdown menu item.\n *\n * `\"40\"` (default) and `\"32\"` are the v2 numeric tokens that mirror the Figma\n * design system. `\"sm\"` and `\"md\"` are deprecated aliases retained for\n * backwards compatibility — `\"sm\"` maps to `\"32\"`, `\"md\"` maps to `\"40\"`.\n */\nexport type DropdownMenuItemSize =\n | \"40\"\n | \"32\"\n /** @deprecated Use `\"32\"` instead. */\n | \"sm\"\n /** @deprecated Use `\"40\"` instead. */\n | \"md\";\n\nconst SIZE_NORMALIZED: Record<DropdownMenuItemSize, \"40\" | \"32\"> = {\n \"40\": \"40\",\n md: \"40\",\n \"32\": \"32\",\n sm: \"32\",\n};\n\nconst ITEM_SIZE_CLASSES: Record<\"40\" | \"32\", string> = {\n \"40\": \"min-h-10 py-2 typography-body-default-16px-regular\",\n \"32\": \"min-h-8 py-[7px] typography-body-small-14px-regular\",\n};\n\nconst ITEM_COUNT_TYPOGRAPHY: Record<\"40\" | \"32\", string> = {\n \"40\": \"typography-body-default-16px-regular\",\n \"32\": \"typography-body-small-14px-regular\",\n};\n\n// Background alone can't reliably tell \"selected\" apart from a\n// hovered-but-unselected row across every theme/contrast combination (see the\n// neutral-alphas fix on itemClassName below) — pair it with an explicit\n// indicator, matching SelectItem's check indicator for the same V2 Menu Item\n// spec.\nfunction SelectedCheckIndicator({ hasDescription }: { hasDescription: boolean }) {\n return (\n <CheckIcon\n className={cn(\"size-4 shrink-0 text-content-primary\", hasDescription && \"self-start\")}\n />\n );\n}\n\nexport interface DropdownMenuItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n /** Height of the menu item row. @default \"40\" */\n size?: DropdownMenuItemSize;\n /** Applies the destructive (error) treatment. Use for irreversible actions. @default false */\n destructive?: boolean;\n /** Icon (or other node) rendered before the label. Ignored when {@link DropdownMenuItemProps.avatar} is set. */\n leadingIcon?: React.ReactNode;\n /**\n * Leading avatar rendered in place of {@link DropdownMenuItemProps.leadingIcon},\n * for rows that represent a person or account. Pass an `Avatar` sized to `24`.\n * Takes precedence over `leadingIcon`.\n */\n avatar?: React.ReactNode;\n /**\n * Icon (or other node) rendered after the label. When\n * {@link DropdownMenuItemProps.selected} is true and no `trailingIcon` is\n * given, the built-in selected check indicator renders in this slot\n * instead — pass a `trailingIcon` to use a custom selected indicator (e.g.\n * a themed tick) rather than the default one.\n */\n trailingIcon?: React.ReactNode;\n /** Trailing count or number (e.g. an unread total) rendered before {@link DropdownMenuItemProps.trailingIcon}. */\n count?: React.ReactNode;\n /**\n * Optional secondary text rendered on a second line below the label. When\n * provided, the row switches to a two-line layout and the leading/trailing\n * icons align to the title line (top) rather than the row's vertical centre.\n */\n description?: React.ReactNode;\n /** Marks the item as the current selection in a single-select menu. @default false */\n selected?: boolean;\n}\n\n/**\n * An individual item within a {@link DropdownMenuContent}.\n *\n * @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n *\n * // Feature-rich row with an avatar and a trailing count\n * <DropdownMenuItem avatar={<Avatar size={24} src={src} />} count=\"12\">\n * Jane Doe\n * </DropdownMenuItem>\n *\n * // As a link\n * <DropdownMenuItem asChild>\n * <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n */\nexport const DropdownMenuItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n DropdownMenuItemProps\n>(\n (\n {\n size = \"40\",\n destructive,\n leadingIcon,\n avatar,\n trailingIcon,\n count,\n description,\n selected,\n className,\n children,\n asChild,\n onSelect,\n disabled,\n ...props\n },\n ref,\n ) => {\n const variant = React.useContext(DropdownMenuVariantContext);\n const toggleOpen = React.useContext(ToggleOpenContext);\n const normalizedSize = SIZE_NORMALIZED[size];\n const hasDescription = description != null;\n const hasAvatar = avatar != null;\n const itemClassName = cn(\n \"group flex w-full cursor-pointer gap-2 rounded-xs px-3 outline-none\",\n hasDescription ? \"items-start\" : \"items-center\",\n ITEM_SIZE_CLASSES[normalizedSize],\n // A 24px avatar would push the compact 32px row past its height with the\n // default padding; tighten it so the avatar variant keeps the 32px contract.\n hasAvatar && !hasDescription && normalizedSize === \"32\" && \"py-1\",\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n \"disabled:cursor-not-allowed disabled:text-content-disabled\",\n // Sheet-variant asChild items are marked disabled via aria-disabled\n // (see below), not the native disabled attribute or Radix's\n // data-disabled — neither selector above matches them.\n \"aria-disabled:cursor-not-allowed aria-disabled:text-content-disabled\",\n destructive && \"text-error-content\",\n // bg-interaction-hover aliases to the same token as the plain hover\n // background above, so a selected row would be indistinguishable from a\n // hovered-but-unselected one. Use the next step up the neutral-alphas\n // ramp instead (still a subtle overlay, not the heavy filled style).\n selected && [\"bg-neutral-alphas-100\", \"data-[highlighted]:bg-neutral-alphas-200\"],\n className,\n );\n\n // In the two-line (description) layout, icons sit on the title's line.\n // 24px title line-height vs 16px icon → 4px (pt-1) centres the icon on it.\n const iconAlignClassName = hasDescription ? \"flex shrink-0 items-center pt-1\" : null;\n\n const countNode = count != null && (\n <span\n className={cn(\n \"shrink-0 tabular-nums\",\n ITEM_COUNT_TYPOGRAPHY[normalizedSize],\n destructive ? \"text-error-content\" : \"text-content-tertiary\",\n \"group-data-[disabled]:text-content-disabled\",\n )}\n >\n {count}\n </span>\n );\n\n // A caller-supplied trailingIcon always wins the trailing slot — some\n // consumers pass their own selected indicator (e.g. a themed tick) and\n // rely on it being shown as-is rather than replaced. Only fall back to\n // the built-in check indicator when selected and no trailingIcon is given.\n const trailingNode =\n trailingIcon != null ? (\n hasDescription ? (\n <span className={iconAlignClassName!}>{trailingIcon}</span>\n ) : (\n trailingIcon\n )\n ) : (\n selected && <SelectedCheckIndicator hasDescription={hasDescription} />\n );\n\n const itemChildren = (\n <>\n {avatar != null ? (\n <span className=\"shrink-0\">{avatar}</span>\n ) : (\n leadingIcon != null &&\n (hasDescription ? (\n <span className={iconAlignClassName!}>{leadingIcon}</span>\n ) : (\n leadingIcon\n ))\n )}\n {hasDescription ? (\n <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <span className=\"truncate\">{children}</span>\n <span className=\"typography-body-small-14px-regular truncate text-content-secondary\">\n {description}\n </span>\n </span>\n ) : (\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n )}\n {countNode}\n {trailingNode}\n </>\n );\n\n // The sheet variant renders inside a Drawer (Dialog), not a Radix menu, so\n // DropdownMenuPrimitive.Item (which requires menu context) can't be used —\n // render a plain option element with equivalent selection semantics instead.\n // asChild goes through the same Slot primitive Radix's own Item uses\n // internally, so a custom element (e.g. a link) gets the option\n // role/handlers merged onto it without needing menu context.\n if (variant === \"sheet\") {\n const Comp = asChild ? Slot : \"button\";\n // Pull the consumer's onClick out of the passthrough spread so the\n // handler below can compose with it instead of the spread order\n // silently overwriting it (an explicit onClick after {...props} always\n // wins over the spread's).\n const { onClick: consumerOnClick, ...restProps } =\n props as React.ComponentPropsWithoutRef<\"button\">;\n const sheetSpecificProps = !asChild\n ? { type: \"button\" as const, disabled }\n : disabled\n ? { \"aria-disabled\": true }\n : {};\n return (\n <Comp\n ref={ref as React.Ref<HTMLButtonElement>}\n {...restProps}\n {...sheetSpecificProps}\n role=\"option\"\n aria-selected={selected}\n className={itemClassName}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n // A native <button disabled> already blocks its click event, but\n // asChild's element (e.g. a link) has no such enforcement — guard\n // explicitly, and prevent the click's default action (e.g. anchor\n // navigation) since aria-disabled alone doesn't stop it.\n if (disabled) {\n event.preventDefault();\n return;\n }\n consumerOnClick?.(event);\n if (event.defaultPrevented) return;\n // Pass the real native event through, not a fake partial shape —\n // handlers that call any Event API beyond preventDefault (e.g.\n // stopPropagation, composedPath) need it to actually exist. It's\n // still live (currentTarget/target are valid) since we're inside\n // the same synchronous click handler that produced it.\n onSelect?.(event.nativeEvent);\n if (!event.nativeEvent.defaultPrevented) toggleOpen?.(() => false);\n }}\n >\n {asChild ? children : itemChildren}\n </Comp>\n );\n }\n\n if (asChild) {\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n asChild\n className={itemClassName}\n disabled={disabled}\n onSelect={onSelect}\n {...props}\n >\n {children}\n </DropdownMenuPrimitive.Item>\n );\n }\n\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={itemClassName}\n disabled={disabled}\n onSelect={onSelect}\n {...props}\n >\n {itemChildren}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/** Props for the {@link DropdownMenuSeparator} component. */\nexport interface DropdownMenuSeparatorProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/** Visual separator between groups of items. */\nexport const DropdownMenuSeparator = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => {\n const variant = React.useContext(DropdownMenuVariantContext);\n const separatorClassName = cn(\"my-1 h-px bg-neutral-alphas-200\", className);\n\n // DropdownMenuPrimitive.Separator requires Radix menu context, unavailable\n // when the sheet variant renders inside a Drawer (Dialog) instead. <hr> is a\n // native separator, so it needs no ARIA role.\n if (variant === \"sheet\") {\n return <hr ref={ref as React.Ref<HTMLHRElement>} className={separatorClassName} {...props} />;\n }\n\n return <DropdownMenuPrimitive.Separator ref={ref} className={separatorClassName} {...props} />;\n});\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\n/** Header type. `\"default\"` shows a title; `\"search\"` shows a search input. */\nexport type DropdownMenuHeaderType = \"default\" | \"search\";\n\n/** Header height preset. Matches the menu item sizing scale. */\nexport type DropdownMenuHeaderSize = \"40\" | \"32\";\n\n/** Search-input configuration for {@link DropdownMenuHeader} when `type=\"search\"`. */\nexport interface DropdownMenuHeaderSearchProps {\n /** Controlled value of the search input. */\n value?: string;\n /** Uncontrolled default value. */\n defaultValue?: string;\n /** Fires when the input value changes. */\n onChange?: (value: string) => void;\n /** Placeholder text shown when the input is empty. @default \"Search…\" */\n placeholder?: string;\n /** Accessible label for the search input. @default \"Search\" */\n \"aria-label\"?: string;\n}\n\nexport interface DropdownMenuHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Visual type. `\"default\"` shows a title; `\"search\"` shows a search input. @default \"default\" */\n type?: DropdownMenuHeaderType;\n /** Height preset for the header row. @default \"40\" */\n size?: DropdownMenuHeaderSize;\n /** Title text shown when `type=\"default\"`. Ignored if `children` is provided. */\n title?: string;\n /** Configuration for the embedded search input when `type=\"search\"`. */\n searchProps?: DropdownMenuHeaderSearchProps;\n /** Whether to render the close icon button on the right. @default true */\n showClose?: boolean;\n /** Fires when the close icon button is activated. */\n onClose?: () => void;\n /** Accessible label for the close button. @default \"Close menu\" */\n closeLabel?: string;\n}\n\n/**\n * Optional header rendered at the top of a {@link DropdownMenuContent}. Use\n * `type=\"default\"` to title the menu, or `type=\"search\"` to embed a search\n * input for filtering long lists.\n *\n * Renders an inset separator beneath the row so it slots cleanly above the\n * first group of items.\n *\n * @example\n * ```tsx\n * <DropdownMenuContent>\n * <DropdownMenuHeader title=\"Sort by\" onClose={() => setOpen(false)} />\n * <DropdownMenuItem>Newest</DropdownMenuItem>\n * <DropdownMenuItem>Oldest</DropdownMenuItem>\n * </DropdownMenuContent>\n * ```\n */\nexport const DropdownMenuHeader = React.forwardRef<HTMLDivElement, DropdownMenuHeaderProps>(\n (\n {\n type = \"default\",\n size = \"40\",\n title,\n searchProps,\n showClose = true,\n onClose,\n closeLabel = \"Close menu\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const titleTypography =\n size === \"32\"\n ? \"typography-body-small-14px-semibold\"\n : \"typography-body-default-16px-semibold\";\n const toggleOpen = React.useContext(ToggleOpenContext);\n\n const handleClose = () => {\n onClose?.();\n // Also dismiss the Radix menu when used in uncontrolled mode — otherwise\n // the close button would look broken to consumers that don't wire up\n // `open` / `onOpenChange` themselves.\n toggleOpen?.(() => false);\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n \"flex flex-col px-1 pt-1 mb-1\",\n // Search needs an 8px gap between the input and the divider; the\n // default (title) variant uses 4px because the title baseline sits\n // closer to the divider naturally.\n type === \"search\" ? \"gap-2\" : \"gap-1\",\n className,\n )}\n {...props}\n >\n <div className=\"flex items-center gap-4 pl-2\">\n {type === \"default\" ? (\n <div className={cn(\"min-w-0 flex-1 truncate text-content-primary\", titleTypography)}>\n {children ?? title}\n </div>\n ) : (\n <SearchInput {...searchProps} />\n )}\n {showClose && (\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<CloseIcon />}\n onClick={handleClose}\n aria-label={closeLabel}\n />\n )}\n </div>\n <DropdownMenuSeparator className=\"my-0\" />\n </div>\n );\n },\n);\nDropdownMenuHeader.displayName = \"DropdownMenuHeader\";\n\nfunction SearchInput({\n value,\n defaultValue,\n onChange,\n placeholder = \"Search\\u2026\",\n \"aria-label\": ariaLabel = \"Search\",\n}: DropdownMenuHeaderSearchProps = {}) {\n return (\n <label\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-xs border border-border-primary\",\n \"bg-neutral-alphas-50 px-3 py-1 text-content-primary\",\n \"focus-within:shadow-focus-ring focus-within:outline-none\",\n )}\n >\n <SearchIcon className=\"size-4 shrink-0 text-content-tertiary\" aria-hidden=\"true\" />\n <input\n type=\"search\"\n className={cn(\n \"typography-body-default-16px-regular min-w-0 flex-1 bg-transparent outline-none\",\n \"placeholder:text-content-tertiary\",\n )}\n value={value}\n defaultValue={defaultValue}\n placeholder={placeholder}\n aria-label={ariaLabel}\n onChange={(event) => onChange?.(event.target.value)}\n // Radix DropdownMenu listens for keystrokes on Content for its\n // typeahead (typing letters jumps focus to a matching item). That\n // listener steals focus from the input after the first letter, so we\n // stop character keys from bubbling. Navigation keys (arrows / Tab /\n // Escape / Enter) are still allowed through so the user can leave the\n // input for the list or close the menu. Pointer events are stopped so\n // clicking back into the input doesn't fight the menu's focus\n // management either.\n onKeyDown={(event) => {\n if (!NAVIGATION_KEYS.has(event.key)) event.stopPropagation();\n }}\n onPointerDown={(event) => event.stopPropagation()}\n onMouseDown={(event) => event.stopPropagation()}\n />\n </label>\n );\n}\n\n/** Props for the {@link DropdownMenuRadioGroup} component. */\nexport interface DropdownMenuRadioGroupProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {}\n\n/**\n * Groups {@link DropdownMenuRadioItem} children so they behave as a\n * single-select set. Controlled via `value`/`onValueChange`.\n *\n * @example\n * ```tsx\n * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>\n * <DropdownMenuRadioItem value=\"newest\">Newest first</DropdownMenuRadioItem>\n * <DropdownMenuRadioItem value=\"oldest\">Oldest first</DropdownMenuRadioItem>\n * </DropdownMenuRadioGroup>\n * ```\n *\n * Requires Radix menu context — not supported inside a `variant=\"sheet\"` menu.\n */\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/** Height preset for a {@link DropdownMenuRadioItem}. */\nexport type DropdownMenuRadioItemSize = \"40\";\n\nexport interface DropdownMenuRadioItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n /** Optional secondary text shown below the title. */\n helper?: string;\n /** Height of the item row. @default \"40\" */\n size?: DropdownMenuRadioItemSize;\n}\n\n/**\n * A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows\n * a circular indicator that fills when selected, plus an optional helper line\n * underneath the title.\n */\nexport const DropdownMenuRadioItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n DropdownMenuRadioItemProps\n>(({ className, children, helper, size: _size = \"40\", ...props }, ref) => {\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none\",\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n // See DropdownMenuItem above: bg-interaction-hover aliases to the same\n // token as the plain hover background, so it can't distinguish the\n // checked state from an unchecked-but-hovered row.\n \"data-[state=checked]:bg-neutral-alphas-100\",\n \"data-[state=checked]:data-[highlighted]:bg-neutral-alphas-200\",\n className,\n )}\n {...props}\n >\n <span\n className={cn(\n \"mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border border-icons-primary\",\n \"group-data-[disabled]:border-content-disabled\",\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator asChild>\n <span className=\"size-2 rounded-full bg-content-primary\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <span className=\"typography-body-default-16px-semibold truncate\">{children}</span>\n {helper && (\n <span\n className={cn(\n \"typography-description-12px-regular text-content-secondary\",\n \"group-data-[disabled]:text-content-disabled\",\n )}\n >\n {helper}\n </span>\n )}\n </span>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { BaseIcon } from "./BaseIcon.mjs";
|
|
5
|
+
const VARIANTS = {
|
|
6
|
+
16: {
|
|
7
|
+
outlined: [
|
|
8
|
+
{
|
|
9
|
+
d: "M5.18 2.333a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm0 4.334A.667.667 0 0 0 4.513 6H2.5a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667h2.013A.667.667 0 0 0 5.18 9zm0 4.666a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm4.667-9a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .369.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm-4.32 4.334A.667.667 0 0 0 9.18 6H6.847a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667H9.18A.667.667 0 0 0 9.847 9zm0 4.666a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .368.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm0-4.666A.667.667 0 0 0 13.5 6h-1.987a.667.667 0 0 0-.666.667V9c0 .368.298.667.666.667H13.5A.667.667 0 0 0 14.167 9z"
|
|
10
|
+
}
|
|
11
|
+
]
|
|
12
|
+
},
|
|
13
|
+
24: {
|
|
14
|
+
outlined: [
|
|
15
|
+
{
|
|
16
|
+
d: "M7.77 3.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 6.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm7-13.5a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zM14.77 10a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zm0-7a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1z"
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
32: {
|
|
21
|
+
outlined: [
|
|
22
|
+
{
|
|
23
|
+
d: "M10.36 4.667c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 9.403 4.264 10 5 10h4.027c.736 0 1.333-.597 1.333-1.333zm0 8.666c0-.736-.597-1.333-1.333-1.333H5c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.027c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 27.403 4.264 28 5 28h4.027c.736 0 1.333-.597 1.333-1.333zm9.333-18c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm-8.64 8.666c0-.736-.597-1.333-1.333-1.333h-4.667c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm0-9.334c0-.736-.597-1.333-1.333-1.333h-3.973c-.737 0-1.334.597-1.334 1.333V18c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333z"
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const DenseGridViewIcon = React.forwardRef(
|
|
29
|
+
(props, ref) => /* @__PURE__ */ jsx(BaseIcon, { ref, variants: VARIANTS, ...props })
|
|
30
|
+
);
|
|
31
|
+
DenseGridViewIcon.displayName = "DenseGridViewIcon";
|
|
32
|
+
export {
|
|
33
|
+
DenseGridViewIcon
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=DenseGridViewIcon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DenseGridViewIcon.mjs","sources":["../../../src/components/Icons/DenseGridViewIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n 16: {\n outlined: [\n {\n d: \"M5.18 2.333a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm0 4.334A.667.667 0 0 0 4.513 6H2.5a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667h2.013A.667.667 0 0 0 5.18 9zm0 4.666a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm4.667-9a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .369.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm-4.32 4.334A.667.667 0 0 0 9.18 6H6.847a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667H9.18A.667.667 0 0 0 9.847 9zm0 4.666a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .368.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm0-4.666A.667.667 0 0 0 13.5 6h-1.987a.667.667 0 0 0-.666.667V9c0 .368.298.667.666.667H13.5A.667.667 0 0 0 14.167 9z\",\n },\n ],\n },\n 24: {\n outlined: [\n {\n d: \"M7.77 3.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 6.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm7-13.5a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zM14.77 10a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zm0-7a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1z\",\n },\n ],\n },\n 32: {\n outlined: [\n {\n d: \"M10.36 4.667c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 9.403 4.264 10 5 10h4.027c.736 0 1.333-.597 1.333-1.333zm0 8.666c0-.736-.597-1.333-1.333-1.333H5c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.027c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 27.403 4.264 28 5 28h4.027c.736 0 1.333-.597 1.333-1.333zm9.333-18c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm-8.64 8.666c0-.736-.597-1.333-1.333-1.333h-4.667c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm0-9.334c0-.736-.597-1.333-1.333-1.333h-3.973c-.737 0-1.334.597-1.334 1.333V18c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333z\",\n },\n ],\n },\n};\n\n/** Props for {@link DenseGridViewIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type DenseGridViewIconProps = BaseIconProps;\n\n/**\n * Dense grid view icon (3×3 tiles) — the compact-grid counterpart of\n * {@link GridViewIcon}. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <DenseGridViewIcon size={24} />\n * ```\n */\nexport const DenseGridViewIcon = React.forwardRef<SVGSVGElement, DenseGridViewIconProps>(\n (props, ref) => <BaseIcon ref={ref} variants={VARIANTS} {...props} />,\n);\n\nDenseGridViewIcon.displayName = \"DenseGridViewIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAcO,MAAM,oBAAoB,MAAM;AAAA,EACrC,CAAC,OAAO,QAAQ,oBAAC,YAAS,KAAU,UAAU,UAAW,GAAG,MAAA,CAAO;AACrE;AAEA,kBAAkB,cAAc;"}
|