@brainfish-ai/components 0.35.20 → 0.36.1

package/dist/esm/components/filter/components/MultiSelectDropdown.js

@@ -0,0 +1,111 @@
+import React__default, { useState, useRef } from 'react';
+import { Check } from '@phosphor-icons/react';
+import { Button } from '../../ui/button.js';
+
+const getInitialValues = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  } else if (value) {
+    return [value];
+  }
+  return [];
+};
+const MultiSelectDropdown = ({
+  internalFilter,
+  valueOptions,
+  onConfirm,
+  onClose
+}) => {
+  const [pendingValues, setPendingValues] = useState(() => getInitialValues(internalFilter.value));
+  const [announcement, setAnnouncement] = useState("");
+  const buttonRefs = useRef([]);
+  const applyButtonRef = useRef(null);
+  const handleValueToggle = (valueId) => {
+    const option = valueOptions.find((opt) => opt.id === valueId);
+    const isCurrentlySelected = pendingValues.includes(valueId);
+    setPendingValues((prev) => {
+      const newValues = prev.includes(valueId) ? prev.filter((id) => id !== valueId) : [...prev, valueId];
+      if (option) {
+        const action = isCurrentlySelected ? "deselected" : "selected";
+        setAnnouncement(`${option.label} ${action}.`);
+      }
+      return newValues;
+    });
+  };
+  const handleConfirm = () => {
+    onConfirm(pendingValues);
+    onClose();
+  };
+  const isValueSelected = (valueId) => {
+    return pendingValues.includes(valueId);
+  };
+  const focusButton = (index) => {
+    if (index < valueOptions.length) {
+      buttonRefs.current[index]?.focus();
+    } else {
+      applyButtonRef.current?.focus();
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const nextIndex = Math.min(index + 1, valueOptions.length);
+        focusButton(nextIndex);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prevIndex = Math.max(index - 1, 0);
+        focusButton(prevIndex);
+        break;
+      }
+      case "Enter":
+      case "Spacebar":
+        e.preventDefault();
+        if (index < valueOptions.length) {
+          handleValueToggle(valueOptions[index].id);
+        } else {
+          handleConfirm();
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        onClose();
+        break;
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col min-h-0 flex-1", role: "listbox", "aria-multiselectable": "true" }, /* @__PURE__ */ React__default.createElement("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only" }, announcement), /* @__PURE__ */ React__default.createElement("div", { className: "max-h-60 overflow-y-scroll py-1" }, valueOptions.map((option, index) => /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      key: option.id,
+      ref: (el) => {
+        buttonRefs.current[index] = el;
+      },
+      type: "button",
+      className: "relative flex w-full text-left cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      onClick: () => handleValueToggle(option.id),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      role: "option",
+      "aria-selected": isValueSelected(option.id)
+    },
+    isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
+    !isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement("span", { className: "mr-2 w-3.5" }),
+    option.label
+  ))), /* @__PURE__ */ React__default.createElement("div", { className: "border-t border-border pt-2 px-2 pb-2 shrink-0" }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      ref: applyButtonRef,
+      onClick: handleConfirm,
+      size: "sm",
+      className: "w-full",
+      disabled: pendingValues.length === 0,
+      onKeyDown: (e) => handleKeyDown(e, valueOptions.length)
+    },
+    "Apply (",
+    pendingValues.length,
+    " selected)"
+  )));
+};
+
+export { MultiSelectDropdown };

package/dist/esm/components/filter/components/SingleSelectDropdown.js

@@ -0,0 +1,50 @@
+import React__default, { useRef } from 'react';
+import { Check } from '@phosphor-icons/react';
+
+const SingleSelectDropdown = ({
+  valueOptions,
+  isValueSelected,
+  onValueSelect
+}) => {
+  const buttonRefs = useRef([]);
+  const focusButton = (index) => {
+    buttonRefs.current[index]?.focus();
+  };
+  const handleKeyDown = (e, index) => {
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const nextIndex = Math.min(index + 1, valueOptions.length - 1);
+        focusButton(nextIndex);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prevIndex = Math.max(index - 1, 0);
+        focusButton(prevIndex);
+        break;
+      }
+      case "Enter":
+      case "Spacebar":
+        e.preventDefault();
+        onValueSelect(valueOptions[index].id);
+        break;
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: "py-1", role: "listbox" }, valueOptions.map((option, index) => /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      key: option.id,
+      ref: (el) => buttonRefs.current[index] = el,
+      type: "button",
+      className: "relative flex w-full text-left cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      onClick: () => onValueSelect(option.id),
+      onKeyDown: (e) => handleKeyDown(e, index)
+    },
+    isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
+    !isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement("span", { className: "mr-2 w-3.5" }),
+    option.label
+  )));
+};
+
+export { SingleSelectDropdown };

