@pixpilot/shadcn-ui 0.12.0 → 0.14.0

package/dist/ColorPicker/ColorPicker.cjs

@@ -0,0 +1,69 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_PaletteSwatch = require('../ColorPickerBase/PaletteSwatch.cjs');
+const require_ColorPickerBase = require('../ColorPickerBase/ColorPickerBase.cjs');
+require('../ColorPickerBase/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_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/ColorPicker/ColorPicker.tsx
+function Swatch(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
+		color: props.color,
+		className: "rounded-sm"
+	});
+}
+const ColorPicker = (props) => {
+	const { variant = "input", placeholder = "Pick a color",...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerBase.ColorPickerBase, {
+		...rest,
+		children: ({ value, onValueChange, isPickerOpen }) => {
+			if (variant === "input") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
+				align: "inline-start",
+				className: "pl-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
+				value: value ?? "",
+				onPointerDown: (e) => {
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onClick: (e) => {
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onChange: (e) => onValueChange(e.target.value),
+				placeholder
+			})] });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {
+				className: (0, __pixpilot_shadcn.cn)("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
+						align: "inline-start",
+						className: "pl-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupText, {
+						className: "flex-1 text-left text-foreground pl-2",
+						children: value ?? placeholder
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
+						align: "inline-end",
+						className: "pr-1",
+						children: isPickerOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: "size-4 opacity-50" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-4 opacity-50" })
+					})
+				]
+			});
+		}
+	});
+};
+ColorPicker.displayName = "ColorPicker";
+
+//#endregion
+exports.ColorPicker = ColorPicker;

package/dist/ColorPicker/ColorPicker.d.cts

@@ -0,0 +1,10 @@
+import { ColorPickerBaseProps } from "../ColorPickerBase/types.cjs";
+
+//#region src/ColorPicker/ColorPicker.d.ts
+interface ColorPickerProps extends Omit<ColorPickerBaseProps, 'children'> {
+  variant?: 'button' | 'input';
+  placeholder?: string;
+}
+declare const ColorPicker: React.FC<ColorPickerProps>;
+//#endregion
+export { ColorPicker, ColorPickerProps };

package/dist/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import { ColorPickerBaseProps } from "../ColorPickerBase/types.js";
+import "../ColorPickerBase/index.js";
+
+//#region src/ColorPicker/ColorPicker.d.ts
+interface ColorPickerProps extends Omit<ColorPickerBaseProps, 'children'> {
+  variant?: 'button' | 'input';
+  placeholder?: string;
+}
+declare const ColorPicker: React.FC<ColorPickerProps>;
+//#endregion
+export { ColorPicker, ColorPickerProps };

package/dist/ColorPicker/ColorPicker.js

