@pixpilot/shadcn-ui 0.4.0 → 0.4.1

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

@@ -1 +1,35 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`@pixpilot/shadcn`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);const r=({effectiveMode:e,isOpen:r,setIsOpen:i,selectorContent:a,children:o,popover:s})=>(0,n.jsxs)(n.Fragment,{children:[e===`dialog`&&(0,n.jsxs)(t.Dialog,{open:r,onOpenChange:i,children:[(0,n.jsx)(t.DialogTrigger,{asChild:!0,children:o}),(0,n.jsxs)(t.DialogContent,{className:`max-h-[80vh] w-full overflow-hidden`,children:[(0,n.jsx)(t.DialogHeader,{children:(0,n.jsx)(t.DialogTitle,{children:`Select an Icon`})}),(0,n.jsx)(`div`,{children:a})]})]}),e===`popover`&&(0,n.jsxs)(t.Popover,{open:r,onOpenChange:i,children:[(0,n.jsx)(t.PopoverTrigger,{asChild:!0,children:o}),(0,n.jsx)(t.PopoverContent,{side:`right`,...s,className:(0,t.cn)(`w-full min-w-sm lg:min-w-lg p-4`,`max-h-dvh md:max-h-auto`,s?.className),children:a})]})]});exports.IconPickerContainer=r;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/icon-selector/icon-picker-container.tsx
+const IconPickerContainer = ({ effectiveMode, isOpen, setIsOpen, selectorContent, children, popover }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [effectiveMode === "dialog" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Dialog, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, {
+			className: "max-h-[80vh] w-full overflow-hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: "Select an Icon" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: selectorContent })]
+		})]
+	}), effectiveMode === "popover" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+			side: "right",
+			...popover,
+			className: (0, __pixpilot_shadcn.cn)("w-full min-w-sm lg:min-w-lg p-4", "max-h-dvh md:max-h-auto", popover?.className),
+			children: selectorContent
+		})]
+	})] });
+};
+
+//#endregion
+exports.IconPickerContainer = IconPickerContainer;

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

@@ -1 +1,32 @@
-import{Dialog as e,DialogContent as t,DialogHeader as n,DialogTitle as r,DialogTrigger as i,Popover as a,PopoverContent as o,PopoverTrigger as s,cn as c}from"@pixpilot/shadcn";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=({effectiveMode:f,isOpen:p,setIsOpen:m,selectorContent:h,children:g,popover:_})=>d(l,{children:[f===`dialog`&&d(e,{open:p,onOpenChange:m,children:[u(i,{asChild:!0,children:g}),d(t,{className:`max-h-[80vh] w-full overflow-hidden`,children:[u(n,{children:u(r,{children:`Select an Icon`})}),u(`div`,{children:h})]})]}),f===`popover`&&d(a,{open:p,onOpenChange:m,children:[u(s,{asChild:!0,children:g}),u(o,{side:`right`,..._,className:c(`w-full min-w-sm lg:min-w-lg p-4`,`max-h-dvh md:max-h-auto`,_?.className),children:h})]})]});export{f as IconPickerContainer};
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Popover, PopoverContent, PopoverTrigger, cn } from "@pixpilot/shadcn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/icon-selector/icon-picker-container.tsx
+const IconPickerContainer = ({ effectiveMode, isOpen, setIsOpen, selectorContent, children, popover }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [effectiveMode === "dialog" && /* @__PURE__ */ jsxs(Dialog, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[80vh] w-full overflow-hidden",
+			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Select an Icon" }) }), /* @__PURE__ */ jsx("div", { children: selectorContent })]
+		})]
+	}), effectiveMode === "popover" && /* @__PURE__ */ jsxs(Popover, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "right",
+			...popover,
+			className: cn("w-full min-w-sm lg:min-w-lg p-4", "max-h-dvh md:max-h-auto", popover?.className),
+			children: selectorContent
+		})]
+	})] });
+};
+
+//#endregion
+export { IconPickerContainer };

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,2 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./IconPicker.cjs`);
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_IconPicker = require('./IconPicker.cjs');

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,12 @@
-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;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+
+//#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 };