@pixpilot/shadcn-ui 0.4.0 → 0.4.2

package/dist/icon-selector/icon-picker-content.cjs

@@ -1 +1,146 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../LoadingOverlay.cjs`),n=require(`./use-async-providers.cjs`),r=require(`./virtualized-icon-grid.cjs`);let i=require(`@pixpilot/shadcn`);i=e.__toESM(i);let a=require(`lucide-react`);a=e.__toESM(a);let o=require(`react`);o=e.__toESM(o);let s=require(`react/jsx-runtime`);s=e.__toESM(s);function c(e,t){return e?``:t?`No icons found matching your search`:`No icons provided by the selected provider!`}const l=({providers:e,onChange:l,onSelect:u,maxHeight:d=`60vh`})=>{let[f,p]=(0,o.useState)(``),{providers:m,isLoading:h}=n.useAsyncProviders(e),g=(0,o.useMemo)(()=>m.map(e=>e.prefix),[m]),[_,v]=(0,o.useState)(g[0]??`default`);(0,o.useEffect)(()=>{g.length>0&&v(e=>e===`default`?g[0]??`default`:e)},[g]);let y=(0,o.useCallback)(e=>{try{return e.icons.map(t=>`${e.prefix}:${t}`)}catch{return[]}},[]),b=(0,o.useMemo)(()=>{let e={};for(let t of m)e[t.prefix]=y(t);return e},[m,y]),x=(0,o.useMemo)(()=>{if(!f)return{isSearching:!1,data:b[_]??[]};let e=[],t=f.toLowerCase();for(let n of m){let r=(b[n.prefix]??[]).filter(e=>e.toLowerCase().includes(t));e.push(...r)}return{isSearching:!0,data:e}},[f,_,b,m]),S=(0,o.useCallback)(e=>{l?.(e),u?.()},[l,u]),{isSearching:C,data:w}=x,T=!C&&w.length===0||C&&w.length===0;return(0,s.jsxs)(`div`,{className:`flex flex-col gap-4 min-h-[200px] max-h-[80vh]`,children:[(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(i.Input,{placeholder:`Search icons...`,value:f,onChange:e=>p(e.target.value),autoFocus:!0,disabled:h}),f&&(0,s.jsx)(`button`,{type:`button`,onClick:()=>p(``),className:`absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors`,"aria-label":`Clear search`,children:(0,s.jsx)(a.X,{className:`h-4 w-4`})})]}),!C&&m.length>1&&(0,s.jsxs)(i.Tabs,{value:_,onValueChange:v,children:[(0,s.jsx)(i.TabsList,{className:`w-full`,children:m.map(e=>(0,s.jsx)(i.TabsTrigger,{value:e.prefix,children:e.name??e.prefix},e.prefix))}),m.map(e=>(0,s.jsx)(i.TabsContent,{value:e.prefix,children:(0,s.jsx)(r.default,{icons:b[e.prefix]??[],onSelectIcon:S,maxHeight:d})},e.prefix))]}),T&&C&&(0,s.jsx)(`div`,{className:`flex items-center justify-center py-8`,children:(0,s.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:c(!1,C)})}),(0,s.jsx)(t.LoadingOverlay,{message:`Loading icons...`,loading:h}),C&&m.length>0&&(0,s.jsx)(r.default,{icons:w,onSelectIcon:S,maxHeight:d}),!C&&m.length===1&&(0,s.jsx)(r.default,{icons:w,onSelectIcon:S,maxHeight:d})]})};var u=l;exports.default=u;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_LoadingOverlay = require('../LoadingOverlay.cjs');
+const require_use_async_providers = require('./use-async-providers.cjs');
+const require_virtualized_icon_grid = require('./virtualized-icon-grid.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/icon-selector/icon-picker-content.tsx
+function noIconMessage(hasIcons, isSearching) {
+	if (hasIcons) return "";
+	if (!isSearching) return "No icons provided by the selected provider!";
+	return "No icons found matching your search";
+}
+const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHeight = "60vh" }) => {
+	const [searchQuery, setSearchQuery] = (0, react.useState)("");
+	const { providers, isLoading } = require_use_async_providers.useAsyncProviders(providersProp);
+	const providerPrefixes = (0, react.useMemo)(() => providers.map((provider) => provider.prefix), [providers]);
+	const [activeProvider, setActiveProvider] = (0, react.useState)(providerPrefixes[0] ?? "default");
+	/**
+	* Sync activeProvider when providers load with delay
+	*/
+	(0, react.useEffect)(() => {
+		if (providerPrefixes.length > 0) setActiveProvider((current) => {
+			if (current === "default") return providerPrefixes[0] ?? "default";
+			return current;
+		});
+	}, [providerPrefixes]);
+	/**
+	* Get all icons for a provider
+	*/
+	const getProviderIcons = (0, react.useCallback)((provider) => {
+		try {
+			return provider.icons.map((iconName) => `${provider.prefix}:${iconName}`);
+		} catch {
+			return [];
+		}
+	}, []);
+	/**
+	* Create a map of all icons grouped by provider
+	*/
+	const allIconsByProvider = (0, react.useMemo)(() => {
+		const map = {};
+		for (const provider of providers) map[provider.prefix] = getProviderIcons(provider);
+		return map;
+	}, [providers, getProviderIcons]);
+	/**
+	* Filter icons: when searching, show from all providers; otherwise show active
+	*/
+	const filteredIconsData = (0, react.useMemo)(() => {
+		if (!searchQuery) return {
+			isSearching: false,
+			data: allIconsByProvider[activeProvider] ?? []
+		};
+		const results = [];
+		const searchLower = searchQuery.toLowerCase();
+		for (const provider of providers) {
+			const filtered = (allIconsByProvider[provider.prefix] ?? []).filter((icon) => icon.toLowerCase().includes(searchLower));
+			results.push(...filtered);
+		}
+		return {
+			isSearching: true,
+			data: results
+		};
+	}, [
+		searchQuery,
+		activeProvider,
+		allIconsByProvider,
+		providers
+	]);
+	const handleSelectIcon = (0, react.useCallback)((iconName) => {
+		onChange?.(iconName);
+		onSelect?.();
+	}, [onChange, onSelect]);
+	const { isSearching, data: filteredData } = filteredIconsData;
+	const hasNoResults = !isSearching && filteredData.length === 0 || isSearching && filteredData.length === 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-4 min-h-[200px] max-h-[80vh]",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
+					placeholder: "Search icons...",
+					value: searchQuery,
+					onChange: (e) => setSearchQuery(e.target.value),
+					autoFocus: true,
+					disabled: isLoading
+				}), searchQuery && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => setSearchQuery(""),
+					className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+					"aria-label": "Clear search",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-4 w-4" })
+				})]
+			}),
+			!isSearching && providers.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tabs, {
+				value: activeProvider,
+				onValueChange: setActiveProvider,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsList, {
+					className: "w-full",
+					children: providers.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsTrigger, {
+						value: provider.prefix,
+						children: provider.name ?? provider.prefix
+					}, provider.prefix))
+				}), providers.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsContent, {
+					value: provider.prefix,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
+						icons: allIconsByProvider[provider.prefix] ?? [],
+						onSelectIcon: handleSelectIcon,
+						maxHeight
+					})
+				}, provider.prefix))]
+			}),
+			hasNoResults && isSearching && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center justify-center py-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm text-muted-foreground",
+					children: noIconMessage(false, isSearching)
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingOverlay.LoadingOverlay, {
+				message: "Loading icons...",
+				loading: isLoading
+			}),
+			isSearching && providers.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
+				icons: filteredData,
+				onSelectIcon: handleSelectIcon,
+				maxHeight
+			}),
+			!isSearching && providers.length === 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
+				icons: filteredData,
+				onSelectIcon: handleSelectIcon,
+				maxHeight
+			})
+		]
+	});
+};
+var icon_picker_content_default = IconPickerContent;
+
+//#endregion
+exports.default = icon_picker_content_default;

package/dist/icon-selector/icon-picker-content.js

@@ -1 +1,141 @@
-import{LoadingOverlay as e}from"../LoadingOverlay.js";import{useAsyncProviders as t}from"./use-async-providers.js";import n from"./virtualized-icon-grid.js";import{Input as r,Tabs as i,TabsContent as a,TabsList as o,TabsTrigger as s}from"@pixpilot/shadcn";import{X as c}from"lucide-react";import{useCallback as l,useEffect as u,useMemo as d,useState as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";function h(e,t){return e?``:t?`No icons found matching your search`:`No icons provided by the selected provider!`}var g=({providers:g,onChange:_,onSelect:v,maxHeight:y=`60vh`})=>{let[b,x]=f(``),{providers:S,isLoading:C}=t(g),w=d(()=>S.map(e=>e.prefix),[S]),[T,E]=f(w[0]??`default`);u(()=>{w.length>0&&E(e=>e===`default`?w[0]??`default`:e)},[w]);let D=l(e=>{try{return e.icons.map(t=>`${e.prefix}:${t}`)}catch{return[]}},[]),O=d(()=>{let e={};for(let t of S)e[t.prefix]=D(t);return e},[S,D]),k=d(()=>{if(!b)return{isSearching:!1,data:O[T]??[]};let e=[],t=b.toLowerCase();for(let n of S){let r=(O[n.prefix]??[]).filter(e=>e.toLowerCase().includes(t));e.push(...r)}return{isSearching:!0,data:e}},[b,T,O,S]),A=l(e=>{_?.(e),v?.()},[_,v]),{isSearching:j,data:M}=k,N=!j&&M.length===0||j&&M.length===0;return m(`div`,{className:`flex flex-col gap-4 min-h-[200px] max-h-[80vh]`,children:[m(`div`,{className:`relative`,children:[p(r,{placeholder:`Search icons...`,value:b,onChange:e=>x(e.target.value),autoFocus:!0,disabled:C}),b&&p(`button`,{type:`button`,onClick:()=>x(``),className:`absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors`,"aria-label":`Clear search`,children:p(c,{className:`h-4 w-4`})})]}),!j&&S.length>1&&m(i,{value:T,onValueChange:E,children:[p(o,{className:`w-full`,children:S.map(e=>p(s,{value:e.prefix,children:e.name??e.prefix},e.prefix))}),S.map(e=>p(a,{value:e.prefix,children:p(n,{icons:O[e.prefix]??[],onSelectIcon:A,maxHeight:y})},e.prefix))]}),N&&j&&p(`div`,{className:`flex items-center justify-center py-8`,children:p(`p`,{className:`text-sm text-muted-foreground`,children:h(!1,j)})}),p(e,{message:`Loading icons...`,loading:C}),j&&S.length>0&&p(n,{icons:M,onSelectIcon:A,maxHeight:y}),!j&&S.length===1&&p(n,{icons:M,onSelectIcon:A,maxHeight:y})]})};export{g as default};
+import { LoadingOverlay } from "../LoadingOverlay.js";
+import { useAsyncProviders } from "./use-async-providers.js";
+import virtualized_icon_grid_default from "./virtualized-icon-grid.js";
+import { Input, Tabs, TabsContent, TabsList, TabsTrigger } from "@pixpilot/shadcn";
+import { X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/icon-selector/icon-picker-content.tsx
+function noIconMessage(hasIcons, isSearching) {
+	if (hasIcons) return "";
+	if (!isSearching) return "No icons provided by the selected provider!";
+	return "No icons found matching your search";
+}
+const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHeight = "60vh" }) => {
+	const [searchQuery, setSearchQuery] = useState("");
+	const { providers, isLoading } = useAsyncProviders(providersProp);
+	const providerPrefixes = useMemo(() => providers.map((provider) => provider.prefix), [providers]);
+	const [activeProvider, setActiveProvider] = useState(providerPrefixes[0] ?? "default");
+	/**
+	* Sync activeProvider when providers load with delay
+	*/
+	useEffect(() => {
+		if (providerPrefixes.length > 0) setActiveProvider((current) => {
+			if (current === "default") return providerPrefixes[0] ?? "default";
+			return current;
+		});
+	}, [providerPrefixes]);
+	/**
+	* Get all icons for a provider
+	*/
+	const getProviderIcons = useCallback((provider) => {
+		try {
+			return provider.icons.map((iconName) => `${provider.prefix}:${iconName}`);
+		} catch {
+			return [];
+		}
+	}, []);
+	/**
+	* Create a map of all icons grouped by provider
+	*/
+	const allIconsByProvider = useMemo(() => {
+		const map = {};
+		for (const provider of providers) map[provider.prefix] = getProviderIcons(provider);
+		return map;
+	}, [providers, getProviderIcons]);
+	/**
+	* Filter icons: when searching, show from all providers; otherwise show active
+	*/
+	const filteredIconsData = useMemo(() => {
+		if (!searchQuery) return {
+			isSearching: false,
+			data: allIconsByProvider[activeProvider] ?? []
+		};
+		const results = [];
+		const searchLower = searchQuery.toLowerCase();
+		for (const provider of providers) {
+			const filtered = (allIconsByProvider[provider.prefix] ?? []).filter((icon) => icon.toLowerCase().includes(searchLower));
+			results.push(...filtered);
+		}
+		return {
+			isSearching: true,
+			data: results
+		};
+	}, [
+		searchQuery,
+		activeProvider,
+		allIconsByProvider,
+		providers
+	]);
+	const handleSelectIcon = useCallback((iconName) => {
+		onChange?.(iconName);
+		onSelect?.();
+	}, [onChange, onSelect]);
+	const { isSearching, data: filteredData } = filteredIconsData;
+	const hasNoResults = !isSearching && filteredData.length === 0 || isSearching && filteredData.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4 min-h-[200px] max-h-[80vh]",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx(Input, {
+					placeholder: "Search icons...",
+					value: searchQuery,
+					onChange: (e) => setSearchQuery(e.target.value),
+					autoFocus: true,
+					disabled: isLoading
+				}), searchQuery && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => setSearchQuery(""),
+					className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+					"aria-label": "Clear search",
+					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+				})]
+			}),
+			!isSearching && providers.length > 1 && /* @__PURE__ */ jsxs(Tabs, {
+				value: activeProvider,
+				onValueChange: setActiveProvider,
+				children: [/* @__PURE__ */ jsx(TabsList, {
+					className: "w-full",
+					children: providers.map((provider) => /* @__PURE__ */ jsx(TabsTrigger, {
+						value: provider.prefix,
+						children: provider.name ?? provider.prefix
+					}, provider.prefix))
+				}), providers.map((provider) => /* @__PURE__ */ jsx(TabsContent, {
+					value: provider.prefix,
+					children: /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
+						icons: allIconsByProvider[provider.prefix] ?? [],
+						onSelectIcon: handleSelectIcon,
+						maxHeight
+					})
+				}, provider.prefix))]
+			}),
+			hasNoResults && isSearching && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center py-8",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: noIconMessage(false, isSearching)
+				})
+			}),
+			/* @__PURE__ */ jsx(LoadingOverlay, {
+				message: "Loading icons...",
+				loading: isLoading
+			}),
+			isSearching && providers.length > 0 && /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
+				icons: filteredData,
+				onSelectIcon: handleSelectIcon,
+				maxHeight
+			}),
+			!isSearching && providers.length === 1 && /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
+				icons: filteredData,
+				onSelectIcon: handleSelectIcon,
+				maxHeight
+			})
+		]
+	});
+};
+var icon_picker_content_default = IconPickerContent;
+
+//#endregion
+export { icon_picker_content_default as default };

package/dist/icon-selector/index.cjs

@@ -1 +1 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./IconPicker.cjs`);
+const require_IconPicker = require('./IconPicker.cjs');

