npm - @fanvue/ui - Versions diffs - 1.17.2 → 1.18.0 - Mend

@fanvue/ui 1.17.2 → 1.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/dist/cjs/components/ProgressBar/ProgressBar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). /\nexport type ProgressBarSize = \"default\" \| \"small\";\n/* Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. /\nexport type ProgressBarVariant = \"default\" \| \"generic\" \| \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Current progress value, clamped to 0–100. /\n value: number;\n /* Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" /\n size?: ProgressBarSize;\n /* Colour mode — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @default \"default\" /\n variant?: ProgressBarVariant;\n /* Title content shown at the top-left of the bar. /\n title?: React.ReactNode;\n /* Whether to display the completion percentage above the track. @default false /\n showCompletion?: boolean;\n /* Steps label shown at the top-right (e.g. `\"2/8 steps\"`). /\n stepsLabel?: React.ReactNode;\n /* Helper content at the bottom-left of the bar. /\n helperLeft?: React.ReactNode;\n /* Helper content at the bottom-right of the bar. /\n helperRight?: React.ReactNode;\n /* Icon shown at the bottom-left before the helper text. /\n leftIcon?: React.ReactNode;\n /* Accessible label for the `progressbar` role. @default \"Progress\" /\n ariaLabel?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n default: \"h-3\",\n small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n default: \"gap-3\",\n small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n if (value >= 100) return \"bg-success-default\";\n if (value >= 40) return \"bg-warning-default\";\n return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-default\";\n if (value >= 40) return \"text-warning-default\";\n return \"text-error-default\";\n}\n\nfunction resolveColors(\n variant: ProgressBarVariant,\n value: number,\n): { barColor: string; textColor: string } {\n if (variant === \"neutral\")\n return { barColor: \"bg-foreground-tertiary\", textColor: \"text-foreground-tertiary\" };\n if (variant === \"generic\")\n return { barColor: \"bg-brand-accent-default\", textColor: \"text-brand-accent-default\" };\n return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\n}\n\n/\n A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n \n @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n (\n {\n value,\n size = \"default\",\n variant = \"default\",\n title,\n showCompletion = false,\n stepsLabel,\n helperLeft,\n helperRight,\n leftIcon,\n ariaLabel,\n className,\n ...props\n },\n ref,\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const isSmall = size === \"small\";\n const { barColor, textColor } = resolveColors(variant, clampedValue);\n\n const showHeader = title != null \|\| showCompletion \|\| stepsLabel != null;\n const showFooter = leftIcon != null \|\| helperLeft != null \|\| helperRight != null;\n\n return (\n <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n {showHeader && (\n <div className=\"flex w-full items-end justify-between\">\n {title != null && (\n <p className=\"typography-semibold-body-sm text-foreground-default\">{title}</p>\n )}\n {showCompletion && (\n <span\n className={cn(\n textColor,\n isSmall ? \"typography-bold-heading-sm\" : \"typography-bold-heading-xl\",\n )}\n >\n {Math.round(clampedValue)}%\n </span>\n )}\n {stepsLabel != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\n {stepsLabel}\n </span>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel ?? \"Progress\"}\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n className={cn(\"relative w-full rounded-full bg-neutral-100\", TRACK_HEIGHT[size])}\n >\n <div\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n barColor,\n )}\n style={{ width: `${clampedValue}%` }}\n />\n </div>\n\n {showFooter && (\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"flex items-center gap-1\">\n {leftIcon != null && (\n <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n {helperLeft != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\n {helperLeft}\n </span>\n )}\n </div>\n {helperRight != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\n {helperRight}\n </span>\n )}\n </div>\n )}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;~~AA+BA~~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"}
1	+ {"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). /\nexport type ProgressBarSize = \"default\" \| \"small\";\n/* Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. /\nexport type ProgressBarVariant = \"default\" \| \"generic\" \| \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Current progress value, clamped to 0–100. /\n value: number;\n /* Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" /\n size?: ProgressBarSize;\n /* Colour mode — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @default \"default\" /\n variant?: ProgressBarVariant;\n /* Title content shown at the top-left of the bar. /\n title?: React.ReactNode;\n /* Whether to display the completion percentage above the track. @default false /\n showCompletion?: boolean;\n /* Steps label shown at the top-right (e.g. `\"2/8 steps\"`). /\n stepsLabel?: React.ReactNode;\n /* Helper content at the bottom-left of the bar. /\n helperLeft?: React.ReactNode;\n /* Helper content at the bottom-right of the bar. /\n helperRight?: React.ReactNode;\n /* Icon shown at the bottom-left before the helper text. /\n leftIcon?: React.ReactNode;\n /* Accessible label for the `progressbar` role. @default \"Progress\" /\n ariaLabel?: string;\n /* Human-readable text alternative for the current value (e.g. \"Step 3 of 5\"). /\n ariaValueText?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n default: \"h-3\",\n small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n default: \"gap-3\",\n small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n if (value >= 100) return \"bg-success-default\";\n if (value >= 40) return \"bg-warning-default\";\n return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-default\";\n if (value >= 40) return \"text-warning-default\";\n return \"text-error-default\";\n}\n\nfunction resolveColors(\n variant: ProgressBarVariant,\n value: number,\n): { barColor: string; textColor: string } {\n if (variant === \"neutral\")\n return { barColor: \"bg-foreground-tertiary\", textColor: \"text-foreground-tertiary\" };\n if (variant === \"generic\")\n return { barColor: \"bg-brand-accent-default\", textColor: \"text-brand-accent-default\" };\n return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\n}\n\n/\n A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n \n @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n (\n {\n value,\n size = \"default\",\n variant = \"default\",\n title,\n showCompletion = false,\n stepsLabel,\n helperLeft,\n helperRight,\n leftIcon,\n ariaLabel,\n ariaValueText,\n className,\n ...props\n },\n ref,\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const isSmall = size === \"small\";\n const { barColor, textColor } = resolveColors(variant, clampedValue);\n\n const showHeader = title != null \|\| showCompletion \|\| stepsLabel != null;\n const showFooter = leftIcon != null \|\| helperLeft != null \|\| helperRight != null;\n\n return (\n <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n {showHeader && (\n <div className=\"flex w-full items-end justify-between\">\n {title != null && (\n <p className=\"typography-semibold-body-sm text-foreground-default\">{title}</p>\n )}\n {showCompletion && (\n <span\n className={cn(\n textColor,\n isSmall ? \"typography-bold-heading-sm\" : \"typography-bold-heading-xl\",\n )}\n >\n {Math.round(clampedValue)}%\n </span>\n )}\n {stepsLabel != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\n {stepsLabel}\n </span>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel ?? \"Progress\"}\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={ariaValueText}\n className={cn(\"relative w-full rounded-full bg-neutral-100\", TRACK_HEIGHT[size])}\n >\n <div\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n barColor,\n )}\n style={{ width: `${clampedValue}%` }}\n />\n </div>\n\n {showFooter && (\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"flex items-center gap-1\">\n {leftIcon != null && (\n <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n {helperLeft != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\n {helperLeft}\n </span>\n )}\n </div>\n {helperRight != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\n {helperRight}\n </span>\n )}\n </div>\n )}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,eAAgD;AAAA,EACpD,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,MAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAuB;AACjD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,oBAAoB,OAAuB;AAClD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,cACP,SACA,OACyC;AACzC,MAAI,YAAY;AACd,WAAO,EAAE,UAAU,0BAA0B,WAAW,2BAAA;AAC1D,MAAI,YAAY;AACd,WAAO,EAAE,UAAU,2BAA2B,WAAW,4BAAA;AAC3D,SAAO,EAAE,UAAU,mBAAmB,KAAK,GAAG,WAAW,oBAAoB,KAAK,EAAA;AACpF;AAYO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,UAAU,SAAS;AACzB,UAAM,EAAE,UAAU,UAAA,IAAc,cAAc,SAAS,YAAY;AAEnE,UAAM,aAAa,SAAS,QAAQ,kBAAkB,cAAc;AACpE,UAAM,aAAa,YAAY,QAAQ,cAAc,QAAQ,eAAe;AAE5E,WACEC,2BAAAA,KAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,wBAAwB,IAAI,IAAI,GAAG,SAAS,GAAI,GAAG,OAC7E,UAAA;AAAA,MAAA,cACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,QAAA,SAAS,QACRE,2BAAAA,IAAC,KAAA,EAAE,WAAU,uDAAuD,UAAA,OAAM;AAAA,QAE3E,kBACCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,GAAAA;AAAAA,cACT;AAAA,cACA,UAAU,+BAA+B;AAAA,YAAA;AAAA,YAG1C,UAAA;AAAA,cAAA,KAAK,MAAM,YAAY;AAAA,cAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG7B,cAAc,QACbC,2BAAAA,IAAC,QAAA,EAAK,WAAU,sDACb,UAAA,WAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAGFA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,aAAa;AAAA,UACzB,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,kBAAgB;AAAA,UAChB,WAAWD,GAAAA,GAAG,+CAA+C,aAAa,IAAI,CAAC;AAAA,UAE/E,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,YAAI;AAAA,UAAA;AAAA,QACrC;AAAA,MAAA;AAAA,MAGD,cACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,UAAA,YAAY,QACXE,+BAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QACnE,UAAA,SAAA,CACH;AAAA,UAED,cAAc,QACbA,2BAAAA,IAAC,QAAA,EAAK,WAAU,sDACb,UAAA,WAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,eAAe,QACdA,2BAAAA,IAAC,QAAA,EAAK,WAAU,sDACb,UAAA,YAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/index.cjs CHANGED Viewed

@@ -1,18 +1,27 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Accordion = require("./components/Accordion/Accordion.cjs");
+const AccordionContent = require("./components/Accordion/AccordionContent.cjs");
+const AccordionItem = require("./components/Accordion/AccordionItem.cjs");
+const AccordionTrigger = require("./components/Accordion/AccordionTrigger.cjs");
 const Alert = require("./components/Alert/Alert.cjs");
 const AudioUpload = require("./components/AudioUpload/AudioUpload.cjs");
 const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs");
+const Autocomplete = require("./components/Autocomplete/Autocomplete.cjs");
 const Avatar = require("./components/Avatar/Avatar.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
+const BottomNavigation = require("./components/BottomNavigation/BottomNavigation.cjs");
+const BottomNavigationAction = require("./components/BottomNavigation/BottomNavigationAction.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
 const Card = require("./components/Card/Card.cjs");
 const Checkbox = require("./components/Checkbox/Checkbox.cjs");
 const Chip = require("./components/Chip/Chip.cjs");
 const Count = require("./components/Count/Count.cjs");
+const Dialog = require("./components/Dialog/Dialog.cjs");
 const Divider = require("./components/Divider/Divider.cjs");
+const Drawer = require("./components/Drawer/Drawer.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const AddIcon = require("./components/Icons/AddIcon.cjs");
 const AIIcon = require("./components/Icons/AIIcon.cjs");
@@ -134,6 +143,7 @@ const WifiOnIcon = require("./components/Icons/WifiOnIcon.cjs");
 const WrenchIcon = require("./components/Icons/WrenchIcon.cjs");
 const Loader = require("./components/Loader/Loader.cjs");
 const Logo = require("./components/Logo/Logo.cjs");
+const MobileStepper = require("./components/MobileStepper/MobileStepper.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
 const PasswordField = require("./components/PasswordField/PasswordField.cjs");
 const Pill = require("./components/Pill/Pill.cjs");
@@ -157,14 +167,21 @@ const TextField = require("./components/TextField/TextField.cjs");
 const Toast = require("./components/Toast/Toast.cjs");
 const Tooltip = require("./components/Tooltip/Tooltip.cjs");
 const cn = require("./utils/cn.cjs");
+exports.Accordion = Accordion.Accordion;
+exports.AccordionContent = AccordionContent.AccordionContent;
+exports.AccordionItem = AccordionItem.AccordionItem;
+exports.AccordionTrigger = AccordionTrigger.AccordionTrigger;
 exports.Alert = Alert.Alert;
 exports.AudioUpload = AudioUpload.AudioUpload;
 exports.useAudioRecorder = useAudioRecorder.useAudioRecorder;
+exports.Autocomplete = Autocomplete.Autocomplete;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
 exports.AvatarRoot = Avatar.AvatarRoot;
 exports.Badge = Badge.Badge;
+exports.BottomNavigation = BottomNavigation.BottomNavigation;
+exports.BottomNavigationAction = BottomNavigationAction.BottomNavigationAction;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.BreadcrumbItem = Breadcrumb.BreadcrumbItem;
 exports.BreadcrumbLink = Breadcrumb.BreadcrumbLink;
@@ -181,7 +198,26 @@ exports.CardTitle = Card.CardTitle;
 exports.Checkbox = Checkbox.Checkbox;
 exports.Chip = Chip.Chip;
 exports.Count = Count.Count;
+exports.Dialog = Dialog.Dialog;
+exports.DialogBody = Dialog.DialogBody;
+exports.DialogClose = Dialog.DialogClose;
+exports.DialogContent = Dialog.DialogContent;
+exports.DialogDescription = Dialog.DialogDescription;
+exports.DialogFooter = Dialog.DialogFooter;
+exports.DialogHeader = Dialog.DialogHeader;
+exports.DialogOverlay = Dialog.DialogOverlay;
+exports.DialogTitle = Dialog.DialogTitle;
+exports.DialogTrigger = Dialog.DialogTrigger;
 exports.Divider = Divider.Divider;
+exports.Drawer = Drawer.Drawer;
+exports.DrawerClose = Drawer.DrawerClose;
+exports.DrawerContent = Drawer.DrawerContent;
+exports.DrawerDescription = Drawer.DrawerDescription;
+exports.DrawerFooter = Drawer.DrawerFooter;
+exports.DrawerHeader = Drawer.DrawerHeader;
+exports.DrawerOverlay = Drawer.DrawerOverlay;
+exports.DrawerTitle = Drawer.DrawerTitle;
+exports.DrawerTrigger = Drawer.DrawerTrigger;
 exports.IconButton = IconButton.IconButton;
 exports.AddIcon = AddIcon.AddIcon;
 exports.AIIcon = AIIcon.AIIcon;
@@ -303,6 +339,7 @@ exports.WifiOnIcon = WifiOnIcon.WifiOnIcon;
 exports.WrenchIcon = WrenchIcon.WrenchIcon;
 exports.Loader = Loader.Loader;
 exports.Logo = Logo.Logo;
+exports.MobileStepper = MobileStepper.MobileStepper;
 exports.Pagination = Pagination.Pagination;
 exports.PasswordField = PasswordField.PasswordField;
 exports.Pill = Pill.Pill;

package/dist/cjs/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Accordion/Accordion.mjs ADDED Viewed

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Accordion = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ref, className: cn("space-y-2", className), ...props }));
+Accordion.displayName = "Accordion";
+export {
+  Accordion
+};
+//# sourceMappingURL=Accordion.mjs.map

package/dist/components/Accordion/Accordion.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Accordion.mjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link Accordion} root component. Extends Radix `Accordion.Root` props. */\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;\n\n/**\n * Root container for an accordion interface. Manages the expand/collapse state\n * and coordinates {@link AccordionItem}, {@link AccordionTrigger}, and {@link AccordionContent}.\n *\n * Built on Radix UI `Accordion`.\n *\n * @example\n * ```tsx\n * <Accordion type=\"single\" collapsible>\n * <AccordionItem value=\"item-1\">\n * <AccordionTrigger>Section 1</AccordionTrigger>\n * <AccordionContent>Content 1</AccordionContent>\n * </AccordionItem>\n * <AccordionItem value=\"item-2\">\n * <AccordionTrigger>Section 2</AccordionTrigger>\n * <AccordionContent>Content 2</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport const Accordion = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Root>,\n AccordionProps\n>(({ className, ...props }, ref) => (\n <AccordionPrimitive.Root ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n));\n\nAccordion.displayName = \"Accordion\";\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,YAAY,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B,oBAAC,mBAAmB,MAAnB,EAAwB,KAAU,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO,CACtF;AAED,UAAU,cAAc;"}

package/dist/components/Accordion/AccordionContent.mjs ADDED Viewed

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const AccordionContent = React.forwardRef(({ className, children, noPadding, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden",
+      "typography-regular-body-md text-foreground-secondary",
+      "motion-safe:data-[state=closed]:animate-accordion-collapse",
+      "motion-safe:data-[state=open]:animate-accordion-expand",
+      !noPadding && "px-3 pb-3",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-wrap-anywhere", children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+export {
+  AccordionContent
+};
+//# sourceMappingURL=AccordionContent.mjs.map

package/dist/components/Accordion/AccordionContent.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AccordionContent.mjs","sources":["../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n typeof AccordionPrimitive.Content\n> & {\n /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Content>,\n AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className={cn(\n \"overflow-hidden\",\n \"typography-regular-body-md text-foreground-secondary\",\n \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n \"motion-safe:data-[state=open]:animate-accordion-expand\",\n !noPadding && \"px-3 pb-3\",\n className,\n )}\n {...props}\n >\n <div className=\"min-w-0 overflow-wrap-anywhere\">{children}</div>\n </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = \"AccordionContent\";\n"],"names":[],"mappings":";;;;;AAaO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,QAC/C;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,CAAC,aAAa;AAAA,MACd;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,OAAA,EAAI,WAAU,kCAAkC,SAAA,CAAS;AAAA,EAAA;AAC5D,CACD;AAED,iBAAiB,cAAc;"}

package/dist/components/Accordion/AccordionItem.mjs ADDED Viewed

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden rounded-xl bg-surface-container",
+      "border border-neutral-200",
+      className
+    ),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+export {
+  AccordionItem
+};
+//# sourceMappingURL=AccordionItem.mjs.map

package/dist/components/Accordion/AccordionItem.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AccordionItem.mjs","sources":["../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionItem} component. */\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;\n\n/** A single collapsible section within an {@link Accordion}. Contains an {@link AccordionTrigger} and {@link AccordionContent}. */\nexport const AccordionItem = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Item>,\n AccordionItemProps\n>(({ className, ...props }, ref) => (\n <AccordionPrimitive.Item\n ref={ref}\n className={cn(\n \"overflow-hidden rounded-xl bg-surface-container\",\n \"border border-neutral-200\",\n className,\n )}\n {...props}\n />\n));\n\nAccordionItem.displayName = \"AccordionItem\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;"}

package/dist/components/Accordion/AccordionTrigger.mjs ADDED Viewed

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
+const AccordionTrigger = React.forwardRef(({ className, children, icon, ...props }, ref) => {
+  const showIcon = icon !== null;
+  const iconElement = icon === void 0 ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 text-foreground-secondary" }) : icon;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex flex-1 items-center justify-between gap-3",
+        "rounded-xl px-3 py-3",
+        "typography-semibold-body-md text-foreground-default",
+        "cursor-pointer",
+        "motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out",
+        "hover:bg-neutral-100",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
+        showIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180", children: iconElement })
+      ]
+    }
+  ) });
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+export {
+  AccordionTrigger
+};
+//# sourceMappingURL=AccordionTrigger.mjs.map

