@brainfish-ai/components 0.31.0 → 0.31.1

package/dist/esm/chunks/{font-picker.YAE99idL.js → font-picker.B9GPXyK4.js}

@@ -1,6 +1,6 @@
-import*as e from"react";import{Check as t,SpinnerGap as a}from"@phosphor-icons/react";import{c as o}from"./utils.C6Qu-kwd.js";import{CommandItem as n}from"../components/ui/command.js";import{C as r}from"./combobox.MyoPH18G.js";const s="brainfish-google-fonts-cache",l="brainfish-google-fonts-cache-timestamp",c=/* @__PURE__ */new Set,i=()=>{try{const e=localStorage.getItem(l);if(!e)return null;if(Date.now()-parseInt(e,10)>864e5)return localStorage.removeItem(s),localStorage.removeItem(l),null;const t=localStorage.getItem(s);return t?JSON.parse(t):null}catch{return null}},m=e=>{try{localStorage.setItem(s,JSON.stringify(e)),localStorage.setItem(l,Date.now().toString())}catch{}},f=e=>{if(c.has(e))return;const t=document.createElement("link");t.href=`https://fonts.googleapis.com/css2?family=${e.replace(/ /g,"+")}&display=swap`,t.rel="stylesheet",document.head.appendChild(t),c.add(e)},u=()=>{try{localStorage.removeItem(s),localStorage.removeItem(l)}catch{}};function d({apiKey:t,maxFonts:a=500,onError:o}){const[n,r]=e.useState([]),[s,l]=e.useState(!0),c=e.useRef(o);return e.useEffect(()=>{c.current=o},[o]),e.useEffect(()=>{(async()=>{const e=i();if(e&&e.length>0)return r(e.slice(0,a)),void l(!1);try{const e=await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${t}&sort=popularity`);if(!e.ok)throw new Error(`Failed to fetch fonts: ${e.statusText}`);const o=(await e.json()).items.map(e=>({value:e.family,label:e.family,category:e.category,variants:e.variants}));m(o),r(o.slice(0,a))}catch(o){const e=o instanceof Error?o:new Error("Failed to fetch fonts");console.error("FontPicker: Failed to fetch Google Fonts",e),c.current?.(e)}finally{l(!1)}})()},[t,a]),{fonts:n,isLoading:s,loadFont:f}}const g=e.memo(function({font:a,isSelected:r,onSelect:s}){const l=e.useRef(null),[c,i]=e.useState(!1);e.useEffect(()=>{const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(i(!0),e.disconnect())},{threshold:.1});return l.current&&e.observe(l.current),()=>e.disconnect()},[]),e.useEffect(()=>{c&&f(a.value)},[c,a.value]);const m=`Select ${a.label} font${a.category?`, ${a.category} category`:""}`;/* @__PURE__ */
-return e.createElement(n,{ref:l,value:a.label,onSelect:s,className:"cursor-pointer","aria-label":m,"aria-selected":r},
-/* @__PURE__ */e.createElement("span",{style:{fontFamily:c?a.value:void 0},className:"flex-1 truncate"},a.label),a.category&&/* @__PURE__ */e.createElement("span",{className:"text-xs text-muted-foreground capitalize"},a.category),
-/* @__PURE__ */e.createElement(t,{className:o("ml-2 h-4 w-4",r?"opacity-100":"opacity-0")}))});function p({value:t,onChange:o,apiKey:n,placeholder:s="Select a font...",searchPlaceholder:l="Search fonts...",noResultsText:c="No fonts found.",loadingText:i="Loading fonts...",disabled:m=!1,className:f,dropdownWidth:u,maxFonts:p=500,onError:h}){const{fonts:y,isLoading:S,loadFont:E}=d({apiKey:n,maxFonts:p,onError:h});e.useEffect(()=>{t&&E(t)},[t,E]);const v=y;/* @__PURE__ */
-return e.createElement(r,{options:v,value:t,onChange:o,defaultValueLabel:s,placeholder:l,noResultsLabel:c,disabled:m||S,className:f,dropdownWidth:u,renderTrigger:({selectedItem:t})=>S?/* @__PURE__ */e.createElement("span",{className:"flex items-center gap-2 text-muted-foreground"},/* @__PURE__ */e.createElement(a,{className:"h-4 w-4 animate-spin"}),i):t?/* @__PURE__ */e.createElement("span",{style:{fontFamily:t.value}},t.label):/* @__PURE__ */e.createElement("span",{className:"text-muted-foreground"},s),renderItem:({item:t,isSelected:a,onSelect:o})=>/* @__PURE__ */e.createElement(g,{font:t,isSelected:a,onSelect:o})})}export{p as F,g as a,u as c,i as g,f as l,m as s,d as u};
-//# sourceMappingURL=font-picker.YAE99idL.js.map
+import*as e from"react";import{Check as t,SpinnerGap as o}from"@phosphor-icons/react";import{c as a}from"./utils.C6Qu-kwd.js";import{CommandItem as n}from"../components/ui/command.js";import{C as r}from"./combobox.MyoPH18G.js";const s="brainfish-google-fonts-cache",l="brainfish-google-fonts-cache-timestamp",c=/* @__PURE__ */new Set,i=()=>{try{const e=localStorage.getItem(l);if(!e)return null;if(Date.now()-parseInt(e,10)>864e5)return localStorage.removeItem(s),localStorage.removeItem(l),null;const t=localStorage.getItem(s);return t?JSON.parse(t):null}catch{return null}},m=e=>{try{localStorage.setItem(s,JSON.stringify(e)),localStorage.setItem(l,Date.now().toString())}catch{}},f=e=>{if(c.has(e))return;const t=document.createElement("link");t.href=`https://fonts.googleapis.com/css2?family=${e.replace(/ /g,"+")}&display=swap`,t.rel="stylesheet",document.head.appendChild(t),c.add(e)},u=()=>{try{localStorage.removeItem(s),localStorage.removeItem(l)}catch{}};function d({apiKey:t,maxFonts:o=500,onError:a}){const[n,r]=e.useState([]),[s,l]=e.useState(!0),c=e.useRef(a);return e.useEffect(()=>{c.current=a},[a]),e.useEffect(()=>{(async()=>{const e=i();if(e&&e.length>0)return r(e.slice(0,o)),void l(!1);try{const e=await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${t}&sort=popularity`);if(!e.ok)throw new Error(`Failed to fetch fonts: ${e.statusText}`);const a=(await e.json()).items.map(e=>({value:e.family,label:e.family,category:e.category,variants:e.variants}));m(a),r(a.slice(0,o))}catch(a){const e=a instanceof Error?a:new Error("Failed to fetch fonts");console.error("FontPicker: Failed to fetch Google Fonts",e),c.current?.(e)}finally{l(!1)}})()},[t,o]),{fonts:n,isLoading:s,loadFont:f}}const g=e.memo(function({font:o,isSelected:r,onSelect:s}){const l=e.useRef(null),[c,i]=e.useState(!1);e.useEffect(()=>{const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(i(!0),e.disconnect())},{threshold:.1});return l.current&&e.observe(l.current),()=>e.disconnect()},[]),e.useEffect(()=>{c&&f(o.value)},[c,o.value]);const m=`Select ${o.label} font${o.category?`, ${o.category} category`:""}`;/* @__PURE__ */
+return e.createElement(n,{ref:l,value:o.label,onSelect:s,className:"cursor-pointer","aria-label":m,"aria-selected":r},
+/* @__PURE__ */e.createElement("span",{style:{fontFamily:c?o.value:void 0},className:"flex-1 truncate"},o.label),o.category&&/* @__PURE__ */e.createElement("span",{className:"text-xs text-muted-foreground capitalize"},o.category),
+/* @__PURE__ */e.createElement(t,{className:a("ml-2 h-4 w-4",r?"opacity-100":"opacity-0")}))});function p({value:t,onChange:a,apiKey:n,placeholder:s="Select a font...",searchPlaceholder:l="Search fonts...",noResultsText:c="No fonts found.",loadingText:i="Loading fonts...",disabled:m=!1,className:f,dropdownWidth:u,maxFonts:p=500,onError:h}){const{fonts:y,isLoading:S,loadFont:E}=d({apiKey:n,maxFonts:p,onError:h});e.useEffect(()=>{t&&E(t)},[t,E]);const v=y;/* @__PURE__ */
+return e.createElement(r,{options:v,value:t,onChange:a,defaultValueLabel:s,placeholder:l,noResultsLabel:c,disabled:m||S,className:f,dropdownWidth:u,renderTrigger:({selectedItem:t})=>S?/* @__PURE__ */e.createElement("span",{className:"flex items-center gap-2 text-muted-foreground"},/* @__PURE__ */e.createElement(o,{className:"h-4 w-4 animate-spin"}),i):t?/* @__PURE__ */e.createElement("span",{style:{fontFamily:t.value}},t.label):/* @__PURE__ */e.createElement("span",{className:"text-muted-foreground"},s),renderItem:({item:t,isSelected:o,onSelect:a})=>/* @__PURE__ */e.createElement(g,{font:t,isSelected:o,onSelect:a})})}export{p as F,g as a,u as c,i as g,f as l,m as s,d as u};
+//# sourceMappingURL=font-picker.B9GPXyK4.js.map

package/dist/esm/chunks/{font-picker.YAE99idL.js.map → font-picker.B9GPXyK4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"font-picker.YAE99idL.js","sources":["../../../src/components/font-picker/font-utils.ts","../../../src/components/font-picker/use-font-options.ts","../../../src/components/font-picker/font-picker-item.tsx","../../../src/components/font-picker/font-picker.tsx"],"sourcesContent":["import { FontOption } from './types';\n\n// Cache keys for localStorage\nconst FONT_CACHE_KEY = 'brainfish-google-fonts-cache';\nconst FONT_CACHE_TIMESTAMP_KEY = 'brainfish-google-fonts-cache-timestamp';\nconst FONT_CACHE_DURATION_MS = 24 * 60 * 60 * 1000; // 24 hours\n\n// Cache for loaded font stylesheets to prevent duplicate loads\nconst loadedFonts = new Set<string>();\n\n/**\n * Get cached fonts from localStorage\n */\nexport const getCachedFonts = (): FontOption[] | null => {\n  try {\n    const timestamp = localStorage.getItem(FONT_CACHE_TIMESTAMP_KEY);\n    if (!timestamp) return null;\n\n    const cacheAge = Date.now() - parseInt(timestamp, 10);\n    if (cacheAge > FONT_CACHE_DURATION_MS) {\n      localStorage.removeItem(FONT_CACHE_KEY);\n      localStorage.removeItem(FONT_CACHE_TIMESTAMP_KEY);\n\n      return null;\n    }\n\n    const cached = localStorage.getItem(FONT_CACHE_KEY);\n    if (!cached) return null;\n\n    return JSON.parse(cached) as FontOption[];\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Save fonts to localStorage cache\n */\nexport const setCachedFonts = (fonts: FontOption[]): void => {\n  try {\n    localStorage.setItem(FONT_CACHE_KEY, JSON.stringify(fonts));\n    localStorage.setItem(FONT_CACHE_TIMESTAMP_KEY, Date.now().toString());\n  } catch {\n    // localStorage might be full or unavailable, ignore\n  }\n};\n\n/**\n * Load a Google Font stylesheet dynamically\n */\nexport const loadFont = (fontFamily: string): void => {\n  if (loadedFonts.has(fontFamily)) return;\n\n  const link = document.createElement('link');\n  link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}&display=swap`;\n  link.rel = 'stylesheet';\n  document.head.appendChild(link);\n  loadedFonts.add(fontFamily);\n};\n\n/**\n * Clear the font cache from localStorage\n * Useful for forcing a fresh fetch of fonts\n */\nexport const clearFontCache = (): void => {\n  try {\n    localStorage.removeItem(FONT_CACHE_KEY);\n    localStorage.removeItem(FONT_CACHE_TIMESTAMP_KEY);\n  } catch {\n    // localStorage might be unavailable, ignore\n  }\n};\n","import * as React from 'react';\n\nimport { FontOption } from './types';\nimport { getCachedFonts, setCachedFonts, loadFont } from './font-utils';\n\nexport interface UseFontOptionsProps {\n  apiKey: string;\n  maxFonts?: number;\n  onError?: (error: Error) => void;\n}\n\nexport interface UseFontOptionsReturn {\n  fonts: FontOption[];\n  isLoading: boolean;\n  loadFont: typeof loadFont;\n}\n\n/**\n * Hook to fetch and manage Google Fonts options\n * Handles caching, loading state, and font stylesheet loading\n */\nexport function useFontOptions({ apiKey, maxFonts = 500, onError }: UseFontOptionsProps): UseFontOptionsReturn {\n  const [fonts, setFonts] = React.useState<FontOption[]>([]);\n  const [isLoading, setIsLoading] = React.useState(true);\n\n  // Stabilize onError callback reference to prevent effect re-runs when\n  // consumers pass inline functions (which create new references on every render)\n  const onErrorRef = React.useRef(onError);\n  React.useEffect(() => {\n    onErrorRef.current = onError;\n  }, [onError]);\n\n  React.useEffect(() => {\n    const fetchFonts = async () => {\n      // Check cache first\n      const cachedFonts = getCachedFonts();\n      if (cachedFonts && cachedFonts.length > 0) {\n        setFonts(cachedFonts.slice(0, maxFonts));\n        setIsLoading(false);\n\n        return;\n      }\n\n      try {\n        const response = await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`);\n\n        if (!response.ok) {\n          throw new Error(`Failed to fetch fonts: ${response.statusText}`);\n        }\n\n        const data = await response.json();\n\n        const fontOptions: FontOption[] = data.items.map((fontItem: { family: string; category: string; variants: string[] }) => ({\n          value: fontItem.family,\n          label: fontItem.family,\n          category: fontItem.category,\n          variants: fontItem.variants,\n        }));\n\n        // Cache all fonts, but only display up to maxFonts\n        setCachedFonts(fontOptions);\n        setFonts(fontOptions.slice(0, maxFonts));\n      } catch (err) {\n        const error = err instanceof Error ? err : new Error('Failed to fetch fonts');\n\n        console.error('FontPicker: Failed to fetch Google Fonts', error);\n        onErrorRef.current?.(error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    void fetchFonts();\n  }, [apiKey, maxFonts]);\n\n  return { fonts, isLoading, loadFont };\n}\n","import * as React from 'react';\nimport { Check } from '@phosphor-icons/react';\n\nimport { FontOption } from './types';\nimport { loadFont } from './font-utils';\n\nimport { cn } from '@/lib/utils';\nimport { CommandItem } from '@/components/ui/command';\n\nexport interface FontPickerItemProps {\n  font: FontOption;\n  isSelected: boolean;\n  onSelect: () => void;\n}\n\n/**\n * Individual font item in the dropdown list\n * Loads font on mount for preview using Intersection Observer\n * Memoized to prevent unnecessary re-renders\n */\nexport const FontPickerItem = React.memo(function FontPickerItem({ font, isSelected, onSelect }: FontPickerItemProps) {\n  const itemRef = React.useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  // Use Intersection Observer to lazy-load fonts\n  React.useEffect(() => {\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsVisible(true);\n          observer.disconnect();\n        }\n      },\n      { threshold: 0.1 },\n    );\n\n    if (itemRef.current) {\n      observer.observe(itemRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, []);\n\n  // Load font when visible\n  React.useEffect(() => {\n    if (isVisible) {\n      loadFont(font.value);\n    }\n  }, [isVisible, font.value]);\n\n  // Build accessible label\n  const ariaLabel = `Select ${font.label} font${font.category ? `, ${font.category} category` : ''}`;\n\n  return (\n    <CommandItem\n      ref={itemRef}\n      value={font.label}\n      onSelect={onSelect}\n      className=\"cursor-pointer\"\n      aria-label={ariaLabel}\n      aria-selected={isSelected}\n    >\n      <span style={{ fontFamily: isVisible ? font.value : undefined }} className=\"flex-1 truncate\">\n        {font.label}\n      </span>\n      {font.category && <span className=\"text-xs text-muted-foreground capitalize\">{font.category}</span>}\n      <Check className={cn('ml-2 h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')} />\n    </CommandItem>\n  );\n});\n","import * as React from 'react';\nimport { SpinnerGap } from '@phosphor-icons/react';\n\nimport { useFontOptions } from './use-font-options';\nimport { FontPickerItem } from './font-picker-item';\n\nimport { Combobox } from '@/components/combobox/combobox';\n\nexport interface FontPickerProps {\n  /** Currently selected font family */\n  value?: string;\n  /** Callback when font selection changes */\n  onChange?: (fontFamily: string) => void;\n  /** Google Fonts API key (required) */\n  apiKey: string;\n  /** Placeholder text when no font is selected */\n  placeholder?: string;\n  /** Text shown in search input */\n  searchPlaceholder?: string;\n  /** Text shown when no fonts match the search */\n  noResultsText?: string;\n  /** Text shown while fonts are loading */\n  loadingText?: string;\n  /** Whether the picker is disabled */\n  disabled?: boolean;\n  /** Additional CSS classes for the trigger button */\n  className?: string;\n  /** Width of the dropdown (defaults to trigger width) */\n  dropdownWidth?: number;\n  /** Maximum number of fonts to display (for performance) */\n  maxFonts?: number;\n  /** Callback when an error occurs fetching fonts */\n  onError?: (error: Error) => void;\n}\n\n/**\n * FontPicker - A searchable dropdown for selecting Google Fonts\n *\n * @example\n * ```tsx\n * const [font, setFont] = useState('Inter');\n *\n * <FontPicker\n *   apiKey=\"YOUR_API_KEY\"\n *   value={font}\n *   onChange={setFont}\n *   placeholder=\"Select a font\"\n * />\n * ```\n */\nexport function FontPicker({\n  value,\n  onChange,\n  apiKey,\n  placeholder = 'Select a font...',\n  searchPlaceholder = 'Search fonts...',\n  noResultsText = 'No fonts found.',\n  loadingText = 'Loading fonts...',\n  disabled = false,\n  className,\n  dropdownWidth,\n  maxFonts = 500,\n  onError,\n}: FontPickerProps) {\n  const { fonts, isLoading, loadFont } = useFontOptions({ apiKey, maxFonts, onError });\n\n  // Load font stylesheet when selected\n  React.useEffect(() => {\n    if (value) {\n      loadFont(value);\n    }\n  }, [value, loadFont]);\n\n  // fonts already have value/label which Combobox requires\n  const options = fonts;\n\n  return (\n    <Combobox\n      options={options}\n      value={value}\n      onChange={onChange}\n      defaultValueLabel={placeholder}\n      placeholder={searchPlaceholder}\n      noResultsLabel={noResultsText}\n      disabled={disabled || isLoading}\n      className={className}\n      dropdownWidth={dropdownWidth}\n      renderTrigger={({ selectedItem }) => {\n        if (isLoading) {\n          return (\n            <span className=\"flex items-center gap-2 text-muted-foreground\">\n              <SpinnerGap className=\"h-4 w-4 animate-spin\" />\n              {loadingText}\n            </span>\n          );\n        }\n\n        if (selectedItem) {\n          return <span style={{ fontFamily: selectedItem.value }}>{selectedItem.label}</span>;\n        }\n\n        return <span className=\"text-muted-foreground\">{placeholder}</span>;\n      }}\n      renderItem={({ item, isSelected, onSelect }) => (\n        <FontPickerItem font={item} isSelected={isSelected} onSelect={onSelect} />\n      )}\n    />\n  );\n}\n\nexport default FontPicker;\n"],"names":["FONT_CACHE_KEY","FONT_CACHE_TIMESTAMP_KEY","loadedFonts","Set","getCachedFonts","timestamp","localStorage","getItem","Date","now","parseInt","removeItem","cached","JSON","parse","setCachedFonts","fonts","setItem","stringify","toString","loadFont","fontFamily","has","link","document","createElement","href","replace","rel","head","appendChild","add","clearFontCache","useFontOptions","apiKey","maxFonts","onError","setFonts","React","useState","isLoading","setIsLoading","onErrorRef","useRef","useEffect","current","async","cachedFonts","length","slice","response","fetch","ok","Error","statusText","fontOptions","json","items","map","fontItem","value","family","label","category","variants","err","error","console","fetchFonts","FontPickerItem","memo","font","isSelected","onSelect","itemRef","isVisible","setIsVisible","observer","IntersectionObserver","entry","isIntersecting","disconnect","threshold","observe","ariaLabel","CommandItem","ref","className","style","Check","cn","FontPicker","onChange","placeholder","searchPlaceholder","noResultsText","loadingText","disabled","dropdownWidth","options","Combobox","defaultValueLabel","noResultsLabel","renderTrigger","selectedItem","SpinnerGap","renderItem","item"],"mappings":"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"}
+{"version":3,"file":"font-picker.B9GPXyK4.js","sources":["../../../src/components/font-picker/font-utils.ts","../../../src/components/font-picker/use-font-options.ts","../../../src/components/font-picker/font-picker-item.tsx","../../../src/components/font-picker/font-picker.tsx"],"sourcesContent":["import { FontOption } from './types';\n\n// Cache keys for localStorage\nconst FONT_CACHE_KEY = 'brainfish-google-fonts-cache';\nconst FONT_CACHE_TIMESTAMP_KEY = 'brainfish-google-fonts-cache-timestamp';\nconst FONT_CACHE_DURATION_MS = 24 * 60 * 60 * 1000; // 24 hours\n\n// Cache for loaded font stylesheets to prevent duplicate loads\nconst loadedFonts = new Set<string>();\n\n/**\n * Get cached fonts from localStorage\n */\nexport const getCachedFonts = (): FontOption[] | null => {\n  try {\n    const timestamp = localStorage.getItem(FONT_CACHE_TIMESTAMP_KEY);\n    if (!timestamp) return null;\n\n    const cacheAge = Date.now() - parseInt(timestamp, 10);\n    if (cacheAge > FONT_CACHE_DURATION_MS) {\n      localStorage.removeItem(FONT_CACHE_KEY);\n      localStorage.removeItem(FONT_CACHE_TIMESTAMP_KEY);\n\n      return null;\n    }\n\n    const cached = localStorage.getItem(FONT_CACHE_KEY);\n    if (!cached) return null;\n\n    return JSON.parse(cached) as FontOption[];\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Save fonts to localStorage cache\n */\nexport const setCachedFonts = (fonts: FontOption[]): void => {\n  try {\n    localStorage.setItem(FONT_CACHE_KEY, JSON.stringify(fonts));\n    localStorage.setItem(FONT_CACHE_TIMESTAMP_KEY, Date.now().toString());\n  } catch {\n    // localStorage might be full or unavailable, ignore\n  }\n};\n\n/**\n * Load a Google Font stylesheet dynamically\n */\nexport const loadFont = (fontFamily: string): void => {\n  if (loadedFonts.has(fontFamily)) return;\n\n  const link = document.createElement('link');\n  link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}&display=swap`;\n  link.rel = 'stylesheet';\n  document.head.appendChild(link);\n  loadedFonts.add(fontFamily);\n};\n\n/**\n * Clear the font cache from localStorage\n * Useful for forcing a fresh fetch of fonts\n */\nexport const clearFontCache = (): void => {\n  try {\n    localStorage.removeItem(FONT_CACHE_KEY);\n    localStorage.removeItem(FONT_CACHE_TIMESTAMP_KEY);\n  } catch {\n    // localStorage might be unavailable, ignore\n  }\n};\n","import * as React from 'react';\n\nimport { FontOption } from './types';\nimport { getCachedFonts, setCachedFonts, loadFont } from './font-utils';\n\nexport interface UseFontOptionsProps {\n  apiKey: string;\n  maxFonts?: number;\n  onError?: (error: Error) => void;\n}\n\nexport interface UseFontOptionsReturn {\n  fonts: FontOption[];\n  isLoading: boolean;\n  loadFont: typeof loadFont;\n}\n\n/**\n * Hook to fetch and manage Google Fonts options\n * Handles caching, loading state, and font stylesheet loading\n */\nexport function useFontOptions({ apiKey, maxFonts = 500, onError }: UseFontOptionsProps): UseFontOptionsReturn {\n  const [fonts, setFonts] = React.useState<FontOption[]>([]);\n  const [isLoading, setIsLoading] = React.useState(true);\n\n  // Stabilize onError callback reference to prevent effect re-runs when\n  // consumers pass inline functions (which create new references on every render)\n  const onErrorRef = React.useRef(onError);\n  React.useEffect(() => {\n    onErrorRef.current = onError;\n  }, [onError]);\n\n  React.useEffect(() => {\n    const fetchFonts = async () => {\n      // Check cache first\n      const cachedFonts = getCachedFonts();\n      if (cachedFonts && cachedFonts.length > 0) {\n        setFonts(cachedFonts.slice(0, maxFonts));\n        setIsLoading(false);\n\n        return;\n      }\n\n      try {\n        const response = await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`);\n\n        if (!response.ok) {\n          throw new Error(`Failed to fetch fonts: ${response.statusText}`);\n        }\n\n        const data = await response.json();\n\n        const fontOptions: FontOption[] = data.items.map((fontItem: { family: string; category: string; variants: string[] }) => ({\n          value: fontItem.family,\n          label: fontItem.family,\n          category: fontItem.category,\n          variants: fontItem.variants,\n        }));\n\n        // Cache all fonts, but only display up to maxFonts\n        setCachedFonts(fontOptions);\n        setFonts(fontOptions.slice(0, maxFonts));\n      } catch (err) {\n        const error = err instanceof Error ? err : new Error('Failed to fetch fonts');\n\n        console.error('FontPicker: Failed to fetch Google Fonts', error);\n        onErrorRef.current?.(error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    void fetchFonts();\n  }, [apiKey, maxFonts]);\n\n  return { fonts, isLoading, loadFont };\n}\n","import * as React from 'react';\nimport { Check } from '@phosphor-icons/react';\n\nimport { FontOption } from './types';\nimport { loadFont } from './font-utils';\n\nimport { cn } from '@/lib/utils';\nimport { CommandItem } from '@/components/ui/command';\n\nexport interface FontPickerItemProps {\n  font: FontOption;\n  isSelected: boolean;\n  onSelect: () => void;\n}\n\n/**\n * Individual font item in the dropdown list\n * Loads font on mount for preview using Intersection Observer\n * Memoized to prevent unnecessary re-renders\n */\nexport const FontPickerItem = React.memo(function FontPickerItem({ font, isSelected, onSelect }: FontPickerItemProps) {\n  const itemRef = React.useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  // Use Intersection Observer to lazy-load fonts\n  React.useEffect(() => {\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsVisible(true);\n          observer.disconnect();\n        }\n      },\n      { threshold: 0.1 },\n    );\n\n    if (itemRef.current) {\n      observer.observe(itemRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, []);\n\n  // Load font when visible\n  React.useEffect(() => {\n    if (isVisible) {\n      loadFont(font.value);\n    }\n  }, [isVisible, font.value]);\n\n  // Build accessible label\n  const ariaLabel = `Select ${font.label} font${font.category ? `, ${font.category} category` : ''}`;\n\n  return (\n    <CommandItem\n      ref={itemRef}\n      value={font.label}\n      onSelect={onSelect}\n      className=\"cursor-pointer\"\n      aria-label={ariaLabel}\n      aria-selected={isSelected}\n    >\n      <span style={{ fontFamily: isVisible ? font.value : undefined }} className=\"flex-1 truncate\">\n        {font.label}\n      </span>\n      {font.category && <span className=\"text-xs text-muted-foreground capitalize\">{font.category}</span>}\n      <Check className={cn('ml-2 h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')} />\n    </CommandItem>\n  );\n});\n","import * as React from 'react';\nimport { SpinnerGap } from '@phosphor-icons/react';\n\nimport { useFontOptions } from './use-font-options';\nimport { FontPickerItem } from './font-picker-item';\n\nimport { Combobox } from '@/components/combobox/combobox';\n\nexport interface FontPickerProps {\n  /** Currently selected font family */\n  value?: string;\n  /** Callback when font selection changes */\n  onChange?: (fontFamily: string) => void;\n  /** Google Fonts API key (required) */\n  apiKey: string;\n  /** Placeholder text when no font is selected */\n  placeholder?: string;\n  /** Text shown in search input */\n  searchPlaceholder?: string;\n  /** Text shown when no fonts match the search */\n  noResultsText?: string;\n  /** Text shown while fonts are loading */\n  loadingText?: string;\n  /** Whether the picker is disabled */\n  disabled?: boolean;\n  /** Additional CSS classes for the trigger button */\n  className?: string;\n  /** Width of the dropdown (defaults to trigger width) */\n  dropdownWidth?: number;\n  /** Maximum number of fonts to display (for performance) */\n  maxFonts?: number;\n  /** Callback when an error occurs fetching fonts */\n  onError?: (error: Error) => void;\n}\n\n/**\n * FontPicker - A searchable dropdown for selecting Google Fonts\n *\n * @example\n * ```tsx\n * const [font, setFont] = useState('Inter');\n *\n * <FontPicker\n *   apiKey=\"YOUR_API_KEY\"\n *   value={font}\n *   onChange={setFont}\n *   placeholder=\"Select a font\"\n * />\n * ```\n */\nexport function FontPicker({\n  value,\n  onChange,\n  apiKey,\n  placeholder = 'Select a font...',\n  searchPlaceholder = 'Search fonts...',\n  noResultsText = 'No fonts found.',\n  loadingText = 'Loading fonts...',\n  disabled = false,\n  className,\n  dropdownWidth,\n  maxFonts = 500,\n  onError,\n}: FontPickerProps) {\n  const { fonts, isLoading, loadFont } = useFontOptions({ apiKey, maxFonts, onError });\n\n  // Load font stylesheet when selected\n  React.useEffect(() => {\n    if (value) {\n      loadFont(value);\n    }\n  }, [value, loadFont]);\n\n  // fonts already have value/label which Combobox requires\n  const options = fonts;\n\n  return (\n    <Combobox\n      options={options}\n      value={value}\n      onChange={onChange}\n      defaultValueLabel={placeholder}\n      placeholder={searchPlaceholder}\n      noResultsLabel={noResultsText}\n      disabled={disabled || isLoading}\n      className={className}\n      dropdownWidth={dropdownWidth}\n      renderTrigger={({ selectedItem }) => {\n        if (isLoading) {\n          return (\n            <span className=\"flex items-center gap-2 text-muted-foreground\">\n              <SpinnerGap className=\"h-4 w-4 animate-spin\" />\n              {loadingText}\n            </span>\n          );\n        }\n\n        if (selectedItem) {\n          return <span style={{ fontFamily: selectedItem.value }}>{selectedItem.label}</span>;\n        }\n\n        return <span className=\"text-muted-foreground\">{placeholder}</span>;\n      }}\n      renderItem={({ item, isSelected, onSelect }) => (\n        <FontPickerItem font={item} isSelected={isSelected} onSelect={onSelect} />\n      )}\n    />\n  );\n}\n\nexport default FontPicker;\n"],"names":["FONT_CACHE_KEY","FONT_CACHE_TIMESTAMP_KEY","loadedFonts","Set","getCachedFonts","timestamp","localStorage","getItem","Date","now","parseInt","removeItem","cached","JSON","parse","setCachedFonts","fonts","setItem","stringify","toString","loadFont","fontFamily","has","link","document","createElement","href","replace","rel","head","appendChild","add","clearFontCache","useFontOptions","apiKey","maxFonts","onError","setFonts","React","useState","isLoading","setIsLoading","onErrorRef","useRef","useEffect","current","async","cachedFonts","length","slice","response","fetch","ok","Error","statusText","fontOptions","json","items","map","fontItem","value","family","label","category","variants","err","error","console","fetchFonts","FontPickerItem","memo","font","isSelected","onSelect","itemRef","isVisible","setIsVisible","observer","IntersectionObserver","entry","isIntersecting","disconnect","threshold","observe","ariaLabel","CommandItem","ref","className","style","Check","cn","FontPicker","onChange","placeholder","searchPlaceholder","noResultsText","loadingText","disabled","dropdownWidth","options","Combobox","defaultValueLabel","noResultsLabel","renderTrigger","selectedItem","SpinnerGap","renderItem","item"],"mappings":"mOAGA,MAAMA,EAAiB,+BACjBC,EAA2B,yCAI3BC,qBAAkBC,IAKXC,EAAiB,KAC5B,IACE,MAAMC,EAAYC,aAAaC,QAAQN,GACvC,IAAKI,EAAW,OAAO,KAGvB,GADiBG,KAAKC,MAAQC,SAASL,EAAW,IAbvB,MAkBzB,OAHAC,aAAaK,WAAWX,GACxBM,aAAaK,WAAWV,GAEjB,KAGT,MAAMW,EAASN,aAAaC,QAAQP,GACpC,OAAKY,EAEEC,KAAKC,MAAMF,GAFE,IAGtB,CAAA,MACE,OAAO,IACT,GAMWG,EAAkBC,IAC7B,IACEV,aAAaW,QAAQjB,EAAgBa,KAAKK,UAAUF,IACpDV,aAAaW,QAAQhB,EAA0BO,KAAKC,MAAMU,WAC5D,CAAA,MAEA,GAMWC,EAAYC,IACvB,GAAInB,EAAYoB,IAAID,GAAa,OAEjC,MAAME,EAAOC,SAASC,cAAc,QACpCF,EAAKG,KAAO,4CAA4CL,EAAWM,QAAQ,KAAM,oBACjFJ,EAAKK,IAAM,aACXJ,SAASK,KAAKC,YAAYP,GAC1BrB,EAAY6B,IAAIV,IAOLW,EAAiB,KAC5B,IACE1B,aAAaK,WAAWX,GACxBM,aAAaK,WAAWV,EAC1B,CAAA,MAEA,GCjDK,SAASgC,GAAeC,OAAEA,EAAAC,SAAQA,EAAW,IAAAC,QAAKA,IACvD,MAAOpB,EAAOqB,GAAYC,EAAMC,SAAuB,KAChDC,EAAWC,GAAgBH,EAAMC,UAAS,GAI3CG,EAAaJ,EAAMK,OAAOP,GAgDhC,OA/CAE,EAAMM,UAAU,KACdF,EAAWG,QAAUT,GACpB,CAACA,IAEJE,EAAMM,UAAU,KACKE,WAEjB,MAAMC,EAAc3C,IACpB,GAAI2C,GAAeA,EAAYC,OAAS,EAItC,OAHAX,EAASU,EAAYE,MAAM,EAAGd,SAC9BM,GAAa,GAKf,IACE,MAAMS,QAAiBC,MAAM,uDAAuDjB,qBAEpF,IAAKgB,EAASE,GACZ,MAAM,IAAIC,MAAM,0BAA0BH,EAASI,cAGrD,MAEMC,SAFaL,EAASM,QAEWC,MAAMC,IAAKC,IAAA,CAChDC,MAAOD,EAASE,OAChBC,MAAOH,EAASE,OAChBE,SAAUJ,EAASI,SACnBC,SAAUL,EAASK,YAIrBjD,EAAewC,GACflB,EAASkB,EAAYN,MAAM,EAAGd,GAChC,OAAS8B,GACP,MAAMC,EAAQD,aAAeZ,MAAQY,EAAM,IAAIZ,MAAM,yBAErDc,QAAQD,MAAM,2CAA4CA,GAC1DxB,EAAWG,UAAUqB,EACvB,CAAA,QACEzB,GAAa,EACf,GAGG2B,IACJ,CAAClC,EAAQC,IAEL,CAAEnB,QAAOwB,YAAWpB,WAC7B,CCxDO,MAAMiD,EAAiB/B,EAAMgC,KAAK,UAAwBC,KAAEA,EAAAC,WAAMA,EAAAC,SAAYA,IACnF,MAAMC,EAAUpC,EAAMK,OAAuB,OACtCgC,EAAWC,GAAgBtC,EAAMC,UAAS,GAGjDD,EAAMM,UAAU,KACd,MAAMiC,EAAW,IAAIC,qBACnB,EAAEC,MACIA,EAAMC,iBACRJ,GAAa,GACbC,EAASI,eAGb,CAAEC,UAAW,KAOf,OAJIR,EAAQ7B,SACVgC,EAASM,QAAQT,EAAQ7B,SAGpB,IAAMgC,EAASI,cACrB,IAGH3C,EAAMM,UAAU,KACV+B,GACFvD,EAASmD,EAAKX,QAEf,CAACe,EAAWJ,EAAKX,QAGpB,MAAMwB,EAAY,UAAUb,EAAKT,aAAaS,EAAKR,SAAW,KAAKQ,EAAKR,oBAAsB;AAE9F,OACEzB,EAAAb,cAAC4D,EAAA,CACCC,IAAKZ,EACLd,MAAOW,EAAKT,MACZW,WACAc,UAAU,iBACV,aAAYH,EACZ,gBAAeZ;eAEflC,EAAAb,cAAC,OAAA,CAAK+D,MAAO,CAAEnE,WAAYsD,EAAYJ,EAAKX,WAAQ,GAAa2B,UAAU,mBACxEhB,EAAKT,OAEPS,EAAKR,yBAAYzB,EAAAb,cAAC,QAAK8D,UAAU,4CAA4ChB,EAAKR;eACnFzB,EAAAb,cAACgE,GAAMF,UAAWG,EAAG,eAAgBlB,EAAa,cAAgB,eAGxE,GCnBO,SAASmB,GAAW/B,MACzBA,EAAAgC,SACAA,EAAA1D,OACAA,EAAA2D,YACAA,EAAc,mBAAAC,kBACdA,EAAoB,kBAAAC,cACpBA,EAAgB,kBAAAC,YAChBA,EAAc,mBAAAC,SACdA,GAAW,EAAAV,UACXA,EAAAW,cACAA,EAAA/D,SACAA,EAAW,IAAAC,QACXA,IAEA,MAAMpB,MAAEA,EAAAwB,UAAOA,EAAApB,SAAWA,GAAaa,EAAe,CAAEC,SAAQC,WAAUC,YAG1EE,EAAMM,UAAU,KACVgB,GACFxC,EAASwC,IAEV,CAACA,EAAOxC,IAGX,MAAM+E,EAAUnF;AAEhB,OACEsB,EAAAb,cAAC2E,EAAA,CACCD,UACAvC,QACAgC,WACAS,kBAAmBR,EACnBA,YAAaC,EACbQ,eAAgBP,EAChBE,SAAUA,GAAYzD,EACtB+C,YACAW,gBACAK,cAAe,EAAGC,kBACZhE,iBAEAF,EAAAb,cAAC,QAAK8D,UAAU,gFACbkB,EAAA,CAAWlB,UAAU,yBACrBS,GAKHQ,iBACKlE,EAAAb,cAAC,QAAK+D,MAAO,CAAEnE,WAAYmF,EAAa5C,QAAU4C,EAAa1C,sBAGjExB,EAAAb,cAAC,OAAA,CAAK8D,UAAU,yBAAyBM,GAElDa,WAAY,EAAGC,OAAMnC,aAAYC,6BAC/BnC,EAAAb,cAAC4C,EAAA,CAAeE,KAAMoC,EAAMnC,aAAwBC,cAI5D"}

package/dist/esm/chunks/{two-level-combobox.DJYP--W9.js → two-level-combobox.BVZfsNSN.js}

@@ -1,8 +1,8 @@
-import*as e from"react";import{X as t,CaretUpDown as a,ArrowLeft as l,Spinner as s,Check as n}from"@phosphor-icons/react";import{c as m}from"./utils.C6Qu-kwd.js";import{B as c}from"./button.D_2SonNs.js";import{Command as r,CommandInput as i,CommandList as o,CommandEmpty as u,CommandGroup as d,CommandItem as p}from"../components/ui/command.js";import{Popover as f,PopoverTrigger as E,PopoverContent as v}from"../components/ui/popover.js";import{DivButton as N}from"../components/ui/div-button.js";function b({firstLevelItems:b,fetchSecondLevelItems:g,onSelectionChange:x,firstLevelLabel:h="First Level",secondLevelLabel:y="Second Level",firstLevelPlaceholder:S="Select first level...",className:L,debugMode:w=!1,displayLabel:C=!0}){const[z,k]=e.useState(!1),[$,j]=e.useState("first"),[I,P]=e.useState(null),[V,B]=e.useState(null),[F,M]=e.useState([]),[O,T]=e.useState(!1),[q,A]=e.useState(""),D=e=>{e.stopPropagation(),P(null),B(null),M([]),j("first"),x?.(null,null)};/* @__PURE__ */
+import*as e from"react";import{X as t,CaretUpDown as a,ArrowLeft as l,Spinner as s,Check as n}from"@phosphor-icons/react";import{c as m}from"./utils.C6Qu-kwd.js";import{B as c}from"./button.D_2SonNs.js";import{Command as r,CommandInput as o,CommandList as i,CommandEmpty as u,CommandGroup as d,CommandItem as p}from"../components/ui/command.js";import{Popover as f,PopoverTrigger as E,PopoverContent as v}from"../components/ui/popover.js";import{DivButton as N}from"../components/ui/div-button.js";function b({firstLevelItems:b,fetchSecondLevelItems:g,onSelectionChange:x,firstLevelLabel:h="First Level",secondLevelLabel:y="Second Level",firstLevelPlaceholder:S="Select first level...",className:L,debugMode:w=!1,displayLabel:C=!0}){const[z,k]=e.useState(!1),[$,j]=e.useState("first"),[I,P]=e.useState(null),[V,B]=e.useState(null),[F,M]=e.useState([]),[O,T]=e.useState(!1),[q,A]=e.useState(""),D=e=>{e.stopPropagation(),P(null),B(null),M([]),j("first"),x?.(null,null)};/* @__PURE__ */
 return e.createElement("div",{className:m("space-y-4",L)},/* @__PURE__ */e.createElement("div",{className:"space-y-2"},C&&/* @__PURE__ */e.createElement("label",{className:"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"},V?`${h} & ${y}`:I?`Select ${y}`:`Select ${h}`),/* @__PURE__ */e.createElement(f,{open:z,onOpenChange:e=>{k(e),e&&!I?j("first"):e&&I&&j("second")}},/* @__PURE__ */e.createElement(E,{asChild:!0},/* @__PURE__ */e.createElement(c,{variant:"outline",role:"combobox","aria-expanded":z,className:"w-full justify-between bg-transparent"},
 /* @__PURE__ */e.createElement("div",{className:"flex items-center gap-2 flex-1 min-w-0"},V?/* @__PURE__ */e.createElement("div",{className:"truncate flex items-center gap-1"},I.label," → ",V.label):I?/* @__PURE__ */e.createElement("div",{className:"truncate flex items-center"},I.label):/* @__PURE__ */e.createElement("span",{className:"truncate"},S)),
 /* @__PURE__ */e.createElement("div",{className:"flex items-center gap-1 shrink-0"},(I||V)&&
 /* @__PURE__ */e.createElement(N,{variant:"ghost",size:"sm",className:"size-6 p-0 hover:bg-muted rounded-sm",onClick:D,"aria-label":"Clear selection"},
 /* @__PURE__ */e.createElement(t,{className:"size-3"})),/* @__PURE__ */e.createElement(a,{className:"size-4 shrink-0 opacity-50"})))),/* @__PURE__ */e.createElement(v,{className:"w-full p-0",align:"start"},/* @__PURE__ */e.createElement(r,null,"second"===$&&I&&/* @__PURE__ */e.createElement("div",{className:"flex items-center gap-2 p-2 border-b"},/* @__PURE__ */e.createElement(c,{variant:"ghost",size:"sm",onClick:()=>{j("first"),A("")},className:"h-8 w-8 p-0 shrink-0"},/* @__PURE__ */e.createElement(l,{className:"size-4"})),/* @__PURE__ */e.createElement("div",{className:"text-sm font-medium truncate flex-1 min-w-0 flex items-center"},I.label),/* @__PURE__ */e.createElement(N,{variant:"ghost",size:"sm",className:"size-6 p-0 ml-auto hover:bg-muted rounded-sm shrink-0",onClick:D,"aria-label":"Clear selection"},
-/* @__PURE__ */e.createElement(t,{className:"size-3"})),O&&/* @__PURE__ */e.createElement(s,{className:"size-4 animate-spin text-muted-foreground shrink-0"})),/* @__PURE__ */e.createElement(i,{value:q,onValueChange:A,placeholder:"first"===$?`Search ${h.toLowerCase()}...`:`Search ${y.toLowerCase()}...`}),/* @__PURE__ */e.createElement(o,null,/* @__PURE__ */e.createElement(u,null,"first"===$?`No ${h.toLowerCase()} found.`:`No ${y.toLowerCase()} found.`),"first"===$&&/* @__PURE__ */e.createElement(d,null,b.map(t=>/* @__PURE__ */e.createElement(p,{key:t.value,value:t.label,onSelect:()=>(async e=>{P(e),B(null),T(!0),j("second"),A("");try{const t=await g(e.value);M(t)}catch(t){console.warn(t),M([])}finally{T(!1)}x?.(e,null)})(t)},/* @__PURE__ */e.createElement("span",{className:"flex items-center gap-2"},t.icon,t.label),/* @__PURE__ */e.createElement(n,{className:m("ml-2 size-4",I?.value===t.value?"opacity-100":"opacity-0")})))),"second"===$&&I&&/* @__PURE__ */e.createElement(d,null,O?/* @__PURE__ */e.createElement("div",{className:"flex items-center justify-center py-6"},/* @__PURE__ */e.createElement(s,{className:"size-4 animate-spin text-muted-foreground mr-2"}),/* @__PURE__ */e.createElement("span",{className:"text-sm text-muted-foreground"},"Loading ",y.toLowerCase(),"...")):F.map(t=>/* @__PURE__ */e.createElement(p,{key:t.value,value:t.label,onSelect:()=>(e=>{B(e),k(!1),x?.(I,e)})(t)},/* @__PURE__ */e.createElement("span",{className:"flex items-center gap-2"},t.icon,t.label),/* @__PURE__ */e.createElement(n,{className:m("ml-2 size-4",V?.value===t.value?"opacity-100":"opacity-0")}))))))))),(I||V)&&w&&/* @__PURE__ */e.createElement("div",{className:"mt-6 p-4 bg-muted/50 rounded-lg space-y-2"},/* @__PURE__ */e.createElement("h3",{className:"font-medium text-sm"},"Selected Values:"),I&&/* @__PURE__ */e.createElement("div",{className:"text-sm text-muted-foreground flex items-center gap-1"},/* @__PURE__ */e.createElement("span",{className:"font-medium"},h,":"),/* @__PURE__ */e.createElement("div",{className:"flex items-center"},I.label)),V&&/* @__PURE__ */e.createElement("div",{className:"text-sm text-muted-foreground flex items-center gap-1"},/* @__PURE__ */e.createElement("span",{className:"font-medium"},y,":"),/* @__PURE__ */e.createElement("div",{className:"flex items-center"},V.label))))}export{b as T};
-//# sourceMappingURL=two-level-combobox.DJYP--W9.js.map
+/* @__PURE__ */e.createElement(t,{className:"size-3"})),O&&/* @__PURE__ */e.createElement(s,{className:"size-4 animate-spin text-muted-foreground shrink-0"})),/* @__PURE__ */e.createElement(o,{value:q,onValueChange:A,placeholder:"first"===$?`Search ${h.toLowerCase()}...`:`Search ${y.toLowerCase()}...`}),/* @__PURE__ */e.createElement(i,null,/* @__PURE__ */e.createElement(u,null,"first"===$?`No ${h.toLowerCase()} found.`:`No ${y.toLowerCase()} found.`),"first"===$&&/* @__PURE__ */e.createElement(d,null,b.map(t=>/* @__PURE__ */e.createElement(p,{key:t.value,value:t.label,onSelect:()=>(async e=>{P(e),B(null),T(!0),j("second"),A("");try{const t=await g(e.value);M(t)}catch(t){console.warn(t),M([])}finally{T(!1)}x?.(e,null)})(t)},/* @__PURE__ */e.createElement("span",{className:"flex items-center gap-2"},t.icon,t.label),/* @__PURE__ */e.createElement(n,{className:m("ml-2 size-4",I?.value===t.value?"opacity-100":"opacity-0")})))),"second"===$&&I&&/* @__PURE__ */e.createElement(d,null,O?/* @__PURE__ */e.createElement("div",{className:"flex items-center justify-center py-6"},/* @__PURE__ */e.createElement(s,{className:"size-4 animate-spin text-muted-foreground mr-2"}),/* @__PURE__ */e.createElement("span",{className:"text-sm text-muted-foreground"},"Loading ",y.toLowerCase(),"...")):F.map(t=>/* @__PURE__ */e.createElement(p,{key:t.value,value:t.label,onSelect:()=>(e=>{B(e),k(!1),x?.(I,e)})(t)},/* @__PURE__ */e.createElement("span",{className:"flex items-center gap-2"},t.icon,t.label),/* @__PURE__ */e.createElement(n,{className:m("ml-2 size-4",V?.value===t.value?"opacity-100":"opacity-0")}))))))))),(I||V)&&w&&/* @__PURE__ */e.createElement("div",{className:"mt-6 p-4 bg-muted/50 rounded-lg space-y-2"},/* @__PURE__ */e.createElement("h3",{className:"font-medium text-sm"},"Selected Values:"),I&&/* @__PURE__ */e.createElement("div",{className:"text-sm text-muted-foreground flex items-center gap-1"},/* @__PURE__ */e.createElement("span",{className:"font-medium"},h,":"),/* @__PURE__ */e.createElement("div",{className:"flex items-center"},I.label)),V&&/* @__PURE__ */e.createElement("div",{className:"text-sm text-muted-foreground flex items-center gap-1"},/* @__PURE__ */e.createElement("span",{className:"font-medium"},y,":"),/* @__PURE__ */e.createElement("div",{className:"flex items-center"},V.label))))}export{b as T};
+//# sourceMappingURL=two-level-combobox.BVZfsNSN.js.map