package/dist/icon-selector/index.d.cts

@@ -1,2 +1,2 @@
-import { IconPicker, IconPickerProps, IconPickerVariant } from "./IconPicker.cjs";
-import { IconProvider, IconProviderLoader, IconProviderProps } from "./types.cjs";
+import { IconProvider, IconProviderLoader, IconProviderProps } from "./types.cjs";
+import { IconPicker, IconPickerProps, IconPickerVariant } from "./IconPicker.cjs";

package/dist/icon-selector/index.d.ts

@@ -1,2 +1,2 @@
-import { IconPicker, IconPickerProps, IconPickerVariant } from "./IconPicker.js";
-import { IconProvider, IconProviderLoader, IconProviderProps } from "./types.js";
+import { IconProvider, IconProviderLoader, IconProviderProps } from "./types.js";
+import { IconPicker, IconPickerProps, IconPickerVariant } from "./IconPicker.js";

package/dist/icon-selector/index.js

@@ -1 +1 @@
-import{IconPicker as e}from"./IconPicker.js";
+import { IconPicker } from "./IconPicker.js";

package/dist/icon-selector/use-async-providers.cjs

@@ -1 +1,69 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./utils/is-valid-provider.cjs`);let n=require(`react`);n=e.__toESM(n);function r(e=[]){let[r,i]=(0,n.useState)({resolved:[],loading:!1,errors:[]}),a=(0,n.useRef)([]);return(0,n.useEffect)(()=>{let n=!0;return r.loading||a.current.length===e.length&&e.every((e,t)=>e===a.current[t])?void 0:(a.current=e,(async()=>{if(!e.length){n&&i({resolved:[],loading:!1,errors:[]});return}i(e=>({...e,loading:!0,errors:[]}));let r=[],a=[],o=await Promise.allSettled(e.map(async e=>typeof e==`function`?e():e));for(let[e,n]of o.entries())if(n.status===`fulfilled`){let i=n.value;if(t.isValidProvider(i))r.push(i);else{let t=Error(`Invalid provider at index ${e}: Missing required fields.`);a.push(t)}}else{let e=n.reason instanceof Error?n.reason:Error(String(n.reason));a.push(e)}i({resolved:r,loading:!1,errors:a})})(),()=>{n=!1})},[e,r.loading]),{providers:r.resolved,isLoading:r.loading,errors:r.errors}}exports.useAsyncProviders=r;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_is_valid_provider = require('./utils/is-valid-provider.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/icon-selector/use-async-providers.ts
+function useAsyncProviders(providers = []) {
+	const [state, setState] = (0, react.useState)({
+		resolved: [],
+		loading: false,
+		errors: []
+	});
+	const previousProvidersRef = (0, react.useRef)([]);
+	(0, react.useEffect)(() => {
+		let isMounted = true;
+		if (state.loading) return;
+		if (previousProvidersRef.current.length === providers.length && providers.every((p, i) => p === previousProvidersRef.current[i])) return;
+		previousProvidersRef.current = providers;
+		const loadProviders = async () => {
+			if (!providers.length) {
+				if (isMounted) setState({
+					resolved: [],
+					loading: false,
+					errors: []
+				});
+				return;
+			}
+			setState((prev) => ({
+				...prev,
+				loading: true,
+				errors: []
+			}));
+			const loaded = [];
+			const loadErrors = [];
+			const results = await Promise.allSettled(providers.map(async (p) => {
+				if (typeof p === "function") return p();
+				return p;
+			}));
+			for (const [index, result] of results.entries()) if (result.status === "fulfilled") {
+				const provider = result.value;
+				if (require_is_valid_provider.isValidProvider(provider)) loaded.push(provider);
+				else {
+					const err = /* @__PURE__ */ new Error(`Invalid provider at index ${index}: Missing required fields.`);
+					loadErrors.push(err);
+				}
+			} else {
+				const err = result.reason instanceof Error ? result.reason : new Error(String(result.reason));
+				loadErrors.push(err);
+			}
+			setState({
+				resolved: loaded,
+				loading: false,
+				errors: loadErrors
+			});
+		};
+		loadProviders();
+		return () => {
+			isMounted = false;
+		};
+	}, [providers, state.loading]);
+	return {
+		providers: state.resolved,
+		isLoading: state.loading,
+		errors: state.errors
+	};
+}
+
+//#endregion
+exports.useAsyncProviders = useAsyncProviders;

package/dist/icon-selector/use-async-providers.js

@@ -1 +1,67 @@
-import{isValidProvider as e}from"./utils/is-valid-provider.js";import{useEffect as t,useRef as n,useState as r}from"react";function i(i=[]){let[a,o]=r({resolved:[],loading:!1,errors:[]}),s=n([]);return t(()=>{let t=!0;return a.loading||s.current.length===i.length&&i.every((e,t)=>e===s.current[t])?void 0:(s.current=i,(async()=>{if(!i.length){t&&o({resolved:[],loading:!1,errors:[]});return}o(e=>({...e,loading:!0,errors:[]}));let n=[],r=[],a=await Promise.allSettled(i.map(async e=>typeof e==`function`?e():e));for(let[t,i]of a.entries())if(i.status===`fulfilled`){let a=i.value;if(e(a))n.push(a);else{let e=Error(`Invalid provider at index ${t}: Missing required fields.`);r.push(e)}}else{let e=i.reason instanceof Error?i.reason:Error(String(i.reason));r.push(e)}o({resolved:n,loading:!1,errors:r})})(),()=>{t=!1})},[i,a.loading]),{providers:a.resolved,isLoading:a.loading,errors:a.errors}}export{i as useAsyncProviders};
+import { isValidProvider } from "./utils/is-valid-provider.js";
+import { useEffect, useRef, useState } from "react";
+
+//#region src/icon-selector/use-async-providers.ts
+function useAsyncProviders(providers = []) {
+	const [state, setState] = useState({
+		resolved: [],
+		loading: false,
+		errors: []
+	});
+	const previousProvidersRef = useRef([]);
+	useEffect(() => {
+		let isMounted = true;
+		if (state.loading) return;
+		if (previousProvidersRef.current.length === providers.length && providers.every((p, i) => p === previousProvidersRef.current[i])) return;
+		previousProvidersRef.current = providers;
+		const loadProviders = async () => {
+			if (!providers.length) {
+				if (isMounted) setState({
+					resolved: [],
+					loading: false,
+					errors: []
+				});
+				return;
+			}
+			setState((prev) => ({
+				...prev,
+				loading: true,
+				errors: []
+			}));
+			const loaded = [];
+			const loadErrors = [];
+			const results = await Promise.allSettled(providers.map(async (p) => {
+				if (typeof p === "function") return p();
+				return p;
+			}));
+			for (const [index, result] of results.entries()) if (result.status === "fulfilled") {
+				const provider = result.value;
+				if (isValidProvider(provider)) loaded.push(provider);
+				else {
+					const err = /* @__PURE__ */ new Error(`Invalid provider at index ${index}: Missing required fields.`);
+					loadErrors.push(err);
+				}
+			} else {
+				const err = result.reason instanceof Error ? result.reason : new Error(String(result.reason));
+				loadErrors.push(err);
+			}
+			setState({
+				resolved: loaded,
+				loading: false,
+				errors: loadErrors
+			});
+		};
+		loadProviders();
+		return () => {
+			isMounted = false;
+		};
+	}, [providers, state.loading]);
+	return {
+		providers: state.resolved,
+		isLoading: state.loading,
+		errors: state.errors
+	};
+}
+
+//#endregion
+export { useAsyncProviders };

package/dist/icon-selector/utils/is-valid-provider.cjs

@@ -1 +1,11 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`);function t(e){return typeof e==`object`&&!!e&&`prefix`in e&&`icons`in e&&`name`in e&&typeof e.prefix==`string`&&Array.isArray(e.icons)}exports.isValidProvider=t;
+
+//#region src/icon-selector/utils/is-valid-provider.ts
+/**
+* Validates if a value is a valid IconProvider structure
+*/
+function isValidProvider(value) {
+	return typeof value === "object" && value !== null && "prefix" in value && "icons" in value && "name" in value && typeof value.prefix === "string" && Array.isArray(value.icons);
+}
+
+//#endregion
+exports.isValidProvider = isValidProvider;

