@proveanything/smartlinks-utils-ui 0.1.0

package/README.md

@@ -0,0 +1,96 @@
+# @proveanything/smartlinks-ui
+
+Reusable React components for [SmartLinks](https://smartlinks.app) microapps.
+
+## Installation
+
+```bash
+npm install @proveanything/smartlinks-ui
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies in your app:
+
+```bash
+npm install react react-dom @proveanything/smartlinks
+```
+
+## Components
+
+### Asset Picker
+
+Browse, upload, and select media assets scoped to a collection, product, or proof.
+
+```tsx
+import { AssetPicker } from '@proveanything/smartlinks-ui/asset-picker';
+
+<AssetPicker
+  scope={{ type: 'collection', collectionId: 'abc123' }}
+  mode="dialog"
+  allowUpload
+  onSelect={(asset) => console.log('Selected:', asset)}
+  trigger={<button>Choose Image</button>}
+/>
+```
+
+### Conditions Editor
+
+Visual editor for building condition rules with AND/OR logic groups.
+
+```tsx
+import { ConditionsEditor } from '@proveanything/smartlinks-ui/conditions-editor';
+
+<ConditionsEditor
+  value={conditionGroup}
+  onChange={setConditionGroup}
+  fields={[
+    { key: 'status', label: 'Status', type: 'enum', options: [{ label: 'Active', value: 'active' }] },
+    { key: 'age', label: 'Age', type: 'number' },
+  ]}
+/>
+```
+
+### Icon Picker
+
+Searchable Font Awesome icon picker with lazy-loaded icon index for tree shaking.
+
+```tsx
+import { IconPicker } from '@proveanything/smartlinks-ui/icon-picker';
+
+<IconPicker
+  mode="dialog"
+  value="fa-solid fa-heart"
+  onSelect={(icon) => console.log(icon.name)}
+  trigger={<button>Pick Icon</button>}
+/>
+```
+
+## Prerequisites
+
+All components assume `@proveanything/smartlinks` is already initialized in your app via `SL.initializeApi()`. Components that interact with the SmartLinks API (Asset Picker) will use the global SDK import directly.
+
+## Tree Shaking
+
+Each component is a separate entry point. If you only import `AssetPicker`, the Icon Picker's Font Awesome index won't be bundled.
+
+```tsx
+// ✅ Only loads AssetPicker code
+import { AssetPicker } from '@proveanything/smartlinks-ui/asset-picker';
+
+// ✅ Also works — barrel import, bundler tree-shakes unused
+import { AssetPicker } from '@proveanything/smartlinks-ui';
+```
+
+## Development
+
+```bash
+cd packages/smartlinks-ui
+npm install
+npm run build    # Build with tsup
+npm run dev      # Watch mode
+```
+
+## License
+
+MIT

package/dist/IconPicker-BMMQLR5I.d.ts

@@ -0,0 +1,43 @@
+import React$1 from 'react';
+
+/** FA7 icon families */
+type IconFamily = 'classic' | 'duotone' | 'brands';
+/** FA7 icon weight/style within a family */
+type IconStyle = 'solid' | 'regular' | 'light';
+/** What the picker returns when an icon is selected */
+interface IconSelection {
+    /** Full CSS class string, e.g. 'fa-solid fa-heart' or 'fa-duotone fa-solid fa-heart' */
+    name: string;
+    /** Icon family: classic, duotone, brands */
+    family: IconFamily;
+    /** Icon weight/style: solid, regular, light (not applicable for brands) */
+    style: IconStyle | null;
+    /** Human-readable label */
+    label?: string;
+}
+interface IconPickerProps {
+    /** Currently selected icon (full CSS class string) */
+    value?: string;
+    /** Called when an icon is selected */
+    onSelect?: (icon: IconSelection) => void;
+    /** Display as inline or dialog popup */
+    mode?: 'inline' | 'dialog';
+    /** Whether the dialog is open (dialog mode, controlled) */
+    open?: boolean;
+    /** Called when dialog is dismissed */
+    onClose?: () => void;
+    /** Trigger element for dialog mode */
+    trigger?: React.ReactNode;
+    /** Filter to specific families */
+    families?: IconFamily[];
+    /** Filter to specific styles */
+    styles?: IconStyle[];
+    /** Maximum icons to display per page (for performance) */
+    pageSize?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+
+declare const IconPicker: React$1.FC<IconPickerProps>;
+
+export { IconPicker as I, type IconPickerProps as a, type IconSelection as b, type IconFamily as c, type IconStyle as d };

package/dist/chunk-HLFNSOPD.js

@@ -0,0 +1,518 @@
+import { cn } from './chunk-L7FQ52F5.js';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { ChevronRight, Loader2, AlertCircle, Search, Smile, ChevronLeft, X } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/IconPicker/icon-index.ts
+var FA_API = "https://api.fontawesome.com";
+var FA_VERSION = "7.x";
+var SEARCH_QUERY = `
+  query Search($version: String!, $query: String!, $first: Int) {
+    search(version: $version, query: $query, first: $first) {
+      id
+      label
+      unicode
+      familyStylesByLicense {
+        pro {
+          family
+          style
+        }
+      }
+    }
+  }
+`;
+function mapRawIcon(raw) {
+  const proStyles = raw.familyStylesByLicense?.pro || [];
+  const families = /* @__PURE__ */ new Set();
+  const styles = /* @__PURE__ */ new Set();
+  let isBrand = false;
+  for (const fs of proStyles) {
+    if (fs.style === "brands" || fs.family === "brands") {
+      families.add("brands");
+      isBrand = true;
+    } else if (fs.family === "classic" || fs.family === "sharp") {
+      families.add("classic");
+      if (["solid", "regular", "light"].includes(fs.style)) styles.add(fs.style);
+    } else if (fs.family === "duotone") {
+      families.add("duotone");
+      if (["solid", "regular", "light"].includes(fs.style)) styles.add(fs.style);
+    }
+  }
+  return {
+    id: raw.id,
+    label: raw.label || raw.id,
+    unicode: raw.unicode || "",
+    families: [...families],
+    styles: [...styles],
+    isBrand,
+    terms: [raw.id, raw.label?.toLowerCase() || ""]
+  };
+}
+async function gqlRequest(query, variables) {
+  const res = await fetch(FA_API, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ query, variables })
+  });
+  if (!res.ok) throw new Error(`FA API error: ${res.status}`);
+  const json = await res.json();
+  if (json.errors?.length) throw new Error(json.errors[0].message);
+  return json.data;
+}
+async function searchIcons(query, first = 200) {
+  const data = await gqlRequest(SEARCH_QUERY, {
+    version: FA_VERSION,
+    query,
+    first
+  });
+  return (data.search || []).map(mapRawIcon);
+}
+var _catalog = /* @__PURE__ */ new Map();
+var _catalogListeners = /* @__PURE__ */ new Set();
+var _catalogLoading = false;
+var _catalogLoaded = false;
+function getCatalog() {
+  return [..._catalog.values()].sort((a, b) => a.id.localeCompare(b.id));
+}
+function isCatalogLoaded() {
+  return _catalogLoaded;
+}
+function subscribeCatalog(fn) {
+  _catalogListeners.add(fn);
+  return () => {
+    _catalogListeners.delete(fn);
+  };
+}
+function notifyListeners() {
+  for (const fn of _catalogListeners) fn();
+}
+var BROWSE_QUERIES = [
+  "a",
+  "b",
+  "c",
+  "d",
+  "e",
+  "f",
+  "g",
+  "h",
+  "i",
+  "j",
+  "k",
+  "l",
+  "m",
+  "n",
+  "o",
+  "p",
+  "q",
+  "r",
+  "s",
+  "t",
+  "u",
+  "v",
+  "w",
+  "x",
+  "y",
+  "z",
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5"
+];
+async function loadCatalogInBackground() {
+  if (_catalogLoaded || _catalogLoading) return;
+  _catalogLoading = true;
+  notifyListeners();
+  for (let i = 0; i < BROWSE_QUERIES.length; i += 3) {
+    const batch = BROWSE_QUERIES.slice(i, i + 3);
+    const results = await Promise.all(
+      batch.map((q) => searchIcons(q, 200).catch(() => []))
+    );
+    for (const icons of results) {
+      for (const icon of icons) {
+        if (!_catalog.has(icon.id)) _catalog.set(icon.id, icon);
+      }
+    }
+    notifyListeners();
+  }
+  _catalogLoaded = true;
+  _catalogLoading = false;
+  notifyListeners();
+}
+function toFaClass(id, family, style) {
+  if (family === "brands") return `fa-brands fa-${id}`;
+  const stylePrefix = style ? `fa-${style}` : "fa-solid";
+  if (family === "duotone") return `fa-duotone ${stylePrefix} fa-${id}`;
+  return `${stylePrefix} fa-${id}`;
+}
+function parseFaClass(cls) {
+  if (!cls) return null;
+  const parts = cls.trim().split(/\s+/);
+  if (parts.length < 2) return null;
+  const hasDuotone = parts.includes("fa-duotone");
+  const hasBrands = parts.includes("fa-brands");
+  const prefixes = /* @__PURE__ */ new Set(["fa-solid", "fa-regular", "fa-light", "fa-thin", "fa-brands", "fa-duotone"]);
+  const namePart = parts.find((p) => p.startsWith("fa-") && !prefixes.has(p));
+  if (!namePart) return null;
+  const id = namePart.replace(/^fa-/, "");
+  if (hasBrands) return { id, family: "brands", style: null };
+  let style = "solid";
+  if (parts.includes("fa-regular")) style = "regular";
+  else if (parts.includes("fa-light")) style = "light";
+  return { id, family: hasDuotone ? "duotone" : "classic", style };
+}
+
+// src/components/IconPicker/useIconSearch.ts
+function useIconSearch(options = {}) {
+  const { families, styles, pageSize = 100 } = options;
+  const [catalog, setCatalog] = useState(() => getCatalog());
+  const [catalogReady, setCatalogReady] = useState(() => isCatalogLoaded());
+  const [searchResults, setSearchResults] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [searching, setSearching] = useState(false);
+  const [error, setError] = useState(null);
+  const [query, setQuery] = useState("");
+  const [activeFamily, setActiveFamily] = useState("classic");
+  const [activeStyle, setActiveStyle] = useState(null);
+  const [page, setPage] = useState(0);
+  const debounceRef = useRef();
+  useEffect(() => {
+    const unsub = subscribeCatalog(() => {
+      setCatalog(getCatalog());
+      setCatalogReady(isCatalogLoaded());
+    });
+    return unsub;
+  }, []);
+  useEffect(() => {
+    loadCatalogInBackground().then(() => setLoading(false)).catch((err) => {
+      setError(err.message);
+      setLoading(false);
+    });
+  }, []);
+  useEffect(() => {
+    if (catalog.length > 0) setLoading(false);
+  }, [catalog.length]);
+  const setSearch = useCallback((q) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(async () => {
+      setPage(0);
+      const trimmed = q.trim();
+      setQuery(trimmed);
+      if (!trimmed) {
+        setSearchResults(null);
+        setSearching(false);
+        return;
+      }
+      setSearching(true);
+      try {
+        const results = await searchIcons(trimmed, 300);
+        setSearchResults(results);
+      } catch {
+        setSearchResults(null);
+      } finally {
+        setSearching(false);
+      }
+    }, 250);
+  }, []);
+  const source = searchResults ?? catalog;
+  const availableFamilies = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const icon of source) {
+      for (const f of icon.families) {
+        if (!families || families.includes(f)) set.add(f);
+      }
+    }
+    const order = ["classic", "duotone", "brands"];
+    return order.filter((f) => set.has(f));
+  }, [source, families]);
+  useEffect(() => {
+    if (availableFamilies.length > 0 && !availableFamilies.includes(activeFamily)) {
+      setActiveFamily(availableFamilies[0]);
+    }
+  }, [availableFamilies, activeFamily]);
+  const availableStyles = useMemo(() => {
+    if (activeFamily === "brands") return [];
+    const set = /* @__PURE__ */ new Set();
+    for (const icon of source) {
+      if (!icon.families.includes(activeFamily)) continue;
+      for (const s of icon.styles) {
+        if (!styles || styles.includes(s)) set.add(s);
+      }
+    }
+    const order = ["solid", "regular", "light"];
+    return order.filter((s) => set.has(s));
+  }, [source, activeFamily, styles]);
+  const handleSetFamily = useCallback((f) => {
+    setActiveFamily(f);
+    setActiveStyle(null);
+    setPage(0);
+  }, []);
+  const filtered = useMemo(() => {
+    let result = source;
+    result = result.filter((icon) => icon.families.includes(activeFamily));
+    if (activeStyle && activeFamily !== "brands") {
+      result = result.filter((icon) => icon.styles.includes(activeStyle));
+    }
+    if (query && !searchResults) {
+      const lower = query.toLowerCase();
+      const terms = lower.split(/\s+/);
+      result = result.filter(
+        (icon) => terms.every((term) => icon.terms.some((t) => t.includes(term)))
+      );
+    }
+    return result;
+  }, [source, searchResults, activeFamily, activeStyle, query]);
+  const totalPages = Math.ceil(filtered.length / pageSize);
+  const pageIcons = useMemo(
+    () => filtered.slice(page * pageSize, (page + 1) * pageSize),
+    [filtered, page, pageSize]
+  );
+  return {
+    loading: loading && catalog.length === 0,
+    searching,
+    error,
+    query,
+    setSearch,
+    activeFamily,
+    setActiveFamily: handleSetFamily,
+    availableFamilies,
+    activeStyle,
+    setActiveStyle: useCallback((s) => {
+      setActiveStyle(s);
+      setPage(0);
+    }, []),
+    availableStyles,
+    filtered,
+    pageIcons,
+    page,
+    setPage,
+    totalPages,
+    totalCount: filtered.length,
+    catalogReady
+  };
+}
+var FAMILY_LABELS = {
+  classic: "Classic",
+  duotone: "Duotone",
+  brands: "Brands"
+};
+var IconPickerContent = ({
+  value,
+  onSelect,
+  onConfirm,
+  families: allowedFamilies,
+  styles: allowedStyles,
+  pageSize = 100,
+  className
+}) => {
+  const {
+    loading,
+    searching,
+    error,
+    setSearch,
+    activeFamily,
+    setActiveFamily,
+    availableFamilies,
+    activeStyle,
+    setActiveStyle,
+    availableStyles,
+    pageIcons,
+    page,
+    setPage,
+    totalPages,
+    totalCount
+  } = useIconSearch({ families: allowedFamilies, styles: allowedStyles, pageSize });
+  const inputRef = useRef(null);
+  const parsed = value ? parseFaClass(value) : null;
+  const [hoveredId, setHoveredId] = useState(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [loading]);
+  const handleSelect = useCallback((id) => {
+    const family = activeFamily;
+    const style = family === "brands" ? null : activeStyle || "solid";
+    const icon = {
+      name: toFaClass(id, family, style),
+      family,
+      style,
+      label: id
+    };
+    onSelect?.(icon);
+    onConfirm?.(icon);
+  }, [onSelect, onConfirm, activeFamily, activeStyle]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center py-12 gap-3", className), children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 animate-spin text-muted-foreground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading icons\u2026" })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center py-12 gap-3", className), children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-6 h-6 text-destructive" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+      searching && /* @__PURE__ */ jsx(Loader2, { className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          placeholder: "Search icons\u2026",
+          onChange: (e) => setSearch(e.target.value),
+          className: "w-full pl-9 pr-9 py-2 text-sm rounded-md border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring"
+        }
+      )
+    ] }),
+    availableFamilies.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-border pb-2", children: availableFamilies.map((f) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveFamily(f),
+        className: cn(
+          "px-3 py-1.5 text-xs font-semibold rounded-md transition-colors",
+          f === activeFamily ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+        ),
+        children: FAMILY_LABELS[f]
+      },
+      f
+    )) }),
+    availableStyles.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 flex-wrap items-center", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveStyle(null),
+          className: cn(
+            "px-2.5 py-1 text-xs font-medium rounded-full transition-colors",
+            !activeStyle ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-accent"
+          ),
+          children: "All"
+        }
+      ),
+      availableStyles.map((s) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveStyle(s === activeStyle ? null : s),
+          className: cn(
+            "px-2.5 py-1 text-xs font-medium rounded-full capitalize transition-colors",
+            s === activeStyle ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-accent"
+          ),
+          children: s
+        },
+        s
+      )),
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[11px] text-muted-foreground", children: [
+        totalCount,
+        " icons"
+      ] })
+    ] }),
+    pageIcons.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-10 gap-2", children: [
+      /* @__PURE__ */ jsx(Smile, { className: "w-6 h-6 text-muted-foreground/40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No icons found" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-8 sm:grid-cols-10 md:grid-cols-12 gap-1", children: pageIcons.map((icon) => {
+      const isSelected = parsed?.id === icon.id && parsed?.family === activeFamily;
+      const isHovered = hoveredId === icon.id;
+      const displayStyle = activeFamily === "brands" ? null : activeStyle || "solid";
+      const cssClass = toFaClass(icon.id, activeFamily, displayStyle);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => handleSelect(icon.id),
+          onMouseEnter: () => setHoveredId(icon.id),
+          onMouseLeave: () => setHoveredId(null),
+          title: icon.label,
+          className: cn(
+            "aspect-square flex items-center justify-center rounded-md text-base transition-all",
+            isSelected ? "bg-primary/10 text-primary ring-2 ring-primary" : isHovered ? "bg-accent text-accent-foreground scale-110" : "text-muted-foreground hover:bg-accent/50"
+          ),
+          children: /* @__PURE__ */ jsx("i", { className: cssClass })
+        },
+        icon.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "h-6 text-center", children: hoveredId && /* @__PURE__ */ jsxs("code", { className: "text-[11px] text-muted-foreground bg-muted px-2 py-0.5 rounded", children: [
+      "fa-",
+      hoveredId
+    ] }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setPage(Math.max(0, page - 1)),
+          disabled: page === 0,
+          className: "p-1 rounded hover:bg-accent disabled:opacity-30 transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        page + 1,
+        " / ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setPage(Math.min(totalPages - 1, page + 1)),
+          disabled: page >= totalPages - 1,
+          className: "p-1 rounded hover:bg-accent disabled:opacity-30 transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+        }
+      )
+    ] })
+  ] });
+};
+var PickerDialog = ({ open, onClose, children }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-xl max-h-[80vh] bg-background rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden mx-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Select Icon" }),
+        /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-1 rounded hover:bg-accent transition-colors", children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-muted-foreground" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children })
+    ] })
+  ] });
+};
+var IconPicker = (props) => {
+  const { mode = "inline", trigger, open: controlledOpen, onClose, value, onSelect, className, ...rest } = props;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const handleClose = useCallback(() => {
+    setInternalOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const handleSelectAndClose = useCallback((icon) => {
+    onSelect?.(icon);
+    handleClose();
+  }, [onSelect, handleClose]);
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsx(IconPickerContent, { value, onSelect, className, ...rest });
+  }
+  const parsed = value ? parseFaClass(value) : null;
+  const triggerElement = trigger || /* @__PURE__ */ jsxs("div", { className: cn(
+    "inline-flex items-center gap-2 px-3 py-2 rounded-md border border-border cursor-pointer",
+    "hover:border-ring transition-colors",
+    className
+  ), children: [
+    parsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("i", { className: value }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        "fa-",
+        parsed.id
+      ] })
+    ] }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Choose icon\u2026" }),
+    /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5 text-muted-foreground ml-auto" })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { onClick: () => setInternalOpen(true), className: "cursor-pointer", children: triggerElement }),
+    /* @__PURE__ */ jsx(PickerDialog, { open: isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx(IconPickerContent, { value, onSelect: handleSelectAndClose, ...rest }) })
+  ] });
+};
+
+export { IconPicker, parseFaClass, toFaClass };
+//# sourceMappingURL=chunk-HLFNSOPD.js.map
+//# sourceMappingURL=chunk-HLFNSOPD.js.map