@pixpilot/shadcn-ui 0.4.0 → 0.4.2

package/dist/file-upload-inline/FileUploadInlineItem.cjs

@@ -1 +1,94 @@
-"use client";const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../packages/shadcn/src/components/ui/file-upload.cjs`);require(`../packages/shadcn/src/components/index.cjs`);const n=require(`../file-upload/hooks/use-file-error.cjs`),r=require(`../file-upload/hooks/use-file-upload-progress-callbacks.cjs`);require(`../file-upload/hooks/index.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(`pretty-bytes`);s=e.__toESM(s);let c=require(`react/jsx-runtime`);c=e.__toESM(c);const l=({size:e,name:t,children:n})=>(0,c.jsxs)(`div`,{className:(0,i.cn)(`min-w-0 flex-1 flex flex-col`),children:[(0,c.jsx)(`span`,{className:(0,i.cn)(`truncate font-medium text-sm`),children:t}),(0,c.jsx)(`span`,{className:(0,i.cn)(`truncate text-muted-foreground text-xs`),children:(0,s.default)(e)}),n]}),u=({onClick:e})=>(0,c.jsx)(i.Button,{variant:`ghost`,size:`icon`,className:`size-7 shrink-0`,"aria-label":`Remove file`,onClick:e,children:(0,c.jsx)(a.XIcon,{className:`h-3.5 w-3.5`})}),d=({children:e})=>(0,c.jsx)(`div`,{className:`flex flex-col gap-2 rounded-md border border-input bg-background px-3 py-2 m-0 w-full`,children:e}),f=({children:e})=>(0,c.jsx)(`div`,{className:`flex w-full gap-2`,children:e}),p=o.default.memo(({file:e,name:a=``,size:o=0,type:s=``,lastModified:p=0,disabled:m=!1,onDelete:h})=>{r.useFileUploadProgressCallbacks(e,{onChange:()=>{}});let g=n.useFileError(e),_=t.useStore(t=>t.files.get(e)?.status===`uploading`);return(0,c.jsx)(i.FileUploadItem,{className:`p-0 m-0 border-none`,value:e,children:(0,c.jsxs)(d,{children:[(0,c.jsxs)(f,{children:[(0,c.jsx)(l,{name:a,size:o,lastModified:p,type:s,children:g!=null&&_&&(0,c.jsx)(`div`,{className:`text-destructive text-xs`,children:g})}),!m&&(0,c.jsx)(u,{onClick:t=>{t.stopPropagation(),t.preventDefault(),h({name:a,size:o,type:s,lastModified:p,file:e})}})]}),_&&g==null&&(0,c.jsx)(i.FileUploadItemProgress,{variant:`linear`,className:`h-1 w-full`})]})},`${a}-${o}-${p}`)});exports.FileUploadInlineItem=p;
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_use_file_error = require('../file-upload/hooks/use-file-error.cjs');
+const require_use_file_upload_progress_callbacks = require('../file-upload/hooks/use-file-upload-progress-callbacks.cjs');
+require('../file-upload/hooks/index.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 pretty_bytes = require("pretty-bytes");
+pretty_bytes = require_rolldown_runtime.__toESM(pretty_bytes);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/file-upload-inline/FileUploadInlineItem.tsx
+const FileMetaDataDisplay = ({ size, name, children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn.cn)("min-w-0 flex-1 flex flex-col"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, __pixpilot_shadcn.cn)("truncate font-medium text-sm"),
+				children: name
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, __pixpilot_shadcn.cn)("truncate text-muted-foreground text-xs"),
+				children: (0, pretty_bytes.default)(size)
+			}),
+			children
+		]
+	});
+};
+const DeleteIconButton = ({ onClick }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+		variant: "ghost",
+		size: "icon",
+		className: "size-7 shrink-0",
+		"aria-label": "Remove file",
+		onClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, { className: "h-3.5 w-3.5" })
+	});
+};
+const FileItemWrapper = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col gap-2 rounded-md border border-input bg-background px-3 py-2 m-0 w-full",
+		children
+	});
+};
+const FileItemInnerWrapper = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex w-full gap-2",
+		children
+	});
+};
+const FileUploadInlineItem = react.default.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete }) => {
+	require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, { onChange: () => {} });
+	const fileError = require_use_file_error.useFileError(file);
+	const isUploading = (0, __pixpilot_shadcn.useFileUpload)((store) => {
+		return store.files.get(file)?.status === "uploading";
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItem, {
+		className: "p-0 m-0 border-none",
+		value: file,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FileItemWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FileItemInnerWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileMetaDataDisplay, {
+			name,
+			size,
+			lastModified,
+			type,
+			children: fileError != null && isUploading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-destructive text-xs",
+				children: fileError
+			})
+		}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeleteIconButton, { onClick: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			onDelete({
+				name,
+				size,
+				type,
+				lastModified,
+				file
+			});
+		} })] }), isUploading && fileError == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemProgress, {
+			variant: "linear",
+			className: "h-1 w-full"
+		})] })
+	}, `${name}-${size}-${lastModified}`);
+});
+
+//#endregion
+exports.FileUploadInlineItem = FileUploadInlineItem;

