@abydahana/iconpicker 1.0.0

package/src/index.ts

@@ -0,0 +1,18 @@
+export * from "./types";
+export * from "./core/icon-picker";
+export * from "./core/popover";
+export * from "./core/grid";
+export * from "./core/font-loader";
+export * from "./iconsets/index";
+
+import { IconPicker } from "./core/icon-picker";
+import type { IconPickerOptions } from "./types";
+
+/**
+ * Helper factory function
+ */
+export function createIconPicker(target: HTMLElement | string, options?: IconPickerOptions): IconPicker {
+  return new IconPicker(target, options);
+}
+
+export default IconPicker;

package/src/themes/aksara.css

@@ -0,0 +1,72 @@
+/**
+ * @abydahana/iconpicker Aksara UI Theme
+ */
+
+.iconpicker-theme-aksara {
+  background-color: var(--aksara-bg-surface, #ffffff);
+  color: var(--aksara-text-body, #172033);
+  border: var(--aksara-border-width, 1px) solid var(--aksara-border, #d7deea);
+  border-radius: var(--aksara-radius-md, 0.75rem);
+  box-shadow: var(--aksara-shadow-md, 0 12px 30px rgba(15, 23, 42, 0.1));
+}
+
+.iconpicker-theme-aksara .iconpicker-search-input {
+  background-color: var(--aksara-bg-body, #fbfcff);
+  color: var(--aksara-text-body, #172033);
+  border: 1px solid var(--aksara-border, #d7deea);
+  border-radius: var(--aksara-radius-sm, 0.5rem);
+}
+
+.iconpicker-theme-aksara .iconpicker-search-input:focus {
+  border-color: var(--aksara-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.iconpicker-theme-aksara .iconpicker-tab {
+  color: var(--aksara-text-body-secondary, #64748b);
+  border-radius: var(--aksara-radius-xs, 0.25rem);
+}
+
+.iconpicker-theme-aksara .iconpicker-tab:hover {
+  background-color: var(--aksara-surface-hover, #f4f7fb);
+  color: var(--aksara-text-body, #172033);
+}
+
+.iconpicker-theme-aksara .iconpicker-tab.is-active {
+  background-color: var(--aksara-primary, #2563eb);
+  color: #ffffff;
+}
+
+.iconpicker-theme-aksara .iconpicker-tab.is-active .iconpicker-tab-count {
+  opacity: 0.85;
+}
+
+.iconpicker-theme-aksara .iconpicker-item {
+  color: var(--aksara-text-body, #172033);
+}
+
+.iconpicker-theme-aksara .iconpicker-item:hover {
+  background-color: var(--aksara-surface-hover, #f4f7fb);
+  border-color: var(--aksara-border, #d7deea);
+}
+
+.iconpicker-theme-aksara .iconpicker-item.is-selected {
+  background-color: var(--aksara-primary, #2563eb);
+  color: #ffffff;
+  border-color: var(--aksara-primary, #2563eb);
+}
+
+.iconpicker-theme-aksara .iconpicker-footer {
+  border-top-color: var(--aksara-border-subtle, #e6ebf3);
+  background-color: var(--aksara-bg-body-secondary, #f4f7fb);
+  border-bottom-left-radius: var(--aksara-radius-md, 0.75rem);
+  border-bottom-right-radius: var(--aksara-radius-md, 0.75rem);
+}
+
+.iconpicker-theme-aksara .iconpicker-btn-clear {
+  color: var(--aksara-danger, #ef4444);
+}
+
+.iconpicker-theme-aksara .iconpicker-btn-clear:hover {
+  background-color: rgba(239, 68, 68, 0.1);
+}

package/src/themes/base.css

@@ -0,0 +1,211 @@
+/**
+ * @abydahana/iconpicker Base Styles
+ */
+
+.iconpicker-popover {
+  position: fixed;
+  z-index: 99999 !important;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 340px;
+  max-width: calc(100vw - 20px);
+  max-height: 380px;
+  user-select: none;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  animation: iconpickerFadeIn 0.15s ease-out;
+}
+
+@keyframes iconpickerFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.iconpicker-header {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 8px;
+  padding: 10px 12px 8px;
+}
+
+.iconpicker-search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.iconpicker-search-icon {
+  position: absolute;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.iconpicker-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 6px 30px 6px 32px;
+  font-size: 13px;
+  border-radius: 6px;
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.iconpicker-search-clear {
+  position: absolute;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 50%;
+  opacity: 0.5;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.iconpicker-search-clear:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+.iconpicker-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+  scrollbar-width: none;
+}
+
+.iconpicker-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.iconpicker-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.iconpicker-tab-count {
+  font-size: 10px;
+  opacity: 0.6;
+}
+
+.iconpicker-body {
+  position: relative;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  min-height: 180px;
+  max-height: 240px;
+  padding: 8px 12px;
+}
+
+.iconpicker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+  gap: 6px;
+}
+
+.iconpicker-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  transition:
+    transform 0.1s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.iconpicker-item:hover {
+  transform: scale(1.1);
+}
+
+.iconpicker-empty {
+  padding: 24px 12px;
+  text-align: center;
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.iconpicker-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-top-width: 1px;
+  border-top-style: solid;
+  font-size: 12px;
+}
+
+.iconpicker-selected-preview {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+  max-width: 220px;
+}
+
+.iconpicker-preview-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.iconpicker-preview-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+
+.iconpicker-btn-clear {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: 4px;
+}

package/src/themes/bootstrap.css

@@ -0,0 +1,70 @@
+/**
+ * @abydahana/iconpicker Bootstrap 5 Theme
+ */
+
+.iconpicker-theme-bootstrap {
+  background-color: var(--bs-body-bg, #ffffff);
+  color: var(--bs-body-color, #212529);
+  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
+  border-radius: var(--bs-border-radius, 0.375rem);
+  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
+}
+
+.iconpicker-theme-bootstrap .iconpicker-search-input {
+  background-color: var(--bs-body-bg, #ffffff);
+  color: var(--bs-body-color, #212529);
+  border: 1px solid var(--bs-border-color, #dee2e6);
+  border-radius: var(--bs-border-radius-sm, 0.25rem);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-search-input:focus {
+  border-color: #86b7fe;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-tab {
+  color: var(--bs-secondary-color, #6c757d);
+  border-radius: 50rem;
+  padding: 2px 10px;
+}
+
+.iconpicker-theme-bootstrap .iconpicker-tab:hover {
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
+  color: var(--bs-body-color, #212529);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-tab.is-active {
+  background-color: var(--bs-primary, #0d6efd);
+  color: #ffffff;
+}
+
+.iconpicker-theme-bootstrap .iconpicker-item {
+  color: var(--bs-body-color, #212529);
+  border-radius: var(--bs-border-radius-sm, 0.25rem);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-item:hover {
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
+  border-color: var(--bs-border-color, #dee2e6);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-item.is-selected {
+  background-color: var(--bs-primary, #0d6efd);
+  color: #ffffff;
+  border-color: var(--bs-primary, #0d6efd);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-footer {
+  border-top-color: var(--bs-border-color, #dee2e6);
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
+  border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
+  border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-btn-clear {
+  color: var(--bs-danger, #dc3545);
+}
+
+.iconpicker-theme-bootstrap .iconpicker-btn-clear:hover {
+  background-color: rgba(220, 53, 69, 0.1);
+}

package/src/themes/default.css

@@ -0,0 +1,72 @@
+/**
+ * @abydahana/iconpicker Default Neutral Theme
+ */
+
+.iconpicker-theme-default {
+  background-color: #ffffff;
+  color: #1e293b;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  box-shadow:
+    0 4px 20px -2px rgba(0, 0, 0, 0.12),
+    0 2px 6px -1px rgba(0, 0, 0, 0.08);
+}
+
+.iconpicker-theme-default .iconpicker-search-input {
+  background-color: #f8fafc;
+  color: #1e293b;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+}
+
+.iconpicker-theme-default .iconpicker-search-input:focus {
+  background-color: #ffffff;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+.iconpicker-theme-default .iconpicker-tab {
+  color: #64748b;
+  border-radius: 4px;
+}
+
+.iconpicker-theme-default .iconpicker-tab:hover {
+  background-color: #f1f5f9;
+  color: #0f172a;
+}
+
+.iconpicker-theme-default .iconpicker-tab.is-active {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.iconpicker-theme-default .iconpicker-item {
+  color: #334155;
+  border-radius: 6px;
+}
+
+.iconpicker-theme-default .iconpicker-item:hover {
+  background-color: #f1f5f9;
+  border-color: #cbd5e1;
+}
+
+.iconpicker-theme-default .iconpicker-item.is-selected {
+  background-color: #3b82f6;
+  color: #ffffff;
+  border-color: #3b82f6;
+}
+
+.iconpicker-theme-default .iconpicker-footer {
+  border-top-color: #f1f5f9;
+  background-color: #f8fafc;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.iconpicker-theme-default .iconpicker-btn-clear {
+  color: #ef4444;
+}
+
+.iconpicker-theme-default .iconpicker-btn-clear:hover {
+  background-color: #fee2e2;
+}

package/src/themes/index.css

@@ -0,0 +1,5 @@
+@import "./base.css";
+@import "./default.css";
+@import "./aksara.css";
+@import "./bootstrap.css";
+@import "./tailwind.css";

package/src/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/src/types.ts

@@ -0,0 +1,37 @@
+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;
+}