@pixpilot/shadcn-ui 0.65.0 → 1.0.0

package/dist/ColorPickerBase/ColorPickerCompactControls.d.cts

@@ -0,0 +1,8 @@
+import { ColorPickerContentProps } from "./types.cjs";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerCompactControls.d.ts
+interface ColorPickerCompactControlsProps extends Omit<ColorPickerContentProps, 'onValueChange' | 'currentValue'> {}
+declare const ColorPickerCompactControls: React.FC<ColorPickerCompactControlsProps>;
+//#endregion
+export { ColorPickerCompactControls, ColorPickerCompactControlsProps };

package/dist/ColorPickerBase/ColorPickerCompactControls.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerContentProps } from "./types.js";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerCompactControls.d.ts
+interface ColorPickerCompactControlsProps extends Omit<ColorPickerContentProps, 'onValueChange' | 'currentValue'> {}
+declare const ColorPickerCompactControls: React.FC<ColorPickerCompactControlsProps>;
+//#endregion
+export { ColorPickerCompactControls, ColorPickerCompactControlsProps };

package/dist/ColorPickerBase/ColorPickerCompactControls.js

@@ -0,0 +1,46 @@
+import { ColorPickerColorPalette } from "./color-palette/ColorPickerColorPalette.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";
+import { DEFAULT_SECTIONS } from "./constants.js";
+import React, { useState } from "react";
+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");
+	const showFormatSelect = enabledSections.has("format-select");
+	const showInput = enabledSections.has("input");
+	const [showFullPicker, setShowFullPicker] = useState(false);
+	const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
+	const canTogglePickerUi = showPicker && showSwatch;
+	return /* @__PURE__ */ jsxs(ColorPickerContent, {
+		...rest,
+		children: [
+			shouldShowPickerUi && /* @__PURE__ */ jsx(ColorPickerControls, {}),
+			showSwatch && /* @__PURE__ */ jsx("div", {
+				className: "gap-2  flex flex-wrap",
+				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, {
+					presetColors,
+					onChange: onColorChange,
+					selectedColor: currentColor,
+					onMoreColor: canTogglePickerUi ? () => setShowFullPicker(!showFullPicker) : void 0
+				})
+			}),
+			(showFormatSelect || showInput) && /* @__PURE__ */ jsx(ColorPickerFormatControls, {
+				showFormatSelect,
+				showInput
+			})
+		]
+	});
+});
+ColorPickerCompactControls.displayName = "ColorPickerCompactControls";
+
+//#endregion
+export { ColorPickerCompactControls };

package/dist/ColorPickerBase/ColorPickerControls.cjs

@@ -0,0 +1,33 @@
+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/ColorPickerControls.tsx
+const ColorPickerControls = (props) => {
+	const { slots,...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "color-picker-controls",
+		...rest,
+		className: (0, __pixpilot_shadcn.cn)("space-y-4", rest.className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, { ...slots?.area }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-slot": "color-picker-controls-row",
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, {
+				...slots?.eyeDropper,
+				className: (0, __pixpilot_shadcn.cn)("hidden xs:flex ", slots?.eyeDropper.className)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-slot": "color-picker-controls-sliders",
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, { ...slots?.hueSlider }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, { ...slots?.alphaSlider })]
+			})]
+		})]
+	});
+};
+ColorPickerControls.displayName = "ColorPickerControls";
+
+//#endregion
+exports.ColorPickerControls = ColorPickerControls;

package/dist/ColorPickerBase/ColorPickerControls.d.cts

@@ -0,0 +1,15 @@
+import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper, 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>;
+    hueSlider: React.ComponentProps<typeof ColorPickerHueSlider>;
+    alphaSlider: React.ComponentProps<typeof ColorPickerAlphaSlider>;
+  };
+}
+declare const ColorPickerControls: React.FC<ColorPickerControlsProps>;
+//#endregion
+export { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerHueSlider };

package/dist/ColorPickerBase/ColorPickerControls.d.ts

@@ -0,0 +1,15 @@
+import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper, 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>;
+    hueSlider: React.ComponentProps<typeof ColorPickerHueSlider>;
+    alphaSlider: React.ComponentProps<typeof ColorPickerAlphaSlider>;
+  };
+}
+declare const ColorPickerControls: React.FC<ColorPickerControlsProps>;
+//#endregion
+export { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerHueSlider };

package/dist/ColorPickerBase/ColorPickerControls.js