@@ -0,0 +1,65 @@
+'use client';
+
+
+import { PaletteSwatch } from "../ColorPickerBase/PaletteSwatch.js";
+import { ColorPickerBase } from "../ColorPickerBase/ColorPickerBase.js";
+import "../ColorPickerBase/index.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, cn } from "@pixpilot/shadcn";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorPicker/ColorPicker.tsx
+function Swatch(props) {
+	return /* @__PURE__ */ jsx(PaletteSwatch, {
+		color: props.color,
+		className: "rounded-sm"
+	});
+}
+const ColorPicker$1 = (props) => {
+	const { variant = "input", placeholder = "Pick a color",...rest } = props;
+	return /* @__PURE__ */ jsx(ColorPickerBase, {
+		...rest,
+		children: ({ value, onValueChange, isPickerOpen }) => {
+			if (variant === "input") return /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-start",
+				className: "pl-1",
+				children: /* @__PURE__ */ jsx(Swatch, { color: value })
+			}), /* @__PURE__ */ jsx(InputGroupInput, {
+				value: value ?? "",
+				onPointerDown: (e) => {
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onClick: (e) => {
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onChange: (e) => onValueChange(e.target.value),
+				placeholder
+			})] });
+			return /* @__PURE__ */ jsxs(InputGroup, {
+				className: cn("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"),
+				children: [
+					/* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-start",
+						className: "pl-1",
+						children: /* @__PURE__ */ jsx(Swatch, { color: value })
+					}),
+					/* @__PURE__ */ jsx(InputGroupText, {
+						className: "flex-1 text-left text-foreground pl-2",
+						children: value ?? placeholder
+					}),
+					/* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-end",
+						className: "pr-1",
+						children: isPickerOpen ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4 opacity-50" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+					})
+				]
+			});
+		}
+	});
+};
+ColorPicker$1.displayName = "ColorPicker";
+
+//#endregion
+export { ColorPicker$1 as ColorPicker };

package/dist/ColorPicker/index.cjs

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

package/dist/ColorPicker/index.d.ts

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

package/dist/ColorPicker/index.js

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

package/dist/ColorPickerBase/ColorPickerBase.cjs

@@ -0,0 +1,115 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_use_controlled = require('../hooks/src/use-controlled.cjs');
+require('../hooks/src/index.cjs');
+const require_ColorPickerCompact = require('./ColorPickerCompact.cjs');
+const require_ColorPickerFull = require('./ColorPickerFull.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+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/ColorPickerBase/ColorPickerBase.tsx
+const commonColors = [
+	"transparent",
+	"#000000",
+	"#FFFFFF",
+	"#808080",
+	"#FF0000",
+	"#FFA500",
+	"#FFFF00",
+	"#84CC16",
+	"#22C55E",
+	"#14B8A6",
+	"#00FFFF",
+	"#3B82F6",
+	"#6366F1",
+	"#A855F7",
+	"#EC4899",
+	"#A52A2A"
+];
+const DEFAULT_COLOR = "#000000";
+const ColorPickerBase = (props) => {
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, children,...rest } = props;
+	const [currentValue, setCurrentValue] = require_use_controlled.default({
+		controlled: propValue,
+		default: DEFAULT_COLOR,
+		name: "ColorPickerBase",
+		state: "value"
+	});
+	const [open, setOpen] = (0, react.useState)(false);
+	/**
+	* Prevent "Maximum update depth exceeded" in controlled mode.
+	*
+	* The underlying @pixpilot/shadcn ColorPicker calls onValueChange inside a layout-effect
+	* when syncing a controlled 'value' prop (it calls both store.setColor() and store.setHsv(),
+	* each of which emits onValueChange). This can create a feedback loop if the parent
+	* re-renders and passes back the same normalized value, causing infinite re-renders
+	* during fast pointer moves.
+	*
+	* We guard against this by:
+	* - Ignoring onValueChange events that occur immediately after a prop change.
+	* - Deduping repeated notifications of the same value.
+	*/
+	const isApplyingControlledValueRef = (0, react.useRef)(false);
+	const lastPropValueRef = (0, react.useRef)(propValue);
+	const lastNotifiedValueRef = (0, react.useRef)(void 0);
+	if (propValue !== lastPropValueRef.current) {
+		lastPropValueRef.current = propValue;
+		isApplyingControlledValueRef.current = true;
+	}
+	(0, react.useEffect)(() => {
+		isApplyingControlledValueRef.current = false;
+	}, [propValue]);
+	const handleValueChange = (0, react.useCallback)((value) => {
+		if (isApplyingControlledValueRef.current) return;
+		if (lastNotifiedValueRef.current === value) {
+			setCurrentValue(value);
+			return;
+		}
+		setCurrentValue(value);
+		onChange?.(value);
+		onValueChange?.(value);
+		lastNotifiedValueRef.current = value;
+	}, [
+		setCurrentValue,
+		onChange,
+		onValueChange
+	]);
+	let colors = presetColors || commonColors;
+	const handleOpen = (0, react.useCallback)((isOpen) => {
+		setOpen(isOpen);
+	}, []);
+	if (layout === "compact" && !presetColors) colors = colors.slice(0, -1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.ColorPicker, {
+		...rest,
+		value: currentValue,
+		onValueChange: handleValueChange,
+		onOpenChange: handleOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
+			asChild: true,
+			className: "w-full flex items-center gap-1 border border-input bg-background px-3 py-2 rounded-md ",
+			children: children({
+				value: currentValue,
+				onValueChange: handleValueChange,
+				isPickerOpen: open
+			})
+		}), layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompact.ColorPickerCompact, {
+			onValueChange: handleValueChange,
+			layout,
+			presetColors: colors
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFull.ColorPickerFull, {
+			onValueChange: handleValueChange,
+			layout,
+			presetColors: colors
+		})]
+	});
+};
+ColorPickerBase.displayName = "ColorPickerBase";
+
+//#endregion
+exports.ColorPickerBase = ColorPickerBase;