package/dist/file-upload-inline/FileUploadInlineItem.js

@@ -1 +1,88 @@
-"use client";import{useStore as e}from"../packages/shadcn/src/components/ui/file-upload.js";import"../packages/shadcn/src/components/index.js";import{useFileError as t}from"../file-upload/hooks/use-file-error.js";import{useFileUploadProgressCallbacks as n}from"../file-upload/hooks/use-file-upload-progress-callbacks.js";import"../file-upload/hooks/index.js";import{Button as r,FileUploadItem as i,FileUploadItemProgress as a,cn as o}from"@pixpilot/shadcn";import{XIcon as s}from"lucide-react";import c from"react";import l from"pretty-bytes";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=({size:e,name:t,children:n})=>d(`div`,{className:o(`min-w-0 flex-1 flex flex-col`),children:[u(`span`,{className:o(`truncate font-medium text-sm`),children:t}),u(`span`,{className:o(`truncate text-muted-foreground text-xs`),children:l(e)}),n]}),p=({onClick:e})=>u(r,{variant:`ghost`,size:`icon`,className:`size-7 shrink-0`,"aria-label":`Remove file`,onClick:e,children:u(s,{className:`h-3.5 w-3.5`})}),m=({children:e})=>u(`div`,{className:`flex flex-col gap-2 rounded-md border border-input bg-background px-3 py-2 m-0 w-full`,children:e}),h=({children:e})=>u(`div`,{className:`flex w-full gap-2`,children:e}),g=c.memo(({file:r,name:o=``,size:s=0,type:c=``,lastModified:l=0,disabled:g=!1,onDelete:_})=>{n(r,{onChange:()=>{}});let v=t(r),y=e(e=>e.files.get(r)?.status===`uploading`);return u(i,{className:`p-0 m-0 border-none`,value:r,children:d(m,{children:[d(h,{children:[u(f,{name:o,size:s,lastModified:l,type:c,children:v!=null&&y&&u(`div`,{className:`text-destructive text-xs`,children:v})}),!g&&u(p,{onClick:e=>{e.stopPropagation(),e.preventDefault(),_({name:o,size:s,type:c,lastModified:l,file:r})}})]}),y&&v==null&&u(a,{variant:`linear`,className:`h-1 w-full`})]})},`${o}-${s}-${l}`)});export{g as FileUploadInlineItem};
+'use client';
+
+
+import { useFileError } from "../file-upload/hooks/use-file-error.js";
+import { useFileUploadProgressCallbacks } from "../file-upload/hooks/use-file-upload-progress-callbacks.js";
+import "../file-upload/hooks/index.js";
+import { Button, FileUploadItem, FileUploadItemProgress, cn, useFileUpload } from "@pixpilot/shadcn";
+import { XIcon } from "lucide-react";
+import React from "react";
+import prettyBytes from "pretty-bytes";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/file-upload-inline/FileUploadInlineItem.tsx
+const FileMetaDataDisplay = ({ size, name, children }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("min-w-0 flex-1 flex flex-col"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("truncate font-medium text-sm"),
+				children: name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("truncate text-muted-foreground text-xs"),
+				children: prettyBytes(size)
+			}),
+			children
+		]
+	});
+};
+const DeleteIconButton = ({ onClick }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		className: "size-7 shrink-0",
+		"aria-label": "Remove file",
+		onClick,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "h-3.5 w-3.5" })
+	});
+};
+const FileItemWrapper = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2 rounded-md border border-input bg-background px-3 py-2 m-0 w-full",
+		children
+	});
+};
+const FileItemInnerWrapper = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full gap-2",
+		children
+	});
+};
+const FileUploadInlineItem = React.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete }) => {
+	useFileUploadProgressCallbacks(file, { onChange: () => {} });
+	const fileError = useFileError(file);
+	const isUploading = useFileUpload((store) => {
+		return store.files.get(file)?.status === "uploading";
+	});
+	return /* @__PURE__ */ jsx(FileUploadItem, {
+		className: "p-0 m-0 border-none",
+		value: file,
+		children: /* @__PURE__ */ jsxs(FileItemWrapper, { children: [/* @__PURE__ */ jsxs(FileItemInnerWrapper, { children: [/* @__PURE__ */ jsx(FileMetaDataDisplay, {
+			name,
+			size,
+			lastModified,
+			type,
+			children: fileError != null && isUploading && /* @__PURE__ */ jsx("div", {
+				className: "text-destructive text-xs",
+				children: fileError
+			})
+		}), !disabled && /* @__PURE__ */ jsx(DeleteIconButton, { onClick: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			onDelete({
+				name,
+				size,
+				type,
+				lastModified,
+				file
+			});
+		} })] }), isUploading && fileError == null && /* @__PURE__ */ jsx(FileUploadItemProgress, {
+			variant: "linear",
+			className: "h-1 w-full"
+		})] })
+	}, `${name}-${size}-${lastModified}`);
+});
+
+//#endregion
+export { FileUploadInlineItem };