@@ -0,0 +1,29 @@
+import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper, ColorPickerHueSlider, cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/ColorPickerControls.tsx
+const ColorPickerControls = (props) => {
+	const { slots,...rest } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "color-picker-controls",
+		...rest,
+		className: cn("space-y-4", rest.className),
+		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, {
+				...slots?.eyeDropper,
+				className: cn("hidden xs:flex ", slots?.eyeDropper.className)
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-slot": "color-picker-controls-sliders",
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, { ...slots?.hueSlider }), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, { ...slots?.alphaSlider })]
+			})]
+		})]
+	});
+};
+ColorPickerControls.displayName = "ColorPickerControls";
+
+//#endregion
+export { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerControls, ColorPickerEyeDropper, ColorPickerHueSlider };

package/dist/ColorPickerBase/ColorPickerFormatControls.cjs

@@ -0,0 +1,22 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_ColorPickerFormatInput = require('./ColorPickerFormatInput.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/ColorPickerFormatControls.tsx
+const ColorPickerFormatControls = (props) => {
+	const { showFormatSelect = true, showInput = true,...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...rest,
+		className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2 w-full", rest.className),
+		children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatInput.ColorPickerFormatInput, {})]
+	});
+};
+ColorPickerFormatControls.displayName = "ColorPickerFormatControls";
+
+//#endregion
+exports.ColorPickerFormatControls = ColorPickerFormatControls;

package/dist/ColorPickerBase/ColorPickerFormatControls.d.cts

@@ -0,0 +1,12 @@
+import { ColorPickerFormatInput } from "./ColorPickerFormatInput.cjs";
+import { ColorPickerFormatSelect } from "@pixpilot/shadcn";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerFormatControls.d.ts
+interface ColorPickerFormatControlsProps extends React.ComponentProps<'div'> {
+  showFormatSelect?: boolean;
+  showInput?: boolean;
+}
+declare const ColorPickerFormatControls: React.FC<ColorPickerFormatControlsProps>;
+//#endregion
+export { ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatSelect };

package/dist/ColorPickerBase/ColorPickerFormatControls.d.ts

@@ -0,0 +1,12 @@
+import { ColorPickerFormatInput } from "./ColorPickerFormatInput.js";
+import { ColorPickerFormatSelect } from "@pixpilot/shadcn";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerFormatControls.d.ts
+interface ColorPickerFormatControlsProps extends React.ComponentProps<'div'> {
+  showFormatSelect?: boolean;
+  showInput?: boolean;
+}
+declare const ColorPickerFormatControls: React.FC<ColorPickerFormatControlsProps>;
+//#endregion
+export { ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatSelect };

package/dist/ColorPickerBase/ColorPickerFormatControls.js

@@ -0,0 +1,18 @@
+import { ColorPickerFormatInput } from "./ColorPickerFormatInput.js";
+import { ColorPickerFormatSelect, cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorPickerBase/ColorPickerFormatControls.tsx
+const ColorPickerFormatControls = (props) => {
+	const { showFormatSelect = true, showInput = true,...rest } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: cn("flex items-center gap-2 w-full", rest.className),
+		children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerFormatInput, {})]
+	});
+};
+ColorPickerFormatControls.displayName = "ColorPickerFormatControls";
+
+//#endregion
+export { ColorPickerFormatControls, ColorPickerFormatSelect };

package/dist/ColorPickerBase/ColorPickerFormatInput.cjs

@@ -0,0 +1,20 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/ColorPickerBase/ColorPickerFormatInput.tsx
+const ColorPickerFormatInput = (props) => {
+	if ((0, __pixpilot_shadcn.useColorPicker)((s) => s.format) === "hex") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerInput, { ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerInput, {
+		...props,
+		className: "[&_input]:px-0 [&_input]:w-full [&_input]:min-w-0 flex-1 [&_input]:text-center"
+	});
+};
+ColorPickerFormatInput.displayName = "ColorPickerFormatInput";
+
+//#endregion
+exports.ColorPickerFormatInput = ColorPickerFormatInput;

package/dist/ColorPickerBase/ColorPickerFormatInput.d.cts

@@ -0,0 +1,8 @@
+import { ColorPickerInput } from "@pixpilot/shadcn";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerFormatInput.d.ts
+interface ColorPickerFormatInputProps extends React.ComponentProps<typeof ColorPickerInput> {}
+declare const ColorPickerFormatInput: React.FC<ColorPickerFormatInputProps>;
+//#endregion
+export { ColorPickerFormatInput, ColorPickerFormatInputProps };

