@hanzo/docs-base-ui 16.4.2

package/dist/components/dialog/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","names":[],"sources":["../../../src/components/dialog/search.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/components/dialog/search.js

@@ -0,0 +1,271 @@
+'use client';
+
+import { buttonVariants } from "../ui/button.js";
+import { i18n_exports } from "../../contexts/i18n.js";
+import { useRouter } from "@hanzo/docs-core/framework";
+import { cn } from "@hanzo/docs-ui/cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, Hash, Search } from "lucide-react";
+import { Fragment as Fragment$1, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/dialog/search.tsx
+const Context = createContext(null);
+const ListContext = createContext(null);
+const TagsListContext = createContext(null);
+function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading = false, onSelect: onSelectProp, children }) {
+	const router = useRouter();
+	const onSelect = useEffectEvent((item) => {
+		if (item.type === "action") item.onSelect();
+		else if (item.external) window.open(item.url, "_blank")?.focus();
+		else router.push(item.url);
+		onOpenChange(false);
+		onSelectProp?.(item);
+	});
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(Context.Provider, {
+			value: useMemo(() => ({
+				open,
+				onOpenChange,
+				search,
+				onSearchChange,
+				onSelect,
+				isLoading
+			}), [
+				isLoading,
+				onOpenChange,
+				onSearchChange,
+				open,
+				search
+			]),
+			children
+		})
+	});
+}
+function SearchDialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex flex-row items-center gap-2 p-3", props.className)
+	});
+}
+function SearchDialogInput(props) {
+	const { text } = (0, i18n_exports.useI18n)();
+	const { search, onSearchChange } = useSearch();
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		value: search,
+		onChange: (e) => onSearchChange(e.target.value),
+		placeholder: text.search,
+		className: "w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none"
+	});
+}
+function SearchDialogClose({ children = "ESC", className, ...props }) {
+	const { onOpenChange } = useSearch();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => onOpenChange(false),
+		className: cn(buttonVariants({
+			color: "outline",
+			size: "sm",
+			className: "font-mono text-fd-muted-foreground"
+		}), className),
+		...props,
+		children
+	});
+}
+function SearchDialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("bg-fd-secondary/50 p-3 empty:hidden", props.className)
+	});
+}
+function SearchDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		...props,
+		className: (s) => cn("fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-[open]:animate-fd-fade-in data-[closed]:animate-fd-fade-out", typeof className === "function" ? className(s) : className)
+	});
+}
+function SearchDialogContent({ children, className, ...props }) {
+	const { text } = (0, i18n_exports.useI18n)();
+	return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"aria-describedby": void 0,
+		...props,
+		className: (s) => cn("fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-[closed]:animate-fd-dialog-out data-[open]:animate-fd-dialog-in", "*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0", typeof className === "function" ? className(s) : className),
+		children: [/* @__PURE__ */ jsx(Dialog.Title, {
+			className: "hidden",
+			children: text.search
+		}), children]
+	}) });
+}
+function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div", {
+	className: "py-12 text-center text-sm text-fd-muted-foreground",
+	children: /* @__PURE__ */ jsx(i18n_exports.I18nLabel, { label: "searchNoResult" })
+}), Item = (props$1) => /* @__PURE__ */ jsx(SearchDialogListItem, { ...props$1 }), ...props }) {
+	const ref = useRef(null);
+	const { onSelect } = useSearch();
+	const [active, setActive] = useState(() => items && items.length > 0 ? items[0].id : null);
+	const onKey = useEffectEvent((e) => {
+		if (!items || e.isComposing) return;
+		if (e.key === "ArrowDown" || e.key == "ArrowUp") {
+			let idx = items.findIndex((item) => item.id === active);
+			if (idx === -1) idx = 0;
+			else if (e.key === "ArrowDown") idx++;
+			else idx--;
+			setActive(items.at(idx % items.length)?.id ?? null);
+			e.preventDefault();
+		}
+		if (e.key === "Enter") {
+			const selected = items.find((item) => item.id === active);
+			if (selected) onSelect(selected);
+			e.preventDefault();
+		}
+	});
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(() => {
+			const viewport$1 = element.firstElementChild;
+			element.style.setProperty("--fd-animated-height", `${viewport$1.clientHeight}px`);
+		});
+		const viewport = element.firstElementChild;
+		if (viewport) observer.observe(viewport);
+		window.addEventListener("keydown", onKey);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("keydown", onKey);
+		};
+	}, []);
+	useOnChange(items, () => {
+		if (items && items.length > 0) setActive(items[0].id);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"data-empty": items === null,
+		className: cn("overflow-hidden h-(--fd-animated-height) transition-[height]", props.className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("w-full flex flex-col overflow-y-auto max-h-[460px] p-1", !items && "hidden"),
+			children: /* @__PURE__ */ jsxs(ListContext.Provider, {
+				value: useMemo(() => ({
+					active,
+					setActive
+				}), [active]),
+				children: [items?.length === 0 && Empty(), items?.map((item) => /* @__PURE__ */ jsx(Fragment$1, { children: Item({
+					item,
+					onClick: () => onSelect(item)
+				}) }, item.id))]
+			})
+		})
+	});
+}
+function SearchDialogListItem({ item, className, children, renderHighlights: render = renderHighlights, ...props }) {
+	const { active: activeId, setActive } = useSearchList();
+	const active = item.id === activeId;
+	if (item.type === "action") children ??= item.node;
+	else children ??= /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "inline-flex items-center text-fd-muted-foreground text-xs empty:hidden",
+			children: item.breadcrumbs?.map((item$1, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:rotate-180" }), item$1] }, i))
+		}),
+		item.type !== "page" && /* @__PURE__ */ jsx("div", {
+			role: "none",
+			className: "absolute start-3 inset-y-0 w-px bg-fd-border"
+		}),
+		/* @__PURE__ */ jsxs("p", {
+			className: cn("min-w-0 truncate", item.type !== "page" && "ps-4", item.type === "page" || item.type === "heading" ? "font-medium" : "text-fd-popover-foreground/80"),
+			children: [item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "inline me-1 size-4 text-fd-muted-foreground" }), item.contentWithHighlights ? render(item.contentWithHighlights) : item.content]
+		})
+	] });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		ref: useCallback((element) => {
+			if (active && element) scrollIntoView(element, {
+				scrollMode: "if-needed",
+				block: "nearest",
+				boundary: element.parentElement
+			});
+		}, [active]),
+		"aria-selected": active,
+		className: cn("relative select-none px-2.5 py-2 text-start text-sm rounded-lg", active && "bg-fd-accent text-fd-accent-foreground", className),
+		onPointerMove: () => setActive(item.id),
+		...props,
+		children
+	});
+}
+function SearchDialogIcon(props) {
+	const { isLoading } = useSearch();
+	return /* @__PURE__ */ jsx(Search, {
+		...props,
+		className: cn("size-5 text-fd-muted-foreground", isLoading && "animate-pulse duration-400", props.className)
+	});
+}
+const itemVariants = cva("rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors", { variants: { active: { true: "bg-fd-accent text-fd-accent-foreground" } } });
+function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex items-center gap-1 flex-wrap", props.className),
+		children: /* @__PURE__ */ jsx(TagsListContext.Provider, {
+			value: useMemo(() => ({
+				value: tag,
+				onValueChange: onTagChange,
+				allowClear
+			}), [
+				allowClear,
+				onTagChange,
+				tag
+			]),
+			children: props.children
+		})
+	});
+}
+function TagsListItem({ value, className, ...props }) {
+	const { onValueChange, value: selectedValue, allowClear } = useTagsList();
+	const selected = value === selectedValue;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-active": selected,
+		className: cn(itemVariants({
+			active: selected,
+			className
+		})),
+		onClick: () => {
+			onValueChange(selected && allowClear ? void 0 : value);
+		},
+		tabIndex: -1,
+		...props,
+		children: props.children
+	});
+}
+function renderHighlights(highlights) {
+	return highlights.map((node, i) => {
+		if (node.styles?.highlight) return /* @__PURE__ */ jsx("span", {
+			className: "text-fd-primary underline",
+			children: node.content
+		}, i);
+		return /* @__PURE__ */ jsx(Fragment$1, { children: node.content }, i);
+	});
+}
+function useSearch() {
+	const ctx = use(Context);
+	if (!ctx) throw new Error("Missing <SearchDialog />");
+	return ctx;
+}
+function useTagsList() {
+	const ctx = use(TagsListContext);
+	if (!ctx) throw new Error("Missing <TagsList />");
+	return ctx;
+}
+function useSearchList() {
+	const ctx = use(ListContext);
+	if (!ctx) throw new Error("Missing <SearchDialogList />");
+	return ctx;
+}
+
+//#endregion
+export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, TagsList, TagsListItem, useSearch, useSearchList, useTagsList };
+//# sourceMappingURL=search.js.map

