@pixpilot/shadcn-ui 0.5.0 → 0.6.0

package/dist/DatePicker.d.cts

@@ -3,14 +3,14 @@ import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
 
 //#region src/DatePicker.d.ts
-type BaseDatePickerProps = {
+type DatePickerProps = {
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: BaseDatePickerProps): react_jsx_runtime2.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime2.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }
 //#endregion
-export { DatePicker };
+export { DatePicker, DatePickerProps };

package/dist/DatePicker.d.ts

@@ -3,14 +3,14 @@ import { ComponentProps } from "react";
 import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/DatePicker.d.ts
-type BaseDatePickerProps = {
+type DatePickerProps = {
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: BaseDatePickerProps): react_jsx_runtime2.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime2.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }
 //#endregion
-export { DatePicker };
+export { DatePicker, DatePickerProps };

package/dist/avatar-upload/AvatarUpload.cjs

@@ -0,0 +1,83 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_utils = require('../shadcn/src/lib/utils.cjs');
+require('../shadcn/src/lib/index.cjs');
+const require_AvatarUploadComponents = require('./AvatarUploadComponents.cjs');
+const require_AvatarUploadItem = require('./AvatarUploadItem.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/avatar-upload/AvatarUpload.tsx
+const sizeClasses = {
+	sm: {
+		avatar: "h-20 w-20",
+		icon: "h-5 w-5",
+		dropZone: "p-3",
+		main: "space-y-2"
+	},
+	md: {
+		main: "space-y-2.5",
+		avatar: "h-28 w-28",
+		icon: "h-6 w-6 bottom-1 right-1",
+		dropZone: "p-4"
+	},
+	lg: {
+		avatar: "h-40 w-40",
+		icon: "h-7 w-7 bottom-1.5 right-1.5",
+		dropZone: "p-5",
+		main: "space-y-3"
+	}
+};
+const AvatarUpload = (props) => {
+	const { className, messages, value, onAccept, onChange, size = "md",...rest } = props;
+	const { upload = "Upload", change = "Change" } = messages || {};
+	const currentSize = sizeClasses[size];
+	const [files, setFiles] = react.default.useState([]);
+	const imageUrl = value?.url;
+	const handleAccept = react.default.useCallback((acceptedFiles) => {
+		setFiles(acceptedFiles.map((file) => {
+			return {
+				file,
+				id: `${file.name}-${file.lastModified.toString()}`
+			};
+		}));
+		onAccept?.(acceptedFiles);
+	}, [onAccept]);
+	const hasImageUrl = imageUrl != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUpload, {
+		...rest,
+		onAccept: handleAccept,
+		className: require_utils.cn("w-fit", className),
+		accept: "image/*",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadDropzone, {
+			className: currentSize.dropZone,
+			children: files.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadList, { children: files.map(({ file, id }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadItem.AvatarUploadItem, {
+				file,
+				index: i,
+				currentSize,
+				change,
+				onChange
+			}, id)) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AvatarUploadComponents.MainWrapper, {
+				currentSize,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.AvatarWrap, {
+					className: currentSize.avatar,
+					iconClass: currentSize.icon,
+					showChangeIcon: hasImageUrl,
+					children: hasImageUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.Image, { src: imageUrl }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UserCircle2, {
+						className: "text-muted-foreground w-full h-full",
+						strokeWidth: 1
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.MessageComponent, { message: hasImageUrl != null ? change : upload })]
+			})
+		})
+	});
+};
+AvatarUpload.displayName = "AvatarUpload";
+
+//#endregion
+exports.AvatarUpload = AvatarUpload;

package/dist/avatar-upload/AvatarUpload.d.cts

@@ -0,0 +1,16 @@
+import { SingleFileUploadProps } from "../file-upload/types/index.cjs";
+import "../file-upload/index.cjs";
+import { ComponentSizes } from "./types.cjs";
+import React from "react";
+
+//#region src/avatar-upload/AvatarUpload.d.ts
+interface AvatarUploadProps extends SingleFileUploadProps {
+  messages?: {
+    upload?: string;
+    change?: string;
+  };
+  size?: keyof ComponentSizes;
+}
+declare const AvatarUpload: React.FC<AvatarUploadProps>;
+//#endregion
+export { AvatarUpload, AvatarUploadProps };