package/dist/ColorPickerBase/ColorPickerFormatInput.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerInput } from "@pixpilot/shadcn";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerFormatInput.d.ts
+interface ColorPickerFormatInputProps extends React.ComponentProps<typeof ColorPickerInput> {}
+declare const ColorPickerFormatInput: React.FC<ColorPickerFormatInputProps>;
+//#endregion
+export { ColorPickerFormatInput, ColorPickerFormatInputProps };

package/dist/ColorPickerBase/ColorPickerFormatInput.js

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

package/dist/ColorPickerBase/ColorPickerFullControls.cjs

@@ -0,0 +1,44 @@
+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');
+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/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");
+	const showFormatSelect = enabledSections.has("format-select");
+	const showInput = enabledSections.has("input");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
+		...rest,
+		children: [
+			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
+				})
+			}),
+			(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatControls.ColorPickerFormatControls, {
+				showFormatSelect,
+				showInput
+			})
+		]
+	});
+});
+ColorPickerFullControls.displayName = "ColorPickerFullControls";
+
+//#endregion
+exports.ColorPickerFullControls = ColorPickerFullControls;

package/dist/ColorPickerBase/ColorPickerFullControls.d.cts

@@ -0,0 +1,8 @@
+import { ColorPickerContentProps } from "./types.cjs";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerFullControls.d.ts
+interface ColorPickerFullControlsProps extends Omit<ColorPickerContentProps, 'onValueChange' | 'currentValue'> {}
+declare const ColorPickerFullControls: React.FC<ColorPickerFullControlsProps>;
+//#endregion
+export { ColorPickerFullControls, ColorPickerFullControlsProps };

package/dist/ColorPickerBase/ColorPickerFullControls.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerContentProps } from "./types.js";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerFullControls.d.ts
+interface ColorPickerFullControlsProps extends Omit<ColorPickerContentProps, 'onValueChange' | 'currentValue'> {}
+declare const ColorPickerFullControls: React.FC<ColorPickerFullControlsProps>;
+//#endregion
+export { ColorPickerFullControls, ColorPickerFullControlsProps };

package/dist/ColorPickerBase/ColorPickerFullControls.js

@@ -0,0 +1,41 @@
+import { ColorPickerColorPalette } from "./color-palette/ColorPickerColorPalette.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";
+import React from "react";
+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");
+	const showFormatSelect = enabledSections.has("format-select");
+	const showInput = enabledSections.has("input");
+	return /* @__PURE__ */ jsxs(ColorPickerContent, {
+		...rest,
+		children: [
+			showPicker && /* @__PURE__ */ jsx(ColorPickerControls, {}),
+			showSwatch && /* @__PURE__ */ jsx("div", {
+				className: "gap-2  flex flex-wrap",
+				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, {
+					presetColors,
+					onChange: onColorChange,
+					selectedColor: currentColor
+				})
+			}),
+			(showFormatSelect || showInput) && /* @__PURE__ */ jsx(ColorPickerFormatControls, {
+				showFormatSelect,
+				showInput
+			})
+		]
+	});
+});
+ColorPickerFullControls.displayName = "ColorPickerFullControls";
+
+//#endregion
+export { ColorPickerFullControls };

package/dist/ColorPickerBase/ColorPickerInput.cjs

@@ -1,4 +1,6 @@
 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 react = require("react");
@@ -8,10 +10,40 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerInput.tsx
 const ColorPickerInput = (props) => {
-	if ((0, __pixpilot_shadcn.useColorPicker)((s) => s.format) === "hex") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerInput, { ...props });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerInput, {
-		...props,
-		className: "[&_input]:px-0 [&_input]:w-full [&_input]:min-w-0 flex-1 [&_input]:text-center"
+	const { slots, onChange,...rest } = props;
+	const { isPickerOpen, color, onColorChange } = 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");
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {
+			className: "w-full",
+			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,
+					...slots?.swatch
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
+				value: color ?? "",
+				...rest,
+				onPointerDown: (e) => {
+					rest.onPointerDown?.(e);
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onClick: (e) => {
+					rest.onClick?.(e);
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onChange: (e) => {
+					onColorChange(e.target.value);
+					onChange?.(e);
+				}
+			})]
+		})
 	});
 };
 ColorPickerInput.displayName = "ColorPickerInput";

