@xex/ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 iGattreX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# @xex/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components, app shell and `ThemeProvider` for the XeX design system.
+
+```tsx
+import { Button, Tabs, DataTable, ThemeProvider } from '@xex/ui'
+```
+
+- Peer dependencies: `react` and `react-dom` 19.
+- Needs `@xex/tailwind-preset` in your Tailwind config and `@xex/tokens/styles.css` imported once. See the [repository README](../../README.md) for the full setup.
+- Optional entry `@xex/ui/font-picker` adds a Google Fonts picker (it makes requests to Google Fonts and Fontsource).
+
+MIT licensed.

package/dist/chunk-3M3PAPT3.js

@@ -0,0 +1,215 @@
+// src/components/Spinner.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizes = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-8 w-8",
+  xl: "h-12 w-12"
+};
+function Spinner({ size = "sm", label = "Loading", decorative = false, className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: clsx(sizes[size], "animate-spin motion-reduce:animate-[spin_2s_linear_infinite]", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      ...decorative ? { "aria-hidden": true } : { role: "status", "aria-label": label },
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", className: "opacity-25" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 12a8 8 0 018-8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", className: "opacity-90" })
+      ]
+    }
+  );
+}
+
+// src/components/Button.tsx
+import clsx2 from "clsx";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var variants = {
+  primary: "bg-brand-600 hover:bg-brand-700 text-white shadow-sm",
+  secondary: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 shadow-sm",
+  ghost: "bg-transparent text-gray-600 hover:bg-gray-100",
+  danger: "bg-red-600 hover:bg-red-700 text-white shadow-sm",
+  outline: "border border-brand-500 text-brand-700 hover:bg-brand-50 bg-transparent"
+};
+var sizes2 = {
+  xs: "px-2 py-1 text-xs rounded-md gap-1",
+  sm: "px-3 py-1.5 text-sm rounded-lg gap-1.5",
+  md: "px-4 py-2 text-sm rounded-lg gap-2",
+  lg: "px-5 py-2.5 text-base rounded-xl gap-2.5"
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  icon,
+  iconRight,
+  disabled,
+  className,
+  children,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: clsx2(
+        "inline-flex items-center justify-center font-medium transition-all duration-150",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400 focus-visible:ring-offset-1",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        variants[variant],
+        sizes2[size],
+        className
+      ),
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx2(Spinner, { decorative: true }) : icon,
+        children,
+        iconRight
+      ]
+    }
+  );
+}
+
+// src/components/LoadingDots.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function LoadingDots({ className }) {
+  return /* @__PURE__ */ jsxs3("span", { role: "status", "aria-label": "Loading", className: `xex-dots ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx3("i", {}),
+    /* @__PURE__ */ jsx3("i", {}),
+    /* @__PURE__ */ jsx3("i", {})
+  ] });
+}
+
+// src/theme/ThemeContext.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import {
+  DEFAULT_FONT,
+  DEFAULT_THEME_ID,
+  SHADE_STEPS,
+  fontStack,
+  loadGoogleFont,
+  themes as defaultThemes
+} from "@xex/tokens";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MAX_RECENT_FONTS = 5;
+var ThemeContext = createContext(null);
+function read(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function write(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function readJson(key, guard) {
+  try {
+    const raw = read(key);
+    const parsed = raw ? JSON.parse(raw) : null;
+    return guard(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+var isFont = (v) => typeof v === "object" && v !== null && typeof v.family === "string" && typeof v.category === "string";
+function ThemeProvider({
+  children,
+  storagePrefix = "xex",
+  themes = defaultThemes,
+  defaultThemeId = DEFAULT_THEME_ID,
+  defaultFont = DEFAULT_FONT
+}) {
+  const keys = useMemo(
+    () => ({
+      theme: `${storagePrefix}-theme`,
+      mode: `${storagePrefix}-mode`,
+      font: `${storagePrefix}-font`,
+      recent: `${storagePrefix}-recent-fonts`
+    }),
+    [storagePrefix]
+  );
+  const findTheme = useCallback((id) => themes.find((t) => t.id === id) ?? themes.find((t) => t.id === defaultThemeId) ?? themes[0], [themes, defaultThemeId]);
+  const [themeId, setThemeIdState] = useState(() => findTheme(read(keys.theme)).id);
+  const [mode, setModeState] = useState(() => {
+    const saved = read(keys.mode);
+    if (saved === "light" || saved === "dark") return saved;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  const [font, setFontState] = useState(() => readJson(keys.font, isFont) ?? defaultFont);
+  const [recentFonts, setRecentFonts] = useState(() => {
+    const saved = readJson(keys.recent, (v) => Array.isArray(v) && v.every(isFont));
+    return (saved ?? [defaultFont]).slice(0, MAX_RECENT_FONTS);
+  });
+  const theme = useMemo(() => findTheme(themeId), [findTheme, themeId]);
+  useEffect(() => {
+    loadGoogleFont(font);
+    document.documentElement.style.setProperty("--font-sans", fontStack(font));
+  }, [font]);
+  useEffect(() => recentFonts.forEach(loadGoogleFont), [recentFonts]);
+  const setFont = useCallback(
+    (next) => {
+      setFontState(next);
+      write(keys.font, JSON.stringify(next));
+      setRecentFonts((prev) => {
+        const list = [next, ...prev.filter((f) => f.family !== next.family)].slice(0, MAX_RECENT_FONTS);
+        write(keys.recent, JSON.stringify(list));
+        return list;
+      });
+    },
+    [keys]
+  );
+  useEffect(() => {
+    const root = document.documentElement;
+    for (const step of SHADE_STEPS) root.style.setProperty(`--brand-${step}`, theme.shades[step]);
+  }, [theme]);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.dataset.mode = mode;
+    root.classList.toggle("dark", mode === "dark");
+    root.style.colorScheme = mode;
+  }, [mode]);
+  const setThemeId = useCallback(
+    (id) => {
+      const next = findTheme(id).id;
+      setThemeIdState(next);
+      write(keys.theme, next);
+    },
+    [findTheme, keys]
+  );
+  const setMode = useCallback(
+    (next) => {
+      setModeState(next);
+      write(keys.mode, next);
+    },
+    [keys]
+  );
+  const toggleMode = useCallback(() => setMode(mode === "dark" ? "light" : "dark"), [mode, setMode]);
+  const value = useMemo(
+    () => ({ theme, themes, setThemeId, mode, setMode, toggleMode, font, recentFonts, setFont }),
+    [theme, themes, setThemeId, mode, setMode, toggleMode, font, recentFonts, setFont]
+  );
+  return /* @__PURE__ */ jsx4(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used inside <ThemeProvider>");
+  return ctx;
+}
+
+export {
+  Spinner,
+  Button,
+  LoadingDots,
+  ThemeProvider,
+  useTheme
+};

package/dist/font-picker.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { FontChoice } from '@xex/tokens';
+
+/** Last-5-used chips + a searchable dropdown of every Google Font. */
+declare function FontPicker(): react.JSX.Element;
+
+declare function fetchFontCatalog(): Promise<FontChoice[]>;
+interface CatalogState {
+    fonts: FontChoice[];
+    status: 'idle' | 'loading' | 'ready' | 'error';
+    retry: () => void;
+}
+/** Loads the catalog when `enabled` first becomes true. */
+declare function useFontCatalog(enabled: boolean): CatalogState;
+
+export { type CatalogState, FontPicker, fetchFontCatalog, useFontCatalog };

package/dist/font-picker.js

@@ -0,0 +1,325 @@
+import {
+  Button,
+  LoadingDots,
+  useTheme
+} from "./chunk-3M3PAPT3.js";
+
+// src/font-picker/FontPicker.tsx
+import { useEffect as useEffect2, useId, useLayoutEffect, useMemo, useRef, useState as useState2 } from "react";
+import clsx from "clsx";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { ArrowUturnLeftIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { DEFAULT_FONT, FONT_CATEGORIES as FONT_CATEGORIES2, SYSTEM_FONT, fontStack, loadFontPreviews } from "@xex/tokens";
+
+// src/font-picker/catalog.ts
+import { useEffect, useState } from "react";
+import { FONT_CATEGORIES } from "@xex/tokens";
+var KNOWN_CATEGORIES = new Set(FONT_CATEGORIES.map((c) => c.value));
+var catalogCache = null;
+var catalogPromise = null;
+function fetchFontCatalog() {
+  if (catalogCache) return Promise.resolve(catalogCache);
+  catalogPromise ??= fetch("https://api.fontsource.org/v1/fonts?type=google").then((r) => {
+    if (!r.ok) throw new Error(`Font catalog request failed (${r.status})`);
+    return r.json();
+  }).then((list) => {
+    catalogCache = list.filter((e) => KNOWN_CATEGORIES.has(e.category)).map((e) => ({ family: e.family, category: e.category, weights: e.weights })).sort((a, b) => a.family.localeCompare(b.family));
+    return catalogCache;
+  }).catch((err) => {
+    catalogPromise = null;
+    throw err;
+  });
+  return catalogPromise;
+}
+function useFontCatalog(enabled) {
+  const [fonts, setFonts] = useState(catalogCache ?? []);
+  const [status, setStatus] = useState(catalogCache ? "ready" : "idle");
+  const [attempt, setAttempt] = useState(0);
+  useEffect(() => {
+    if (!enabled || status === "ready") return;
+    let live = true;
+    setStatus("loading");
+    fetchFontCatalog().then((list) => {
+      if (!live) return;
+      setFonts(list);
+      setStatus("ready");
+    }).catch(() => live && setStatus("error"));
+    return () => {
+      live = false;
+    };
+  }, [enabled, attempt]);
+  return { fonts, status, retry: () => setAttempt((n) => n + 1) };
+}
+
+// src/font-picker/FontPicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PAGE_SIZE = 40;
+function FontPicker() {
+  const { font, recentFonts, setFont } = useTheme();
+  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const [category, setCategory] = useState2("");
+  const [visible, setVisible] = useState2(PAGE_SIZE);
+  const uid = useId();
+  const listId = `${uid}-list`;
+  const optId = (i) => `${uid}-opt-${i}`;
+  const [active, setActive] = useState2(0);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const pendingScroll = useRef(false);
+  const scrollToActive = useRef(false);
+  const [viewIdx, setViewIdx] = useState2(0);
+  const catalog = useFontCatalog(open);
+  useEffect2(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const matches = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const all = [SYSTEM_FONT, ...catalog.fonts];
+    return all.filter((f) => (!category || f.category === category) && (!q || f.family.toLowerCase().includes(q)));
+  }, [catalog.fonts, query, category]);
+  const syncView = (list) => {
+    const rowH = list.querySelector("li")?.getBoundingClientRect().height || 32;
+    setViewIdx(Math.floor(list.scrollTop / rowH / 10) * 10);
+  };
+  useEffect2(() => {
+    if (!open) {
+      pendingScroll.current = false;
+      return;
+    }
+    const idx = !query && !category ? matches.findIndex((f) => f.family === font.family) : -1;
+    setActive(Math.max(idx, 0));
+    if (idx >= 0) {
+      setVisible(Math.max(PAGE_SIZE, (Math.floor(idx / PAGE_SIZE) + 2) * PAGE_SIZE));
+      pendingScroll.current = true;
+    } else {
+      setVisible(PAGE_SIZE);
+      setViewIdx(0);
+      listRef.current?.scrollTo({ top: 0 });
+    }
+  }, [open, matches]);
+  useLayoutEffect(() => {
+    if (!pendingScroll.current) return;
+    const list = listRef.current;
+    const el = list?.querySelector('[aria-selected="true"]');
+    if (!list || !el) return;
+    list.scrollTop = el.offsetTop - list.clientHeight / 2 + el.clientHeight / 2;
+    syncView(list);
+    pendingScroll.current = false;
+  }, [visible, matches]);
+  useLayoutEffect(() => {
+    if (!scrollToActive.current) return;
+    const list = listRef.current;
+    const el = open ? document.getElementById(optId(active)) : null;
+    if (!list || !el) return;
+    scrollToActive.current = false;
+    if (el.offsetTop < list.scrollTop) list.scrollTop = el.offsetTop;
+    else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight) list.scrollTop = el.offsetTop + el.offsetHeight - list.clientHeight;
+  }, [active, open, visible]);
+  const onScroll = (e) => {
+    const el = e.currentTarget;
+    syncView(el);
+    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 80) setVisible((v) => Math.min(v + PAGE_SIZE, matches.length));
+  };
+  useEffect2(() => {
+    if (open) loadFontPreviews(matches.slice(Math.max(0, viewIdx - 10), Math.min(visible, viewIdx + 50)));
+  }, [open, matches, visible, viewIdx]);
+  const choose = (f) => {
+    setFont(f);
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const openList = () => {
+    setQuery("");
+    setCategory("");
+    setOpen(true);
+  };
+  const moveActive = (next) => {
+    const i = Math.min(Math.max(next, 0), matches.length - 1);
+    scrollToActive.current = true;
+    setActive(i);
+    setVisible((v) => Math.max(v, Math.min(i + 20, matches.length)));
+  };
+  const onSearchKeyDown = (e) => {
+    if (e.key === "ArrowDown") moveActive(active + 1);
+    else if (e.key === "ArrowUp") moveActive(active - 1);
+    else if (e.key === "PageDown") moveActive(active + 8);
+    else if (e.key === "PageUp") moveActive(active - 8);
+    else if (e.key === "Enter" && matches[active]) choose(matches[active]);
+    else return;
+    e.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: rootRef,
+          className: "relative w-full max-w-sm",
+          onMouseDown: (e) => {
+            if (open && !(e.target instanceof HTMLInputElement) && listRef.current?.parentElement?.contains(e.target)) e.preventDefault();
+          },
+          onBlur: (e) => {
+            if (open && e.relatedTarget && !rootRef.current?.contains(e.relatedTarget)) setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: triggerRef,
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-controls": open ? listId : void 0,
+                onClick: () => open ? setOpen(false) : openList(),
+                onKeyDown: (e) => {
+                  if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+                    e.preventDefault();
+                    openList();
+                  }
+                },
+                className: "flex w-full cursor-default items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2 text-left text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", style: { fontFamily: fontStack(font) }, children: font.family }),
+                  /* @__PURE__ */ jsx(ChevronUpDownIcon, { className: "h-5 w-5 shrink-0 text-gray-400" })
+                ]
+              }
+            ),
+            open && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 rounded-xl border border-gray-200 bg-white p-2 shadow-xl", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    autoFocus: true,
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    onKeyDown: onSearchKeyDown,
+                    role: "combobox",
+                    "aria-expanded": true,
+                    "aria-controls": listId,
+                    "aria-autocomplete": "list",
+                    "aria-label": "Search fonts",
+                    "aria-activedescendant": matches[active] ? optId(active) : void 0,
+                    placeholder: "Search Google Fonts\u2026",
+                    className: "w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-8 pr-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: [{ value: "", label: "All" }, ...FONT_CATEGORIES2].map((c) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setCategory(c.value),
+                  className: clsx(
+                    "rounded-full px-2.5 py-0.5 text-xs font-medium",
+                    category === c.value ? "bg-brand-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                  ),
+                  children: c.label
+                },
+                c.value
+              )) }),
+              /* @__PURE__ */ jsxs("ul", { id: listId, ref: listRef, role: "listbox", "aria-label": "Fonts", onScroll, className: "relative mt-2 max-h-64 overflow-y-auto", children: [
+                catalog.status === "loading" && /* @__PURE__ */ jsxs("li", { className: "px-3 py-2 text-sm text-gray-500", children: [
+                  "Loading fonts ",
+                  /* @__PURE__ */ jsx(LoadingDots, {})
+                ] }),
+                catalog.status === "error" && /* @__PURE__ */ jsxs("li", { className: "px-3 py-2 text-sm text-red-600", children: [
+                  "Couldn\u2019t load the font list.",
+                  " ",
+                  /* @__PURE__ */ jsx("button", { type: "button", className: "font-medium underline", onClick: catalog.retry, children: "Retry" })
+                ] }),
+                matches.slice(0, visible).map((f, i) => /* @__PURE__ */ jsx("li", { id: optId(i), role: "option", "aria-selected": f.family === font.family, onMouseMove: () => i !== active && setActive(i), children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    title: f.family,
+                    tabIndex: -1,
+                    onClick: () => choose(f),
+                    className: clsx(
+                      "flex w-full cursor-default items-center justify-between rounded-md px-3 py-1.5 text-left text-sm text-gray-800",
+                      i === active && "bg-gray-100 ring-2 ring-inset ring-brand-300",
+                      f.family === font.family && "bg-brand-50 font-medium"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: { fontFamily: fontStack(f) }, children: f.family }),
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-xs text-gray-400", children: [
+                        f.category,
+                        f.family === font.family && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 text-brand-600" })
+                      ] })
+                    ]
+                  }
+                ) }, f.family)),
+                catalog.status === "ready" && matches.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-gray-500", children: "No fonts match." }),
+                visible < matches.length && /* @__PURE__ */ jsxs("li", { className: "px-3 py-2 text-xs text-gray-400", children: [
+                  "Showing ",
+                  visible,
+                  " of ",
+                  matches.length,
+                  " \u2014 scroll for more"
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", style: { fontFamily: fontStack(DEFAULT_FONT) }, children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+          "Selected: ",
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900", children: font.family }),
+          font.stack ? "" : /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+            " \xB7 ",
+            font.category
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "ghost",
+            disabled: font.family === DEFAULT_FONT.family,
+            onClick: () => setFont(DEFAULT_FONT),
+            icon: /* @__PURE__ */ jsx(ArrowUturnLeftIcon, { className: "h-4 w-4" }),
+            title: `Reset to ${DEFAULT_FONT.family}`,
+            children: "Reset"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs text-gray-500", children: "Recently used" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: recentFonts.map((f) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: f.family === font.family ? "primary" : "secondary",
+          title: f.family,
+          onClick: () => setFont(f),
+          style: { fontFamily: fontStack(f) },
+          children: f.family
+        },
+        f.family
+      )) })
+    ] })
+  ] });
+}
+export {
+  FontPicker,
+  fetchFontCatalog,
+  useFontCatalog
+};