@kestack/web-platform 0.0.0-stage → 0.0.0

package/dist/components/ui/file-tree.js

@@ -0,0 +1,300 @@
+import { Button } from "./button.js";
+import { cn } from "../lib/utils.js";
+import { ScrollArea } from "./scroll-area.js";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/components/ui/file-tree.tsx
+const TreeContext = createContext(null);
+const useTree = () => {
+	const context = useContext(TreeContext);
+	if (!context) throw new Error("useTree must be used within a TreeProvider");
+	return context;
+};
+const isFolderElement = (element) => {
+	if (element.type) return element.type === "folder";
+	return Array.isArray(element.children);
+};
+const mergeExpandedItems = (currentItems, nextItems) => [.../* @__PURE__ */ new Set([...currentItems ?? [], ...nextItems])];
+/**
+* Collect a folder's id and every descendant folder id (depth-first) from the
+* element tree, used to expand or collapse a whole subtree at once.
+*/
+const collectFolderSubtreeIds = (elements, rootId) => {
+	if (!elements) return [];
+	const result = [];
+	const collect = (element) => {
+		result.push(element.id);
+		for (const child of element.children ?? []) if (isFolderElement(child)) collect(child);
+	};
+	const find = (els) => {
+		for (const element of els) {
+			if (element.id === rootId) {
+				if (isFolderElement(element)) collect(element);
+				return true;
+			}
+			if (element.children && find(element.children)) return true;
+		}
+		return false;
+	};
+	find(elements);
+	return result;
+};
+const treeCollator = new Intl.Collator("en", {
+	numeric: true,
+	sensitivity: "base"
+});
+const defaultTreeComparator = (a, b) => {
+	const aIsFolder = isFolderElement(a);
+	if (aIsFolder !== isFolderElement(b)) return aIsFolder ? -1 : 1;
+	return treeCollator.compare(a.name, b.name);
+};
+const getTreeComparator = (sort) => {
+	if (sort === "none") return;
+	if (sort === "default") return defaultTreeComparator;
+	return sort;
+};
+const sortTreeElements = (elements, sort) => {
+	const comparator = getTreeComparator(sort);
+	const nextElements = elements.map((element) => {
+		if (!Array.isArray(element.children)) return element;
+		return {
+			...element,
+			children: sortTreeElements(element.children, sort)
+		};
+	});
+	if (!comparator) return nextElements;
+	return [...nextElements].sort(comparator);
+};
+const renderTreeElements = (elements, sort) => sortTreeElements(elements, sort).map((element) => {
+	if (isFolderElement(element)) return /* @__PURE__ */ jsx(Folder, {
+		value: element.id,
+		element: element.name,
+		isSelectable: element.isSelectable,
+		children: Array.isArray(element.children) ? renderTreeElements(element.children, sort) : null
+	}, element.id);
+	return /* @__PURE__ */ jsx(File, {
+		value: element.id,
+		isSelectable: element.isSelectable,
+		children: /* @__PURE__ */ jsx("span", { children: element.name })
+	}, element.id);
+});
+const Tree = forwardRef(({ className, elements, initialSelectedId, initialExpandedItems, expandedItems: controlledExpandedItems, expansionSignal, expansionFocused = false, children, indicator = true, openIcon, closeIcon, sort = "default", dir, ...props }, ref) => {
+	const [selectedId, setSelectedId] = useState(initialSelectedId);
+	const [expandedItems, setExpandedItems] = useState(initialExpandedItems);
+	const selectItem = useCallback((id) => {
+		setSelectedId(id);
+	}, []);
+	const handleExpand = useCallback((id) => {
+		setExpandedItems((prev) => {
+			if (prev?.includes(id)) return prev.filter((item) => item !== id);
+			return [...prev ?? [], id];
+		});
+	}, []);
+	const handleExpandRecursive = useCallback((id) => {
+		const descendantIds = collectFolderSubtreeIds(elements, id).filter((item) => item !== id);
+		setExpandedItems((prev) => {
+			if (descendantIds.some((item) => prev?.includes(item))) {
+				const remove = new Set(descendantIds);
+				return mergeExpandedItems((prev ?? []).filter((item) => !remove.has(item)), [id]);
+			}
+			return mergeExpandedItems(prev, [id, ...descendantIds]);
+		});
+	}, [elements]);
+	const expandSpecificTargetedElements = useCallback((elements, selectId) => {
+		if (!elements || !selectId) return;
+		const findParent = (currentElement, currentPath = []) => {
+			const isSelectable = currentElement.isSelectable ?? true;
+			const newPath = [...currentPath, currentElement.id];
+			if (currentElement.id === selectId) {
+				if (isSelectable) setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+				else if (newPath.includes(currentElement.id)) {
+					newPath.pop();
+					setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+				}
+				return;
+			}
+			if (Array.isArray(currentElement.children) && currentElement.children.length > 0) currentElement.children.forEach((child) => {
+				findParent(child, newPath);
+			});
+		};
+		elements.forEach((element) => {
+			findParent(element);
+		});
+	}, []);
+	useEffect(() => {
+		if (initialSelectedId) expandSpecificTargetedElements(elements, initialSelectedId);
+	}, [
+		initialSelectedId,
+		elements,
+		expandSpecificTargetedElements
+	]);
+	const expandedItemsRef = useRef(expandedItems);
+	expandedItemsRef.current = expandedItems;
+	const preFocusRef = useRef(void 0);
+	const wasFocusedRef = useRef(false);
+	useEffect(() => {
+		if (expansionSignal === void 0) return;
+		if (expansionFocused) {
+			if (!wasFocusedRef.current) {
+				preFocusRef.current = expandedItemsRef.current;
+				wasFocusedRef.current = true;
+			}
+			if (controlledExpandedItems) setExpandedItems(controlledExpandedItems);
+		} else if (wasFocusedRef.current) {
+			wasFocusedRef.current = false;
+			setExpandedItems(preFocusRef.current);
+		} else if (controlledExpandedItems) setExpandedItems(controlledExpandedItems);
+	}, [expansionSignal]);
+	const direction = dir === "rtl" ? "rtl" : "ltr";
+	const treeChildren = children ?? (elements ? renderTreeElements(elements, sort) : null);
+	return /* @__PURE__ */ jsx(TreeContext.Provider, {
+		value: {
+			selectedId,
+			expandedItems,
+			handleExpand,
+			handleExpandRecursive,
+			selectItem,
+			setExpandedItems,
+			indicator,
+			openIcon,
+			closeIcon,
+			direction
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("size-full", className),
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				ref,
+				className: "relative h-full px-2",
+				dir,
+				children: /* @__PURE__ */ jsx(Accordion.Root, {
+					...props,
+					multiple: true,
+					value: expandedItems,
+					className: "flex flex-col gap-1",
+					dir,
+					children: treeChildren
+				})
+			})
+		})
+	});
+});
+Tree.displayName = "Tree";
+const TreeIndicator = forwardRef(({ className, ...props }, ref) => {
+	const { direction } = useTree();
+	return /* @__PURE__ */ jsx("div", {
+		dir: direction,
+		ref,
+		className: cn("bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5", className),
+		...props
+	});
+});
+TreeIndicator.displayName = "TreeIndicator";
+const Folder = forwardRef(({ className, element, value, isSelectable = true, isSelect: _isSelect, suffix, iconClassName, children, ...props }, ref) => {
+	const { direction, handleExpand, handleExpandRecursive, expandedItems, indicator, selectItem, openIcon, closeIcon } = useTree();
+	return /* @__PURE__ */ jsxs(Accordion.Item, {
+		ref,
+		...props,
+		value,
+		className: "relative h-full overflow-hidden",
+		children: [/* @__PURE__ */ jsx(Accordion.Header, {
+			className: "min-w-0 overflow-hidden",
+			children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+				className: cn(`flex w-full items-center gap-1 rounded-md text-sm min-w-0 max-w-full`, className, {
+					"cursor-pointer": isSelectable,
+					"cursor-not-allowed opacity-50": !isSelectable
+				}),
+				disabled: !isSelectable,
+				onClick: () => {
+					selectItem(value);
+					handleExpand(value);
+				},
+				onContextMenu: (event) => {
+					event.preventDefault();
+					handleExpandRecursive(value);
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("shrink-0", iconClassName),
+						children: expandedItems?.includes(value) ? openIcon ?? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4" }) : closeIcon ?? /* @__PURE__ */ jsx(FolderIcon, { className: "size-4" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						title: element,
+						children: element
+					}),
+					suffix
+				]
+			})
+		}), /* @__PURE__ */ jsxs(Accordion.Panel, {
+			className: "data-closed:animate-accordion-up data-open:animate-accordion-down relative h-full overflow-hidden text-sm",
+			children: [element && indicator && /* @__PURE__ */ jsx(TreeIndicator, { "aria-hidden": "true" }), /* @__PURE__ */ jsx(Accordion.Root, {
+				dir: direction,
+				multiple: true,
+				className: "ml-5 flex flex-col gap-1 py-1 rtl:mr-5",
+				value: expandedItems,
+				children
+			})]
+		})]
+	});
+});
+Folder.displayName = "Folder";
+const File = forwardRef(({ value, className, handleSelect, onClick, isSelectable = true, isSelect: _isSelect, fileIcon, children, ...props }, ref) => {
+	const { direction, selectItem } = useTree();
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		disabled: !isSelectable,
+		className: cn("flex w-full min-w-0 items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out rtl:pr-0 rtl:pl-1", isSelectable ? "cursor-pointer" : "cursor-not-allowed opacity-50", direction === "rtl" ? "rtl" : "ltr", className),
+		onClick: (event) => {
+			selectItem(value);
+			handleSelect?.(value);
+			onClick?.(event);
+		},
+		...props,
+		children: [fileIcon ?? /* @__PURE__ */ jsx(FileIcon, { className: "size-4" }), children]
+	});
+});
+File.displayName = "File";
+const CollapseButton = forwardRef(({ className, elements, expandAll = false, children, ...props }, ref) => {
+	const { expandedItems, setExpandedItems } = useTree();
+	const expendAllTree = useCallback((elements) => {
+		const expandedElementIds = [];
+		const expandTree = (element) => {
+			if ((element.isSelectable ?? true) && element.children && element.children.length > 0) {
+				expandedElementIds.push(element.id);
+				for (const child of element.children) expandTree(child);
+			}
+		};
+		for (const element of elements) expandTree(element);
+		return [...new Set(expandedElementIds)];
+	}, []);
+	const closeAll = useCallback(() => {
+		setExpandedItems?.([]);
+	}, [setExpandedItems]);
+	useEffect(() => {
+		if (expandAll) setExpandedItems?.(expendAllTree(elements));
+	}, [
+		expandAll,
+		elements,
+		expendAllTree,
+		setExpandedItems
+	]);
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		className: cn("absolute right-2 bottom-1 h-8 w-fit p-1", className),
+		onClick: expandedItems && expandedItems.length > 0 ? closeAll : () => setExpandedItems?.(expendAllTree(elements)),
+		ref,
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle"
+		})]
+	});
+});
+CollapseButton.displayName = "CollapseButton";
+//#endregion
+export { CollapseButton, File, Folder, Tree };
+
+//# sourceMappingURL=file-tree.js.map