package/dist/ColorPickerBase/ColorPickerInput.d.cts

@@ -0,0 +1,12 @@
+import { ColorPickerSwatch } from "./ColorPickerSwatch.cjs";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerInput.d.ts
+interface ColorPickerInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value'> {
+  slots?: {
+    swatch: React.ComponentProps<typeof ColorPickerSwatch>;
+  };
+}
+declare const ColorPickerInput: React.FC<ColorPickerInputProps>;
+//#endregion
+export { ColorPickerInput, ColorPickerInputProps };

package/dist/ColorPickerBase/ColorPickerInput.d.ts

@@ -0,0 +1,12 @@
+import { ColorPickerSwatch } from "./ColorPickerSwatch.js";
+import React from "react";
+
+//#region src/ColorPickerBase/ColorPickerInput.d.ts
+interface ColorPickerInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value'> {
+  slots?: {
+    swatch: React.ComponentProps<typeof ColorPickerSwatch>;
+  };
+}
+declare const ColorPickerInput: React.FC<ColorPickerInputProps>;
+//#endregion
+export { ColorPickerInput, ColorPickerInputProps };

package/dist/ColorPickerBase/ColorPickerInput.js

@@ -1,13 +1,43 @@
-import { ColorPickerInput, useColorPicker } from "@pixpilot/shadcn";
+import { useColorPickerContext } from "./color-picker-context.js";
+import { ColorPickerSwatch as ColorPickerSwatch$1 } from "./ColorPickerSwatch.js";
+import { ColorPickerTrigger, InputGroup, InputGroupAddon, InputGroupInput } from "@pixpilot/shadcn";
 import React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerInput.tsx
 const ColorPickerInput$1 = (props) => {
-	if (useColorPicker((s) => s.format) === "hex") return /* @__PURE__ */ jsx(ColorPickerInput, { ...props });
-	return /* @__PURE__ */ jsx(ColorPickerInput, {
-		...props,
-		className: "[&_input]:px-0 [&_input]:w-full [&_input]:min-w-0 flex-1 [&_input]:text-center"
+	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");
+	return /* @__PURE__ */ jsx(ColorPickerTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-start",
+				children: /* @__PURE__ */ jsx(ColorPickerSwatch$1, {
+					color: color != null && color !== "" ? color : void 0,
+					...slots?.swatch
+				})
+			}), /* @__PURE__ */ jsx(InputGroupInput, {
+				value: color ?? "",
+				...rest,
+				onPointerDown: (e) => {
+					rest.onPointerDown?.(e);
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onClick: (e) => {
+					rest.onClick?.(e);
+					if (isPickerOpen) return;
+					e.stopPropagation();
+				},
+				onChange: (e) => {
+					onColorChange(e.target.value);
+					onChange?.(e);
+				}
+			})]
+		})
 	});
 };
 ColorPickerInput$1.displayName = "ColorPickerInput";

package/dist/ColorPickerBase/ColorPickerRoot.cjs

@@ -0,0 +1,55 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_color_picker_context = require('./color-picker-context.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);
+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/ColorPickerRoot.tsx
+const DEFAULT_COLOR = "#000000";
+const ColorPickerRoot = (props) => {
+	const { value: propValue, onChange, onValueChange, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
+	const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
+		value: propValue,
+		defaultValue: DEFAULT_COLOR,
+		onChange,
+		onValueChange
+	});
+	const { valueForPicker, handleFormatChange } = require_use_color_picker_base_swatch.useColorPickerValueAdapter({
+		currentValue,
+		format,
+		defaultFormat,
+		onFormatChange,
+		handleValueChange
+	});
+	const [open, setOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_picker_context.Provider, {
+		value: {
+			isPickerOpen: open,
+			color: currentValue,
+			onColorChange: handleValueChange,
+			openPicker: setOpen
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPicker, {
+			...rest,
+			format,
+			defaultFormat,
+			onFormatChange: handleFormatChange,
+			value: valueForPicker,
+			onValueChange: handleValueChange,
+			onOpenChange: setOpen,
+			children
+		})
+	});
+};
+ColorPickerRoot.displayName = "ColorPickerRoot";
+
+//#endregion
+exports.ColorPickerRoot = ColorPickerRoot;

package/dist/ColorPickerBase/ColorPickerRoot.d.cts

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

package/dist/ColorPickerBase/ColorPickerRoot.d.ts

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