package/dist/esm/components/filter/filter.js

@@ -0,0 +1,260 @@
+import React__default, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { Check, XCircle } from '@phosphor-icons/react';
+import { Operator } from './types.js';
+import { useMultiSelectHelpers } from './hooks.js';
+import { CustomValueInput } from './components/CustomValueInput.js';
+import { MultiSelectDropdown } from './components/MultiSelectDropdown.js';
+import { SingleSelectDropdown } from './components/SingleSelectDropdown.js';
+import { Button } from '../ui/button.js';
+import { ButtonGroup } from '../ui/button-group.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../ui/dropdown-menu.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover.js';
+
+const Filter = forwardRef(
+  ({
+    filter,
+    sourceOptions,
+    rules,
+    onSourceChange,
+    onRemoveFilter,
+    onFilterChange,
+    selectPlaceholder = "Select a value",
+    customValuePlaceholder = "Enter custom value",
+    customValueButtonLabel = "Done",
+    sourceFirstMessage = "Please select a source first"
+  }, ref) => {
+    const [internalFilter, setInternalFilter] = useState({
+      id: filter.id,
+      source: filter.source,
+      operator: filter.operator || Operator.IS,
+      value: filter.value
+    });
+    const [inputValue, setInputValue] = useState("");
+    const [openDropdownType, setOpenDropdownType] = useState(null);
+    const inputRef = useRef(null);
+    const sourceButtonRef = useRef(null);
+    const divRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        sourceButtonRef.current?.focus();
+      }
+    }));
+    const currentRules = internalFilter.source ? rules[internalFilter.source] : void 0;
+    const operatorOptions = currentRules?.operators || [];
+    const isMultiSelect = currentRules?.multiSelect || false;
+    let inputType = currentRules?.inputType || "dropdown";
+    if (internalFilter.operator === Operator.CONTAINS || internalFilter.operator === Operator.DOES_NOT_CONTAIN) {
+      inputType = "custom";
+    }
+    const valueOptions = currentRules?.getValueOptions ? currentRules.getValueOptions() : [];
+    const { getSelectedValues, isValueSelected, getDisplayValue } = useMultiSelectHelpers(
+      internalFilter,
+      valueOptions,
+      selectPlaceholder
+    );
+    useEffect(() => {
+      if (openDropdownType === "value" && inputType === "custom") {
+        const timeoutId = setTimeout(() => inputRef.current?.focus(), 50);
+        return () => clearTimeout(timeoutId);
+      }
+      return void 0;
+    }, [openDropdownType, inputType]);
+    useEffect(() => {
+      setInternalFilter({
+        id: filter.id,
+        source: filter.source,
+        operator: filter.operator || Operator.IS,
+        value: filter.value
+      });
+    }, [filter]);
+    const checkAndTriggerChange = (newFilter) => {
+      const hasValue = Array.isArray(newFilter.value) ? newFilter.value.length > 0 : !!newFilter.value?.trim();
+      const isComplete = newFilter.source && newFilter.operator && hasValue;
+      if (isComplete) {
+        onFilterChange(newFilter);
+      }
+    };
+    const updateFilterField = (field, value) => {
+      const newFilter = { ...internalFilter, [field]: value };
+      if (field === "source") {
+        const sourceRules = rules[value];
+        newFilter.operator = sourceRules?.operators[0]?.id;
+        newFilter.value = sourceRules?.multiSelect ? [] : "";
+      }
+      if (field === "operator") {
+        if (internalFilter.source) {
+          const sourceRules = rules[internalFilter.source];
+          if (sourceRules?.inputType === "dropdown") {
+            newFilter.value = sourceRules?.multiSelect ? [] : "";
+          }
+        }
+      }
+      setInternalFilter(newFilter);
+      checkAndTriggerChange(newFilter);
+      if (!isMultiSelect || field !== "value") {
+        setOpenDropdownType(null);
+      }
+    };
+    const handleValueToggle = (valueId) => {
+      const selectedValues = getSelectedValues();
+      let newValues;
+      if (isMultiSelect) {
+        if (selectedValues.includes(valueId)) {
+          newValues = selectedValues.filter((id) => id !== valueId);
+        } else {
+          newValues = [...selectedValues, valueId];
+        }
+      } else {
+        newValues = [valueId];
+      }
+      const newFilter = {
+        ...internalFilter,
+        value: isMultiSelect ? newValues : newValues[0] || ""
+      };
+      setInternalFilter(newFilter);
+      checkAndTriggerChange(newFilter);
+      if (!isMultiSelect) {
+        setOpenDropdownType(null);
+      }
+    };
+    const handleMultiSelectConfirm = (selectedValues) => {
+      const newFilter = {
+        ...internalFilter,
+        value: selectedValues
+      };
+      setInternalFilter(newFilter);
+      const isComplete = newFilter.source && newFilter.operator && selectedValues.length > 0;
+      if (isComplete) onFilterChange(newFilter);
+      setOpenDropdownType(null);
+    };
+    const handleCustomValueSubmit = () => {
+      if (inputValue.trim()) {
+        const newFilter = { ...internalFilter, value: inputValue.trim() };
+        setInternalFilter(newFilter);
+        setInputValue("");
+        setOpenDropdownType(null);
+        if (newFilter.source && newFilter.operator && newFilter.value) {
+          onFilterChange(newFilter);
+        }
+      }
+    };
+    const handleKeyDown = (e, isInput) => {
+      if (e.key === "Escape") {
+        setOpenDropdownType(null);
+        return;
+      }
+      if (e.key === "Tab") {
+        if (isInput && !e.shiftKey) {
+          e.preventDefault();
+          const button = document.querySelector("[data-custom-submit-button]");
+          button?.focus();
+        } else if (!isInput) {
+          e.preventDefault();
+          inputRef.current?.focus();
+        }
+      }
+    };
+    return /* @__PURE__ */ React__default.createElement(
+      ButtonGroup,
+      {
+        ref: divRef,
+        orientation: "horizontal",
+        className: "rounded-full border border-border divide-x-2 divide-dark-500"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        DropdownMenu,
+        {
+          open: openDropdownType === "source",
+          onOpenChange: (open) => setOpenDropdownType(open ? "source" : null),
+          modal: false
+        },
+        /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { ref: sourceButtonRef, variant: "ghost", size: "xs", className: "rounded-l-full font-bold" }, sourceOptions.find((opt) => opt.id === internalFilter.source)?.label || sourceOptions[0]?.label || selectPlaceholder)),
+        /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "w-48" }, sourceOptions.map((option) => /* @__PURE__ */ React__default.createElement(
+          DropdownMenuItem,
+          {
+            key: option.id,
+            className: "flex items-center",
+            onSelect: () => {
+              updateFilterField("source", option.id);
+              onSourceChange?.(option.id);
+            }
+          },
+          option.id === internalFilter.source && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
+          option.label
+        )))
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        DropdownMenu,
+        {
+          open: openDropdownType === "operator",
+          onOpenChange: (open) => setOpenDropdownType(open ? "operator" : null),
+          modal: false
+        },
+        /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "xs" }, operatorOptions.find((opt) => opt.id === internalFilter.operator)?.label || selectPlaceholder)),
+        /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "w-48" }, operatorOptions.map((option) => /* @__PURE__ */ React__default.createElement(
+          DropdownMenuItem,
+          {
+            key: option.id,
+            className: "flex items-center",
+            onSelect: () => updateFilterField("operator", option.id)
+          },
+          option.id === internalFilter.operator && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
+          option.label
+        )))
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        Popover,
+        {
+          open: openDropdownType === "value",
+          onOpenChange: (open) => setOpenDropdownType(open ? "value" : null)
+        },
+        /* @__PURE__ */ React__default.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "xs", className: "font-bold" }, getDisplayValue())),
+        /* @__PURE__ */ React__default.createElement(PopoverContent, { align: "start", className: "w-64 max-h-[min(320px,50vh)] overflow-hidden p-0 flex flex-col" }, inputType === "custom" && /* @__PURE__ */ React__default.createElement("div", { className: "p-3" }, /* @__PURE__ */ React__default.createElement(
+          CustomValueInput,
+          {
+            inputValue,
+            setInputValue,
+            customValuePlaceholder,
+            customValueButtonLabel,
+            onSubmit: handleCustomValueSubmit,
+            handleKeyDown
+          }
+        )), inputType === "dropdown" && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col min-h-0 flex-1" }, internalFilter.source ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isMultiSelect ? /* @__PURE__ */ React__default.createElement(
+          MultiSelectDropdown,
+          {
+            internalFilter,
+            valueOptions,
+            onConfirm: handleMultiSelectConfirm,
+            onClose: () => setOpenDropdownType(null)
+          }
+        ) : /* @__PURE__ */ React__default.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ React__default.createElement(
+          SingleSelectDropdown,
+          {
+            valueOptions,
+            isValueSelected,
+            onValueSelect: handleValueToggle
+          }
+        ))) : /* @__PURE__ */ React__default.createElement("div", { className: "p-3 text-sm text-gray-500" }, sourceFirstMessage)))
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "xs",
+          onClick: () => {
+            setInternalFilter({ id: filter.id });
+            setOpenDropdownType(null);
+            onRemoveFilter(filter.id);
+          },
+          className: "p-2 hover:bg-black/10 rounded-none rounded-r-full",
+          "aria-label": "Remove filter"
+        },
+        /* @__PURE__ */ React__default.createElement(XCircle, { size: 16, weight: "fill" })
+      )
+    );
+  }
+);
+Filter.displayName = "Filter";
+
+export { Filter };

