@fanvue/ui 3.12.1 → 3.13.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/Accordion/AccordionTrigger.cjs +11 -2
- package/dist/cjs/components/Accordion/AccordionTrigger.cjs.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.cjs +2 -2
- package/dist/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs +25 -2
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/cjs/components/Icons/GifIcon.cjs +12 -36
- package/dist/cjs/components/Icons/GifIcon.cjs.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBar.cjs +30 -5
- package/dist/cjs/components/ProgressBar/ProgressBar.cjs.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBarItem.cjs +49 -0
- package/dist/cjs/components/ProgressBar/ProgressBarItem.cjs.map +1 -0
- package/dist/cjs/components/ProgressBar/ProgressBarSteps.cjs +66 -0
- package/dist/cjs/components/ProgressBar/ProgressBarSteps.cjs.map +1 -0
- package/dist/cjs/components/TextArea/TextArea.cjs +4 -4
- package/dist/cjs/components/TextArea/TextArea.cjs.map +1 -1
- package/dist/cjs/components/TextField/TextField.cjs +105 -62
- package/dist/cjs/components/TextField/TextField.cjs.map +1 -1
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/Accordion/AccordionTrigger.mjs +11 -2
- package/dist/components/Accordion/AccordionTrigger.mjs.map +1 -1
- package/dist/components/Avatar/Avatar.mjs +2 -2
- package/dist/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.mjs +25 -2
- package/dist/components/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/dist/components/Icons/GifIcon.mjs +12 -36
- package/dist/components/Icons/GifIcon.mjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.mjs +30 -5
- package/dist/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBarItem.mjs +32 -0
- package/dist/components/ProgressBar/ProgressBarItem.mjs.map +1 -0
- package/dist/components/ProgressBar/ProgressBarSteps.mjs +49 -0
- package/dist/components/ProgressBar/ProgressBarSteps.mjs.map +1 -0
- package/dist/components/TextArea/TextArea.mjs +4 -4
- package/dist/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/components/TextField/TextField.mjs +105 -62
- package/dist/components/TextField/TextField.mjs.map +1 -1
- package/dist/index.d.ts +103 -9
- package/dist/index.mjs +4 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -211,6 +211,8 @@ const Pill = require("./components/Pill/Pill.cjs");
|
|
|
211
211
|
const ProfileOnlineStatus = require("./components/ProfileOnlineStatus/ProfileOnlineStatus.cjs");
|
|
212
212
|
const ProfileStatus = require("./components/ProfileStatus/ProfileStatus.cjs");
|
|
213
213
|
const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
|
|
214
|
+
const ProgressBarItem = require("./components/ProgressBar/ProgressBarItem.cjs");
|
|
215
|
+
const ProgressBarSteps = require("./components/ProgressBar/ProgressBarSteps.cjs");
|
|
214
216
|
const Radio = require("./components/Radio/Radio.cjs");
|
|
215
217
|
const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
|
|
216
218
|
const RatingSummary = require("./components/RatingSummary/RatingSummary.cjs");
|
|
@@ -500,6 +502,8 @@ exports.Pill = Pill.Pill;
|
|
|
500
502
|
exports.ProfileOnlineStatus = ProfileOnlineStatus.ProfileOnlineStatus;
|
|
501
503
|
exports.ProfileStatus = ProfileStatus.ProfileStatus;
|
|
502
504
|
exports.ProgressBar = ProgressBar.ProgressBar;
|
|
505
|
+
exports.ProgressBarItem = ProgressBarItem.ProgressBarItem;
|
|
506
|
+
exports.ProgressBarSteps = ProgressBarSteps.ProgressBarSteps;
|
|
503
507
|
exports.Radio = Radio.Radio;
|
|
504
508
|
exports.RadioGroup = RadioGroup.RadioGroup;
|
|
505
509
|
exports.RatingSummary = RatingSummary.RatingSummary;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,7 +4,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { cn } from "../../utils/cn.mjs";
|
|
6
6
|
import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
|
|
7
|
-
const AccordionTrigger = React.forwardRef(({ className, children, icon, ...props }, ref) => {
|
|
7
|
+
const AccordionTrigger = React.forwardRef(({ className, children, icon, description, leadingIcon, avatar, ...props }, ref) => {
|
|
8
8
|
const showIcon = icon !== null;
|
|
9
9
|
const iconElement = icon === void 0 ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 text-content-secondary" }) : icon;
|
|
10
10
|
return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
|
|
@@ -24,7 +24,16 @@ const AccordionTrigger = React.forwardRef(({ className, children, icon, ...props
|
|
|
24
24
|
),
|
|
25
25
|
...props,
|
|
26
26
|
children: [
|
|
27
|
-
/* @__PURE__ */
|
|
27
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
|
|
28
|
+
avatar && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: avatar }),
|
|
29
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-start gap-2 text-left", children: [
|
|
30
|
+
leadingIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center pt-px [&>svg]:size-4", "aria-hidden": "true", children: leadingIcon }),
|
|
31
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
|
|
32
|
+
/* @__PURE__ */ jsx("span", { className: "truncate typography-body-small-14px-semibold text-content-primary", children }),
|
|
33
|
+
description && /* @__PURE__ */ jsx("span", { className: "typography-description-12px-regular text-content-secondary", children: description })
|
|
34
|
+
] })
|
|
35
|
+
] })
|
|
36
|
+
] }),
|
|
28
37
|
showIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180", children: iconElement })
|
|
29
38
|
]
|
|
30
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionTrigger.mjs","sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n typeof AccordionPrimitive.Trigger\n> & {\n /**
|
|
1
|
+
{"version":3,"file":"AccordionTrigger.mjs","sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n typeof AccordionPrimitive.Trigger\n> & {\n /** Trailing indicator icon. Defaults to `ChevronDownIcon` (rotates when open). Pass `null` to suppress it. */\n icon?: React.ReactNode | null;\n /** Secondary line rendered under the title, for extra context. */\n description?: React.ReactNode;\n /** Leading icon shown before the title (sized to 16px). */\n leadingIcon?: React.ReactNode;\n /** Leading avatar shown before the title, for headers representing a person or account. Pass an `Avatar` sized to `24`. */\n avatar?: React.ReactNode;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n AccordionTriggerProps\n>(({ className, children, icon, description, leadingIcon, avatar, ...props }, ref) => {\n const showIcon = icon !== null;\n const iconElement =\n icon === undefined ? (\n <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n ) : (\n icon\n );\n\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n ref={ref}\n className={cn(\n \"flex flex-1 items-center justify-between gap-3\",\n \"rounded-sm px-3 py-3\",\n \"typography-body-small-14px-semibold text-content-primary\",\n \"cursor-pointer\",\n \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n \"hover:bg-neutral-alphas-100\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <span className=\"flex min-w-0 flex-1 items-center gap-3\">\n {avatar && (\n <span className=\"flex shrink-0 items-center\" aria-hidden=\"true\">\n {avatar}\n </span>\n )}\n <span className=\"flex min-w-0 flex-1 items-start gap-2 text-left\">\n {leadingIcon && (\n <span className=\"flex shrink-0 items-center pt-px [&>svg]:size-4\" aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <span className=\"truncate typography-body-small-14px-semibold text-content-primary\">\n {children}\n </span>\n {description && (\n <span className=\"typography-description-12px-regular text-content-secondary\">\n {description}\n </span>\n )}\n </span>\n </span>\n </span>\n {showIcon && (\n <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n {iconElement}\n </span>\n )}\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,aAAa,aAAa,QAAQ,GAAG,MAAA,GAAS,QAAQ;AACpF,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,6BACN,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,QAAA,EAAK,WAAU,0CACb,UAAA;AAAA,UAAA,8BACE,QAAA,EAAK,WAAU,8BAA6B,eAAY,QACtD,UAAA,QACH;AAAA,UAEF,qBAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,YAAA,mCACE,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,aACH;AAAA,YAEF,qBAAC,QAAA,EAAK,WAAU,sCACd,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,WAAU,qEACb,SAAA,CACH;AAAA,cACC,eACC,oBAAC,QAAA,EAAK,WAAU,8DACb,UAAA,YAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QACC,YACC,oBAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;"}
|
|
@@ -28,7 +28,7 @@ const AvatarRoot = React.forwardRef(
|
|
|
28
28
|
...props
|
|
29
29
|
}, ref) => {
|
|
30
30
|
const statusPosition = STATUS_POSITIONS[size];
|
|
31
|
-
return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size, NSFWShow }, children: /* @__PURE__ */ jsxs("
|
|
31
|
+
return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size, NSFWShow }, children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
|
|
32
32
|
/* @__PURE__ */ jsx(
|
|
33
33
|
AvatarPrimitive.Root,
|
|
34
34
|
{
|
|
@@ -51,7 +51,7 @@ const AvatarRoot = React.forwardRef(
|
|
|
51
51
|
}
|
|
52
52
|
),
|
|
53
53
|
platinumShow && /* @__PURE__ */ jsx(
|
|
54
|
-
"
|
|
54
|
+
"span",
|
|
55
55
|
{
|
|
56
56
|
className: "pointer-events-none absolute inset-0 rounded-full",
|
|
57
57
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n size: 40,\n NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<\n AvatarSize,\n { top: number; right: number; indicatorSize: string; borderSize: string }\n> = {\n 16: { top: -2, right: -2, indicatorSize: \"size-2\", borderSize: \"border\" },\n 24: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n 32: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n 40: { top: 2, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n 48: { top: 5, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n 64: { top: 5, right: 1, indicatorSize: \"size-3\", borderSize: \"border\" },\n 88: { top: 8, right: 6, indicatorSize: \"size-3\", borderSize: \"border\" },\n 148: { top: 15, right: 15, indicatorSize: \"size-3\", borderSize: \"border\" },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n /** Pixel size of the avatar. @default 40 */\n size?: AvatarSize;\n /** Whether to show the online-status indicator dot. @default false */\n onlineIndicator?: boolean;\n /** Whether to show the platinum gradient border ring. @default false */\n platinumShow?: boolean;\n /** Whether to apply the NSFW blur filter over the image. @default false */\n NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Root>,\n AvatarRootProps\n>(\n (\n {\n className,\n size = 40,\n onlineIndicator = false,\n platinumShow = false,\n NSFWShow = false,\n children,\n ...props\n },\n ref,\n ) => {\n const statusPosition = STATUS_POSITIONS[size];\n\n return (\n <AvatarContext.Provider value={{ size, NSFWShow }}>\n <div className=\"relative inline-flex\">\n <AvatarPrimitive.Root\n ref={ref}\n data-testid=\"avatar\"\n className={cn(\n \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-background-avatar\",\n size === 16 && \"size-4 text-2xs\",\n size === 24 && \"size-6 text-xs\",\n size === 32 && \"size-8 text-xs\",\n size === 40 && \"size-10 text-sm\",\n size === 48 && \"size-12 text-base\",\n size === 64 && \"size-16 text-xl\",\n size === 88 && \"size-22 text-2xl\",\n size === 148 && \"size-37 text-4xl\",\n className,\n )}\n {...props}\n >\n {children}\n </AvatarPrimitive.Root>\n {platinumShow && (\n <div\n className=\"pointer-events-none absolute inset-0 rounded-full\"\n style={{\n background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n }}\n aria-hidden=\"true\"\n />\n )}\n {onlineIndicator && (\n <span\n className={cn(\n \"absolute rounded-full border-surface-primary bg-brand-primary-default\",\n statusPosition.borderSize,\n statusPosition.indicatorSize,\n )}\n style={{\n top: `${statusPosition.top}px`,\n right: `${statusPosition.right}px`,\n }}\n aria-hidden=\"true\"\n />\n )}\n </div>\n </AvatarContext.Provider>\n );\n },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Image>,\n AvatarImageProps\n>(({ className, ...props }, ref) => {\n const { NSFWShow } = React.useContext(AvatarContext);\n return (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn(\"size-full object-cover\", NSFWShow && \"blur-md\", className)}\n {...props}\n />\n );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn(\n \"flex size-full items-center justify-center font-semibold text-content-primary uppercase leading-none\",\n className,\n )}\n delayMs={0}\n {...props}\n >\n {children}\n </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n AvatarStyleProps {\n /** URL of the avatar image. */\n src?: string;\n /** Alt text for the avatar image. @default \"Avatar\" */\n alt?: string;\n /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>(\n (\n {\n className,\n size = 40,\n src,\n alt,\n fallback,\n onlineIndicator = false,\n platinumShow = false,\n NSFWShow = false,\n children,\n ...props\n },\n ref,\n ) => {\n const rootProps = {\n ref,\n size,\n onlineIndicator,\n platinumShow,\n NSFWShow,\n className,\n ...props,\n };\n\n if (children) {\n return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n }\n\n return (\n <AvatarRoot {...rootProps}>\n {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n <AvatarFallback>{fallback}</AvatarFallback>\n </AvatarRoot>\n );\n },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n size: 40,\n NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<\n AvatarSize,\n { top: number; right: number; indicatorSize: string; borderSize: string }\n> = {\n 16: { top: -2, right: -2, indicatorSize: \"size-2\", borderSize: \"border\" },\n 24: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n 32: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n 40: { top: 2, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n 48: { top: 5, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n 64: { top: 5, right: 1, indicatorSize: \"size-3\", borderSize: \"border\" },\n 88: { top: 8, right: 6, indicatorSize: \"size-3\", borderSize: \"border\" },\n 148: { top: 15, right: 15, indicatorSize: \"size-3\", borderSize: \"border\" },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n /** Pixel size of the avatar. @default 40 */\n size?: AvatarSize;\n /** Whether to show the online-status indicator dot. @default false */\n onlineIndicator?: boolean;\n /** Whether to show the platinum gradient border ring. @default false */\n platinumShow?: boolean;\n /** Whether to apply the NSFW blur filter over the image. @default false */\n NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Root>,\n AvatarRootProps\n>(\n (\n {\n className,\n size = 40,\n onlineIndicator = false,\n platinumShow = false,\n NSFWShow = false,\n children,\n ...props\n },\n ref,\n ) => {\n const statusPosition = STATUS_POSITIONS[size];\n\n return (\n <AvatarContext.Provider value={{ size, NSFWShow }}>\n <span className=\"relative inline-flex\">\n <AvatarPrimitive.Root\n ref={ref}\n data-testid=\"avatar\"\n className={cn(\n \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-background-avatar\",\n size === 16 && \"size-4 text-2xs\",\n size === 24 && \"size-6 text-xs\",\n size === 32 && \"size-8 text-xs\",\n size === 40 && \"size-10 text-sm\",\n size === 48 && \"size-12 text-base\",\n size === 64 && \"size-16 text-xl\",\n size === 88 && \"size-22 text-2xl\",\n size === 148 && \"size-37 text-4xl\",\n className,\n )}\n {...props}\n >\n {children}\n </AvatarPrimitive.Root>\n {platinumShow && (\n <span\n className=\"pointer-events-none absolute inset-0 rounded-full\"\n style={{\n background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n }}\n aria-hidden=\"true\"\n />\n )}\n {onlineIndicator && (\n <span\n className={cn(\n \"absolute rounded-full border-surface-primary bg-brand-primary-default\",\n statusPosition.borderSize,\n statusPosition.indicatorSize,\n )}\n style={{\n top: `${statusPosition.top}px`,\n right: `${statusPosition.right}px`,\n }}\n aria-hidden=\"true\"\n />\n )}\n </span>\n </AvatarContext.Provider>\n );\n },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Image>,\n AvatarImageProps\n>(({ className, ...props }, ref) => {\n const { NSFWShow } = React.useContext(AvatarContext);\n return (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn(\"size-full object-cover\", NSFWShow && \"blur-md\", className)}\n {...props}\n />\n );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn(\n \"flex size-full items-center justify-center font-semibold text-content-primary uppercase leading-none\",\n className,\n )}\n delayMs={0}\n {...props}\n >\n {children}\n </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n AvatarStyleProps {\n /** URL of the avatar image. */\n src?: string;\n /** Alt text for the avatar image. @default \"Avatar\" */\n alt?: string;\n /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n React.ComponentRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>(\n (\n {\n className,\n size = 40,\n src,\n alt,\n fallback,\n onlineIndicator = false,\n platinumShow = false,\n NSFWShow = false,\n children,\n ...props\n },\n ref,\n ) => {\n const rootProps = {\n ref,\n size,\n onlineIndicator,\n platinumShow,\n NSFWShow,\n className,\n ...props,\n };\n\n if (children) {\n return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n }\n\n return (\n <AvatarRoot {...rootProps}>\n {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n <AvatarFallback>{fallback}</AvatarFallback>\n </AvatarRoot>\n );\n },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":[],"mappings":"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"}
|
|
@@ -149,12 +149,18 @@ const ITEM_SELECTED_TYPOGRAPHY = {
|
|
|
149
149
|
"40": "typography-body-default-16px-semibold",
|
|
150
150
|
"32": "typography-body-small-14px-semibold"
|
|
151
151
|
};
|
|
152
|
+
const ITEM_COUNT_TYPOGRAPHY = {
|
|
153
|
+
"40": "typography-body-default-16px-regular",
|
|
154
|
+
"32": "typography-body-small-14px-regular"
|
|
155
|
+
};
|
|
152
156
|
const DropdownMenuItem = React.forwardRef(
|
|
153
157
|
({
|
|
154
158
|
size = "40",
|
|
155
159
|
destructive,
|
|
156
160
|
leadingIcon,
|
|
161
|
+
avatar,
|
|
157
162
|
trailingIcon,
|
|
163
|
+
count,
|
|
158
164
|
description,
|
|
159
165
|
selected,
|
|
160
166
|
className,
|
|
@@ -164,10 +170,14 @@ const DropdownMenuItem = React.forwardRef(
|
|
|
164
170
|
}, ref) => {
|
|
165
171
|
const normalizedSize = SIZE_NORMALIZED[size];
|
|
166
172
|
const hasDescription = description != null;
|
|
173
|
+
const hasAvatar = avatar != null;
|
|
167
174
|
const itemClassName = cn(
|
|
168
|
-
"flex w-full cursor-pointer gap-2 rounded-xs px-3 outline-none",
|
|
175
|
+
"group flex w-full cursor-pointer gap-2 rounded-xs px-3 outline-none",
|
|
169
176
|
hasDescription ? "items-start" : "items-center",
|
|
170
177
|
ITEM_SIZE_CLASSES[normalizedSize],
|
|
178
|
+
// A 24px avatar would push the compact 32px row past its height with the
|
|
179
|
+
// default padding; tighten it so the avatar variant keeps the 32px contract.
|
|
180
|
+
hasAvatar && !hasDescription && normalizedSize === "32" && "py-1",
|
|
171
181
|
"data-[highlighted]:bg-neutral-alphas-50",
|
|
172
182
|
"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled",
|
|
173
183
|
destructive && "text-error-content",
|
|
@@ -182,8 +192,20 @@ const DropdownMenuItem = React.forwardRef(
|
|
|
182
192
|
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, asChild: true, className: itemClassName, ...props, children });
|
|
183
193
|
}
|
|
184
194
|
const iconAlignClassName = hasDescription ? "flex shrink-0 items-center pt-1" : null;
|
|
195
|
+
const countNode = count != null && /* @__PURE__ */ jsx(
|
|
196
|
+
"span",
|
|
197
|
+
{
|
|
198
|
+
className: cn(
|
|
199
|
+
"shrink-0 tabular-nums",
|
|
200
|
+
ITEM_COUNT_TYPOGRAPHY[normalizedSize],
|
|
201
|
+
destructive ? "text-error-content" : selected ? "text-content-primary-inverted" : "text-content-tertiary",
|
|
202
|
+
"group-data-[disabled]:text-content-disabled"
|
|
203
|
+
),
|
|
204
|
+
children: count
|
|
205
|
+
}
|
|
206
|
+
);
|
|
185
207
|
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Item, { ref, className: itemClassName, ...props, children: [
|
|
186
|
-
leadingIcon != null && (hasDescription ? /* @__PURE__ */ jsx("span", { className: iconAlignClassName, children: leadingIcon }) : leadingIcon),
|
|
208
|
+
avatar != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: avatar }) : leadingIcon != null && (hasDescription ? /* @__PURE__ */ jsx("span", { className: iconAlignClassName, children: leadingIcon }) : leadingIcon),
|
|
187
209
|
hasDescription ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
188
210
|
/* @__PURE__ */ jsx("span", { className: "truncate", children }),
|
|
189
211
|
/* @__PURE__ */ jsx(
|
|
@@ -197,6 +219,7 @@ const DropdownMenuItem = React.forwardRef(
|
|
|
197
219
|
}
|
|
198
220
|
)
|
|
199
221
|
] }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
|
|
222
|
+
countNode,
|
|
200
223
|
trailingIcon != null && (hasDescription ? /* @__PURE__ */ jsx("span", { className: iconAlignClassName, children: trailingIcon }) : trailingIcon)
|
|
201
224
|
] });
|
|
202
225
|
}
|
|
@@ -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\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. */\n leadingIcon?: React.ReactNode;\n /** Icon (or other node) rendered after the label. */\n trailingIcon?: 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 * // 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 trailingIcon,\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 itemClassName = cn(\n \"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 \"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 return (\n <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n {leadingIcon != null &&\n (hasDescription ? (\n <span className={iconAlignClassName!}>{leadingIcon}</span>\n ) : (\n leadingIcon\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 {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 { 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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"}
|
|
@@ -6,72 +6,48 @@ const VARIANTS = {
|
|
|
6
6
|
16: {
|
|
7
7
|
outlined: [
|
|
8
8
|
{
|
|
9
|
-
d: "
|
|
9
|
+
d: "M12.358 5.992v.527h-1.854v1.35h1.701v.515h-1.7v1.848h-.55v-4.24zm-3.208 0v4.24H8.6v-4.24zm-3.418-.058q.495 0 .926.199h-.001q.435.193.732.539.3.347.39.793l.018.08h-.562l-.013-.049a1.26 1.26 0 0 0-.536-.737 1.6 1.6 0 0 0-.948-.287 1.6 1.6 0 0 0-.823.214q-.36.206-.562.578-.203.37-.203.848 0 .484.197.86l.11.175q.182.248.452.403h-.001q.365.208.83.209.397 0 .723-.153a1.4 1.4 0 0 0 .532-.425q.188-.25.257-.562H5.506v-.521h2.341l-.002.068a2.3 2.3 0 0 1-.224.977l-.066.123q-.272.483-.746.757a2.1 2.1 0 0 1-1.071.274q-.538 0-.978-.214l-.124-.065a2.06 2.06 0 0 1-.763-.783h-.001A2.3 2.3 0 0 1 3.6 8.112q0-.614.272-1.112.279-.503.764-.782.493-.284 1.096-.284"
|
|
10
10
|
},
|
|
11
11
|
{
|
|
12
|
-
d: "
|
|
13
|
-
|
|
14
|
-
{
|
|
15
|
-
d: "M10.31 10.581c-.3 0-.55-.25-.55-.55V6.167c0-.301.25-.55.55-.55s.55.249.55.55v3.864c0 .3-.242.55-.55.55"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
d: "M12.312 8.645H8.447c-.3 0-.55-.25-.55-.55s.25-.55.55-.55h3.865c.3 0 .55.25.55.55s-.25.55-.55.55"
|
|
12
|
+
d: "M2.667 3.667h10.666a1 1 0 0 1 1 1v6.666a1 1 0 0 1-1 1H2.667a1 1 0 0 1-1-1V4.667a1 1 0 0 1 1-1z",
|
|
13
|
+
sw: 0.667
|
|
19
14
|
}
|
|
20
15
|
],
|
|
21
16
|
filled: [
|
|
22
17
|
{
|
|
23
|
-
d: "
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
d: "M13.111 3.314H8.176c-1.232 0-2.222.99-2.222 2.222v4.936c0 1.232.99 2.222 2.222 2.222h4.935c1.232 0 2.222-.99 2.222-2.222V5.536c0-1.232-.99-2.222-2.222-2.222m-.52 5.244h-1.46v1.4a.557.557 0 1 1-1.115 0v-1.4H8.683a.557.557 0 1 1 0-1.115h1.335v-1.4a.557.557 0 1 1 1.114 0v1.4h1.46a.557.557 0 1 1 0 1.115"
|
|
18
|
+
d: "M13.333 3.333c.737 0 1.333.597 1.333 1.333v6.667c0 .737-.596 1.333-1.333 1.333H2.666a1.333 1.333 0 0 1-1.333-1.333V4.666c0-.736.597-1.332 1.333-1.333zM5.732 5.867q-.62 0-1.13.293-.438.254-.713.682l-.075.126a2.34 2.34 0 0 0-.28 1.144q-.002.636.279 1.155h.002q.287.514.787.808h.002q.503.29 1.134.289.613 0 1.104-.283.49-.283.772-.784.286-.501.298-1.13l.003-.135H5.44v.654h1.726a1.4 1.4 0 0 1-.226.454q-.196.26-.508.405a1.6 1.6 0 0 1-.694.147q-.449-.001-.796-.2H4.94a1.4 1.4 0 0 1-.534-.55 1.8 1.8 0 0 1-.19-.83q0-.463.195-.817.193-.354.536-.552.348-.205.79-.205.518 0 .909.275l.002.002q.394.267.509.698l.026.099h.694l-.033-.16a1.8 1.8 0 0 0-.405-.823 2.1 2.1 0 0 0-.757-.557 2.2 2.2 0 0 0-.951-.205m2.802 4.432h.683V5.925h-.683zm1.353 0h.684V8.451h1.7v-.648h-1.7V6.585h1.853v-.66H9.887zm-3.89-.084-.03.003zm-.62-.012-.057-.01zm.864-.03-.038.008zm-1.109-.022-.055-.017zm1.342-.047-.046.017zm-1.58-.033-.043-.02zm2.151-.85h.001q-.108.143-.248.255.138-.112.247-.255M3.678 7.872l.002-.028zm.035-.242.01-.042zm.331-.778.029-.042zm.15-.19.03-.033zm.164-.163.047-.039zm1.493-.496q.033.002.064.006L5.732 6z"
|
|
27
19
|
}
|
|
28
20
|
]
|
|
29
21
|
},
|
|
30
22
|
24: {
|
|
31
23
|
outlined: [
|
|
32
24
|
{
|
|
33
|
-
d: "
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
d: "M18.5 19.08h-6.66c-2.07 0-3.75-1.68-3.75-3.75V8.67c0-2.07 1.68-3.75 3.75-3.75h6.66c2.07 0 3.75 1.68 3.75 3.75v6.66c0 2.07-1.68 3.75-3.75 3.75M11.84 6.42c-1.24 0-2.25 1.01-2.25 2.25v6.66c0 1.24 1.01 2.25 2.25 2.25h6.66c1.24 0 2.25-1.01 2.25-2.25V8.67c0-1.24-1.01-2.25-2.25-2.25z"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
d: "M15.15 15.52c-.41 0-.75-.34-.75-.75V9.5c0-.41.34-.75.75-.75s.75.34.75.75v5.27c0 .41-.33.75-.75.75"
|
|
25
|
+
d: "M18.537 8.988v.79h-2.781v2.026h2.552v.772h-2.552v2.772h-.824v-6.36zm-4.812 0v6.36H12.9v-6.36zM8.598 8.9q.741 0 1.386.3l.16.075q.55.278.941.734a2.6 2.6 0 0 1 .585 1.188l.024.12h-.842l-.019-.074a1.9 1.9 0 0 0-.804-1.104l-.002-.001a2.4 2.4 0 0 0-1.42-.431 2.4 2.4 0 0 0-1.235.321q-.54.311-.843.867-.304.556-.304 1.273.001.726.296 1.291.304.555.842.866a2.47 2.47 0 0 0 1.243.313q.597 0 1.084-.229.49-.228.8-.639.283-.374.388-.842H8.26v-.78h3.51l-.001.101a3.4 3.4 0 0 1-.436 1.647l.001.002a2.97 2.97 0 0 1-1.12 1.137 3.16 3.16 0 0 1-1.608.41q-.922 0-1.65-.419h-.002a3.1 3.1 0 0 1-1.145-1.172l-.001-.002a3.5 3.5 0 0 1-.408-1.684q0-.921.409-1.667V10.5a3 3 0 0 1 1.146-1.173A3.2 3.2 0 0 1 8.598 8.9"
|
|
40
26
|
},
|
|
41
27
|
{
|
|
42
|
-
d: "
|
|
28
|
+
d: "M4 5.5h16A1.5 1.5 0 0 1 21.5 7v10a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 17V7A1.5 1.5 0 0 1 4 5.5z",
|
|
29
|
+
sw: 1
|
|
43
30
|
}
|
|
44
31
|
],
|
|
45
32
|
filled: [
|
|
46
33
|
{
|
|
47
|
-
d: "
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
d: "M18.97 5.61h-6.73c-1.68 0-3.03 1.35-3.03 3.03v6.73c0 1.68 1.35 3.03 3.03 3.03h6.73c1.68 0 3.03-1.35 3.03-3.03V8.64c0-1.68-1.35-3.03-3.03-3.03m-.71 7.15h-1.99v1.91a.76.76 0 1 1-1.52 0v-1.91h-1.82a.76.76 0 1 1 0-1.52h1.82V9.33a.76.76 0 1 1 1.52 0v1.91h1.99c.42 0 .76.34.76.76s-.33.76-.76.76"
|
|
34
|
+
d: "M20 5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8.598 8.8q-.931 0-1.694.44a3.1 3.1 0 0 0-1.07 1.023l-.113.19a3.5 3.5 0 0 0-.421 1.715c0 .634.138 1.214.42 1.732l.002.002q.43.769 1.181 1.21l.002.001q.756.434 1.701.432a3.26 3.26 0 0 0 1.658-.423q.734-.425 1.156-1.176a3.5 3.5 0 0 0 .45-1.695l.003-.204H8.16v.981h2.589q-.106.375-.34.682-.294.39-.76.608-.467.219-1.043.22a2.37 2.37 0 0 1-1.194-.3 2.1 2.1 0 0 1-.802-.825 2.65 2.65 0 0 1-.285-1.245q.001-.693.292-1.225.29-.532.805-.828a2.3 2.3 0 0 1 1.184-.307c.52 0 .972.138 1.365.412l.002.002c.396.268.647.616.763 1.048l.04.148h1.041l-.05-.24a2.7 2.7 0 0 0-.607-1.235 3.2 3.2 0 0 0-1.136-.836A3.4 3.4 0 0 0 8.598 8.8m4.202 6.648h1.025v-6.56H12.8zm2.031 0h1.025v-2.772h2.552v-.972h-2.552V9.878h2.78v-.99h-3.805zm-5.826-.126q-.058.007-.115.01zm.19-.027-.1.015zm-.436-.562v.001m-2.164-.969.031.04-.02-.024zm-1.092-1.717.002-.08zm.013-.216.005-.075zm.022-.195.01-.075zm5.266-.762.07.168a2 2 0 0 0-.107-.238zm-4.763-.562.064-.09zm.14-.189.04-.05zm.211-.238q.046-.048.096-.095-.05.046-.096.095m3.257-.713.051.018zm-.292-.085.043.01zm-.312-.057.056.007zm-3.321 1.886"
|
|
51
35
|
}
|
|
52
36
|
]
|
|
53
37
|
},
|
|
54
38
|
32: {
|
|
55
39
|
outlined: [
|
|
56
40
|
{
|
|
57
|
-
d: "
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
d: "M24.667 25.44h-8.88c-2.76 0-5-2.24-5-5v-8.88c0-2.76 2.24-5 5-5h8.88c2.76 0 5 2.24 5 5v8.88c0 2.76-2.24 5-5 5m-8.88-16.88c-1.654 0-3 1.347-3 3v8.88c0 1.653 1.346 3 3 3h8.88c1.653 0 3-1.347 3-3v-8.88c0-1.653-1.347-3-3-3z"
|
|
41
|
+
d: "M24.715 11.984v1.053h-3.707v2.701h3.403v1.03h-3.403v3.696h-1.1v-8.48zm-6.415 0v8.48h-1.1v-8.48zm-6.837-.118q.989 0 1.85.4l.212.101a4.1 4.1 0 0 1 1.254.978q.598.693.78 1.585l.034.16H14.47l-.027-.099q-.243-.912-1.072-1.472v-.001q-.821-.575-1.896-.575-.918 0-1.646.427v.001a2.93 2.93 0 0 0-1.124 1.157q-.405.741-.405 1.696.001.969.395 1.721.404.742 1.121 1.156l.186.096q.66.319 1.473.32.794 0 1.446-.304a2.8 2.8 0 0 0 1.064-.852l.102-.142q.297-.444.416-.982h-3.49v-1.04h4.681l-.003.135q-.025 1.226-.58 2.197v.001a3.96 3.96 0 0 1-1.493 1.517q-.95.547-2.143.546-1.23 0-2.203-.558a4.1 4.1 0 0 1-1.527-1.563v-.002q-.546-1.006-.546-2.246 0-1.228.545-2.223V14a4 4 0 0 1 1.528-1.565 4.3 4.3 0 0 1 2.19-.569"
|
|
61
42
|
},
|
|
62
43
|
{
|
|
63
|
-
d: "
|
|
64
|
-
|
|
65
|
-
{
|
|
66
|
-
d: "M23.84 17.173h-7.026c-.547 0-1-.453-1-1s.453-1 1-1h7.026c.547 0 1 .454 1 1 0 .547-.453 1-1 1"
|
|
44
|
+
d: "M5.333 7.333h21.333a2 2 0 0 1 2 2v13.334a2 2 0 0 1-2 2H5.333a2 2 0 0 1-2-2V9.333a2 2 0 0 1 2-2z",
|
|
45
|
+
sw: 1.333
|
|
67
46
|
}
|
|
68
47
|
],
|
|
69
48
|
filled: [
|
|
70
49
|
{
|
|
71
|
-
d: "
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
d: "M25.293 7.48H16.32c-2.24 0-4.04 1.8-4.04 4.04v8.974c0 2.24 1.8 4.04 4.04 4.04h8.973c2.24 0 4.04-1.8 4.04-4.04V11.52c0-2.24-1.8-4.04-4.04-4.04m-.947 9.534h-2.653v2.546c0 .547-.453 1.014-1.013 1.014s-1.014-.454-1.014-1.014v-2.546H17.24a1.013 1.013 0 1 1 0-2.027h2.426v-2.546c0-.547.44-1.014 1.014-1.014.546 0 1.013.454 1.013 1.014v2.546h2.653c.56 0 1.014.454 1.014 1.013 0 .56-.44 1.014-1.014 1.014"
|
|
50
|
+
d: "M26.667 6.667a2.667 2.667 0 0 1 2.667 2.667v13.333a2.667 2.667 0 0 1-2.667 2.667H5.334a2.667 2.667 0 0 1-2.667-2.667V9.334a2.667 2.667 0 0 1 2.667-2.667zm-15.203 5.066q-1.24-.001-2.258.587a4.1 4.1 0 0 0-1.428 1.363l-.15.253c-.376.684-.562 1.45-.562 2.288q-.001 1.27.56 2.31l.003.003a4.25 4.25 0 0 0 1.575 1.613l.003.001c.67.386 1.43.575 2.269.575q1.225.001 2.209-.563a4.1 4.1 0 0 0 1.542-1.568q.574-1.003.598-2.26l.006-.273H10.88v1.309h3.452a2.7 2.7 0 0 1-.453.909 2.65 2.65 0 0 1-1.015.811 3.25 3.25 0 0 1-1.388.293 3.16 3.16 0 0 1-1.593-.4h-.001a2.8 2.8 0 0 1-1.069-1.1q-.378-.719-.38-1.66.001-.925.39-1.633.387-.709 1.073-1.104l.001-.001q.696-.408 1.579-.41c.692 0 1.295.185 1.818.55l.003.003c.528.357.864.821 1.018 1.397l.053.198h1.389l-.067-.32a3.6 3.6 0 0 0-.81-1.646 4.24 4.24 0 0 0-1.514-1.115 4.5 4.5 0 0 0-1.902-.41m5.602 8.864h1.368V11.85h-1.368zm2.71 0h1.367v-3.696h3.402v-1.296h-3.402v-2.434h3.707v-1.32h-5.075zm-2.442-.266v-8.214zm-3.782-.399-.233.124a4 4 0 0 1 .233-.125zm.828-1.954a2.9 2.9 0 0 1-1.403 1.355 3 3 0 0 1 .166-.083q.568-.306.948-.809.167-.22.29-.463m-5.618.327-.075-.109.075.11M7.378 15.56l.026-.174q-.014.087-.025.174m.547-1.599q.037-.065.076-.127zm.116-.187q.045-.07.094-.138-.049.068-.094.138m.167-.233q.044-.06.092-.117-.047.056-.092.117m.685-.69q.105-.084.218-.158l.087-.055a4 4 0 0 0-.305.212m15.69.053h-3.707v-.001zm-13.106-.095v.001m1.377-.585q.207.07.406.162v.001a4 4 0 0 0-.405-.163m-.385-.111.08.021zm-.222-.044.088.016zm-.217-.033.11.014zM8.854 18.43q-.03-.037-.058-.076zm-.151-5.423"
|
|
75
51
|
}
|
|
76
52
|
]
|
|
77
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GifIcon.mjs","sources":["../../../src/components/Icons/GifIcon.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: \"
|
|
1
|
+
{"version":3,"file":"GifIcon.mjs","sources":["../../../src/components/Icons/GifIcon.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: \"M12.358 5.992v.527h-1.854v1.35h1.701v.515h-1.7v1.848h-.55v-4.24zm-3.208 0v4.24H8.6v-4.24zm-3.418-.058q.495 0 .926.199h-.001q.435.193.732.539.3.347.39.793l.018.08h-.562l-.013-.049a1.26 1.26 0 0 0-.536-.737 1.6 1.6 0 0 0-.948-.287 1.6 1.6 0 0 0-.823.214q-.36.206-.562.578-.203.37-.203.848 0 .484.197.86l.11.175q.182.248.452.403h-.001q.365.208.83.209.397 0 .723-.153a1.4 1.4 0 0 0 .532-.425q.188-.25.257-.562H5.506v-.521h2.341l-.002.068a2.3 2.3 0 0 1-.224.977l-.066.123q-.272.483-.746.757a2.1 2.1 0 0 1-1.071.274q-.538 0-.978-.214l-.124-.065a2.06 2.06 0 0 1-.763-.783h-.001A2.3 2.3 0 0 1 3.6 8.112q0-.614.272-1.112.279-.503.764-.782.493-.284 1.096-.284\",\n },\n {\n d: \"M2.667 3.667h10.666a1 1 0 0 1 1 1v6.666a1 1 0 0 1-1 1H2.667a1 1 0 0 1-1-1V4.667a1 1 0 0 1 1-1z\",\n sw: 0.667,\n },\n ],\n filled: [\n {\n d: \"M13.333 3.333c.737 0 1.333.597 1.333 1.333v6.667c0 .737-.596 1.333-1.333 1.333H2.666a1.333 1.333 0 0 1-1.333-1.333V4.666c0-.736.597-1.332 1.333-1.333zM5.732 5.867q-.62 0-1.13.293-.438.254-.713.682l-.075.126a2.34 2.34 0 0 0-.28 1.144q-.002.636.279 1.155h.002q.287.514.787.808h.002q.503.29 1.134.289.613 0 1.104-.283.49-.283.772-.784.286-.501.298-1.13l.003-.135H5.44v.654h1.726a1.4 1.4 0 0 1-.226.454q-.196.26-.508.405a1.6 1.6 0 0 1-.694.147q-.449-.001-.796-.2H4.94a1.4 1.4 0 0 1-.534-.55 1.8 1.8 0 0 1-.19-.83q0-.463.195-.817.193-.354.536-.552.348-.205.79-.205.518 0 .909.275l.002.002q.394.267.509.698l.026.099h.694l-.033-.16a1.8 1.8 0 0 0-.405-.823 2.1 2.1 0 0 0-.757-.557 2.2 2.2 0 0 0-.951-.205m2.802 4.432h.683V5.925h-.683zm1.353 0h.684V8.451h1.7v-.648h-1.7V6.585h1.853v-.66H9.887zm-3.89-.084-.03.003zm-.62-.012-.057-.01zm.864-.03-.038.008zm-1.109-.022-.055-.017zm1.342-.047-.046.017zm-1.58-.033-.043-.02zm2.151-.85h.001q-.108.143-.248.255.138-.112.247-.255M3.678 7.872l.002-.028zm.035-.242.01-.042zm.331-.778.029-.042zm.15-.19.03-.033zm.164-.163.047-.039zm1.493-.496q.033.002.064.006L5.732 6z\",\n },\n ],\n },\n 24: {\n outlined: [\n {\n d: \"M18.537 8.988v.79h-2.781v2.026h2.552v.772h-2.552v2.772h-.824v-6.36zm-4.812 0v6.36H12.9v-6.36zM8.598 8.9q.741 0 1.386.3l.16.075q.55.278.941.734a2.6 2.6 0 0 1 .585 1.188l.024.12h-.842l-.019-.074a1.9 1.9 0 0 0-.804-1.104l-.002-.001a2.4 2.4 0 0 0-1.42-.431 2.4 2.4 0 0 0-1.235.321q-.54.311-.843.867-.304.556-.304 1.273.001.726.296 1.291.304.555.842.866a2.47 2.47 0 0 0 1.243.313q.597 0 1.084-.229.49-.228.8-.639.283-.374.388-.842H8.26v-.78h3.51l-.001.101a3.4 3.4 0 0 1-.436 1.647l.001.002a2.97 2.97 0 0 1-1.12 1.137 3.16 3.16 0 0 1-1.608.41q-.922 0-1.65-.419h-.002a3.1 3.1 0 0 1-1.145-1.172l-.001-.002a3.5 3.5 0 0 1-.408-1.684q0-.921.409-1.667V10.5a3 3 0 0 1 1.146-1.173A3.2 3.2 0 0 1 8.598 8.9\",\n },\n {\n d: \"M4 5.5h16A1.5 1.5 0 0 1 21.5 7v10a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 17V7A1.5 1.5 0 0 1 4 5.5z\",\n sw: 1,\n },\n ],\n filled: [\n {\n d: \"M20 5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8.598 8.8q-.931 0-1.694.44a3.1 3.1 0 0 0-1.07 1.023l-.113.19a3.5 3.5 0 0 0-.421 1.715c0 .634.138 1.214.42 1.732l.002.002q.43.769 1.181 1.21l.002.001q.756.434 1.701.432a3.26 3.26 0 0 0 1.658-.423q.734-.425 1.156-1.176a3.5 3.5 0 0 0 .45-1.695l.003-.204H8.16v.981h2.589q-.106.375-.34.682-.294.39-.76.608-.467.219-1.043.22a2.37 2.37 0 0 1-1.194-.3 2.1 2.1 0 0 1-.802-.825 2.65 2.65 0 0 1-.285-1.245q.001-.693.292-1.225.29-.532.805-.828a2.3 2.3 0 0 1 1.184-.307c.52 0 .972.138 1.365.412l.002.002c.396.268.647.616.763 1.048l.04.148h1.041l-.05-.24a2.7 2.7 0 0 0-.607-1.235 3.2 3.2 0 0 0-1.136-.836A3.4 3.4 0 0 0 8.598 8.8m4.202 6.648h1.025v-6.56H12.8zm2.031 0h1.025v-2.772h2.552v-.972h-2.552V9.878h2.78v-.99h-3.805zm-5.826-.126q-.058.007-.115.01zm.19-.027-.1.015zm-.436-.562v.001m-2.164-.969.031.04-.02-.024zm-1.092-1.717.002-.08zm.013-.216.005-.075zm.022-.195.01-.075zm5.266-.762.07.168a2 2 0 0 0-.107-.238zm-4.763-.562.064-.09zm.14-.189.04-.05zm.211-.238q.046-.048.096-.095-.05.046-.096.095m3.257-.713.051.018zm-.292-.085.043.01zm-.312-.057.056.007zm-3.321 1.886\",\n },\n ],\n },\n 32: {\n outlined: [\n {\n d: \"M24.715 11.984v1.053h-3.707v2.701h3.403v1.03h-3.403v3.696h-1.1v-8.48zm-6.415 0v8.48h-1.1v-8.48zm-6.837-.118q.989 0 1.85.4l.212.101a4.1 4.1 0 0 1 1.254.978q.598.693.78 1.585l.034.16H14.47l-.027-.099q-.243-.912-1.072-1.472v-.001q-.821-.575-1.896-.575-.918 0-1.646.427v.001a2.93 2.93 0 0 0-1.124 1.157q-.405.741-.405 1.696.001.969.395 1.721.404.742 1.121 1.156l.186.096q.66.319 1.473.32.794 0 1.446-.304a2.8 2.8 0 0 0 1.064-.852l.102-.142q.297-.444.416-.982h-3.49v-1.04h4.681l-.003.135q-.025 1.226-.58 2.197v.001a3.96 3.96 0 0 1-1.493 1.517q-.95.547-2.143.546-1.23 0-2.203-.558a4.1 4.1 0 0 1-1.527-1.563v-.002q-.546-1.006-.546-2.246 0-1.228.545-2.223V14a4 4 0 0 1 1.528-1.565 4.3 4.3 0 0 1 2.19-.569\",\n },\n {\n d: \"M5.333 7.333h21.333a2 2 0 0 1 2 2v13.334a2 2 0 0 1-2 2H5.333a2 2 0 0 1-2-2V9.333a2 2 0 0 1 2-2z\",\n sw: 1.333,\n },\n ],\n filled: [\n {\n d: \"M26.667 6.667a2.667 2.667 0 0 1 2.667 2.667v13.333a2.667 2.667 0 0 1-2.667 2.667H5.334a2.667 2.667 0 0 1-2.667-2.667V9.334a2.667 2.667 0 0 1 2.667-2.667zm-15.203 5.066q-1.24-.001-2.258.587a4.1 4.1 0 0 0-1.428 1.363l-.15.253c-.376.684-.562 1.45-.562 2.288q-.001 1.27.56 2.31l.003.003a4.25 4.25 0 0 0 1.575 1.613l.003.001c.67.386 1.43.575 2.269.575q1.225.001 2.209-.563a4.1 4.1 0 0 0 1.542-1.568q.574-1.003.598-2.26l.006-.273H10.88v1.309h3.452a2.7 2.7 0 0 1-.453.909 2.65 2.65 0 0 1-1.015.811 3.25 3.25 0 0 1-1.388.293 3.16 3.16 0 0 1-1.593-.4h-.001a2.8 2.8 0 0 1-1.069-1.1q-.378-.719-.38-1.66.001-.925.39-1.633.387-.709 1.073-1.104l.001-.001q.696-.408 1.579-.41c.692 0 1.295.185 1.818.55l.003.003c.528.357.864.821 1.018 1.397l.053.198h1.389l-.067-.32a3.6 3.6 0 0 0-.81-1.646 4.24 4.24 0 0 0-1.514-1.115 4.5 4.5 0 0 0-1.902-.41m5.602 8.864h1.368V11.85h-1.368zm2.71 0h1.367v-3.696h3.402v-1.296h-3.402v-2.434h3.707v-1.32h-5.075zm-2.442-.266v-8.214zm-3.782-.399-.233.124a4 4 0 0 1 .233-.125zm.828-1.954a2.9 2.9 0 0 1-1.403 1.355 3 3 0 0 1 .166-.083q.568-.306.948-.809.167-.22.29-.463m-5.618.327-.075-.109.075.11M7.378 15.56l.026-.174q-.014.087-.025.174m.547-1.599q.037-.065.076-.127zm.116-.187q.045-.07.094-.138-.049.068-.094.138m.167-.233q.044-.06.092-.117-.047.056-.092.117m.685-.69q.105-.084.218-.158l.087-.055a4 4 0 0 0-.305.212m15.69.053h-3.707v-.001zm-13.106-.095v.001m1.377-.585q.207.07.406.162v.001a4 4 0 0 0-.405-.163m-.385-.111.08.021zm-.222-.044.088.016zm-.217-.033.11.014zM8.854 18.43q-.03-.037-.058-.076zm-.151-5.423\",\n },\n ],\n },\n};\n\n/** Props for {@link GifIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type GifIconProps = BaseIconProps;\n\n/**\n * Gif icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.\n *\n * @example\n * ```tsx\n * <GifIcon size={24} filled />\n * ```\n */\nexport const GifIcon = React.forwardRef<SVGSVGElement, GifIconProps>((props, ref) => (\n <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nGifIcon.displayName = \"GifIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,UAAU,MAAM,WAAwC,CAAC,OAAO,QAC3E,oBAAC,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,QAAQ,cAAc;"}
|