package/dist/file-upload-inline/defaults.cjs

@@ -1 +1,11 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t={buttonText:`Browse file`,showIcon:!0,disabled:!1,multiple:!1};exports.defaultOptions=t;
+
+//#region src/file-upload-inline/defaults.ts
+const defaultOptions = {
+	buttonText: "Browse file",
+	showIcon: true,
+	disabled: false,
+	multiple: false
+};
+
+//#endregion
+exports.defaultOptions = defaultOptions;

package/dist/file-upload-inline/defaults.js

@@ -1 +1,10 @@
-const e={buttonText:`Browse file`,showIcon:!0,disabled:!1,multiple:!1};export{e as defaultOptions};
+//#region src/file-upload-inline/defaults.ts
+const defaultOptions = {
+	buttonText: "Browse file",
+	showIcon: true,
+	disabled: false,
+	multiple: false
+};
+
+//#endregion
+export { defaultOptions };

package/dist/file-upload-inline/index.cjs

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

package/dist/file-upload-inline/index.js

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

package/dist/file-upload-inline/utils.cjs

@@ -1 +1,36 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../file-upload/utils/merge-file-metadata.cjs`);function n(e){return e==null?[]:Array.isArray(e)?e:[e]}function r(e,t,n){let r=e.map(({file:e,...t})=>t);t?n?.(r):n?.(r[0]??null)}function i(e,i,a,o){let s=t.mergeFileMetadata(n(e),i),c=s.map(({file:e,...t})=>t);return r(s,a,o),{mergedFiles:s,fileMetaDataOnly:c}}exports.callOnChange=r,exports.handleFileValueChange=i,exports.normalizeToArray=n;
+const require_merge_file_metadata = require('../file-upload/utils/merge-file-metadata.cjs');
+
+//#region src/file-upload-inline/utils.ts
+function normalizeToArray(value) {
+	if (value == null) return [];
+	return Array.isArray(value) ? value : [value];
+}
+function callOnChange(value, multiple, onChange) {
+	const fileMetaDataOnly = value.map(({ file,...metaData }) => metaData);
+	if (multiple) onChange?.(fileMetaDataOnly);
+	else onChange?.(fileMetaDataOnly[0] ?? null);
+}
+/**
+* Handles file value change for FileUploadInline component
+* Normalizes files, merges metadata, and calls appropriate onChange callback
+*
+* @param value - The current file value
+* @param acceptedFiles - Files accepted from file input
+* @param multiple - Whether multiple files are allowed
+* @param onChange - onChange callback
+* @returns Object containing merged files and fileMetadataOnly arrays
+*/
+function handleFileValueChange(value, acceptedFiles, multiple, onChange) {
+	const mergedFiles = require_merge_file_metadata.mergeFileMetadata(normalizeToArray(value), acceptedFiles);
+	const fileMetaDataOnly = mergedFiles.map(({ file,...metaData }) => metaData);
+	callOnChange(mergedFiles, multiple, onChange);
+	return {
+		mergedFiles,
+		fileMetaDataOnly
+	};
+}
+
+//#endregion
+exports.callOnChange = callOnChange;
+exports.handleFileValueChange = handleFileValueChange;
+exports.normalizeToArray = normalizeToArray;

package/dist/file-upload-inline/utils.js

@@ -1 +1,34 @@
-import{mergeFileMetadata as e}from"../file-upload/utils/merge-file-metadata.js";function t(e){return e==null?[]:Array.isArray(e)?e:[e]}function n(e,t,n){let r=e.map(({file:e,...t})=>t);t?n?.(r):n?.(r[0]??null)}function r(r,i,a,o){let s=e(t(r),i),c=s.map(({file:e,...t})=>t);return n(s,a,o),{mergedFiles:s,fileMetaDataOnly:c}}export{n as callOnChange,r as handleFileValueChange,t as normalizeToArray};
+import { mergeFileMetadata } from "../file-upload/utils/merge-file-metadata.js";
+
+//#region src/file-upload-inline/utils.ts
+function normalizeToArray(value) {
+	if (value == null) return [];
+	return Array.isArray(value) ? value : [value];
+}
+function callOnChange(value, multiple, onChange) {
+	const fileMetaDataOnly = value.map(({ file,...metaData }) => metaData);
+	if (multiple) onChange?.(fileMetaDataOnly);
+	else onChange?.(fileMetaDataOnly[0] ?? null);
+}
+/**
+* Handles file value change for FileUploadInline component
+* Normalizes files, merges metadata, and calls appropriate onChange callback
+*
+* @param value - The current file value
+* @param acceptedFiles - Files accepted from file input
+* @param multiple - Whether multiple files are allowed
+* @param onChange - onChange callback
+* @returns Object containing merged files and fileMetadataOnly arrays
+*/
+function handleFileValueChange(value, acceptedFiles, multiple, onChange) {
+	const mergedFiles = mergeFileMetadata(normalizeToArray(value), acceptedFiles);
+	const fileMetaDataOnly = mergedFiles.map(({ file,...metaData }) => metaData);
+	callOnChange(mergedFiles, multiple, onChange);
+	return {
+		mergedFiles,
+		fileMetaDataOnly
+	};
+}
+
+//#endregion
+export { callOnChange, handleFileValueChange, normalizeToArray };

package/dist/hooks/index.cjs

@@ -1 +1 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./use-media-query.cjs`);
+const require_use_media_query = require('./use-media-query.cjs');