package/dist/icon-selector/utils/is-valid-provider.js

@@ -1 +1,10 @@
-function e(e){return typeof e==`object`&&!!e&&`prefix`in e&&`icons`in e&&`name`in e&&typeof e.prefix==`string`&&Array.isArray(e.icons)}export{e as isValidProvider};
+//#region src/icon-selector/utils/is-valid-provider.ts
+/**
+* Validates if a value is a valid IconProvider structure
+*/
+function isValidProvider(value) {
+	return typeof value === "object" && value !== null && "prefix" in value && "icons" in value && "name" in value && typeof value.prefix === "string" && Array.isArray(value.icons);
+}
+
+//#endregion
+export { isValidProvider };

package/dist/icon-selector/virtualized-icon-grid.cjs

@@ -1 +1,137 @@
-"use client";const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`@iconify/react`);r=e.__toESM(r);let i=require(`@tanstack/react-virtual`);i=e.__toESM(i);const a=80,o=80,s=480,c=3,l=t.default.memo(({iconName:e,onSelectIcon:t})=>{if(!e)return null;let i=e.split(`:`)[1]??e;return(0,n.jsxs)(`button`,{type:`button`,onClick:()=>t(e),className:`w-full h-full flex flex-col items-center justify-center gap-1 rounded-md border border-transparent hover:border-primary hover:bg-accent transition-colors p-1`,title:e,children:[(0,n.jsx)(r.Icon,{icon:e,width:`24`,height:`24`}),(0,n.jsx)(`span`,{className:`truncate text-xs text-muted-foreground max-w-full`,children:i})]})});l.displayName=`IconCell`;const u=({icons:e,onSelectIcon:r,maxHeight:a=480,columnCount:o,cellSize:s=80})=>{let c=(0,t.useRef)(null),u=(0,t.useRef)(null),[d,f]=(0,t.useState)(0),p=(0,t.useMemo)(()=>o!==void 0&&o>0?o:d===0?3:Math.max(3,Math.floor(d/s)),[d,s,o]);(0,t.useEffect)(()=>{let e=new ResizeObserver(e=>{for(let t of e)f(t.contentRect.width)});return u.current&&e.observe(u.current),()=>{e.disconnect()}},[]);let m=typeof a==`number`?a:480,h=(0,i.useVirtualizer)({count:(0,t.useMemo)(()=>Math.ceil(e.length/p),[e.length,p]),getScrollElement:()=>c.current,estimateSize:()=>80,overscan:10}),g=h.getVirtualItems(),_=h.getTotalSize(),v=(0,t.useCallback)(e=>{r(e)},[r]);return(0,n.jsx)(`div`,{ref:u,style:{height:m,width:`100%`,overflow:`hidden`,position:`relative`,display:`flex`,flexDirection:`column`},children:u.current&&(0,n.jsx)(`div`,{ref:c,style:{height:`100%`,width:`100%`,overflow:`auto`,flex:1},children:(0,n.jsx)(`div`,{style:{height:`${_}px`,width:`100%`,position:`relative`},children:g.map(t=>{let r=t.index*p,i=Math.min(r+p,e.length),a=e.slice(r,i);return(0,n.jsx)(`div`,{style:{position:`absolute`,top:0,left:0,width:`100%`,height:`${t.size}px`,transform:`translateY(${t.start}px)`},children:(0,n.jsx)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(${p}, 1fr)`,height:`100%`,width:`100%`,gap:`0`},children:a.map(e=>(0,n.jsx)(`div`,{style:{minHeight:`100%`,minWidth:`0`},children:(0,n.jsx)(l,{iconName:e,onSelectIcon:v})},e))})},t.key)})})})})};var d=u;exports.default=d;
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __iconify_react = require("@iconify/react");
+__iconify_react = require_rolldown_runtime.__toESM(__iconify_react);
+let __tanstack_react_virtual = require("@tanstack/react-virtual");
+__tanstack_react_virtual = require_rolldown_runtime.__toESM(__tanstack_react_virtual);
+
+//#region src/icon-selector/virtualized-icon-grid.tsx
+const CELL_SIZE_DEFAULT = 80;
+const ROW_HEIGHT = 80;
+const DEFAULT_HEIGHT = 480;
+const MIN_COLUMNS = 3;
+const IconCell = react.default.memo(({ iconName, onSelectIcon }) => {
+	if (!iconName) return null;
+	const displayName = iconName.split(":")[1] ?? iconName;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: () => onSelectIcon(iconName),
+		className: "w-full h-full flex flex-col items-center justify-center gap-1 rounded-md border border-transparent hover:border-primary hover:bg-accent transition-colors p-1",
+		title: iconName,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__iconify_react.Icon, {
+			icon: iconName,
+			width: "24",
+			height: "24"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate text-xs text-muted-foreground max-w-full",
+			children: displayName
+		})]
+	});
+});
+IconCell.displayName = "IconCell";
+const VirtualizedIconGrid = ({ icons, onSelectIcon, maxHeight = DEFAULT_HEIGHT, columnCount: providedColumnCount, cellSize = CELL_SIZE_DEFAULT }) => {
+	const scrollableRef = (0, react.useRef)(null);
+	const containerRef = (0, react.useRef)(null);
+	const [containerWidth, setContainerWidth] = (0, react.useState)(0);
+	const columnCount = (0, react.useMemo)(() => {
+		if (providedColumnCount !== void 0 && providedColumnCount > 0) return providedColumnCount;
+		if (containerWidth === 0) return MIN_COLUMNS;
+		return Math.max(MIN_COLUMNS, Math.floor(containerWidth / cellSize));
+	}, [
+		containerWidth,
+		cellSize,
+		providedColumnCount
+	]);
+	(0, react.useEffect)(() => {
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) setContainerWidth(entry.contentRect.width);
+		});
+		if (containerRef.current) resizeObserver.observe(containerRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, []);
+	const height = typeof maxHeight === "number" ? maxHeight : DEFAULT_HEIGHT;
+	const rowVirtualizer = (0, __tanstack_react_virtual.useVirtualizer)({
+		count: (0, react.useMemo)(() => Math.ceil(icons.length / columnCount), [icons.length, columnCount]),
+		getScrollElement: () => scrollableRef.current,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: 10
+	});
+	const virtualRows = rowVirtualizer.getVirtualItems();
+	const totalSize = rowVirtualizer.getTotalSize();
+	const handleSelectIcon = (0, react.useCallback)((iconName) => {
+		onSelectIcon(iconName);
+	}, [onSelectIcon]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		style: {
+			height,
+			width: "100%",
+			overflow: "hidden",
+			position: "relative",
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: containerRef.current && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: scrollableRef,
+			style: {
+				height: "100%",
+				width: "100%",
+				overflow: "auto",
+				flex: 1
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					height: `${totalSize}px`,
+					width: "100%",
+					position: "relative"
+				},
+				children: virtualRows.map((virtualRow) => {
+					const startIndex = virtualRow.index * columnCount;
+					const endIndex = Math.min(startIndex + columnCount, icons.length);
+					const rowIcons = icons.slice(startIndex, endIndex);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							width: "100%",
+							height: `${virtualRow.size}px`,
+							transform: `translateY(${virtualRow.start}px)`
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								display: "grid",
+								gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+								height: "100%",
+								width: "100%",
+								gap: "0"
+							},
+							children: rowIcons.map((iconName) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									minHeight: "100%",
+									minWidth: "0"
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCell, {
+									iconName,
+									onSelectIcon: handleSelectIcon
+								})
+							}, iconName))
+						})
+					}, virtualRow.key);
+				})
+			})
+		})
+	});
+};
+var virtualized_icon_grid_default = VirtualizedIconGrid;
+
+//#endregion
+exports.default = virtualized_icon_grid_default;