package/dist/components/ui/file-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.js","names":["AccordionPrimitive"],"sources":["../../../src/components/ui/file-tree.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\n\nimport { cn } from \"#lib/utils\"\nimport { Button } from \"#components/ui/button\"\nimport { ScrollArea } from \"#components/ui/scroll-area\"\n\ntype TreeViewElement = {\n  id: string\n  name: string\n  type?: \"file\" | \"folder\"\n  isSelectable?: boolean\n  children?: TreeViewElement[]\n}\n\ntype TreeSortMode =\n  | \"default\"\n  | \"none\"\n  | ((a: TreeViewElement, b: TreeViewElement) => number)\n\ntype TreeContextProps = {\n  selectedId: string | undefined\n  expandedItems: string[] | undefined\n  indicator: boolean\n  handleExpand: (id: string) => void\n  /** Recursively expand/collapse a folder and all its descendant folders. */\n  handleExpandRecursive: (id: string) => void\n  selectItem: (id: string) => void\n  setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>\n  openIcon?: React.ReactNode\n  closeIcon?: React.ReactNode\n  direction: \"rtl\" | \"ltr\"\n}\n\nconst TreeContext = createContext<TreeContextProps | null>(null)\n\nconst useTree = () => {\n  const context = useContext(TreeContext)\n  if (!context) {\n    throw new Error(\"useTree must be used within a TreeProvider\")\n  }\n  return context\n}\n\ntype Direction = \"rtl\" | \"ltr\" | undefined\n\nconst isFolderElement = (element: TreeViewElement) => {\n  if (element.type) {\n    return element.type === \"folder\"\n  }\n\n  return Array.isArray(element.children)\n}\n\nconst mergeExpandedItems = (\n  currentItems: string[] | undefined,\n  nextItems: string[]\n) => [...new Set([...(currentItems ?? []), ...nextItems])]\n\n/**\n * Collect a folder's id and every descendant folder id (depth-first) from the\n * element tree, used to expand or collapse a whole subtree at once.\n */\nconst collectFolderSubtreeIds = (\n  elements: TreeViewElement[] | undefined,\n  rootId: string\n): string[] => {\n  if (!elements) return []\n  const result: string[] = []\n  const collect = (element: TreeViewElement) => {\n    result.push(element.id)\n    for (const child of element.children ?? []) {\n      if (isFolderElement(child)) collect(child)\n    }\n  }\n  const find = (els: TreeViewElement[]): boolean => {\n    for (const element of els) {\n      if (element.id === rootId) {\n        if (isFolderElement(element)) collect(element)\n        return true\n      }\n      if (element.children && find(element.children)) return true\n    }\n    return false\n  }\n  find(elements)\n  return result\n}\n\nconst treeCollator = new Intl.Collator(\"en\", {\n  numeric: true,\n  sensitivity: \"base\",\n})\n\nconst defaultTreeComparator = (a: TreeViewElement, b: TreeViewElement) => {\n  const aIsFolder = isFolderElement(a)\n  const bIsFolder = isFolderElement(b)\n\n  if (aIsFolder !== bIsFolder) {\n    return aIsFolder ? -1 : 1\n  }\n\n  return treeCollator.compare(a.name, b.name)\n}\n\nconst getTreeComparator = (sort: TreeSortMode) => {\n  if (sort === \"none\") {\n    return undefined\n  }\n\n  if (sort === \"default\") {\n    return defaultTreeComparator\n  }\n\n  return sort\n}\n\nconst sortTreeElements = (\n  elements: TreeViewElement[],\n  sort: TreeSortMode\n): TreeViewElement[] => {\n  const comparator = getTreeComparator(sort)\n\n  const nextElements = elements.map((element) => {\n    if (!Array.isArray(element.children)) {\n      return element\n    }\n\n    return {\n      ...element,\n      children: sortTreeElements(element.children, sort),\n    }\n  })\n\n  if (!comparator) {\n    return nextElements\n  }\n\n  return [...nextElements].sort(comparator)\n}\n\nconst renderTreeElements = (\n  elements: TreeViewElement[],\n  sort: TreeSortMode\n): React.ReactNode =>\n  sortTreeElements(elements, sort).map((element) => {\n    if (isFolderElement(element)) {\n      return (\n        <Folder\n          key={element.id}\n          value={element.id}\n          element={element.name}\n          isSelectable={element.isSelectable}\n        >\n          {Array.isArray(element.children)\n            ? renderTreeElements(element.children, sort)\n            : null}\n        </Folder>\n      )\n    }\n\n    return (\n      <File\n        key={element.id}\n        value={element.id}\n        isSelectable={element.isSelectable}\n      >\n        <span>{element.name}</span>\n      </File>\n    )\n  })\n\ntype TreeViewProps = {\n  initialSelectedId?: string\n  indicator?: boolean\n  elements?: TreeViewElement[]\n  initialExpandedItems?: string[]\n  /**\n   * Controlled expansion set re-applied whenever {@link expansionSignal}\n   * changes. Manual expand/collapse persists between signal changes, so the\n   * tree can snap to a focused subtree on selection without losing local edits.\n   */\n  expandedItems?: string[]\n  /** Identity of the current expansion intent; a change re-applies expandedItems. */\n  expansionSignal?: string\n  /**\n   * Whether the current {@link expandedItems} is a transient FOCUS (e.g. a\n   * hovered/selected subtree) rather than the baseline. On entering focus the\n   * tree snapshots the user's expansion; on leaving focus it restores that\n   * snapshot instead of the (default) controlled set, so focus never clobbers\n   * the manual expand/collapse state.\n   */\n  expansionFocused?: boolean\n  openIcon?: React.ReactNode\n  closeIcon?: React.ReactNode\n  sort?: TreeSortMode\n} & Omit<\n  AccordionPrimitive.Root.Props,\n  \"defaultValue\" | \"onValueChange\" | \"multiple\" | \"value\"\n>\n\nconst Tree = forwardRef<HTMLDivElement, TreeViewProps>(\n  (\n    {\n      className,\n      elements,\n      initialSelectedId,\n      initialExpandedItems,\n      expandedItems: controlledExpandedItems,\n      expansionSignal,\n      expansionFocused = false,\n      children,\n      indicator = true,\n      openIcon,\n      closeIcon,\n      sort = \"default\",\n      dir,\n      ...props\n    },\n    ref\n  ) => {\n    const [selectedId, setSelectedId] = useState<string | undefined>(\n      initialSelectedId\n    )\n    const [expandedItems, setExpandedItems] = useState<string[] | undefined>(\n      initialExpandedItems\n    )\n\n    const selectItem = useCallback((id: string) => {\n      setSelectedId(id)\n    }, [])\n\n    const handleExpand = useCallback((id: string) => {\n      setExpandedItems((prev) => {\n        if (prev?.includes(id)) {\n          return prev.filter((item) => item !== id)\n        }\n        return [...(prev ?? []), id]\n      })\n    }, [])\n\n    // Right-click on a folder: always open the folder itself, then toggle every\n    // DESCENDANT folder. If any descendant is currently open, collapse them all\n    // (keeping this folder open); otherwise expand the whole subtree.\n    const handleExpandRecursive = useCallback(\n      (id: string) => {\n        const descendantIds = collectFolderSubtreeIds(elements, id).filter(\n          (item) => item !== id\n        )\n        setExpandedItems((prev) => {\n          const anyExpanded = descendantIds.some((item) =>\n            prev?.includes(item)\n          )\n          if (anyExpanded) {\n            const remove = new Set(descendantIds)\n            return mergeExpandedItems(\n              (prev ?? []).filter((item) => !remove.has(item)),\n              [id]\n            )\n          }\n          return mergeExpandedItems(prev, [id, ...descendantIds])\n        })\n      },\n      [elements]\n    )\n\n    const expandSpecificTargetedElements = useCallback(\n      (elements?: TreeViewElement[], selectId?: string) => {\n        if (!elements || !selectId) return\n        const findParent = (\n          currentElement: TreeViewElement,\n          currentPath: string[] = []\n        ) => {\n          const isSelectable = currentElement.isSelectable ?? true\n          const newPath = [...currentPath, currentElement.id]\n          if (currentElement.id === selectId) {\n            if (isSelectable) {\n              setExpandedItems((prev) => mergeExpandedItems(prev, newPath))\n            } else {\n              if (newPath.includes(currentElement.id)) {\n                newPath.pop()\n                setExpandedItems((prev) => mergeExpandedItems(prev, newPath))\n              }\n            }\n            return\n          }\n          if (\n            Array.isArray(currentElement.children) &&\n            currentElement.children.length > 0\n          ) {\n            currentElement.children.forEach((child) => {\n              findParent(child, newPath)\n            })\n          }\n        }\n        elements.forEach((element) => {\n          findParent(element)\n        })\n      },\n      []\n    )\n\n    useEffect(() => {\n      if (initialSelectedId) {\n        expandSpecificTargetedElements(elements, initialSelectedId)\n      }\n    }, [initialSelectedId, elements, expandSpecificTargetedElements])\n\n    // Snapshot of the user's expansion captured just before a focus began, and\n    // a flag for whether the tree is currently in a focused state. Refs (not\n    // state) so reading them never re-runs the effect.\n    const expandedItemsRef = useRef(expandedItems)\n    expandedItemsRef.current = expandedItems\n    const preFocusRef = useRef<string[] | undefined>(undefined)\n    const wasFocusedRef = useRef(false)\n\n    // Re-apply the controlled expansion set whenever the expansion intent\n    // changes (e.g. a module/layer is selected/hovered), snapping to the focused\n    // subtree. On entering focus we snapshot the user's current expansion; on\n    // leaving focus we restore that snapshot rather than the (default) controlled\n    // set, so a transient hover/selection never clobbers manual expand/collapse.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    useEffect(() => {\n      if (expansionSignal === undefined) return\n\n      if (expansionFocused) {\n        if (!wasFocusedRef.current) {\n          preFocusRef.current = expandedItemsRef.current\n          wasFocusedRef.current = true\n        }\n        if (controlledExpandedItems) setExpandedItems(controlledExpandedItems)\n      } else if (wasFocusedRef.current) {\n        wasFocusedRef.current = false\n        setExpandedItems(preFocusRef.current)\n      } else if (controlledExpandedItems) {\n        setExpandedItems(controlledExpandedItems)\n      }\n    }, [expansionSignal])\n\n    const direction = dir === \"rtl\" ? \"rtl\" : \"ltr\"\n    const treeChildren =\n      children ?? (elements ? renderTreeElements(elements, sort) : null)\n\n    return (\n      <TreeContext.Provider\n        value={{\n          selectedId,\n          expandedItems,\n          handleExpand,\n          handleExpandRecursive,\n          selectItem,\n          setExpandedItems,\n          indicator,\n          openIcon,\n          closeIcon,\n          direction,\n        }}\n      >\n        <div className={cn(\"size-full\", className)}>\n          <ScrollArea\n            ref={ref}\n            className=\"relative h-full px-2\"\n            dir={dir as Direction}\n          >\n            <AccordionPrimitive.Root\n              {...props}\n              multiple\n              value={expandedItems}\n              className=\"flex flex-col gap-1\"\n              dir={dir as Direction}\n            >\n              {treeChildren}\n            </AccordionPrimitive.Root>\n          </ScrollArea>\n        </div>\n      </TreeContext.Provider>\n    )\n  }\n)\n\nTree.displayName = \"Tree\"\n\nconst TreeIndicator = forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { direction } = useTree()\n\n  return (\n    <div\n      dir={direction}\n      ref={ref}\n      className={cn(\n        \"bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nTreeIndicator.displayName = \"TreeIndicator\"\n\ntype FolderProps = {\n  expandedItems?: string[]\n  element: string\n  isSelectable?: boolean\n  isSelect?: boolean\n  /** Rendered after the (truncating) label, e.g. a status dot or badge. */\n  suffix?: React.ReactNode\n  /** Extra classes for the leading folder icon only (e.g. an accent color). */\n  iconClassName?: string\n} & AccordionPrimitive.Item.Props\n\nconst Folder = forwardRef<\n  HTMLDivElement,\n  FolderProps\n>(\n  (\n    {\n      className,\n      element,\n      value,\n      isSelectable = true,\n      isSelect: _isSelect,\n      suffix,\n      iconClassName,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const {\n      direction,\n      handleExpand,\n      handleExpandRecursive,\n      expandedItems,\n      indicator,\n      selectItem,\n      openIcon,\n      closeIcon,\n    } = useTree()\n\n    return (\n      <AccordionPrimitive.Item\n        ref={ref}\n        {...props}\n        value={value}\n        className=\"relative h-full overflow-hidden\"\n      >\n        <AccordionPrimitive.Header className=\"min-w-0 overflow-hidden\">\n          <AccordionPrimitive.Trigger\n            className={cn(\n              `flex w-full items-center gap-1 rounded-md text-sm min-w-0 max-w-full`,\n              className,\n              {\n                \"cursor-pointer\": isSelectable,\n                \"cursor-not-allowed opacity-50\": !isSelectable,\n              }\n            )}\n            disabled={!isSelectable}\n            onClick={() => {\n              selectItem(value)\n              handleExpand(value)\n            }}\n            onContextMenu={(event) => {\n              event.preventDefault()\n              handleExpandRecursive(value)\n            }}\n          >\n            <span className={cn(\"shrink-0\", iconClassName)}>\n              {expandedItems?.includes(value)\n                ? (openIcon ?? <FolderOpenIcon className=\"size-4\" />)\n                : (closeIcon ?? <FolderIcon className=\"size-4\" />)}\n            </span>\n            <span className=\"truncate\" title={element}>{element}</span>\n            {suffix}\n          </AccordionPrimitive.Trigger>\n        </AccordionPrimitive.Header>\n        <AccordionPrimitive.Panel className=\"data-closed:animate-accordion-up data-open:animate-accordion-down relative h-full overflow-hidden text-sm\">\n          {element && indicator && <TreeIndicator aria-hidden=\"true\" />}\n          <AccordionPrimitive.Root\n            dir={direction}\n            multiple\n            className=\"ml-5 flex flex-col gap-1 py-1 rtl:mr-5\"\n            value={expandedItems}\n          >\n            {children}\n          </AccordionPrimitive.Root>\n        </AccordionPrimitive.Panel>\n      </AccordionPrimitive.Item>\n    )\n  }\n)\n\nFolder.displayName = \"Folder\"\n\nconst File = forwardRef<\n  HTMLButtonElement,\n  {\n    value: string\n    handleSelect?: (id: string) => void\n    isSelectable?: boolean\n    isSelect?: boolean\n    fileIcon?: React.ReactNode\n  } & React.ButtonHTMLAttributes<HTMLButtonElement>\n>(\n  (\n    {\n      value,\n      className,\n      handleSelect,\n      onClick,\n      isSelectable = true,\n      isSelect: _isSelect,\n      fileIcon,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { direction, selectItem } = useTree()\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        disabled={!isSelectable}\n        className={cn(\n          \"flex w-full min-w-0 items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out rtl:pr-0 rtl:pl-1\",\n          isSelectable ? \"cursor-pointer\" : \"cursor-not-allowed opacity-50\",\n          direction === \"rtl\" ? \"rtl\" : \"ltr\",\n          className\n        )}\n        onClick={(event) => {\n          selectItem(value)\n          handleSelect?.(value)\n          onClick?.(event)\n        }}\n        {...props}\n      >\n        {fileIcon ?? <FileIcon className=\"size-4\" />}\n        {children}\n      </button>\n    )\n  }\n)\n\nFile.displayName = \"File\"\n\nconst CollapseButton = forwardRef<\n  HTMLButtonElement,\n  {\n    elements: TreeViewElement[]\n    expandAll?: boolean\n  } & React.HTMLAttributes<HTMLButtonElement>\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n  const { expandedItems, setExpandedItems } = useTree()\n\n  const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n    const expandedElementIds: string[] = []\n\n    const expandTree = (element: TreeViewElement) => {\n      const isSelectable = element.isSelectable ?? true\n      if (isSelectable && element.children && element.children.length > 0) {\n        expandedElementIds.push(element.id)\n        for (const child of element.children) {\n          expandTree(child)\n        }\n      }\n    }\n\n    for (const element of elements) {\n      expandTree(element)\n    }\n\n    return [...new Set(expandedElementIds)]\n  }, [])\n\n  const closeAll = useCallback(() => {\n    setExpandedItems?.([])\n  }, [setExpandedItems])\n\n  useEffect(() => {\n    if (expandAll) {\n      setExpandedItems?.(expendAllTree(elements))\n    }\n  }, [expandAll, elements, expendAllTree, setExpandedItems])\n\n  return (\n    <Button\n      variant={\"ghost\"}\n      className={cn(\"absolute right-2 bottom-1 h-8 w-fit p-1\", className)}\n      onClick={\n        expandedItems && expandedItems.length > 0\n          ? closeAll\n          : () => setExpandedItems?.(expendAllTree(elements))\n      }\n      ref={ref}\n      {...props}\n    >\n      {children}\n      <span className=\"sr-only\">Toggle</span>\n    </Button>\n  )\n})\n\nCollapseButton.displayName = \"CollapseButton\"\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement }\nexport type { TreeSortMode }\n"],"mappings":"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"}