package/dist/components/dialog/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","names":["I18nLabel","props","viewport","Fragment","item","SearchIcon"],"sources":["../../../src/components/dialog/search.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight, Hash, Search as SearchIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  type ReactNode,\n  use,\n  useCallback,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { I18nLabel, useI18n } from '@/contexts/i18n';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { Dialog } from '@base-ui/react/dialog';\nimport type { HighlightedText, ReactSortedResult as BaseResultType } from '@hanzo/docs-core/search';\nimport { cva } from 'class-variance-authority';\nimport { useRouter } from '@hanzo/docs-core/framework';\nimport type { SharedProps } from '@/contexts/search';\nimport { useOnChange } from '@hanzo/docs-core/utils/use-on-change';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { buttonVariants } from '@/components/ui/button';\n\nexport type SearchItemType =\n  | (BaseResultType & {\n      external?: boolean;\n    })\n  | {\n      id: string;\n      type: 'action';\n      node: ReactNode;\n      onSelect: () => void;\n    };\n\n// needed for backward compatible since some previous guides referenced it\nexport type { SharedProps };\n\nexport interface SearchDialogProps extends SharedProps {\n  search: string;\n  onSearchChange: (v: string) => void;\n  onSelect?: (item: SearchItemType) => void;\n  isLoading?: boolean;\n\n  children: ReactNode;\n}\n\nconst Context = createContext<{\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  search: string;\n  onSearchChange: (v: string) => void;\n  onSelect: (item: SearchItemType) => void;\n  isLoading: boolean;\n} | null>(null);\n\nconst ListContext = createContext<{\n  active: string | null;\n  setActive: (v: string | null) => void;\n} | null>(null);\n\nconst TagsListContext = createContext<{\n  value?: string;\n  onValueChange: (value: string | undefined) => void;\n  allowClear: boolean;\n} | null>(null);\n\nexport function SearchDialog({\n  open,\n  onOpenChange,\n  search,\n  onSearchChange,\n  isLoading = false,\n  onSelect: onSelectProp,\n  children,\n}: SearchDialogProps) {\n  const router = useRouter();\n  const onSelect = useEffectEvent((item: SearchItemType) => {\n    if (item.type === 'action') {\n      item.onSelect();\n    } else if (item.external) {\n      window.open(item.url, '_blank')?.focus();\n    } else {\n      router.push(item.url);\n    }\n\n    onOpenChange(false);\n    onSelectProp?.(item);\n  });\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <Context.Provider\n        value={useMemo(\n          () => ({\n            open,\n            onOpenChange,\n            search,\n            onSearchChange,\n            // eslint-disable-next-line react-hooks/rules-of-hooks -- used in child components\n            onSelect,\n            isLoading,\n          }),\n          [isLoading, onOpenChange, onSearchChange, open, search],\n        )}\n      >\n        {children}\n      </Context.Provider>\n    </Dialog.Root>\n  );\n}\n\nexport function SearchDialogHeader(props: ComponentProps<'div'>) {\n  return <div {...props} className={cn('flex flex-row items-center gap-2 p-3', props.className)} />;\n}\n\nexport function SearchDialogInput(props: ComponentProps<'input'>) {\n  const { text } = useI18n();\n  const { search, onSearchChange } = useSearch();\n\n  return (\n    <input\n      {...props}\n      value={search}\n      onChange={(e) => onSearchChange(e.target.value)}\n      placeholder={text.search}\n      className=\"w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none\"\n    />\n  );\n}\n\nexport function SearchDialogClose({\n  children = 'ESC',\n  className,\n  ...props\n}: ComponentProps<'button'>) {\n  const { onOpenChange } = useSearch();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onOpenChange(false)}\n      className={cn(\n        buttonVariants({\n          color: 'outline',\n          size: 'sm',\n          className: 'font-mono text-fd-muted-foreground',\n        }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function SearchDialogFooter(props: ComponentProps<'div'>) {\n  return <div {...props} className={cn('bg-fd-secondary/50 p-3 empty:hidden', props.className)} />;\n}\n\nexport function SearchDialogOverlay({\n  className,\n  ...props\n}: ComponentProps<typeof Dialog.Backdrop>) {\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={(s) =>\n        cn(\n          'fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-[open]:animate-fd-fade-in data-[closed]:animate-fd-fade-out',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n    />\n  );\n}\n\nexport function SearchDialogContent({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Dialog.Popup>) {\n  const { text } = useI18n();\n\n  return (\n    <Dialog.Portal>\n      <Dialog.Popup\n        aria-describedby={undefined}\n        {...props}\n        className={(s) =>\n          cn(\n            'fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-[closed]:animate-fd-dialog-out data-[open]:animate-fd-dialog-in',\n            '*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0',\n            typeof className === 'function' ? className(s) : className,\n          )\n        }\n      >\n        <Dialog.Title className=\"hidden\">{text.search}</Dialog.Title>\n        {children}\n      </Dialog.Popup>\n    </Dialog.Portal>\n  );\n}\n\nexport function SearchDialogList({\n  items = null,\n  Empty = () => (\n    <div className=\"py-12 text-center text-sm text-fd-muted-foreground\">\n      <I18nLabel label=\"searchNoResult\" />\n    </div>\n  ),\n  Item = (props) => <SearchDialogListItem {...props} />,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  items: SearchItemType[] | null | undefined;\n  /**\n   * Renderer for empty list UI\n   */\n  Empty?: () => ReactNode;\n  /**\n   * Renderer for items\n   */\n  Item?: (props: { item: SearchItemType; onClick: () => void }) => ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { onSelect } = useSearch();\n  const [active, setActive] = useState<string | null>(() =>\n    items && items.length > 0 ? items[0].id : null,\n  );\n\n  const onKey = useEffectEvent((e: KeyboardEvent) => {\n    if (!items || e.isComposing) return;\n\n    if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {\n      let idx = items.findIndex((item) => item.id === active);\n      if (idx === -1) idx = 0;\n      else if (e.key === 'ArrowDown') idx++;\n      else idx--;\n\n      setActive(items.at(idx % items.length)?.id ?? null);\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter') {\n      const selected = items.find((item) => item.id === active);\n\n      if (selected) onSelect(selected);\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(() => {\n      const viewport = element.firstElementChild!;\n\n      element.style.setProperty('--fd-animated-height', `${viewport.clientHeight}px`);\n    });\n\n    const viewport = element.firstElementChild;\n    if (viewport) observer.observe(viewport);\n\n    window.addEventListener('keydown', onKey);\n    return () => {\n      observer.disconnect();\n      window.removeEventListener('keydown', onKey);\n    };\n  }, []);\n\n  useOnChange(items, () => {\n    if (items && items.length > 0) {\n      setActive(items[0].id);\n    }\n  });\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-empty={items === null}\n      className={cn(\n        'overflow-hidden h-(--fd-animated-height) transition-[height]',\n        props.className,\n      )}\n    >\n      <div\n        className={cn('w-full flex flex-col overflow-y-auto max-h-[460px] p-1', !items && 'hidden')}\n      >\n        <ListContext.Provider\n          value={useMemo(\n            () => ({\n              active,\n              setActive,\n            }),\n            [active],\n          )}\n        >\n          {items?.length === 0 && Empty()}\n\n          {items?.map((item) => (\n            <Fragment key={item.id}>{Item({ item, onClick: () => onSelect(item) })}</Fragment>\n          ))}\n        </ListContext.Provider>\n      </div>\n    </div>\n  );\n}\n\nexport function SearchDialogListItem({\n  item,\n  className,\n  children,\n  renderHighlights: render = renderHighlights,\n  ...props\n}: ComponentProps<'button'> & {\n  renderHighlights?: typeof renderHighlights;\n  item: SearchItemType;\n}) {\n  const { active: activeId, setActive } = useSearchList();\n  const active = item.id === activeId;\n\n  if (item.type === 'action') {\n    children ??= item.node;\n  } else {\n    children ??= (\n      <>\n        <div className=\"inline-flex items-center text-fd-muted-foreground text-xs empty:hidden\">\n          {item.breadcrumbs?.map((item, i) => (\n            <Fragment key={i}>\n              {i > 0 && <ChevronRight className=\"size-4 rtl:rotate-180\" />}\n              {item}\n            </Fragment>\n          ))}\n        </div>\n\n        {item.type !== 'page' && (\n          <div role=\"none\" className=\"absolute start-3 inset-y-0 w-px bg-fd-border\" />\n        )}\n        <p\n          className={cn(\n            'min-w-0 truncate',\n            item.type !== 'page' && 'ps-4',\n            item.type === 'page' || item.type === 'heading'\n              ? 'font-medium'\n              : 'text-fd-popover-foreground/80',\n          )}\n        >\n          {item.type === 'heading' && (\n            <Hash className=\"inline me-1 size-4 text-fd-muted-foreground\" />\n          )}\n          {item.contentWithHighlights ? render(item.contentWithHighlights) : item.content}\n        </p>\n      </>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      ref={useCallback(\n        (element: HTMLButtonElement | null) => {\n          if (active && element) {\n            scrollIntoView(element, {\n              scrollMode: 'if-needed',\n              block: 'nearest',\n              boundary: element.parentElement,\n            });\n          }\n        },\n        [active],\n      )}\n      aria-selected={active}\n      className={cn(\n        'relative select-none px-2.5 py-2 text-start text-sm rounded-lg',\n        active && 'bg-fd-accent text-fd-accent-foreground',\n        className,\n      )}\n      onPointerMove={() => setActive(item.id)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function SearchDialogIcon(props: ComponentProps<'svg'>) {\n  const { isLoading } = useSearch();\n\n  return (\n    <SearchIcon\n      {...props}\n      className={cn(\n        'size-5 text-fd-muted-foreground',\n        isLoading && 'animate-pulse duration-400',\n        props.className,\n      )}\n    />\n  );\n}\n\nexport interface TagsListProps extends ComponentProps<'div'> {\n  tag?: string;\n  onTagChange: (tag: string | undefined) => void;\n  allowClear?: boolean;\n}\n\nconst itemVariants = cva(\n  'rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors',\n  {\n    variants: {\n      active: {\n        true: 'bg-fd-accent text-fd-accent-foreground',\n      },\n    },\n  },\n);\n\nexport function TagsList({ tag, onTagChange, allowClear = false, ...props }: TagsListProps) {\n  return (\n    <div {...props} className={cn('flex items-center gap-1 flex-wrap', props.className)}>\n      <TagsListContext.Provider\n        value={useMemo(\n          () => ({\n            value: tag,\n            onValueChange: onTagChange,\n            allowClear,\n          }),\n          [allowClear, onTagChange, tag],\n        )}\n      >\n        {props.children}\n      </TagsListContext.Provider>\n    </div>\n  );\n}\n\nexport function TagsListItem({\n  value,\n  className,\n  ...props\n}: ComponentProps<'button'> & {\n  value: string;\n}) {\n  const { onValueChange, value: selectedValue, allowClear } = useTagsList();\n  const selected = value === selectedValue;\n\n  return (\n    <button\n      type=\"button\"\n      data-active={selected}\n      className={cn(itemVariants({ active: selected, className }))}\n      onClick={() => {\n        onValueChange(selected && allowClear ? undefined : value);\n      }}\n      tabIndex={-1}\n      {...props}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nfunction renderHighlights(highlights: HighlightedText<ReactNode>[]): ReactNode {\n  return highlights.map((node, i) => {\n    if (node.styles?.highlight) {\n      return (\n        <span key={i} className=\"text-fd-primary underline\">\n          {node.content}\n        </span>\n      );\n    }\n\n    return <Fragment key={i}>{node.content}</Fragment>;\n  });\n}\n\nexport function useSearch() {\n  const ctx = use(Context);\n  if (!ctx) throw new Error('Missing <SearchDialog />');\n  return ctx;\n}\n\nexport function useTagsList() {\n  const ctx = use(TagsListContext);\n  if (!ctx) throw new Error('Missing <TagsList />');\n  return ctx;\n}\n\nexport function useSearchList() {\n  const ctx = use(ListContext);\n  if (!ctx) throw new Error('Missing <SearchDialogList />');\n  return ctx;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDA,MAAM,UAAU,cAON,KAAK;AAEf,MAAM,cAAc,cAGV,KAAK;AAEf,MAAM,kBAAkB,cAId,KAAK;AAEf,SAAgB,aAAa,EAC3B,MACA,cACA,QACA,gBACA,YAAY,OACZ,UAAU,cACV,YACoB;CACpB,MAAM,SAAS,WAAW;CAC1B,MAAM,WAAW,gBAAgB,SAAyB;AACxD,MAAI,KAAK,SAAS,SAChB,MAAK,UAAU;WACN,KAAK,SACd,QAAO,KAAK,KAAK,KAAK,SAAS,EAAE,OAAO;MAExC,QAAO,KAAK,KAAK,IAAI;AAGvB,eAAa,MAAM;AACnB,iBAAe,KAAK;GACpB;AAEF,QACE,oBAAC,OAAO;EAAW;EAAoB;YACrC,oBAAC,QAAQ;GACP,OAAO,eACE;IACL;IACA;IACA;IACA;IAEA;IACA;IACD,GACD;IAAC;IAAW;IAAc;IAAgB;IAAM;IAAO,CACxD;GAEA;IACgB;GACP;;AAIlB,SAAgB,mBAAmB,OAA8B;AAC/D,QAAO,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,wCAAwC,MAAM,UAAU;GAAI;;AAGnG,SAAgB,kBAAkB,OAAgC;CAChE,MAAM,EAAE,oCAAkB;CAC1B,MAAM,EAAE,QAAQ,mBAAmB,WAAW;AAE9C,QACE,oBAAC;EACC,GAAI;EACJ,OAAO;EACP,WAAW,MAAM,eAAe,EAAE,OAAO,MAAM;EAC/C,aAAa,KAAK;EAClB,WAAU;GACV;;AAIN,SAAgB,kBAAkB,EAChC,WAAW,OACX,WACA,GAAG,SACwB;CAC3B,MAAM,EAAE,iBAAiB,WAAW;AAEpC,QACE,oBAAC;EACC,MAAK;EACL,eAAe,aAAa,MAAM;EAClC,WAAW,GACT,eAAe;GACb,OAAO;GACP,MAAM;GACN,WAAW;GACZ,CAAC,EACF,UACD;EACD,GAAI;EAEH;GACM;;AAIb,SAAgB,mBAAmB,OAA8B;AAC/D,QAAO,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,uCAAuC,MAAM,UAAU;GAAI;;AAGlG,SAAgB,oBAAoB,EAClC,WACA,GAAG,SACsC;AACzC,QACE,oBAAC,OAAO;EACN,GAAI;EACJ,YAAY,MACV,GACE,sHACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;GAEH;;AAIN,SAAgB,oBAAoB,EAClC,UACA,WACA,GAAG,SACmC;CACtC,MAAM,EAAE,oCAAkB;AAE1B,QACE,oBAAC,OAAO,oBACN,qBAAC,OAAO;EACN,oBAAkB;EAClB,GAAI;EACJ,YAAY,MACV,GACE,sRACA,gHACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;aAGH,oBAAC,OAAO;GAAM,WAAU;aAAU,KAAK;IAAsB,EAC5D;GACY,GACD;;AAIpB,SAAgB,iBAAiB,EAC/B,QAAQ,MACR,cACE,oBAAC;CAAI,WAAU;WACb,oBAACA,0BAAU,OAAM,mBAAmB;EAChC,EAER,QAAQ,YAAU,oBAAC,wBAAqB,GAAIC,UAAS,EACrD,GAAG,SAWF;CACD,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,CAAC,QAAQ,aAAa,eAC1B,SAAS,MAAM,SAAS,IAAI,MAAM,GAAG,KAAK,KAC3C;CAED,MAAM,QAAQ,gBAAgB,MAAqB;AACjD,MAAI,CAAC,SAAS,EAAE,YAAa;AAE7B,MAAI,EAAE,QAAQ,eAAe,EAAE,OAAO,WAAW;GAC/C,IAAI,MAAM,MAAM,WAAW,SAAS,KAAK,OAAO,OAAO;AACvD,OAAI,QAAQ,GAAI,OAAM;YACb,EAAE,QAAQ,YAAa;OAC3B;AAEL,aAAU,MAAM,GAAG,MAAM,MAAM,OAAO,EAAE,MAAM,KAAK;AACnD,KAAE,gBAAgB;;AAGpB,MAAI,EAAE,QAAQ,SAAS;GACrB,MAAM,WAAW,MAAM,MAAM,SAAS,KAAK,OAAO,OAAO;AAEzD,OAAI,SAAU,UAAS,SAAS;AAChC,KAAE,gBAAgB;;GAEpB;AAEF,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,WAAW,IAAI,qBAAqB;GACxC,MAAMC,aAAW,QAAQ;AAEzB,WAAQ,MAAM,YAAY,wBAAwB,GAAGA,WAAS,aAAa,IAAI;IAC/E;EAEF,MAAM,WAAW,QAAQ;AACzB,MAAI,SAAU,UAAS,QAAQ,SAAS;AAExC,SAAO,iBAAiB,WAAW,MAAM;AACzC,eAAa;AACX,YAAS,YAAY;AACrB,UAAO,oBAAoB,WAAW,MAAM;;IAE7C,EAAE,CAAC;AAEN,aAAY,aAAa;AACvB,MAAI,SAAS,MAAM,SAAS,EAC1B,WAAU,MAAM,GAAG,GAAG;GAExB;AAEF,QACE,oBAAC;EACC,GAAI;EACC;EACL,cAAY,UAAU;EACtB,WAAW,GACT,gEACA,MAAM,UACP;YAED,oBAAC;GACC,WAAW,GAAG,0DAA0D,CAAC,SAAS,SAAS;aAE3F,qBAAC,YAAY;IACX,OAAO,eACE;KACL;KACA;KACD,GACD,CAAC,OAAO,CACT;eAEA,OAAO,WAAW,KAAK,OAAO,EAE9B,OAAO,KAAK,SACX,oBAACC,wBAAwB,KAAK;KAAE;KAAM,eAAe,SAAS,KAAK;KAAE,CAAC,IAAvD,KAAK,GAA8D,CAClF;KACmB;IACnB;GACF;;AAIV,SAAgB,qBAAqB,EACnC,MACA,WACA,UACA,kBAAkB,SAAS,kBAC3B,GAAG,SAIF;CACD,MAAM,EAAE,QAAQ,UAAU,cAAc,eAAe;CACvD,MAAM,SAAS,KAAK,OAAO;AAE3B,KAAI,KAAK,SAAS,SAChB,cAAa,KAAK;KAElB,cACE;EACE,oBAAC;GAAI,WAAU;aACZ,KAAK,aAAa,KAAK,QAAM,MAC5B,qBAACA,yBACE,IAAI,KAAK,oBAAC,gBAAa,WAAU,0BAA0B,EAC3DC,WAFY,EAGJ,CACX;IACE;EAEL,KAAK,SAAS,UACb,oBAAC;GAAI,MAAK;GAAO,WAAU;IAAiD;EAE9E,qBAAC;GACC,WAAW,GACT,oBACA,KAAK,SAAS,UAAU,QACxB,KAAK,SAAS,UAAU,KAAK,SAAS,YAClC,gBACA,gCACL;cAEA,KAAK,SAAS,aACb,oBAAC,QAAK,WAAU,gDAAgD,EAEjE,KAAK,wBAAwB,OAAO,KAAK,sBAAsB,GAAG,KAAK;IACtE;KACH;AAIP,QACE,oBAAC;EACC,MAAK;EACL,KAAK,aACF,YAAsC;AACrC,OAAI,UAAU,QACZ,gBAAe,SAAS;IACtB,YAAY;IACZ,OAAO;IACP,UAAU,QAAQ;IACnB,CAAC;KAGN,CAAC,OAAO,CACT;EACD,iBAAe;EACf,WAAW,GACT,kEACA,UAAU,0CACV,UACD;EACD,qBAAqB,UAAU,KAAK,GAAG;EACvC,GAAI;EAEH;GACM;;AAIb,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,EAAE,cAAc,WAAW;AAEjC,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GACT,mCACA,aAAa,8BACb,MAAM,UACP;GACD;;AAUN,MAAM,eAAe,IACnB,gGACA,EACE,UAAU,EACR,QAAQ,EACN,MAAM,0CACP,EACF,EACF,CACF;AAED,SAAgB,SAAS,EAAE,KAAK,aAAa,aAAa,OAAO,GAAG,SAAwB;AAC1F,QACE,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,qCAAqC,MAAM,UAAU;YACjF,oBAAC,gBAAgB;GACf,OAAO,eACE;IACL,OAAO;IACP,eAAe;IACf;IACD,GACD;IAAC;IAAY;IAAa;IAAI,CAC/B;aAEA,MAAM;IACkB;GACvB;;AAIV,SAAgB,aAAa,EAC3B,OACA,WACA,GAAG,SAGF;CACD,MAAM,EAAE,eAAe,OAAO,eAAe,eAAe,aAAa;CACzE,MAAM,WAAW,UAAU;AAE3B,QACE,oBAAC;EACC,MAAK;EACL,eAAa;EACb,WAAW,GAAG,aAAa;GAAE,QAAQ;GAAU;GAAW,CAAC,CAAC;EAC5D,eAAe;AACb,iBAAc,YAAY,aAAa,SAAY,MAAM;;EAE3D,UAAU;EACV,GAAI;YAEH,MAAM;GACA;;AAIb,SAAS,iBAAiB,YAAqD;AAC7E,QAAO,WAAW,KAAK,MAAM,MAAM;AACjC,MAAI,KAAK,QAAQ,UACf,QACE,oBAAC;GAAa,WAAU;aACrB,KAAK;KADG,EAEJ;AAIX,SAAO,oBAACF,wBAAkB,KAAK,WAAT,EAA4B;GAClD;;AAGJ,SAAgB,YAAY;CAC1B,MAAM,MAAM,IAAI,QAAQ;AACxB,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,2BAA2B;AACrD,QAAO;;AAGT,SAAgB,cAAc;CAC5B,MAAM,MAAM,IAAI,gBAAgB;AAChC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,uBAAuB;AACjD,QAAO;;AAGT,SAAgB,gBAAgB;CAC9B,MAAM,MAAM,IAAI,YAAY;AAC5B,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+BAA+B;AACzD,QAAO"}

