@pixpilot/shadcn-ui 0.1.0 → 0.4.1

package/dist/icon-selector/IconPicker.cjs

@@ -1 +1,93 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../Button.cjs`),n=require(`../hooks/use-media-query.cjs`),r=require(`./constants.cjs`),i=require(`./icon-picker-container.cjs`),a=require(`./icon-picker-content.cjs`);require(`../index.cjs`);let o=require(`react`);o=e.__toESM(o);let s=require(`react/jsx-runtime`);s=e.__toESM(s);let c=require(`@iconify/react`);c=e.__toESM(c);const l=({value:e,onChange:l,onOpenChange:u,pickerMode:d=`dialog`,popover:f,variant:p=`default`,providers:m})=>{let[h,g]=(0,o.useState)(!1),_=n.useMediaQuery({maxWidth:768}),v=(0,o.useCallback)(e=>{l?.(e),g(!1),u?.(!1)},[l,u]),y=typeof e==`string`&&e.length>0,b=y?(0,s.jsx)(c.Icon,{icon:e,width:`20`,height:`20`}):(0,s.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`No icon selected`}),x=(0,s.jsx)(a.default,{providers:m,onChange:v,onSelect:()=>g(!1)});if(m.length===0){if(process.env.NODE_ENV===`development`)throw Error(r.ICON_SELECTOR_ERROR_MESSAGE);return(0,s.jsx)(`div`,{children:`No icons configured`})}let S;S=d===`popover`?_?`dialog`:`popover`:d;let C=p===`icon-button`,w=y?`Change selected icon (${e})`:`Select an icon`,T=y?(0,s.jsx)(c.Icon,{icon:e,width:`20`,height:`20`}):(0,s.jsx)(`span`,{"aria-hidden":`true`,className:`text-muted-foreground text-lg`,children:`+`});return C?(0,s.jsx)(i.IconPickerContainer,{effectiveMode:S,isOpen:h,setIsOpen:g,selectorContent:x,popover:f,children:(0,s.jsx)(t.Button,{type:`button`,variant:`outline`,className:`p-2`,"aria-label":w,children:T})}):(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2`,children:[b,y&&(0,s.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:e})]}),(0,s.jsx)(i.IconPickerContainer,{effectiveMode:S,isOpen:h,setIsOpen:g,selectorContent:x,popover:f,children:(0,s.jsx)(t.Button,{type:`button`,variant:`outline`,className:`whitespace-nowrap`,children:y?`Change Icon`:`Select Icon`})})]})};exports.IconPicker=l;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Button = require('../Button.cjs');
+const require_use_media_query = require('../hooks/use-media-query.cjs');
+const require_constants = require('./constants.cjs');
+const require_icon_picker_container = require('./icon-picker-container.cjs');
+const require_icon_picker_content = require('./icon-picker-content.cjs');
+require('../index.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);
+
+//#region src/icon-selector/IconPicker.tsx
+const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, variant = "default", providers: providersProp }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const isMobile = require_use_media_query.useMediaQuery({ maxWidth: 768 });
+	const handleSelectIcon = (0, react.useCallback)((iconName) => {
+		onChange?.(iconName);
+		setIsOpen(false);
+		onOpenChange?.(false);
+	}, [onChange, onOpenChange]);
+	const hasValue = typeof value === "string" && value.length > 0;
+	const displayIcon = hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__iconify_react.Icon, {
+		icon: value,
+		width: "20",
+		height: "20"
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-sm text-muted-foreground",
+		children: "No icon selected"
+	});
+	const selectorContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_content.default, {
+		providers: providersProp,
+		onChange: handleSelectIcon,
+		onSelect: () => setIsOpen(false)
+	});
+	if (providersProp.length === 0) if (process.env.NODE_ENV === "development") throw new Error(require_constants.ICON_SELECTOR_ERROR_MESSAGE);
+	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "No icons configured" });
+	let effectiveMode;
+	if (pickerMode === "popover") effectiveMode = isMobile ? "dialog" : "popover";
+	else effectiveMode = pickerMode;
+	const isIconButtonVariant = variant === "icon-button";
+	const iconButtonLabel = hasValue ? `Change selected icon (${value})` : "Select an icon";
+	const iconButtonContent = hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__iconify_react.Icon, {
+		icon: value,
+		width: "20",
+		height: "20"
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: "text-muted-foreground text-lg",
+		children: "+"
+	});
+	if (isIconButtonVariant) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_container.IconPickerContainer, {
+		effectiveMode,
+		isOpen,
+		setIsOpen,
+		selectorContent,
+		popover,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			type: "button",
+			variant: "outline",
+			className: "p-2",
+			"aria-label": iconButtonLabel,
+			children: iconButtonContent
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2",
+			children: [displayIcon, hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm text-muted-foreground",
+				children: value
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_container.IconPickerContainer, {
+			effectiveMode,
+			isOpen,
+			setIsOpen,
+			selectorContent,
+			popover,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				variant: "outline",
+				className: "whitespace-nowrap",
+				children: hasValue ? "Change Icon" : "Select Icon"
+			})
+		})]
+	});
+};
+
+//#endregion
+exports.IconPicker = IconPicker;

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

