@pixpilot/shadcn-ui 1.1.0 → 1.1.1

package/dist/ColorPickerBase/ColorPickerBase.cjs

@@ -2,7 +2,7 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_ColorPickerColorPalette = require('./color-palette/ColorPickerColorPalette.cjs');
+const require_ColorPalette = require('./color-palette/ColorPalette.cjs');
 require('./color-palette/index.cjs');
 const require_constants = require('./constants.cjs');
 const require_ColorPickerCompactControls = require('./ColorPickerCompactControls.cjs');
@@ -33,7 +33,7 @@ const ColorPickerBase = (props) => {
 	});
 	const [open, setOpen] = (0, react.useState)(false);
 	const resolvedSections = sections ?? require_constants.DEFAULT_SECTIONS;
-	let colors = presetColors || require_ColorPickerColorPalette.COMMON_COLORS;
+	let colors = presetColors || require_ColorPalette.COMMON_COLORS;
 	const handleOpen = (0, react.useCallback)((isOpen) => {
 		setOpen(isOpen);
 	}, []);

package/dist/ColorPickerBase/ColorPickerBase.js

@@ -1,7 +1,7 @@
 'use client';
 
 
-import { COMMON_COLORS } from "./color-palette/ColorPickerColorPalette.js";
+import { COMMON_COLORS } from "./color-palette/ColorPalette.js";
 import "./color-palette/index.js";
 import { DEFAULT_COLOR, DEFAULT_SECTIONS } from "./constants.js";
 import { ColorPickerCompactControls } from "./ColorPickerCompactControls.js";

package/dist/ColorPickerBase/ColorPickerButton.cjs