package/dist/components/dynamic-codeblock.d.ts

@@ -0,0 +1,32 @@
+import { CodeBlockProps } from "./codeblock.js";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+import { HighlightOptionsCommon, HighlightOptionsThemes } from "@hanzo/docs-core/highlight";
+
+//#region src/components/dynamic-codeblock.d.ts
+interface DynamicCodeblockProps {
+  lang: string;
+  code: string;
+  /**
+   * Extra props for the underlying `<CodeBlock />` component.
+   *
+   * Ignored if you defined your own `pre` component in `options.components`.
+   */
+  codeblock?: CodeBlockProps;
+  /**
+   * Wrap in React `<Suspense />` and provide a fallback.
+   *
+   * @defaultValue true
+   */
+  wrapInSuspense?: boolean;
+  options?: Omit<HighlightOptionsCommon, 'lang'> & HighlightOptionsThemes;
+}
+declare function DynamicCodeBlock({
+  lang,
+  code,
+  codeblock,
+  options,
+  wrapInSuspense
+}: DynamicCodeblockProps): react_jsx_runtime10.JSX.Element;
+//#endregion
+export { DynamicCodeBlock, DynamicCodeblockProps };
+//# sourceMappingURL=dynamic-codeblock.d.ts.map

package/dist/components/dynamic-codeblock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-codeblock.d.ts","names":[],"sources":["../../src/components/dynamic-codeblock.tsx"],"sourcesContent":[],"mappings":";;;;;UAmBiB,qBAAA;;;EAAA;;;;;EAewD,SAAA,CAAA,EAP3D,cAO2D;EAmBzD;;;;;EAKd,cAAA,CAAA,EAAA,OAAA;EACC,OAAA,CAAA,EAzBS,IAyBT,CAzBc,sBAyBd,EAAA,MAAA,CAAA,GAzBgD,sBAyBhD;;AAAqB,iBANR,gBAAA,CAMQ;EAAA,IAAA;EAAA,IAAA;EAAA,SAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAArB,qBAAqB,CAAA,EAAA,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/dynamic-codeblock.js