package/dist/components/ui/google-button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from "react";
+//#region src/components/ui/google-button.d.ts
+type Theme = 'light' | 'dark';
+interface GoogleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  theme?: Theme;
+}
+export declare function GoogleButton({ theme, ...props }: GoogleButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=google-button.d.ts.map

package/dist/components/ui/google-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-button.d.ts","names":[],"sources":["../../../src/components/ui/google-button.tsx"],"mappings":";;KAEK;UAEK,0BAA0B,KAClC,qBAAqB;EAGrB,QAAQ;;wBA8BM,eAAe,UAAoB,SAAS,oCAAiB,IAAA"}

package/dist/components/ui/google-button.js

@@ -0,0 +1,183 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/google-button.tsx
+const GoogleIcon = () => /* @__PURE__ */ jsxs("svg", {
+	version: "1.1",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 48 48",
+	style: { display: "block" },
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "#EA4335",
+			d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#4285F4",
+			d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#FBBC05",
+			d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#34A853",
+			d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "none",
+			d: "M0 0h48v48H0z"
+		})
+	]
+});
+function GoogleButton({ theme = "light", ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `
+        .gsi-material-button {
+          -moz-user-select: none;
+          -webkit-user-select: none;
+          -ms-user-select: none;
+          -webkit-appearance: none;
+          background-image: none;
+          border: 1px solid #747775;
+          -webkit-border-radius: 4px;
+          border-radius: 4px;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          cursor: pointer;
+          font-family: 'Roboto', arial, sans-serif;
+          font-size: 14px;
+          letter-spacing: 0.25px;
+          outline: none;
+          overflow: hidden;
+          padding: 0 12px;
+          position: relative;
+          text-align: center;
+          -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
+          transition: background-color .218s, border-color .218s, box-shadow .218s;
+          vertical-align: middle;
+          white-space: nowrap;
+          width: 183px;
+          height: 40px;
+        }
+
+        .gsi-material-button--light {
+          background-color: white;
+          color: #1f1f1f;
+        }
+
+        .gsi-material-button--dark {
+          background-color: #131314;
+          color: #e3e3e3;
+          border-color: #8e918f;
+        }
+
+        .gsi-material-button .gsi-material-button-icon {
+          height: 20px;
+          margin-right: 10px;
+          min-width: 20px;
+          width: 20px;
+        }
+
+        .gsi-material-button .gsi-material-button-content-wrapper {
+          -webkit-align-items: center;
+          align-items: center;
+          display: flex;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -webkit-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+          height: 100%;
+          justify-content: space-between;
+          position: relative;
+          width: 100%;
+        }
+
+        .gsi-material-button .gsi-material-button-contents {
+          -webkit-flex-grow: 1;
+          flex-grow: 1;
+          font-family: 'Roboto', arial, sans-serif;
+          font-weight: 500;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          vertical-align: top;
+        }
+
+        .gsi-material-button .gsi-material-button-state {
+          -webkit-transition: opacity .218s;
+          transition: opacity .218s;
+          bottom: 0;
+          left: 0;
+          opacity: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+
+        .gsi-material-button--light:disabled {
+          cursor: default;
+          background-color: #ffffff61;
+          border-color: #1f1f1f1f;
+        }
+
+        .gsi-material-button--dark:disabled {
+          cursor: default;
+          background-color: #13131461;
+          border-color: #8e918f1f;
+        }
+
+        .gsi-material-button--dark:disabled .gsi-material-button-state {
+          background-color: #e3e3e31f;
+        }
+
+        .gsi-material-button:disabled .gsi-material-button-contents {
+          opacity: 38%;
+        }
+
+        .gsi-material-button:disabled .gsi-material-button-icon {
+          opacity: 38%;
+        }
+
+        .gsi-material-button--light:not(:disabled):active .gsi-material-button-state,
+        .gsi-material-button--light:not(:disabled):focus .gsi-material-button-state {
+          background-color: #303030;
+          opacity: 12%;
+        }
+
+        .gsi-material-button--dark:not(:disabled):active .gsi-material-button-state,
+        .gsi-material-button--dark:not(:disabled):focus .gsi-material-button-state {
+          background-color: white;
+          opacity: 12%;
+        }
+
+        .gsi-material-button:not(:disabled):hover {
+          -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+          box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+        }
+
+        .gsi-material-button--light:not(:disabled):hover .gsi-material-button-state {
+          background-color: #303030;
+          opacity: 8%;
+        }
+
+        .gsi-material-button--dark:not(:disabled):hover .gsi-material-button-state {
+          background-color: white;
+          opacity: 8%;
+        }
+      ` }), /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: `mx-auto gsi-material-button gsi-material-button--${theme === "dark" ? "dark" : "light"}`,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", { className: "gsi-material-button-state" }), /* @__PURE__ */ jsxs("div", {
+			className: "gsi-material-button-content-wrapper",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "gsi-material-button-icon",
+				children: /* @__PURE__ */ jsx(GoogleIcon, {})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "gsi-material-button-contents",
+				children: "Sign in with Google"
+			})]
+		})]
+	})] });
+}
+//#endregion
+export { GoogleButton };
+
+//# sourceMappingURL=google-button.js.map

