@m5kdev/web-ui 0.8.2 → 0.8.4

package/dist/src/components/FileDropzone.d.mts

@@ -0,0 +1,14 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/FileDropzone.d.ts
+interface FileDropzoneProps {
+  onUploadComplete?: (filePath: string) => void;
+  className?: string;
+}
+declare function FileDropzone({
+  onUploadComplete,
+  className
+}: FileDropzoneProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FileDropzone };
+//# sourceMappingURL=FileDropzone.d.mts.map

package/dist/src/components/FileDropzone.mjs

@@ -0,0 +1,101 @@
+import { cn } from "../lib/utils.mjs";
+import { Button } from "./ui/button.mjs";
+import { Progress } from "./ui/progress.mjs";
+import { useCallback, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { File, Upload, X } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+//#region src/components/FileDropzone.tsx
+function FileDropzone({ onUploadComplete, className }) {
+	const [uploadProgress, setUploadProgress] = useState(0);
+	const [selectedFile, setSelectedFile] = useState(null);
+	const [isUploading, setIsUploading] = useState(false);
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop: useCallback((acceptedFiles) => {
+			if (acceptedFiles.length > 0) setSelectedFile(acceptedFiles[0]);
+		}, []),
+		accept: {
+			"image/jpeg": [],
+			"image/png": [],
+			"image/webp": [],
+			"image/jpg": []
+		},
+		maxFiles: 1
+	});
+	const uploadFile = async () => {
+		if (!selectedFile) return;
+		setIsUploading(true);
+		setUploadProgress(0);
+		const formData = new FormData();
+		formData.append("file", selectedFile);
+		try {
+			const response = await fetch("/api/upload/image", {
+				method: "POST",
+				body: formData
+			});
+			if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+			const data = await response.json();
+			onUploadComplete?.(data.filePath);
+			setSelectedFile(null);
+			setUploadProgress(0);
+		} catch (error) {
+			console.error("Upload error:", error);
+		} finally {
+			setIsUploading(false);
+		}
+	};
+	const removeFile = () => {
+		setSelectedFile(null);
+		setUploadProgress(0);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full max-w-xl", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...getRootProps(),
+			className: cn("border-2 border-dashed rounded-lg p-6 cursor-pointer transition-colors", isDragActive ? "border-primary bg-primary/5" : "border-gray-300 hover:border-primary", selectedFile && "border-primary"),
+			children: [/* @__PURE__ */ jsx("input", { ...getInputProps() }), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col items-center justify-center space-y-2 text-center",
+				children: selectedFile ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(File, { className: "h-8 w-8 text-primary" }), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-sm text-gray-600",
+						children: selectedFile.name
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							removeFile();
+						},
+						className: "p-1 hover:bg-gray-100 rounded-full",
+						children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-gray-500" })
+					})]
+				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-gray-400" }),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-gray-600",
+						children: "Drag & drop an image here, or click to select"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-gray-500",
+						children: "Supports JPG, PNG, and WebP"
+					})
+				] })
+			})]
+		}), selectedFile && /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 space-y-4",
+			children: [isUploading && /* @__PURE__ */ jsx(Progress, {
+				value: uploadProgress,
+				className: "h-2 w-full"
+			}), /* @__PURE__ */ jsx(Button, {
+				onClick: uploadFile,
+				disabled: isUploading,
+				className: "w-full",
+				children: isUploading ? "Uploading..." : "Upload File"
+			})]
+		})]
+	});
+}
+//#endregion
+export { FileDropzone };
+
+//# sourceMappingURL=FileDropzone.mjs.map

