@pixpilot/shadcn-ui 1.1.0 → 1.1.2

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,23 @@
+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 = ({ selected,...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		...props,
+		className: (0, __pixpilot_shadcn.cn)(COLOR_PICKER_PALETTE_BUTTON_CLASSES, selected && "ring-2 ring-ring ring-offset-2 ring-offset-background border-ring", props.className),
+		"aria-pressed": selected
+	});
+};
+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,11 @@
+import React from "react";
+
+//#region src/ColorPickerBase/color-palette/PaletteButton.d.ts
+interface ColorPickerPaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  style?: React.CSSProperties;
+  selected?: boolean;
+}
+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,11 @@
+import React from "react";
+
+//#region src/ColorPickerBase/color-palette/PaletteButton.d.ts
+interface ColorPickerPaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  style?: React.CSSProperties;
+  selected?: boolean;
+}
+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,18 @@
+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 = ({ selected,...props }) => {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		className: cn(COLOR_PICKER_PALETTE_BUTTON_CLASSES, selected && "ring-2 ring-ring ring-offset-2 ring-offset-background border-ring", props.className),
+		"aria-pressed": selected
+	});
+};
+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,14 +26,14 @@ 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"
 		},
-		className: (0, __pixpilot_shadcn.cn)(className, isSelected && "ring-2 ring-ring ring-offset-2 ring-offset-background border-ring"),
-		onClick: handleClick,
-		"aria-pressed": isSelected
+		className,
+		selected: isSelected,
+		onClick: handleClick
 	});
 	if (colorLabel === null || colorLabel === void 0 || colorLabel === "") return button;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
@@ -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 };