@pixpilot/shadcn-ui 0.30.0 → 0.31.1

package/dist/file-upload-inline/FileUploadInline.d.cts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/icon-selector/IconPicker.cjs

@@ -17,7 +17,8 @@ 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, showValueText = true, emptyText = "+", showClearButton = true }) => {
+const ICON_SIZE = "!h-4 !w-4";
+const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const isMobile = require_use_media_query.useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = (0, react.useCallback)((iconName) => {
@@ -63,19 +64,16 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		isOpen,
 		setIsOpen,
 		selectorContent,
-		popover,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "relative inline-flex",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
-				type: "button",
-				variant: "outline",
-				className: "p-2",
-				"aria-label": iconButtonLabel,
-				children: iconButtonContent
-			}), shouldShowClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		popover: popoverProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+			type: "button",
+			variant: "outline",
+			"aria-label": iconButtonLabel,
+			className: (0, __pixpilot_shadcn.cn)("p-2 min-w-10", slots?.preview?.className),
+			children: [iconButtonContent, shouldShowClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 				type: "button",
 				title: "Clear selected icon",
-				className: (0, __pixpilot_shadcn.cn)("absolute -right-1 -top-1 inline-flex h-4 w-4 items-center justify-center rounded-full !p-1", "border border-border bg-background text-foreground", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+				className: (0, __pixpilot_shadcn.cn)(`absolute -right-1 -top-1 inline-flex ${ICON_SIZE} items-center justify-center rounded-full !p-1`, "border border-border bg-background text-foreground", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", slots?.clearIcon?.className),
 				"aria-label": "Clear icon",
 				onClick: (event) => {
 					event.preventDefault();
@@ -87,12 +85,12 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2",
+		className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2", slots?.root?.className),
 		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",
+				className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2", slots?.preview?.className),
 				children: [displayIcon, showValueText && hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-sm text-muted-foreground",
+					className: (0, __pixpilot_shadcn.cn)("text-sm text-muted-foreground", slots?.valueText?.className),
 					children: value
 				})]
 			}),
@@ -101,18 +99,18 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 				isOpen,
 				setIsOpen,
 				selectorContent,
-				popover,
+				popover: popoverProps,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 					type: "button",
 					variant: "outline",
-					className: "whitespace-nowrap",
+					className: (0, __pixpilot_shadcn.cn)("whitespace-nowrap", slots?.trigger?.className),
 					children: hasValue ? "Change Icon" : "Select Icon"
 				})
 			}),
 			shouldShowClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 				type: "button",
 				variant: "outline",
-				className: "whitespace-nowrap",
+				className: (0, __pixpilot_shadcn.cn)("whitespace-nowrap", slots?.clearButton?.className),
 				onClick: handleClearIcon,
 				children: "Clear"
 			})

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

@@ -5,7 +5,6 @@ import { FC } from "react";
 //#region src/icon-selector/IconPicker.d.ts
 
 /**
- * Mount type for the icon selector picker
  * - 'dialog': Always display as a modal dialog
  * - 'popover': Always display as a popover anchored to the trigger button
  */