package/dist/avatar-upload/AvatarUpload.d.ts

@@ -0,0 +1,16 @@
+import { SingleFileUploadProps } from "../file-upload/types/index.js";
+import "../file-upload/index.js";
+import { ComponentSizes } from "./types.js";
+import React from "react";
+
+//#region src/avatar-upload/AvatarUpload.d.ts
+interface AvatarUploadProps extends SingleFileUploadProps {
+  messages?: {
+    upload?: string;
+    change?: string;
+  };
+  size?: keyof ComponentSizes;
+}
+declare const AvatarUpload: React.FC<AvatarUploadProps>;
+//#endregion
+export { AvatarUpload, AvatarUploadProps };

package/dist/avatar-upload/AvatarUpload.js

@@ -0,0 +1,78 @@
+import { cn as cn$1 } from "../shadcn/src/lib/utils.js";
+import "../shadcn/src/lib/index.js";
+import { AvatarWrap, Image, MainWrapper, MessageComponent } from "./AvatarUploadComponents.js";
+import { AvatarUploadItem } from "./AvatarUploadItem.js";
+import { FileUpload, FileUploadDropzone, FileUploadList } from "@pixpilot/shadcn";
+import { UserCircle2 } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/avatar-upload/AvatarUpload.tsx
+const sizeClasses = {
+	sm: {
+		avatar: "h-20 w-20",
+		icon: "h-5 w-5",
+		dropZone: "p-3",
+		main: "space-y-2"
+	},
+	md: {
+		main: "space-y-2.5",
+		avatar: "h-28 w-28",
+		icon: "h-6 w-6 bottom-1 right-1",
+		dropZone: "p-4"
+	},
+	lg: {
+		avatar: "h-40 w-40",
+		icon: "h-7 w-7 bottom-1.5 right-1.5",
+		dropZone: "p-5",
+		main: "space-y-3"
+	}
+};
+const AvatarUpload = (props) => {
+	const { className, messages, value, onAccept, onChange, size = "md",...rest } = props;
+	const { upload = "Upload", change = "Change" } = messages || {};
+	const currentSize = sizeClasses[size];
+	const [files, setFiles] = React.useState([]);
+	const imageUrl = value?.url;
+	const handleAccept = React.useCallback((acceptedFiles) => {
+		setFiles(acceptedFiles.map((file) => {
+			return {
+				file,
+				id: `${file.name}-${file.lastModified.toString()}`
+			};
+		}));
+		onAccept?.(acceptedFiles);
+	}, [onAccept]);
+	const hasImageUrl = imageUrl != null;
+	return /* @__PURE__ */ jsx(FileUpload, {
+		...rest,
+		onAccept: handleAccept,
+		className: cn$1("w-fit", className),
+		accept: "image/*",
+		children: /* @__PURE__ */ jsx(FileUploadDropzone, {
+			className: currentSize.dropZone,
+			children: files.length > 0 ? /* @__PURE__ */ jsx(FileUploadList, { children: files.map(({ file, id }, i) => /* @__PURE__ */ jsx(AvatarUploadItem, {
+				file,
+				index: i,
+				currentSize,
+				change,
+				onChange
+			}, id)) }) : /* @__PURE__ */ jsxs(MainWrapper, {
+				currentSize,
+				children: [/* @__PURE__ */ jsx(AvatarWrap, {
+					className: currentSize.avatar,
+					iconClass: currentSize.icon,
+					showChangeIcon: hasImageUrl,
+					children: hasImageUrl ? /* @__PURE__ */ jsx(Image, { src: imageUrl }) : /* @__PURE__ */ jsx(UserCircle2, {
+						className: "text-muted-foreground w-full h-full",
+						strokeWidth: 1
+					})
+				}), /* @__PURE__ */ jsx(MessageComponent, { message: hasImageUrl != null ? change : upload })]
+			})
+		})
+	});
+};
+AvatarUpload.displayName = "AvatarUpload";
+
+//#endregion
+export { AvatarUpload };