package/dist/src/components/FileDropzone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.mjs","names":[],"sources":["../../../src/components/FileDropzone.tsx"],"sourcesContent":["import { File, Upload, X } from \"lucide-react\";\r\nimport { useCallback, useState } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { Button } from \"./ui/button\";\r\nimport { Progress } from \"./ui/progress\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\ninterface FileDropzoneProps {\r\n  onUploadComplete?: (filePath: string) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function FileDropzone({ onUploadComplete, className }: FileDropzoneProps) {\r\n  const [uploadProgress, setUploadProgress] = useState(0);\r\n  const [selectedFile, setSelectedFile] = useState<File | null>(null);\r\n  const [isUploading, setIsUploading] = useState(false);\r\n\r\n  const onDrop = useCallback((acceptedFiles: File[]) => {\r\n    if (acceptedFiles.length > 0) {\r\n      setSelectedFile(acceptedFiles[0]);\r\n    }\r\n  }, []);\r\n\r\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n    onDrop,\r\n    accept: {\r\n      \"image/jpeg\": [],\r\n      \"image/png\": [],\r\n      \"image/webp\": [],\r\n      \"image/jpg\": [],\r\n    },\r\n    maxFiles: 1,\r\n  });\r\n\r\n  const uploadFile = async () => {\r\n    if (!selectedFile) return;\r\n\r\n    setIsUploading(true);\r\n    setUploadProgress(0);\r\n\r\n    const formData = new FormData();\r\n    formData.append(\"file\", selectedFile);\r\n\r\n    try {\r\n      const response = await fetch(\"/api/upload/image\", {\r\n        method: \"POST\",\r\n        body: formData,\r\n        // Note: Content-Type is automatically set for FormData\r\n      });\r\n\r\n      if (!response.ok) {\r\n        throw new Error(`HTTP error! status: ${response.status}`);\r\n      }\r\n\r\n      const data = await response.json();\r\n      onUploadComplete?.(data.filePath);\r\n      setSelectedFile(null);\r\n      setUploadProgress(0);\r\n    } catch (error) {\r\n      console.error(\"Upload error:\", error);\r\n    } finally {\r\n      setIsUploading(false);\r\n    }\r\n  };\r\n\r\n  const removeFile = () => {\r\n    setSelectedFile(null);\r\n    setUploadProgress(0);\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"w-full max-w-xl\", className)}>\r\n      <div\r\n        {...getRootProps()}\r\n        className={cn(\r\n          \"border-2 border-dashed rounded-lg p-6 cursor-pointer transition-colors\",\r\n          isDragActive ? \"border-primary bg-primary/5\" : \"border-gray-300 hover:border-primary\",\r\n          selectedFile && \"border-primary\"\r\n        )}\r\n      >\r\n        <input {...getInputProps()} />\r\n        <div className=\"flex flex-col items-center justify-center space-y-2 text-center\">\r\n          {selectedFile ? (\r\n            <>\r\n              <File className=\"h-8 w-8 text-primary\" />\r\n              <div className=\"flex items-center gap-2\">\r\n                <span className=\"text-sm text-gray-600\">{selectedFile.name}</span>\r\n                <button\r\n                  type=\"button\"\r\n                  onClick={(e) => {\r\n                    e.stopPropagation();\r\n                    removeFile();\r\n                  }}\r\n                  className=\"p-1 hover:bg-gray-100 rounded-full\"\r\n                >\r\n                  <X className=\"h-4 w-4 text-gray-500\" />\r\n                </button>\r\n              </div>\r\n            </>\r\n          ) : (\r\n            <>\r\n              <Upload className=\"h-8 w-8 text-gray-400\" />\r\n              <p className=\"text-sm text-gray-600\">Drag & drop an image here, or click to select</p>\r\n              <p className=\"text-xs text-gray-500\">Supports JPG, PNG, and WebP</p>\r\n            </>\r\n          )}\r\n        </div>\r\n      </div>\r\n\r\n      {selectedFile && (\r\n        <div className=\"mt-4 space-y-4\">\r\n          {isUploading && <Progress value={uploadProgress} className=\"h-2 w-full\" />}\r\n          <Button onClick={uploadFile} disabled={isUploading} className=\"w-full\">\r\n            {isUploading ? \"Uploading...\" : \"Upload File\"}\r\n          </Button>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;AAYA,SAAgB,aAAa,EAAE,kBAAkB,aAAgC;CAC/E,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;CACvD,MAAM,CAAC,cAAc,mBAAmB,SAAsB,KAAK;CACnE,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CAQrD,MAAM,EAAE,cAAc,eAAe,iBAAiB,YAAY;EAChE,QAPa,aAAa,kBAA0B;AACpD,OAAI,cAAc,SAAS,EACzB,iBAAgB,cAAc,GAAG;KAElC,EAAE,CAAC;EAIJ,QAAQ;GACN,cAAc,EAAE;GAChB,aAAa,EAAE;GACf,cAAc,EAAE;GAChB,aAAa,EAAE;GAChB;EACD,UAAU;EACX,CAAC;CAEF,MAAM,aAAa,YAAY;AAC7B,MAAI,CAAC,aAAc;AAEnB,iBAAe,KAAK;AACpB,oBAAkB,EAAE;EAEpB,MAAM,WAAW,IAAI,UAAU;AAC/B,WAAS,OAAO,QAAQ,aAAa;AAErC,MAAI;GACF,MAAM,WAAW,MAAM,MAAM,qBAAqB;IAChD,QAAQ;IACR,MAAM;IAEP,CAAC;AAEF,OAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MAAM,uBAAuB,SAAS,SAAS;GAG3D,MAAM,OAAO,MAAM,SAAS,MAAM;AAClC,sBAAmB,KAAK,SAAS;AACjC,mBAAgB,KAAK;AACrB,qBAAkB,EAAE;WACb,OAAO;AACd,WAAQ,MAAM,iBAAiB,MAAM;YAC7B;AACR,kBAAe,MAAM;;;CAIzB,MAAM,mBAAmB;AACvB,kBAAgB,KAAK;AACrB,oBAAkB,EAAE;;AAGtB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,UAAU;YAAhD,CACE,qBAAC,OAAD;GACE,GAAI,cAAc;GAClB,WAAW,GACT,0EACA,eAAe,gCAAgC,wCAC/C,gBAAgB,iBACjB;aANH,CAQE,oBAAC,SAAD,EAAO,GAAI,eAAe,EAAI,CAAA,EAC9B,oBAAC,OAAD;IAAK,WAAU;cACZ,eACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,wBAAyB,CAAA,EACzC,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MAAM,WAAU;gBAAyB,aAAa;MAAY,CAAA,EAClE,oBAAC,UAAD;MACE,MAAK;MACL,UAAU,MAAM;AACd,SAAE,iBAAiB;AACnB,mBAAY;;MAEd,WAAU;gBAEV,oBAAC,GAAD,EAAG,WAAU,yBAA0B,CAAA;MAChC,CAAA,CACL;OACL,EAAA,CAAA,GAEH,qBAAA,YAAA,EAAA,UAAA;KACE,oBAAC,QAAD,EAAQ,WAAU,yBAA0B,CAAA;KAC5C,oBAAC,KAAD;MAAG,WAAU;gBAAwB;MAAiD,CAAA;KACtF,oBAAC,KAAD;MAAG,WAAU;gBAAwB;MAA+B,CAAA;KACnE,EAAA,CAAA;IAED,CAAA,CACF;MAEL,gBACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,eAAe,oBAAC,UAAD;IAAU,OAAO;IAAgB,WAAU;IAAe,CAAA,EAC1E,oBAAC,QAAD;IAAQ,SAAS;IAAY,UAAU;IAAa,WAAU;cAC3D,cAAc,iBAAiB;IACzB,CAAA,CACL;KAEJ"}