package/dist/esm/components/filter/filters.js

@@ -0,0 +1,85 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { Plus } from '@phosphor-icons/react';
+import { createId } from '@paralleldrive/cuid2';
+import { Filter } from './filter.js';
+import { Operator } from './types.js';
+import { Button } from '../ui/button.js';
+import { cn } from '../../lib/utils.js';
+
+const Filters = ({
+  filters,
+  onFilterChange,
+  onFilterRemove,
+  onFilterAdd,
+  sourceOptions,
+  rules,
+  className
+}) => {
+  const [internalFilters, setInternalFilters] = useState(filters || []);
+  const filterRefs = useRef({});
+  useEffect(() => {
+    setInternalFilters(filters || []);
+  }, [filters]);
+  const usedSources = internalFilters.map((filter) => filter.source).filter(Boolean);
+  const availableSources = sourceOptions.filter((option) => {
+    if (rules[option.id]?.multiSelect) {
+      return !usedSources.includes(option.id);
+    }
+    return sourceOptions;
+  });
+  const canAddFilter = availableSources.length > 0;
+  const handleAddFilter = () => {
+    if (!canAddFilter) return;
+    const newFilter = {
+      id: createId(),
+      source: availableSources[0].id,
+      operator: Operator.IS,
+      value: rules[availableSources[0].id]?.multiSelect ? [] : ""
+    };
+    const newFilters = [...internalFilters, newFilter];
+    setInternalFilters(newFilters);
+    requestAnimationFrame(() => {
+      filterRefs.current[newFilter.id]?.focus();
+    });
+    onFilterAdd?.(newFilter);
+  };
+  const handleRemoveFilter = (filter) => {
+    const newFilters = internalFilters.filter((f) => f.id !== filter.id);
+    setInternalFilters(newFilters);
+    onFilterRemove(filter.id);
+  };
+  return /* @__PURE__ */ React__default.createElement("fieldset", { className: cn("flex flex-wrap gap-2", className) }, /* @__PURE__ */ React__default.createElement("legend", { className: "sr-only" }, "Filters"), internalFilters?.map((filter) => {
+    const filterSourceOptions = sourceOptions.filter(
+      (option) => !usedSources.includes(option.id) || // Available sources
+      option.id === filter.source
+      // Or its own current source
+    );
+    return /* @__PURE__ */ React__default.createElement(
+      Filter,
+      {
+        key: filter.id,
+        ref: (ref) => {
+          filterRefs.current[filter.id] = ref;
+        },
+        filter,
+        sourceOptions: filterSourceOptions,
+        rules,
+        onRemoveFilter: () => handleRemoveFilter(filter),
+        onFilterChange
+      }
+    );
+  }), canAddFilter && /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      onClick: handleAddFilter,
+      variant: "ghost",
+      className: "border border-foreground rounded-full gap-1",
+      size: "sm",
+      title: "Add filter"
+    },
+    /* @__PURE__ */ React__default.createElement(Plus, { size: 16 }),
+    "Add filter"
+  ));
+};
+
+export { Filters };