package/dist/components/ui/google-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-button.js","names":[],"sources":["../../../src/components/ui/google-button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\n\ntype Theme = 'light' | 'dark';\n\ninterface GoogleButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n> {\n  theme?: Theme;\n}\n\nconst GoogleIcon = () => (\n  <svg\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 48 48\"\n    style={{ display: 'block' }}\n  >\n    <path\n      fill=\"#EA4335\"\n      d=\"M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z\"\n    />\n    <path\n      fill=\"#4285F4\"\n      d=\"M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z\"\n    />\n    <path\n      fill=\"#FBBC05\"\n      d=\"M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z\"\n    />\n    <path\n      fill=\"#34A853\"\n      d=\"M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z\"\n    />\n    <path fill=\"none\" d=\"M0 0h48v48H0z\" />\n  </svg>\n);\n\nexport function GoogleButton({ theme = 'light', ...props }: GoogleButtonProps) {\n  const isDark = theme === 'dark';\n\n  return (\n    <>\n      <style>{`\n        .gsi-material-button {\n          -moz-user-select: none;\n          -webkit-user-select: none;\n          -ms-user-select: none;\n          -webkit-appearance: none;\n          background-image: none;\n          border: 1px solid #747775;\n          -webkit-border-radius: 4px;\n          border-radius: 4px;\n          -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n          cursor: pointer;\n          font-family: 'Roboto', arial, sans-serif;\n          font-size: 14px;\n          letter-spacing: 0.25px;\n          outline: none;\n          overflow: hidden;\n          padding: 0 12px;\n          position: relative;\n          text-align: center;\n          -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;\n          transition: background-color .218s, border-color .218s, box-shadow .218s;\n          vertical-align: middle;\n          white-space: nowrap;\n          width: 183px;\n          height: 40px;\n        }\n\n        .gsi-material-button--light {\n          background-color: white;\n          color: #1f1f1f;\n        }\n\n        .gsi-material-button--dark {\n          background-color: #131314;\n          color: #e3e3e3;\n          border-color: #8e918f;\n        }\n\n        .gsi-material-button .gsi-material-button-icon {\n          height: 20px;\n          margin-right: 10px;\n          min-width: 20px;\n          width: 20px;\n        }\n\n        .gsi-material-button .gsi-material-button-content-wrapper {\n          -webkit-align-items: center;\n          align-items: center;\n          display: flex;\n          -webkit-flex-direction: row;\n          flex-direction: row;\n          -webkit-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n          height: 100%;\n          justify-content: space-between;\n          position: relative;\n          width: 100%;\n        }\n\n        .gsi-material-button .gsi-material-button-contents {\n          -webkit-flex-grow: 1;\n          flex-grow: 1;\n          font-family: 'Roboto', arial, sans-serif;\n          font-weight: 500;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          vertical-align: top;\n        }\n\n        .gsi-material-button .gsi-material-button-state {\n          -webkit-transition: opacity .218s;\n          transition: opacity .218s;\n          bottom: 0;\n          left: 0;\n          opacity: 0;\n          position: absolute;\n          right: 0;\n          top: 0;\n        }\n\n        .gsi-material-button--light:disabled {\n          cursor: default;\n          background-color: #ffffff61;\n          border-color: #1f1f1f1f;\n        }\n\n        .gsi-material-button--dark:disabled {\n          cursor: default;\n          background-color: #13131461;\n          border-color: #8e918f1f;\n        }\n\n        .gsi-material-button--dark:disabled .gsi-material-button-state {\n          background-color: #e3e3e31f;\n        }\n\n        .gsi-material-button:disabled .gsi-material-button-contents {\n          opacity: 38%;\n        }\n\n        .gsi-material-button:disabled .gsi-material-button-icon {\n          opacity: 38%;\n        }\n\n        .gsi-material-button--light:not(:disabled):active .gsi-material-button-state,\n        .gsi-material-button--light:not(:disabled):focus .gsi-material-button-state {\n          background-color: #303030;\n          opacity: 12%;\n        }\n\n        .gsi-material-button--dark:not(:disabled):active .gsi-material-button-state,\n        .gsi-material-button--dark:not(:disabled):focus .gsi-material-button-state {\n          background-color: white;\n          opacity: 12%;\n        }\n\n        .gsi-material-button:not(:disabled):hover {\n          -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);\n          box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);\n        }\n\n        .gsi-material-button--light:not(:disabled):hover .gsi-material-button-state {\n          background-color: #303030;\n          opacity: 8%;\n        }\n\n        .gsi-material-button--dark:not(:disabled):hover .gsi-material-button-state {\n          background-color: white;\n          opacity: 8%;\n        }\n      `}</style>\n      <button\n        type=\"button\"\n        className={`mx-auto gsi-material-button gsi-material-button--${isDark ? 'dark' : 'light'}`}\n        {...props}\n      >\n        <div className=\"gsi-material-button-state\" />\n        <div className=\"gsi-material-button-content-wrapper\">\n          <div className=\"gsi-material-button-icon\">\n            <GoogleIcon />\n          </div>\n          <span className=\"gsi-material-button-contents\">\n            Sign in with Google\n          </span>\n        </div>\n      </button>\n    </>\n  );\n}\n"],"mappings":";;AAWA,MAAM,mBACJ,qBAAC,OAAD;CACE,SAAQ;CACR,OAAM;CACN,SAAQ;CACR,OAAO,EAAE,SAAS,QAAQ;CAJ5B,UAAA;EAME,oBAAC,QAAD;GACE,MAAK;GACL,GAAE;EACH,CAAA;EACD,oBAAC,QAAD;GACE,MAAK;GACL,GAAE;EACH,CAAA;EACD,oBAAC,QAAD;GACE,MAAK;GACL,GAAE;EACH,CAAA;EACD,oBAAC,QAAD;GACE,MAAK;GACL,GAAE;EACH,CAAA;EACD,oBAAC,QAAD;GAAM,MAAK;GAAO,GAAE;EAAiB,CAAA;CAClC;;AAGP,SAAgB,aAAa,EAAE,QAAQ,SAAS,GAAG,SAA4B;CAG7E,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAA,UAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoIC,CAAA,GACT,qBAAC,UAAD;EACE,MAAK;EACL,WAAW,oDA3IF,UAAU,SA2IqD,SAAS;EACjF,GAAI;EAHN,UAAA,CAKE,oBAAC,OAAD,EAAK,WAAU,4BAA6B,CAAA,GAC5C,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,YAAD,CAAa,CAAA;GACV,CAAA,GACL,oBAAC,QAAD;IAAM,WAAU;IAA+B,UAAA;GAEzC,CAAA,CACH;EACC,CAAA,CAAA;CACR,CAAA,CAAA,EAAA,CAAA;AAEN"}

