@pixpilot/shadcn-ui 0.65.0 → 1.0.0

package/dist/ColorPicker/ColorPicker.cjs

@@ -3,71 +3,19 @@
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_ColorPickerBase = require('../ColorPickerBase/ColorPickerBase.cjs');
+const require_ColorPickerButton = require('../ColorPickerBase/ColorPickerButton.cjs');
+const require_ColorPickerInput = require('../ColorPickerBase/ColorPickerInput.cjs');
 require('../ColorPickerBase/index.cjs');
-let __pixpilot_shadcn = require("@pixpilot/shadcn");
-__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
-let lucide_react = require("lucide-react");
-lucide_react = require_rolldown_runtime.__toESM(lucide_react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPicker/ColorPicker.tsx
-function Swatch(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerSwatch, {
-		color: props.color,
-		className: (0, __pixpilot_shadcn.cn)("rounded-sm w-6.5 h-6.5 p-0 -ml-1 cursor-pointer", props.className)
-	});
-}
 const ColorPicker = (props) => {
-	const { variant = "input", placeholder = "Pick a color", formatDisplayValue,...rest } = props;
+	const { variant = "input", formatDisplayValue,...rest } = props;
+	const Input = variant === "input" ? require_ColorPickerInput.ColorPickerInput : require_ColorPickerButton.ColorPickerButton;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerBase.ColorPickerBase, {
 		...rest,
-		children: ({ value, onValueChange, isPickerOpen }) => {
-			const swatchColor = value != null && value !== "" ? value : void 0;
-			const renderSwatch = () => {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: swatchColor });
-			};
-			const renderDisplayValue = () => {
-				if (value == null || value === "") return placeholder;
-				return formatDisplayValue != null ? formatDisplayValue(value) : value;
-			};
-			if (variant === "input") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
-				align: "inline-start",
-				className: "pl-0",
-				children: renderSwatch()
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
-				value: value ?? "",
-				onPointerDown: (e) => {
-					if (isPickerOpen) return;
-					e.stopPropagation();
-				},
-				onClick: (e) => {
-					if (isPickerOpen) return;
-					e.stopPropagation();
-				},
-				onChange: (e) => onValueChange(e.target.value),
-				placeholder
-			})] });
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {
-				className: (0, __pixpilot_shadcn.cn)("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
-						align: "inline-start",
-						className: "pl-0",
-						children: renderSwatch()
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupText, {
-						className: "flex-1 text-left text-foreground pl-2",
-						children: renderDisplayValue()
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
-						align: "inline-end",
-						className: "pr-1",
-						children: isPickerOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: "size-4 opacity-50" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-4 opacity-50" })
-					})
-				]
-			});
-		}
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {})
 	});
 };
 ColorPicker.displayName = "ColorPicker";

package/dist/ColorPicker/ColorPicker.d.cts

@@ -1,4 +1,5 @@
 import { ColorPickerBaseProps } from "../ColorPickerBase/types.cjs";