package/dist/ColorPickerBase/ColorPickerBase.d.cts

@@ -0,0 +1,6 @@
+import { ColorPickerBaseProps } from "./types.cjs";
+
+//#region src/ColorPickerBase/ColorPickerBase.d.ts
+declare const ColorPickerBase: React.FC<ColorPickerBaseProps>;
+//#endregion
+export { ColorPickerBase };

package/dist/ColorPickerBase/ColorPickerBase.d.ts

@@ -0,0 +1,6 @@
+import { ColorPickerBaseProps } from "./types.js";
+
+//#region src/ColorPickerBase/ColorPickerBase.d.ts
+declare const ColorPickerBase: React.FC<ColorPickerBaseProps>;
+//#endregion
+export { ColorPickerBase };

package/dist/ColorPickerBase/ColorPickerBase.js

@@ -0,0 +1,111 @@
+'use client';
+
+
+import useControlled from "../hooks/src/use-controlled.js";
+import "../hooks/src/index.js";
+import { ColorPickerCompact } from "./ColorPickerCompact.js";
+import { ColorPickerFull } from "./ColorPickerFull.js";
+import { ColorPicker, ColorPickerTrigger } from "@pixpilot/shadcn";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/ColorPickerBase.tsx
+const commonColors = [
+	"transparent",
+	"#000000",
+	"#FFFFFF",
+	"#808080",
+	"#FF0000",
+	"#FFA500",
+	"#FFFF00",
+	"#84CC16",
+	"#22C55E",
+	"#14B8A6",
+	"#00FFFF",
+	"#3B82F6",
+	"#6366F1",
+	"#A855F7",
+	"#EC4899",
+	"#A52A2A"
+];
+const DEFAULT_COLOR = "#000000";
+const ColorPickerBase = (props) => {
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, children,...rest } = props;
+	const [currentValue, setCurrentValue] = useControlled({
+		controlled: propValue,
+		default: DEFAULT_COLOR,
+		name: "ColorPickerBase",
+		state: "value"
+	});
+	const [open, setOpen] = useState(false);
+	/**
+	* Prevent "Maximum update depth exceeded" in controlled mode.
+	*
+	* The underlying @pixpilot/shadcn ColorPicker calls onValueChange inside a layout-effect
+	* when syncing a controlled 'value' prop (it calls both store.setColor() and store.setHsv(),
+	* each of which emits onValueChange). This can create a feedback loop if the parent
+	* re-renders and passes back the same normalized value, causing infinite re-renders
+	* during fast pointer moves.
+	*
+	* We guard against this by:
+	* - Ignoring onValueChange events that occur immediately after a prop change.
+	* - Deduping repeated notifications of the same value.
+	*/
+	const isApplyingControlledValueRef = useRef(false);
+	const lastPropValueRef = useRef(propValue);
+	const lastNotifiedValueRef = useRef(void 0);
+	if (propValue !== lastPropValueRef.current) {
+		lastPropValueRef.current = propValue;
+		isApplyingControlledValueRef.current = true;
+	}
+	useEffect(() => {
+		isApplyingControlledValueRef.current = false;
+	}, [propValue]);
+	const handleValueChange = useCallback((value) => {
+		if (isApplyingControlledValueRef.current) return;
+		if (lastNotifiedValueRef.current === value) {
+			setCurrentValue(value);
+			return;
+		}
+		setCurrentValue(value);
+		onChange?.(value);
+		onValueChange?.(value);
+		lastNotifiedValueRef.current = value;
+	}, [
+		setCurrentValue,
+		onChange,
+		onValueChange
+	]);
+	let colors = presetColors || commonColors;
+	const handleOpen = useCallback((isOpen) => {
+		setOpen(isOpen);
+	}, []);
+	if (layout === "compact" && !presetColors) colors = colors.slice(0, -1);
+	return /* @__PURE__ */ jsxs(ColorPicker, {
+		...rest,
+		value: currentValue,
+		onValueChange: handleValueChange,
+		onOpenChange: handleOpen,
+		children: [/* @__PURE__ */ jsx(ColorPickerTrigger, {
+			asChild: true,
+			className: "w-full flex items-center gap-1 border border-input bg-background px-3 py-2 rounded-md ",
+			children: children({
+				value: currentValue,
+				onValueChange: handleValueChange,
+				isPickerOpen: open
+			})
+		}), layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompact, {
+			onValueChange: handleValueChange,
+			layout,
+			presetColors: colors
+		}) : /* @__PURE__ */ jsx(ColorPickerFull, {
+			onValueChange: handleValueChange,
+			layout,
+			presetColors: colors
+		})]
+	});
+};
+ColorPickerBase.displayName = "ColorPickerBase";
+
+//#endregion
+export { ColorPickerBase };