package/dist/esm/components/filter/hooks.js

@@ -0,0 +1,28 @@
+const useMultiSelectHelpers = (internalFilter, valueOptions, selectPlaceholder) => {
+  const getSelectedValues = () => {
+    if (Array.isArray(internalFilter.value)) {
+      return internalFilter.value;
+    }
+    return internalFilter.value ? [internalFilter.value] : [];
+  };
+  const isValueSelected = (valueId) => {
+    const selectedValues = getSelectedValues();
+    return selectedValues.includes(valueId);
+  };
+  const getDisplayValue = () => {
+    const selectedValues = getSelectedValues();
+    if (selectedValues.length === 0) return selectPlaceholder;
+    if (selectedValues.length === 1) {
+      const option = valueOptions.find((opt) => opt.id === selectedValues[0]);
+      return option?.label || selectedValues[0];
+    }
+    return `${selectedValues.length} selected`;
+  };
+  return {
+    getSelectedValues,
+    isValueSelected,
+    getDisplayValue
+  };
+};
+
+export { useMultiSelectHelpers };

package/dist/esm/components/filter/types.js

@@ -0,0 +1,10 @@
+var Operator = /* @__PURE__ */ ((Operator2) => {
+  Operator2["IS"] = "is";
+  Operator2["IS_NOT"] = "is not";
+  Operator2["CONTAINS"] = "contains";
+  Operator2["DOES_NOT_CONTAIN"] = "does not contain";
+  Operator2["STARTS_WITH"] = "starts with";
+  return Operator2;
+})(Operator || {});
+
+export { Operator };

