jaci-ui 0.1.0

package/dist/components/collapsible/collapsible.d.cts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/collapsible/collapsible.d.ts
+type CollapsibleRootProps = ComponentPropsWithoutRef<typeof Collapsible.Root>;
+declare const CollapsibleRoot: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<typeof Collapsible.Trigger> {
+  showIndicator?: boolean;
+}
+declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+type CollapsiblePanelProps = ComponentPropsWithoutRef<typeof Collapsible.Panel>;
+declare const CollapsiblePanel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type CollapsibleIndicatorProps = ComponentPropsWithoutRef<"span">;
+declare const CollapsibleIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Collapsible$1: {
+  Root: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Panel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleIndicator, CollapsibleIndicatorProps, CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps };
+//# sourceMappingURL=collapsible.d.cts.map

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/collapsible/collapsible.d.ts
+type CollapsibleRootProps = ComponentPropsWithoutRef<typeof Collapsible.Root>;
+declare const CollapsibleRoot: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<typeof Collapsible.Trigger> {
+  showIndicator?: boolean;
+}
+declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+type CollapsiblePanelProps = ComponentPropsWithoutRef<typeof Collapsible.Panel>;
+declare const CollapsiblePanel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type CollapsibleIndicatorProps = ComponentPropsWithoutRef<"span">;
+declare const CollapsibleIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Collapsible$1: {
+  Root: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Panel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleIndicator, CollapsibleIndicatorProps, CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps };
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,55 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { withRecipeClassName } from "../base-ui.js";
+import { collapsible } from "../../styled-system/recipes/collapsible.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/collapsible/collapsible.tsx
+const CollapsibleRoot = forwardRef(function CollapsibleRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		...props,
+		ref,
+		className: withRecipeClassName(collapsible().root, className),
+		"data-jaci-component": "collapsible",
+		"data-slot": "collapsible"
+	});
+});
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger({ children, className, showIndicator = true, ...props }, ref) {
+	const styles = collapsible();
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.trigger, className),
+		"data-slot": "collapsible-trigger",
+		children: [showIndicator ? /* @__PURE__ */ jsx(CollapsibleIndicator, {}) : null, children]
+	});
+});
+const CollapsiblePanel = forwardRef(function CollapsiblePanel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		...props,
+		ref,
+		className: withRecipeClassName(collapsible().panel, className),
+		"data-slot": "collapsible-panel"
+	});
+});
+const CollapsibleIndicator = forwardRef(function CollapsibleIndicator({ children = "›", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		ref,
+		className: cx(collapsible().indicator, className),
+		"data-slot": "collapsible-indicator",
+		children
+	});
+});
+const Collapsible$1 = {
+	Root: CollapsibleRoot,
+	Trigger: CollapsibleTrigger,
+	Panel: CollapsiblePanel,
+	Indicator: CollapsibleIndicator
+};
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger };
+
+//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":["BaseCollapsible","Collapsible"],"sources":["../../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { withRecipeClassName } from \"../base-ui\";\nimport { cx } from \"../../styled-system/css\";\nimport { collapsible } from \"../../styled-system/recipes\";\n\nexport type CollapsibleRootProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Root>;\n\nexport const CollapsibleRoot = forwardRef<HTMLDivElement, CollapsibleRootProps>(\n  function CollapsibleRoot({ className, ...props }, ref) {\n    return (\n      <BaseCollapsible.Root\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(collapsible().root, className)}\n        data-jaci-component=\"collapsible\"\n        data-slot=\"collapsible\"\n      />\n    );\n  },\n);\n\nexport interface CollapsibleTriggerProps\n  extends ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger> {\n  showIndicator?: boolean;\n}\n\nexport const CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  function CollapsibleTrigger({ children, className, showIndicator = true, ...props }, ref) {\n    const styles = collapsible();\n\n    return (\n      <BaseCollapsible.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.trigger, className)}\n        data-slot=\"collapsible-trigger\"\n      >\n        {showIndicator ? <CollapsibleIndicator /> : null}\n        {children}\n      </BaseCollapsible.Trigger>\n    );\n  },\n);\n\nexport type CollapsiblePanelProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>;\n\nexport const CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(\n  function CollapsiblePanel({ className, ...props }, ref) {\n    return (\n      <BaseCollapsible.Panel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(collapsible().panel, className)}\n        data-slot=\"collapsible-panel\"\n      />\n    );\n  },\n);\n\nexport type CollapsibleIndicatorProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const CollapsibleIndicator = forwardRef<HTMLSpanElement, CollapsibleIndicatorProps>(\n  function CollapsibleIndicator({ children = \"›\", className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(collapsible().indicator, className)}\n        data-slot=\"collapsible-indicator\"\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nexport const Collapsible = {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel,\n  Indicator: CollapsibleIndicator,\n};\n"],"mappings":";;;;;;;;AAYA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAACA,YAAgB,MAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,YAAY,CAAC,CAAC,MAAM,SAAS;EAC5D,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;AAOA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,UAAU,WAAW,gBAAgB,MAAM,GAAG,SAAS,KAAK;CACxF,MAAM,SAAS,YAAY;CAE3B,OACE,qBAACA,YAAgB,SAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,SAAS,SAAS;EACxD,aAAU;YAJZ,CAMG,gBAAgB,oBAAC,sBAAD,CAAuB,CAAA,IAAI,MAC3C,QACsB;;AAE7B,CACF;AAIA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACA,YAAgB,OAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,YAAY,CAAC,CAAC,OAAO,SAAS;EAC7D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,EAAE,WAAW,KAAK,WAAW,GAAG,SAAS,KAAK;CAC1E,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAW,GAAG,YAAY,CAAC,CAAC,WAAW,SAAS;EAChD,aAAU;EAET;CACG,CAAA;AAEV,CACF;AAEA,MAAaC,gBAAc;CACzB,MAAM;CACN,SAAS;CACT,OAAO;CACP,WAAW;AACb"}