package/dist/ColorPickerBase/ColorPickerCompact.cjs

@@ -0,0 +1,51 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_ColorPickerContent = require('./ColorPickerContent.cjs');
+const require_ColorPickerInput = require('./ColorPickerInput.cjs');
+const require_PaletteButton = require('./PaletteButton.cjs');
+const require_PaletteSwatch = require('./PaletteSwatch.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/ColorPickerBase/ColorPickerCompact.tsx
+const ColorPickerCompact = react.default.memo((props) => {
+	const { onValueChange, layout = "full", presetColors } = props;
+	const [showFullPicker, setShowFullPicker] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
+		className: "w-[280px] xs:w-[300px]",
+		children: [
+			showFullPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex-1 space-y-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
+				})]
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-2  flex flex-wrap",
+				children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
+					color,
+					onSelect: onValueChange
+				}, color)), layout === "compact" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
+					onClick: () => setShowFullPicker(!showFullPicker),
+					"aria-label": "Toggle full color picker",
+					className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 w-full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
+			})
+		]
+	});
+});
+ColorPickerCompact.displayName = "ColorPickerCompact";
+
+//#endregion
+exports.ColorPickerCompact = ColorPickerCompact;

package/dist/ColorPickerBase/ColorPickerCompact.js

@@ -0,0 +1,46 @@
+import { ColorPickerContent as ColorPickerContent$1 } from "./ColorPickerContent.js";
+import { ColorPickerInput as ColorPickerInput$1 } from "./ColorPickerInput.js";
+import { PaletteButton } from "./PaletteButton.js";
+import { PaletteSwatch } from "./PaletteSwatch.js";
+import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider } from "@pixpilot/shadcn";
+import { Droplet } from "lucide-react";
+import React, { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/ColorPickerCompact.tsx
+const ColorPickerCompact = React.memo((props) => {
+	const { onValueChange, layout = "full", presetColors } = props;
+	const [showFullPicker, setShowFullPicker] = useState(false);
+	return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
+		className: "w-[280px] xs:w-[300px]",
+		children: [
+			showFullPicker && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
+					className: "flex-1 space-y-2",
+					children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gap-2  flex flex-wrap",
+				children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
+					color,
+					onSelect: onValueChange
+				}, color)), layout === "compact" && /* @__PURE__ */ jsx(PaletteButton, {
+					onClick: () => setShowFullPicker(!showFullPicker),
+					"aria-label": "Toggle full color picker",
+					className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
+					children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 w-full",
+				children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
+			})
+		]
+	});
+});
+ColorPickerCompact.displayName = "ColorPickerCompact";
+
+//#endregion
+export { ColorPickerCompact };