@@ -0,0 +1,66 @@
+'use client';
+
+import { CodeBlock, Pre } from "./codeblock.js";
+import { cn } from "@hanzo/docs-ui/cn";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, createContext, use, useDeferredValue, useId } from "react";
+import { useShiki } from "@hanzo/docs-core/highlight/client";
+
+//#region src/components/dynamic-codeblock.tsx
+const PropsContext = createContext(void 0);
+function DefaultPre(props) {
+	const extraProps = use(PropsContext);
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		...props,
+		...extraProps,
+		className: cn("my-0", props.className, extraProps?.className),
+		children: /* @__PURE__ */ jsx(Pre, { children: props.children })
+	});
+}
+function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = true }) {
+	const id = useId();
+	const shikiOptions = {
+		lang,
+		...options,
+		components: {
+			pre: DefaultPre,
+			...options?.components
+		}
+	};
+	const children = /* @__PURE__ */ jsx(PropsContext, {
+		value: codeblock,
+		children: /* @__PURE__ */ jsx(Internal, {
+			id,
+			...useDeferredValue({
+				code,
+				options: shikiOptions
+			})
+		})
+	});
+	if (wrapInSuspense) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(Placeholder, {
+			code,
+			components: shikiOptions.components
+		}),
+		children
+	});
+	return children;
+}
+function Placeholder({ code, components = {} }) {
+	const { pre: Pre$1 = "pre", code: Code = "code" } = components;
+	return /* @__PURE__ */ jsx(Pre$1, { children: /* @__PURE__ */ jsx(Code, { children: code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: line
+	}, i)) }) });
+}
+function Internal({ id, code, options }) {
+	return useShiki(code, options, [
+		id,
+		options.lang,
+		code
+	]);
+}
+
+//#endregion
+export { DynamicCodeBlock };
+//# sourceMappingURL=dynamic-codeblock.js.map

