@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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

@@ -1,9 +1,16 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { Search } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import {
   CommandDialog,
   CommandEmpty,
@@ -11,7 +18,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList
-} from "../command";
+} from "../command/command";
 function useKeyboardShortcut(callback) {
   useEffect(() => {
     const down = (event) => {
@@ -32,71 +39,497 @@ function useKeyboardShortcut(callback) {
     };
   }, [callback]);
 }
-function SearchDialog({
-  buttonText = "Search...",
-  buttonTextMobile = "Search...",
-  emptyText = "No results found.",
-  enableKeyboardShortcut = true,
+const DEFAULT_SCOPE_LABELS = {
+  components: "Components",
+  docs: "Docs",
+  everything: "Everything"
+};
+function getItemValue(item) {
+  return [
+    item.title,
+    item.description,
+    item.snippet,
+    item.keywords,
+    item.href,
+    item.id
+  ].filter(Boolean).join(" ");
+}
+function HighlightedText({ query, text }) {
+  const trimmedQuery = query.trim();
+  if (!trimmedQuery) {
+    return text;
+  }
+  const index = text.toLowerCase().indexOf(trimmedQuery.toLowerCase());
+  if (index === -1) {
+    return text;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    text.slice(0, index),
+    /* @__PURE__ */ jsx("mark", { className: "rounded bg-primary/15 px-0.5 text-foreground", children: text.slice(index, index + trimmedQuery.length) }),
+    text.slice(index + trimmedQuery.length)
+  ] });
+}
+function ScopeTabs({
+  getTabId,
+  labels,
+  onScopeChange,
+  panelId,
+  scope
+}) {
+  const scopes = ["components", "docs", "everything"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Search scope",
+      className: "grid grid-cols-3 gap-1 border-b p-1",
+      role: "tablist",
+      children: scopes.map((nextScope) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-controls": panelId,
+          "aria-selected": scope === nextScope,
+          className: cn(
+            "h-8 rounded-sm px-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+            scope === nextScope && "bg-accent text-accent-foreground"
+          ),
+          id: getTabId(nextScope),
+          onClick: () => {
+            onScopeChange(nextScope);
+          },
+          role: "tab",
+          type: "button",
+          children: labels[nextScope]
+        },
+        nextScope
+      ))
+    }
+  );
+}
+function SearchResultContent({
+  item,
+  query
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: item.title }),
+    item.snippet ? /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground", children: /* @__PURE__ */ jsx(HighlightedText, { query, text: item.snippet }) }) : item.description ? /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground", children: item.description }) : null
+  ] });
+}
+function SearchTriggerButton({
+  buttonText,
+  buttonTextMobile,
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn(
+        "relative h-9 w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
+      ),
+      onClick: onOpen,
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ jsx(Search, { className: "mr-2 size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden lg:inline-flex", children: buttonText ?? "Search..." }),
+        /* @__PURE__ */ jsx("span", { className: "inline-flex lg:hidden", children: buttonTextMobile ?? "Search..." }),
+        /* @__PURE__ */ jsxs("kbd", { className: "pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
+          "K"
+        ] })
+      ]
+    }
+  );
+}
+function ComponentResultsGroup({
   groupHeading,
+  hasDocumentationSearch,
   items,
+  labels,
   onSelect,
-  searchPlaceholder = "Search..."
+  query
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandGroup,
+    {
+      heading: groupHeading ?? (hasDocumentationSearch ? labels.components : void 0),
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        CommandItem,
+        {
+          onSelect: () => {
+            onSelect(item);
+          },
+          value: getItemValue(item),
+          children: /* @__PURE__ */ jsx(SearchResultContent, { item, query })
+        },
+        item.id
+      ))
+    }
+  );
+}
+function DocumentationStatusItem({
+  documentationSearchLength,
+  trimmedQuery
+}) {
+  return /* @__PURE__ */ jsx(CommandItem, { disabled: true, value: `${trimmedQuery} search-docs-min-length`, children: /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+    "Type at least ",
+    documentationSearchLength,
+    " characters to search docs."
+  ] }) });
+}
+function DocumentationLoadingItem({ trimmedQuery }) {
+  return /* @__PURE__ */ jsx(CommandItem, { disabled: true, value: `${trimmedQuery} searching-docs`, children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Searching docs..." }) });
+}
+function DocumentationResultsGroup({
+  docsGroupHeading,
+  documentationItems,
+  documentationLoading,
+  documentationSearchLength,
+  onSelect,
+  query,
+  scope,
+  trimmedQuery
+}) {
+  const showMinimumLengthPrompt = scope === "docs" && trimmedQuery.length < documentationSearchLength;
+  const showDocumentationItems = !documentationLoading && trimmedQuery.length >= documentationSearchLength;
+  return /* @__PURE__ */ jsxs(CommandGroup, { heading: docsGroupHeading ?? "Docs", children: [
+    showMinimumLengthPrompt ? /* @__PURE__ */ jsx(
+      DocumentationStatusItem,
+      {
+        documentationSearchLength,
+        trimmedQuery
+      }
+    ) : null,
+    documentationLoading ? /* @__PURE__ */ jsx(DocumentationLoadingItem, { trimmedQuery }) : null,
+    showDocumentationItems ? documentationItems.map((item) => /* @__PURE__ */ jsx(
+      CommandItem,
+      {
+        onSelect: () => {
+          onSelect(item);
+        },
+        value: getItemValue(item),
+        children: /* @__PURE__ */ jsx(SearchResultContent, { item, query })
+      },
+      item.id
+    )) : null
+  ] });
+}
+function SearchDialogList({
+  activeTabId,
+  currentEmptyText,
+  docsGroupHeading,
+  documentationItems,
+  documentationLoading,
+  documentationSearchLength,
+  groupHeading,
+  hasDocumentationSearch,
+  labels,
+  onComponentSelect,
+  onDocumentationSelect,
+  panelId,
+  query,
+  scope,
+  showComponents,
+  showDocumentation,
+  sortedItems,
+  trimmedQuery
+}) {
+  return /* @__PURE__ */ jsxs(
+    CommandList,
+    {
+      "aria-labelledby": activeTabId,
+      className: "max-h-[420px]",
+      id: panelId,
+      role: activeTabId === void 0 ? void 0 : "tabpanel",
+      children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: currentEmptyText }),
+        showComponents ? /* @__PURE__ */ jsx(
+          ComponentResultsGroup,
+          {
+            groupHeading,
+            hasDocumentationSearch,
+            items: sortedItems,
+            labels,
+            onSelect: onComponentSelect,
+            query
+          }
+        ) : null,
+        showDocumentation ? /* @__PURE__ */ jsx(
+          DocumentationResultsGroup,
+          {
+            docsGroupHeading,
+            documentationItems,
+            documentationLoading,
+            documentationSearchLength,
+            onSelect: onDocumentationSelect,
+            query,
+            scope,
+            trimmedQuery
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function useDocumentationSearch({
+  docsSearch,
+  minDocsSearchLength
+}) {
+  const [documentationItems, setDocumentationItems] = useState(
+    []
+  );
+  const [documentationLoading, setDocumentationLoading] = useState(false);
+  const activeDocumentationRequest = useRef(0);
+  const documentationSearchLength = minDocsSearchLength ?? 2;
+  const runDocumentationSearch = useCallback(
+    (nextQuery, nextScope) => {
+      const nextTrimmedQuery = nextQuery.trim();
+      const nextRequest = activeDocumentationRequest.current + 1;
+      activeDocumentationRequest.current = nextRequest;
+      if (!docsSearch || nextScope === "components" || nextTrimmedQuery.length < documentationSearchLength) {
+        setDocumentationItems([]);
+        setDocumentationLoading(false);
+        return;
+      }
+      setDocumentationLoading(true);
+      docsSearch(nextTrimmedQuery).then((results) => {
+        if (activeDocumentationRequest.current === nextRequest) {
+          setDocumentationItems(results);
+        }
+      }).catch(() => {
+        if (activeDocumentationRequest.current === nextRequest) {
+          setDocumentationItems([]);
+        }
+      }).finally(() => {
+        if (activeDocumentationRequest.current === nextRequest) {
+          setDocumentationLoading(false);
+        }
+      });
+    },
+    [docsSearch, documentationSearchLength]
+  );
+  return {
+    documentationItems,
+    documentationLoading,
+    documentationSearchLength,
+    hasDocumentationSearch: docsSearch !== void 0,
+    runDocumentationSearch
+  };
+}
+function useSearchDialogHandlers({
+  enableKeyboardShortcut,
+  onDocsSelect,
+  onSelect,
+  runDocumentationSearch
 }) {
   const [open, setOpen] = useState(false);
-  const sortedItems = [...items].sort((a, b) => a.title.localeCompare(b.title));
-  useKeyboardShortcut(() => {
-    if (enableKeyboardShortcut) {
+  const [query, setQuery] = useState("");
+  const [scope, setScope] = useState("components");
+  const toggleOpen = useCallback(() => {
+    if (enableKeyboardShortcut ?? true) {
       setOpen((previous) => !previous);
     }
-  });
-  const handleSelect = (item) => {
-    setOpen(false);
-    onSelect(item);
+  }, [enableKeyboardShortcut]);
+  useKeyboardShortcut(toggleOpen);
+  const handleQueryChange = useCallback(
+    (nextQuery) => {
+      setQuery(nextQuery);
+      runDocumentationSearch(nextQuery, scope);
+    },
+    [runDocumentationSearch, scope]
+  );
+  const handleScopeChange = useCallback(
+    (nextScope) => {
+      setScope(nextScope);
+      runDocumentationSearch(query, nextScope);
+    },
+    [query, runDocumentationSearch]
+  );
+  const handleOpenChange = useCallback(
+    (nextOpen) => {
+      setOpen(nextOpen);
+      if (nextOpen) {
+        runDocumentationSearch(query, scope);
+      }
+    },
+    [query, runDocumentationSearch, scope]
+  );
+  const handleComponentSelect = useCallback(
+    (item) => {
+      setOpen(false);
+      onSelect(item);
+    },
+    [onSelect]
+  );
+  const handleDocumentationSelect = useCallback(
+    (item) => {
+      setOpen(false);
+      (onDocsSelect ?? onSelect)(item);
+    },
+    [onDocsSelect, onSelect]
+  );
+  return {
+    handleComponentSelect,
+    handleDocumentationSelect,
+    handleOpenChange,
+    handleQueryChange,
+    handleScopeChange,
+    open,
+    query,
+    scope
   };
+}
+function getCurrentEmptyText({
+  docsEmptyText,
+  documentationSearchLength,
+  emptyText,
+  scope,
+  trimmedQuery
+}) {
+  if (scope === "docs" && trimmedQuery.length < documentationSearchLength) {
+    return `Type at least ${documentationSearchLength} characters to search docs.`;
+  }
+  if (scope === "docs") {
+    return docsEmptyText ?? "No docs found.";
+  }
+  return emptyText ?? "No results found.";
+}
+function SearchDialogView({
+  buttonText,
+  buttonTextMobile,
+  currentEmptyText,
+  docsGroupHeading,
+  documentationSearch,
+  groupHeading,
+  handlers,
+  labels,
+  searchPlaceholder,
+  showDocumentation,
+  sortedItems,
+  trimmedQuery
+}) {
+  const baseId = useId();
+  const getTabId = (s) => `${baseId}-tab-${s}`;
+  const panelId = `${baseId}-panel`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SearchTriggerButton,
+      {
+        buttonText,
+        buttonTextMobile,
+        onOpen: () => {
+          handlers.handleOpenChange(true);
+        }
+      }
+    ),
     /* @__PURE__ */ jsxs(
-      Button,
+      CommandDialog,
       {
-        className: cn(
-          "relative h-9 w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
-        ),
-        onClick: () => {
-          setOpen(true);
-        },
-        variant: "outline",
+        onOpenChange: handlers.handleOpenChange,
+        open: handlers.open,
         children: [
-          /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "hidden lg:inline-flex", children: buttonText }),
-          /* @__PURE__ */ jsx("span", { className: "inline-flex lg:hidden", children: buttonTextMobile }),
-          /* @__PURE__ */ jsxs("kbd", { className: "pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
-            "K"
-          ] })
+          /* @__PURE__ */ jsx(
+            CommandInput,
+            {
+              onValueChange: handlers.handleQueryChange,
+              placeholder: searchPlaceholder ?? "Search...",
+              value: handlers.query
+            }
+          ),
+          documentationSearch.hasDocumentationSearch ? /* @__PURE__ */ jsx(
+            ScopeTabs,
+            {
+              getTabId,
+              labels,
+              onScopeChange: handlers.handleScopeChange,
+              panelId,
+              scope: handlers.scope
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            SearchDialogList,
+            {
+              activeTabId: documentationSearch.hasDocumentationSearch ? getTabId(handlers.scope) : void 0,
+              currentEmptyText,
+              docsGroupHeading,
+              documentationItems: documentationSearch.documentationItems,
+              documentationLoading: documentationSearch.documentationLoading,
+              documentationSearchLength: documentationSearch.documentationSearchLength,
+              groupHeading,
+              hasDocumentationSearch: documentationSearch.hasDocumentationSearch,
+              labels,
+              onComponentSelect: handlers.handleComponentSelect,
+              onDocumentationSelect: handlers.handleDocumentationSelect,
+              panelId: documentationSearch.hasDocumentationSearch ? panelId : void 0,
+              query: handlers.query,
+              scope: handlers.scope,
+              showComponents: handlers.scope !== "docs",
+              showDocumentation,
+              sortedItems,
+              trimmedQuery
+            }
+          )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxs(CommandDialog, { onOpenChange: setOpen, open, children: [
-      /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
-      /* @__PURE__ */ jsxs(CommandList, { children: [
-        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
-        /* @__PURE__ */ jsx(CommandGroup, { heading: groupHeading, children: sortedItems.map((item) => /* @__PURE__ */ jsx(
-          CommandItem,
-          {
-            onSelect: () => {
-              handleSelect(item);
-            },
-            value: `${item.title} ${item.description || ""} ${item.keywords || ""} ${item.id}`,
-            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: item.title }),
-              item.description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.description }) : null
-            ] })
-          },
-          item.id
-        )) })
-      ] })
-    ] })
+    )
   ] });
 }