package/dist/ColorPickerBase/ColorPickerContent.cjs

@@ -0,0 +1,19 @@
+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 = 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/ColorPickerBase/ColorPickerContent.tsx
+const ColorPickerContent = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerContent, {
+		...props,
+		className: (0, __pixpilot_shadcn.cn)("w-[280px] xs:w-[300px]", props.className)
+	});
+};
+ColorPickerContent.displayName = "ColorPickerContent";
+
+//#endregion
+exports.ColorPickerContent = ColorPickerContent;

package/dist/ColorPickerBase/ColorPickerContent.js

@@ -0,0 +1,15 @@
+import { ColorPickerContent, cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/ColorPickerContent.tsx
+const ColorPickerContent$1 = (props) => {
+	return /* @__PURE__ */ jsx(ColorPickerContent, {
+		...props,
+		className: cn("w-[280px] xs:w-[300px]", props.className)
+	});
+};
+ColorPickerContent$1.displayName = "ColorPickerContent";
+
+//#endregion
+export { ColorPickerContent$1 as ColorPickerContent };

package/dist/ColorPickerBase/ColorPickerFull.cjs

@@ -0,0 +1,39 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_ColorPickerContent = require('./ColorPickerContent.cjs');
+const require_ColorPickerInput = require('./ColorPickerInput.cjs');
+const require_PaletteSwatch = require('./PaletteSwatch.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+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/ColorPickerBase/ColorPickerFull.tsx
+const ColorPickerFull = react.default.memo((props) => {
+	const { onValueChange, presetColors } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
+			})]
+		})] }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "gap-2  flex flex-wrap",
+			children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
+				color,
+				onSelect: onValueChange
+			}, color))
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 w-full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
+		})
+	] });
+});
+ColorPickerFull.displayName = "ColorPickerContentFull";
+
+//#endregion
+exports.ColorPickerFull = ColorPickerFull;

package/dist/ColorPickerBase/ColorPickerFull.js

@@ -0,0 +1,35 @@
+import { ColorPickerContent as ColorPickerContent$1 } from "./ColorPickerContent.js";
+import { ColorPickerInput as ColorPickerInput$1 } from "./ColorPickerInput.js";
+import { PaletteSwatch } from "./PaletteSwatch.js";
+import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider } from "@pixpilot/shadcn";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/ColorPickerFull.tsx
+const ColorPickerFull = React.memo((props) => {
+	const { onValueChange, presetColors } = props;
+	return /* @__PURE__ */ jsxs(ColorPickerContent$1, { children: [
+		/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
+			})]
+		})] }),
+		/* @__PURE__ */ jsx("div", {
+			className: "gap-2  flex flex-wrap",
+			children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
+				color,
+				onSelect: onValueChange
+			}, color))
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 w-full",
+			children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
+		})
+	] });
+});
+ColorPickerFull.displayName = "ColorPickerContentFull";
+
+//#endregion
+export { ColorPickerFull };

package/dist/ColorPickerBase/ColorPickerInput.cjs

@@ -0,0 +1,20 @@
+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 = 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/ColorPickerBase/ColorPickerInput.tsx
+const ColorPickerInput = (props) => {
+	if ((0, __pixpilot_shadcn.useColorPicker)((s) => s.format) === "hex") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerInput, { ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerInput, {
+		...props,
+		className: "[&_input]:px-0 [&_input]:w-full [&_input]:min-w-0 flex-1 [&_input]:text-center"
+	});
+};
+ColorPickerInput.displayName = "ColorPickerInput";
+
+//#endregion
+exports.ColorPickerInput = ColorPickerInput;

package/dist/ColorPickerBase/ColorPickerInput.js