package/dist/components/ui/hover-card.d.ts

@@ -0,0 +1,8 @@
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.d.ts
+declare function HoverCard({ ...props }: PreviewCard.Root.Props): import("react").JSX.Element;
+declare function HoverCardTrigger({ ...props }: PreviewCard.Trigger.Props): import("react").JSX.Element;
+declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCard.Popup.Props & Pick<PreviewCard.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+//# sourceMappingURL=hover-card.d.ts.map

package/dist/components/ui/hover-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","names":["PreviewCardPrimitive"],"sources":["../../../src/components/ui/hover-card.tsx"],"mappings":";;iBAKS,eAAe,SAASA,YAAqB,KAAK,wBAAK,IAAA;iBAIvD,sBAAsB,SAASA,YAAqB,QAAQ,wBAAK,IAAA;iBAMjE,mBACP,WACA,MACA,YACA,OACA,gBACG,SACFA,YAAqB,MAAM,QAC5B,KACEA,YAAqB,WAAW,0EAEjC,IAAA"}

package/dist/components/ui/hover-card.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.tsx
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "hover-card-content",
+				className: cn("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md dark:shadow-black/60 ring-1 ring-edge outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+				...props
+			})
+		})
+	});
+}
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+
+//# sourceMappingURL=hover-card.js.map