package/dist/components/Accordion/AccordionTrigger.mjs.map ADDED Viewed

@@ -0,0 +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 /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n icon?: React.ReactNode | null;\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, ...props }, ref) => {\n const showIcon = icon !== null;\n const iconElement =\n icon === undefined ? (\n <ChevronDownIcon className=\"size-4 shrink-0 text-foreground-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-xl px-3 py-3\",\n \"typography-semibold-body-md text-foreground-default\",\n \"cursor-pointer\",\n \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n \"hover:bg-neutral-100\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <span className=\"min-w-0 flex-1 truncate text-left\">{children}</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":";;;;;;AAcO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,6BACN,iBAAA,EAAgB,WAAU,6CAA4C,IAEvE;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,oBAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACC,oBAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;"}

package/dist/components/Autocomplete/Autocomplete.mjs ADDED Viewed

@@ -0,0 +1,221 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
+import { CloseIcon } from "../Icons/CloseIcon.mjs";
+import { SpinnerIcon } from "../Icons/SpinnerIcon.mjs";
+import { AutocompleteDropdownContent } from "./AutocompleteDropdownContent.mjs";
+import { AutocompleteTag } from "./AutocompleteTag.mjs";
+import { useAutocomplete } from "./useAutocomplete.mjs";
+const CONTAINER_HEIGHT = {
+  "48": "min-h-12",
+  "40": "min-h-10",
+  "32": "min-h-8"
+};
+const INPUT_SIZE_CLASSES = {
+  "48": "typography-regular-body-lg",
+  "40": "typography-regular-body-lg",
+  "32": "typography-regular-body-md"
+};
+const PADDING_CLASSES = {
+  "48": "px-4 py-1.5 gap-3",
+  "40": "px-4 py-1 gap-3",
+  "32": "px-3 py-1 gap-2"
+};
+function warnMissingAccessibleName(label, ariaLabel, ariaLabelledBy) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!label && !ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        "Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop."
+      );
+    }
+  }
+}
+const Autocomplete = React.forwardRef((props, ref) => {
+  const {
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    helperText,
+    size = "48",
+    error = false,
+    errorMessage,
+    placeholder,
+    leftIcon,
+    fullWidth = false,
+    disabled = false,
+    clearable = false,
+    clearAriaLabel = "Clear",
+    className,
+    loading = false,
+    loadingText,
+    emptyText = "No results",
+    renderOption,
+    renderTag
+  } = props;
+  const ac = useAutocomplete(props);
+  React.useImperativeHandle(ref, () => ac.inputRef.current);
+  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);
+  const bottomText = error && errorMessage ? errorMessage : helperText;
+  return /* @__PURE__ */ jsx(Popover.Root, { open: ac.isOpen && !disabled, onOpenChange: ac.handleOpenChange, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", fullWidth && "w-full", className),
+      "data-autocomplete-root": "",
+      "data-disabled": disabled ? "" : void 0,
+      "data-error": error ? "" : void 0,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: ac.inputId,
+            className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-wrap items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors",
+              error ? "border-error-default" : "border-transparent",
+              !disabled && !error && "hover:border-neutral-400",
+              ac.isOpen && !error && !disabled && "border-neutral-400",
+              CONTAINER_HEIGHT[size],
+              PADDING_CLASSES[size],
+              disabled && "opacity-50"
+            ),
+            onClick: ac.handleContainerClick,
+            children: [
+              leftIcon && /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary", children: leftIcon }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [
+                ac.isMulti && ac.selectedMultiOptions.map((opt) => /* @__PURE__ */ jsx(
+                  AutocompleteTag,
+                  {
+                    option: opt,
+                    disabled,
+                    onRemove: () => ac.toggleMulti(opt.value),
+                    renderTag
+                  },
+                  opt.value
+                )),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: ac.inputRef,
+                    id: ac.inputId,
+                    role: "combobox",
+                    type: "text",
+                    disabled,
+                    "aria-expanded": ac.isOpen,
+                    "aria-controls": ac.isOpen ? ac.listboxId : void 0,
+                    "aria-activedescendant": ac.activeDescendantId,
+                    "aria-autocomplete": "list",
+                    "aria-describedby": bottomText ? ac.helperTextId : void 0,
+                    "aria-invalid": error || void 0,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledby,
+                    autoComplete: "off",
+                    placeholder: ac.isMulti && ac.selectedMultiValues.length > 0 ? void 0 : placeholder,
+                    value: ac.displayInputValue,
+                    onChange: ac.handleInputChange,
+                    onKeyDown: ac.handleKeyDown,
+                    onFocus: ac.handleFocus,
+                    onBlur: ac.handleBlur,
+                    className: cn(
+                      "min-w-[40px] flex-1 truncate rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+                      INPUT_SIZE_CLASSES[size]
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                loading && /* @__PURE__ */ jsx(SpinnerIcon, { className: "size-4 animate-spin text-foreground-secondary" }),
+                clearable && ac.hasClearableValue && !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    "aria-label": clearAriaLabel,
+                    className: "flex size-5 shrink-0 cursor-pointer items-center justify-center text-foreground-secondary hover:text-foreground-default active:scale-95",
+                    onClick: ac.handleClear,
+                    children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary", children: /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn("size-5 transition-transform", ac.isOpen && "rotate-180")
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            sideOffset: 4,
+            collisionPadding: 8,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)" },
+            className: cn(
+              "w-(--radix-popover-trigger-width) min-w-(--radix-popper-anchor-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
+              "data-[state=closed]:animate-out data-[state=open]:animate-in",
+              "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: ac.listRef,
+                id: ac.listboxId,
+                role: "listbox",
+                "aria-label": label ?? ariaLabel ?? "Options",
+                "aria-multiselectable": ac.isMulti || void 0,
+                className: "max-h-60 overflow-y-auto p-1",
+                children: /* @__PURE__ */ jsx(
+                  AutocompleteDropdownContent,
+                  {
+                    loading,
+                    loadingText,
+                    emptyText,
+                    visibleOptions: ac.visibleOptions,
+                    listboxId: ac.listboxId,
+                    activeIndex: ac.activeIndex,
+                    isMulti: ac.isMulti,
+                    selectedMultiValues: ac.selectedMultiValues,
+                    selectedValue: ac.selectedValue,
+                    onSelect: ac.handleSelect,
+                    onMouseEnter: ac.setActiveIndex,
+                    renderOption
+                  }
+                )
+              }
+            )
+          }
+        ) }),
+        bottomText && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: ac.helperTextId,
+            className: cn(
+              "typography-regular-body-sm px-2 pt-1 pb-0.5",
+              error ? "text-error-default" : "text-foreground-secondary"
+            ),
+            children: bottomText
+          }
+        )
+      ]
+    }
+  ) });
+});
+Autocomplete.displayName = "Autocomplete";
+export {
+  Autocomplete
+};
+//# sourceMappingURL=Autocomplete.mjs.map