package/dist/src/components/MultiSelectDropdown.d.mts

@@ -0,0 +1,29 @@
+import * as React$1 from "react";
+
+//#region src/components/MultiSelectDropdown.d.ts
+interface MultiSelectOption {
+  label: string;
+  icon?: React$1.ReactNode;
+  value: string;
+  group?: string;
+}
+interface MultiSelectDropdownProps {
+  options: MultiSelectOption[];
+  selectedValues: string[];
+  onValueChange: (selectedValues: string[]) => void;
+  placeholder?: React$1.ReactNode;
+  label?: string;
+  className?: string;
+  triggerClassName?: string;
+  disabled?: boolean;
+  maxDisplayCount?: number;
+  multiSelectLabel?: string;
+  trigger?: React$1.ReactNode;
+  resetButton?: "bottom" | "top";
+  resetLabel?: React$1.ReactNode;
+  separateGroups?: boolean;
+}
+declare const MultiSelectDropdown: React$1.ForwardRefExoticComponent<MultiSelectDropdownProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { MultiSelectDropdown, type MultiSelectDropdownProps, type MultiSelectOption };
+//# sourceMappingURL=MultiSelectDropdown.d.mts.map

package/dist/src/components/MultiSelectDropdown.mjs

@@ -0,0 +1,103 @@
+import { cn } from "../lib/utils.mjs";
+import { Button } from "./ui/button.mjs";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu.mjs";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, RotateCcw } from "lucide-react";
+//#region src/components/MultiSelectDropdown.tsx
+const MultiSelectDropdown = React$1.forwardRef(({ options, selectedValues, onValueChange, placeholder = "Select items...", label, className, triggerClassName, trigger, multiSelectLabel, disabled = false, maxDisplayCount = 3, resetButton = "bottom", resetLabel = "Reset", separateGroups = false, ...props }, ref) => {
+	const handleValueChange = (value, checked) => {
+		if (checked) onValueChange([...selectedValues, value]);
+		else onValueChange(selectedValues.filter((v) => v !== value));
+	};
+	const handleReset = () => {
+		onValueChange([]);
+	};
+	const getDisplayText = () => {
+		if (selectedValues.length === 0) return placeholder;
+		const selectedLabels = options.filter((option) => selectedValues.includes(option.value)).map((option) => option.label);
+		if (multiSelectLabel && selectedLabels.length > 1) return multiSelectLabel;
+		if (selectedLabels.length <= maxDisplayCount) return selectedLabels.join(", ");
+		return `${selectedLabels.slice(0, maxDisplayCount).join(", ")} (+${selectedLabels.length - maxDisplayCount} more)`;
+	};
+	const groupedOptions = React$1.useMemo(() => {
+		const groups = {};
+		const ungrouped = [];
+		options.forEach((option) => {
+			if (option.group) {
+				if (!groups[option.group]) groups[option.group] = [];
+				groups[option.group].push(option);
+			} else ungrouped.push(option);
+		});
+		return {
+			groups,
+			ungrouped
+		};
+	}, [options]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full", className),
+		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				ref,
+				variant: "outline",
+				className: cn("w-full justify-between text-left font-normal", selectedValues.length === 0 && "text-muted-foreground", triggerClassName),
+				disabled,
+				...props,
+				children: trigger || /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: getDisplayText()
+				}), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] })
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			className: "w-full min-w-[var(--radix-dropdown-menu-trigger-width)]",
+			align: "start",
+			children: [
+				resetButton && resetButton === "top" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: handleReset,
+					disabled: selectedValues.length === 0,
+					onSelect: (event) => event.preventDefault(),
+					className: "cursor-pointer text-muted-foreground hover:text-foreground",
+					children: resetLabel || /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Reset"] })
+				}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }),
+				label && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }),
+				Object.entries(groupedOptions.groups).map(([groupName, groupOptions], groupIndex) => /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+					groupIndex > 0 && separateGroups && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsx(DropdownMenuLabel, {
+						className: "text-xs font-semibold text-muted-foreground px-2 py-1.5",
+						children: groupName
+					}),
+					groupOptions.map((option) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+						checked: selectedValues.includes(option.value),
+						onCheckedChange: (checked) => handleValueChange(option.value, checked),
+						onSelect: (event) => event.preventDefault(),
+						className: "cursor-pointer",
+						children: [option.icon && /* @__PURE__ */ jsx("span", {
+							className: "mr-2",
+							children: option.icon
+						}), option.label]
+					}, option.value))
+				] }, groupName)),
+				groupedOptions.ungrouped.length > 0 && /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [Object.keys(groupedOptions.groups).length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), groupedOptions.ungrouped.map((option) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+					checked: selectedValues.includes(option.value),
+					onCheckedChange: (checked) => handleValueChange(option.value, checked),
+					onSelect: (event) => event.preventDefault(),
+					className: "cursor-pointer",
+					children: option.label
+				}, option.value))] }),
+				resetButton && resetButton === "bottom" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: handleReset,
+					disabled: selectedValues.length === 0,
+					onSelect: (event) => event.preventDefault(),
+					className: "cursor-pointer text-muted-foreground hover:text-foreground",
+					children: resetLabel || /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Reset"] })
+				})] })
+			]
+		})] })
+	});
+});
+MultiSelectDropdown.displayName = "MultiSelectDropdown";
+//#endregion
+export { MultiSelectDropdown };
+
+//# sourceMappingURL=MultiSelectDropdown.mjs.map