package/dist/components/dynamic-codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-codeblock.js","names":["Pre"],"sources":["../../src/components/dynamic-codeblock.tsx"],"sourcesContent":["'use client';\nimport { CodeBlock, type CodeBlockProps, Pre } from '@/components/codeblock';\nimport type {\n  HighlightOptions,\n  HighlightOptionsCommon,\n  HighlightOptionsThemes,\n} from '@hanzo/docs-core/highlight';\nimport { useShiki } from '@hanzo/docs-core/highlight/client';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport {\n  type ComponentProps,\n  createContext,\n  type FC,\n  Suspense,\n  use,\n  useDeferredValue,\n  useId,\n} from 'react';\n\nexport interface DynamicCodeblockProps {\n  lang: string;\n  code: string;\n  /**\n   * Extra props for the underlying `<CodeBlock />` component.\n   *\n   * Ignored if you defined your own `pre` component in `options.components`.\n   */\n  codeblock?: CodeBlockProps;\n  /**\n   * Wrap in React `<Suspense />` and provide a fallback.\n   *\n   * @defaultValue true\n   */\n  wrapInSuspense?: boolean;\n  options?: Omit<HighlightOptionsCommon, 'lang'> & HighlightOptionsThemes;\n}\n\nconst PropsContext = createContext<CodeBlockProps | undefined>(undefined);\n\nfunction DefaultPre(props: ComponentProps<'pre'>) {\n  const extraProps = use(PropsContext);\n\n  return (\n    <CodeBlock\n      {...props}\n      {...extraProps}\n      className={cn('my-0', props.className, extraProps?.className)}\n    >\n      <Pre>{props.children}</Pre>\n    </CodeBlock>\n  );\n}\n\nexport function DynamicCodeBlock({\n  lang,\n  code,\n  codeblock,\n  options,\n  wrapInSuspense = true,\n}: DynamicCodeblockProps) {\n  const id = useId();\n  const shikiOptions = {\n    lang,\n    ...options,\n    components: {\n      pre: DefaultPre,\n      ...options?.components,\n    },\n  } satisfies HighlightOptions;\n\n  const children = (\n    <PropsContext value={codeblock}>\n      <Internal id={id} {...useDeferredValue({ code, options: shikiOptions })} />\n    </PropsContext>\n  );\n\n  if (wrapInSuspense)\n    return (\n      <Suspense fallback={<Placeholder code={code} components={shikiOptions.components} />}>\n        {children}\n      </Suspense>\n    );\n\n  return children;\n}\n\nfunction Placeholder({\n  code,\n  components = {},\n}: {\n  code: string;\n  components: HighlightOptions['components'];\n}) {\n  const { pre: Pre = 'pre', code: Code = 'code' } = components as Record<string, FC>;\n\n  return (\n    <Pre>\n      <Code>\n        {code.split('\\n').map((line, i) => (\n          <span key={i} className=\"line\">\n            {line}\n          </span>\n        ))}\n      </Code>\n    </Pre>\n  );\n}\n\nfunction Internal({ id, code, options }: { id: string; code: string; options: HighlightOptions }) {\n  return useShiki(code, options, [id, options.lang, code]);\n}\n"],"mappings":";;;;;;;;;AAqCA,MAAM,eAAe,cAA0C,OAAU;AAEzE,SAAS,WAAW,OAA8B;CAChD,MAAM,aAAa,IAAI,aAAa;AAEpC,QACE,oBAAC;EACC,GAAI;EACJ,GAAI;EACJ,WAAW,GAAG,QAAQ,MAAM,WAAW,YAAY,UAAU;YAE7D,oBAAC,iBAAK,MAAM,WAAe;GACjB;;AAIhB,SAAgB,iBAAiB,EAC/B,MACA,MACA,WACA,SACA,iBAAiB,QACO;CACxB,MAAM,KAAK,OAAO;CAClB,MAAM,eAAe;EACnB;EACA,GAAG;EACH,YAAY;GACV,KAAK;GACL,GAAG,SAAS;GACb;EACF;CAED,MAAM,WACJ,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAa;GAAI,GAAI,iBAAiB;IAAE;IAAM,SAAS;IAAc,CAAC;IAAI;GAC9D;AAGjB,KAAI,eACF,QACE,oBAAC;EAAS,UAAU,oBAAC;GAAkB;GAAM,YAAY,aAAa;IAAc;EACjF;GACQ;AAGf,QAAO;;AAGT,SAAS,YAAY,EACnB,MACA,aAAa,EAAE,IAId;CACD,MAAM,EAAE,KAAKA,QAAM,OAAO,MAAM,OAAO,WAAW;AAElD,QACE,oBAACA,mBACC,oBAAC,kBACE,KAAK,MAAM,KAAK,CAAC,KAAK,MAAM,MAC3B,oBAAC;EAAa,WAAU;YACrB;IADQ,EAEJ,CACP,GACG,GACH;;AAIV,SAAS,SAAS,EAAE,IAAI,MAAM,WAAoE;AAChG,QAAO,SAAS,MAAM,SAAS;EAAC;EAAI,QAAQ;EAAM;EAAK,CAAC"}

package/dist/components/files.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/files.d.ts
+declare function Files({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): React.ReactElement;
+interface FileProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  icon?: ReactNode;
+}
+interface FolderProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  disabled?: boolean;
+  /**
+   * Open folder by default
+   *
+   * @defaultValue false
+   */
+  defaultOpen?: boolean;
+}
+declare function File({
+  name,
+  icon,
+  className,
+  ...rest
+}: FileProps): React.ReactElement;
+declare function Folder({
+  name,
+  defaultOpen,
+  ...props
+}: FolderProps): React.ReactElement;
+//#endregion
+export { File, FileProps, Files, Folder, FolderProps };
+//# sourceMappingURL=files.d.ts.map

package/dist/components/files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.d.ts","names":[],"sources":["../../src/components/files.tsx"],"sourcesContent":[],"mappings":";;;iBAYgB,KAAA;;;GAA+B,eAAe,kBAAkB,KAAA,CAAM;UAQrE,SAAA,SAAkB,eAAe;EARlC,IAAA,EAAA,MAAK;EAAG,IAAA,CAAA,EAUf,SAVe;;AAAuB,UAa9B,WAAA,SAAoB,cAbU,CAaK,cAbL,CAAA,CAAA;EAAiC,IAAM,EAAA,MAAA;EAAY,QAAA,CAAA,EAAA,OAAA;EAQjF;;;;;EAKA,WAAA,CAAA,EAAY,OAAA;AAa7B;AACE,iBADc,IAAA,CACd;EAAA,IAAA;EAAA,IAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAIC,SAJD,CAAA,EAIa,KAAA,CAAM,YAJnB;AACA,iBAYc,MAAA,CAZd;EAAA,IAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAY8D,WAZ9D,CAAA,EAY4E,KAAA,CAAM,YAZlF"}

package/dist/components/files.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { cn } from "@hanzo/docs-ui/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { File as File$1, Folder as Folder$1, FolderOpen } from "lucide-react";
+import { useState } from "react";
+import { cva } from "class-variance-authority";
+
+//#region src/components/files.tsx
+const itemVariants = cva("flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4");
+function Files({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("not-prose rounded-md border bg-fd-card p-2", className),
+		...props,
+		children: props.children
+	});
+}
+function File({ name, icon = /* @__PURE__ */ jsx(File$1, {}), className, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(itemVariants({ className })),
+		...rest,
+		children: [icon, name]
+	});
+}
+function Folder({ name, defaultOpen = false, ...props }) {
+	const [open, setOpen] = useState(defaultOpen);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		...props,
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: cn(itemVariants({ className: "w-full" })),
+			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder$1, {}), name]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+			className: "ms-2 flex flex-col border-l ps-2",
+			children: props.children
+		}) })]
+	});
+}
+
+//#endregion
+export { File, Files, Folder };
+//# sourceMappingURL=files.js.map