package/dist/esm/components/filter.js

@@ -1,2 +1,3 @@
-export{F as Filter,a as Filters,O as Operator}from"../chunks/filters.CZJ31Eqj.js";
-//# sourceMappingURL=filter.js.map
+export { Filter } from './filter/filter.js';
+export { Filters } from './filter/filters.js';
+export { Operator } from './filter/types.js';

package/dist/esm/components/font-picker/font-picker-item.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Check } from '@phosphor-icons/react';
+import { loadFont } from './font-utils.js';
+import { cn } from '../../lib/utils.js';
+import { CommandItem } from '../ui/command.js';
+
+const FontPickerItem = React.memo(function FontPickerItem2({ font, isSelected, onSelect }) {
+  const itemRef = React.useRef(null);
+  const [isVisible, setIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    if (itemRef.current) {
+      observer.observe(itemRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
+  React.useEffect(() => {
+    if (isVisible) {
+      loadFont(font.value);
+    }
+  }, [isVisible, font.value]);
+  const ariaLabel = `Select ${font.label} font${font.category ? `, ${font.category} category` : ""}`;
+  return /* @__PURE__ */ React.createElement(
+    CommandItem,
+    {
+      ref: itemRef,
+      value: font.label,
+      onSelect,
+      className: "cursor-pointer",
+      "aria-label": ariaLabel,
+      "aria-selected": isSelected
+    },
+    /* @__PURE__ */ React.createElement("span", { style: { fontFamily: isVisible ? font.value : void 0 }, className: "flex-1 truncate" }, font.label),
+    font.category && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground capitalize" }, font.category),
+    /* @__PURE__ */ React.createElement(Check, { className: cn("ml-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0") })
+  );
+});
+
+export { FontPickerItem };

package/dist/esm/components/font-picker/font-picker.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { SpinnerGap } from '@phosphor-icons/react';
+import { useFontOptions } from './use-font-options.js';
+import { FontPickerItem } from './font-picker-item.js';
+import { Combobox } from '../combobox/combobox.js';
+
+function FontPicker({
+  value,
+  onChange,
+  apiKey,
+  placeholder = "Select a font...",
+  searchPlaceholder = "Search fonts...",
+  noResultsText = "No fonts found.",
+  loadingText = "Loading fonts...",
+  disabled = false,
+  className,
+  dropdownWidth,
+  maxFonts = 500,
+  onError
+}) {
+  const { fonts, isLoading, loadFont } = useFontOptions({ apiKey, maxFonts, onError });
+  React.useEffect(() => {
+    if (value) {
+      loadFont(value);
+    }
+  }, [value, loadFont]);
+  const options = fonts;
+  return /* @__PURE__ */ React.createElement(
+    Combobox,
+    {
+      options,
+      value,
+      onChange,
+      defaultValueLabel: placeholder,
+      placeholder: searchPlaceholder,
+      noResultsLabel: noResultsText,
+      disabled: disabled || isLoading,
+      className,
+      dropdownWidth,
+      renderTrigger: ({ selectedItem }) => {
+        if (isLoading) {
+          return /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2 text-muted-foreground" }, /* @__PURE__ */ React.createElement(SpinnerGap, { className: "h-4 w-4 animate-spin" }), loadingText);
+        }
+        if (selectedItem) {
+          return /* @__PURE__ */ React.createElement("span", { style: { fontFamily: selectedItem.value } }, selectedItem.label);
+        }
+        return /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, placeholder);
+      },
+      renderItem: ({ item, isSelected, onSelect }) => /* @__PURE__ */ React.createElement(FontPickerItem, { font: item, isSelected, onSelect })
+    }
+  );
+}
+
+export { FontPicker };