package/dist/avatar-upload/AvatarUploadComponents.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_utils = require('../shadcn/src/lib/utils.cjs');
+require('../shadcn/src/lib/index.cjs');
+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/avatar-upload/AvatarUploadComponents.tsx
+const MessageComponent = ({ message, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: require_utils.cn("text-sm text-muted-foreground", className),
+		children: message
+	});
+};
+const AvatarWrap = ({ children, className, iconClass, showChangeIcon }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.cn("relative", className),
+		children: [children, showChangeIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: require_utils.cn(`absolute bottom-0 right-0 bg-secondary text-secondary-foreground rounded-full p-1.5 shadow-md`, iconClass) })]
+	});
+};
+const Image = ({ src, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		alt: "Avatar preview",
+		className: require_utils.cn("rounded-full object-cover w-full h-full", className)
+	});
+};
+const MainWrapper = ({ children, className, currentSize }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex flex-col items-center relative", className, currentSize.main),
+		children
+	});
+};
+
+//#endregion
+exports.AvatarWrap = AvatarWrap;
+exports.Image = Image;
+exports.MainWrapper = MainWrapper;
+exports.MessageComponent = MessageComponent;

package/dist/avatar-upload/AvatarUploadComponents.js

@@ -0,0 +1,35 @@
+import { cn } from "../shadcn/src/lib/utils.js";
+import "../shadcn/src/lib/index.js";
+import { Pencil } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/avatar-upload/AvatarUploadComponents.tsx
+const MessageComponent = ({ message, className }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-sm text-muted-foreground", className),
+		children: message
+	});
+};
+const AvatarWrap = ({ children, className, iconClass, showChangeIcon }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [children, showChangeIcon && /* @__PURE__ */ jsx(Pencil, { className: cn(`absolute bottom-0 right-0 bg-secondary text-secondary-foreground rounded-full p-1.5 shadow-md`, iconClass) })]
+	});
+};
+const Image = ({ src, className }) => {
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt: "Avatar preview",
+		className: cn("rounded-full object-cover w-full h-full", className)
+	});
+};
+const MainWrapper = ({ children, className, currentSize }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col items-center relative", className, currentSize.main),
+		children
+	});
+};
+
+//#endregion
+export { AvatarWrap, Image, MainWrapper, MessageComponent };

package/dist/avatar-upload/AvatarUploadItem.cjs

@@ -0,0 +1,58 @@
+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/index.cjs');
+const require_AvatarUploadComponents = require('./AvatarUploadComponents.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_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/avatar-upload/AvatarUploadItem.tsx
+const AvatarUploadItem = (props) => {
+	const { file, currentSize, change } = props;
+	require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, props);
+	const fileError = require_use_file_error.useFileError(file);
+	const isUploading = (0, __pixpilot_shadcn.useFileUpload)((store) => {
+		if (fileError != null) return false;
+		if (store.files.get(file)?.status === "uploading") return true;
+		return false;
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItem, {
+		value: file,
+		className: "p-0 border-0 m-0",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AvatarUploadComponents.MainWrapper, {
+			currentSize,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, __pixpilot_shadcn.cn)("relative"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.AvatarWrap, {
+					className: currentSize.avatar,
+					showChangeIcon: true,
+					iconClass: currentSize.icon,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.Image, { src: URL.createObjectURL(file) })
+				}), fileError != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "absolute -top-2 -right-2 p-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { className: "h-5 w-5 text-red-500" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, { children: fileError })] }) })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "w-full flex items-center justify-center relative",
+				children: [fileError == null && isUploading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemProgress, {
+					variant: "linear",
+					className: "absolute"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.MessageComponent, {
+					message: change,
+					className: (0, __pixpilot_shadcn.cn)({ "opacity-0": isUploading })
+				})]
+			})]
+		})
+	});
+};
+
+//#endregion
+exports.AvatarUploadItem = AvatarUploadItem;

package/dist/avatar-upload/AvatarUploadItem.js