package/dist/hooks/index.js

@@ -1 +1 @@
-import{useMediaQuery as e}from"./use-media-query.js";
+import { useMediaQuery } from "./use-media-query.js";

package/dist/hooks/use-media-query.cjs

@@ -1 +1,9 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`react-responsive`);t=e.__toESM(t);const n=t.useMediaQuery;exports.useMediaQuery=n;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react_responsive = require("react-responsive");
+react_responsive = require_rolldown_runtime.__toESM(react_responsive);
+
+//#region src/hooks/use-media-query.ts
+const useMediaQuery = react_responsive.useMediaQuery;
+
+//#endregion
+exports.useMediaQuery = useMediaQuery;

package/dist/hooks/use-media-query.js

@@ -1 +1,7 @@
-import{useMediaQuery as e}from"react-responsive";const t=e;export{t as useMediaQuery};
+import { useMediaQuery } from "react-responsive";
+
+//#region src/hooks/use-media-query.ts
+const useMediaQuery$1 = useMediaQuery;
+
+//#endregion
+export { useMediaQuery$1 as useMediaQuery };

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');
+require('../hooks/index.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');
+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,5 +1,4 @@
 import { IconProvider } from "./types.cjs";
-import "../index.cjs";
 import { PopoverContent } from "@pixpilot/shadcn";
 import { FC } from "react";
 

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

@@ -1,5 +1,4 @@
 import { IconProvider } from "./types.js";
-import "../index.js";
 import { PopoverContent } from "@pixpilot/shadcn";
 import { FC } from "react";
 

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 "../hooks/index.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 { 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,6 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=`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}, ...]}}}>`;
+
+//#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 };