@abydahana/iconpicker 1.0.0

package/dist/themes/tailwind.css

@@ -0,0 +1,112 @@
+/**
+ * @abydahana/iconpicker Tailwind UI Theme
+ */
+
+.iconpicker-theme-tailwind {
+  background-color: #ffffff;
+  color: #0f172a;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
+    0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+
+.iconpicker-theme-tailwind .iconpicker-search-input {
+  background-color: #f8fafc;
+  color: #0f172a;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+}
+
+.iconpicker-theme-tailwind .iconpicker-search-input:focus {
+  background-color: #ffffff;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.iconpicker-theme-tailwind .iconpicker-tab {
+  color: #64748b;
+  border-radius: 0.375rem;
+  font-weight: 500;
+}
+
+.iconpicker-theme-tailwind .iconpicker-tab:hover {
+  background-color: #f1f5f9;
+  color: #0f172a;
+}
+
+.iconpicker-theme-tailwind .iconpicker-tab.is-active {
+  background-color: #6366f1;
+  color: #ffffff;
+}
+
+.iconpicker-theme-tailwind .iconpicker-item {
+  color: #334155;
+  border-radius: 0.5rem;
+}
+
+.iconpicker-theme-tailwind .iconpicker-item:hover {
+  background-color: #f1f5f9;
+  border-color: #cbd5e1;
+}
+
+.iconpicker-theme-tailwind .iconpicker-item.is-selected {
+  background-color: #6366f1;
+  color: #ffffff;
+  border-color: #6366f1;
+}
+
+.iconpicker-theme-tailwind .iconpicker-footer {
+  border-top-color: #f1f5f9;
+  background-color: #f8fafc;
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
+.iconpicker-theme-tailwind .iconpicker-btn-clear {
+  color: #ef4444;
+}
+
+.iconpicker-theme-tailwind .iconpicker-btn-clear:hover {
+  background-color: #fee2e2;
+}
+
+/* Dark mode auto support for Tailwind theme */
+@media (prefers-color-scheme: dark) {
+  .iconpicker-theme-tailwind {
+    background-color: #0f172a;
+    color: #f8fafc;
+    border-color: #1e293b;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+  }
+
+  .iconpicker-theme-tailwind .iconpicker-search-input {
+    background-color: #1e293b;
+    color: #f8fafc;
+    border-color: #334155;
+  }
+
+  .iconpicker-theme-tailwind .iconpicker-tab {
+    color: #94a3b8;
+  }
+
+  .iconpicker-theme-tailwind .iconpicker-tab:hover {
+    background-color: #1e293b;
+    color: #f8fafc;
+  }
+
+  .iconpicker-theme-tailwind .iconpicker-item {
+    color: #cbd5e1;
+  }
+
+  .iconpicker-theme-tailwind .iconpicker-item:hover {
+    background-color: #1e293b;
+    border-color: #334155;
+  }
+
+  .iconpicker-theme-tailwind .iconpicker-footer {
+    border-top-color: #1e293b;
+    background-color: #0b1120;
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,35 @@
+export interface IconItem {
+    name: string;
+    className: string;
+    set: string;
+    keywords?: string[];
+}
+export interface IconSetDefinition {
+    id: string;
+    title: string;
+    prefix: string;
+    formatter?: (name: string) => string;
+    icons: string[];
+}
+export type IconPickerTheme = "aksara" | "bootstrap" | "tailwind" | "default";
+export type IconPickerPlacement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top" | "auto";
+export interface IconPickerOptions {
+    theme?: IconPickerTheme;
+    placement?: IconPickerPlacement;
+    iconSets?: (string | IconSetDefinition)[];
+    defaultSet?: string;
+    searchPlaceholder?: string;
+    value?: string;
+    container?: HTMLElement | string;
+    showTabs?: boolean;
+    showFooter?: boolean;
+    closeOnSelect?: boolean;
+    emptyText?: string;
+    itemsPerPage?: number;
+    loadFonts?: boolean;
+    fontUrls?: Record<string, string>;
+    onSelect?: (icon: IconItem) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,mBAAmB,GAAG,cAAc,GAAG,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEtH,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@abydahana/iconpicker",
+  "version": "1.0.0",
+  "description": "Universal, framework-agnostic floating popover icon picker with multi-pack support",
+  "author": "Aby Dahana",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./src": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./css": "./dist/iconpicker.css",
+    "./themes/*": "./dist/themes/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node --import tsx build.ts",
+    "check": "tsc --noEmit",
+    "lint": "eslint src build.ts scripts eslint.config.js",
+    "lint:fix": "eslint src build.ts scripts eslint.config.js --fix",
+    "format": "prettier --write . && eslint src build.ts scripts eslint.config.js --fix",
+    "format:check": "prettier --check . && eslint src build.ts scripts eslint.config.js",
+    "all": "npm run format && npm run lint && npm run build",
+    "prepublishOnly": "npm run all"
+  },
+  "keywords": [
+    "iconpicker",
+    "icon-picker",
+    "icons",
+    "popover",
+    "mdi",
+    "fontawesome",
+    "bootstrap-icons",
+    "tabler-icons",
+    "remixicon",
+    "boxicons",
+    "lucide",
+    "aksara-ui",
+    "tailwind"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^26.4.1",
+    "eslint": "^10.10.0",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.9.6",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.69.0"
+  }
+}

package/src/core/font-loader.ts

@@ -0,0 +1,38 @@
+const DEFAULT_FONT_URLS: Record<string, string> = {
+  mdi: "https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css",
+  fa: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css",
+  fontawesome: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css",
+  bi: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css",
+  bootstrap: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css",
+  tabler: "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css",
+  ti: "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css",
+  remix: "https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css",
+  ri: "https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css",
+  boxicons: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",
+  bx: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+};
+
+const loadedFonts = new Set<string>();
+
+export function loadIconFont(setId: string, customUrls?: Record<string, string>): void {
+  if (typeof document === "undefined") return;
+
+  const normalized = setId.toLowerCase();
+  const url = customUrls?.[normalized] || DEFAULT_FONT_URLS[normalized];
+  if (!url || loadedFonts.has(normalized)) return;
+
+  // Check if link already exists in head
+  const selector = `link[data-iconpicker-font="${normalized}"]`;
+  if (document.querySelector(selector)) {
+    loadedFonts.add(normalized);
+    return;
+  }
+
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  link.setAttribute("data-iconpicker-font", normalized);
+
+  document.head.appendChild(link);
+  loadedFonts.add(normalized);
+}

package/src/core/grid.ts

@@ -0,0 +1,129 @@
+import type { IconItem, IconSetDefinition } from "../types";
+
+export interface GridOptions {
+  container: HTMLElement;
+  bodyElement: HTMLElement;
+  emptyElement: HTMLElement;
+  chunkSize?: number;
+  onSelect: (icon: IconItem) => void;
+}
+
+export class IconGrid {
+  private container: HTMLElement;
+  private bodyElement: HTMLElement;
+  private emptyElement: HTMLElement;
+  private chunkSize: number;
+  private onSelect: (icon: IconItem) => void;
+
+  private currentIcons: string[] = [];
+  private currentSet: IconSetDefinition | null = null;
+  private renderedCount = 0;
+  private selectedValue = "";
+  private scrollListener: () => void;
+
+  constructor(options: GridOptions) {
+    this.container = options.container;
+    this.bodyElement = options.bodyElement;
+    this.emptyElement = options.emptyElement;
+    this.chunkSize = options.chunkSize || 120;
+    this.onSelect = options.onSelect;
+
+    this.scrollListener = () => {
+      const { scrollTop, clientHeight, scrollHeight } = this.bodyElement;
+      if (scrollTop + clientHeight >= scrollHeight - 150) {
+        this.renderNextChunk();
+      }
+    };
+
+    this.bodyElement.addEventListener("scroll", this.scrollListener, { passive: true });
+  }
+
+  public setIcons(icons: string[], set: IconSetDefinition, selectedValue = ""): void {
+    this.currentIcons = icons;
+    this.currentSet = set;
+    this.selectedValue = selectedValue;
+    this.renderedCount = 0;
+    this.container.innerHTML = "";
+    this.bodyElement.scrollTop = 0;
+
+    if (icons.length === 0) {
+      this.emptyElement.style.display = "block";
+      this.container.style.display = "none";
+      return;
+    }
+
+    this.emptyElement.style.display = "none";
+    this.container.style.display = "grid";
+    this.renderNextChunk();
+  }
+
+  public setSelectedValue(val: string): void {
+    this.selectedValue = val;
+    const buttons = this.container.querySelectorAll<HTMLButtonElement>(".iconpicker-item");
+    for (const btn of buttons) {
+      const iconClass = btn.getAttribute("data-icon-class");
+      if (iconClass === val) {
+        btn.classList.add("is-selected");
+        btn.setAttribute("aria-selected", "true");
+      } else {
+        btn.classList.remove("is-selected");
+        btn.removeAttribute("aria-selected");
+      }
+    }
+  }
+
+  private renderNextChunk(): void {
+    if (!this.currentSet || this.renderedCount >= this.currentIcons.length) {
+      return;
+    }
+
+    const nextBatch = this.currentIcons.slice(this.renderedCount, this.renderedCount + this.chunkSize);
+
+    const fragment = document.createDocumentFragment();
+
+    for (const iconName of nextBatch) {
+      const className = this.currentSet.formatter
+        ? this.currentSet.formatter(iconName)
+        : `${this.currentSet.prefix}${iconName}`;
+
+      const isSelected = className === this.selectedValue;
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = `iconpicker-item ${isSelected ? "is-selected" : ""}`;
+      btn.title = iconName;
+      btn.setAttribute("aria-label", iconName);
+      btn.setAttribute("role", "option");
+      btn.setAttribute("data-icon-name", iconName);
+      btn.setAttribute("data-icon-class", className);
+      if (isSelected) {
+        btn.setAttribute("aria-selected", "true");
+      }
+
+      const iconEl = document.createElement("i");
+      iconEl.className = className;
+      iconEl.setAttribute("aria-hidden", "true");
+
+      btn.appendChild(iconEl);
+
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onSelect({
+          name: iconName,
+          className,
+          set: this.currentSet!.id
+        });
+      });
+
+      fragment.appendChild(btn);
+    }
+
+    this.container.appendChild(fragment);
+    this.renderedCount += nextBatch.length;
+  }
+
+  public destroy(): void {
+    this.bodyElement.removeEventListener("scroll", this.scrollListener);
+  }
+}