@proveanything/smartlinks-utils-ui 0.1.0 → 0.1.1

package/README.md

@@ -16,6 +16,16 @@ This package requires the following peer dependencies in your app:
 npm install react react-dom @proveanything/smartlinks
 ```
 
+## Setup
+
+Import the pre-compiled styles in your app's entry point:
+
+```tsx
+import '@proveanything/smartlinks-ui/styles.css';
+```
+
+This provides all the Tailwind utility classes used by the components. Your app still needs to define the CSS variables (e.g., `--primary`, `--border`) — these come from your own design system (shadcn, custom theme, etc.).
+
 ## Components
 
 ### Asset Picker

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proveanything/smartlinks-utils-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Reusable React components for SmartLinks microapps — Asset Picker, Conditions Editor, Icon Picker, and more.",
   "type": "module",
   "main": "dist/index.js",
@@ -11,6 +11,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./asset-picker": {
       "types": "./dist/components/AssetPicker/index.d.ts",
       "import": "./dist/components/AssetPicker/index.js"
@@ -37,25 +38,28 @@
   },
   "publishConfig": {
     "access": "public"
-  },  
+  },
   "peerDependencies": {
+    "@proveanything/smartlinks": "^1.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@proveanything/smartlinks": "^1.3.0"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "@proveanything/smartlinks": "^1.3.17",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "tsup": "^8.0.0",
     "typescript": "^5.5.0"
   },
   "dependencies": {
-    "lucide-react": "^0.462.0",
+    "@tailwindcss/postcss": "^4.2.1",
+    "autoprefixer": "^10.4.24",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.2"
+    "lucide-react": "^0.462.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^4.2.1"
   },
   "keywords": [
     "smartlinks",

package/dist/chunk-HLFNSOPD.js

@@ -1,518 +0,0 @@
-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