@fanvue/ui 3.5.0 → 3.7.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/charts.d.ts +1 -1
- package/dist/cjs/components/Chart/ChartCard.cjs +2 -2
- package/dist/cjs/components/Chart/ChartCard.cjs.map +1 -1
- package/dist/cjs/components/ChatInput/ChatInput.cjs +128 -92
- package/dist/cjs/components/ChatInput/ChatInput.cjs.map +1 -1
- package/dist/cjs/components/Chip/Chip.cjs +46 -10
- package/dist/cjs/components/Chip/Chip.cjs.map +1 -1
- package/dist/cjs/components/Drawer/Drawer.cjs +6 -3
- package/dist/cjs/components/Drawer/Drawer.cjs.map +1 -1
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs +20 -4
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/cjs/components/Icons/TickIcon.cjs +3 -1
- package/dist/cjs/components/Icons/TickIcon.cjs.map +1 -1
- package/dist/cjs/components/Logo/Logo.cjs +107 -33
- package/dist/cjs/components/Logo/Logo.cjs.map +1 -1
- package/dist/cjs/components/Logo/agenciesIcon.cjs +6 -0
- package/dist/cjs/components/Logo/agenciesIcon.cjs.map +1 -0
- package/dist/cjs/components/Tabs/TabsList.cjs +20 -12
- package/dist/cjs/components/Tabs/TabsList.cjs.map +1 -1
- package/dist/cjs/components/Tabs/TabsTrigger.cjs +8 -7
- package/dist/cjs/components/Tabs/TabsTrigger.cjs.map +1 -1
- package/dist/components/Chart/ChartCard.mjs +2 -2
- package/dist/components/Chart/ChartCard.mjs.map +1 -1
- package/dist/components/ChatInput/ChatInput.mjs +128 -92
- package/dist/components/ChatInput/ChatInput.mjs.map +1 -1
- package/dist/components/Chip/Chip.mjs +46 -10
- package/dist/components/Chip/Chip.mjs.map +1 -1
- package/dist/components/Drawer/Drawer.mjs +6 -3
- package/dist/components/Drawer/Drawer.mjs.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.mjs +20 -4
- package/dist/components/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/dist/components/Icons/TickIcon.mjs +3 -1
- package/dist/components/Icons/TickIcon.mjs.map +1 -1
- package/dist/components/Logo/Logo.mjs +107 -33
- package/dist/components/Logo/Logo.mjs.map +1 -1
- package/dist/components/Logo/agenciesIcon.mjs +6 -0
- package/dist/components/Logo/agenciesIcon.mjs.map +1 -0
- package/dist/components/Tabs/TabsList.mjs +20 -12
- package/dist/components/Tabs/TabsList.mjs.map +1 -1
- package/dist/components/Tabs/TabsTrigger.mjs +8 -7
- package/dist/components/Tabs/TabsTrigger.mjs.map +1 -1
- package/dist/index.d.ts +61 -6
- package/package.json +8 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.cjs","sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst getLogoColors = (color: LogoColor, variant: LogoVariant) => {\n if (color === \"fullColour\") {\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\", // Uses parent's text-content-primary\n };\n }\n\n if (color === \"decolour\") {\n return {\n iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n textClass: \"\", // Uses parent's text-content-primary\n };\n }\n\n if (color === \"whiteAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-always-white\",\n };\n }\n\n if (color === \"blackAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-black)\"\n : \"var(--color-brand-primary-default)\",\n iconInner:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-always-black\",\n };\n }\n\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\", // Default to adaptive color\n };\n};\n\n/** Layout variant of the logo. */\nexport type LogoVariant = \"full\" | \"icon\" | \"wordmark\" | \"portrait\";\n/** Colour scheme of the logo. */\nexport type LogoColor = \"fullColour\" | \"decolour\" | \"whiteAlways\" | \"blackAlways\";\n/** Height of the logo in pixels. Both icon and wordmark scale proportionally. */\nexport type LogoSize = \"16\" | \"20\" | \"24\" | \"32\" | \"40\" | \"48\" | \"64\";\n\nconst sizeClasses: Record<LogoSize, string> = {\n \"16\": \"h-4\",\n \"20\": \"h-5\",\n \"24\": \"h-6\",\n \"32\": \"h-8\",\n \"40\": \"h-10\",\n \"48\": \"h-12\",\n \"64\": \"h-16\",\n};\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Layout variant of the logo. @default \"full\" */\n variant?: LogoVariant;\n /** Colour scheme of the logo. @default \"fullColour\" */\n color?: LogoColor;\n /** Height of the logo in pixels. @default \"32\" (or \"40\" when `variant=\"icon\"`) */\n size?: LogoSize;\n /**\n * Accessible label for the logo. Required when `type` is `\"icon\"` and\n * the logo is used inside interactive contexts (links, buttons).\n *\n * @example \"Fanvue home\"\n */\n \"aria-label\"?: string;\n}\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n return (\n <svg\n viewBox=\"0 0 128 30\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n className={className}\n data-testid=\"logo-wordmark\"\n >\n <path\n d=\"M89.0679 20.1823C89.0679 23.4373 90.1256 25.553 93.0961 25.553C95.9847 25.553 98.1815 23.0304 98.1815 17.7818V8.01701H102.902V29.0523H98.2629V25.3495C97.1238 27.75 95.2114 29.6218 91.9566 29.6218C86.464 29.6218 84.3888 26.0006 84.3888 21.1589V8.01701H89.0679V20.1823ZM116.586 7.44485C123.787 7.44485 126.717 12.9782 126.757 18.9592C126.757 19.1627 126.757 19.4883 126.716 19.8544H110.523C110.889 23.5569 113.249 25.8353 116.586 25.8353C118.986 25.8353 121.02 24.8995 121.752 22.8245H126.432C125.211 27.0966 121.59 29.6192 116.586 29.6192C110.279 29.6192 106.007 25.1028 106.007 18.4707C106.007 12.0829 110.483 7.44485 116.586 7.44485ZM29.0135 7.40527C35.971 7.40527 37.8834 11.5958 37.8834 16.112V24.2089C37.8834 25.7957 37.965 27.8301 38.2091 29.0508H33.408C33.3266 28.237 33.2858 27.4232 33.2858 26.5688V25.5922H33.2451C32.5534 27.301 30.7633 29.5795 26.5726 29.5796C21.8122 29.5796 19.1673 26.6501 19.1673 23.3137C19.1674 17.4955 26.2876 17.0073 29.3391 16.5191C32.0245 16.1122 33.2451 15.5831 33.2451 13.7929C33.2451 12.1248 31.6581 11.067 29.0949 11.067C26.8165 11.067 25.1484 12.3691 24.6601 14.4441H20.1846C20.7135 11.1078 23.5208 7.40535 29.0135 7.40527ZM66.6676 8.01701C68.4577 13.5504 70.2072 18.8399 71.9568 24.3326H71.9973C73.5435 19.2874 75.4559 13.5911 77.2055 8.01701H82.2099C79.606 15.0559 77.0835 22.0134 74.5202 29.0523H69.312L61.6223 8.01701H66.6676ZM18.3094 4.15021H4.92328V12.2878H17.2107V16.3973H4.92328V29.0508H0V0H18.3094V4.15021ZM52.6473 7.44485C58.099 7.44493 60.2147 11.066 60.2147 15.9077V29.0497H55.536V16.8839C55.536 13.629 54.437 11.5133 51.5078 11.5133C48.5783 11.5133 46.4216 14.036 46.4216 19.2845V29.0497H41.7024V8.01436H46.3406V11.7168C47.4392 9.31627 49.3921 7.44485 52.6473 7.44485ZM33.3265 17.0886C32.879 18.2685 31.7802 19.2856 28.1997 19.9773C25.3111 20.5062 23.8464 21.4015 23.8464 23.1509C23.8464 24.8191 25.2704 26.04 27.7523 26.04C30.5597 26.04 33.3265 24.2902 33.3265 19.2857V17.0886ZM116.586 11.1066C113.249 11.1066 111.011 13.263 110.564 16.5179H122.119C121.834 13.5071 120.085 11.1066 116.586 11.1066Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\n/**\n * The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only,\n * and portrait (stacked) layouts with multiple colour schemes.\n *\n * @example\n * ```tsx\n * <Logo type=\"full\" color=\"fullColour\" />\n * ```\n */\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n ({ className, variant = \"full\", color = \"fullColour\", size, ...props }, ref) => {\n const colors = getLogoColors(color, variant);\n const showIcon = variant === \"full\" || variant === \"icon\" || variant === \"portrait\";\n const showWordmark = variant === \"full\" || variant === \"wordmark\" || variant === \"portrait\";\n const sizeClass = sizeClasses[size ?? (variant === \"icon\" ? \"40\" : \"32\")];\n\n // When aria-label is provided, add role=\"img\" for proper accessibility\n const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n\n return (\n <div\n ref={ref}\n data-testid=\"logo\"\n className={cn(\n \"inline-flex items-center text-content-primary\",\n variant === \"portrait\" ? \"flex-col gap-2\" : \"flex-row\",\n variant === \"full\" && \"gap-2\",\n className,\n )}\n {...ariaProps}\n {...props}\n >\n {showIcon && (\n <svg\n viewBox=\"0 0 39 39\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn(\"w-auto shrink-0\", sizeClass)}\n aria-hidden=\"true\"\n data-testid=\"logo-icon\"\n >\n <path\n d=\"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\"\n {...(color === \"decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\"\n {...(color === \"decolour\"\n ? { className: colors.iconInnerClass }\n : { fill: colors.iconInner })}\n />\n </svg>\n )}\n {showWordmark && <WordmarkSVG className={cn(\"w-auto\", sizeClass, colors.textClass)} />}\n </div>\n );\n },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":["jsx","React","jsxs","cn"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Logo.cjs","sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { AGENCIES_ICON_SVG } from \"./agenciesIcon\";\n\nconst getLogoColors = (color: LogoColor, variant: LogoVariant) => {\n if (color === \"fullColour\") {\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\",\n };\n }\n\n if (color === \"decolour\") {\n return {\n iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n textClass: \"\",\n };\n }\n\n if (color === \"whiteAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-always-white\",\n };\n }\n\n if (color === \"blackAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-black)\"\n : \"var(--color-brand-primary-default)\",\n iconInner:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-always-black\",\n };\n }\n\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\",\n };\n};\n\n/** Layout variant of the logo. */\nexport type LogoVariant = \"full\" | \"icon\" | \"wordmark\" | \"portrait\";\n/** Colour scheme of the logo. */\nexport type LogoColor = \"fullColour\" | \"decolour\" | \"whiteAlways\" | \"blackAlways\";\n/** Sub-brand version of the logo. */\nexport type LogoVersion = \"default\" | \"agencies\";\n/** Height of the logo in pixels. Both icon and wordmark scale proportionally. */\nexport type LogoSize = \"16\" | \"20\" | \"24\" | \"32\" | \"40\" | \"48\" | \"64\";\n\nconst sizeClasses: Record<LogoSize, string> = {\n \"16\": \"h-4\",\n \"20\": \"h-5\",\n \"24\": \"h-6\",\n \"32\": \"h-8\",\n \"40\": \"h-10\",\n \"48\": \"h-12\",\n \"64\": \"h-16\",\n};\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Layout variant of the logo. @default \"full\" */\n variant?: LogoVariant;\n /** Colour scheme of the logo. @default \"fullColour\" */\n color?: LogoColor;\n /** Sub-brand version of the logo. @default \"default\" */\n version?: LogoVersion;\n /** Height of the logo in pixels. @default \"32\" (or \"40\" when `variant=\"icon\"`) */\n size?: LogoSize;\n /**\n * Accessible label for the logo. Required when `variant` is `\"icon\"` and\n * the logo is used inside interactive contexts (links, buttons).\n *\n * @example \"Fanvue home\"\n */\n \"aria-label\"?: string;\n}\n\nconst ICON_BG_PATH =\n \"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\";\nconst ICON_F_PATH =\n \"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\";\n\n/** The flat brand icon (rounded square + \"F\" knockout), coloured per scheme. */\nconst FlatIconSVG = ({\n className,\n color,\n variant,\n}: {\n className?: string;\n color: LogoColor;\n variant: LogoVariant;\n}) => {\n const colors = getLogoColors(color, variant);\n return (\n <svg\n viewBox=\"0 0 39 39\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n aria-hidden=\"true\"\n data-testid=\"logo-icon\"\n >\n <path\n d={ICON_BG_PATH}\n {...(color === \"decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d={ICON_F_PATH}\n {...(color === \"decolour\"\n ? { className: colors.iconInnerClass }\n : { fill: colors.iconInner })}\n />\n </svg>\n );\n};\n\n/**\n * The glossy \"Fanvue Agencies\" gradient icon. Injected as markup so its gradients and\n * blend-mode gloss render intact; `isolate` keeps the blend from reaching the page, and\n * ids are namespaced per instance so multiple logos on a page don't collide.\n */\nconst AgenciesIconSVG = ({ className }: { className?: string }) => {\n const ns = React.useId().replace(/:/g, \"\");\n const html = React.useMemo(\n () =>\n AGENCIES_ICON_SVG.replace(/id=\"([a-z]+)\"/g, `id=\"$1${ns}\"`)\n .replace(/url\\(#([a-z]+)\\)/g, `url(#$1${ns})`)\n .replace(/href=\"#([a-z]+)\"/g, `href=\"#$1${ns}\"`),\n [ns],\n );\n return (\n <span\n className={cn(\"inline-block aspect-square isolate\", className)}\n aria-hidden=\"true\"\n data-testid=\"logo-icon\"\n // biome-ignore lint/security/noDangerouslySetInnerHtml: static asset, ids namespaced per instance\n dangerouslySetInnerHTML={{ __html: html }}\n />\n );\n};\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n return (\n <svg\n viewBox=\"0 0 128 30\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n className={className}\n data-testid=\"logo-wordmark\"\n >\n <path\n d=\"M89.0679 20.1823C89.0679 23.4373 90.1256 25.553 93.0961 25.553C95.9847 25.553 98.1815 23.0304 98.1815 17.7818V8.01701H102.902V29.0523H98.2629V25.3495C97.1238 27.75 95.2114 29.6218 91.9566 29.6218C86.464 29.6218 84.3888 26.0006 84.3888 21.1589V8.01701H89.0679V20.1823ZM116.586 7.44485C123.787 7.44485 126.717 12.9782 126.757 18.9592C126.757 19.1627 126.757 19.4883 126.716 19.8544H110.523C110.889 23.5569 113.249 25.8353 116.586 25.8353C118.986 25.8353 121.02 24.8995 121.752 22.8245H126.432C125.211 27.0966 121.59 29.6192 116.586 29.6192C110.279 29.6192 106.007 25.1028 106.007 18.4707C106.007 12.0829 110.483 7.44485 116.586 7.44485ZM29.0135 7.40527C35.971 7.40527 37.8834 11.5958 37.8834 16.112V24.2089C37.8834 25.7957 37.965 27.8301 38.2091 29.0508H33.408C33.3266 28.237 33.2858 27.4232 33.2858 26.5688V25.5922H33.2451C32.5534 27.301 30.7633 29.5795 26.5726 29.5796C21.8122 29.5796 19.1673 26.6501 19.1673 23.3137C19.1674 17.4955 26.2876 17.0073 29.3391 16.5191C32.0245 16.1122 33.2451 15.5831 33.2451 13.7929C33.2451 12.1248 31.6581 11.067 29.0949 11.067C26.8165 11.067 25.1484 12.3691 24.6601 14.4441H20.1846C20.7135 11.1078 23.5208 7.40535 29.0135 7.40527ZM66.6676 8.01701C68.4577 13.5504 70.2072 18.8399 71.9568 24.3326H71.9973C73.5435 19.2874 75.4559 13.5911 77.2055 8.01701H82.2099C79.606 15.0559 77.0835 22.0134 74.5202 29.0523H69.312L61.6223 8.01701H66.6676ZM18.3094 4.15021H4.92328V12.2878H17.2107V16.3973H4.92328V29.0508H0V0H18.3094V4.15021ZM52.6473 7.44485C58.099 7.44493 60.2147 11.066 60.2147 15.9077V29.0497H55.536V16.8839C55.536 13.629 54.437 11.5133 51.5078 11.5133C48.5783 11.5133 46.4216 14.036 46.4216 19.2845V29.0497H41.7024V8.01436H46.3406V11.7168C47.4392 9.31627 49.3921 7.44485 52.6473 7.44485ZM33.3265 17.0886C32.879 18.2685 31.7802 19.2856 28.1997 19.9773C25.3111 20.5062 23.8464 21.4015 23.8464 23.1509C23.8464 24.8191 25.2704 26.04 27.7523 26.04C30.5597 26.04 33.3265 24.2902 33.3265 19.2857V17.0886ZM116.586 11.1066C113.249 11.1066 111.011 13.263 110.564 16.5179H122.119C121.834 13.5071 120.085 11.1066 116.586 11.1066Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\n/**\n * The \"Fanvue Agencies\" lockup: the wordmark with a right-aligned AGENCIES sub-label.\n * Anchoring the column's font-size to the icon height (1em) sizes the wordmark (0.75em)\n * and label (0.25em) in `em`, so both scale with `size`. `padTop` adds the 0.125em that\n * centres the 0.75em wordmark against the full-height icon in the horizontal lockup.\n */\nconst AgenciesWordmark = ({\n size,\n color,\n textClass,\n padTop,\n}: {\n size: LogoSize;\n color: LogoColor;\n textClass: string;\n padTop: boolean;\n}) => (\n <div\n className={cn(\"inline-flex flex-col items-end\", padTop && \"pt-[0.125em]\")}\n style={{ fontSize: `${size}px` }}\n >\n <WordmarkSVG className={cn(\"h-[0.75em] w-auto\", textClass)} />\n <span\n className=\"font-bold uppercase leading-none\"\n style={{\n color: color === \"decolour\" ? \"currentColor\" : \"var(--primitives-color-purple-300)\",\n fontSize: \"0.25em\",\n letterSpacing: \"0.05em\",\n marginTop: \"0.06em\",\n }}\n >\n AGENCIES\n </span>\n </div>\n);\n\n/**\n * The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only, and\n * portrait (stacked) layouts with multiple colour schemes. `version=\"agencies\"` renders the\n * sub-brand lockup: a glossy purple icon and an \"AGENCIES\" label beneath the wordmark.\n *\n * @example\n * ```tsx\n * <Logo variant=\"full\" color=\"fullColour\" />\n * <Logo variant=\"full\" version=\"agencies\" />\n * ```\n */\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n (\n { className, variant = \"full\", color = \"fullColour\", version = \"default\", size, ...props },\n ref,\n ) => {\n const colors = getLogoColors(color, variant);\n const isAgencies = version === \"agencies\";\n const isAgenciesFull = isAgencies && variant === \"full\";\n const showIcon = variant === \"full\" || variant === \"icon\" || variant === \"portrait\";\n const showWordmark = variant === \"full\" || variant === \"wordmark\" || variant === \"portrait\";\n const resolvedSize = size ?? (variant === \"icon\" ? \"40\" : \"32\");\n const sizeClass = sizeClasses[resolvedSize];\n\n const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n // The glossy icon only has a purple treatment; decolour falls back to the flat mono icon.\n const useGlossyIcon = isAgencies && color !== \"decolour\";\n\n return (\n <div\n ref={ref}\n data-testid=\"logo\"\n className={cn(\n \"inline-flex text-content-primary\",\n // Agencies full lockup aligns the icon and wordmark by their centres while the\n // AGENCIES label hangs below; every other case centres the row.\n isAgenciesFull ? \"items-start\" : \"items-center\",\n variant === \"portrait\" ? \"flex-col gap-2\" : \"flex-row\",\n variant === \"full\" && \"gap-2\",\n className,\n )}\n {...ariaProps}\n {...props}\n >\n {showIcon &&\n (useGlossyIcon ? (\n <AgenciesIconSVG className={cn(\"w-auto shrink-0\", sizeClass)} />\n ) : (\n <FlatIconSVG\n className={cn(\"w-auto shrink-0\", sizeClass)}\n color={color}\n variant={variant}\n />\n ))}\n {showWordmark &&\n (isAgencies ? (\n <AgenciesWordmark\n size={resolvedSize}\n color={color}\n textClass={colors.textClass}\n padTop={isAgenciesFull}\n />\n ) : (\n <WordmarkSVG className={cn(\"w-auto\", sizeClass, colors.textClass)} />\n ))}\n </div>\n );\n },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":["jsxs","jsx","React","AGENCIES_ICON_SVG","cn"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const AGENCIES_ICON_SVG = '<svg width="100%" height="100%" style="display:block" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g clip-path="url(#a)"><path fill="#49f264" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z"/><path fill="url(#b)" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z" style="mix-blend-mode:lighten"/><path fill="url(#c)" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z"/><g style="mix-blend-mode:color-dodge"><mask id="e" width="32" height="32" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="url(#d)" d="M0 0h32v32H0z"/></mask><g mask="url(#e)"><path fill="url(#f)" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z"/></g></g><path stroke="url(#g)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><path stroke="url(#h)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><path stroke="url(#i)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><path stroke="url(#j)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><g fill-rule="evenodd" clip-rule="evenodd" filter="url(#k)"><path fill="url(#l)" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z"/><path fill="url(#m)" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z" style="mix-blend-mode:lighten"/></g><path fill="#000" fill-opacity=".01" fill-rule="evenodd" clip-rule="evenodd" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z" clip-rule="evenodd"/><path stroke="url(#n)" stroke-width=".2" d="M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z"/><path stroke="url(#o)" stroke-width=".2" d="M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z"/><mask id="q" width="32" height="32" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="url(#p)" d="M0 0h32v32H0z"/></mask><g mask="url(#q)"><path fill="url(#r)" fill-rule="evenodd" clip-rule="evenodd" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z" clip-rule="evenodd"/></g><rect width="32" height="32" fill="#9772ff" rx="9" style="mix-blend-mode:hue"/></g><defs><radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="matrix(0 23.9175 -30.8218 0 16.1649 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#80f593"/><stop offset="1" stop-color="#49f264"/></radialGradient><radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="matrix(0 -8.2 26.3263 0 16 32)" gradientUnits="userSpaceOnUse"><stop stop-color="#0ec833"/><stop offset="1" stop-color="#49f264" stop-opacity="0"/></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientTransform="rotate(90 8 8)scale(16 216.921)" gradientUnits="userSpaceOnUse"><stop stop-color="#acf6b9"/><stop offset="1" stop-color="#49f264"/></radialGradient><radialGradient id="h" cx="0" cy="0" r="1" gradientTransform="matrix(0 -16 194.49 0 16 32)" gradientUnits="userSpaceOnUse"><stop stop-color="#80f593"/><stop offset="1" stop-color="#49f264" stop-opacity="0"/></radialGradient><radialGradient id="m" cx="0" cy="0" r="1" gradientTransform="matrix(-.05865 17.4934 -29.59743 -.09923 16.4 7.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".05"/><stop offset=".746382" stop-color="#fff" stop-opacity=".2"/></radialGradient><radialGradient id="n" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.4 -19.5245 0 16.4 7.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".4"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="o" cx="0" cy="0" r="1" gradientTransform="matrix(.4 -12.20004 70.05845 2.29703 16 25.2)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="f" x1="16" x2="16" y1="0" y2="32" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".95"/><stop offset=".317308" stop-color="#fff" stop-opacity=".5"/><stop offset="1" stop-color="#fff" stop-opacity=".95"/></linearGradient><linearGradient id="i" x1="16" x2="16" y1="32" y2="31.6" gradientUnits="userSpaceOnUse"><stop stop-color="#acf6b9"/><stop offset="1" stop-color="#49f264" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="16" x2="16" y1=".4" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#49f264" stop-opacity="0"/><stop offset="1" stop-color="#d4f7da"/></linearGradient><linearGradient id="l" x1="16.4" x2="16.4" y1="7.6" y2="20.2" gradientUnits="userSpaceOnUse"><stop stop-color="#2e2e2e"/><stop offset="1" stop-color="#151515"/></linearGradient><linearGradient id="r" x1="16.4" x2="16.4" y1="2.4" y2="25.2" gradientUnits="userSpaceOnUse"><stop stop-color="#737373"/><stop offset="1" stop-color="#333"/></linearGradient><pattern id="d" width="1" height="1" patternContentUnits="objectBoundingBox"><use xlink:href="#s" transform="scale(.00156)"/></pattern><pattern id="p" width="1" height="1" patternContentUnits="objectBoundingBox"><use xlink:href="#s" transform="scale(.00156)"/></pattern><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath><filter id="k" width="29.9125" height="27.7864" x="4.38512" y="7.30703" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".4"/><feGaussianBlur stdDeviation=".4"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.48 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".8" dy="1.2"/><feGaussianBlur stdDeviation=".8"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.42 0"/><feBlend in2="effect1_dropShadow_7301_30525" result="effect2_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1.6" dy="2.8"/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.24 0"/><feBlend in2="effect2_dropShadow_7301_30525" result="effect3_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2.8" dy="4.8"/><feGaussianBlur stdDeviation="1.2"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.07 0"/><feBlend in2="effect3_dropShadow_7301_30525" result="effect4_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="4.4" dy="7.6"/><feGaussianBlur stdDeviation="1.2"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.01 0"/><feBlend in2="effect4_dropShadow_7301_30525" result="effect5_dropShadow_7301_30525"/><feBlend in="SourceGraphic" in2="effect5_dropShadow_7301_30525" result="shape"/></filter></defs></svg>';
|
|
5
|
+
exports.AGENCIES_ICON_SVG = AGENCIES_ICON_SVG;
|
|
6
|
+
//# sourceMappingURL=agenciesIcon.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"agenciesIcon.cjs","sources":["../../../../src/components/Logo/agenciesIcon.ts"],"sourcesContent":["// Fanvue Agencies gradient icon, exported from Figma (vector, raster stripped). The purple\n// is produced by a `mix-blend-mode:hue` layer over the green base, matching the brand spec.\nexport const AGENCIES_ICON_SVG =\n '<svg width=\"100%\" height=\"100%\" style=\"display:block\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g clip-path=\"url(#a)\"><path fill=\"#49f264\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\"/><path fill=\"url(#b)\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\" style=\"mix-blend-mode:lighten\"/><path fill=\"url(#c)\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\"/><g style=\"mix-blend-mode:color-dodge\"><mask id=\"e\" width=\"32\" height=\"32\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"url(#d)\" d=\"M0 0h32v32H0z\"/></mask><g mask=\"url(#e)\"><path fill=\"url(#f)\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\"/></g></g><path stroke=\"url(#g)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><path stroke=\"url(#h)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><path stroke=\"url(#i)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><path stroke=\"url(#j)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><g fill-rule=\"evenodd\" clip-rule=\"evenodd\" filter=\"url(#k)\"><path fill=\"url(#l)\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\"/><path fill=\"url(#m)\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\" style=\"mix-blend-mode:lighten\"/></g><path fill=\"#000\" fill-opacity=\".01\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\" clip-rule=\"evenodd\"/><path stroke=\"url(#n)\" stroke-width=\".2\" d=\"M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z\"/><path stroke=\"url(#o)\" stroke-width=\".2\" d=\"M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z\"/><mask id=\"q\" width=\"32\" height=\"32\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"url(#p)\" d=\"M0 0h32v32H0z\"/></mask><g mask=\"url(#q)\"><path fill=\"url(#r)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\" clip-rule=\"evenodd\"/></g><rect width=\"32\" height=\"32\" fill=\"#9772ff\" rx=\"9\" style=\"mix-blend-mode:hue\"/></g><defs><radialGradient id=\"b\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 23.9175 -30.8218 0 16.1649 0)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#80f593\"/><stop offset=\"1\" stop-color=\"#49f264\"/></radialGradient><radialGradient id=\"c\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 -8.2 26.3263 0 16 32)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#0ec833\"/><stop offset=\"1\" stop-color=\"#49f264\" stop-opacity=\"0\"/></radialGradient><radialGradient id=\"g\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"rotate(90 8 8)scale(16 216.921)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#acf6b9\"/><stop offset=\"1\" stop-color=\"#49f264\"/></radialGradient><radialGradient id=\"h\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 -16 194.49 0 16 32)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#80f593\"/><stop offset=\"1\" stop-color=\"#49f264\" stop-opacity=\"0\"/></radialGradient><radialGradient id=\"m\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(-.05865 17.4934 -29.59743 -.09923 16.4 7.6)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".05\"/><stop offset=\".746382\" stop-color=\"#fff\" stop-opacity=\".2\"/></radialGradient><radialGradient id=\"n\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 3.4 -19.5245 0 16.4 7.6)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".4\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient><radialGradient id=\"o\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(.4 -12.20004 70.05845 2.29703 16 25.2)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".1\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient><linearGradient id=\"f\" x1=\"16\" x2=\"16\" y1=\"0\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".95\"/><stop offset=\".317308\" stop-color=\"#fff\" stop-opacity=\".5\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".95\"/></linearGradient><linearGradient id=\"i\" x1=\"16\" x2=\"16\" y1=\"32\" y2=\"31.6\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#acf6b9\"/><stop offset=\"1\" stop-color=\"#49f264\" stop-opacity=\"0\"/></linearGradient><linearGradient id=\"j\" x1=\"16\" x2=\"16\" y1=\".4\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#49f264\" stop-opacity=\"0\"/><stop offset=\"1\" stop-color=\"#d4f7da\"/></linearGradient><linearGradient id=\"l\" x1=\"16.4\" x2=\"16.4\" y1=\"7.6\" y2=\"20.2\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#2e2e2e\"/><stop offset=\"1\" stop-color=\"#151515\"/></linearGradient><linearGradient id=\"r\" x1=\"16.4\" x2=\"16.4\" y1=\"2.4\" y2=\"25.2\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#737373\"/><stop offset=\"1\" stop-color=\"#333\"/></linearGradient><pattern id=\"d\" width=\"1\" height=\"1\" patternContentUnits=\"objectBoundingBox\"><use xlink:href=\"#s\" transform=\"scale(.00156)\"/></pattern><pattern id=\"p\" width=\"1\" height=\"1\" patternContentUnits=\"objectBoundingBox\"><use xlink:href=\"#s\" transform=\"scale(.00156)\"/></pattern><clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 0h32v32H0z\"/></clipPath><filter id=\"k\" width=\"29.9125\" height=\"27.7864\" x=\"4.38512\" y=\"7.30703\" color-interpolation-filters=\"sRGB\" filterUnits=\"userSpaceOnUse\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\".4\"/><feGaussianBlur stdDeviation=\".4\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.48 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\".8\" dy=\"1.2\"/><feGaussianBlur stdDeviation=\".8\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.42 0\"/><feBlend in2=\"effect1_dropShadow_7301_30525\" result=\"effect2_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"1.6\" dy=\"2.8\"/><feGaussianBlur stdDeviation=\"1\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.24 0\"/><feBlend in2=\"effect2_dropShadow_7301_30525\" result=\"effect3_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"2.8\" dy=\"4.8\"/><feGaussianBlur stdDeviation=\"1.2\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.07 0\"/><feBlend in2=\"effect3_dropShadow_7301_30525\" result=\"effect4_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"4.4\" dy=\"7.6\"/><feGaussianBlur stdDeviation=\"1.2\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.01 0\"/><feBlend in2=\"effect4_dropShadow_7301_30525\" result=\"effect5_dropShadow_7301_30525\"/><feBlend in=\"SourceGraphic\" in2=\"effect5_dropShadow_7301_30525\" result=\"shape\"/></filter></defs></svg>';\n"],"names":[],"mappings":";;;AAEO,MAAM,oBACX;;"}
|
|
@@ -30,14 +30,16 @@ const alignLeftClasses = {
|
|
|
30
30
|
lg: "[&>[role=tab]]:lg:flex-initial",
|
|
31
31
|
xl: "[&>[role=tab]]:xl:flex-initial"
|
|
32
32
|
};
|
|
33
|
-
function getLayoutClass(fullWidth, alignLeft) {
|
|
33
|
+
function getLayoutClass(variant, fullWidth, alignLeft) {
|
|
34
|
+
if (variant === "hug") return "inline-flex";
|
|
35
|
+
if (variant === "fill") return "flex w-full [&>[role=tab]]:flex-1";
|
|
34
36
|
if (!fullWidth) return "inline-flex";
|
|
35
37
|
const base = "flex w-full [&>[role=tab]]:flex-1";
|
|
36
38
|
if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;
|
|
37
39
|
if (typeof alignLeft === "string") return `${base} ${alignLeftClasses[alignLeft]}`;
|
|
38
40
|
return base;
|
|
39
41
|
}
|
|
40
|
-
const TabsList = React__namespace.forwardRef(({ className, children, fullWidth = true, alignLeft, ...props }, ref) => {
|
|
42
|
+
const TabsList = React__namespace.forwardRef(({ className, children, fullWidth = true, alignLeft, variant, ...props }, ref) => {
|
|
41
43
|
const innerRef = React__namespace.useRef(null);
|
|
42
44
|
const indicatorRef = React__namespace.useRef(null);
|
|
43
45
|
React__namespace.useImperativeHandle(ref, () => innerRef.current);
|
|
@@ -53,15 +55,21 @@ const TabsList = React__namespace.forwardRef(({ className, children, fullWidth =
|
|
|
53
55
|
const isVertical = list.dataset.orientation === "vertical";
|
|
54
56
|
indicator.style.opacity = "1";
|
|
55
57
|
if (isVertical) {
|
|
56
|
-
indicator.style.
|
|
57
|
-
indicator.style.
|
|
58
|
+
indicator.style.background = "linear-gradient(180deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)";
|
|
59
|
+
indicator.style.inset = `0 -1px auto auto`;
|
|
60
|
+
indicator.style.width = "1px";
|
|
58
61
|
indicator.style.height = `${activeTab.offsetHeight}px`;
|
|
59
62
|
indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;
|
|
60
63
|
} else {
|
|
61
|
-
indicator.style.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
indicator.style.background = "linear-gradient(90deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)";
|
|
65
|
+
const textSpan = activeTab.querySelector("span");
|
|
66
|
+
const textWidth = (textSpan ?? activeTab).getBoundingClientRect().width;
|
|
67
|
+
const tabCenter = activeTab.offsetLeft + activeTab.offsetWidth / 2;
|
|
68
|
+
const indicatorLeft = tabCenter - textWidth / 2;
|
|
69
|
+
indicator.style.inset = "auto auto 0 0";
|
|
70
|
+
indicator.style.height = "1px";
|
|
71
|
+
indicator.style.width = `${textWidth}px`;
|
|
72
|
+
indicator.style.transform = `translateX(${indicatorLeft}px)`;
|
|
65
73
|
}
|
|
66
74
|
}, []);
|
|
67
75
|
React__namespace.useLayoutEffect(() => {
|
|
@@ -99,9 +107,9 @@ const TabsList = React__namespace.forwardRef(({ className, children, fullWidth =
|
|
|
99
107
|
ref: innerRef,
|
|
100
108
|
className: cn.cn(
|
|
101
109
|
"relative",
|
|
102
|
-
getLayoutClass(fullWidth, alignLeft),
|
|
103
|
-
"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-
|
|
104
|
-
"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-
|
|
110
|
+
getLayoutClass(variant, fullWidth, alignLeft),
|
|
111
|
+
"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-border-primary)]",
|
|
112
|
+
"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-border-primary)]",
|
|
105
113
|
className
|
|
106
114
|
),
|
|
107
115
|
...props,
|
|
@@ -112,7 +120,7 @@ const TabsList = React__namespace.forwardRef(({ className, children, fullWidth =
|
|
|
112
120
|
{
|
|
113
121
|
ref: indicatorRef,
|
|
114
122
|
"aria-hidden": true,
|
|
115
|
-
className: "pointer-events-none absolute rounded-full
|
|
123
|
+
className: "pointer-events-none absolute z-10 rounded-full motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out",
|
|
116
124
|
style: { opacity: 0 }
|
|
117
125
|
}
|
|
118
126
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n always: \"[&>[role=tab]]:flex-initial\",\n sm: \"[&>[role=tab]]:sm:flex-initial\",\n md: \"[&>[role=tab]]:md:flex-initial\",\n lg: \"[&>[role=tab]]:lg:flex-initial\",\n xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(fullWidth: boolean
|
|
1
|
+
{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n always: \"[&>[role=tab]]:flex-initial\",\n sm: \"[&>[role=tab]]:sm:flex-initial\",\n md: \"[&>[role=tab]]:md:flex-initial\",\n lg: \"[&>[role=tab]]:lg:flex-initial\",\n xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(\n variant: \"fill\" | \"hug\" | undefined,\n fullWidth: boolean,\n alignLeft?: boolean | Breakpoint,\n): string {\n if (variant === \"hug\") return \"inline-flex\";\n if (variant === \"fill\") return \"flex w-full [&>[role=tab]]:flex-1\";\n\n if (!fullWidth) return \"inline-flex\";\n\n const base = \"flex w-full [&>[role=tab]]:flex-1\";\n if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;\n if (typeof alignLeft === \"string\") return `${base} ${alignLeftClasses[alignLeft]}`;\n return base;\n}\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n fullWidth?: boolean;\n /**\n * Controls tab alignment within a full-width container.\n * - `false` (default): tabs spread evenly\n * - `true`: tabs left-aligned, sized to content\n * - `\"md\"` (breakpoint): spread on mobile, left-aligned at breakpoint and up\n */\n alignLeft?: boolean | Breakpoint;\n /** Explicit layout variant. `\"hug\"` sizes the list to its content; `\"fill\"` stretches it full-width with equal-width tabs. Takes precedence over `fullWidth`/`alignLeft`. */\n variant?: \"fill\" | \"hug\";\n};\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, children, fullWidth = true, alignLeft, variant, ...props }, ref) => {\n const innerRef = React.useRef<HTMLDivElement>(null);\n const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n const updateIndicator = React.useCallback(() => {\n const list = innerRef.current;\n const indicator = indicatorRef.current;\n if (!list || !indicator) return;\n\n const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n if (!activeTab) {\n indicator.style.opacity = \"0\";\n return;\n }\n\n const isVertical = list.dataset.orientation === \"vertical\";\n\n indicator.style.opacity = \"1\";\n\n if (isVertical) {\n indicator.style.background =\n \"linear-gradient(180deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)\";\n indicator.style.inset = `0 -1px auto auto`;\n indicator.style.width = \"1px\";\n indicator.style.height = `${activeTab.offsetHeight}px`;\n indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n } else {\n indicator.style.background =\n \"linear-gradient(90deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)\";\n const textSpan = activeTab.querySelector(\"span\");\n const textWidth = (textSpan ?? activeTab).getBoundingClientRect().width;\n const tabCenter = activeTab.offsetLeft + activeTab.offsetWidth / 2;\n const indicatorLeft = tabCenter - textWidth / 2;\n indicator.style.inset = \"auto auto 0 0\";\n indicator.style.height = \"1px\";\n indicator.style.width = `${textWidth}px`;\n indicator.style.transform = `translateX(${indicatorLeft}px)`;\n }\n }, []);\n\n React.useLayoutEffect(() => {\n const list = innerRef.current;\n const indicator = indicatorRef.current;\n if (!list || !indicator) return;\n\n indicator.style.transitionDuration = \"0s\";\n updateIndicator();\n indicator.getBoundingClientRect();\n indicator.style.transitionDuration = \"\";\n\n const mutationObserver = new MutationObserver(updateIndicator);\n mutationObserver.observe(list, {\n attributes: true,\n attributeFilter: [\"data-state\"],\n childList: true,\n subtree: true,\n });\n\n const resizeObserver = new ResizeObserver(updateIndicator);\n resizeObserver.observe(list);\n\n let cancelled = false;\n if (document.fonts?.status !== \"loaded\") {\n document.fonts?.ready.then(() => {\n if (!cancelled) updateIndicator();\n });\n }\n\n return () => {\n cancelled = true;\n mutationObserver.disconnect();\n resizeObserver.disconnect();\n };\n }, [updateIndicator]);\n\n return (\n <TabsPrimitive.List\n ref={innerRef}\n className={cn(\n \"relative\",\n getLayoutClass(variant, fullWidth, alignLeft),\n \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-border-primary)]\",\n \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-border-primary)]\",\n className,\n )}\n {...props}\n >\n {children}\n <span\n ref={indicatorRef}\n aria-hidden\n className=\"pointer-events-none absolute z-10 rounded-full motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n style={{ opacity: 0 }}\n />\n </TabsPrimitive.List>\n );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsxs","TabsPrimitive","cn","jsx"],"mappings":"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"}
|
|
@@ -29,18 +29,19 @@ const TabsTrigger = React__namespace.forwardRef(({ className, children, ...props
|
|
|
29
29
|
ref,
|
|
30
30
|
className: cn.cn(
|
|
31
31
|
"inline-flex min-w-0 items-center justify-center",
|
|
32
|
-
"
|
|
33
|
-
"typography-body-default-16px-semibold cursor-pointer text-content-primary",
|
|
32
|
+
"typography-body-default-16px-semibold cursor-pointer",
|
|
34
33
|
"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
|
|
35
34
|
"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
|
|
36
35
|
"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
|
|
37
|
-
"data-[state=active]:
|
|
38
|
-
"data-[state=inactive]:
|
|
39
|
-
"data-[state=active]:
|
|
40
|
-
"data-[state=inactive]:
|
|
36
|
+
"data-[state=active]:text-content-primary",
|
|
37
|
+
"data-[state=inactive]:text-content-tertiary",
|
|
38
|
+
"data-[state=active]:hover:text-content-primary/70",
|
|
39
|
+
"data-[state=inactive]:hover:text-content-primary",
|
|
40
|
+
"data-[state=active]:active:text-content-primary/70",
|
|
41
|
+
"data-[state=inactive]:active:text-content-primary",
|
|
41
42
|
"data-disabled:pointer-events-none",
|
|
42
43
|
"data-disabled:data-[state=active]:text-content-tertiary",
|
|
43
|
-
"data-disabled:data-[state=inactive]:text-neutral-alphas-
|
|
44
|
+
"data-disabled:data-[state=inactive]:text-neutral-alphas-200",
|
|
44
45
|
"focus-visible:shadow-focus-ring focus-visible:outline-none",
|
|
45
46
|
className
|
|
46
47
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"inline-flex min-w-0 items-center justify-center\",\n \"
|
|
1
|
+
{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"inline-flex min-w-0 items-center justify-center\",\n \"typography-body-default-16px-semibold cursor-pointer\",\n \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n \"data-[state=active]:text-content-primary\",\n \"data-[state=inactive]:text-content-tertiary\",\n \"data-[state=active]:hover:text-content-primary/70\",\n \"data-[state=inactive]:hover:text-content-primary\",\n \"data-[state=active]:active:text-content-primary/70\",\n \"data-[state=inactive]:active:text-content-primary\",\n \"data-disabled:pointer-events-none\",\n \"data-disabled:data-[state=active]:text-content-tertiary\",\n \"data-disabled:data-[state=inactive]:text-neutral-alphas-200\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n className,\n )}\n {...props}\n >\n <span className=\"min-w-0 truncate\">{children}</span>\n </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}
|
|
@@ -45,13 +45,13 @@ const ChartCard = React.forwardRef(
|
|
|
45
45
|
/* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
|
|
46
46
|
] }) })
|
|
47
47
|
] }),
|
|
48
|
-
subtitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
48
|
+
subtitle && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
49
49
|
/* @__PURE__ */ jsx("span", { className: "typography-header-heading-sm text-content-primary", children: subtitle }),
|
|
50
50
|
trendChip && /* @__PURE__ */ jsx(
|
|
51
51
|
"span",
|
|
52
52
|
{
|
|
53
53
|
className: cn(
|
|
54
|
-
"typography-description-12px-semibold rounded-full px-2 py-0.5",
|
|
54
|
+
"typography-description-12px-semibold whitespace-nowrap rounded-full px-2 py-0.5",
|
|
55
55
|
TREND_CLASSES[trendChip.trend]
|
|
56
56
|
),
|
|
57
57
|
children: trendChip.label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartCard.mjs","sources":["../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. */\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Card title text. Pass translated string for i18n. */\n title: React.ReactNode;\n /** Large subtitle value (e.g. formatted price or count). */\n subtitle?: React.ReactNode;\n /** Tooltip text shown next to the title. Pass translated string for i18n. */\n tooltip?: React.ReactNode;\n /** Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" */\n tooltipAriaLabel?: string;\n /** Date range or period label shown below the subtitle. */\n dateInfo?: React.ReactNode;\n /** Trend indicator chip config. */\n trendChip?: {\n /** Display label (e.g. \"12.5%\"). */\n label: React.ReactNode;\n /** Whether the trend is positive (green) or negative (red). */\n trend: \"positive\" | \"negative\";\n };\n /** Show loading skeleton instead of content. @default false */\n loading?: boolean;\n /** Chart content rendered below the header. */\n children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" | \"negative\", string> = {\n positive: \"bg-success-surface text-success-content\",\n negative: \"bg-error-surface text-error-content\",\n};\n\n/**\n * Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n *\n * @example\n * ```tsx\n * <ChartCard\n * title=\"Revenue\"\n * subtitle=\"$4,523\"\n * trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n * dateInfo=\"Jan 1 – Mar 17\"\n * tooltip=\"Total revenue for the selected period.\"\n * >\n * <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n (\n {\n className,\n title,\n subtitle,\n tooltip,\n tooltipAriaLabel = \"More info\",\n dateInfo,\n trendChip,\n loading = false,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Card ref={ref} variant=\"outlined\" noPadding className={className} {...props}>\n <div className=\"flex flex-col gap-2 p-4\">\n {loading ? (\n <>\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n </>\n ) : (\n <>\n <div className=\"flex items-center gap-1.5\">\n <span className=\"typography-body-small-14px-semibold text-content-primary\">\n {title}\n </span>\n {tooltip && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n aria-label={tooltipAriaLabel}\n icon={<InfoCircleIcon className=\"size-4 text-content-tertiary\" />}\n />\n </TooltipTrigger>\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n {subtitle && (\n <div className=\"flex items-center gap-2\">\n <span className=\"typography-header-heading-sm text-content-primary\">\n {subtitle}\n </span>\n {trendChip && (\n <span\n className={cn(\n \"typography-description-12px-semibold rounded-full px-2 py-0.5\",\n TREND_CLASSES[trendChip.trend],\n )}\n >\n {trendChip.label}\n </span>\n )}\n </div>\n )}\n {dateInfo && (\n <span className=\"typography-description-12px-regular text-content-tertiary\">\n {dateInfo}\n </span>\n )}\n </>\n )}\n <div className=\"mt-auto\">{children}</div>\n </div>\n </Card>\n );\n },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":[],"mappings":";;;;;;;;;AAiCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAoBO,MAAM,YAAY,MAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE,oBAAC,MAAA,EAAK,KAAU,SAAQ,YAAW,WAAS,MAAC,WAAuB,GAAG,OACrE,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,4BACjE,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,4BACjE,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEA,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,4DACb,UAAA,OACH;AAAA,UACC,WACC,oBAAC,iBAAA,EACC,UAAA,qBAAC,SAAA,EACC,UAAA;AAAA,YAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,MAAM,oBAAC,gBAAA,EAAe,WAAU,+BAAA,CAA+B;AAAA,cAAA;AAAA,YAAA,GAEnE;AAAA,YACA,oBAAC,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACC,qBAAC,OAAA,EAAI,WAAU,
|
|
1
|
+
{"version":3,"file":"ChartCard.mjs","sources":["../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. */\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Card title text. Pass translated string for i18n. */\n title: React.ReactNode;\n /** Large subtitle value (e.g. formatted price or count). */\n subtitle?: React.ReactNode;\n /** Tooltip text shown next to the title. Pass translated string for i18n. */\n tooltip?: React.ReactNode;\n /** Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" */\n tooltipAriaLabel?: string;\n /** Date range or period label shown below the subtitle. */\n dateInfo?: React.ReactNode;\n /** Trend indicator chip config. Only rendered when {@link subtitle} is also provided. */\n trendChip?: {\n /** Display label (e.g. \"12.5%\"). */\n label: React.ReactNode;\n /** Whether the trend is positive (green) or negative (red). */\n trend: \"positive\" | \"negative\";\n };\n /** Show loading skeleton instead of content. @default false */\n loading?: boolean;\n /** Chart content rendered below the header. */\n children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" | \"negative\", string> = {\n positive: \"bg-success-surface text-success-content\",\n negative: \"bg-error-surface text-error-content\",\n};\n\n/**\n * Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n *\n * @example\n * ```tsx\n * <ChartCard\n * title=\"Revenue\"\n * subtitle=\"$4,523\"\n * trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n * dateInfo=\"Jan 1 – Mar 17\"\n * tooltip=\"Total revenue for the selected period.\"\n * >\n * <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n (\n {\n className,\n title,\n subtitle,\n tooltip,\n tooltipAriaLabel = \"More info\",\n dateInfo,\n trendChip,\n loading = false,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Card ref={ref} variant=\"outlined\" noPadding className={className} {...props}>\n <div className=\"flex flex-col gap-2 p-4\">\n {loading ? (\n <>\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n </>\n ) : (\n <>\n <div className=\"flex items-center gap-1.5\">\n <span className=\"typography-body-small-14px-semibold text-content-primary\">\n {title}\n </span>\n {tooltip && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n aria-label={tooltipAriaLabel}\n icon={<InfoCircleIcon className=\"size-4 text-content-tertiary\" />}\n />\n </TooltipTrigger>\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n {subtitle && (\n <div className=\"flex flex-wrap items-center gap-2\">\n <span className=\"typography-header-heading-sm text-content-primary\">\n {subtitle}\n </span>\n {trendChip && (\n <span\n className={cn(\n \"typography-description-12px-semibold whitespace-nowrap rounded-full px-2 py-0.5\",\n TREND_CLASSES[trendChip.trend],\n )}\n >\n {trendChip.label}\n </span>\n )}\n </div>\n )}\n {dateInfo && (\n <span className=\"typography-description-12px-regular text-content-tertiary\">\n {dateInfo}\n </span>\n )}\n </>\n )}\n <div className=\"mt-auto\">{children}</div>\n </div>\n </Card>\n );\n },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":[],"mappings":";;;;;;;;;AAiCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAoBO,MAAM,YAAY,MAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE,oBAAC,MAAA,EAAK,KAAU,SAAQ,YAAW,WAAS,MAAC,WAAuB,GAAG,OACrE,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,4BACjE,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,4BACjE,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEA,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,4DACb,UAAA,OACH;AAAA,UACC,WACC,oBAAC,iBAAA,EACC,UAAA,qBAAC,SAAA,EACC,UAAA;AAAA,YAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,MAAM,oBAAC,gBAAA,EAAe,WAAU,+BAAA,CAA+B;AAAA,cAAA;AAAA,YAAA,GAEnE;AAAA,YACA,oBAAC,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACC,qBAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,qDACb,UAAA,UACH;AAAA,UACC,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,cAAc,UAAU,KAAK;AAAA,cAAA;AAAA,cAG9B,UAAA,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,GAEJ;AAAA,QAED,YACC,oBAAC,QAAA,EAAK,WAAU,6DACb,UAAA,SAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEF,oBAAC,OAAA,EAAI,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,EAAA,CACrC,EAAA,CACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;"}
|