opin-ui 0.0.1

package/dist/components/dialog/search-algolia.js

@@ -0,0 +1,64 @@
+"use client";
+import { useI18n } from "../../contexts/i18n.js";
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import { algoliaClient } from "fumadocs-core/search/client/algolia";
+//#region src/components/dialog/search-algolia.tsx
+function AlgoliaSearchDialog({ searchOptions, tags = [], defaultTag, showAlgolia = false, allowClear = false, links = [], footer, ...props }) {
+	const [tag, setTag] = useState(defaultTag);
+	const { locale } = useI18n();
+	const { search, setSearch, query } = useDocsSearch({ client: algoliaClient({
+		tag,
+		locale,
+		...searchOptions
+	}) });
+	const defaultItems = useMemo(() => {
+		if (links.length === 0) return null;
+		return links.map(([name, link]) => ({
+			type: "page",
+			id: name,
+			content: name,
+			url: link
+		}));
+	}, [links]);
+	useOnChange(defaultTag, (v) => {
+		setTag(v);
+	});
+	const label = showAlgolia && /* @__PURE__ */ jsx(AlgoliaTitle, {});
+	return /* @__PURE__ */ jsxs(SearchDialog, {
+		search,
+		onSearchChange: setSearch,
+		isLoading: query.isLoading,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SearchDialogOverlay, {}),
+			/* @__PURE__ */ jsxs(SearchDialogContent, { children: [/* @__PURE__ */ jsxs(SearchDialogHeader, { children: [
+				/* @__PURE__ */ jsx(SearchDialogIcon, {}),
+				/* @__PURE__ */ jsx(SearchDialogInput, {}),
+				/* @__PURE__ */ jsx(SearchDialogClose, {})
+			] }), /* @__PURE__ */ jsx(SearchDialogList, { items: query.data !== "empty" ? query.data : defaultItems })] }),
+			/* @__PURE__ */ jsxs(SearchDialogFooter, { children: [tags.length > 0 ? /* @__PURE__ */ jsxs(TagsList, {
+				tag,
+				onTagChange: setTag,
+				allowClear,
+				children: [tags.map((tag) => /* @__PURE__ */ jsx(TagsListItem, {
+					value: tag.value,
+					children: tag.name
+				}, tag.value)), label]
+			}) : label, footer] })
+		]
+	});
+}
+function AlgoliaTitle() {
+	return /* @__PURE__ */ jsx("a", {
+		href: "https://algolia.com",
+		rel: "noreferrer noopener",
+		className: "ms-auto text-xs text-fd-muted-foreground",
+		children: "Search powered by Algolia"
+	});
+}
+//#endregion
+export { AlgoliaSearchDialog as default };

package/dist/components/dialog/search-default.d.ts

@@ -0,0 +1,36 @@
+import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
+import { ReactNode } from "react";
+
+//#region src/components/dialog/search-default.d.ts
+interface DefaultSearchDialogProps extends SharedProps {
+  links?: SearchLink[];
+  defaultTag?: string;
+  tags?: TagItem[];
+  /**
+   * Search API URL
+   */
+  api?: string;
+  /**
+   * The debounced delay for performing a search.
+   */
+  delayMs?: number;
+  footer?: ReactNode;
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+declare function DefaultSearchDialog({
+  defaultTag,
+  tags,
+  api,
+  delayMs,
+  allowClear,
+  links,
+  footer,
+  ...props
+}: DefaultSearchDialogProps): import("react").JSX.Element;
+//#endregion
+export { DefaultSearchDialogProps, DefaultSearchDialog as default };

package/dist/components/dialog/search-default.js

@@ -0,0 +1,58 @@
+"use client";
+import { useI18n } from "../../contexts/i18n.js";
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import { fetchClient } from "fumadocs-core/search/client/fetch";
+//#region src/components/dialog/search-default.tsx
+function DefaultSearchDialog({ defaultTag, tags = [], api, delayMs, allowClear = false, links = [], footer, ...props }) {
+	const { locale } = useI18n();
+	const [tag, setTag] = useState(defaultTag);
+	const { search, setSearch, query } = useDocsSearch({
+		client: fetchClient({
+			api,
+			locale,
+			tag
+		}),
+		delayMs
+	});
+	const defaultItems = useMemo(() => {
+		if (links.length === 0) return null;
+		return links.map(([name, link]) => ({
+			type: "page",
+			id: name,
+			content: name,
+			url: link
+		}));
+	}, [links]);
+	useOnChange(defaultTag, (v) => {
+		setTag(v);
+	});
+	return /* @__PURE__ */ jsxs(SearchDialog, {
+		search,
+		onSearchChange: setSearch,
+		isLoading: query.isLoading,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SearchDialogOverlay, {}),
+			/* @__PURE__ */ jsxs(SearchDialogContent, { children: [/* @__PURE__ */ jsxs(SearchDialogHeader, { children: [
+				/* @__PURE__ */ jsx(SearchDialogIcon, {}),
+				/* @__PURE__ */ jsx(SearchDialogInput, {}),
+				/* @__PURE__ */ jsx(SearchDialogClose, {})
+			] }), /* @__PURE__ */ jsx(SearchDialogList, { items: query.data !== "empty" ? query.data : defaultItems })] }),
+			/* @__PURE__ */ jsxs(SearchDialogFooter, { children: [tags.length > 0 && /* @__PURE__ */ jsx(TagsList, {
+				tag,
+				onTagChange: setTag,
+				allowClear,
+				children: tags.map((tag) => /* @__PURE__ */ jsx(TagsListItem, {
+					value: tag.value,
+					children: tag.name
+				}, tag.value))
+			}), footer] })
+		]
+	});
+}
+//#endregion
+export { DefaultSearchDialog as default };