@@ -1,4 +1,5 @@
-import { AsyncIconProvider } from "./use-async-providers.cjs";
+import { IconProvider } from "./types.cjs";
+import "../index.cjs";
 import { PopoverContent } from "@pixpilot/shadcn";
 import { FC } from "react";
 
@@ -22,7 +23,7 @@ interface IconPickerProps {
   pickerMode?: MountType;
   popover?: Partial<React.ComponentProps<typeof PopoverContent>>;
   variant?: IconPickerVariant;
-  providers: AsyncIconProvider[];
+  providers: IconProvider[];
   isLoading?: boolean;
   onProvidersLoaded?: (providers: Array<{
     prefix: string;

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

@@ -1,4 +1,5 @@
-import { AsyncIconProvider } from "./use-async-providers.js";
+import { IconProvider } from "./types.js";
+import "../index.js";
 import { PopoverContent } from "@pixpilot/shadcn";
 import { FC } from "react";
 
@@ -22,7 +23,7 @@ interface IconPickerProps {
   pickerMode?: MountType;
   popover?: Partial<React.ComponentProps<typeof PopoverContent>>;
   variant?: IconPickerVariant;
-  providers: AsyncIconProvider[];
+  providers: IconProvider[];
   isLoading?: boolean;
   onProvidersLoaded?: (providers: Array<{
     prefix: string;

package/dist/icon-selector/IconPicker.js

@@ -1 +1,88 @@
-import{Button as e}from"../Button.js";import{useMediaQuery as t}from"../hooks/use-media-query.js";import{IconPickerContainer as n}from"./icon-picker-container.js";import r from"./icon-picker-content.js";import"../index.js";import{useCallback as i,useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Icon as c}from"@iconify/react";const l=({value:l,onChange:u,onOpenChange:d,pickerMode:f=`dialog`,popover:p,variant:m=`default`,providers:h})=>{let[g,_]=a(!1),v=t({maxWidth:768}),y=i(e=>{u?.(e),_(!1),d?.(!1)},[u,d]),b=typeof l==`string`&&l.length>0,x=b?o(c,{icon:l,width:`20`,height:`20`}):o(`span`,{className:`text-sm text-muted-foreground`,children:`No icon selected`}),S=o(r,{providers:h,onChange:y,onSelect:()=>_(!1)});if(h.length===0)return o(`div`,{children:`No icons configured`});let C;C=f===`popover`?v?`dialog`:`popover`:f;let w=m===`icon-button`,T=b?`Change selected icon (${l})`:`Select an icon`,E=b?o(c,{icon:l,width:`20`,height:`20`}):o(`span`,{"aria-hidden":`true`,className:`text-muted-foreground text-lg`,children:`+`});return w?o(n,{effectiveMode:C,isOpen:g,setIsOpen:_,selectorContent:S,popover:p,children:o(e,{type:`button`,variant:`outline`,className:`p-2`,"aria-label":T,children:E})}):s(`div`,{className:`flex items-center gap-2`,children:[s(`div`,{className:`flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2`,children:[x,b&&o(`span`,{className:`text-sm text-muted-foreground`,children:l})]}),o(n,{effectiveMode:C,isOpen:g,setIsOpen:_,selectorContent:S,popover:p,children:o(e,{type:`button`,variant:`outline`,className:`whitespace-nowrap`,children:b?`Change Icon`:`Select Icon`})})]})};export{l as IconPicker};
+import { Button } from "../Button.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { ICON_SELECTOR_ERROR_MESSAGE } from "./constants.js";
+import { IconPickerContainer } from "./icon-picker-container.js";
+import icon_picker_content_default from "./icon-picker-content.js";
+import "../index.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@iconify/react";
+
+//#region src/icon-selector/IconPicker.tsx
+const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, variant = "default", providers: providersProp }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const isMobile = useMediaQuery({ maxWidth: 768 });
+	const handleSelectIcon = useCallback((iconName) => {
+		onChange?.(iconName);
+		setIsOpen(false);
+		onOpenChange?.(false);
+	}, [onChange, onOpenChange]);
+	const hasValue = typeof value === "string" && value.length > 0;
+	const displayIcon = hasValue ? /* @__PURE__ */ jsx(Icon, {
+		icon: value,
+		width: "20",
+		height: "20"
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "text-sm text-muted-foreground",
+		children: "No icon selected"
+	});
+	const selectorContent = /* @__PURE__ */ jsx(icon_picker_content_default, {
+		providers: providersProp,
+		onChange: handleSelectIcon,
+		onSelect: () => setIsOpen(false)
+	});
+	if (providersProp.length === 0) throw new Error(ICON_SELECTOR_ERROR_MESSAGE);
+	let effectiveMode;
+	if (pickerMode === "popover") effectiveMode = isMobile ? "dialog" : "popover";
+	else effectiveMode = pickerMode;
+	const isIconButtonVariant = variant === "icon-button";
+	const iconButtonLabel = hasValue ? `Change selected icon (${value})` : "Select an icon";
+	const iconButtonContent = hasValue ? /* @__PURE__ */ jsx(Icon, {
+		icon: value,
+		width: "20",
+		height: "20"
+	}) : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "text-muted-foreground text-lg",
+		children: "+"
+	});
+	if (isIconButtonVariant) return /* @__PURE__ */ jsx(IconPickerContainer, {
+		effectiveMode,
+		isOpen,
+		setIsOpen,
+		selectorContent,
+		popover,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			className: "p-2",
+			"aria-label": iconButtonLabel,
+			children: iconButtonContent
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2",
+			children: [displayIcon, hasValue && /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: value
+			})]
+		}), /* @__PURE__ */ jsx(IconPickerContainer, {
+			effectiveMode,
+			isOpen,
+			setIsOpen,
+			selectorContent,
+			popover,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				className: "whitespace-nowrap",
+				children: hasValue ? "Change Icon" : "Select Icon"
+			})
+		})]
+	});
+};
+
+//#endregion
+export { IconPicker };