package/dist/components/collapsible/index.d.cts

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleIndicator, CollapsibleIndicatorProps, CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps } from "./collapsible.cjs";
+export { Collapsible, CollapsibleIndicator, type CollapsibleIndicatorProps, CollapsiblePanel, type CollapsiblePanelProps, CollapsibleRoot, type CollapsibleRootProps, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleIndicator, CollapsibleIndicatorProps, CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps } from "./collapsible.js";
+export { Collapsible, CollapsibleIndicator, type CollapsibleIndicatorProps, CollapsiblePanel, type CollapsiblePanelProps, CollapsibleRoot, type CollapsibleRootProps, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/components/color-picker/color-picker.cjs

@@ -0,0 +1,360 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_base_ui = require("../base-ui.cjs");
+const require_color_picker = require("../../styled-system/recipes/color-picker.cjs");
+const require_color_utils = require("./color-utils.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_popover = require("@base-ui/react/popover");
+//#region src/components/color-picker/color-picker.tsx
+const ColorPickerContext = (0, react.createContext)(null);
+function useColorPicker() {
+	const context = (0, react.useContext)(ColorPickerContext);
+	if (!context) throw new Error("ColorPicker parts must be rendered inside ColorPicker.Root.");
+	return context;
+}
+function ColorPickerRoot({ children, defaultValue = "#000000", disabled = false, format = "hex", id, name, onValueChange, showAlpha = false, swatches = [], value: controlledValue, ...popoverProps }) {
+	const generatedId = (0, react.useId)();
+	const inputId = id ?? generatedId;
+	const [uncontrolledColor, setUncontrolledColor] = (0, react.useState)(() => require_color_utils.defaultColor(defaultValue));
+	const color = require_color_utils.parseColor(controlledValue) ?? uncontrolledColor;
+	const formattedValue = require_color_utils.formatColor(color, format, showAlpha);
+	const setColor = (nextColor) => {
+		setUncontrolledColor(nextColor);
+		onValueChange?.(require_color_utils.formatColor(nextColor, format, showAlpha));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerContext.Provider, {
+		value: {
+			color,
+			disabled,
+			format,
+			inputId,
+			setColor,
+			showAlpha,
+			swatches,
+			value: formattedValue
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_popover.Popover.Root, {
+			...popoverProps,
+			children: [children, name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				"aria-hidden": "true",
+				id: `${inputId}-value`,
+				name,
+				type: "hidden",
+				value: formattedValue
+			}) : null]
+		})
+	});
+}
+const ColorPickerLabel = (0, react.forwardRef)(function ColorPickerLabel({ children, className, htmlFor, ...props }, ref) {
+	const { inputId } = useColorPicker();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+		...props,
+		ref,
+		className: require_cx.cx(require_color_picker.colorPicker().label, className),
+		"data-slot": "color-picker-label",
+		htmlFor: htmlFor ?? inputId,
+		children
+	});
+});
+const ColorPickerControl = (0, react.forwardRef)(function ColorPickerControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_color_picker.colorPicker().control, className),
+		"data-slot": "color-picker-control"
+	});
+});
+const ColorPickerTrigger = (0, react.forwardRef)(function ColorPickerTrigger({ className, disabled, ...props }, ref) {
+	const context = useColorPicker();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Trigger, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(require_color_picker.colorPicker().trigger, className),
+		"data-jaci-component": "color-picker",
+		"data-slot": "color-picker-trigger",
+		disabled: disabled ?? context.disabled,
+		id: props.id ?? context.inputId
+	});
+});
+const ColorPickerPreview = (0, react.forwardRef)(function ColorPickerPreview({ className, style, ...props }, ref) {
+	const { value } = useColorPicker();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? value,
+		className: require_cx.cx(require_color_picker.colorPicker().preview, className),
+		"data-slot": "color-picker-preview",
+		role: "img",
+		style: {
+			backgroundColor: value,
+			...style
+		}
+	});
+});
+const ColorPickerValue = (0, react.forwardRef)(function ColorPickerValue({ className, ...props }, ref) {
+	const { value } = useColorPicker();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		ref,
+		className: require_cx.cx(require_color_picker.colorPicker().value, className),
+		"data-slot": "color-picker-value",
+		children: props.children ?? value
+	});
+});
+const ColorPickerPortal = _base_ui_react_popover.Popover.Portal;
+const ColorPickerPositioner = (0, react.forwardRef)(function ColorPickerPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(require_color_picker.colorPicker().positioner, className),
+		"data-slot": "color-picker-positioner"
+	});
+});
+const ColorPickerPopup = (0, react.forwardRef)(function ColorPickerPopup({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Popup, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(require_color_picker.colorPicker().popup, className),
+		"data-jaci-component": "color-picker",
+		"data-slot": "color-picker-popup"
+	});
+});
+function updateFromPoint(event, setColor, color) {
+	const rect = event.currentTarget.getBoundingClientRect();
+	const saturation = Math.round(Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)) * 100);
+	const lightness = Math.round((1 - Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height))) * 100);
+	setColor({
+		...color,
+		lightness,
+		saturation
+	});
+}
+const ColorPickerPalette = (0, react.forwardRef)(function ColorPickerPalette({ className, onKeyDown, onPointerDown, style, ...props }, ref) {
+	const { color, setColor, value } = useColorPicker();
+	const background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.hue} 100% 50%))`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? "Color saturation and lightness",
+		"aria-valuemax": 100,
+		"aria-valuemin": 0,
+		"aria-valuenow": Math.round(color.saturation),
+		"aria-valuetext": value,
+		className: require_cx.cx(require_color_picker.colorPicker().palette, className),
+		"data-slot": "color-picker-palette",
+		onKeyDown: (event) => {
+			const step = event.shiftKey ? 10 : 1;
+			if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+				event.preventDefault();
+				setColor({
+					...color,
+					saturation: event.key === "ArrowLeft" ? Math.max(0, color.saturation - step) : event.key === "ArrowRight" ? Math.min(100, color.saturation + step) : color.saturation,
+					lightness: event.key === "ArrowDown" ? Math.max(0, color.lightness - step) : event.key === "ArrowUp" ? Math.min(100, color.lightness + step) : color.lightness
+				});
+			}
+			onKeyDown?.(event);
+		},
+		onPointerDown: (event) => {
+			updateFromPoint(event, setColor, color);
+			onPointerDown?.(event);
+		},
+		role: "slider",
+		style: {
+			background,
+			...style
+		},
+		tabIndex: props.tabIndex ?? 0
+	});
+});
+const ColorPickerHue = (0, react.forwardRef)(function ColorPickerHue({ className, onInput, ...props }, ref) {
+	const { color, setColor } = useColorPicker();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? "Hue",
+		className: require_cx.cx(require_color_picker.colorPicker().hue, className),
+		"data-slot": "color-picker-hue",
+		max: 360,
+		min: 0,
+		onInput: (event) => {
+			setColor({
+				...color,
+				hue: Number(event.currentTarget.value)
+			});
+			onInput?.(event);
+		},
+		step: 1,
+		type: "range",
+		value: color.hue
+	});
+});
+const ColorPickerAlpha = (0, react.forwardRef)(function ColorPickerAlpha({ className, onInput, style, ...props }, ref) {
+	const { color, setColor, showAlpha } = useColorPicker();
+	if (!showAlpha) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? "Opacity",
+		className: require_cx.cx(require_color_picker.colorPicker().alpha, className),
+		"data-slot": "color-picker-alpha",
+		max: 1,
+		min: 0,
+		onInput: (event) => {
+			setColor({
+				...color,
+				alpha: Number(event.currentTarget.value)
+			});
+			onInput?.(event);
+		},
+		step: .01,
+		style: {
+			...style,
+			background: `linear-gradient(to right, transparent, ${require_color_utils.formatColor({
+				...color,
+				alpha: 1
+			}, "rgb")})`
+		},
+		type: "range",
+		value: color.alpha
+	});
+});
+const ColorPickerSwatches = (0, react.forwardRef)(function ColorPickerSwatches({ children, className, ...props }, ref) {
+	const { swatches } = useColorPicker();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
+		...props,
+		ref,
+		className: require_cx.cx(require_color_picker.colorPicker().swatches, className),
+		"data-slot": "color-picker-swatches",
+		children: children ?? swatches.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerSwatch, { color }, color))
+	});
+});
+const ColorPickerSwatch = (0, react.forwardRef)(function ColorPickerSwatch({ children, className, color, style, ...props }, ref) {
+	const context = useColorPicker();
+	const parsed = require_color_utils.parseColor(color);
+	const selected = parsed && require_color_utils.formatColor(parsed, context.format, context.showAlpha) === context.value;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? color,
+		"aria-pressed": selected || void 0,
+		className: require_cx.cx(require_color_picker.colorPicker().swatch, className),
+		"data-selected": selected || void 0,
+		"data-slot": "color-picker-swatch",
+		onClick: (event) => {
+			if (parsed) context.setColor(parsed);
+			props.onClick?.(event);
+		},
+		style: {
+			backgroundColor: color,
+			...style
+		},
+		type: "button",
+		children
+	});
+});
+const ColorPickerInput = (0, react.forwardRef)(function ColorPickerInput({ className, onBlur, onKeyDown, ...props }, ref) {
+	const { format, setColor, showAlpha, value } = useColorPicker();
+	const [draft, setDraft] = (0, react.useState)(value);
+	const [invalid, setInvalid] = (0, react.useState)(false);
+	(0, react.useEffect)(() => setDraft(value), [value]);
+	const commit = () => {
+		const parsed = require_color_utils.parseColor(draft);
+		if (!parsed) {
+			setInvalid(true);
+			setDraft(value);
+			return;
+		}
+		setInvalid(false);
+		setColor(parsed);
+		setDraft(require_color_utils.formatColor(parsed, format, showAlpha));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? "Color value",
+		"aria-invalid": invalid || void 0,
+		className: require_cx.cx(require_color_picker.colorPicker().input, className),
+		"data-slot": "color-picker-input",
+		onBlur: (event) => {
+			commit();
+			onBlur?.(event);
+		},
+		onChange: (event) => {
+			setDraft(event.currentTarget.value);
+			setInvalid(false);
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				commit();
+			}
+			onKeyDown?.(event);
+		},
+		type: "text",
+		value: draft
+	});
+});
+const ColorPickerNativeInput = (0, react.forwardRef)(function ColorPickerNativeInput({ className, onInput, ...props }, ref) {
+	const { color, setColor, showAlpha } = useColorPicker();
+	const value = require_color_utils.formatColor({
+		...color,
+		alpha: 1
+	}, "hex");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		ref,
+		"aria-label": props["aria-label"] ?? "Choose a color",
+		className: require_cx.cx(require_color_picker.colorPicker().nativeInput, className),
+		"data-slot": "color-picker-native-input",
+		onInput: (event) => {
+			const parsed = require_color_utils.parseColor(event.currentTarget.value);
+			if (parsed) setColor({
+				...parsed,
+				alpha: showAlpha ? color.alpha : 1
+			});
+			onInput?.(event);
+		},
+		type: "color",
+		value: value.slice(0, 7)
+	});
+});
+const ColorPicker = {
+	Root: ColorPickerRoot,
+	Label: ColorPickerLabel,
+	Control: ColorPickerControl,
+	Trigger: ColorPickerTrigger,
+	Preview: ColorPickerPreview,
+	Value: ColorPickerValue,
+	Portal: ColorPickerPortal,
+	Positioner: ColorPickerPositioner,
+	Popup: ColorPickerPopup,
+	Palette: ColorPickerPalette,
+	Hue: ColorPickerHue,
+	Alpha: ColorPickerAlpha,
+	Swatches: ColorPickerSwatches,
+	Swatch: ColorPickerSwatch,
+	Input: ColorPickerInput,
+	NativeInput: ColorPickerNativeInput,
+	createHandle: _base_ui_react_popover.Popover.createHandle
+};
+//#endregion
+exports.ColorPicker = ColorPicker;
+exports.ColorPickerAlpha = ColorPickerAlpha;
+exports.ColorPickerControl = ColorPickerControl;
+exports.ColorPickerHue = ColorPickerHue;
+exports.ColorPickerInput = ColorPickerInput;
+exports.ColorPickerLabel = ColorPickerLabel;
+exports.ColorPickerNativeInput = ColorPickerNativeInput;
+exports.ColorPickerPalette = ColorPickerPalette;
+exports.ColorPickerPopup = ColorPickerPopup;
+exports.ColorPickerPortal = ColorPickerPortal;
+exports.ColorPickerPositioner = ColorPickerPositioner;
+exports.ColorPickerPreview = ColorPickerPreview;
+exports.ColorPickerRoot = ColorPickerRoot;
+exports.ColorPickerSwatch = ColorPickerSwatch;
+exports.ColorPickerSwatches = ColorPickerSwatches;
+exports.ColorPickerTrigger = ColorPickerTrigger;
+exports.ColorPickerValue = ColorPickerValue;
+
+//# sourceMappingURL=color-picker.cjs.map

package/dist/components/color-picker/color-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.cjs","names":["defaultColor","parseColor","formatColor","BasePopover","cx","colorPicker","withRecipeClassName"],"sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { createContext, forwardRef, useContext, useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, PointerEvent, ReactNode } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { colorPicker } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { defaultColor, formatColor, parseColor } from \"./color-utils\";\nimport type { ColorFormat, ColorModel } from \"./color-utils\";\n\nexport type { ColorFormat, ColorModel } from \"./color-utils\";\nexport { defaultColor, formatColor, parseColor } from \"./color-utils\";\n\ninterface ColorPickerContextValue {\n  color: ColorModel;\n  disabled: boolean;\n  format: ColorFormat;\n  inputId: string;\n  setColor: (color: ColorModel) => void;\n  showAlpha: boolean;\n  swatches: string[];\n  value: string;\n}\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | null>(null);\n\nfunction useColorPicker() {\n  const context = useContext(ColorPickerContext);\n  if (!context) throw new Error(\"ColorPicker parts must be rendered inside ColorPicker.Root.\");\n  return context;\n}\n\nexport interface ColorPickerRootProps extends Omit<BasePopoverRoot.Props, \"children\"> {\n  children?: ReactNode;\n  defaultValue?: string;\n  disabled?: boolean;\n  format?: ColorFormat;\n  id?: string;\n  name?: string;\n  onValueChange?: (value: string) => void;\n  showAlpha?: boolean;\n  swatches?: string[];\n  value?: string;\n}\n\nexport function ColorPickerRoot({\n  children,\n  defaultValue = \"#000000\",\n  disabled = false,\n  format = \"hex\",\n  id,\n  name,\n  onValueChange,\n  showAlpha = false,\n  swatches = [],\n  value: controlledValue,\n  ...popoverProps\n}: ColorPickerRootProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [uncontrolledColor, setUncontrolledColor] = useState<ColorModel>(() =>\n    defaultColor(defaultValue),\n  );\n  const parsedControlled = parseColor(controlledValue);\n  const color = parsedControlled ?? uncontrolledColor;\n  const formattedValue = formatColor(color, format, showAlpha);\n  const setColor = (nextColor: ColorModel) => {\n    setUncontrolledColor(nextColor);\n    onValueChange?.(formatColor(nextColor, format, showAlpha));\n  };\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        color,\n        disabled,\n        format,\n        inputId,\n        setColor,\n        showAlpha,\n        swatches,\n        value: formattedValue,\n      }}\n    >\n      <BasePopover.Root {...popoverProps}>\n        {children}\n        {name ? (\n          <input\n            aria-hidden=\"true\"\n            id={`${inputId}-value`}\n            name={name}\n            type=\"hidden\"\n            value={formattedValue}\n          />\n        ) : null}\n      </BasePopover.Root>\n    </ColorPickerContext.Provider>\n  );\n}\n\nexport interface ColorPickerLabelProps extends ComponentPropsWithoutRef<\"label\"> {}\nexport const ColorPickerLabel = forwardRef<HTMLLabelElement, ColorPickerLabelProps>(\n  function ColorPickerLabel({ children, className, htmlFor, ...props }, ref) {\n    const { inputId } = useColorPicker();\n    return (\n      <label\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().label, className)}\n        data-slot=\"color-picker-label\"\n        htmlFor={htmlFor ?? inputId}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type ColorPickerControlProps = ComponentPropsWithoutRef<\"div\">;\nexport const ColorPickerControl = forwardRef<HTMLDivElement, ColorPickerControlProps>(\n  function ColorPickerControl({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().control, className)}\n        data-slot=\"color-picker-control\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\nexport const ColorPickerTrigger = forwardRef<HTMLButtonElement, ColorPickerTriggerProps>(\n  function ColorPickerTrigger({ className, disabled, ...props }, ref) {\n    const context = useColorPicker();\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().trigger, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-trigger\"\n        disabled={disabled ?? context.disabled}\n        id={props.id ?? context.inputId}\n      />\n    );\n  },\n);\n\nexport type ColorPickerPreviewProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerPreview = forwardRef<HTMLSpanElement, ColorPickerPreviewProps>(\n  function ColorPickerPreview({ className, style, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? value}\n        className={cx(colorPicker().preview, className)}\n        data-slot=\"color-picker-preview\"\n        role=\"img\"\n        style={{ backgroundColor: value, ...style }}\n      />\n    );\n  },\n);\n\nexport type ColorPickerValueProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerValue = forwardRef<HTMLSpanElement, ColorPickerValueProps>(\n  function ColorPickerValue({ className, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().value, className)}\n        data-slot=\"color-picker-value\"\n      >\n        {props.children ?? value}\n      </span>\n    );\n  },\n);\n\nexport const ColorPickerPortal: typeof BasePopover.Portal = BasePopover.Portal;\nexport type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\nexport const ColorPickerPositioner = forwardRef<HTMLDivElement, ColorPickerPositionerProps>(\n  function ColorPickerPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().positioner, className)}\n        data-slot=\"color-picker-positioner\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\nexport const ColorPickerPopup = forwardRef<HTMLDivElement, ColorPickerPopupProps>(\n  function ColorPickerPopup({ className, ...props }, ref) {\n    return (\n      <BasePopover.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().popup, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-popup\"\n      />\n    );\n  },\n);\n\nfunction updateFromPoint(\n  event: PointerEvent<HTMLDivElement>,\n  setColor: (color: ColorModel) => void,\n  color: ColorModel,\n) {\n  const rect = event.currentTarget.getBoundingClientRect();\n  const saturation = Math.round(\n    Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)) * 100,\n  );\n  const lightness = Math.round(\n    (1 - Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height))) * 100,\n  );\n  setColor({ ...color, lightness, saturation });\n}\n\nexport type ColorPickerPaletteProps = Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">;\nexport const ColorPickerPalette = forwardRef<HTMLDivElement, ColorPickerPaletteProps>(\n  function ColorPickerPalette({ className, onKeyDown, onPointerDown, style, ...props }, ref) {\n    const { color, setColor, value } = useColorPicker();\n    const background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.hue} 100% 50%))`;\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Color saturation and lightness\"}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(color.saturation)}\n        aria-valuetext={value}\n        className={cx(colorPicker().palette, className)}\n        data-slot=\"color-picker-palette\"\n        onKeyDown={(event) => {\n          const step = event.shiftKey ? 10 : 1;\n          if (\n            event.key === \"ArrowLeft\" ||\n            event.key === \"ArrowRight\" ||\n            event.key === \"ArrowUp\" ||\n            event.key === \"ArrowDown\"\n          ) {\n            event.preventDefault();\n            setColor({\n              ...color,\n              saturation:\n                event.key === \"ArrowLeft\"\n                  ? Math.max(0, color.saturation - step)\n                  : event.key === \"ArrowRight\"\n                    ? Math.min(100, color.saturation + step)\n                    : color.saturation,\n              lightness:\n                event.key === \"ArrowDown\"\n                  ? Math.max(0, color.lightness - step)\n                  : event.key === \"ArrowUp\"\n                    ? Math.min(100, color.lightness + step)\n                    : color.lightness,\n            });\n          }\n          onKeyDown?.(event);\n        }}\n        onPointerDown={(event) => {\n          updateFromPoint(event, setColor, color);\n          onPointerDown?.(event);\n        }}\n        role=\"slider\"\n        style={{ background, ...style }}\n        tabIndex={props.tabIndex ?? 0}\n      />\n    );\n  },\n);\n\nexport type ColorPickerHueProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerHue = forwardRef<HTMLInputElement, ColorPickerHueProps>(\n  function ColorPickerHue({ className, onInput, ...props }, ref) {\n    const { color, setColor } = useColorPicker();\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Hue\"}\n        className={cx(colorPicker().hue, className)}\n        data-slot=\"color-picker-hue\"\n        max={360}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, hue: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={1}\n        type=\"range\"\n        value={color.hue}\n      />\n    );\n  },\n);\n\nexport type ColorPickerAlphaProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerAlpha = forwardRef<HTMLInputElement, ColorPickerAlphaProps>(\n  function ColorPickerAlpha({ className, onInput, style, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    if (!showAlpha) return null;\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Opacity\"}\n        className={cx(colorPicker().alpha, className)}\n        data-slot=\"color-picker-alpha\"\n        max={1}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, alpha: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={0.01}\n        style={{\n          ...style,\n          background: `linear-gradient(to right, transparent, ${formatColor({ ...color, alpha: 1 }, \"rgb\")})`,\n        }}\n        type=\"range\"\n        value={color.alpha}\n      />\n    );\n  },\n);\n\nexport type ColorPickerSwatchesProps = ComponentPropsWithoutRef<\"fieldset\">;\nexport const ColorPickerSwatches = forwardRef<HTMLFieldSetElement, ColorPickerSwatchesProps>(\n  function ColorPickerSwatches({ children, className, ...props }, ref) {\n    const { swatches } = useColorPicker();\n    return (\n      <fieldset\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().swatches, className)}\n        data-slot=\"color-picker-swatches\"\n      >\n        {children ?? swatches.map((color) => <ColorPickerSwatch color={color} key={color} />)}\n      </fieldset>\n    );\n  },\n);\n\nexport interface ColorPickerSwatchProps extends ComponentPropsWithoutRef<\"button\"> {\n  color: string;\n}\nexport const ColorPickerSwatch = forwardRef<HTMLButtonElement, ColorPickerSwatchProps>(\n  function ColorPickerSwatch({ children, className, color, style, ...props }, ref) {\n    const context = useColorPicker();\n    const parsed = parseColor(color);\n    const selected =\n      parsed && formatColor(parsed, context.format, context.showAlpha) === context.value;\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? color}\n        aria-pressed={selected || undefined}\n        className={cx(colorPicker().swatch, className)}\n        data-selected={selected || undefined}\n        data-slot=\"color-picker-swatch\"\n        onClick={(event) => {\n          if (parsed) context.setColor(parsed);\n          props.onClick?.(event);\n        }}\n        style={{ backgroundColor: color, ...style }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nexport type ColorPickerInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(\n  function ColorPickerInput({ className, onBlur, onKeyDown, ...props }, ref) {\n    const { format, setColor, showAlpha, value } = useColorPicker();\n    const [draft, setDraft] = useState(value);\n    const [invalid, setInvalid] = useState(false);\n    useEffect(() => setDraft(value), [value]);\n    const commit = () => {\n      const parsed = parseColor(draft);\n      if (!parsed) {\n        setInvalid(true);\n        setDraft(value);\n        return;\n      }\n      setInvalid(false);\n      setColor(parsed);\n      setDraft(formatColor(parsed, format, showAlpha));\n    };\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Color value\"}\n        aria-invalid={invalid || undefined}\n        className={cx(colorPicker().input, className)}\n        data-slot=\"color-picker-input\"\n        onBlur={(event) => {\n          commit();\n          onBlur?.(event);\n        }}\n        onChange={(event) => {\n          setDraft(event.currentTarget.value);\n          setInvalid(false);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commit();\n          }\n          onKeyDown?.(event);\n        }}\n        type=\"text\"\n        value={draft}\n      />\n    );\n  },\n);\n\nexport type ColorPickerNativeInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerNativeInput = forwardRef<HTMLInputElement, ColorPickerNativeInputProps>(\n  function ColorPickerNativeInput({ className, onInput, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    const value = formatColor({ ...color, alpha: 1 }, \"hex\");\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Choose a color\"}\n        className={cx(colorPicker().nativeInput, className)}\n        data-slot=\"color-picker-native-input\"\n        onInput={(event) => {\n          const parsed = parseColor(event.currentTarget.value);\n          if (parsed) setColor({ ...parsed, alpha: showAlpha ? color.alpha : 1 });\n          onInput?.(event);\n        }}\n        type=\"color\"\n        value={value.slice(0, 7)}\n      />\n    );\n  },\n);\n\nexport const ColorPicker = {\n  Root: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  Trigger: ColorPickerTrigger,\n  Preview: ColorPickerPreview,\n  Value: ColorPickerValue,\n  Portal: ColorPickerPortal,\n  Positioner: ColorPickerPositioner,\n  Popup: ColorPickerPopup,\n  Palette: ColorPickerPalette,\n  Hue: ColorPickerHue,\n  Alpha: ColorPickerAlpha,\n  Swatches: ColorPickerSwatches,\n  Swatch: ColorPickerSwatch,\n  Input: ColorPickerInput,\n  NativeInput: ColorPickerNativeInput,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":"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"}