package/dist/esm/chunks/{two-level-combobox.DJYP--W9.js.map → two-level-combobox.BVZfsNSN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"two-level-combobox.DJYP--W9.js","sources":["../../../src/components/two-level-combobox/two-level-combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Check, CaretUpDown, Spinner, ArrowLeft, X } from '@phosphor-icons/react';\n\nimport { ComboboxItem } from '../combobox';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { DivButton } from '@/components/ui/div-button';\nexport interface TwoLevelComboboxProps {\n  firstLevelItems: ComboboxItem[];\n  fetchSecondLevelItems: (firstLevelId: string) => Promise<ComboboxItem[]>;\n  onSelectionChange?: (firstLevel: ComboboxItem | null, secondLevel: ComboboxItem | null) => void;\n  firstLevelLabel?: string;\n  secondLevelLabel?: string;\n  firstLevelPlaceholder?: string;\n  secondLevelPlaceholder?: string;\n  className?: string;\n  debugMode?: boolean;\n  displayLabel?: boolean;\n}\n\nexport function TwoLevelCombobox({\n  firstLevelItems,\n  fetchSecondLevelItems,\n  onSelectionChange,\n  firstLevelLabel = 'First Level',\n  secondLevelLabel = 'Second Level',\n  firstLevelPlaceholder = 'Select first level...',\n  className,\n  debugMode = false,\n  displayLabel = true,\n}: TwoLevelComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n  const [view, setView] = React.useState<'first' | 'second'>('first');\n  const [selectedFirstLevel, setSelectedFirstLevel] = React.useState<ComboboxItem | null>(null);\n  const [selectedSecondLevel, setSelectedSecondLevel] = React.useState<ComboboxItem | null>(null);\n  const [secondLevelItems, setSecondLevelItems] = React.useState<ComboboxItem[]>([]);\n  const [isLoadingSecondLevel, setIsLoadingSecondLevel] = React.useState(false);\n  const [searchValue, setSearchValue] = React.useState('');\n\n  const handleFirstLevelSelect = async (item: ComboboxItem) => {\n    setSelectedFirstLevel(item);\n    setSelectedSecondLevel(null); // Reset second level when first level changes\n    setIsLoadingSecondLevel(true);\n    setView('second');\n    setSearchValue(''); // Clear search input when switching to second level\n\n    try {\n      const fetchedItems = await fetchSecondLevelItems(item.value);\n      setSecondLevelItems(fetchedItems);\n    } catch (error) {\n      console.warn(error);\n      setSecondLevelItems([]);\n    } finally {\n      setIsLoadingSecondLevel(false);\n    }\n\n    onSelectionChange?.(item, null);\n  };\n\n  const handleSecondLevelSelect = (item: ComboboxItem) => {\n    setSelectedSecondLevel(item);\n    setOpen(false);\n    onSelectionChange?.(selectedFirstLevel, item);\n  };\n\n  const handleBackToFirstLevel = () => {\n    setView('first');\n    setSearchValue(''); // Clear search input when going back to first level\n  };\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (isOpen && !selectedFirstLevel) {\n      setView('first');\n    } else if (isOpen && selectedFirstLevel) {\n      setView('second');\n    }\n  };\n\n  const handleClearSelection = (e: React.MouseEvent) => {\n    e.stopPropagation(); // Prevent opening the popover\n    setSelectedFirstLevel(null);\n    setSelectedSecondLevel(null);\n    setSecondLevelItems([]);\n    setView('first');\n    onSelectionChange?.(null, null);\n  };\n\n  const getLabel = () => {\n    if (selectedSecondLevel) return `${firstLevelLabel} & ${secondLevelLabel}`;\n    if (selectedFirstLevel) return `Select ${secondLevelLabel}`;\n\n    return `Select ${firstLevelLabel}`;\n  };\n\n  return (\n    <div className={cn('space-y-4', className)}>\n      <div className=\"space-y-2\">\n        {displayLabel && (\n          <label className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {getLabel()}\n          </label>\n        )}\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              role=\"combobox\"\n              aria-expanded={open}\n              className=\"w-full justify-between bg-transparent\"\n            >\n              <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n                {selectedSecondLevel ? (\n                  <div className=\"truncate flex items-center gap-1\">\n                    {selectedFirstLevel!.label} → {selectedSecondLevel.label}\n                  </div>\n                ) : selectedFirstLevel ? (\n                  <div className=\"truncate flex items-center\">{selectedFirstLevel.label}</div>\n                ) : (\n                  <span className=\"truncate\">{firstLevelPlaceholder}</span>\n                )}\n              </div>\n              <div className=\"flex items-center gap-1 shrink-0\">\n                {(selectedFirstLevel || selectedSecondLevel) && (\n                  // Render button as div to prevent button within button error\n                  <DivButton\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"size-6 p-0 hover:bg-muted rounded-sm\"\n                    onClick={handleClearSelection}\n                    aria-label=\"Clear selection\"\n                  >\n                    <X className=\"size-3\" />\n                  </DivButton>\n                )}\n                <CaretUpDown className=\"size-4 shrink-0 opacity-50\" />\n              </div>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-full p-0\" align=\"start\">\n            <Command>\n              {view === 'second' && selectedFirstLevel && (\n                <div className=\"flex items-center gap-2 p-2 border-b\">\n                  <Button variant=\"ghost\" size=\"sm\" onClick={handleBackToFirstLevel} className=\"h-8 w-8 p-0 shrink-0\">\n                    <ArrowLeft className=\"size-4\" />\n                  </Button>\n                  <div className=\"text-sm font-medium truncate flex-1 min-w-0 flex items-center\">\n                    {selectedFirstLevel.label}\n                  </div>\n                  {/* Render button as div to prevent button within button error */}\n                  <DivButton\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"size-6 p-0 ml-auto hover:bg-muted rounded-sm shrink-0\"\n                    onClick={handleClearSelection}\n                    aria-label=\"Clear selection\"\n                  >\n                    <X className=\"size-3\" />\n                  </DivButton>\n                  {isLoadingSecondLevel && <Spinner className=\"size-4 animate-spin text-muted-foreground shrink-0\" />}\n                </div>\n              )}\n\n              <CommandInput\n                value={searchValue}\n                onValueChange={setSearchValue}\n                placeholder={\n                  view === 'first'\n                    ? `Search ${firstLevelLabel.toLowerCase()}...`\n                    : `Search ${secondLevelLabel.toLowerCase()}...`\n                }\n              />\n              <CommandList>\n                <CommandEmpty>\n                  {view === 'first'\n                    ? `No ${firstLevelLabel.toLowerCase()} found.`\n                    : `No ${secondLevelLabel.toLowerCase()} found.`}\n                </CommandEmpty>\n\n                {view === 'first' && (\n                  <CommandGroup>\n                    {firstLevelItems.map((item) => (\n                      <CommandItem key={item.value} value={item.label} onSelect={() => handleFirstLevelSelect(item)}>\n                        <span className=\"flex items-center gap-2\">\n                          {item.icon}\n                          {item.label}\n                        </span>\n                        <Check\n                          className={cn(\n                            'ml-2 size-4',\n                            selectedFirstLevel?.value === item.value ? 'opacity-100' : 'opacity-0',\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                )}\n\n                {view === 'second' && selectedFirstLevel && (\n                  <CommandGroup>\n                    {isLoadingSecondLevel ? (\n                      <div className=\"flex items-center justify-center py-6\">\n                        <Spinner className=\"size-4 animate-spin text-muted-foreground mr-2\" />\n                        <span className=\"text-sm text-muted-foreground\">\n                          Loading {secondLevelLabel.toLowerCase()}...\n                        </span>\n                      </div>\n                    ) : (\n                      secondLevelItems.map((item) => (\n                        <CommandItem key={item.value} value={item.label} onSelect={() => handleSecondLevelSelect(item)}>\n                          <span className=\"flex items-center gap-2\">\n                            {item.icon}\n                            {item.label}\n                          </span>\n                          <Check\n                            className={cn(\n                              'ml-2 size-4',\n                              selectedSecondLevel?.value === item.value ? 'opacity-100' : 'opacity-0',\n                            )}\n                          />\n                        </CommandItem>\n                      ))\n                    )}\n                  </CommandGroup>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      </div>\n\n      {(selectedFirstLevel || selectedSecondLevel) && debugMode && (\n        <div className=\"mt-6 p-4 bg-muted/50 rounded-lg space-y-2\">\n          <h3 className=\"font-medium text-sm\">Selected Values:</h3>\n          {selectedFirstLevel && (\n            <div className=\"text-sm text-muted-foreground flex items-center gap-1\">\n              <span className=\"font-medium\">{firstLevelLabel}:</span>\n              <div className=\"flex items-center\">{selectedFirstLevel.label}</div>\n            </div>\n          )}\n          {selectedSecondLevel && (\n            <div className=\"text-sm text-muted-foreground flex items-center gap-1\">\n              <span className=\"font-medium\">{secondLevelLabel}:</span>\n              <div className=\"flex items-center\">{selectedSecondLevel.label}</div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["TwoLevelCombobox","firstLevelItems","fetchSecondLevelItems","onSelectionChange","firstLevelLabel","secondLevelLabel","firstLevelPlaceholder","className","debugMode","displayLabel","open","setOpen","React","useState","view","setView","selectedFirstLevel","setSelectedFirstLevel","selectedSecondLevel","setSelectedSecondLevel","secondLevelItems","setSecondLevelItems","isLoadingSecondLevel","setIsLoadingSecondLevel","searchValue","setSearchValue","handleClearSelection","e","stopPropagation","createElement","cn","Popover","onOpenChange","isOpen","PopoverTrigger","asChild","Button","variant","role","label","DivButton","size","onClick","X","CaretUpDown","PopoverContent","align","Command","ArrowLeft","Spinner","CommandInput","value","onValueChange","placeholder","toLowerCase","CommandList","CommandEmpty","CommandGroup","map","item","CommandItem","key","onSelect","async","fetchedItems","error","console","warn","handleFirstLevelSelect","icon","Check","handleSecondLevelSelect"],"mappings":"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"}
+{"version":3,"file":"two-level-combobox.BVZfsNSN.js","sources":["../../../src/components/two-level-combobox/two-level-combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Check, CaretUpDown, Spinner, ArrowLeft, X } from '@phosphor-icons/react';\n\nimport { ComboboxItem } from '../combobox';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { DivButton } from '@/components/ui/div-button';\nexport interface TwoLevelComboboxProps {\n  firstLevelItems: ComboboxItem[];\n  fetchSecondLevelItems: (firstLevelId: string) => Promise<ComboboxItem[]>;\n  onSelectionChange?: (firstLevel: ComboboxItem | null, secondLevel: ComboboxItem | null) => void;\n  firstLevelLabel?: string;\n  secondLevelLabel?: string;\n  firstLevelPlaceholder?: string;\n  secondLevelPlaceholder?: string;\n  className?: string;\n  debugMode?: boolean;\n  displayLabel?: boolean;\n}\n\nexport function TwoLevelCombobox({\n  firstLevelItems,\n  fetchSecondLevelItems,\n  onSelectionChange,\n  firstLevelLabel = 'First Level',\n  secondLevelLabel = 'Second Level',\n  firstLevelPlaceholder = 'Select first level...',\n  className,\n  debugMode = false,\n  displayLabel = true,\n}: TwoLevelComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n  const [view, setView] = React.useState<'first' | 'second'>('first');\n  const [selectedFirstLevel, setSelectedFirstLevel] = React.useState<ComboboxItem | null>(null);\n  const [selectedSecondLevel, setSelectedSecondLevel] = React.useState<ComboboxItem | null>(null);\n  const [secondLevelItems, setSecondLevelItems] = React.useState<ComboboxItem[]>([]);\n  const [isLoadingSecondLevel, setIsLoadingSecondLevel] = React.useState(false);\n  const [searchValue, setSearchValue] = React.useState('');\n\n  const handleFirstLevelSelect = async (item: ComboboxItem) => {\n    setSelectedFirstLevel(item);\n    setSelectedSecondLevel(null); // Reset second level when first level changes\n    setIsLoadingSecondLevel(true);\n    setView('second');\n    setSearchValue(''); // Clear search input when switching to second level\n\n    try {\n      const fetchedItems = await fetchSecondLevelItems(item.value);\n      setSecondLevelItems(fetchedItems);\n    } catch (error) {\n      console.warn(error);\n      setSecondLevelItems([]);\n    } finally {\n      setIsLoadingSecondLevel(false);\n    }\n\n    onSelectionChange?.(item, null);\n  };\n\n  const handleSecondLevelSelect = (item: ComboboxItem) => {\n    setSelectedSecondLevel(item);\n    setOpen(false);\n    onSelectionChange?.(selectedFirstLevel, item);\n  };\n\n  const handleBackToFirstLevel = () => {\n    setView('first');\n    setSearchValue(''); // Clear search input when going back to first level\n  };\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (isOpen && !selectedFirstLevel) {\n      setView('first');\n    } else if (isOpen && selectedFirstLevel) {\n      setView('second');\n    }\n  };\n\n  const handleClearSelection = (e: React.MouseEvent) => {\n    e.stopPropagation(); // Prevent opening the popover\n    setSelectedFirstLevel(null);\n    setSelectedSecondLevel(null);\n    setSecondLevelItems([]);\n    setView('first');\n    onSelectionChange?.(null, null);\n  };\n\n  const getLabel = () => {\n    if (selectedSecondLevel) return `${firstLevelLabel} & ${secondLevelLabel}`;\n    if (selectedFirstLevel) return `Select ${secondLevelLabel}`;\n\n    return `Select ${firstLevelLabel}`;\n  };\n\n  return (\n    <div className={cn('space-y-4', className)}>\n      <div className=\"space-y-2\">\n        {displayLabel && (\n          <label className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {getLabel()}\n          </label>\n        )}\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              role=\"combobox\"\n              aria-expanded={open}\n              className=\"w-full justify-between bg-transparent\"\n            >\n              <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n                {selectedSecondLevel ? (\n                  <div className=\"truncate flex items-center gap-1\">\n                    {selectedFirstLevel!.label} → {selectedSecondLevel.label}\n                  </div>\n                ) : selectedFirstLevel ? (\n                  <div className=\"truncate flex items-center\">{selectedFirstLevel.label}</div>\n                ) : (\n                  <span className=\"truncate\">{firstLevelPlaceholder}</span>\n                )}\n              </div>\n              <div className=\"flex items-center gap-1 shrink-0\">\n                {(selectedFirstLevel || selectedSecondLevel) && (\n                  // Render button as div to prevent button within button error\n                  <DivButton\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"size-6 p-0 hover:bg-muted rounded-sm\"\n                    onClick={handleClearSelection}\n                    aria-label=\"Clear selection\"\n                  >\n                    <X className=\"size-3\" />\n                  </DivButton>\n                )}\n                <CaretUpDown className=\"size-4 shrink-0 opacity-50\" />\n              </div>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-full p-0\" align=\"start\">\n            <Command>\n              {view === 'second' && selectedFirstLevel && (\n                <div className=\"flex items-center gap-2 p-2 border-b\">\n                  <Button variant=\"ghost\" size=\"sm\" onClick={handleBackToFirstLevel} className=\"h-8 w-8 p-0 shrink-0\">\n                    <ArrowLeft className=\"size-4\" />\n                  </Button>\n                  <div className=\"text-sm font-medium truncate flex-1 min-w-0 flex items-center\">\n                    {selectedFirstLevel.label}\n                  </div>\n                  {/* Render button as div to prevent button within button error */}\n                  <DivButton\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"size-6 p-0 ml-auto hover:bg-muted rounded-sm shrink-0\"\n                    onClick={handleClearSelection}\n                    aria-label=\"Clear selection\"\n                  >\n                    <X className=\"size-3\" />\n                  </DivButton>\n                  {isLoadingSecondLevel && <Spinner className=\"size-4 animate-spin text-muted-foreground shrink-0\" />}\n                </div>\n              )}\n\n              <CommandInput\n                value={searchValue}\n                onValueChange={setSearchValue}\n                placeholder={\n                  view === 'first'\n                    ? `Search ${firstLevelLabel.toLowerCase()}...`\n                    : `Search ${secondLevelLabel.toLowerCase()}...`\n                }\n              />\n              <CommandList>\n                <CommandEmpty>\n                  {view === 'first'\n                    ? `No ${firstLevelLabel.toLowerCase()} found.`\n                    : `No ${secondLevelLabel.toLowerCase()} found.`}\n                </CommandEmpty>\n\n                {view === 'first' && (\n                  <CommandGroup>\n                    {firstLevelItems.map((item) => (\n                      <CommandItem key={item.value} value={item.label} onSelect={() => handleFirstLevelSelect(item)}>\n                        <span className=\"flex items-center gap-2\">\n                          {item.icon}\n                          {item.label}\n                        </span>\n                        <Check\n                          className={cn(\n                            'ml-2 size-4',\n                            selectedFirstLevel?.value === item.value ? 'opacity-100' : 'opacity-0',\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                )}\n\n                {view === 'second' && selectedFirstLevel && (\n                  <CommandGroup>\n                    {isLoadingSecondLevel ? (\n                      <div className=\"flex items-center justify-center py-6\">\n                        <Spinner className=\"size-4 animate-spin text-muted-foreground mr-2\" />\n                        <span className=\"text-sm text-muted-foreground\">\n                          Loading {secondLevelLabel.toLowerCase()}...\n                        </span>\n                      </div>\n                    ) : (\n                      secondLevelItems.map((item) => (\n                        <CommandItem key={item.value} value={item.label} onSelect={() => handleSecondLevelSelect(item)}>\n                          <span className=\"flex items-center gap-2\">\n                            {item.icon}\n                            {item.label}\n                          </span>\n                          <Check\n                            className={cn(\n                              'ml-2 size-4',\n                              selectedSecondLevel?.value === item.value ? 'opacity-100' : 'opacity-0',\n                            )}\n                          />\n                        </CommandItem>\n                      ))\n                    )}\n                  </CommandGroup>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      </div>\n\n      {(selectedFirstLevel || selectedSecondLevel) && debugMode && (\n        <div className=\"mt-6 p-4 bg-muted/50 rounded-lg space-y-2\">\n          <h3 className=\"font-medium text-sm\">Selected Values:</h3>\n          {selectedFirstLevel && (\n            <div className=\"text-sm text-muted-foreground flex items-center gap-1\">\n              <span className=\"font-medium\">{firstLevelLabel}:</span>\n              <div className=\"flex items-center\">{selectedFirstLevel.label}</div>\n            </div>\n          )}\n          {selectedSecondLevel && (\n            <div className=\"text-sm text-muted-foreground flex items-center gap-1\">\n              <span className=\"font-medium\">{secondLevelLabel}:</span>\n              <div className=\"flex items-center\">{selectedSecondLevel.label}</div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["TwoLevelCombobox","firstLevelItems","fetchSecondLevelItems","onSelectionChange","firstLevelLabel","secondLevelLabel","firstLevelPlaceholder","className","debugMode","displayLabel","open","setOpen","React","useState","view","setView","selectedFirstLevel","setSelectedFirstLevel","selectedSecondLevel","setSelectedSecondLevel","secondLevelItems","setSecondLevelItems","isLoadingSecondLevel","setIsLoadingSecondLevel","searchValue","setSearchValue","handleClearSelection","e","stopPropagation","createElement","cn","Popover","onOpenChange","isOpen","PopoverTrigger","asChild","Button","variant","role","label","DivButton","size","onClick","X","CaretUpDown","PopoverContent","align","Command","ArrowLeft","Spinner","CommandInput","value","onValueChange","placeholder","toLowerCase","CommandList","CommandEmpty","CommandGroup","map","item","CommandItem","key","onSelect","async","fetchedItems","error","console","warn","handleFirstLevelSelect","icon","Check","handleSecondLevelSelect"],"mappings":"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"}

package/dist/esm/components/chart-radial-stacked.js

@@ -1,3 +1,3 @@
-import e from"react";import{RadialBarChart as t,PolarRadiusAxis as a,Label as r,RadialBar as n}from"recharts";import{a as c}from"../chunks/trend-value.BPBDBsk2.js";import{f as l}from"../chunks/formatNumber.DhVn228t.js";import{Card as s,CardHeader as m,CardTitle as o,CardContent as i}from"./ui/card.js";import{C as u,a as d,b as f}from"../chunks/chart.BDL2tf-S.js";import{c as x}from"../chunks/utils.C6Qu-kwd.js";function p({title:p,data:h,chartConfig:E,trend:k,trendValue:y,className:N}){if(!h||0===h.length)return null;const j=Object.values(h[0]).reduce((e,t)=>"number"==typeof t?e+t:e,0),g=l(j),b=Object.entries(h[0]).sort((e,t)=>t[1]-e[1]);/* @__PURE__ */
-return e.createElement(s,{className:x("flex flex-col w-full min-w-60 p-4 shadow-none",N)},/* @__PURE__ */e.createElement(m,{className:"p-0 space-y-0","data-name":"header"},/* @__PURE__ */e.createElement(o,{className:"uppercase font-inter heading-xxxs tracking-normal"},p)),/* @__PURE__ */e.createElement(i,{"data-name":"content",className:"p-0 flex-1 min-h-0"},/* @__PURE__ */e.createElement(u,{config:E,className:"mx-auto aspect-[2/1] w-full max-w-52"},/* @__PURE__ */e.createElement(t,{data:h,endAngle:180,innerRadius:80,outerRadius:120,cy:"100%"},/* @__PURE__ */e.createElement(d,{cursor:!1,content:/* @__PURE__ */e.createElement(f,{hideLabel:!0})}),/* @__PURE__ */e.createElement(a,{tick:!1,tickLine:!1,axisLine:!1},/* @__PURE__ */e.createElement(r,{content:({viewBox:t})=>t&&"cx"in t&&"cy"in t?/* @__PURE__ */e.createElement("text",{x:t.cx,y:t.cy,textAnchor:"middle"},/* @__PURE__ */e.createElement("tspan",{x:t.cx,y:(t.cy||0)-16,className:"fill-foreground text-xl font-inter"},g)):null})),b.map(([t])=>/* @__PURE__ */e.createElement(n,{key:t,dataKey:t,stackId:"a",cornerRadius:4,fill:E[t]?.color||`var(--color-${t})`,className:"stroke-card stroke-2"})))),k&&y&&/* @__PURE__ */e.createElement(c,{variant:"long",trend:k,trendValue:y,className:"mt-4 justify-center"})))}export{p as ChartRadialStacked};
+import e from"react";import{RadialBarChart as t,PolarRadiusAxis as a,Label as r,RadialBar as n}from"recharts";import{a as c}from"../chunks/trend-value.BPBDBsk2.js";import{f as l}from"../chunks/formatNumber.DhVn228t.js";import{Card as s,CardHeader as m,CardTitle as o,CardContent as i}from"./ui/card.js";import{C as u,a as d,b as f}from"../chunks/chart.BDL2tf-S.js";import{c as x}from"../chunks/utils.C6Qu-kwd.js";function p({title:p,data:h,chartConfig:E,trend:k,trendValue:y,className:N}){if(!h||0===h.length)return null;const g=Object.values(h[0]).reduce((e,t)=>"number"==typeof t?e+t:e,0),j=l(g),b=Object.entries(h[0]).sort((e,t)=>t[1]-e[1]);/* @__PURE__ */
+return e.createElement(s,{className:x("flex flex-col w-full min-w-60 p-4 shadow-none",N)},/* @__PURE__ */e.createElement(m,{className:"p-0 space-y-0","data-name":"header"},/* @__PURE__ */e.createElement(o,{className:"uppercase font-inter heading-xxxs tracking-normal"},p)),/* @__PURE__ */e.createElement(i,{"data-name":"content",className:"p-0 flex-1 min-h-0"},/* @__PURE__ */e.createElement(u,{config:E,className:"mx-auto aspect-[2/1] w-full max-w-52"},/* @__PURE__ */e.createElement(t,{data:h,endAngle:180,innerRadius:80,outerRadius:120,cy:"100%"},/* @__PURE__ */e.createElement(d,{cursor:!1,content:/* @__PURE__ */e.createElement(f,{hideLabel:!0})}),/* @__PURE__ */e.createElement(a,{tick:!1,tickLine:!1,axisLine:!1},/* @__PURE__ */e.createElement(r,{content:({viewBox:t})=>t&&"cx"in t&&"cy"in t?/* @__PURE__ */e.createElement("text",{x:t.cx,y:t.cy,textAnchor:"middle"},/* @__PURE__ */e.createElement("tspan",{x:t.cx,y:(t.cy||0)-16,className:"fill-foreground text-xl font-inter"},j)):null})),b.map(([t])=>/* @__PURE__ */e.createElement(n,{key:t,dataKey:t,stackId:"a",cornerRadius:4,fill:E[t]?.color||`var(--color-${t})`,className:"stroke-card stroke-2"})))),k&&y&&/* @__PURE__ */e.createElement(c,{variant:"long",trend:k,trendValue:y,className:"mt-4 justify-center"})))}export{p as ChartRadialStacked};
 //# sourceMappingURL=chart-radial-stacked.js.map

package/dist/esm/components/chat-search.js

@@ -1,2 +1,2 @@
-export{C as ChatSearch,a as ChatSearchProvider,R as ResolvedConversationFooter,u as useChatSearch,b as useIsChatSearchDirty}from"../chunks/ChatSearch.CcpQJlxZ.js";
+export{C as ChatSearch,a as ChatSearchProvider,R as ResolvedConversationFooter,u as useChatSearch,b as useIsChatSearchDirty}from"../chunks/ChatSearch.EEO6qq9U.js";
 //# sourceMappingURL=chat-search.js.map

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

@@ -1,2 +1,2 @@
-export{F as FontPicker,a as FontPickerItem,c as clearFontCache,g as getCachedFonts,l as loadFont,s as setCachedFonts,u as useFontOptions}from"../chunks/font-picker.YAE99idL.js";
+export{F as FontPicker,a as FontPickerItem,c as clearFontCache,g as getCachedFonts,l as loadFont,s as setCachedFonts,u as useFontOptions}from"../chunks/font-picker.B9GPXyK4.js";
 //# sourceMappingURL=font-picker.js.map

package/dist/esm/components/metric-card.js

@@ -1,4 +1,4 @@
-import e from"react";import{T as t,a}from"../chunks/trend-value.BPBDBsk2.js";import{Card as r,CardHeader as n,CardDescription as m,CardTitle as s,CardContent as l}from"./ui/card.js";import{Tooltip as c,TooltipTrigger as o,TooltipContent as i}from"./ui/tooltip.js";import{c as d}from"../chunks/utils.C6Qu-kwd.js";import{f as u}from"../chunks/formatNumber.DhVn228t.js";const p="A card to display metrics and its trend";function f({title:p,value:f,trend:x,trendValue:N,className:E}){let h=u(Number(f));isNaN(Number(f))&&(h=f);const j=Number(f)>=1e3;/* @__PURE__ */
-return e.createElement(r,{className:d("p-4 shadow-none",E)},/* @__PURE__ */e.createElement(n,{className:"p-0 space-y-0","data-name":"header"},/* @__PURE__ */e.createElement(m,{"data-name":"title",className:"uppercase font-inter heading-xxxs tracking-normal text-dark"},p),/* @__PURE__ */e.createElement(s,{className:"justify-start text-dark text-[64px] font-normal font-inter leading-[72px]"},j?/* @__PURE__ */e.createElement(c,null,/* @__PURE__ */e.createElement(o,{asChild:!0},/* @__PURE__ */e.createElement("span",null,h)),/* @__PURE__ */e.createElement(i,null,f)):/* @__PURE__ */e.createElement("span",null,h))),/* @__PURE__ */e.createElement(l,{"data-name":"content",className:d("p-0 flex items-center gap-[2px]",{"text-green-600":x===t.UP,"text-red-600":x===t.DOWN,"text-dark-600":x===t.FLAT})},
+import e from"react";import{T as t,a}from"../chunks/trend-value.BPBDBsk2.js";import{Card as r,CardHeader as n,CardDescription as m,CardTitle as s,CardContent as l}from"./ui/card.js";import{Tooltip as c,TooltipTrigger as o,TooltipContent as i}from"./ui/tooltip.js";import{c as d}from"../chunks/utils.C6Qu-kwd.js";import{f as u}from"../chunks/formatNumber.DhVn228t.js";const p="A card to display metrics and its trend";function f({title:p,value:f,trend:x,trendValue:N,className:E}){let h=u(Number(f));isNaN(Number(f))&&(h=f);const k=Number(f)>=1e3;/* @__PURE__ */
+return e.createElement(r,{className:d("p-4 shadow-none",E)},/* @__PURE__ */e.createElement(n,{className:"p-0 space-y-0","data-name":"header"},/* @__PURE__ */e.createElement(m,{"data-name":"title",className:"uppercase font-inter heading-xxxs tracking-normal text-dark"},p),/* @__PURE__ */e.createElement(s,{className:"justify-start text-dark text-[64px] font-normal font-inter leading-[72px]"},k?/* @__PURE__ */e.createElement(c,null,/* @__PURE__ */e.createElement(o,{asChild:!0},/* @__PURE__ */e.createElement("span",null,h)),/* @__PURE__ */e.createElement(i,null,f)):/* @__PURE__ */e.createElement("span",null,h))),/* @__PURE__ */e.createElement(l,{"data-name":"content",className:d("p-0 flex items-center gap-[2px]",{"text-green-600":x===t.UP,"text-red-600":x===t.DOWN,"text-dark-600":x===t.FLAT})},
 /* @__PURE__ */e.createElement(a,{trend:x,trendValue:N})))}export{f as MetricCard,p as description};
 //# sourceMappingURL=metric-card.js.map

package/dist/esm/components/two-level-combobox.js

@@ -1,2 +1,2 @@
-export{T as TwoLevelCombobox}from"../chunks/two-level-combobox.DJYP--W9.js";
+export{T as TwoLevelCombobox}from"../chunks/two-level-combobox.BVZfsNSN.js";
 //# sourceMappingURL=two-level-combobox.js.map