@@ -0,0 +1,16 @@
+import { ColorPickerInput, useColorPicker } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/ColorPickerInput.tsx
+const ColorPickerInput$1 = (props) => {
+	if (useColorPicker((s) => s.format) === "hex") return /* @__PURE__ */ jsx(ColorPickerInput, { ...props });
+	return /* @__PURE__ */ jsx(ColorPickerInput, {
+		...props,
+		className: "[&_input]:px-0 [&_input]:w-full [&_input]:min-w-0 flex-1 [&_input]:text-center"
+	});
+};
+ColorPickerInput$1.displayName = "ColorPickerInput";
+
+//#endregion
+export { ColorPickerInput$1 as ColorPickerInput };

package/dist/ColorPickerBase/PaletteButton.cjs

@@ -0,0 +1,20 @@
+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 = 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/ColorPickerBase/PaletteButton.tsx
+const PaletteButton = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		...props,
+		className: (0, __pixpilot_shadcn.cn)("w-6.5 h-6.5 rounded border border-input focus:outline-none focus:ring-2 focus:ring-ring", props.className)
+	});
+};
+PaletteButton.displayName = "PaletteButton";
+
+//#endregion
+exports.PaletteButton = PaletteButton;

package/dist/ColorPickerBase/PaletteButton.js

@@ -0,0 +1,16 @@
+import { cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/PaletteButton.tsx
+const PaletteButton = (props) => {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		className: cn("w-6.5 h-6.5 rounded border border-input focus:outline-none focus:ring-2 focus:ring-ring", props.className)
+	});
+};
+PaletteButton.displayName = "PaletteButton";
+
+//#endregion
+export { PaletteButton };

package/dist/ColorPickerBase/PaletteSwatch.cjs

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_PaletteButton = require('./PaletteButton.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);
+
+//#region src/ColorPickerBase/PaletteSwatch.tsx
+const PaletteSwatch = ({ color, onSelect, className }) => {
+	const handleClick = (0, react.useCallback)(() => {
+		if (onSelect) onSelect(color ?? "transparent");
+	}, [color, onSelect]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
+		style: color == null || color === "transparent" ? {
+			backgroundColor: "transparent",
+			backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+			backgroundSize: "4px 4px",
+			backgroundPosition: "0 0, 0 2px, 2px -2px, -2px 0px"
+		} : { backgroundColor: color },
+		className,
+		onClick: handleClick
+	});
+};
+
+//#endregion
+exports.PaletteSwatch = PaletteSwatch;

package/dist/ColorPickerBase/PaletteSwatch.js

@@ -0,0 +1,23 @@
+import { PaletteButton } from "./PaletteButton.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/PaletteSwatch.tsx
+const PaletteSwatch = ({ color, onSelect, className }) => {
+	const handleClick = useCallback(() => {
+		if (onSelect) onSelect(color ?? "transparent");
+	}, [color, onSelect]);
+	return /* @__PURE__ */ jsx(PaletteButton, {
+		style: color == null || color === "transparent" ? {
+			backgroundColor: "transparent",
+			backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+			backgroundSize: "4px 4px",
+			backgroundPosition: "0 0, 0 2px, 2px -2px, -2px 0px"
+		} : { backgroundColor: color },
+		className,
+		onClick: handleClick
+	});
+};
+
+//#endregion
+export { PaletteSwatch };

package/dist/ColorPickerBase/index.cjs

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

package/dist/ColorPickerBase/index.d.ts

@@ -0,0 +1,2 @@
+import { ColorPickerBaseProps } from "./types.js";
+import { ColorPickerBase } from "./ColorPickerBase.js";

package/dist/ColorPickerBase/index.js

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

package/dist/ColorPickerBase/types.d.cts