@@ -0,0 +1,54 @@
+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/index.js";
+import { AvatarWrap, Image, MainWrapper, MessageComponent } from "./AvatarUploadComponents.js";
+import { FileUploadItem, FileUploadItemProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn, useFileUpload } from "@pixpilot/shadcn";
+import { AlertCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/avatar-upload/AvatarUploadItem.tsx
+const AvatarUploadItem = (props) => {
+	const { file, currentSize, change } = props;
+	useFileUploadProgressCallbacks(file, props);
+	const fileError = useFileError(file);
+	const isUploading = useFileUpload((store) => {
+		if (fileError != null) return false;
+		if (store.files.get(file)?.status === "uploading") return true;
+		return false;
+	});
+	return /* @__PURE__ */ jsx(FileUploadItem, {
+		value: file,
+		className: "p-0 border-0 m-0",
+		children: /* @__PURE__ */ jsxs(MainWrapper, {
+			currentSize,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("relative"),
+				children: [/* @__PURE__ */ jsx(AvatarWrap, {
+					className: currentSize.avatar,
+					showChangeIcon: true,
+					iconClass: currentSize.icon,
+					children: /* @__PURE__ */ jsx(Image, { src: URL.createObjectURL(file) })
+				}), fileError != null && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "absolute -top-2 -right-2 p-1",
+						children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-red-500" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: fileError })] }) })]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "w-full flex items-center justify-center relative",
+				children: [fileError == null && isUploading && /* @__PURE__ */ jsx(FileUploadItemProgress, {
+					variant: "linear",
+					className: "absolute"
+				}), /* @__PURE__ */ jsx(MessageComponent, {
+					message: change,
+					className: cn({ "opacity-0": isUploading })
+				})]
+			})]
+		})
+	});
+};
+
+//#endregion
+export { AvatarUploadItem };

package/dist/avatar-upload/index.cjs

@@ -0,0 +1 @@
+const require_AvatarUpload = require('./AvatarUpload.cjs');

package/dist/avatar-upload/index.d.cts

@@ -0,0 +1 @@
+import { AvatarUpload, AvatarUploadProps } from "./AvatarUpload.cjs";

package/dist/avatar-upload/index.d.ts

@@ -0,0 +1 @@
+import { AvatarUpload, AvatarUploadProps } from "./AvatarUpload.js";

package/dist/avatar-upload/index.js

@@ -0,0 +1 @@
+import { AvatarUpload } from "./AvatarUpload.js";

package/dist/avatar-upload/types.d.cts

@@ -0,0 +1,14 @@
+//#region src/avatar-upload/types.d.ts
+interface ComponentSize {
+  avatar: string;
+  icon: string;
+  dropZone: string;
+  main: string;
+}
+interface ComponentSizes {
+  sm: ComponentSize;
+  md: ComponentSize;
+  lg: ComponentSize;
+}
+//#endregion
+export { ComponentSizes };

package/dist/avatar-upload/types.d.ts

@@ -0,0 +1,14 @@
+//#region src/avatar-upload/types.d.ts
+interface ComponentSize {
+  avatar: string;
+  icon: string;
+  dropZone: string;
+  main: string;
+}
+interface ComponentSizes {
+  sm: ComponentSize;
+  md: ComponentSize;
+  lg: ComponentSize;
+}
+//#endregion
+export { ComponentSizes };

package/dist/index.cjs

@@ -3,6 +3,8 @@ const require_FileUpload = require('./file-upload/FileUpload.cjs');
 require('./file-upload/index.cjs');
 const require_AbsoluteFill = require('./AbsoluteFill.cjs');
 const require_Alert = require('./Alert.cjs');
+const require_AvatarUpload = require('./avatar-upload/AvatarUpload.cjs');
+require('./avatar-upload/index.cjs');
 const require_Button = require('./Button.cjs');
 const require_CloseButtonRounded = require('./CloseButtonRounded.cjs');
 const require_CloseButtonAbsolute = require('./CloseButtonAbsolute.cjs');
@@ -40,6 +42,7 @@ next_themes = require_rolldown_runtime.__toESM(next_themes);
 
 exports.AbsoluteFill = require_AbsoluteFill.AbsoluteFill;
 exports.Alert = require_Alert.Alert;