package/dist/src/components/MultiSelectDropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectDropdown.mjs","names":["React"],"sources":["../../../src/components/MultiSelectDropdown.tsx"],"sourcesContent":["import { ChevronDown, RotateCcw } from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport { Button } from \"./ui/button\";\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuContent,\r\n  DropdownMenuGroup,\r\n  DropdownMenuItem,\r\n  DropdownMenuLabel,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"./ui/dropdown-menu\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\ninterface MultiSelectOption {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  value: string;\r\n  group?: string;\r\n}\r\n\r\ninterface MultiSelectDropdownProps {\r\n  options: MultiSelectOption[];\r\n  selectedValues: string[];\r\n  onValueChange: (selectedValues: string[]) => void;\r\n  placeholder?: React.ReactNode;\r\n  label?: string;\r\n  className?: string;\r\n  triggerClassName?: string;\r\n  disabled?: boolean;\r\n  maxDisplayCount?: number;\r\n  multiSelectLabel?: string;\r\n  trigger?: React.ReactNode;\r\n  resetButton?: \"bottom\" | \"top\";\r\n  resetLabel?: React.ReactNode;\r\n  separateGroups?: boolean;\r\n}\r\n\r\nconst MultiSelectDropdown = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuTrigger>,\r\n  MultiSelectDropdownProps\r\n>(\r\n  (\r\n    {\r\n      options,\r\n      selectedValues,\r\n      onValueChange,\r\n      placeholder = \"Select items...\",\r\n      label,\r\n      className,\r\n      triggerClassName,\r\n      trigger,\r\n      multiSelectLabel,\r\n      disabled = false,\r\n      maxDisplayCount = 3,\r\n      resetButton = \"bottom\",\r\n      resetLabel = \"Reset\",\r\n      separateGroups = false,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const handleValueChange = (value: string, checked: boolean) => {\r\n      if (checked) {\r\n        onValueChange([...selectedValues, value]);\r\n      } else {\r\n        onValueChange(selectedValues.filter((v) => v !== value));\r\n      }\r\n    };\r\n\r\n    const handleReset = () => {\r\n      onValueChange([]);\r\n    };\r\n\r\n    const getDisplayText = () => {\r\n      if (selectedValues.length === 0) {\r\n        return placeholder;\r\n      }\r\n\r\n      const selectedLabels = options\r\n        .filter((option) => selectedValues.includes(option.value))\r\n        .map((option) => option.label);\r\n\r\n      if (multiSelectLabel && selectedLabels.length > 1) {\r\n        return multiSelectLabel;\r\n      }\r\n\r\n      if (selectedLabels.length <= maxDisplayCount) {\r\n        return selectedLabels.join(\", \");\r\n      }\r\n\r\n      return `${selectedLabels.slice(0, maxDisplayCount).join(\", \")} (+${\r\n        selectedLabels.length - maxDisplayCount\r\n      } more)`;\r\n    };\r\n\r\n    const groupedOptions = React.useMemo(() => {\r\n      const groups: Record<string, MultiSelectOption[]> = {};\r\n      const ungrouped: MultiSelectOption[] = [];\r\n\r\n      options.forEach((option) => {\r\n        if (option.group) {\r\n          if (!groups[option.group]) {\r\n            groups[option.group] = [];\r\n          }\r\n          groups[option.group].push(option);\r\n        } else {\r\n          ungrouped.push(option);\r\n        }\r\n      });\r\n\r\n      return { groups, ungrouped };\r\n    }, [options]);\r\n\r\n    return (\r\n      <div className={cn(\"w-full\", className)}>\r\n        <DropdownMenu>\r\n          <DropdownMenuTrigger asChild>\r\n            <Button\r\n              ref={ref}\r\n              variant=\"outline\"\r\n              className={cn(\r\n                \"w-full justify-between text-left font-normal\",\r\n                selectedValues.length === 0 && \"text-muted-foreground\",\r\n                triggerClassName\r\n              )}\r\n              disabled={disabled}\r\n              {...props}\r\n            >\r\n              {trigger || (\r\n                <>\r\n                  <span className=\"truncate\">{getDisplayText()}</span>\r\n                  <ChevronDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\r\n                </>\r\n              )}\r\n            </Button>\r\n          </DropdownMenuTrigger>\r\n\r\n          <DropdownMenuContent\r\n            className=\"w-full min-w-[var(--radix-dropdown-menu-trigger-width)]\"\r\n            align=\"start\"\r\n          >\r\n            {resetButton && resetButton === \"top\" && (\r\n              <>\r\n                <DropdownMenuItem\r\n                  onClick={handleReset}\r\n                  disabled={selectedValues.length === 0}\r\n                  onSelect={(event) => event.preventDefault()}\r\n                  className=\"cursor-pointer text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  {resetLabel || (\r\n                    <>\r\n                      <RotateCcw className=\"mr-2 h-4 w-4\" />\r\n                      Reset\r\n                    </>\r\n                  )}\r\n                </DropdownMenuItem>\r\n                <DropdownMenuSeparator />\r\n              </>\r\n            )}\r\n            {label && (\r\n              <>\r\n                <DropdownMenuLabel>{label}</DropdownMenuLabel>\r\n                <DropdownMenuSeparator />\r\n              </>\r\n            )}\r\n            {Object.entries(groupedOptions.groups).map(([groupName, groupOptions], groupIndex) => (\r\n              <DropdownMenuGroup key={groupName}>\r\n                {groupIndex > 0 && separateGroups && <DropdownMenuSeparator />}\r\n                <DropdownMenuLabel className=\"text-xs font-semibold text-muted-foreground px-2 py-1.5\">\r\n                  {groupName}\r\n                </DropdownMenuLabel>\r\n                {groupOptions.map((option) => (\r\n                  <DropdownMenuCheckboxItem\r\n                    key={option.value}\r\n                    checked={selectedValues.includes(option.value)}\r\n                    onCheckedChange={(checked) => handleValueChange(option.value, checked)}\r\n                    onSelect={(event) => event.preventDefault()}\r\n                    className=\"cursor-pointer\"\r\n                  >\r\n                    {option.icon && <span className=\"mr-2\">{option.icon}</span>}\r\n                    {option.label}\r\n                  </DropdownMenuCheckboxItem>\r\n                ))}\r\n              </DropdownMenuGroup>\r\n            ))}\r\n            {groupedOptions.ungrouped.length > 0 && (\r\n              <DropdownMenuGroup>\r\n                {Object.keys(groupedOptions.groups).length > 0 && <DropdownMenuSeparator />}\r\n                {groupedOptions.ungrouped.map((option) => (\r\n                  <DropdownMenuCheckboxItem\r\n                    key={option.value}\r\n                    checked={selectedValues.includes(option.value)}\r\n                    onCheckedChange={(checked) => handleValueChange(option.value, checked)}\r\n                    onSelect={(event) => event.preventDefault()}\r\n                    className=\"cursor-pointer\"\r\n                  >\r\n                    {option.label}\r\n                  </DropdownMenuCheckboxItem>\r\n                ))}\r\n              </DropdownMenuGroup>\r\n            )}\r\n            {resetButton && resetButton === \"bottom\" && (\r\n              <>\r\n                <DropdownMenuSeparator />\r\n                <DropdownMenuItem\r\n                  onClick={handleReset}\r\n                  disabled={selectedValues.length === 0}\r\n                  onSelect={(event) => event.preventDefault()}\r\n                  className=\"cursor-pointer text-muted-foreground hover:text-foreground\"\r\n                >\r\n                  {resetLabel || (\r\n                    <>\r\n                      <RotateCcw className=\"mr-2 h-4 w-4\" />\r\n                      Reset\r\n                    </>\r\n                  )}\r\n                </DropdownMenuItem>\r\n              </>\r\n            )}\r\n          </DropdownMenuContent>\r\n        </DropdownMenu>\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nMultiSelectDropdown.displayName = \"MultiSelectDropdown\";\r\n\r\nexport { MultiSelectDropdown };\r\nexport type { MultiSelectOption, MultiSelectDropdownProps };\r\n"],"mappings":"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"}