package/dist/components/Autocomplete/Autocomplete.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Autocomplete.mjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n value: string;\n label?: string;\n disabled?: boolean;\n}\n\ninterface AutocompleteBaseProps {\n label?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n helperText?: string;\n /** @default \"48\" */\n size?: AutocompleteSize;\n /** @default false */\n error?: boolean;\n errorMessage?: string;\n placeholder?: string;\n leftIcon?: React.ReactNode;\n /** @default false */\n fullWidth?: boolean;\n /** @default false */\n disabled?: boolean;\n /** @default false */\n clearable?: boolean;\n clearAriaLabel?: string;\n id?: string;\n className?: string;\n options: AutocompleteOption[];\n inputValue?: string;\n onInputChange?: (value: string) => void;\n filterFn?: (option: AutocompleteOption, query: string) => boolean;\n /** @default false */\n creatable?: boolean;\n creatableLabel?: (inputValue: string) => string;\n onCreate?: (inputValue: string) => void;\n /** @default false */\n loading?: boolean;\n loadingText?: string;\n emptyText?: string;\n renderOption?: (\n option: AutocompleteOption,\n state: { selected: boolean; active: boolean },\n ) => React.ReactNode;\n renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n multiple?: false;\n value?: string | null;\n defaultValue?: string | null;\n onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n multiple: true;\n value?: string[];\n defaultValue?: string[];\n onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n \"48\": \"min-h-12\",\n \"40\": \"min-h-10\",\n \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n \"48\": \"typography-regular-body-lg\",\n \"40\": \"typography-regular-body-lg\",\n \"32\": \"typography-regular-body-md\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n \"48\": \"px-4 py-1.5 gap-3\",\n \"40\": \"px-4 py-1 gap-3\",\n \"32\": \"px-3 py-1 gap-2\",\n};\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n const {\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n placeholder,\n leftIcon,\n fullWidth = false,\n disabled = false,\n clearable = false,\n clearAriaLabel = \"Clear\",\n className,\n loading = false,\n loadingText,\n emptyText = \"No results\",\n renderOption,\n renderTag,\n } = props;\n\n const ac = useAutocomplete(props);\n\n React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n const bottomText = error && errorMessage ? errorMessage : helperText;\n\n return (\n <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-autocomplete-root=\"\"\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={ac.inputId}\n className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n >\n {label}\n </label>\n )}\n\n <Popover.Anchor asChild>\n {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n <div\n className={cn(\n \"flex flex-wrap items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-default\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-400\",\n ac.isOpen && !error && !disabled && \"border-neutral-400\",\n CONTAINER_HEIGHT[size],\n PADDING_CLASSES[size],\n disabled && \"opacity-50\",\n )}\n onClick={ac.handleContainerClick}\n >\n {leftIcon && (\n <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n {leftIcon}\n </div>\n )}\n\n <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n {ac.isMulti &&\n ac.selectedMultiOptions.map((opt) => (\n <AutocompleteTag\n key={opt.value}\n option={opt}\n disabled={disabled}\n onRemove={() => ac.toggleMulti(opt.value)}\n renderTag={renderTag}\n />\n ))}\n\n <input\n ref={ac.inputRef}\n id={ac.inputId}\n role=\"combobox\"\n type=\"text\"\n disabled={disabled}\n aria-expanded={ac.isOpen}\n aria-controls={ac.isOpen ? ac.listboxId : undefined}\n aria-activedescendant={ac.activeDescendantId}\n aria-autocomplete=\"list\"\n aria-describedby={bottomText ? ac.helperTextId : undefined}\n aria-invalid={error || undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n autoComplete=\"off\"\n placeholder={\n ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n }\n value={ac.displayInputValue}\n onChange={ac.handleInputChange}\n onKeyDown={ac.handleKeyDown}\n onFocus={ac.handleFocus}\n onBlur={ac.handleBlur}\n className={cn(\n \"min-w-[40px] flex-1 truncate rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n INPUT_SIZE_CLASSES[size],\n )}\n />\n </div>\n\n <div className=\"flex shrink-0 items-center gap-1\">\n {loading && <SpinnerIcon className=\"size-4 animate-spin text-foreground-secondary\" />}\n {clearable && ac.hasClearableValue && !disabled && (\n <button\n type=\"button\"\n tabIndex={-1}\n aria-label={clearAriaLabel}\n className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-foreground-secondary hover:text-foreground-default active:scale-95\"\n onClick={ac.handleClear}\n >\n <CloseIcon className=\"size-4\" />\n </button>\n )}\n <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n <ChevronDownIcon\n className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n />\n </div>\n </div>\n </div>\n </Popover.Anchor>\n\n <Popover.Portal>\n <Popover.Content\n sideOffset={4}\n collisionPadding={8}\n onOpenAutoFocus={(e) => e.preventDefault()}\n onCloseAutoFocus={(e) => e.preventDefault()}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n className={cn(\n \"w-(--radix-popover-trigger-width) min-w-(--radix-popper-anchor-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n )}\n >\n <div\n ref={ac.listRef}\n id={ac.listboxId}\n role=\"listbox\"\n aria-label={label ?? ariaLabel ?? \"Options\"}\n aria-multiselectable={ac.isMulti || undefined}\n className=\"max-h-60 overflow-y-auto p-1\"\n >\n <AutocompleteDropdownContent\n loading={loading}\n loadingText={loadingText}\n emptyText={emptyText}\n visibleOptions={ac.visibleOptions}\n listboxId={ac.listboxId}\n activeIndex={ac.activeIndex}\n isMulti={ac.isMulti}\n selectedMultiValues={ac.selectedMultiValues}\n selectedValue={ac.selectedValue}\n onSelect={ac.handleSelect}\n onMouseEnter={ac.setActiveIndex}\n renderOption={renderOption}\n />\n </div>\n </Popover.Content>\n </Popover.Portal>\n\n {bottomText && (\n <p\n id={ac.helperTextId}\n className={cn(\n \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n error ? \"text-error-default\" : \"text-foreground-secondary\",\n )}\n >\n {bottomText}\n </p>\n )}\n </div>\n </Popover.Root>\n );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":[],"mappings":"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"}

