@brainfish-ai/components 0.26.0 → 0.26.1

package/dist/esm/chunks/font-picker.DisEoE8a.js

@@ -1,181 +0,0 @@
-import * as React from 'react';
-import { Check, SpinnerGap } from '@phosphor-icons/react';
-import { c as cn } from './utils.Cwtlq8dh.js';
-import { CommandItem } from '../components/ui/command.js';
-import { C as Combobox } from './combobox.CJKym3Z1.js';
-
-const FONT_CACHE_KEY = "brainfish-google-fonts-cache";
-const FONT_CACHE_TIMESTAMP_KEY = "brainfish-google-fonts-cache-timestamp";
-const FONT_CACHE_DURATION_MS = 24 * 60 * 60 * 1e3;
-const loadedFonts = /* @__PURE__ */ new Set();
-const getCachedFonts = () => {
-  try {
-    const timestamp = localStorage.getItem(FONT_CACHE_TIMESTAMP_KEY);
-    if (!timestamp) return null;
-    const cacheAge = Date.now() - parseInt(timestamp, 10);
-    if (cacheAge > FONT_CACHE_DURATION_MS) {
-      localStorage.removeItem(FONT_CACHE_KEY);
-      localStorage.removeItem(FONT_CACHE_TIMESTAMP_KEY);
-      return null;
-    }
-    const cached = localStorage.getItem(FONT_CACHE_KEY);
-    if (!cached) return null;
-    return JSON.parse(cached);
-  } catch {
-    return null;
-  }
-};
-const setCachedFonts = (fonts) => {
-  try {
-    localStorage.setItem(FONT_CACHE_KEY, JSON.stringify(fonts));
-    localStorage.setItem(FONT_CACHE_TIMESTAMP_KEY, Date.now().toString());
-  } catch {
-  }
-};
-const loadFont = (fontFamily) => {
-  if (loadedFonts.has(fontFamily)) return;
-  const link = document.createElement("link");
-  link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, "+")}&display=swap`;
-  link.rel = "stylesheet";
-  document.head.appendChild(link);
-  loadedFonts.add(fontFamily);
-};
-const clearFontCache = () => {
-  try {
-    localStorage.removeItem(FONT_CACHE_KEY);
-    localStorage.removeItem(FONT_CACHE_TIMESTAMP_KEY);
-  } catch {
-  }
-};
-
-function useFontOptions({ apiKey, maxFonts = 500, onError }) {
-  const [fonts, setFonts] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const onErrorRef = React.useRef(onError);
-  React.useEffect(() => {
-    onErrorRef.current = onError;
-  }, [onError]);
-  React.useEffect(() => {
-    const fetchFonts = async () => {
-      const cachedFonts = getCachedFonts();
-      if (cachedFonts && cachedFonts.length > 0) {
-        setFonts(cachedFonts.slice(0, maxFonts));
-        setIsLoading(false);
-        return;
-      }
-      try {
-        const response = await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch fonts: ${response.statusText}`);
-        }
-        const data = await response.json();
-        const fontOptions = data.items.map((fontItem) => ({
-          value: fontItem.family,
-          label: fontItem.family,
-          category: fontItem.category,
-          variants: fontItem.variants
-        }));
-        setCachedFonts(fontOptions);
-        setFonts(fontOptions.slice(0, maxFonts));
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error("Failed to fetch fonts");
-        console.error("FontPicker: Failed to fetch Google Fonts", error);
-        onErrorRef.current?.(error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    void fetchFonts();
-  }, [apiKey, maxFonts]);
-  return { fonts, isLoading, loadFont };
-}
-
-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") })
-  );
-});
-
-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 as F, FontPickerItem as a, clearFontCache as c, getCachedFonts as g, loadFont as l, setCachedFonts as s, useFontOptions as u };
-//# sourceMappingURL=font-picker.DisEoE8a.js.map