+exports.AvatarUpload = require_AvatarUpload.AvatarUpload;
 exports.Button = require_Button.Button;
 exports.CloseButtonAbsolute = require_CloseButtonAbsolute.CloseButtonAbsolute;
 exports.CloseButtonRounded = require_CloseButtonRounded.CloseButtonRounded;

package/dist/index.d.cts

@@ -3,6 +3,8 @@ import { FileUpload } from "./file-upload/FileUpload.cjs";
 import "./file-upload/index.cjs";
 import { AbsoluteFill } from "./AbsoluteFill.cjs";
 import { Alert, AlertBaseProps, AlertProps, AlertVariant } from "./Alert.cjs";
+import { AvatarUpload, AvatarUploadProps } from "./avatar-upload/AvatarUpload.cjs";
+import "./avatar-upload/index.cjs";
 import { Button, ButtonLoaderProps, ButtonProps } from "./Button.cjs";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.cjs";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.cjs";
@@ -12,7 +14,7 @@ import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.cj
 import { DialogProvider, DialogProviderProps } from "./confirmation-dialog/DialogProvider.cjs";
 import "./confirmation-dialog/index.cjs";
 import { ContentCard } from "./ContentCard.cjs";
-import { DatePicker } from "./DatePicker.cjs";
+import { DatePicker, DatePickerProps } from "./DatePicker.cjs";
 import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-inline/types.cjs";
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.cjs";
 import "./file-upload-inline/index.cjs";
@@ -36,4 +38,4 @@ import { ThemeToggle } from "./ThemeToggle.cjs";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
 import "./toast/index.cjs";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, Button, ButtonLoaderProps, ButtonProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Spinner, SpinnerProps, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, Button, ButtonLoaderProps, ButtonProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Spinner, SpinnerProps, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };

package/dist/index.d.ts

@@ -3,6 +3,8 @@ import { FileUpload } from "./file-upload/FileUpload.js";
 import "./file-upload/index.js";
 import { AbsoluteFill } from "./AbsoluteFill.js";
 import { Alert, AlertBaseProps, AlertProps, AlertVariant } from "./Alert.js";
+import { AvatarUpload, AvatarUploadProps } from "./avatar-upload/AvatarUpload.js";
+import "./avatar-upload/index.js";
 import { Button, ButtonLoaderProps, ButtonProps } from "./Button.js";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.js";
@@ -12,7 +14,7 @@ import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.js
 import { DialogProvider, DialogProviderProps } from "./confirmation-dialog/DialogProvider.js";
 import "./confirmation-dialog/index.js";
 import { ContentCard } from "./ContentCard.js";
-import { DatePicker } from "./DatePicker.js";
+import { DatePicker, DatePickerProps } from "./DatePicker.js";
 import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-inline/types.js";
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
 import "./file-upload-inline/index.js";
@@ -37,4 +39,4 @@ import { ThemeToggle } from "./ThemeToggle.js";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, Button, ButtonLoaderProps, ButtonProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Spinner, SpinnerProps, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, Button, ButtonLoaderProps, ButtonProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Spinner, SpinnerProps, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };

package/dist/index.js

@@ -2,6 +2,8 @@ import { FileUpload } from "./file-upload/FileUpload.js";
 import "./file-upload/index.js";
 import { AbsoluteFill } from "./AbsoluteFill.js";
 import { Alert } from "./Alert.js";
+import { AvatarUpload } from "./avatar-upload/AvatarUpload.js";
+import "./avatar-upload/index.js";
 import { Button } from "./Button.js";
 import { CloseButtonRounded } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute } from "./CloseButtonAbsolute.js";
@@ -34,4 +36,4 @@ import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toa
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, Button, CloseButtonAbsolute, CloseButtonRounded, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, LoadingOverlay, Pagination, RichTextEditor, Select, Slider, Spinner, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, CloseButtonAbsolute, CloseButtonRounded, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, LoadingOverlay, Pagination, RichTextEditor, Select, Slider, Spinner, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",