package/dist/components/Autocomplete/AutocompleteDropdownContent.mjs ADDED Viewed

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { SpinnerIcon } from "../Icons/SpinnerIcon.mjs";
+import { AutocompleteOptionItem } from "./AutocompleteOptionItem.mjs";
+function AutocompleteDropdownContent({
+  loading,
+  loadingText,
+  emptyText,
+  visibleOptions,
+  listboxId,
+  activeIndex,
+  isMulti,
+  selectedMultiValues,
+  selectedValue,
+  onSelect,
+  onMouseEnter,
+  renderOption
+}) {
+  if (loading) {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate here; using role="status" for live region announcements
+      /* @__PURE__ */ jsxs("div", { role: "status", className: "flex items-center justify-center py-4", children: [
+        /* @__PURE__ */ jsx(SpinnerIcon, { className: "size-5 animate-spin text-foreground-secondary" }),
+        loadingText && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-md ml-2 text-foreground-secondary", children: loadingText })
+      ] })
+    );
+  }
+  if (visibleOptions.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "typography-regular-body-md block px-3 py-4 text-center text-foreground-secondary", children: emptyText });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: visibleOptions.map((option, index) => {
+    const isSelected = isMulti ? selectedMultiValues.includes(option.value) : option.value === selectedValue;
+    return /* @__PURE__ */ jsx(
+      AutocompleteOptionItem,
+      {
+        option,
+        optionId: `${listboxId}-option-${index}`,
+        index,
+        isSelected,
+        isActive: index === activeIndex,
+        onSelect: () => onSelect(option),
+        onMouseEnter: () => onMouseEnter(index),
+        renderOption
+      },
+      option.value
+    );
+  }) });
+}
+export {
+  AutocompleteDropdownContent
+};
+//# sourceMappingURL=AutocompleteDropdownContent.mjs.map