package/dist/icon-selector/constants.cjs

@@ -1 +1,7 @@
-const e=`IconSelector requires icon providers configured in <Form fields={{iconSelector: {providers: [{prefix, icons, name}, ...]}}}>`;exports.ICON_SELECTOR_ERROR_MESSAGE=`IconSelector requires icon providers configured in <Form fields={{iconSelector: {providers: [{prefix, icons, name}, ...]}}}>`;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+
+//#region src/icon-selector/constants.ts
+const ICON_SELECTOR_ERROR_MESSAGE = `IconSelector requires icon providers configured in <Form fields={{iconSelector: {providers: [{prefix, icons, name}, ...]}}}>`;
+
+//#endregion
+exports.ICON_SELECTOR_ERROR_MESSAGE = ICON_SELECTOR_ERROR_MESSAGE;

package/dist/icon-selector/constants.js

@@ -0,0 +1,5 @@
+//#region src/icon-selector/constants.ts
+const ICON_SELECTOR_ERROR_MESSAGE = `IconSelector requires icon providers configured in <Form fields={{iconSelector: {providers: [{prefix, icons, name}, ...]}}}>`;
+
+//#endregion
+export { ICON_SELECTOR_ERROR_MESSAGE };

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(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);let s=require(`lucide-react`);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,a.useState)(``),{providers:m,isLoading:h}=n.useAsyncProviders(e),g=(0,a.useMemo)(()=>m.map(e=>e.prefix),[m]),[_,v]=(0,a.useState)(g[0]??`default`);(0,a.useEffect)(()=>{g.length>0&&v(e=>e===`default`?g[0]??`default`:e)},[g]);let y=(0,a.useCallback)(e=>{try{return e.icons.map(t=>`${e.prefix}:${t}`)}catch{return[]}},[]),b=(0,a.useMemo)(()=>{let e={};for(let t of m)e[t.prefix]=y(t);return e},[m,y]),x=(0,a.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,a.useCallback)(e=>{l?.(e),u?.()},[l,u]),{isSearching:C,data:w}=x,T=!C&&w.length===0||C&&w.length===0;return(0,o.jsxs)(`div`,{className:`flex flex-col gap-4 min-h-[200px] max-h-[80vh]`,children:[(0,o.jsxs)(`div`,{className:`relative`,children:[(0,o.jsx)(i.Input,{placeholder:`Search icons...`,value:f,onChange:e=>p(e.target.value),autoFocus:!0,disabled:h}),f&&(0,o.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,o.jsx)(s.X,{className:`h-4 w-4`})})]}),!C&&m.length>1&&(0,o.jsxs)(i.Tabs,{value:_,onValueChange:v,children:[(0,o.jsx)(i.TabsList,{className:`w-full`,children:m.map(e=>(0,o.jsx)(i.TabsTrigger,{value:e.prefix,children:e.name??e.prefix},e.prefix))}),m.map(e=>(0,o.jsx)(i.TabsContent,{value:e.prefix,children:(0,o.jsx)(r.default,{icons:b[e.prefix]??[],onSelectIcon:S,maxHeight:d})},e.prefix))]}),T&&C&&(0,o.jsx)(`div`,{className:`flex items-center justify-center py-8`,children:(0,o.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:c(!1,C)})}),(0,o.jsx)(t.LoadingOverlay,{message:`Loading icons...`,loading:h}),C&&m.length>0&&(0,o.jsx)(r.default,{icons:w,onSelectIcon:S,maxHeight:d}),!C&&m.length===1&&(0,o.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{useCallback as c,useEffect as l,useMemo as u,useState as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{X as m}from"lucide-react";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]=d(``),{providers:S,isLoading:C}=t(g),w=u(()=>S.map(e=>e.prefix),[S]),[T,E]=d(w[0]??`default`);l(()=>{w.length>0&&E(e=>e===`default`?w[0]??`default`:e)},[w]);let D=c(e=>{try{return e.icons.map(t=>`${e.prefix}:${t}`)}catch{return[]}},[]),O=u(()=>{let e={};for(let t of S)e[t.prefix]=D(t);return e},[S,D]),k=u(()=>{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=c(e=>{_?.(e),v?.()},[_,v]),{isSearching:j,data:M}=k,N=!j&&M.length===0||j&&M.length===0;return p(`div`,{className:`flex flex-col gap-4 min-h-[200px] max-h-[80vh]`,children:[p(`div`,{className:`relative`,children:[f(r,{placeholder:`Search icons...`,value:b,onChange:e=>x(e.target.value),autoFocus:!0,disabled:C}),b&&f(`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:f(m,{className:`h-4 w-4`})})]}),!j&&S.length>1&&p(i,{value:T,onValueChange:E,children:[f(o,{className:`w-full`,children:S.map(e=>f(s,{value:e.prefix,children:e.name??e.prefix},e.prefix))}),S.map(e=>f(a,{value:e.prefix,children:f(n,{icons:O[e.prefix]??[],onSelectIcon:A,maxHeight:y})},e.prefix))]}),N&&j&&f(`div`,{className:`flex items-center justify-center py-8`,children:f(`p`,{className:`text-sm text-muted-foreground`,children:h(!1,j)})}),f(e,{message:`Loading icons...`,loading:C}),j&&S.length>0&&f(n,{icons:M,onSelectIcon:A,maxHeight:y}),!j&&S.length===1&&f(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(`./use-async-providers.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.d.cts

@@ -1,3 +1,2 @@
-import { AsyncIconProvider, IconProviderLoader, useAsyncProviders } from "./use-async-providers.cjs";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./IconPicker.cjs";
-import { IconProvider } from "./types.cjs";
+import { IconProvider, IconProviderLoader, IconProviderProps } from "./types.cjs";

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

@@ -1,3 +1,2 @@
-import { AsyncIconProvider, IconProviderLoader, useAsyncProviders } from "./use-async-providers.js";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./IconPicker.js";
-import { IconProvider } from "./types.js";
+import { IconProvider, IconProviderLoader, IconProviderProps } from "./types.js";

package/dist/icon-selector/index.js

@@ -1 +1 @@
-import{useAsyncProviders as e}from"./use-async-providers.js";import{IconPicker as t}from"./IconPicker.js";
+import { IconPicker } from "./IconPicker.js";

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

@@ -1,5 +1,5 @@
 //#region src/icon-selector/types.d.ts
-interface IconProvider {
+interface IconProviderProps {
   prefix: string;
   icons: string[];
   /**
@@ -7,5 +7,7 @@ interface IconProvider {
    */
   name: string;
 }
+type IconProviderLoader = () => Promise<IconProviderProps>;
+type IconProvider = IconProviderProps | IconProviderLoader;
 //#endregion
-export { IconProvider };
+export { IconProvider, IconProviderLoader, IconProviderProps };