@@ -13,15 +13,15 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/ColorPickerBase/ColorPickerButton.tsx
 const ColorPickerButton = (props) => {
 	const { slots, formatDisplayValue, placeholder = "Pick a color",...rest } = props;
-	const { isPickerOpen, color, onColorChange } = require_color_picker_context.useColorPickerContext();
+	const { isPickerOpen, value, onValueChange } = require_color_picker_context.useColorPickerContext();
 	if (process.env.NODE_ENV !== "production") {
-		if (onColorChange === void 0) throw new Error("ColorPickerButton must be used within a ColorPickerRoot component");
+		if (onValueChange === void 0) throw new Error("ColorPickerButton must be used within a ColorPickerRoot component");
 	}
 	const renderDisplayValue = () => {
-		if (color == null || color === "") return placeholder;
-		return formatDisplayValue != null ? formatDisplayValue(color) : color;
+		if (value == null || value === "") return placeholder;
+		return formatDisplayValue != null ? formatDisplayValue(value) : value;
 	};
-	const currentcolor = color != null && color !== "" ? color : void 0;
+	const currentcolor = value != null && value !== "" ? value : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {

package/dist/ColorPickerBase/ColorPickerButton.js

@@ -8,13 +8,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPickerBase/ColorPickerButton.tsx
 const ColorPickerButton = (props) => {
 	const { slots, formatDisplayValue, placeholder = "Pick a color",...rest } = props;
-	const { isPickerOpen, color, onColorChange } = useColorPickerContext();
-	if (onColorChange === void 0) throw new Error("ColorPickerButton must be used within a ColorPickerRoot component");
+	const { isPickerOpen, value, onValueChange } = useColorPickerContext();
+	if (onValueChange === void 0) throw new Error("ColorPickerButton must be used within a ColorPickerRoot component");
 	const renderDisplayValue = () => {
-		if (color == null || color === "") return placeholder;
-		return formatDisplayValue != null ? formatDisplayValue(color) : color;
+		if (value == null || value === "") return placeholder;
+		return formatDisplayValue != null ? formatDisplayValue(value) : value;
 	};
-	const currentcolor = color != null && color !== "" ? color : void 0;
+	const currentcolor = value != null && value !== "" ? value : void 0;
 	return /* @__PURE__ */ jsx(ColorPickerTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(InputGroup, {

package/dist/ColorPickerBase/ColorPickerCompactControls.cjs

@@ -1,7 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_ColorPickerColorPalette = require('./color-palette/ColorPickerColorPalette.cjs');
+const require_ColorPalette = require('./color-palette/ColorPalette.cjs');
 require('./color-palette/index.cjs');
-const require_color_picker_context = require('./color-picker-context.cjs');
 const require_ColorPickerContent = require('./ColorPickerContent.cjs');
 const require_ColorPickerControls = require('./ColorPickerControls.cjs');
 const require_ColorPickerFormatControls = require('./ColorPickerFormatControls.cjs');
@@ -14,7 +13,6 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/ColorPickerBase/ColorPickerCompactControls.tsx
 const ColorPickerCompactControls = react.default.memo((props) => {
 	const { presetColors, sections = require_constants.DEFAULT_SECTIONS,...rest } = props;
-	const { onColorChange, color: currentColor } = require_color_picker_context.useColorPickerContext();
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -29,10 +27,8 @@ const ColorPickerCompactControls = react.default.memo((props) => {
 			shouldShowPickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerControls.ColorPickerControls, {}),
 			showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "gap-2  flex flex-wrap",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerColorPalette.ColorPickerColorPalette, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPalette.ColorPickerColorPalette, {
 					presetColors,
-					onChange: onColorChange,
-					selectedColor: currentColor,
 					onMoreColor: canTogglePickerUi ? () => setShowFullPicker(!showFullPicker) : void 0
 				})
 			}),

package/dist/ColorPickerBase/ColorPickerCompactControls.js

@@ -1,6 +1,5 @@
-import { ColorPickerColorPalette } from "./color-palette/ColorPickerColorPalette.js";
+import { ColorPickerColorPalette } from "./color-palette/ColorPalette.js";
 import "./color-palette/index.js";
-import { useColorPickerContext } from "./color-picker-context.js";
 import { ColorPickerContent } from "./ColorPickerContent.js";
 import { ColorPickerControls } from "./ColorPickerControls.js";
 import { ColorPickerFormatControls } from "./ColorPickerFormatControls.js";
@@ -11,7 +10,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPickerBase/ColorPickerCompactControls.tsx
 const ColorPickerCompactControls = React.memo((props) => {
 	const { presetColors, sections = DEFAULT_SECTIONS,...rest } = props;
-	const { onColorChange, color: currentColor } = useColorPickerContext();
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -28,8 +26,6 @@ const ColorPickerCompactControls = React.memo((props) => {
 				className: "gap-2  flex flex-wrap",
 				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, {
 					presetColors,
-					onChange: onColorChange,
-					selectedColor: currentColor,
 					onMoreColor: canTogglePickerUi ? () => setShowFullPicker(!showFullPicker) : void 0
 				})
 			}),

package/dist/ColorPickerBase/ColorPickerControls.d.ts

@@ -1,15 +1,15 @@
-import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper, ColorPickerHueSlider } from "@pixpilot/shadcn";
+import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper as ColorPickerEyeDropper$1, ColorPickerHueSlider } from "@pixpilot/shadcn";
 import React from "react";
 
 //#region src/ColorPickerBase/ColorPickerControls.d.ts
 interface ColorPickerControlsProps extends React.ComponentProps<'div'> {
   slots?: {
     area: React.ComponentProps<typeof ColorPickerArea>;
-    eyeDropper: React.ComponentProps<typeof ColorPickerEyeDropper>;
+    eyeDropper: React.ComponentProps<typeof ColorPickerEyeDropper$1>;
     hueSlider: React.ComponentProps<typeof ColorPickerHueSlider>;
     alphaSlider: React.ComponentProps<typeof ColorPickerAlphaSlider>;
   };
 }
 declare const ColorPickerControls: React.FC<ColorPickerControlsProps>;
 //#endregion
-export { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerHueSlider };
+export { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper$1 as ColorPickerEyeDropper, ColorPickerHueSlider };

package/dist/ColorPickerBase/ColorPickerControls.js

@@ -1,4 +1,4 @@
-import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper, ColorPickerHueSlider, cn } from "@pixpilot/shadcn";
+import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper as ColorPickerEyeDropper$1, ColorPickerHueSlider, cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -12,7 +12,7 @@ const ColorPickerControls = (props) => {
 		children: [/* @__PURE__ */ jsx(ColorPickerArea, { ...slots?.area }), /* @__PURE__ */ jsxs("div", {
 			"data-slot": "color-picker-controls-row",
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, {
+			children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper$1, {
 				...slots?.eyeDropper,
 				className: cn("hidden xs:flex ", slots?.eyeDropper.className)
 			}), /* @__PURE__ */ jsxs("div", {
@@ -26,4 +26,4 @@ const ColorPickerControls = (props) => {
 ColorPickerControls.displayName = "ColorPickerControls";
 
 //#endregion
-export { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerEyeDropper, ColorPickerHueSlider };
+export { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerEyeDropper$1 as ColorPickerEyeDropper, ColorPickerHueSlider };

package/dist/ColorPickerBase/ColorPickerFullControls.cjs

@@ -1,7 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_ColorPickerColorPalette = require('./color-palette/ColorPickerColorPalette.cjs');
+const require_ColorPalette = require('./color-palette/ColorPalette.cjs');
 require('./color-palette/index.cjs');
-const require_color_picker_context = require('./color-picker-context.cjs');
 const require_ColorPickerContent = require('./ColorPickerContent.cjs');
 const require_ColorPickerControls = require('./ColorPickerControls.cjs');
 const require_ColorPickerFormatControls = require('./ColorPickerFormatControls.cjs');
@@ -13,7 +12,6 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/ColorPickerBase/ColorPickerFullControls.tsx
 const ColorPickerFullControls = react.default.memo((props) => {
 	const { presetColors, sections,...rest } = props;
-	const { onColorChange, color: currentColor } = require_color_picker_context.useColorPickerContext();
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -25,11 +23,7 @@ const ColorPickerFullControls = react.default.memo((props) => {
 			showPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerControls.ColorPickerControls, {}),
 			showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "gap-2  flex flex-wrap",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerColorPalette.ColorPickerColorPalette, {
-					presetColors,
-					onChange: onColorChange,
-					selectedColor: currentColor
-				})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPalette.ColorPickerColorPalette, { presetColors })
 			}),
 			(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatControls.ColorPickerFormatControls, {
 				showFormatSelect,

package/dist/ColorPickerBase/ColorPickerFullControls.js

@@ -1,6 +1,5 @@
-import { ColorPickerColorPalette } from "./color-palette/ColorPickerColorPalette.js";
+import { ColorPickerColorPalette } from "./color-palette/ColorPalette.js";
 import "./color-palette/index.js";
-import { useColorPickerContext } from "./color-picker-context.js";
 import { ColorPickerContent } from "./ColorPickerContent.js";
 import { ColorPickerControls } from "./ColorPickerControls.js";
 import { ColorPickerFormatControls } from "./ColorPickerFormatControls.js";
@@ -10,7 +9,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPickerBase/ColorPickerFullControls.tsx
 const ColorPickerFullControls = React.memo((props) => {
 	const { presetColors, sections,...rest } = props;
-	const { onColorChange, color: currentColor } = useColorPickerContext();
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -22,11 +20,7 @@ const ColorPickerFullControls = React.memo((props) => {
 			showPicker && /* @__PURE__ */ jsx(ColorPickerControls, {}),
 			showSwatch && /* @__PURE__ */ jsx("div", {
 				className: "gap-2  flex flex-wrap",
-				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, {
-					presetColors,
-					onChange: onColorChange,
-					selectedColor: currentColor
-				})
+				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, { presetColors })
 			}),
 			(showFormatSelect || showInput) && /* @__PURE__ */ jsx(ColorPickerFormatControls, {
 				showFormatSelect,

package/dist/ColorPickerBase/ColorPickerInput.cjs

@@ -11,9 +11,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/ColorPickerBase/ColorPickerInput.tsx
 const ColorPickerInput = (props) => {
 	const { slots, onChange,...rest } = props;
-	const { isPickerOpen, color, onColorChange } = require_color_picker_context.useColorPickerContext();
+	const { isPickerOpen, value, onValueChange } = require_color_picker_context.useColorPickerContext();
 	if (process.env.NODE_ENV !== "production") {
-		if (onColorChange === void 0) throw new Error("ColorPickerInput must be used within a ColorPickerRoot component");
+		if (onValueChange === void 0) throw new Error("ColorPickerInput must be used within a ColorPickerRoot component");
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
 		asChild: true,
@@ -22,11 +22,11 @@ const ColorPickerInput = (props) => {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
 				align: "inline-start",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerSwatch.ColorPickerSwatch, {
-					color: color != null && color !== "" ? color : void 0,
+					color: value != null && value !== "" ? value : void 0,
 					...slots?.swatch
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
-				value: color ?? "",
+				value: value ?? "",
 				...rest,
 				onPointerDown: (e) => {
 					rest.onPointerDown?.(e);
@@ -39,7 +39,7 @@ const ColorPickerInput = (props) => {
 					e.stopPropagation();
 				},
 				onChange: (e) => {
-					onColorChange(e.target.value);
+					onValueChange(e.target.value);
 					onChange?.(e);
 				}
 			})]

package/dist/ColorPickerBase/ColorPickerInput.js

@@ -7,8 +7,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPickerBase/ColorPickerInput.tsx
 const ColorPickerInput$1 = (props) => {
 	const { slots, onChange,...rest } = props;
-	const { isPickerOpen, color, onColorChange } = useColorPickerContext();
-	if (onColorChange === void 0) throw new Error("ColorPickerInput must be used within a ColorPickerRoot component");
+	const { isPickerOpen, value, onValueChange } = useColorPickerContext();
+	if (onValueChange === void 0) throw new Error("ColorPickerInput must be used within a ColorPickerRoot component");
 	return /* @__PURE__ */ jsx(ColorPickerTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(InputGroup, {
@@ -16,11 +16,11 @@ const ColorPickerInput$1 = (props) => {
 			children: [/* @__PURE__ */ jsx(InputGroupAddon, {
 				align: "inline-start",
 				children: /* @__PURE__ */ jsx(ColorPickerSwatch$1, {
-					color: color != null && color !== "" ? color : void 0,
+					color: value != null && value !== "" ? value : void 0,
 					...slots?.swatch
 				})
 			}), /* @__PURE__ */ jsx(InputGroupInput, {
-				value: color ?? "",
+				value: value ?? "",
 				...rest,
 				onPointerDown: (e) => {
 					rest.onPointerDown?.(e);
@@ -33,7 +33,7 @@ const ColorPickerInput$1 = (props) => {
 					e.stopPropagation();
 				},
 				onChange: (e) => {
-					onColorChange(e.target.value);
+					onValueChange(e.target.value);
 					onChange?.(e);
 				}
 			})]

package/dist/ColorPickerBase/ColorPickerRoot.cjs

@@ -33,8 +33,8 @@ const ColorPickerRoot = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_picker_context.Provider, {
 		value: {
 			isPickerOpen: open,
-			color: currentValue,
-			onColorChange: handleValueChange,
+			value: currentValue,
+			onValueChange: handleValueChange,
 			openPicker: setOpen
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPicker, {

package/dist/ColorPickerBase/ColorPickerRoot.js

@@ -29,8 +29,8 @@ const ColorPickerRoot = (props) => {
 	return /* @__PURE__ */ jsx(Provider, {
 		value: {
 			isPickerOpen: open,
-			color: currentValue,
-			onColorChange: handleValueChange,
+			value: currentValue,
+			onValueChange: handleValueChange,
 			openPicker: setOpen
 		},
 		children: /* @__PURE__ */ jsx(ColorPicker, {

package/dist/ColorPickerBase/color-palette/{ColorPickerColorPalette.cjs → ColorPalette.cjs}

@@ -1,5 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_PaletteButton = require('../PaletteButton.cjs');
+const require_color_picker_context = require('../color-picker-context.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);
@@ -10,7 +11,7 @@ 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/color-palette/ColorPickerColorPalette.tsx
+//#region src/ColorPickerBase/color-palette/ColorPalette.tsx
 const COMMON_COLORS = [
 	{
 		label: "Transparent",
@@ -78,20 +79,25 @@ const COMMON_COLORS = [
 	}
 ];
 const ColorPickerColorPalette = (props) => {
-	const { presetColors = COMMON_COLORS, onChange, selectedColor, onMoreColor,...rest } = props;
+	const { presetColors = COMMON_COLORS, enableEyeDropper, onMoreColor,...rest } = props;
+	const { value: selectedColor, onValueChange } = require_color_picker_context.useColorPickerContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...rest,
 		className: (0, __pixpilot_shadcn.cn)("gap-2 flex flex-wrap", rest.className),
-		children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
-			color,
-			onSelect: onChange,
-			selectedValue: selectedColor
-		}, color.value)), onMoreColor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
-			onClick: onMoreColor,
-			"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" })
-		})]
+		children: [
+			enableEyeDropper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: require_PaletteButton.COLOR_PICKER_PALETTE_BUTTON_CLASSES }),
+			presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.ColorPickerPaletteSwatch, {
+				color,
+				onSelect: onValueChange,
+				selectedValue: selectedColor
+			}, color.value)),
+			onMoreColor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.ColorPickerPaletteButton, {
+				onClick: onMoreColor,
+				"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" })
+			})
+		]
 	});
 };
 ColorPickerColorPalette.displayName = "ColorPickerColorPalette";

package/dist/ColorPickerBase/color-palette/{ColorPickerColorPalette.d.cts → ColorPalette.d.cts}

@@ -1,13 +1,12 @@
 import { PresetColor } from "../types.cjs";
 import React from "react";
 
-//#region src/ColorPickerBase/color-palette/ColorPickerColorPalette.d.ts
+//#region src/ColorPickerBase/color-palette/ColorPalette.d.ts
 declare const COMMON_COLORS: PresetColor[];
 interface ColorPickerColorPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   presetColors?: PresetColor[];
-  onChange?: (color: string) => void;
-  selectedColor?: string;
   onMoreColor?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  enableEyeDropper?: boolean;
 }
 declare const ColorPickerColorPalette: React.FC<ColorPickerColorPaletteProps>;
 //#endregion

package/dist/ColorPickerBase/color-palette/{ColorPickerColorPalette.d.ts → ColorPalette.d.ts}

@@ -1,13 +1,12 @@
 import { PresetColor } from "../types.js";
 import React from "react";
 
-//#region src/ColorPickerBase/color-palette/ColorPickerColorPalette.d.ts
+//#region src/ColorPickerBase/color-palette/ColorPalette.d.ts
 declare const COMMON_COLORS: PresetColor[];
 interface ColorPickerColorPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   presetColors?: PresetColor[];
-  onChange?: (color: string) => void;
-  selectedColor?: string;
   onMoreColor?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  enableEyeDropper?: boolean;
 }
 declare const ColorPickerColorPalette: React.FC<ColorPickerColorPaletteProps>;
 //#endregion

package/dist/ColorPickerBase/color-palette/ColorPalette.js

@@ -0,0 +1,101 @@
+import { useColorPickerContext } from "../color-picker-context.js";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton } from "./PaletteButton.js";
+import { ColorPickerPaletteSwatch } from "./PaletteSwatch.js";
+import { ColorPickerEyeDropper, cn } from "@pixpilot/shadcn";
+import { Droplet } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/color-palette/ColorPalette.tsx
+const COMMON_COLORS = [
+	{
+		label: "Transparent",
+		value: "#00000000"
+	},
+	{
+		label: "Black",
+		value: "#000000"
+	},
+	{
+		label: "White",
+		value: "#FFFFFF"
+	},
+	{
+		label: "Gray",
+		value: "#808080"
+	},
+	{
+		label: "Red",
+		value: "#FF0000"
+	},
+	{
+		label: "Orange",
+		value: "#FFA500"
+	},
+	{
+		label: "Yellow",
+		value: "#FFFF00"
+	},
+	{
+		label: "Lime",
+		value: "#84CC16"
+	},
+	{
+		label: "Green",
+		value: "#22C55E"
+	},
+	{
+		label: "Teal",
+		value: "#14B8A6"
+	},
+	{
+		label: "Cyan",
+		value: "#00FFFF"
+	},
+	{
+		label: "Blue",
+		value: "#3B82F6"
+	},
+	{
+		label: "Indigo",
+		value: "#6366F1"
+	},
+	{
+		label: "Purple",
+		value: "#A855F7"
+	},
+	{
+		label: "Pink",
+		value: "#EC4899"
+	},
+	{
+		label: "Brown",
+		value: "#A52A2A"
+	}
+];
+const ColorPickerColorPalette = (props) => {
+	const { presetColors = COMMON_COLORS, enableEyeDropper, onMoreColor,...rest } = props;
+	const { value: selectedColor, onValueChange } = useColorPickerContext();
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: cn("gap-2 flex flex-wrap", rest.className),
+		children: [
+			enableEyeDropper && /* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: COLOR_PICKER_PALETTE_BUTTON_CLASSES }),
+			presetColors.map((color) => /* @__PURE__ */ jsx(ColorPickerPaletteSwatch, {
+				color,
+				onSelect: onValueChange,
+				selectedValue: selectedColor
+			}, color.value)),
+			onMoreColor && /* @__PURE__ */ jsx(ColorPickerPaletteButton, {
+				onClick: onMoreColor,
+				"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" })
+			})
+		]
+	});
+};
+ColorPickerColorPalette.displayName = "ColorPickerColorPalette";
+
+//#endregion
+export { COMMON_COLORS, ColorPickerColorPalette };

package/dist/ColorPickerBase/color-palette/PaletteButton.cjs

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

package/dist/ColorPickerBase/color-palette/PaletteButton.d.cts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/ColorPickerBase/color-palette/PaletteButton.d.ts
+interface ColorPickerPaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  style?: React.CSSProperties;
+}
+declare const COLOR_PICKER_PALETTE_BUTTON_CLASSES = "w-6.5 h-6.5 rounded border border-input focus:outline-none focus:ring-2 focus:ring-ring";
+declare const ColorPickerPaletteButton: React.FC<ColorPickerPaletteButtonProps>;
+//#endregion
+export { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps };

package/dist/ColorPickerBase/color-palette/PaletteButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/ColorPickerBase/color-palette/PaletteButton.d.ts
+interface ColorPickerPaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  style?: React.CSSProperties;
+}
+declare const COLOR_PICKER_PALETTE_BUTTON_CLASSES = "w-6.5 h-6.5 rounded border border-input focus:outline-none focus:ring-2 focus:ring-ring";
+declare const ColorPickerPaletteButton: React.FC<ColorPickerPaletteButtonProps>;
+//#endregion
+export { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps };

package/dist/ColorPickerBase/color-palette/PaletteButton.js

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

package/dist/ColorPickerBase/color-palette/PaletteSwatch.cjs

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_PaletteButton = require('../PaletteButton.cjs');
+const require_PaletteButton = require('./PaletteButton.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -8,7 +8,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.tsx
-const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
+const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
 	const normalizeColor = (0, react.useCallback)((value) => {
@@ -26,7 +26,7 @@ const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 	const handleClick = (0, react.useCallback)(() => {
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
-	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
+	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.ColorPickerPaletteButton, {
 		style: {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"
@@ -44,6 +44,7 @@ const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: colorLabel })
 	})] });
 };
+ColorPickerPaletteSwatch.displayName = "ColorPickerPaletteSwatch";
 
 //#endregion
-exports.PaletteSwatch = PaletteSwatch;
+exports.ColorPickerPaletteSwatch = ColorPickerPaletteSwatch;

package/dist/ColorPickerBase/color-palette/PaletteSwatch.d.cts

@@ -0,0 +1,11 @@
+import { PresetColor } from "../types.cjs";
+
+//#region src/ColorPickerBase/color-palette/PaletteSwatch.d.ts
+declare const ColorPickerPaletteSwatch: React.FC<{
+  color?: PresetColor;
+  onSelect?: (color: string) => void;
+  className?: string;
+  selectedValue?: string;
+}>;
+//#endregion
+export { ColorPickerPaletteSwatch };

package/dist/ColorPickerBase/color-palette/PaletteSwatch.d.ts

@@ -0,0 +1,11 @@
+import { PresetColor } from "../types.js";
+
+//#region src/ColorPickerBase/color-palette/PaletteSwatch.d.ts
+declare const ColorPickerPaletteSwatch: React.FC<{
+  color?: PresetColor;
+  onSelect?: (color: string) => void;
+  className?: string;
+  selectedValue?: string;
+}>;
+//#endregion
+export { ColorPickerPaletteSwatch };

package/dist/ColorPickerBase/color-palette/PaletteSwatch.js

@@ -1,10 +1,10 @@
-import { PaletteButton } from "../PaletteButton.js";
+import { ColorPickerPaletteButton } from "./PaletteButton.js";
 import { Tooltip, TooltipContent, TooltipTrigger, cn, colorUtils } from "@pixpilot/shadcn";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.tsx
-const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
+const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
 	const normalizeColor = useCallback((value) => {
@@ -22,7 +22,7 @@ const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 	const handleClick = useCallback(() => {
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
-	const button = /* @__PURE__ */ jsx(PaletteButton, {
+	const button = /* @__PURE__ */ jsx(ColorPickerPaletteButton, {
 		style: {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"
@@ -40,6 +40,7 @@ const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 		children: /* @__PURE__ */ jsx("p", { children: colorLabel })
 	})] });
 };
+ColorPickerPaletteSwatch.displayName = "ColorPickerPaletteSwatch";
 
 //#endregion
-export { PaletteSwatch };
+export { ColorPickerPaletteSwatch };

package/dist/ColorPickerBase/color-palette/index.cjs

@@ -1 +1,3 @@
-const require_ColorPickerColorPalette = require('./ColorPickerColorPalette.cjs');
+const require_PaletteButton = require('./PaletteButton.cjs');
+const require_PaletteSwatch = require('./PaletteSwatch.cjs');
+const require_ColorPalette = require('./ColorPalette.cjs');

package/dist/ColorPickerBase/color-palette/index.d.cts

@@ -1 +1,3 @@
-import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPickerColorPalette.cjs";
+import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPalette.cjs";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps } from "./PaletteButton.cjs";
+import { ColorPickerPaletteSwatch } from "./PaletteSwatch.cjs";

package/dist/ColorPickerBase/color-palette/index.d.ts

@@ -1 +1,3 @@
-import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPickerColorPalette.js";
+import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPalette.js";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps } from "./PaletteButton.js";
+import { ColorPickerPaletteSwatch } from "./PaletteSwatch.js";

package/dist/ColorPickerBase/color-palette/index.js

@@ -1 +1,3 @@
-import { COMMON_COLORS, ColorPickerColorPalette } from "./ColorPickerColorPalette.js";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton } from "./PaletteButton.js";
+import { ColorPickerPaletteSwatch } from "./PaletteSwatch.js";
+import { COMMON_COLORS, ColorPickerColorPalette } from "./ColorPalette.js";

package/dist/ColorPickerBase/color-picker-context.cjs

@@ -8,6 +8,7 @@ const { Provider, Consumer } = ColorPickerContext;
 function useColorPickerContext() {
 	return react.default.use(ColorPickerContext);
 }
+ColorPickerContext.displayName = "ColorPickerContext";
 
 //#endregion
 exports.ColorPickerContext = ColorPickerContext;

package/dist/ColorPickerBase/color-picker-context.d.cts

@@ -3,8 +3,8 @@ import React from "react";
 //#region src/ColorPickerBase/color-picker-context.d.ts
 interface ColorPickerContextStates {
   isPickerOpen: boolean;
-  color: string;
-  onColorChange: (value: string) => void;
+  value: string;
+  onValueChange: (value: string) => void;
   openPicker: (open: boolean) => void;
 }
 declare const ColorPickerContext: React.Context<ColorPickerContextStates>;

package/dist/ColorPickerBase/color-picker-context.d.ts

@@ -3,8 +3,8 @@ import React from "react";
 //#region src/ColorPickerBase/color-picker-context.d.ts
 interface ColorPickerContextStates {
   isPickerOpen: boolean;
-  color: string;
-  onColorChange: (value: string) => void;
+  value: string;
+  onValueChange: (value: string) => void;
   openPicker: (open: boolean) => void;
 }
 declare const ColorPickerContext: React.Context<ColorPickerContextStates>;

package/dist/ColorPickerBase/color-picker-context.js

@@ -6,6 +6,7 @@ const { Provider, Consumer } = ColorPickerContext;
 function useColorPickerContext() {
 	return React.use(ColorPickerContext);
 }
+ColorPickerContext.displayName = "ColorPickerContext";
 
 //#endregion
 export { ColorPickerContext, Consumer, Provider, useColorPickerContext };

package/dist/ColorPickerBase/index.cjs

@@ -1,7 +1,9 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_ColorPickerColorPalette = require('./color-palette/ColorPickerColorPalette.cjs');
-require('./color-palette/index.cjs');
 const require_color_picker_context = require('./color-picker-context.cjs');
+const require_PaletteButton = require('./color-palette/PaletteButton.cjs');
+const require_PaletteSwatch = require('./color-palette/PaletteSwatch.cjs');
+const require_ColorPalette = require('./color-palette/ColorPalette.cjs');
+require('./color-palette/index.cjs');
 const require_ColorPickerContent = require('./ColorPickerContent.cjs');
 const require_ColorPickerControls = require('./ColorPickerControls.cjs');
 const require_ColorPickerFormatInput = require('./ColorPickerFormatInput.cjs');

package/dist/ColorPickerBase/index.d.cts

@@ -1,5 +1,7 @@
 import { ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerRootProps, PresetColor } from "./types.cjs";
-import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./color-palette/ColorPickerColorPalette.cjs";
+import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./color-palette/ColorPalette.cjs";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps } from "./color-palette/PaletteButton.cjs";
+import { ColorPickerPaletteSwatch } from "./color-palette/PaletteSwatch.cjs";
 import "./color-palette/index.cjs";
 import { ColorPickerContext, ColorPickerContextStates, Consumer, Provider, useColorPickerContext } from "./color-picker-context.cjs";
 import { ColorPickerBase } from "./ColorPickerBase.cjs";

package/dist/ColorPickerBase/index.d.ts

@@ -1,5 +1,7 @@
 import { ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerRootProps, PresetColor } from "./types.js";
-import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./color-palette/ColorPickerColorPalette.js";
+import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./color-palette/ColorPalette.js";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps } from "./color-palette/PaletteButton.js";
+import { ColorPickerPaletteSwatch } from "./color-palette/PaletteSwatch.js";
 import "./color-palette/index.js";
 import { ColorPickerContext, ColorPickerContextStates, Consumer, Provider, useColorPickerContext } from "./color-picker-context.js";
 import { ColorPickerBase } from "./ColorPickerBase.js";

package/dist/ColorPickerBase/index.js

@@ -1,6 +1,8 @@
-import { COMMON_COLORS, ColorPickerColorPalette } from "./color-palette/ColorPickerColorPalette.js";
-import "./color-palette/index.js";
 import { ColorPickerContext, Consumer, Provider, useColorPickerContext } from "./color-picker-context.js";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton } from "./color-palette/PaletteButton.js";
+import { ColorPickerPaletteSwatch } from "./color-palette/PaletteSwatch.js";
+import { COMMON_COLORS, ColorPickerColorPalette } from "./color-palette/ColorPalette.js";
+import "./color-palette/index.js";
 import { ColorPickerContent } from "./ColorPickerContent.js";
 import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerEyeDropper, ColorPickerHueSlider } from "./ColorPickerControls.js";
 import { ColorPickerFormatInput } from "./ColorPickerFormatInput.js";

package/dist/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
 
 //#region src/dialog/Dialog.d.ts
@@ -9,14 +9,14 @@ declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<_radix_ui_re
 declare function DialogHeader({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
 declare function DialogBody({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
 declare function DialogFooter({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
 //#endregion
 export { DialogBody, DialogContent, DialogFooter, DialogHeader };

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

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

package/dist/file-upload-root/FileUploadRoot.d.ts

@@ -1,11 +1,11 @@
 import { FileUploadRootProps } from "./types.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/file-upload-root/FileUploadRoot.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime12.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime13.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/index.cjs

@@ -12,8 +12,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_ColorPickerColorPalette = require('./ColorPickerBase/color-palette/ColorPickerColorPalette.cjs');
 const require_color_picker_context = require('./ColorPickerBase/color-picker-context.cjs');
+const require_PaletteButton = require('./ColorPickerBase/color-palette/PaletteButton.cjs');
+const require_PaletteSwatch = require('./ColorPickerBase/color-palette/PaletteSwatch.cjs');
+const require_ColorPalette = require('./ColorPickerBase/color-palette/ColorPalette.cjs');
 const require_ColorPickerContent = require('./ColorPickerBase/ColorPickerContent.cjs');
 const require_ColorPickerControls = require('./ColorPickerBase/ColorPickerControls.cjs');
 const require_ColorPickerFormatInput = require('./ColorPickerBase/ColorPickerFormatInput.cjs');
@@ -101,7 +103,8 @@ exports.ButtonExtended = require_ButtonExtended.ButtonExtended;
 exports.ButtonGroup = require_ButtonGroup.ButtonGroup;
 exports.ButtonGroupSeparator = require_ButtonGroup.ButtonGroupSeparator;
 exports.ButtonGroupText = require_ButtonGroup.ButtonGroupText;
-exports.COMMON_COLORS = require_ColorPickerColorPalette.COMMON_COLORS;
+exports.COLOR_PICKER_PALETTE_BUTTON_CLASSES = require_PaletteButton.COLOR_PICKER_PALETTE_BUTTON_CLASSES;
+exports.COMMON_COLORS = require_ColorPalette.COMMON_COLORS;
 exports.CircleLoader = require_circle_loader.CircleLoader;
 exports.CloseButtonAbsolute = require_CloseButtonAbsolute.CloseButtonAbsolute;
 exports.CloseButtonRounded = require_CloseButtonRounded.CloseButtonRounded;
@@ -110,7 +113,7 @@ exports.ColorPickerAlphaSlider = __pixpilot_shadcn.ColorPickerAlphaSlider;
 exports.ColorPickerArea = __pixpilot_shadcn.ColorPickerArea;
 exports.ColorPickerBase = require_ColorPickerBase.ColorPickerBase;
 exports.ColorPickerButton = require_ColorPickerButton.ColorPickerButton;
-exports.ColorPickerColorPalette = require_ColorPickerColorPalette.ColorPickerColorPalette;
+exports.ColorPickerColorPalette = require_ColorPalette.ColorPickerColorPalette;
 exports.ColorPickerCompactControls = require_ColorPickerCompactControls.ColorPickerCompactControls;
 exports.ColorPickerContent = require_ColorPickerContent.ColorPickerContent;
 exports.ColorPickerContext = require_color_picker_context.ColorPickerContext;
@@ -124,6 +127,8 @@ exports.ColorPickerFormatSelect = __pixpilot_shadcn.ColorPickerFormatSelect;
 exports.ColorPickerFullControls = require_ColorPickerFullControls.ColorPickerFullControls;
 exports.ColorPickerHueSlider = __pixpilot_shadcn.ColorPickerHueSlider;
 exports.ColorPickerInput = require_ColorPickerInput.ColorPickerInput;
+exports.ColorPickerPaletteButton = require_PaletteButton.ColorPickerPaletteButton;
+exports.ColorPickerPaletteSwatch = require_PaletteSwatch.ColorPickerPaletteSwatch;
 exports.ColorPickerRoot = require_ColorPickerRoot.ColorPickerRoot;
 exports.ColorSelect = require_ColorSelect.ColorSelect;
 exports.Combobox = require_Combobox.Combobox;

package/dist/index.d.cts

@@ -13,7 +13,9 @@ import "./circle-loader/index.cjs";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.cjs";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.cjs";
 import { ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerRootProps, PresetColor } from "./ColorPickerBase/types.cjs";
-import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPickerBase/color-palette/ColorPickerColorPalette.cjs";
+import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPickerBase/color-palette/ColorPalette.cjs";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps } from "./ColorPickerBase/color-palette/PaletteButton.cjs";
+import { ColorPickerPaletteSwatch } from "./ColorPickerBase/color-palette/PaletteSwatch.cjs";
 import { ColorPickerContext, ColorPickerContextStates, Consumer, Provider, useColorPickerContext } from "./ColorPickerBase/color-picker-context.cjs";
 import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.cjs";
 import { ColorPickerButton, ColorPickerButtonProps } from "./ColorPickerBase/ColorPickerButton.cjs";
@@ -98,4 +100,4 @@ import "./toast/index.cjs";
 import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue } from "./ToggleGroup.cjs";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.cjs";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -13,7 +13,9 @@ import "./circle-loader/index.js";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.js";
 import { ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerRootProps, PresetColor } from "./ColorPickerBase/types.js";
-import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPickerBase/color-palette/ColorPickerColorPalette.js";
+import { COMMON_COLORS, ColorPickerColorPalette, ColorPickerColorPaletteProps } from "./ColorPickerBase/color-palette/ColorPalette.js";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton, ColorPickerPaletteButtonProps } from "./ColorPickerBase/color-palette/PaletteButton.js";
+import { ColorPickerPaletteSwatch } from "./ColorPickerBase/color-palette/PaletteSwatch.js";
 import { ColorPickerContext, ColorPickerContextStates, Consumer, Provider, useColorPickerContext } from "./ColorPickerBase/color-picker-context.js";
 import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.js";
 import { ColorPickerButton, ColorPickerButtonProps } from "./ColorPickerBase/ColorPickerButton.js";
@@ -98,4 +100,4 @@ import "./toast/index.js";
 import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue } from "./ToggleGroup.js";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.js

@@ -11,8 +11,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 { COMMON_COLORS, ColorPickerColorPalette } from "./ColorPickerBase/color-palette/ColorPickerColorPalette.js";
 import { ColorPickerContext, Consumer, Provider, useColorPickerContext } from "./ColorPickerBase/color-picker-context.js";
+import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton } from "./ColorPickerBase/color-palette/PaletteButton.js";
+import { ColorPickerPaletteSwatch } from "./ColorPickerBase/color-palette/PaletteSwatch.js";
+import { COMMON_COLORS, ColorPickerColorPalette } from "./ColorPickerBase/color-palette/ColorPalette.js";
 import { ColorPickerContent } from "./ColorPickerBase/ColorPickerContent.js";
 import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerEyeDropper, ColorPickerHueSlider } from "./ColorPickerBase/ColorPickerControls.js";
 import { ColorPickerFormatInput } from "./ColorPickerBase/ColorPickerFormatInput.js";
@@ -91,4 +93,4 @@ import "./toast/index.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, AvatarUpload, Button, ButtonExtended, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, COMMON_COLORS, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerButton, ColorPickerColorPalette, ColorPickerCompactControls, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerControls, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatInput, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerHueSlider, ColorPickerInput, ColorPickerRoot, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogTitle, DialogTrigger, FileUpload, FileUploadInline, FileUploadRoot, FileUploadRootItem, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Rating, RatingButton, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, TagsInputInline, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, ToggleButton, ToggleGroup, ToggleGroupItem, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, ButtonExtended, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerButton, ColorPickerColorPalette, ColorPickerCompactControls, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerControls, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatInput, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerHueSlider, ColorPickerInput, ColorPickerPaletteButton, ColorPickerPaletteSwatch, ColorPickerRoot, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogTitle, DialogTrigger, FileUpload, FileUploadInline, FileUploadRoot, FileUploadRootItem, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Rating, RatingButton, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, TagsInputInline, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, ToggleButton, ToggleGroup, ToggleGroupItem, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/package.json

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

package/dist/ColorPickerBase/PaletteButton.cjs

@@ -1,20 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/color-palette/ColorPickerColorPalette.js

@@ -1,95 +0,0 @@
-import { PaletteButton } from "../PaletteButton.js";
-import { PaletteSwatch } from "./PaletteSwatch.js";
-import { cn } from "@pixpilot/shadcn";
-import { Droplet } from "lucide-react";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/ColorPickerBase/color-palette/ColorPickerColorPalette.tsx
-const COMMON_COLORS = [
-	{
-		label: "Transparent",
-		value: "#00000000"
-	},
-	{
-		label: "Black",
-		value: "#000000"
-	},
-	{
-		label: "White",
-		value: "#FFFFFF"
-	},
-	{
-		label: "Gray",
-		value: "#808080"
-	},
-	{
-		label: "Red",
-		value: "#FF0000"
-	},
-	{
-		label: "Orange",
-		value: "#FFA500"
-	},
-	{
-		label: "Yellow",
-		value: "#FFFF00"
-	},
-	{
-		label: "Lime",
-		value: "#84CC16"
-	},
-	{
-		label: "Green",
-		value: "#22C55E"
-	},
-	{
-		label: "Teal",
-		value: "#14B8A6"
-	},
-	{
-		label: "Cyan",
-		value: "#00FFFF"
-	},
-	{
-		label: "Blue",
-		value: "#3B82F6"
-	},
-	{
-		label: "Indigo",
-		value: "#6366F1"
-	},
-	{
-		label: "Purple",
-		value: "#A855F7"
-	},
-	{
-		label: "Pink",
-		value: "#EC4899"
-	},
-	{
-		label: "Brown",
-		value: "#A52A2A"
-	}
-];
-const ColorPickerColorPalette = (props) => {
-	const { presetColors = COMMON_COLORS, onChange, selectedColor, onMoreColor,...rest } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		...rest,
-		className: cn("gap-2 flex flex-wrap", rest.className),
-		children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
-			color,
-			onSelect: onChange,
-			selectedValue: selectedColor
-		}, color.value)), onMoreColor && /* @__PURE__ */ jsx(PaletteButton, {
-			onClick: onMoreColor,
-			"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" })
-		})]
-	});
-};
-ColorPickerColorPalette.displayName = "ColorPickerColorPalette";
-
-//#endregion
-export { COMMON_COLORS, ColorPickerColorPalette };