package/dist/components/dialog/search-orama.d.ts

@@ -0,0 +1,43 @@
+import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
+import { ReactNode } from "react";
+import { OramaCloudOptions } from "fumadocs-core/search/client";
+
+//#region src/components/dialog/search-orama.d.ts
+interface OramaSearchDialogProps extends SharedProps {
+  links?: SearchLink[];
+  client: OramaCloudOptions['client'];
+  searchOptions?: OramaCloudOptions['params'];
+  index?: OramaCloudOptions['index'];
+  footer?: ReactNode;
+  defaultTag?: string;
+  tags?: TagItem[];
+  /**
+   * Add the "Powered by Orama" label
+   *
+   * @defaultValue true
+   */
+  showOrama?: boolean;
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+/**
+ * Orama Cloud integration
+ */
+declare function OramaSearchDialog({
+  client,
+  searchOptions,
+  tags,
+  defaultTag,
+  showOrama,
+  allowClear,
+  index,
+  footer,
+  links,
+  ...props
+}: OramaSearchDialogProps): import("react").JSX.Element;
+//#endregion
+export { OramaSearchDialogProps, OramaSearchDialog as default };

package/dist/components/dialog/search-orama.js

@@ -0,0 +1,69 @@
+"use client";
+import { useI18n } from "../../contexts/i18n.js";
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import { oramaCloudClient } from "fumadocs-core/search/client/orama-cloud";
+//#region src/components/dialog/search-orama.tsx
+/**
+* Orama Cloud integration
+*/
+function OramaSearchDialog({ client, searchOptions, tags = [], defaultTag, showOrama = true, allowClear = false, index, footer, links = [], ...props }) {
+	const { locale } = useI18n();
+	const [tag, setTag] = useState(defaultTag);
+	const { search, setSearch, query } = useDocsSearch({ client: oramaCloudClient({
+		client,
+		index,
+		params: searchOptions,
+		locale,
+		tag
+	}) });
+	const defaultItems = useMemo(() => {
+		if (links.length === 0) return null;
+		return links.map(([name, link]) => ({
+			type: "page",
+			id: name,
+			content: name,
+			url: link
+		}));
+	}, [links]);
+	useOnChange(defaultTag, (v) => {
+		setTag(v);
+	});
+	const label = showOrama && /* @__PURE__ */ jsx(Label, {});
+	return /* @__PURE__ */ jsxs(SearchDialog, {
+		search,
+		onSearchChange: setSearch,
+		isLoading: query.isLoading,
+		...props,
+		children: [/* @__PURE__ */ jsx(SearchDialogOverlay, {}), /* @__PURE__ */ jsxs(SearchDialogContent, { children: [
+			/* @__PURE__ */ jsxs(SearchDialogHeader, { children: [
+				/* @__PURE__ */ jsx(SearchDialogIcon, {}),
+				/* @__PURE__ */ jsx(SearchDialogInput, {}),
+				/* @__PURE__ */ jsx(SearchDialogClose, {})
+			] }),
+			/* @__PURE__ */ jsx(SearchDialogList, { items: query.data !== "empty" ? query.data : defaultItems }),
+			/* @__PURE__ */ jsxs(SearchDialogFooter, { children: [tags.length > 0 ? /* @__PURE__ */ jsxs(TagsList, {
+				tag,
+				onTagChange: setTag,
+				allowClear,
+				children: [tags.map((tag) => /* @__PURE__ */ jsx(TagsListItem, {
+					value: tag.value,
+					children: tag.name
+				}, tag.value)), label]
+			}) : label, footer] })
+		] })]
+	});
+}
+function Label() {
+	return /* @__PURE__ */ jsx("a", {
+		href: "https://orama.com",
+		rel: "noreferrer noopener",
+		className: "ms-auto text-xs text-fd-muted-foreground",
+		children: "Search powered by Orama"
+	});
+}
+//#endregion
+export { OramaSearchDialog as default };

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

@@ -0,0 +1,112 @@
+import { SharedProps } from "../../contexts/search.js";
+import { ComponentProps, ReactNode } from "react";
+import { DialogContent, DialogOverlay } from "@radix-ui/react-dialog";
+import { HighlightedText, ReactSortedResult } from "fumadocs-core/search";
+
+//#region src/components/dialog/search.d.ts
+type SearchItemType = (ReactSortedResult & {
+  external?: boolean;
+}) | {
+  id: string;
+  type: 'action';
+  node: ReactNode;
+  onSelect: () => void;
+};
+interface SearchDialogProps extends SharedProps {
+  search: string;
+  onSearchChange: (v: string) => void;
+  onSelect?: (item: SearchItemType) => void;
+  isLoading?: boolean;
+  children: ReactNode;
+}
+declare function SearchDialog({
+  open,
+  onOpenChange,
+  search,
+  onSearchChange,
+  isLoading,
+  onSelect: onSelectProp,
+  children
+}: SearchDialogProps): import("react").JSX.Element;
+declare function SearchDialogHeader(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function SearchDialogInput(props: ComponentProps<'input'>): import("react").JSX.Element;
+declare function SearchDialogClose({
+  children,
+  className,
+  ...props
+}: ComponentProps<'button'>): import("react").JSX.Element;
+declare function SearchDialogFooter(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function SearchDialogOverlay(props: ComponentProps<typeof DialogOverlay>): import("react").JSX.Element;
+declare function SearchDialogContent({
+  children,
+  ...props
+}: ComponentProps<typeof DialogContent>): import("react").JSX.Element;
+declare function SearchDialogList({
+  items,
+  Empty,
+  Item,
+  ...props
+}: Omit<ComponentProps<'div'>, 'children'> & {
+  items: SearchItemType[] | null | undefined;
+  /**
+   * Renderer for empty list UI
+   */
+  Empty?: () => ReactNode;
+  /**
+   * Renderer for items
+   */
+  Item?: (props: {
+    item: SearchItemType;
+    onClick: () => void;
+  }) => ReactNode;
+}): import("react").JSX.Element;
+declare function SearchDialogListItem({
+  item,
+  className,
+  children,
+  renderMarkdown,
+  renderHighlights: _,
+  ...props
+}: ComponentProps<'button'> & {
+  renderMarkdown?: (v: string) => ReactNode; /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */
+  renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;
+  item: SearchItemType;
+}): import("react").JSX.Element;
+declare function SearchDialogIcon(props: ComponentProps<'svg'>): import("react").JSX.Element;
+interface TagsListProps extends ComponentProps<'div'> {
+  tag?: string;
+  onTagChange: (tag: string | undefined) => void;
+  allowClear?: boolean;
+}
+declare function TagsList({
+  tag,
+  onTagChange,
+  allowClear,
+  ...props
+}: TagsListProps): import("react").JSX.Element;
+declare function TagsListItem({
+  value,
+  className,
+  ...props
+}: ComponentProps<'button'> & {
+  value: string;
+}): import("react").JSX.Element;
+declare function useSearch(): {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  search: string;
+  onSearchChange: (v: string) => void;
+  onSelect: (item: SearchItemType) => void;
+  isLoading: boolean;
+};
+declare function useTagsList(): {
+  value?: string;
+  onValueChange: (value: string | undefined) => void;
+  allowClear: boolean;
+};
+declare function useSearchList(): {
+  active: string | null;
+  setActive: (v: string | null) => void;
+};
+//#endregion
+export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, SearchDialogProps, SearchItemType, type SharedProps, TagsList, TagsListItem, TagsListProps, useSearch, useSearchList, useTagsList };