package/dist/components/files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.js","names":["FileIcon","FolderIcon"],"sources":["../../src/components/files.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';\nimport { type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';\n\nconst itemVariants = cva(\n  'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4',\n);\n\nexport function Files({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement {\n  return (\n    <div className={cn('not-prose rounded-md border bg-fd-card p-2', className)} {...props}>\n      {props.children}\n    </div>\n  );\n}\n\nexport interface FileProps extends HTMLAttributes<HTMLDivElement> {\n  name: string;\n  icon?: ReactNode;\n}\n\nexport interface FolderProps extends HTMLAttributes<HTMLDivElement> {\n  name: string;\n\n  disabled?: boolean;\n\n  /**\n   * Open folder by default\n   *\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n}\n\nexport function File({\n  name,\n  icon = <FileIcon />,\n  className,\n  ...rest\n}: FileProps): React.ReactElement {\n  return (\n    <div className={cn(itemVariants({ className }))} {...rest}>\n      {icon}\n      {name}\n    </div>\n  );\n}\n\nexport function Folder({ name, defaultOpen = false, ...props }: FolderProps): React.ReactElement {\n  const [open, setOpen] = useState(defaultOpen);\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} {...props}>\n      <CollapsibleTrigger className={cn(itemVariants({ className: 'w-full' }))}>\n        {open ? <FolderOpen /> : <FolderIcon />}\n        {name}\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <div className=\"ms-2 flex flex-col border-l ps-2\">{props.children}</div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"mappings":";;;;;;;;;;AAQA,MAAM,eAAe,IACnB,oIACD;AAED,SAAgB,MAAM,EAAE,WAAW,GAAG,SAA6D;AACjG,QACE,oBAAC;EAAI,WAAW,GAAG,8CAA8C,UAAU;EAAE,GAAI;YAC9E,MAAM;GACH;;AAsBV,SAAgB,KAAK,EACnB,MACA,OAAO,oBAACA,WAAW,EACnB,WACA,GAAG,QAC6B;AAChC,QACE,qBAAC;EAAI,WAAW,GAAG,aAAa,EAAE,WAAW,CAAC,CAAC;EAAE,GAAI;aAClD,MACA;GACG;;AAIV,SAAgB,OAAO,EAAE,MAAM,cAAc,OAAO,GAAG,SAA0C;CAC/F,MAAM,CAAC,MAAM,WAAW,SAAS,YAAY;AAE7C,QACE,qBAAC;EAAkB;EAAM,cAAc;EAAS,GAAI;aAClD,qBAAC;GAAmB,WAAW,GAAG,aAAa,EAAE,WAAW,UAAU,CAAC,CAAC;cACrE,OAAO,oBAAC,eAAa,GAAG,oBAACC,aAAa,EACtC;IACkB,EACrB,oBAAC,gCACC,oBAAC;GAAI,WAAU;aAAoC,MAAM;IAAe,GACrD;GACT"}

package/dist/components/github-info.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime22 from "react/jsx-runtime";
+import { AnchorHTMLAttributes } from "react";
+
+//#region src/components/github-info.d.ts
+declare function GithubInfo({
+  repo,
+  owner,
+  token,
+  baseUrl,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> & {
+  owner: string;
+  repo: string;
+  token?: string;
+  baseUrl?: string;
+}): Promise<react_jsx_runtime22.JSX.Element>;
+//#endregion
+export { GithubInfo };
+//# sourceMappingURL=github-info.d.ts.map

package/dist/components/github-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"github-info.d.ts","names":[],"sources":["../../src/components/github-info.tsx"],"sourcesContent":[],"mappings":";;;;iBAwCsB,UAAA;;;;;;GAMnB,qBAAqB;;;EANF,KAAA,CAAA,EAAA,MAAU;EAC9B,OAAA,CAAA,EAAA,MAAA;CACA,CAAA,EASD,OATC,CASD,mBAAA,CAAA,GAAA,CAAA,OAAA,CATC"}

package/dist/components/github-info.js

@@ -0,0 +1,68 @@
+import { cn } from "@hanzo/docs-ui/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Star } from "lucide-react";
+
+//#region src/components/github-info.tsx
+async function getRepoStarsAndForks(owner, repo, token, baseUrl = "https://api.github.com") {
+	const endpoint = `${baseUrl}/repos/${owner}/${repo}`;
+	const headers = new Headers({ "Content-Type": "application/json" });
+	if (token) headers.set("Authorization", `Bearer ${token}`);
+	const response = await fetch(endpoint, {
+		headers,
+		next: { revalidate: 60 }
+	});
+	if (!response.ok) {
+		const message = await response.text();
+		throw new Error(`Failed to fetch repository data: ${message}`);
+	}
+	const data = await response.json();
+	return {
+		stars: data.stargazers_count,
+		forks: data.forks_count
+	};
+}
+async function GithubInfo({ repo, owner, token, baseUrl, ...props }) {
+	const { stars } = await getRepoStarsAndForks(owner, repo, token, baseUrl);
+	const humanizedStars = humanizeNumber(stars);
+	return /* @__PURE__ */ jsxs("a", {
+		href: `https://github.com/${owner}/${repo}`,
+		rel: "noreferrer noopener",
+		target: "_blank",
+		...props,
+		className: cn("flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors lg:flex-row lg:items-center hover:text-fd-accent-foreground hover:bg-fd-accent", props.className),
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "flex items-center gap-2 truncate",
+			children: [
+				/* @__PURE__ */ jsxs("svg", {
+					fill: "currentColor",
+					viewBox: "0 0 24 24",
+					className: "size-3.5",
+					children: [/* @__PURE__ */ jsx("title", { children: "GitHub" }), /* @__PURE__ */ jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" })]
+				}),
+				owner,
+				"/",
+				repo
+			]
+		}), /* @__PURE__ */ jsxs("p", {
+			className: "flex text-xs items-center gap-1 text-fd-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Star, { className: "size-3" }), humanizedStars]
+		})]
+	});
+}
+/**
+* Converts a number to a human-readable string with K suffix for thousands
+* @example 1500 -> "1.5K", 1000000 -> "1000000"
+*/
+function humanizeNumber(num) {
+	if (num < 1e3) return num.toString();
+	if (num < 1e5) {
+		const value = (num / 1e3).toFixed(1);
+		return `${value.endsWith(".0") ? value.slice(0, -2) : value}K`;
+	}
+	if (num < 1e6) return `${Math.floor(num / 1e3)}K`;
+	return num.toString();
+}
+
+//#endregion
+export { GithubInfo };
+//# sourceMappingURL=github-info.js.map