+function SearchDialog({
+  buttonText,
+  buttonTextMobile,
+  docsEmptyText,
+  docsGroupHeading,
+  docsSearch,
+  emptyText,
+  enableKeyboardShortcut,
+  groupHeading,
+  items,
+  minDocsSearchLength,
+  onDocsSelect,
+  onSelect,
+  scopeLabels,
+  searchPlaceholder
+}) {
+  const documentationSearch = useDocumentationSearch({
+    docsSearch,
+    minDocsSearchLength
+  });
+  const handlers = useSearchDialogHandlers({
+    enableKeyboardShortcut,
+    onDocsSelect,
+    onSelect,
+    runDocumentationSearch: documentationSearch.runDocumentationSearch
+  });
+  const labels = { ...DEFAULT_SCOPE_LABELS, ...scopeLabels };
+  const trimmedQuery = handlers.query.trim();
+  const sortedItems = useMemo(
+    () => [...items].sort((a, b) => a.title.localeCompare(b.title)),
+    [items]
+  );
+  const currentEmptyText = getCurrentEmptyText({
+    docsEmptyText,
+    documentationSearchLength: documentationSearch.documentationSearchLength,
+    emptyText,
+    scope: handlers.scope,
+    trimmedQuery
+  });
+  const showDocumentation = documentationSearch.hasDocumentationSearch && handlers.scope !== "components";
+  return /* @__PURE__ */ jsx(
+    SearchDialogView,
+    {
+      buttonText,
+      buttonTextMobile,
+      currentEmptyText,
+      docsGroupHeading,
+      documentationSearch,
+      groupHeading,
+      handlers,
+      labels,
+      searchPlaceholder,
+      showDocumentation,
+      sortedItems,
+      trimmedQuery
+    }
+  );
+}
 export {
   SearchDialog
 };

package/dist/components/search-field/index.js

@@ -0,0 +1,4 @@
+import { SearchField } from "./search-field";
+export {
+  SearchField
+};

package/dist/components/search-field/search-field.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+function useSearchValue(value, defaultValue, onValueChange) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const setValue = (nextValue) => {
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  return [currentValue, setValue];
+}
+const SearchField = React.forwardRef(
+  ({
+    className,
+    defaultValue = "",
+    onValueChange,
+    placeholder = "Search...",
+    value,
+    ...props
+  }, ref) => {
+    const [currentValue, setValue] = useSearchValue(
+      value,
+      defaultValue,
+      onValueChange
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          className: cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-9 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&::-webkit-search-cancel-button]:appearance-none",
+            className
+          ),
+          onChange: (event) => {
+            setValue(event.target.value);
+          },
+          placeholder,
+          ref,
+          type: "search",
+          value: currentValue
+        }
+      ),
+      currentValue ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": "Clear search",
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          onClick: () => {
+            setValue("");
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+        }
+      ) : null
+    ] });
+  }
+);
+SearchField.displayName = "SearchField";
+export {
+  SearchField
+};

package/dist/components/segmented-control/index.js

@@ -0,0 +1,12 @@
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+} from "./segmented-control";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+};