@pixpilot/shadcn-ui 0.5.1 → 0.7.0

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/{spinner/spinner.cjs → circle-loader/circle-loader.cjs}

@@ -5,8 +5,8 @@ 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/spinner/spinner.tsx
-const SpinnerSize = {
+//#region src/circle-loader/circle-loader.tsx
+const CircleLoaderSize = {
 	sm: 24,
 	md: 40,
 	lg: 64,
@@ -20,8 +20,8 @@ const DEFAULT_COLOR = "currentColor";
 const VIEWBOX_STROKE_REF = 40;
 const PERCENT_MULTIPLIER = 100;
 let spinnerIdCounter = 0;
-const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
-	const size = typeof sizeProp === "string" ? SpinnerSize[sizeProp] : sizeProp;
+const CircleLoader = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
+	const size = typeof sizeProp === "string" ? CircleLoaderSize[sizeProp] : sizeProp;
 	const strokeWidth = strokeWidthProp ?? Math.max(MIN_STROKE_WIDTH, Math.round(size * STROKE_WIDTH_RATIO));
 	const uniqueId = (0, react.useMemo)(() => `spinner-${++spinnerIdCounter}-${Date.now()}`, []);
 	const viewBoxStrokeWidth = strokeWidth / size * VIEWBOX_STROKE_REF;
@@ -68,7 +68,7 @@ const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp,
 		})
 	})] });
 };
-Spinner.displayName = "Spinner";
+CircleLoader.displayName = "CircleLoader";
 
 //#endregion
-exports.Spinner = Spinner;
+exports.CircleLoader = CircleLoader;

package/dist/{spinner/spinner.d.cts → circle-loader/circle-loader.d.cts}

@@ -1,19 +1,19 @@
 import React from "react";
 
-//#region src/spinner/spinner.d.ts
-declare const SpinnerSize: {
+//#region src/circle-loader/circle-loader.d.ts
+declare const CircleLoaderSize: {
   readonly sm: 24;
   readonly md: 40;
   readonly lg: 64;
   readonly xl: 96;
 };
-type SpinnerSizeKey = keyof typeof SpinnerSize;
-interface SpinnerProps {
+type CircleLoaderSizeKey = keyof typeof CircleLoaderSize;
+interface CircleLoaderProps {
   /**
    * Size of the spinner - can be a preset ('sm', 'md', 'lg', 'xl') or a number in pixels
    * @default 'md' (40px)
    */
-  size?: SpinnerSizeKey | number;
+  size?: CircleLoaderSizeKey | number;
   /**
    * Width of the spinner stroke in pixels
    * If not provided, automatically calculated as 10% of size (minimum 2px)
@@ -41,6 +41,6 @@ interface SpinnerProps {
    */
   className?: string;
 }
-declare const Spinner: React.FC<SpinnerProps>;
+declare const CircleLoader: React.FC<CircleLoaderProps>;
 //#endregion
-export { Spinner, SpinnerProps };
+export { CircleLoader, CircleLoaderProps };

package/dist/{spinner/spinner.d.ts → circle-loader/circle-loader.d.ts}

@@ -1,19 +1,19 @@
 import React from "react";
 
-//#region src/spinner/spinner.d.ts
-declare const SpinnerSize: {
+//#region src/circle-loader/circle-loader.d.ts
+declare const CircleLoaderSize: {
   readonly sm: 24;
   readonly md: 40;
   readonly lg: 64;
   readonly xl: 96;
 };
-type SpinnerSizeKey = keyof typeof SpinnerSize;
-interface SpinnerProps {
+type CircleLoaderSizeKey = keyof typeof CircleLoaderSize;
+interface CircleLoaderProps {
   /**
    * Size of the spinner - can be a preset ('sm', 'md', 'lg', 'xl') or a number in pixels
    * @default 'md' (40px)
    */
-  size?: SpinnerSizeKey | number;
+  size?: CircleLoaderSizeKey | number;
   /**
    * Width of the spinner stroke in pixels
    * If not provided, automatically calculated as 10% of size (minimum 2px)
@@ -41,6 +41,6 @@ interface SpinnerProps {
    */
   className?: string;
 }
-declare const Spinner: React.FC<SpinnerProps>;
+declare const CircleLoader: React.FC<CircleLoaderProps>;
 //#endregion
-export { Spinner, SpinnerProps };
+export { CircleLoader, CircleLoaderProps };

package/dist/{spinner/spinner.js → circle-loader/circle-loader.js}

@@ -2,8 +2,8 @@ import { getGlobalStyles } from "./styles.js";
 import React, { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/spinner/spinner.tsx
-const SpinnerSize = {
+//#region src/circle-loader/circle-loader.tsx
+const CircleLoaderSize = {
 	sm: 24,
 	md: 40,
 	lg: 64,
@@ -17,8 +17,8 @@ const DEFAULT_COLOR = "currentColor";
 const VIEWBOX_STROKE_REF = 40;
 const PERCENT_MULTIPLIER = 100;
 let spinnerIdCounter = 0;
-const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
-	const size = typeof sizeProp === "string" ? SpinnerSize[sizeProp] : sizeProp;
+const CircleLoader = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
+	const size = typeof sizeProp === "string" ? CircleLoaderSize[sizeProp] : sizeProp;
 	const strokeWidth = strokeWidthProp ?? Math.max(MIN_STROKE_WIDTH, Math.round(size * STROKE_WIDTH_RATIO));
 	const uniqueId = useMemo(() => `spinner-${++spinnerIdCounter}-${Date.now()}`, []);
 	const viewBoxStrokeWidth = strokeWidth / size * VIEWBOX_STROKE_REF;
@@ -65,7 +65,7 @@ const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp,
 		})
 	})] });
 };
