@hilum/ui 3.4.0 → 3.5.0

package/src/lib/font-weight.ts

@@ -0,0 +1,18 @@
+// Inter (variable) weight tokens for `fontVariationSettings`.
+//
+// Each weight is paired with an optical-size (`opsz`) value so that animating
+// between weights keeps the text's advance width nearly constant: a heavier
+// `wght` widens the text, and a tighter (higher) `opsz` pulls it back. The
+// opsz values below were measured against the 400/opsz-14 baseline and hold
+// the closed→bold width delta to within ~0.6px (≈±0.5%), centered on zero,
+// down from ~3px with no compensation. A single opsz value can't zero every
+// string (glyph mixes scale differently), so a sub-pixel residual remains.
+//
+// Setting `opsz` explicitly here overrides `font-optical-sizing: auto`, which
+// is intended — we want weight, not font-size, to drive optical size.
+export const fontWeights = {
+  normal: "'wght' 400, 'opsz' 14",
+  medium: "'wght' 450, 'opsz' 15",
+  semibold: "'wght' 550, 'opsz' 20",
+  bold: "'wght' 700, 'opsz' 25",
+} as const;

package/src/lib/icon-context.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from "react";
+
+import {
+  iconMap,
+  iconLibraryOrder,
+  type IconLibrary,
+  type IconName,
+  type IconComponent,
+} from "./icon-map";
+
+// Re-export types for consumers
+export type { IconComponent, IconName, IconLibrary } from "./icon-map";
+export { iconLibraryOrder, iconLibraryLabels } from "./icon-map";
+
+interface IconContextValue {
+  iconLibrary: IconLibrary;
+  setIconLibrary: (lib: IconLibrary) => void;
+}
+
+const IconContext = createContext<IconContextValue | null>(null);
+
+/**
+ * Returns the current icon library and setter.
+ * Throws if used outside IconProvider.
+ */
+function useIconLibrary() {
+  const ctx = useContext(IconContext);
+  if (!ctx) throw new Error("useIconLibrary must be used within an IconProvider");
+  return ctx;
+}
+
+/**
+ * Returns a single icon component for the given name.
+ * Falls back to Lucide if no provider is present.
+ */
+function useIcon(name: IconName): IconComponent {
+  const ctx = useContext(IconContext);
+  if (!ctx) return iconMap.lucide[name];
+  return iconMap[ctx.iconLibrary][name];
+}
+
+/**
+ * Returns the full icon map for the current library.
+ * Falls back to Lucide if no provider is present.
+ */
+function useIcons(): Record<IconName, IconComponent> {
+  const ctx = useContext(IconContext);
+  const lib = ctx?.iconLibrary ?? "lucide";
+  return useMemo(() => iconMap[lib], [lib]);
+}
+
+function IconProvider({
+  children,
+  defaultLibrary = "lucide",
+}: {
+  children: ReactNode;
+  defaultLibrary?: IconLibrary;
+}) {
+  const [iconLibrary, setIconLibraryState] = useState<IconLibrary>(defaultLibrary);
+
+  const setIconLibrary = useCallback((next: IconLibrary) => {
+    setIconLibraryState(next);
+  }, []);
+
+  // Global keyboard shortcut: I to cycle icon library
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "i" && e.key !== "I") return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement)?.isContentEditable)
+        return;
+      e.preventDefault();
+      setIconLibraryState((prev) => {
+        const idx = iconLibraryOrder.indexOf(prev);
+        return iconLibraryOrder[(idx + 1) % iconLibraryOrder.length];
+      });
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  return (
+    <IconContext.Provider value={{ iconLibrary, setIconLibrary }}>{children}</IconContext.Provider>
+  );
+}
+
+export { IconProvider, useIcon, useIcons, useIconLibrary };