@@ -0,0 +1,16 @@
+import { ColorPickerProps } from "@pixpilot/shadcn";
+
+//#region src/ColorPickerBase/types.d.ts
+interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
+  value?: string;
+  onChange?: (value: string) => void;
+  presetColors?: string[];
+  layout?: 'full' | 'compact';
+  children: (props: {
+    value?: string;
+    onValueChange: (value: string) => void;
+    isPickerOpen: boolean;
+  }) => React.ReactNode;
+}
+//#endregion
+export { ColorPickerBaseProps };

package/dist/ColorPickerBase/types.d.ts

@@ -0,0 +1,16 @@
+import { ColorPickerProps } from "@pixpilot/shadcn";
+
+//#region src/ColorPickerBase/types.d.ts
+interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
+  value?: string;
+  onChange?: (value: string) => void;
+  presetColors?: string[];
+  layout?: 'full' | 'compact';
+  children: (props: {
+    value?: string;
+    onValueChange: (value: string) => void;
+    isPickerOpen: boolean;
+  }) => React.ReactNode;
+}
+//#endregion
+export { ColorPickerBaseProps };

package/dist/Select.d.ts

@@ -1,6 +1,6 @@
 import { Select } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/Select.d.ts
 interface SelectOption {
@@ -13,6 +13,6 @@ type BaseSelectProps = {
   onChange?: (value: string) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime3.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { Select$1 as Select, SelectOption };

package/dist/hooks/src/index.cjs

@@ -0,0 +1 @@
+const require_use_controlled = require('./use-controlled.cjs');

package/dist/hooks/src/index.js

@@ -0,0 +1 @@
+import useControlled from "./use-controlled.js";

package/dist/hooks/src/use-controlled.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region ../hooks/src/use-controlled.ts
+function useControlled(props) {
+	const { controlled, default: defaultProp, name, state = "value" } = props;
+	const { current: isControlled } = react.default.useRef(controlled !== void 0);
+	const [valueState, setValue] = react.default.useState(defaultProp);
+	const value = isControlled ? controlled : valueState;
+	if (process.env.NODE_ENV !== "production") {
+		react.default.useEffect(() => {
+			if (isControlled !== (controlled !== void 0)) console.error([
+				`A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`,
+				"Elements should not switch from uncontrolled to controlled (or vice versa).",
+				`Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,
+				"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.",
+				"More info: https://fb.me/react-controlled-components"
+			].join("\n"));
+		}, [
+			state,
+			name,
+			controlled,
+			isControlled
+		]);
+		const { current: defaultValue } = react.default.useRef(defaultProp);
+		react.default.useEffect(() => {
+			if (!isControlled && defaultValue !== defaultProp) console.error([`A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`].join("\n"));
+		}, [JSON.stringify(defaultProp)]);
+	}
+	return [
+		value,
+		react.default.useCallback((newValue) => {
+			if (!isControlled) setValue(newValue);
+			else if (typeof newValue === "function") newValue(controlled);
+		}, [controlled, isControlled]),
+		isControlled
+	];
+}
+
+//#endregion
+exports.default = useControlled;

package/dist/hooks/src/use-controlled.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+//#region ../hooks/src/use-controlled.ts
+function useControlled(props) {
+	const { controlled, default: defaultProp, name, state = "value" } = props;
+	const { current: isControlled } = React.useRef(controlled !== void 0);
+	const [valueState, setValue] = React.useState(defaultProp);
+	const value = isControlled ? controlled : valueState;
+	{
+		React.useEffect(() => {
+			if (isControlled !== (controlled !== void 0)) console.error([
+				`A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`,
+				"Elements should not switch from uncontrolled to controlled (or vice versa).",
+				`Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,
+				"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.",
+				"More info: https://fb.me/react-controlled-components"
+			].join("\n"));
+		}, [
+			state,
+			name,
+			controlled,
+			isControlled
+		]);
+		const { current: defaultValue } = React.useRef(defaultProp);
+		React.useEffect(() => {
+			if (!isControlled && defaultValue !== defaultProp) console.error([`A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`].join("\n"));
+		}, [JSON.stringify(defaultProp)]);
+	}
+	return [
+		value,
+		React.useCallback((newValue) => {
+			if (!isControlled) setValue(newValue);
+			else if (typeof newValue === "function") newValue(controlled);
+		}, [controlled, isControlled]),
+		isControlled
+	];
+}
+
+//#endregion
+export { useControlled as default };

package/dist/index.cjs

@@ -10,6 +10,10 @@ 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_ColorPickerBase = require('./ColorPickerBase/ColorPickerBase.cjs');
+require('./ColorPickerBase/index.cjs');
+const require_ColorPicker = require('./ColorPicker/ColorPicker.cjs');
+require('./ColorPicker/index.cjs');
 const require_Combobox = require('./Combobox.cjs');
 const require_confirmation_dialogs = require('./confirmation-dialog/confirmation-dialogs.cjs');
 const require_DialogProvider = require('./confirmation-dialog/DialogProvider.cjs');
@@ -57,6 +61,8 @@ exports.Button = require_Button.Button;
 exports.CircleLoader = require_circle_loader.CircleLoader;
 exports.CloseButtonAbsolute = require_CloseButtonAbsolute.CloseButtonAbsolute;
 exports.CloseButtonRounded = require_CloseButtonRounded.CloseButtonRounded;
+exports.ColorPicker = require_ColorPicker.ColorPicker;
+exports.ColorPickerBase = require_ColorPickerBase.ColorPickerBase;
 exports.Combobox = require_Combobox.Combobox;
 exports.ContentCard = require_ContentCard.ContentCard;
 exports.DEFAULT_ALERT_DURATION = require_toast.DEFAULT_ALERT_DURATION;

package/dist/index.d.cts

@@ -10,6 +10,9 @@ import { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.c
 import "./circle-loader/index.cjs";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.cjs";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.cjs";
+import { ColorPickerBaseProps } from "./ColorPickerBase/types.cjs";
+import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.cjs";
+import { ColorPicker, ColorPickerProps } from "./ColorPicker/ColorPicker.cjs";
 import { Combobox } from "./Combobox.cjs";
 import { ConfirmationDialogProps } from "./confirmation-dialog/ConfirmationDialog.cjs";
 import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.cjs";
@@ -51,4 +54,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, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, 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, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, 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, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -10,6 +10,11 @@ import { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.j
 import "./circle-loader/index.js";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.js";
+import { ColorPickerBaseProps } from "./ColorPickerBase/types.js";
+import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.js";
+import "./ColorPickerBase/index.js";
+import { ColorPicker, ColorPickerProps } from "./ColorPicker/ColorPicker.js";
+import "./ColorPicker/index.js";
 import { Combobox } from "./Combobox.js";
 import { ConfirmationDialogProps } from "./confirmation-dialog/ConfirmationDialog.js";
 import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.js";
@@ -52,4 +57,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, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, 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, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, 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, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };

package/dist/index.js

@@ -9,6 +9,10 @@ import { CircleLoader } from "./circle-loader/circle-loader.js";
 import "./circle-loader/index.js";
 import { CloseButtonRounded } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute } from "./CloseButtonAbsolute.js";
+import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.js";
+import "./ColorPickerBase/index.js";
+import { ColorPicker } from "./ColorPicker/ColorPicker.js";
+import "./ColorPicker/index.js";
 import { Combobox } from "./Combobox.js";
 import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.js";
 import { DialogProvider } from "./confirmation-dialog/DialogProvider.js";
@@ -48,4 +52,4 @@ import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toa
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };

package/dist/tags-input.d.ts

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "./CommandOptionList.js";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/tags-input.d.ts
 interface TagsInputProps {
@@ -55,6 +55,6 @@ declare function TagsInput({
   addOnPaste,
   addOnTab,
   onValidate
-}: TagsInputProps): react_jsx_runtime4.JSX.Element;
+}: TagsInputProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -44,6 +44,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
+    "@internal/hooks": "0.0.0",
     "@pixpilot/shadcn": "0.5.0"
   },
   "devDependencies": {