-Spinner.displayName = "Spinner";
+CircleLoader.displayName = "CircleLoader";
 
 //#endregion
-export { Spinner };
+export { CircleLoader };

package/dist/circle-loader/index.cjs

@@ -0,0 +1 @@
+const require_circle_loader = require('./circle-loader.cjs');

package/dist/circle-loader/index.d.cts

@@ -0,0 +1 @@
+import { CircleLoader, CircleLoaderProps } from "./circle-loader.cjs";

package/dist/circle-loader/index.d.ts

@@ -0,0 +1 @@
+import { CircleLoader, CircleLoaderProps } from "./circle-loader.js";

package/dist/circle-loader/index.js

@@ -0,0 +1 @@
+import { CircleLoader } from "./circle-loader.js";

package/dist/{spinner → circle-loader}/styles.cjs

@@ -1,5 +1,5 @@
 
-//#region src/spinner/styles.ts
+//#region src/circle-loader/styles.ts
 function getGlobalStyles(options) {
 	const { uniqueId, speed = 2, size, colors, color } = options;
 	const getColorAnimationId = () => {

package/dist/{spinner → circle-loader}/styles.js

@@ -1,4 +1,4 @@
-//#region src/spinner/styles.ts
+//#region src/circle-loader/styles.ts
 function getGlobalStyles(options) {
 	const { uniqueId, speed = 2, size, colors, color } = options;
 	const getColorAnimationId = () => {

package/dist/file-upload/FileUpload.d.cts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload/FileUpload.d.ts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FileUpload };

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

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime6.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FileUploadInline };

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

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime6 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_runtime6.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/index.cjs

@@ -3,7 +3,11 @@ 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_circle_loader = require('./circle-loader/circle-loader.cjs');
+require('./circle-loader/index.cjs');
 const require_CloseButtonRounded = require('./CloseButtonRounded.cjs');
 const require_CloseButtonAbsolute = require('./CloseButtonAbsolute.cjs');
 const require_Combobox = require('./Combobox.cjs');
@@ -25,8 +29,6 @@ const require_RichTextEditor = require('./rich-text-editor/RichTextEditor.cjs');
 require('./rich-text-editor/index.cjs');
 const require_Select = require('./Select.cjs');
 const require_Slider = require('./Slider.cjs');
-const require_spinner = require('./spinner/spinner.cjs');
-require('./spinner/index.cjs');
 const require_tags_input = require('./tags-input.cjs');
 const require_ThemeProvider = require('./theme-provider/ThemeProvider.cjs');
 require('./theme-provider/index.cjs');
@@ -40,7 +42,9 @@ 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.CircleLoader = require_circle_loader.CircleLoader;
 exports.CloseButtonAbsolute = require_CloseButtonAbsolute.CloseButtonAbsolute;
 exports.CloseButtonRounded = require_CloseButtonRounded.CloseButtonRounded;
 exports.Combobox = require_Combobox.Combobox;
@@ -56,7 +60,6 @@ exports.Pagination = require_Pagination.Pagination;
 exports.RichTextEditor = require_RichTextEditor.RichTextEditor;
 exports.Select = require_Select.Select;
 exports.Slider = require_Slider.Slider;
-exports.Spinner = require_spinner.Spinner;
 exports.TagsInput = require_tags_input.TagsInput;
 exports.ThemeProvider = require_ThemeProvider.ThemeProvider;
 exports.ThemeToggle = require_ThemeToggle.ThemeToggle;

package/dist/index.d.cts

@@ -3,7 +3,11 @@ 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 { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.cjs";
+import "./circle-loader/index.cjs";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.cjs";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.cjs";
 import { Combobox } from "./Combobox.cjs";
@@ -27,8 +31,6 @@ import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./rich-text-
 import "./rich-text-editor/index.cjs";
 import { Select, SelectOption } from "./Select.cjs";
 import { Slider, SliderProps } from "./Slider.cjs";
-import { Spinner, SpinnerProps } from "./spinner/spinner.cjs";
-import "./spinner/index.cjs";
 import { TagsInput, TagsInputProps } from "./tags-input.cjs";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.cjs";
 import { useTheme } from "./theme-provider/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, 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 };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, 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, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };

package/dist/index.d.ts

@@ -3,7 +3,11 @@ 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 { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.js";
+import "./circle-loader/index.js";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.js";
 import { Combobox } from "./Combobox.js";
@@ -28,8 +32,6 @@ import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./rich-text-
 import "./rich-text-editor/index.js";
 import { Select, SelectOption } from "./Select.js";
 import { Slider, SliderProps } from "./Slider.js";
-import { Spinner, SpinnerProps } from "./spinner/spinner.js";
-import "./spinner/index.js";
 import { TagsInput, TagsInputProps } from "./tags-input.js";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.js";
 import { useTheme } from "./theme-provider/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, 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 };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, 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, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };

package/dist/index.js

@@ -2,7 +2,11 @@ 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 { CircleLoader } from "./circle-loader/circle-loader.js";
+import "./circle-loader/index.js";
 import { CloseButtonRounded } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute } from "./CloseButtonAbsolute.js";
 import { Combobox } from "./Combobox.js";
@@ -24,8 +28,6 @@ import { RichTextEditor } from "./rich-text-editor/RichTextEditor.js";
 import "./rich-text-editor/index.js";
 import { Select } from "./Select.js";
 import { Slider } from "./Slider.js";
-import { Spinner } from "./spinner/spinner.js";
-import "./spinner/index.js";
 import { TagsInput } from "./tags-input.js";
 import { ThemeProvider } from "./theme-provider/ThemeProvider.js";
 import { useTheme } from "./theme-provider/index.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, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, LoadingOverlay, Pagination, RichTextEditor, Select, Slider, 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.1",
+  "version": "0.7.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",

package/dist/spinner/index.cjs

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

package/dist/spinner/index.d.cts

@@ -1 +0,0 @@
-import { Spinner, SpinnerProps } from "./spinner.cjs";

package/dist/spinner/index.d.ts

@@ -1 +0,0 @@
-import { Spinner, SpinnerProps } from "./spinner.js";

package/dist/spinner/index.js

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