package/dist/components/Autocomplete/AutocompleteDropdownContent.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AutocompleteDropdownContent.mjs","sources":["../../../src/components/Autocomplete/AutocompleteDropdownContent.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { AutocompleteOptionItem } from \"./AutocompleteOptionItem\";\n\nexport function AutocompleteDropdownContent({\n loading,\n loadingText,\n emptyText,\n visibleOptions,\n listboxId,\n activeIndex,\n isMulti,\n selectedMultiValues,\n selectedValue,\n onSelect,\n onMouseEnter,\n renderOption,\n}: {\n loading: boolean;\n loadingText?: string;\n emptyText?: string;\n visibleOptions: AutocompleteOption[];\n listboxId: string;\n activeIndex: number;\n isMulti: boolean;\n selectedMultiValues: string[];\n selectedValue: string | null;\n onSelect: (option: AutocompleteOption) => void;\n onMouseEnter: (index: number) => void;\n renderOption?: (\n option: AutocompleteOption,\n state: { selected: boolean; active: boolean },\n ) => React.ReactNode;\n}) {\n if (loading) {\n return (\n // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate here; using role=\"status\" for live region announcements\n <div role=\"status\" className=\"flex items-center justify-center py-4\">\n <SpinnerIcon className=\"size-5 animate-spin text-foreground-secondary\" />\n {loadingText && (\n <span className=\"typography-regular-body-md ml-2 text-foreground-secondary\">\n {loadingText}\n </span>\n )}\n </div>\n );\n }\n\n if (visibleOptions.length === 0) {\n return (\n <div className=\"typography-regular-body-md block px-3 py-4 text-center text-foreground-secondary\">\n {emptyText}\n </div>\n );\n }\n\n return (\n <>\n {visibleOptions.map((option, index) => {\n const isSelected = isMulti\n ? selectedMultiValues.includes(option.value)\n : option.value === selectedValue;\n\n return (\n <AutocompleteOptionItem\n key={option.value}\n option={option}\n optionId={`${listboxId}-option-${index}`}\n index={index}\n isSelected={isSelected}\n isActive={index === activeIndex}\n onSelect={() => onSelect(option)}\n onMouseEnter={() => onMouseEnter(index)}\n renderOption={renderOption}\n />\n );\n })}\n </>\n );\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAgBG;AACD,MAAI,SAAS;AACX;AAAA;AAAA,MAEE,qBAAC,OAAA,EAAI,MAAK,UAAS,WAAU,yCAC3B,UAAA;AAAA,QAAA,oBAAC,aAAA,EAAY,WAAU,gDAAA,CAAgD;AAAA,QACtE,eACC,oBAAC,QAAA,EAAK,WAAU,6DACb,UAAA,YAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA;AAAA,EAEJ;AAEA,MAAI,eAAe,WAAW,GAAG;AAC/B,WACE,oBAAC,OAAA,EAAI,WAAU,oFACZ,UAAA,WACH;AAAA,EAEJ;AAEA,SACE,oBAAA,UAAA,EACG,UAAA,eAAe,IAAI,CAAC,QAAQ,UAAU;AACrC,UAAM,aAAa,UACf,oBAAoB,SAAS,OAAO,KAAK,IACzC,OAAO,UAAU;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,UAAU,GAAG,SAAS,WAAW,KAAK;AAAA,QACtC;AAAA,QACA;AAAA,QACA,UAAU,UAAU;AAAA,QACpB,UAAU,MAAM,SAAS,MAAM;AAAA,QAC/B,cAAc,MAAM,aAAa,KAAK;AAAA,QACtC;AAAA,MAAA;AAAA,MARK,OAAO;AAAA,IAAA;AAAA,EAWlB,CAAC,EAAA,CACH;AAEJ;"}