+import "../ColorPickerBase/index.cjs";
 
 //#region src/ColorPicker/ColorPicker.d.ts
 interface ColorPickerProps extends Omit<ColorPickerBaseProps, 'children'> {

package/dist/ColorPicker/ColorPicker.js

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

package/dist/ColorPicker/index.d.cts

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

package/dist/ColorPickerBase/ColorPickerBase.cjs

@@ -2,100 +2,29 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_ColorPickerCompact = require('./ColorPickerCompact.cjs');
-const require_ColorPickerFull = require('./ColorPickerFull.cjs');
+const require_ColorPickerColorPalette = require('./color-palette/ColorPickerColorPalette.cjs');
+require('./color-palette/index.cjs');
+const require_constants = require('./constants.cjs');
+const require_ColorPickerCompactControls = require('./ColorPickerCompactControls.cjs');
+const require_ColorPickerFullControls = require('./ColorPickerFullControls.cjs');
 const require_use_color_picker_base_swatch = require('./hooks/use-color-picker-base-swatch.cjs');
 const require_use_color_picker_base_value = require('./hooks/use-color-picker-base-value.cjs');
-let __pixpilot_shadcn = require("@pixpilot/shadcn");
-__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+const require_ColorPickerRoot = require('./ColorPickerRoot.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
-const commonColors = [
-	{
-		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 DEFAULT_COLOR = "#000000";
-const DEFAULT_SECTIONS = [
-	"swatch",
-	"picker",
-	"format-select",
-	"input"
-];
 const ColorPickerBase = (props) => {
 	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
 	const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
 		value: propValue,
-		defaultValue: DEFAULT_COLOR,
+		defaultValue: require_constants.DEFAULT_COLOR,
 		onChange,
 		onValueChange
 	});
-	const { valueForPicker, handleFormatChange, handleSwatchSelect } = require_use_color_picker_base_swatch.useColorPickerBaseSwatch({
+	const { valueForPicker, handleFormatChange } = require_use_color_picker_base_swatch.useColorPickerValueAdapter({
 		currentValue,
 		format,
 		defaultFormat,
@@ -103,13 +32,13 @@ const ColorPickerBase = (props) => {
 		handleValueChange
 	});
 	const [open, setOpen] = (0, react.useState)(false);
-	const resolvedSections = sections ?? DEFAULT_SECTIONS;
-	let colors = presetColors || commonColors;
+	const resolvedSections = sections ?? require_constants.DEFAULT_SECTIONS;
+	let colors = presetColors || require_ColorPickerColorPalette.COMMON_COLORS;
 	const handleOpen = (0, react.useCallback)((isOpen) => {
 		setOpen(isOpen);
 	}, []);
 	if (layout === "compact" && !presetColors) colors = colors.slice(0, -1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.ColorPicker, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerRoot.ColorPickerRoot, {
 		...rest,
 		format,
 		defaultFormat,
@@ -117,26 +46,18 @@ const ColorPickerBase = (props) => {
 		value: valueForPicker,
 		onValueChange: handleValueChange,
 		onOpenChange: handleOpen,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
-			asChild: true,
-			className: "w-full flex items-center gap-1 border border-input bg-background px-3 py-2 rounded-md ",
-			children: children({
-				value: currentValue,
-				onValueChange: handleValueChange,
-				isPickerOpen: open
-			})
-		}), layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompact.ColorPickerCompact, {
+		children: [typeof children === "function" ? children({
+			value: currentValue,
+			onValueChange: handleValueChange,
+			isPickerOpen: open
+		}) : children, layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompactControls.ColorPickerCompactControls, {
 			...contentProps,
-			onValueChange: handleSwatchSelect,
 			presetColors: colors,
-			sections: resolvedSections,
-			currentValue
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFull.ColorPickerFull, {
+			sections: resolvedSections
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFullControls.ColorPickerFullControls, {
 			...contentProps,
-			onValueChange: handleSwatchSelect,
 			presetColors: colors,
-			sections: resolvedSections,
-			currentValue
+			sections: resolvedSections
 		})]
 	});
 };

package/dist/ColorPickerBase/ColorPickerBase.js

@@ -1,88 +1,18 @@
 'use client';
 
 
-import { ColorPickerCompact } from "./ColorPickerCompact.js";
-import { ColorPickerFull } from "./ColorPickerFull.js";
-import { useColorPickerBaseSwatch } from "./hooks/use-color-picker-base-swatch.js";
+import { COMMON_COLORS } from "./color-palette/ColorPickerColorPalette.js";
+import "./color-palette/index.js";
+import { DEFAULT_COLOR, DEFAULT_SECTIONS } from "./constants.js";
+import { ColorPickerCompactControls } from "./ColorPickerCompactControls.js";
+import { ColorPickerFullControls } from "./ColorPickerFullControls.js";
+import { useColorPickerValueAdapter } from "./hooks/use-color-picker-base-swatch.js";
 import { useColorPickerBaseValue } from "./hooks/use-color-picker-base-value.js";
-import { ColorPicker, ColorPickerTrigger } from "@pixpilot/shadcn";
+import { ColorPickerRoot } from "./ColorPickerRoot.js";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
-const commonColors = [
-	{
-		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 DEFAULT_COLOR = "#000000";
-const DEFAULT_SECTIONS = [
-	"swatch",
-	"picker",
-	"format-select",
-	"input"
-];
 const ColorPickerBase = (props) => {
 	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
 	const { currentValue, handleValueChange } = useColorPickerBaseValue({
@@ -91,7 +21,7 @@ const ColorPickerBase = (props) => {
 		onChange,
 		onValueChange
 	});
-	const { valueForPicker, handleFormatChange, handleSwatchSelect } = useColorPickerBaseSwatch({
+	const { valueForPicker, handleFormatChange } = useColorPickerValueAdapter({
 		currentValue,
 		format,
 		defaultFormat,
@@ -100,12 +30,12 @@ const ColorPickerBase = (props) => {
 	});
 	const [open, setOpen] = useState(false);
 	const resolvedSections = sections ?? DEFAULT_SECTIONS;
-	let colors = presetColors || commonColors;
+	let colors = presetColors || COMMON_COLORS;
 	const handleOpen = useCallback((isOpen) => {
 		setOpen(isOpen);
 	}, []);
 	if (layout === "compact" && !presetColors) colors = colors.slice(0, -1);
-	return /* @__PURE__ */ jsxs(ColorPicker, {
+	return /* @__PURE__ */ jsxs(ColorPickerRoot, {
 		...rest,
 		format,
 		defaultFormat,
@@ -113,26 +43,18 @@ const ColorPickerBase = (props) => {
 		value: valueForPicker,
 		onValueChange: handleValueChange,
 		onOpenChange: handleOpen,
-		children: [/* @__PURE__ */ jsx(ColorPickerTrigger, {
-			asChild: true,
-			className: "w-full flex items-center gap-1 border border-input bg-background px-3 py-2 rounded-md ",
-			children: children({
-				value: currentValue,
-				onValueChange: handleValueChange,
-				isPickerOpen: open
-			})
-		}), layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompact, {
+		children: [typeof children === "function" ? children({
+			value: currentValue,
+			onValueChange: handleValueChange,
+			isPickerOpen: open
+		}) : children, layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompactControls, {
 			...contentProps,
-			onValueChange: handleSwatchSelect,
 			presetColors: colors,
-			sections: resolvedSections,
-			currentValue
-		}) : /* @__PURE__ */ jsx(ColorPickerFull, {
+			sections: resolvedSections
+		}) : /* @__PURE__ */ jsx(ColorPickerFullControls, {
 			...contentProps,
-			onValueChange: handleSwatchSelect,
 			presetColors: colors,
-			sections: resolvedSections,
-			currentValue
+			sections: resolvedSections
 		})]
 	});
 };

package/dist/ColorPickerBase/ColorPickerButton.cjs

@@ -0,0 +1,54 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_color_picker_context = require('./color-picker-context.cjs');
+const require_ColorPickerSwatch = require('./ColorPickerSwatch.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/ColorPickerBase/ColorPickerButton.tsx
+const ColorPickerButton = (props) => {
+	const { slots, formatDisplayValue, placeholder = "Pick a color",...rest } = props;
+	const { isPickerOpen, color, onColorChange } = 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");
+	}
+	const renderDisplayValue = () => {
+		if (color == null || color === "") return placeholder;
+		return formatDisplayValue != null ? formatDisplayValue(color) : color;
+	};
+	const currentcolor = color != null && color !== "" ? color : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {
+			...rest,
+			className: (0, __pixpilot_shadcn.cn)("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer", rest.className),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
+					align: "inline-start",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerSwatch.ColorPickerSwatch, {
+						color: currentcolor,
+						...slots?.swatch
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupText, {
+					className: "flex-1 text-left text-foreground pl-2",
+					children: renderDisplayValue()
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
+					align: "inline-end",
+					className: "",
+					children: isPickerOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: "size-4 opacity-50" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-4 opacity-50" })
+				})
+			]
+		})
+	});
+};
+ColorPickerButton.displayName = "ColorPickerButton";
+
+//#endregion
+exports.ColorPickerButton = ColorPickerButton;

package/dist/ColorPickerBase/ColorPickerButton.d.cts

@@ -0,0 +1,14 @@
+import { ColorPickerSwatch } from "./ColorPickerSwatch.cjs";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerButton.d.ts
+interface ColorPickerButtonProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'> {
+  formatDisplayValue?: (value: string) => React.ReactNode;
+  placeholder?: string;
+  slots?: {
+    swatch: React.ComponentProps<typeof ColorPickerSwatch>;
+  };
+}
+declare const ColorPickerButton: React.FC<ColorPickerButtonProps>;
+//#endregion
+export { ColorPickerButton, ColorPickerButtonProps };

package/dist/ColorPickerBase/ColorPickerButton.d.ts

@@ -0,0 +1,14 @@
+import { ColorPickerSwatch } from "./ColorPickerSwatch.js";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerButton.d.ts
+interface ColorPickerButtonProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'> {
+  formatDisplayValue?: (value: string) => React.ReactNode;
+  placeholder?: string;
+  slots?: {
+    swatch: React.ComponentProps<typeof ColorPickerSwatch>;
+  };
+}
+declare const ColorPickerButton: React.FC<ColorPickerButtonProps>;
+//#endregion
+export { ColorPickerButton, ColorPickerButtonProps };

package/dist/ColorPickerBase/ColorPickerButton.js

@@ -0,0 +1,47 @@
+import { useColorPickerContext } from "./color-picker-context.js";
+import { ColorPickerSwatch as ColorPickerSwatch$1 } from "./ColorPickerSwatch.js";
+import { ColorPickerTrigger, InputGroup, InputGroupAddon, InputGroupText, cn } from "@pixpilot/shadcn";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import React from "react";
+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 renderDisplayValue = () => {
+		if (color == null || color === "") return placeholder;
+		return formatDisplayValue != null ? formatDisplayValue(color) : color;
+	};
+	const currentcolor = color != null && color !== "" ? color : void 0;
+	return /* @__PURE__ */ jsx(ColorPickerTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			...rest,
+			className: cn("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer", rest.className),
+			children: [
+				/* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-start",
+					children: /* @__PURE__ */ jsx(ColorPickerSwatch$1, {
+						color: currentcolor,
+						...slots?.swatch
+					})
+				}),
+				/* @__PURE__ */ jsx(InputGroupText, {
+					className: "flex-1 text-left text-foreground pl-2",
+					children: renderDisplayValue()
+				}),
+				/* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-end",
+					className: "",
+					children: isPickerOpen ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4 opacity-50" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+				})
+			]
+		})
+	});
+};
+ColorPickerButton.displayName = "ColorPickerButton";
+
+//#endregion
+export { ColorPickerButton };

package/dist/ColorPickerBase/ColorPickerCompactControls.cjs

@@ -0,0 +1,49 @@
+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_ColorPickerContent = require('./ColorPickerContent.cjs');
+const require_ColorPickerControls = require('./ColorPickerControls.cjs');
+const require_ColorPickerFormatControls = require('./ColorPickerFormatControls.cjs');
+const require_constants = require('./constants.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/ColorPickerBase/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");
+	const showFormatSelect = enabledSections.has("format-select");
+	const showInput = enabledSections.has("input");
+	const [showFullPicker, setShowFullPicker] = (0, react.useState)(false);
+	const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
+	const canTogglePickerUi = showPicker && showSwatch;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
+		...rest,
+		children: [
+			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, {
+					presetColors,
+					onChange: onColorChange,
+					selectedColor: currentColor,
+					onMoreColor: canTogglePickerUi ? () => setShowFullPicker(!showFullPicker) : void 0
+				})
+			}),
+			(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatControls.ColorPickerFormatControls, {
+				showFormatSelect,
+				showInput
+			})
+		]
+	});
+});
+ColorPickerCompactControls.displayName = "ColorPickerCompactControls";
+
+//#endregion
+exports.ColorPickerCompactControls = ColorPickerCompactControls;