package/dist/components/github-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"github-info.js","names":[],"sources":["../../src/components/github-info.tsx"],"sourcesContent":["import { cn } from '@hanzo/docs-ui/cn';\nimport { Star } from 'lucide-react';\nimport { type AnchorHTMLAttributes } from 'react';\n\nasync function getRepoStarsAndForks(\n  owner: string,\n  repo: string,\n  token?: string,\n  baseUrl: string = 'https://api.github.com',\n): Promise<{\n  stars: number;\n  forks: number;\n}> {\n  const endpoint = `${baseUrl}/repos/${owner}/${repo}`;\n  const headers = new Headers({\n    'Content-Type': 'application/json',\n  });\n\n  if (token) headers.set('Authorization', `Bearer ${token}`);\n\n  const response = await fetch(endpoint, {\n    headers,\n    next: {\n      revalidate: 60,\n    },\n  } as RequestInit);\n\n  if (!response.ok) {\n    const message = await response.text();\n\n    throw new Error(`Failed to fetch repository data: ${message}`);\n  }\n\n  const data = await response.json();\n  return {\n    stars: data.stargazers_count,\n    forks: data.forks_count,\n  };\n}\n\nexport async function GithubInfo({\n  repo,\n  owner,\n  token,\n  baseUrl,\n  ...props\n}: AnchorHTMLAttributes<HTMLAnchorElement> & {\n  owner: string;\n  repo: string;\n  token?: string;\n  baseUrl?: string;\n}) {\n  const { stars } = await getRepoStarsAndForks(owner, repo, token, baseUrl);\n  const humanizedStars = humanizeNumber(stars);\n\n  return (\n    <a\n      href={`https://github.com/${owner}/${repo}`}\n      rel=\"noreferrer noopener\"\n      target=\"_blank\"\n      {...props}\n      className={cn(\n        'flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors lg:flex-row lg:items-center hover:text-fd-accent-foreground hover:bg-fd-accent',\n        props.className,\n      )}\n    >\n      <p className=\"flex items-center gap-2 truncate\">\n        <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" className=\"size-3.5\">\n          <title>GitHub</title>\n          <path d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\" />\n        </svg>\n        {owner}/{repo}\n      </p>\n      <p className=\"flex text-xs items-center gap-1 text-fd-muted-foreground\">\n        <Star className=\"size-3\" />\n        {humanizedStars}\n      </p>\n    </a>\n  );\n}\n\n/**\n * Converts a number to a human-readable string with K suffix for thousands\n * @example 1500 -> \"1.5K\", 1000000 -> \"1000000\"\n */\nfunction humanizeNumber(num: number): string {\n  if (num < 1000) {\n    return num.toString();\n  }\n\n  if (num < 100000) {\n    // For numbers between 1,000 and 99,999, show with one decimal (e.g., 1.5K)\n    const value = (num / 1000).toFixed(1);\n    // Remove trailing .0 if present\n    const formattedValue = value.endsWith('.0') ? value.slice(0, -2) : value;\n\n    return `${formattedValue}K`;\n  }\n\n  if (num < 1000000) {\n    // For numbers between 10,000 and 999,999, show as whole K (e.g., 10K, 999K)\n    return `${Math.floor(num / 1000)}K`;\n  }\n\n  // For 1,000,000 and above, just return the number\n  return num.toString();\n}\n"],"mappings":";;;;;AAIA,eAAe,qBACb,OACA,MACA,OACA,UAAkB,0BAIjB;CACD,MAAM,WAAW,GAAG,QAAQ,SAAS,MAAM,GAAG;CAC9C,MAAM,UAAU,IAAI,QAAQ,EAC1B,gBAAgB,oBACjB,CAAC;AAEF,KAAI,MAAO,SAAQ,IAAI,iBAAiB,UAAU,QAAQ;CAE1D,MAAM,WAAW,MAAM,MAAM,UAAU;EACrC;EACA,MAAM,EACJ,YAAY,IACb;EACF,CAAgB;AAEjB,KAAI,CAAC,SAAS,IAAI;EAChB,MAAM,UAAU,MAAM,SAAS,MAAM;AAErC,QAAM,IAAI,MAAM,oCAAoC,UAAU;;CAGhE,MAAM,OAAO,MAAM,SAAS,MAAM;AAClC,QAAO;EACL,OAAO,KAAK;EACZ,OAAO,KAAK;EACb;;AAGH,eAAsB,WAAW,EAC/B,MACA,OACA,OACA,SACA,GAAG,SAMF;CACD,MAAM,EAAE,UAAU,MAAM,qBAAqB,OAAO,MAAM,OAAO,QAAQ;CACzE,MAAM,iBAAiB,eAAe,MAAM;AAE5C,QACE,qBAAC;EACC,MAAM,sBAAsB,MAAM,GAAG;EACrC,KAAI;EACJ,QAAO;EACP,GAAI;EACJ,WAAW,GACT,uKACA,MAAM,UACP;aAED,qBAAC;GAAE,WAAU;;IACX,qBAAC;KAAI,MAAK;KAAe,SAAQ;KAAY,WAAU;gBACrD,oBAAC,qBAAM,WAAc,EACrB,oBAAC,UAAK,GAAE,6sBAA6sB;MACjtB;IACL;IAAM;IAAE;;IACP,EACJ,qBAAC;GAAE,WAAU;cACX,oBAAC,QAAK,WAAU,WAAW,EAC1B;IACC;GACF;;;;;;AAQR,SAAS,eAAe,KAAqB;AAC3C,KAAI,MAAM,IACR,QAAO,IAAI,UAAU;AAGvB,KAAI,MAAM,KAAQ;EAEhB,MAAM,SAAS,MAAM,KAAM,QAAQ,EAAE;AAIrC,SAAO,GAFgB,MAAM,SAAS,KAAK,GAAG,MAAM,MAAM,GAAG,GAAG,GAAG,MAE1C;;AAG3B,KAAI,MAAM,IAER,QAAO,GAAG,KAAK,MAAM,MAAM,IAAK,CAAC;AAInC,QAAO,IAAI,UAAU"}

package/dist/components/heading.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from "react";
+
+//#region src/components/heading.d.ts
+type Types = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingProps<T extends Types> = Omit<ComponentPropsWithoutRef<T>, 'as'> & {
+  as?: T;
+};
+declare function Heading<T extends Types = 'h1'>({
+  as,
+  className,
+  ...props
+}: HeadingProps<T>): React.ReactElement;
+//#endregion
+export { Heading };
+//# sourceMappingURL=heading.d.ts.map