@@ -20,7 +19,7 @@ interface IconPickerProps {
   onChange?: (value: string) => void;
   onOpenChange?: (open: boolean) => void;
   pickerMode?: MountType;
-  popover?: Partial<React.ComponentProps<typeof PopoverContent>>;
+  popoverProps?: Partial<React.ComponentProps<typeof PopoverContent>>;
   variant?: IconPickerVariant;
   providers: IconProvider[];
   isLoading?: boolean;
@@ -31,6 +30,26 @@ interface IconPickerProps {
   showValueText?: boolean;
   emptyText?: React.ReactNode;
   showClearButton?: boolean;
+  slots?: {
+    root?: {
+      className?: string;
+    };
+    preview?: {
+      className?: string;
+    };
+    trigger?: {
+      className?: string;
+    };
+    clearButton?: {
+      className?: string;
+    };
+    valueText?: {
+      className?: string;
+    };
+    clearIcon?: {
+      className?: string;
+    };
+  };
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

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

@@ -5,7 +5,6 @@ import { FC } from "react";
 //#region src/icon-selector/IconPicker.d.ts
 
 /**
- * Mount type for the icon selector picker
  * - 'dialog': Always display as a modal dialog
  * - 'popover': Always display as a popover anchored to the trigger button
  */
@@ -20,7 +19,7 @@ interface IconPickerProps {
   onChange?: (value: string) => void;
   onOpenChange?: (open: boolean) => void;
   pickerMode?: MountType;
-  popover?: Partial<React.ComponentProps<typeof PopoverContent>>;
+  popoverProps?: Partial<React.ComponentProps<typeof PopoverContent>>;
   variant?: IconPickerVariant;
   providers: IconProvider[];
   isLoading?: boolean;
@@ -31,6 +30,26 @@ interface IconPickerProps {
   showValueText?: boolean;
   emptyText?: React.ReactNode;
   showClearButton?: boolean;
+  slots?: {
+    root?: {
+      className?: string;
+    };
+    preview?: {
+      className?: string;
+    };
+    trigger?: {
+      className?: string;
+    };
+    clearButton?: {
+      className?: string;
+    };
+    valueText?: {
+      className?: string;
+    };
+    clearIcon?: {
+      className?: string;
+    };
+  };
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

package/dist/icon-selector/IconPicker.js

@@ -5,13 +5,14 @@ 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 { cn } from "@pixpilot/shadcn";
-import { X } from "lucide-react";
+import { Plus, X } from "lucide-react";
 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, showValueText = true, emptyText = "+", showClearButton = true }) => {
+const ICON_SIZE = "!h-4 !w-4";
+const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ jsx(Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const isMobile = useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = useCallback((iconName) => {
@@ -56,19 +57,16 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		isOpen,
 		setIsOpen,
 		selectorContent,
-		popover,
-		children: /* @__PURE__ */ jsxs("span", {
-			className: "relative inline-flex",
-			children: [/* @__PURE__ */ jsx(Button$1, {
-				type: "button",
-				variant: "outline",
-				className: "p-2",
-				"aria-label": iconButtonLabel,
-				children: iconButtonContent
-			}), shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
+		popover: popoverProps,
+		children: /* @__PURE__ */ jsxs(Button$1, {
+			type: "button",
+			variant: "outline",
+			"aria-label": iconButtonLabel,
+			className: cn("p-2 min-w-10", slots?.preview?.className),
+			children: [iconButtonContent, shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
 				type: "button",
 				title: "Clear selected icon",
-				className: cn("absolute -right-1 -top-1 inline-flex h-4 w-4 items-center justify-center rounded-full !p-1", "border border-border bg-background text-foreground", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+				className: cn(`absolute -right-1 -top-1 inline-flex ${ICON_SIZE} items-center justify-center rounded-full !p-1`, "border border-border bg-background text-foreground", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", slots?.clearIcon?.className),
 				"aria-label": "Clear icon",
 				onClick: (event) => {
 					event.preventDefault();
@@ -80,12 +78,12 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2",
+		className: cn("flex items-center gap-2", slots?.root?.className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2",
+				className: cn("flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2", slots?.preview?.className),
 				children: [displayIcon, showValueText && hasValue && /* @__PURE__ */ jsx("span", {
-					className: "text-sm text-muted-foreground",
+					className: cn("text-sm text-muted-foreground", slots?.valueText?.className),
 					children: value
 				})]
 			}),
@@ -94,18 +92,18 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 				isOpen,
 				setIsOpen,
 				selectorContent,
-				popover,
+				popover: popoverProps,
 				children: /* @__PURE__ */ jsx(Button$1, {
 					type: "button",
 					variant: "outline",
-					className: "whitespace-nowrap",
+					className: cn("whitespace-nowrap", slots?.trigger?.className),
 					children: hasValue ? "Change Icon" : "Select Icon"
 				})
 			}),
 			shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
 				type: "button",
 				variant: "outline",
-				className: "whitespace-nowrap",
+				className: cn("whitespace-nowrap", slots?.clearButton?.className),
 				onClick: handleClearIcon,
 				children: "Clear"
 			})

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

@@ -22,11 +22,17 @@ const IconPickerContainer = ({ effectiveMode, isOpen, setIsOpen, selectorContent
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
 			asChild: true,
 			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__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
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-lg font-semibold",
+					children: "Select an Icon"
+				})
+			}), selectorContent]
 		})]
 	})] });
 };

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

@@ -19,11 +19,17 @@ const IconPickerContainer = ({ effectiveMode, isOpen, setIsOpen, selectorContent
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children
-		}), /* @__PURE__ */ jsx(PopoverContent, {
+		}), /* @__PURE__ */ jsxs(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
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ jsx("h3", {
+					className: "text-lg font-semibold",
+					children: "Select an Icon"
+				})
+			}), selectorContent]
 		})]
 	})] });
 };

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

package/dist/theme-toggle/ThemeModeDropdown.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
@@ -17,7 +17,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime11.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchInside.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -25,7 +25,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime10.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
-    "@internal/prettier-config": "0.0.1",
     "@internal/hooks": "0.0.0",
+    "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"