package/dist/components/ui/hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.js","names":["PreviewCardPrimitive"],"sources":["../../../src/components/ui/hover-card.tsx"],"sourcesContent":["\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\nimport { cn } from \"cn\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md dark:shadow-black/60 ring-1 ring-edge outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"mappings":";;;;;AAKA,SAAS,UAAU,EAAE,GAAG,SAA0C;CAChE,OAAO,oBAACA,YAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,iBAAiB,EAAE,GAAG,SAA6C;CAC1E,OACE,oBAACA,YAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAE7E;AAEA,SAAS,iBAAiB,EACxB,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,GAAG,SAKA;CACH,OACE,oBAACA,YAAqB,QAAtB;EAA6B,aAAU;EACrC,UAAA,oBAACA,YAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAU;GAEV,UAAA,oBAACA,YAAqB,OAAtB;IACE,aAAU;IACV,WAAW,GACT,2iBACA,SACF;IACA,GAAI;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC"}

package/dist/components/ui/input-group.d.ts

@@ -0,0 +1,21 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/input-group.d.ts
+declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React$1.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+  size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
+  type?: "button" | "submit" | "reset";
+}): React$1.JSX.Element;
+declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/ui/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","names":["React"],"sources":["../../../src/components/ui/input-group.tsx"],"mappings":";;;;iBAUS,aAAa,cAAc,SAASA,QAAM,wBAAqBA,QAAA,IAAA;cAclE,0BAAuB;;6CAmB5B;iBAEQ,kBACP,WACA,UACG,SACFA,QAAM,wBAAwB,oBAAoB,2BAAwBA,QAAA,IAAA;cAkBvE,2BAAwB;;6CAgB7B;iBAEQ,mBACP,WACA,MACA,SACA,SACG,SACF,KAAKA,QAAM,sBAAsB,4BAClC,oBAAoB;EAClB;IACDA,QAAA,IAAA;iBAYM,iBAAiB,cAAc,SAASA,QAAM,yBAAsBA,QAAA,IAAA;iBAYpE,kBACP,cACG,SACFA,QAAM,0BAAuBA,QAAA,IAAA;iBAavB,qBACP,cACG,SACFA,QAAM,6BAA0BA,QAAA,IAAA"}