package/dist/components/color-picker/color-picker.d.cts

@@ -0,0 +1,94 @@
+import { ColorFormat, ColorModel, defaultColor, formatColor, parseColor } from "./color-utils.cjs";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Popover, PopoverRoot } from "@base-ui/react/popover";
+//#region src/components/color-picker/color-picker.d.ts
+interface ColorPickerRootProps extends Omit<PopoverRoot.Props, "children"> {
+  children?: ReactNode;
+  defaultValue?: string;
+  disabled?: boolean;
+  format?: ColorFormat;
+  id?: string;
+  name?: string;
+  onValueChange?: (value: string) => void;
+  showAlpha?: boolean;
+  swatches?: string[];
+  value?: string;
+}
+declare function ColorPickerRoot({ children, defaultValue, disabled, format, id, name, onValueChange, showAlpha, swatches, value: controlledValue, ...popoverProps }: ColorPickerRootProps): import("react").JSX.Element;
+interface ColorPickerLabelProps extends ComponentPropsWithoutRef<"label"> {}
+declare const ColorPickerLabel: import("react").ForwardRefExoticComponent<ColorPickerLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+type ColorPickerControlProps = ComponentPropsWithoutRef<"div">;
+declare const ColorPickerControl: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type ColorPickerTriggerProps = ComponentPropsWithoutRef<typeof Popover.Trigger>;
+declare const ColorPickerTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/internals/types").NativeButtonProps & Omit<import("@base-ui/react/internals/types").WithBaseUIEvent<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, "style" | "defaultChecked" | "defaultValue" | "className" | "color"> & {
+  className?: string | ((state: import("@base-ui/react").PopoverTriggerState) => string | undefined) | undefined;
+  render?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, import("@base-ui/react").PopoverTriggerState> | undefined;
+  style?: import("react").CSSProperties | ((state: import("@base-ui/react").PopoverTriggerState) => React.CSSProperties | undefined) | undefined;
+} & {
+  nativeButton?: boolean | undefined;
+  handle?: Popover.Handle<unknown> | undefined;
+  payload?: unknown;
+  id?: string | undefined;
+  openOnHover?: boolean | undefined;
+  delay?: number | undefined;
+  closeDelay?: number | undefined;
+} & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type ColorPickerPreviewProps = ComponentPropsWithoutRef<"span">;
+declare const ColorPickerPreview: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type ColorPickerValueProps = ComponentPropsWithoutRef<"span">;
+declare const ColorPickerValue: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const ColorPickerPortal: typeof Popover.Portal;
+type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
+declare const ColorPickerPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof Popover.Popup>;
+declare const ColorPickerPopup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type ColorPickerPaletteProps = Omit<ComponentPropsWithoutRef<"div">, "onChange">;
+declare const ColorPickerPalette: import("react").ForwardRefExoticComponent<ColorPickerPaletteProps & import("react").RefAttributes<HTMLDivElement>>;
+type ColorPickerHueProps = Omit<ComponentPropsWithoutRef<"input">, "max" | "min" | "onChange" | "step" | "type" | "value">;
+declare const ColorPickerHue: import("react").ForwardRefExoticComponent<ColorPickerHueProps & import("react").RefAttributes<HTMLInputElement>>;
+type ColorPickerAlphaProps = Omit<ComponentPropsWithoutRef<"input">, "max" | "min" | "onChange" | "step" | "type" | "value">;
+declare const ColorPickerAlpha: import("react").ForwardRefExoticComponent<ColorPickerAlphaProps & import("react").RefAttributes<HTMLInputElement>>;
+type ColorPickerSwatchesProps = ComponentPropsWithoutRef<"fieldset">;
+declare const ColorPickerSwatches: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>>;
+interface ColorPickerSwatchProps extends ComponentPropsWithoutRef<"button"> {
+  color: string;
+}
+declare const ColorPickerSwatch: import("react").ForwardRefExoticComponent<ColorPickerSwatchProps & import("react").RefAttributes<HTMLButtonElement>>;
+type ColorPickerInputProps = Omit<ComponentPropsWithoutRef<"input">, "onChange" | "type" | "value">;
+declare const ColorPickerInput: import("react").ForwardRefExoticComponent<ColorPickerInputProps & import("react").RefAttributes<HTMLInputElement>>;
+type ColorPickerNativeInputProps = Omit<ComponentPropsWithoutRef<"input">, "onChange" | "type" | "value">;
+declare const ColorPickerNativeInput: import("react").ForwardRefExoticComponent<ColorPickerNativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const ColorPicker: {
+  Root: typeof ColorPickerRoot;
+  Label: import("react").ForwardRefExoticComponent<ColorPickerLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/internals/types").NativeButtonProps & Omit<import("@base-ui/react/internals/types").WithBaseUIEvent<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, "style" | "defaultChecked" | "defaultValue" | "className" | "color"> & {
+    className?: string | ((state: import("@base-ui/react").PopoverTriggerState) => string | undefined) | undefined;
+    render?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, import("@base-ui/react").PopoverTriggerState> | undefined;
+    style?: import("react").CSSProperties | ((state: import("@base-ui/react").PopoverTriggerState) => React.CSSProperties | undefined) | undefined;
+  } & {
+    nativeButton?: boolean | undefined;
+    handle?: Popover.Handle<unknown> | undefined;
+    payload?: unknown;
+    id?: string | undefined;
+    openOnHover?: boolean | undefined;
+    delay?: number | undefined;
+    closeDelay?: number | undefined;
+  } & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Preview: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Value: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Palette: import("react").ForwardRefExoticComponent<ColorPickerPaletteProps & import("react").RefAttributes<HTMLDivElement>>;
+  Hue: import("react").ForwardRefExoticComponent<ColorPickerHueProps & import("react").RefAttributes<HTMLInputElement>>;
+  Alpha: import("react").ForwardRefExoticComponent<ColorPickerAlphaProps & import("react").RefAttributes<HTMLInputElement>>;
+  Swatches: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>>;
+  Swatch: import("react").ForwardRefExoticComponent<ColorPickerSwatchProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Input: import("react").ForwardRefExoticComponent<ColorPickerInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  NativeInput: import("react").ForwardRefExoticComponent<ColorPickerNativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  createHandle: typeof Popover.createHandle;
+};
+//#endregion
+export { ColorPicker, ColorPickerAlpha, ColorPickerAlphaProps, ColorPickerControl, ColorPickerControlProps, ColorPickerHue, ColorPickerHueProps, ColorPickerInput, ColorPickerInputProps, ColorPickerLabel, ColorPickerLabelProps, ColorPickerNativeInput, ColorPickerNativeInputProps, ColorPickerPalette, ColorPickerPaletteProps, ColorPickerPopup, ColorPickerPopupProps, ColorPickerPortal, ColorPickerPositioner, ColorPickerPositionerProps, ColorPickerPreview, ColorPickerPreviewProps, ColorPickerRoot, ColorPickerRootProps, ColorPickerSwatch, ColorPickerSwatchProps, ColorPickerSwatches, ColorPickerSwatchesProps, ColorPickerTrigger, ColorPickerTriggerProps, ColorPickerValue, ColorPickerValueProps };
+//# sourceMappingURL=color-picker.d.cts.map