package/dist/src/components/Orb.d.mts

@@ -0,0 +1,17 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Orb.d.ts
+declare function Orb({
+  hue,
+  hoverIntensity,
+  rotateOnHover,
+  forceHoverState
+}: {
+  hue?: number | undefined;
+  hoverIntensity?: number | undefined;
+  rotateOnHover?: boolean | undefined;
+  forceHoverState?: boolean | undefined;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Orb as default };
+//# sourceMappingURL=Orb.d.mts.map

package/dist/src/components/Orb.mjs

@@ -0,0 +1,267 @@
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Mesh, Program, Renderer, Triangle, Vec3 } from "ogl";
+//#region src/components/Orb.tsx
+function Orb({ hue = 0, hoverIntensity = .2, rotateOnHover = true, forceHoverState = false }) {
+	const ctnDom = useRef(null);
+	const vert = `
+    precision highp float;
+    attribute vec2 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `;
+	const frag = `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 col = mix(color1, color2, cl);
+      col = mix(color3, col, v0);
+      col = (col + v1) * v2 * v3;
+      col = clamp(col, 0.0, 1.0);
+      
+      return extractAlpha(col);
+    }
+
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;
+	useEffect(() => {
+		const container = ctnDom.current;
+		if (!container) return;
+		const renderer = new Renderer({
+			alpha: true,
+			premultipliedAlpha: false
+		});
+		const gl = renderer.gl;
+		gl.clearColor(0, 0, 0, 0);
+		container.appendChild(gl.canvas);
+		const geometry = new Triangle(gl);
+		const program = new Program(gl, {
+			vertex: vert,
+			fragment: frag,
+			uniforms: {
+				iTime: { value: 0 },
+				iResolution: { value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height) },
+				hue: { value: hue },
+				hover: { value: 0 },
+				rot: { value: 0 },
+				hoverIntensity: { value: hoverIntensity }
+			}
+		});
+		const mesh = new Mesh(gl, {
+			geometry,
+			program
+		});
+		function resize() {
+			if (!container) return;
+			const dpr = window.devicePixelRatio || 1;
+			const width = container.clientWidth;
+			const height = container.clientHeight;
+			renderer.setSize(width * dpr, height * dpr);
+			gl.canvas.style.width = width + "px";
+			gl.canvas.style.height = height + "px";
+			program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+		}
+		window.addEventListener("resize", resize);
+		resize();
+		let targetHover = 0;
+		let lastTime = 0;
+		let currentRot = 0;
+		const rotationSpeed = .3;
+		const handleMouseMove = (e) => {
+			const rect = container.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const y = e.clientY - rect.top;
+			const width = rect.width;
+			const height = rect.height;
+			const size = Math.min(width, height);
+			const centerX = width / 2;
+			const centerY = height / 2;
+			const uvX = (x - centerX) / size * 2;
+			const uvY = (y - centerY) / size * 2;
+			if (Math.sqrt(uvX * uvX + uvY * uvY) < .8) targetHover = 1;
+			else targetHover = 0;
+		};
+		const handleMouseLeave = () => {
+			targetHover = 0;
+		};
+		container.addEventListener("mousemove", handleMouseMove);
+		container.addEventListener("mouseleave", handleMouseLeave);
+		let rafId;
+		const update = (t) => {
+			rafId = requestAnimationFrame(update);
+			const dt = (t - lastTime) * .001;
+			lastTime = t;
+			program.uniforms.iTime.value = t * .001;
+			program.uniforms.hue.value = hue;
+			program.uniforms.hoverIntensity.value = hoverIntensity;
+			const effectiveHover = forceHoverState ? 1 : targetHover;
+			program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * .1;
+			if (rotateOnHover && effectiveHover > .5) currentRot += dt * rotationSpeed;
+			program.uniforms.rot.value = currentRot;
+			renderer.render({ scene: mesh });
+		};
+		rafId = requestAnimationFrame(update);
+		return () => {
+			cancelAnimationFrame(rafId);
+			window.removeEventListener("resize", resize);
+			container.removeEventListener("mousemove", handleMouseMove);
+			container.removeEventListener("mouseleave", handleMouseLeave);
+			container.removeChild(gl.canvas);
+			gl.getExtension("WEBGL_lose_context")?.loseContext();
+		};
+	}, [
+		hue,
+		hoverIntensity,
+		rotateOnHover,
+		forceHoverState
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: ctnDom,
+		style: {
+			position: "relative",
+			zIndex: 0,
+			width: "100%",
+			height: "100%"
+		}
+	});
+}
+//#endregion
+export { Orb as default };
+
+//# sourceMappingURL=Orb.mjs.map

package/dist/src/components/Orb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Orb.mjs","names":[],"sources":["../../../src/components/Orb.tsx"],"sourcesContent":["import { Mesh, Program, Renderer, Triangle, Vec3 } from \"ogl\";\r\nimport { useEffect, useRef } from \"react\";\r\n\r\nexport default function Orb({\r\n  hue = 0,\r\n  hoverIntensity = 0.2,\r\n  rotateOnHover = true,\r\n  forceHoverState = false,\r\n}) {\r\n  const ctnDom = useRef(null);\r\n\r\n  const vert = /* glsl */ `\r\n    precision highp float;\r\n    attribute vec2 position;\r\n    attribute vec2 uv;\r\n    varying vec2 vUv;\r\n    void main() {\r\n      vUv = uv;\r\n      gl_Position = vec4(position, 0.0, 1.0);\r\n    }\r\n  `;\r\n\r\n  const frag = /* glsl */ `\r\n    precision highp float;\r\n\r\n    uniform float iTime;\r\n    uniform vec3 iResolution;\r\n    uniform float hue;\r\n    uniform float hover;\r\n    uniform float rot;\r\n    uniform float hoverIntensity;\r\n    varying vec2 vUv;\r\n\r\n    vec3 rgb2yiq(vec3 c) {\r\n      float y = dot(c, vec3(0.299, 0.587, 0.114));\r\n      float i = dot(c, vec3(0.596, -0.274, -0.322));\r\n      float q = dot(c, vec3(0.211, -0.523, 0.312));\r\n      return vec3(y, i, q);\r\n    }\r\n    \r\n    vec3 yiq2rgb(vec3 c) {\r\n      float r = c.x + 0.956 * c.y + 0.621 * c.z;\r\n      float g = c.x - 0.272 * c.y - 0.647 * c.z;\r\n      float b = c.x - 1.106 * c.y + 1.703 * c.z;\r\n      return vec3(r, g, b);\r\n    }\r\n    \r\n    vec3 adjustHue(vec3 color, float hueDeg) {\r\n      float hueRad = hueDeg * 3.14159265 / 180.0;\r\n      vec3 yiq = rgb2yiq(color);\r\n      float cosA = cos(hueRad);\r\n      float sinA = sin(hueRad);\r\n      float i = yiq.y * cosA - yiq.z * sinA;\r\n      float q = yiq.y * sinA + yiq.z * cosA;\r\n      yiq.y = i;\r\n      yiq.z = q;\r\n      return yiq2rgb(yiq);\r\n    }\r\n\r\n    vec3 hash33(vec3 p3) {\r\n      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));\r\n      p3 += dot(p3, p3.yxz + 19.19);\r\n      return -1.0 + 2.0 * fract(vec3(\r\n        p3.x + p3.y,\r\n        p3.x + p3.z,\r\n        p3.y + p3.z\r\n      ) * p3.zyx);\r\n    }\r\n\r\n    float snoise3(vec3 p) {\r\n      const float K1 = 0.333333333;\r\n      const float K2 = 0.166666667;\r\n      vec3 i = floor(p + (p.x + p.y + p.z) * K1);\r\n      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);\r\n      vec3 e = step(vec3(0.0), d0 - d0.yzx);\r\n      vec3 i1 = e * (1.0 - e.zxy);\r\n      vec3 i2 = 1.0 - e.zxy * (1.0 - e);\r\n      vec3 d1 = d0 - (i1 - K2);\r\n      vec3 d2 = d0 - (i2 - K1);\r\n      vec3 d3 = d0 - 0.5;\r\n      vec4 h = max(0.6 - vec4(\r\n        dot(d0, d0),\r\n        dot(d1, d1),\r\n        dot(d2, d2),\r\n        dot(d3, d3)\r\n      ), 0.0);\r\n      vec4 n = h * h * h * h * vec4(\r\n        dot(d0, hash33(i)),\r\n        dot(d1, hash33(i + i1)),\r\n        dot(d2, hash33(i + i2)),\r\n        dot(d3, hash33(i + 1.0))\r\n      );\r\n      return dot(vec4(31.316), n);\r\n    }\r\n\r\n    vec4 extractAlpha(vec3 colorIn) {\r\n      float a = max(max(colorIn.r, colorIn.g), colorIn.b);\r\n      return vec4(colorIn.rgb / (a + 1e-5), a);\r\n    }\r\n\r\n    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);\r\n    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);\r\n    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);\r\n    const float innerRadius = 0.6;\r\n    const float noiseScale = 0.65;\r\n\r\n    float light1(float intensity, float attenuation, float dist) {\r\n      return intensity / (1.0 + dist * attenuation);\r\n    }\r\n    float light2(float intensity, float attenuation, float dist) {\r\n      return intensity / (1.0 + dist * dist * attenuation);\r\n    }\r\n\r\n    vec4 draw(vec2 uv) {\r\n      vec3 color1 = adjustHue(baseColor1, hue);\r\n      vec3 color2 = adjustHue(baseColor2, hue);\r\n      vec3 color3 = adjustHue(baseColor3, hue);\r\n      \r\n      float ang = atan(uv.y, uv.x);\r\n      float len = length(uv);\r\n      float invLen = len > 0.0 ? 1.0 / len : 0.0;\r\n      \r\n      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;\r\n      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);\r\n      float d0 = distance(uv, (r0 * invLen) * uv);\r\n      float v0 = light1(1.0, 10.0, d0);\r\n      v0 *= smoothstep(r0 * 1.05, r0, len);\r\n      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;\r\n      \r\n      float a = iTime * -1.0;\r\n      vec2 pos = vec2(cos(a), sin(a)) * r0;\r\n      float d = distance(uv, pos);\r\n      float v1 = light2(1.5, 5.0, d);\r\n      v1 *= light1(1.0, 50.0, d0);\r\n      \r\n      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);\r\n      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);\r\n      \r\n      vec3 col = mix(color1, color2, cl);\r\n      col = mix(color3, col, v0);\r\n      col = (col + v1) * v2 * v3;\r\n      col = clamp(col, 0.0, 1.0);\r\n      \r\n      return extractAlpha(col);\r\n    }\r\n\r\n    vec4 mainImage(vec2 fragCoord) {\r\n      vec2 center = iResolution.xy * 0.5;\r\n      float size = min(iResolution.x, iResolution.y);\r\n      vec2 uv = (fragCoord - center) / size * 2.0;\r\n      \r\n      float angle = rot;\r\n      float s = sin(angle);\r\n      float c = cos(angle);\r\n      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);\r\n      \r\n      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);\r\n      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);\r\n      \r\n      return draw(uv);\r\n    }\r\n\r\n    void main() {\r\n      vec2 fragCoord = vUv * iResolution.xy;\r\n      vec4 col = mainImage(fragCoord);\r\n      gl_FragColor = vec4(col.rgb * col.a, col.a);\r\n    }\r\n  `;\r\n\r\n  useEffect(() => {\r\n    const container = ctnDom.current as HTMLElement | null;\r\n    if (!container) return;\r\n\r\n    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });\r\n    const gl = renderer.gl;\r\n    gl.clearColor(0, 0, 0, 0);\r\n    container.appendChild(gl.canvas);\r\n\r\n    const geometry = new Triangle(gl);\r\n    const program = new Program(gl, {\r\n      vertex: vert,\r\n      fragment: frag,\r\n      uniforms: {\r\n        iTime: { value: 0 },\r\n        iResolution: {\r\n          value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height),\r\n        },\r\n        hue: { value: hue },\r\n        hover: { value: 0 },\r\n        rot: { value: 0 },\r\n        hoverIntensity: { value: hoverIntensity },\r\n      },\r\n    });\r\n\r\n    const mesh = new Mesh(gl, { geometry, program });\r\n\r\n    function resize() {\r\n      if (!container) return;\r\n      const dpr = window.devicePixelRatio || 1;\r\n      const width = container.clientWidth;\r\n      const height = container.clientHeight;\r\n      renderer.setSize(width * dpr, height * dpr);\r\n      gl.canvas.style.width = width + \"px\";\r\n      gl.canvas.style.height = height + \"px\";\r\n      program.uniforms.iResolution.value.set(\r\n        gl.canvas.width,\r\n        gl.canvas.height,\r\n        gl.canvas.width / gl.canvas.height\r\n      );\r\n    }\r\n    window.addEventListener(\"resize\", resize);\r\n    resize();\r\n\r\n    let targetHover = 0;\r\n    let lastTime = 0;\r\n    let currentRot = 0;\r\n    const rotationSpeed = 0.3;\r\n\r\n    const handleMouseMove = (e: MouseEvent) => {\r\n      const rect = container.getBoundingClientRect();\r\n      const x = e.clientX - rect.left;\r\n      const y = e.clientY - rect.top;\r\n      const width = rect.width;\r\n      const height = rect.height;\r\n      const size = Math.min(width, height);\r\n      const centerX = width / 2;\r\n      const centerY = height / 2;\r\n      const uvX = ((x - centerX) / size) * 2.0;\r\n      const uvY = ((y - centerY) / size) * 2.0;\r\n\r\n      if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {\r\n        targetHover = 1;\r\n      } else {\r\n        targetHover = 0;\r\n      }\r\n    };\r\n\r\n    const handleMouseLeave = () => {\r\n      targetHover = 0;\r\n    };\r\n\r\n    container.addEventListener(\"mousemove\", handleMouseMove);\r\n    container.addEventListener(\"mouseleave\", handleMouseLeave);\r\n\r\n    let rafId: number;\r\n    const update = (t: number) => {\r\n      rafId = requestAnimationFrame(update);\r\n      const dt = (t - lastTime) * 0.001;\r\n      lastTime = t;\r\n      program.uniforms.iTime.value = t * 0.001;\r\n      program.uniforms.hue.value = hue;\r\n      program.uniforms.hoverIntensity.value = hoverIntensity;\r\n\r\n      const effectiveHover = forceHoverState ? 1 : targetHover;\r\n      program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;\r\n\r\n      if (rotateOnHover && effectiveHover > 0.5) {\r\n        currentRot += dt * rotationSpeed;\r\n      }\r\n      program.uniforms.rot.value = currentRot;\r\n\r\n      renderer.render({ scene: mesh });\r\n    };\r\n    rafId = requestAnimationFrame(update);\r\n\r\n    return () => {\r\n      cancelAnimationFrame(rafId);\r\n      window.removeEventListener(\"resize\", resize);\r\n      container.removeEventListener(\"mousemove\", handleMouseMove);\r\n      container.removeEventListener(\"mouseleave\", handleMouseLeave);\r\n      container.removeChild(gl.canvas);\r\n      gl.getExtension(\"WEBGL_lose_context\")?.loseContext();\r\n    };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [hue, hoverIntensity, rotateOnHover, forceHoverState]);\r\n\r\n  return (\r\n    <div\r\n      ref={ctnDom}\r\n      style={{\r\n        position: \"relative\",\r\n        zIndex: 0,\r\n        width: \"100%\",\r\n        height: \"100%\",\r\n      }}\r\n    />\r\n  );\r\n}\r\n"],"mappings":"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"}

package/dist/src/components/PageAlert.d.mts

@@ -0,0 +1,23 @@
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/PageAlert.d.ts
+declare const pageAlertVariants: (props?: ({
+  variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+interface PageAlertProps extends React$1.ComponentProps<"div">, VariantProps<typeof pageAlertVariants> {
+  title?: string;
+  description?: React$1.ReactNode;
+  icon?: React$1.ComponentType<{
+    className?: string;
+  }>;
+  dismissible?: boolean;
+  defaultOpen?: boolean;
+  onDismiss?: () => void;
+  children?: React$1.ReactNode;
+}
+declare const PageAlert: React$1.ForwardRefExoticComponent<Omit<PageAlertProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PageAlert, type PageAlertProps };
+//# sourceMappingURL=PageAlert.d.mts.map