@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.9

package/es/ColorPicker/ColorPanel.mjs

@@ -0,0 +1,145 @@
+"use client";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { formatColor, parseColor } from "./color.mjs";
+import Slider from "../Slider/Slider.mjs";
+import { styles } from "./style.mjs";
+import ColorInputs from "./ColorInputs.mjs";
+import SaturationArea from "./SaturationArea.mjs";
+import Swatches from "./Swatches.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Pipette } from "lucide-react";
+//#region src/ColorPicker/ColorPanel.tsx
+const hasEyeDropper = () => typeof window !== "undefined" && "EyeDropper" in window;
+const ColorPanel = ({ alpha, format, hsva, labels, onApply, onCommit, onFormatChange, onUpdate, original, presets, recent }) => {
+	const hex = formatColor(hsva, alpha);
+	const opaque = formatColor(hsva, false);
+	const sliderClassNames = (track) => ({
+		indicator: stylex.props(styles.hidden).className,
+		thumb: stylex.props(styles.sliderThumb).className,
+		track: stylex.props(styles[track]).className
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.panel),
+		children: [
+			/* @__PURE__ */ jsx(SaturationArea, {
+				color: opaque,
+				hue: hsva.h,
+				label: labels.saturation,
+				saturation: hsva.s,
+				value: hsva.v,
+				onChange: (s, v) => onUpdate({
+					...hsva,
+					s,
+					v
+				}),
+				onChangeComplete: (s, v) => onCommit({
+					...hsva,
+					s,
+					v
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				...stylex.props(styles.controls),
+				children: [
+					hasEyeDropper() && /* @__PURE__ */ jsx("button", {
+						"aria-label": labels.eyeDropper,
+						type: "button",
+						...stylex.props(focusRing.info, styles.eyeDropper),
+						onClick: async () => {
+							const result = await new window.EyeDropper().open().catch(() => null);
+							if (result) onApply({
+								...parseColor(result.sRGBHex, hsva.h),
+								a: hsva.a
+							});
+						},
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: Pipette,
+							size: 14
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						...stylex.props(styles.sliders),
+						children: [/* @__PURE__ */ jsx(Slider, {
+							"aria-label": labels.hue,
+							classNames: sliderClassNames("hueTrack"),
+							max: 360,
+							min: 0,
+							value: hsva.h,
+							styles: { track: { "--lobe-color-picker-thumb": `hsl(${hsva.h} 100% 50%)` } },
+							onChange: (h) => onUpdate({
+								...hsva,
+								h
+							}),
+							onChangeComplete: (h) => onCommit({
+								...hsva,
+								h
+							})
+						}), alpha && /* @__PURE__ */ jsx(Slider, {
+							"aria-label": labels.alpha,
+							classNames: sliderClassNames("alphaTrack"),
+							max: 100,
+							min: 0,
+							value: Math.round(hsva.a * 100),
+							styles: { track: {
+								"--lobe-color-picker-alpha": opaque,
+								"--lobe-color-picker-thumb": hex
+							} },
+							onChange: (a) => onUpdate({
+								...hsva,
+								a: a / 100
+							}),
+							onChangeComplete: (a) => onCommit({
+								...hsva,
+								a: a / 100
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						...stylex.props(styles.compare),
+						style: { height: alpha ? 30 : 28 },
+						children: [/* @__PURE__ */ jsx("button", {
+							"aria-label": labels.original,
+							title: labels.original,
+							type: "button",
+							...stylex.props(focusRing.info, styles.compareHalf, styles.compareRestore),
+							style: { background: original },
+							onClick: () => onApply(parseColor(original, hsva.h))
+						}), /* @__PURE__ */ jsx("span", {
+							...stylex.props(styles.compareHalf),
+							style: { background: hex }
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(ColorInputs, {
+				alpha,
+				alphaLabel: labels.alpha,
+				format,
+				formatLabel: labels.format,
+				hsva,
+				onCommit: onApply,
+				onFormatChange
+			}),
+			/* @__PURE__ */ jsx(Swatches, {
+				current: hex,
+				labels: {
+					presets: labels.presets,
+					recent: labels.recent,
+					swatches: labels.swatches
+				},
+				presets,
+				recent,
+				onPick: (color) => onApply({
+					...parseColor(color, hsva.h),
+					a: parseColor(color).a
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ColorPanel as default };
+
+//# sourceMappingURL=ColorPanel.mjs.map

package/es/ColorPicker/ColorPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPanel.mjs","names":[],"sources":["../../src/ColorPicker/ColorPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Pipette } from 'lucide-react';\nimport type { CSSProperties } from 'react';\n\nimport Icon from '@/Icon';\nimport { Slider } from '@/Slider';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { type ColorFormat, formatColor, type Hsva, parseColor } from './color';\nimport ColorInputs from './ColorInputs';\nimport SaturationArea from './SaturationArea';\nimport { styles } from './style';\nimport Swatches from './Swatches';\n\nconst hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;\n\ntype EyeDropperConstructor = new () => { open: () => Promise<{ sRGBHex: string }> };\n\nexport interface ColorPanelLabels {\n  alpha: string;\n  eyeDropper: string;\n  format: string;\n  hue: string;\n  original: string;\n  presets: string;\n  recent: string;\n  saturation: string;\n  swatches: string;\n}\n\nexport interface ColorPanelProps {\n  alpha: boolean;\n  format: ColorFormat;\n  hsva: Hsva;\n  labels: ColorPanelLabels;\n  onApply: (next: Hsva) => void;\n  onCommit: (next: Hsva) => void;\n  onFormatChange: (format: ColorFormat) => void;\n  onUpdate: (next: Hsva) => void;\n  original: string;\n  presets?: string[];\n  recent: boolean;\n}\n\nconst ColorPanel = ({\n  alpha,\n  format,\n  hsva,\n  labels,\n  onApply,\n  onCommit,\n  onFormatChange,\n  onUpdate,\n  original,\n  presets,\n  recent,\n}: ColorPanelProps) => {\n  const hex = formatColor(hsva, alpha);\n  const opaque = formatColor(hsva, false);\n  const sliderClassNames = (track: keyof typeof styles) => ({\n    indicator: stylex.props(styles.hidden).className,\n    thumb: stylex.props(styles.sliderThumb).className,\n    track: stylex.props(styles[track]).className,\n  });\n\n  return (\n    <div {...stylex.props(styles.panel)}>\n      <SaturationArea\n        color={opaque}\n        hue={hsva.h}\n        label={labels.saturation}\n        saturation={hsva.s}\n        value={hsva.v}\n        onChange={(s, v) => onUpdate({ ...hsva, s, v })}\n        onChangeComplete={(s, v) => onCommit({ ...hsva, s, v })}\n      />\n      <div {...stylex.props(styles.controls)}>\n        {hasEyeDropper() && (\n          <button\n            aria-label={labels.eyeDropper}\n            type=\"button\"\n            {...stylex.props(focusRing.info, styles.eyeDropper)}\n            onClick={async () => {\n              const dropper = new (\n                window as unknown as { EyeDropper: EyeDropperConstructor }\n              ).EyeDropper();\n              const result = await dropper.open().catch(() => null);\n              if (result) onApply({ ...parseColor(result.sRGBHex, hsva.h), a: hsva.a });\n            }}\n          >\n            <Icon icon={Pipette} size={14} />\n          </button>\n        )}\n        <div {...stylex.props(styles.sliders)}>\n          <Slider\n            aria-label={labels.hue}\n            classNames={sliderClassNames('hueTrack')}\n            max={360}\n            min={0}\n            value={hsva.h}\n            styles={{\n              track: { '--lobe-color-picker-thumb': `hsl(${hsva.h} 100% 50%)` } as CSSProperties,\n            }}\n            onChange={(h) => onUpdate({ ...hsva, h })}\n            onChangeComplete={(h) => onCommit({ ...hsva, h })}\n          />\n          {alpha && (\n            <Slider\n              aria-label={labels.alpha}\n              classNames={sliderClassNames('alphaTrack')}\n              max={100}\n              min={0}\n              value={Math.round(hsva.a * 100)}\n              styles={{\n                track: {\n                  '--lobe-color-picker-alpha': opaque,\n                  '--lobe-color-picker-thumb': hex,\n                } as CSSProperties,\n              }}\n              onChange={(a) => onUpdate({ ...hsva, a: a / 100 })}\n              onChangeComplete={(a) => onCommit({ ...hsva, a: a / 100 })}\n            />\n          )}\n        </div>\n        <div {...stylex.props(styles.compare)} style={{ height: alpha ? 30 : 28 }}>\n          <button\n            aria-label={labels.original}\n            title={labels.original}\n            type=\"button\"\n            {...stylex.props(focusRing.info, styles.compareHalf, styles.compareRestore)}\n            style={{ background: original }}\n            onClick={() => onApply(parseColor(original, hsva.h))}\n          />\n          <span {...stylex.props(styles.compareHalf)} style={{ background: hex }} />\n        </div>\n      </div>\n      <ColorInputs\n        alpha={alpha}\n        alphaLabel={labels.alpha}\n        format={format}\n        formatLabel={labels.format}\n        hsva={hsva}\n        onCommit={onApply}\n        onFormatChange={onFormatChange}\n      />\n      <Swatches\n        current={hex}\n        labels={{ presets: labels.presets, recent: labels.recent, swatches: labels.swatches }}\n        presets={presets}\n        recent={recent}\n        onPick={(color) => onApply({ ...parseColor(color, hsva.h), a: parseColor(color).a })}\n      />\n    </div>\n  );\n};\n\nexport default ColorPanel;\n"],"mappings":"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"}

package/es/ColorPicker/ColorPicker.mjs

@@ -1,232 +1,95 @@
 "use client";
-import { styleProps } from "../styles/stylex/props.mjs";
-import { focusRing } from "../styles/stylex/focusRing.mjs";
-import Icon from "../Icon/Icon.mjs";
-import { useThemeMode } from "../styles/theme/scope.mjs";
 import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
-import { inputRootStyles } from "../Input/style.mjs";
-import Input_default from "../Input/Input.mjs";
-import InputNumber_default from "../Input/InputNumber.mjs";
 import colorPicker_default from "../i18n/resources/en/colorPicker.mjs";
 import { panelStyles } from "../internal/panelStyles.mjs";
 import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../Popover/atoms.mjs";
-import Slider from "../Slider/Slider.mjs";
-import { formatColor, normalizeHexInput, parseColor } from "./color.mjs";
-import { styles } from "./style.mjs";
-import SaturationArea from "./SaturationArea.mjs";
-import { createElement, memo, useEffect, useRef, useState } from "react";
+import { formatColor, parseColor } from "./color.mjs";
+import { pushRecentColor } from "./recent.mjs";
+import ColorPanel from "./ColorPanel.mjs";
+import ColorTrigger from "./Trigger.mjs";
+import { memo, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as stylex from "@stylexjs/stylex";
-import { Pipette } from "lucide-react";
 //#region src/ColorPicker/ColorPicker.tsx
 const DEFAULT_COLOR = "#000000";
-const hasEyeDropper = () => typeof window !== "undefined" && "EyeDropper" in window;
-const ColorPicker = memo(({ alpha = false, children, className, defaultValue = DEFAULT_COLOR, disabled, onChange, onChangeComplete, presets, showText, size = "middle", style, value }) => {
+const ColorPicker = memo(({ alpha = false, children, className, defaultFormat = "hex", defaultValue = DEFAULT_COLOR, disabled, onChange, onChangeComplete, presets, recent = true, showText, size = "middle", style, trigger = showText ? "field" : "swatch", value }) => {
 	const { t } = useTranslation(colorPicker_default);
-	const { isDarkMode } = useThemeMode();
 	const [hex, setHex] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange,
 		value
 	});
 	const [hsva, setHsva] = useState(() => parseColor(hex));
-	const [draft, setDraft] = useState(hex.slice(1).toUpperCase());
+	const [format, setFormat] = useState(defaultFormat);
+	const [original, setOriginal] = useState(hex);
 	const popupRef = useRef(null);
 	useEffect(() => {
+		if (!hex) return;
 		setHsva((current) => formatColor(current, alpha) === hex.toLowerCase() ? current : parseColor(hex, current.h));
-		setDraft(hex.slice(1).toUpperCase());
 	}, [hex, alpha]);
 	const update = (next) => {
 		setHsva(next);
 		setHex(formatColor(next, alpha));
 	};
-	const commit = (next) => onChangeComplete?.(formatColor(next, alpha));
+	const commit = (next) => {
+		const nextHex = formatColor(next, alpha);
+		if (recent) pushRecentColor(nextHex);
+		onChangeComplete?.(nextHex);
+	};
 	const apply = (next) => {
 		update(next);
 		commit(next);
 	};
-	const commitDraft = () => {
-		const normalized = normalizeHexInput(draft);
-		if (!normalized) return setDraft(hex.slice(1).toUpperCase());
-		apply(parseColor(normalized, hsva.h));
-	};
-	const swatch = (dimension) => /* @__PURE__ */ jsx("span", {
-		...stylex.props(styles.swatch),
-		style: {
-			height: dimension,
-			width: dimension
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		onOpenChange: (open) => {
+			if (open) setOriginal(hex);
 		},
-		children: /* @__PURE__ */ jsx("span", {
-			...stylex.props(styles.swatchFill),
-			style: { background: hex }
-		})
-	});
-	const trigger = children ?? (showText ? /* @__PURE__ */ jsxs("button", {
-		"aria-label": t("colorPicker.trigger"),
-		disabled,
-		type: "button",
-		...styleProps([...inputRootStyles({
-			size,
-			variant: isDarkMode ? "filled" : "outlined"
-		}), styles.textTrigger], className, {
-			cursor: "pointer",
-			...style
-		}),
-		children: [swatch(18), /* @__PURE__ */ jsx("span", {
-			style: { fontFamily: "var(--lobe-font-family-code, monospace)" },
-			children: hex.toUpperCase()
-		})]
-	}) : /* @__PURE__ */ jsx("button", {
-		"aria-label": t("colorPicker.trigger"),
-		disabled,
-		type: "button",
-		...styleProps([focusRing.info, styles.swatchButton], className, style),
-		children: swatch(24)
-	}));
-	return /* @__PURE__ */ jsxs(PopoverRoot, { children: [/* @__PURE__ */ jsx(PopoverTriggerElement, { children: trigger }), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
-		placement: "bottomLeft",
-		children: /* @__PURE__ */ jsx(PopoverPopup, {
-			ref: popupRef,
-			xstyle: panelStyles.popup,
-			initialFocus: () => popupRef.current?.querySelector("[role=\"slider\"]") ?? true,
-			children: /* @__PURE__ */ jsxs("div", {
-				...stylex.props(styles.panel),
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						...stylex.props(styles.summary),
-						children: [
-							swatch(40),
-							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-								...stylex.props(styles.value),
-								children: hex.toUpperCase()
-							}), /* @__PURE__ */ jsx("div", {
-								...stylex.props(panelStyles.label),
-								children: alpha ? `HEX · ${Math.round(hsva.a * 100)}%` : "HEX"
-							})] }),
-							hasEyeDropper() && /* @__PURE__ */ jsx("button", {
-								"aria-label": t("colorPicker.eyeDropper"),
-								...stylex.props(panelStyles.nav, styles.eyeDropper),
-								type: "button",
-								onClick: async () => {
-									const result = await new window.EyeDropper().open().catch(() => null);
-									if (result) apply({
-										...parseColor(result.sRGBHex, hsva.h),
-										a: hsva.a
-									});
-								},
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: Pipette,
-									size: 14
-								})
-							})
-						]
-					}),
-					/* @__PURE__ */ jsx(SaturationArea, {
-						hue: hsva.h,
-						label: t("colorPicker.saturation"),
-						saturation: hsva.s,
-						value: hsva.v,
-						onChange: (s, v) => update({
-							...hsva,
-							s,
-							v
-						}),
-						onChangeComplete: (s, v) => commit({
-							...hsva,
-							s,
-							v
-						})
-					}),
-					/* @__PURE__ */ jsx(Slider, {
-						"aria-label": t("colorPicker.hue"),
-						max: 360,
-						min: 0,
-						value: hsva.h,
-						classNames: {
-							indicator: stylex.props(styles.hidden).className,
-							thumb: stylex.props(styles.sliderThumb).className,
-							track: stylex.props(styles.hueTrack).className
-						},
-						onChange: (h) => update({
-							...hsva,
-							h
-						}),
-						onChangeComplete: (h) => commit({
-							...hsva,
-							h
-						})
-					}),
-					alpha && /* @__PURE__ */ jsx(Slider, {
-						"aria-label": t("colorPicker.alpha"),
-						max: 100,
-						min: 0,
-						value: Math.round(hsva.a * 100),
-						classNames: {
-							indicator: stylex.props(styles.hidden).className,
-							thumb: stylex.props(styles.sliderThumb).className,
-							track: stylex.props(styles.alphaTrack).className
-						},
-						styles: { track: { "--lobe-color-picker-alpha": formatColor(hsva, false) } },
-						onChange: (a) => update({
-							...hsva,
-							a: a / 100
-						}),
-						onChangeComplete: (a) => commit({
-							...hsva,
-							a: a / 100
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						...stylex.props(styles.hexRow),
-						children: [/* @__PURE__ */ jsx(Input_default, {
-							"aria-label": "HEX",
-							className: stylex.props(styles.hexField).className,
-							prefix: /* @__PURE__ */ jsx("span", {
-								...stylex.props(panelStyles.label),
-								children: "HEX"
-							}),
-							value: draft,
-							variant: "filled",
-							onBlur: commitDraft,
-							onChange: (event) => setDraft(event.target.value),
-							onPressEnter: commitDraft
-						}), alpha && /* @__PURE__ */ jsx(InputNumber_default, {
-							"aria-label": t("colorPicker.alpha"),
-							className: stylex.props(styles.hexField, styles.alphaField).className,
-							controls: false,
-							max: 100,
-							min: 0,
-							suffix: "%",
-							value: Math.round(hsva.a * 100),
-							variant: "filled",
-							onChange: (a) => a !== null && apply({
-								...hsva,
-								a: a / 100
-							})
-						})]
-					}),
-					presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
-						"aria-label": t("colorPicker.presets"),
-						...stylex.props(styles.presets),
-						role: "group",
-						children: presets.map((color) => /* @__PURE__ */ createElement("button", {
-							"aria-label": color,
-							"aria-pressed": color.toLowerCase() === hex.slice(0, 7).toLowerCase(),
-							...stylex.props(focusRing.info, styles.preset),
-							key: color,
-							style: { background: color },
-							type: "button",
-							onClick: () => apply({
-								...parseColor(color, hsva.h),
-								a: parseColor(color).a
-							})
-						}))
-					})
-				]
+		children: [/* @__PURE__ */ jsx(PopoverTriggerElement, {
+			nativeButton: true,
+			disabled,
+			children: children ?? /* @__PURE__ */ jsx(ColorTrigger, {
+				alpha: alpha && hex ? hsva.a : void 0,
+				className,
+				disabled,
+				emptyLabel: t("colorPicker.empty"),
+				hex,
+				label: t("colorPicker.trigger"),
+				size,
+				style,
+				variant: trigger
 			})
-		})
-	}) })] });
+		}), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+			placement: "bottomLeft",
+			children: /* @__PURE__ */ jsx(PopoverPopup, {
+				ref: popupRef,
+				xstyle: panelStyles.popup,
+				initialFocus: () => popupRef.current?.querySelector("[role=\"slider\"]") ?? true,
+				children: /* @__PURE__ */ jsx(ColorPanel, {
+					alpha,
+					format,
+					hsva,
+					original,
+					presets,
+					recent,
+					labels: {
+						alpha: t("colorPicker.alpha"),
+						eyeDropper: t("colorPicker.eyeDropper"),
+						format: t("colorPicker.format"),
+						hue: t("colorPicker.hue"),
+						original: t("colorPicker.original"),
+						presets: t("colorPicker.presets"),
+						recent: t("colorPicker.recent"),
+						saturation: t("colorPicker.saturation"),
+						swatches: t("colorPicker.swatches")
+					},
+					onApply: apply,
+					onCommit: commit,
+					onFormatChange: setFormat,
+					onUpdate: update
+				})
+			})
+		}) })]
+	});
 });
 ColorPicker.displayName = "ColorPicker";
 //#endregion

package/es/ColorPicker/ColorPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.mjs","names":["colorPickerMessages","Input","InputNumber"],"sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Pipette } from 'lucide-react';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport colorPickerMessages from '@/i18n/resources/en/colorPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { Input, InputNumber } from '@/Input';\nimport { inputRootStyles } from '@/Input/style';\nimport { panelStyles } from '@/internal/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/Popover';\nimport { Slider } from '@/Slider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { formatColor, type Hsva, normalizeHexInput, parseColor } from './color';\nimport SaturationArea from './SaturationArea';\nimport { styles } from './style';\nimport type { ColorPickerProps } from './type';\n\nconst DEFAULT_COLOR = '#000000';\n\nconst hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;\n\nconst ColorPicker = memo<ColorPickerProps>(\n  ({\n    alpha = false,\n    children,\n    className,\n    defaultValue = DEFAULT_COLOR,\n    disabled,\n    onChange,\n    onChangeComplete,\n    presets,\n    showText,\n    size = 'middle',\n    style,\n    value,\n  }) => {\n    const { t } = useTranslation(colorPickerMessages);\n    const { isDarkMode } = useThemeMode();\n    const [hex, setHex] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [hsva, setHsva] = useState<Hsva>(() => parseColor(hex));\n    const [draft, setDraft] = useState(hex.slice(1).toUpperCase());\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      setHsva((current) =>\n        formatColor(current, alpha) === hex.toLowerCase() ? current : parseColor(hex, current.h),\n      );\n      setDraft(hex.slice(1).toUpperCase());\n    }, [hex, alpha]);\n\n    const update = (next: Hsva) => {\n      setHsva(next);\n      setHex(formatColor(next, alpha));\n    };\n    const commit = (next: Hsva) => onChangeComplete?.(formatColor(next, alpha));\n    const apply = (next: Hsva) => {\n      update(next);\n      commit(next);\n    };\n\n    const commitDraft = () => {\n      const normalized = normalizeHexInput(draft);\n      if (!normalized) return setDraft(hex.slice(1).toUpperCase());\n      apply(parseColor(normalized, hsva.h));\n    };\n\n    const swatch = (dimension: number) => (\n      <span {...stylex.props(styles.swatch)} style={{ height: dimension, width: dimension }}>\n        <span {...stylex.props(styles.swatchFill)} style={{ background: hex }} />\n      </span>\n    );\n\n    const trigger =\n      children ??\n      (showText ? (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          type=\"button\"\n          {...styleProps(\n            [\n              ...inputRootStyles({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n              styles.textTrigger,\n            ],\n            className,\n            { cursor: 'pointer', ...style },\n          )}\n        >\n          {swatch(18)}\n          <span style={{ fontFamily: 'var(--lobe-font-family-code, monospace)' }}>\n            {hex.toUpperCase()}\n          </span>\n        </button>\n      ) : (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          type=\"button\"\n          {...styleProps([focusRing.info, styles.swatchButton], className, style)}\n        >\n          {swatch(24)}\n        </button>\n      ));\n\n    return (\n      <PopoverRoot>\n        <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n        <PopoverPortal>\n          <PopoverPositioner placement=\"bottomLeft\">\n            <PopoverPopup\n              ref={popupRef}\n              xstyle={panelStyles.popup}\n              initialFocus={() =>\n                popupRef.current?.querySelector<HTMLElement>('[role=\"slider\"]') ?? true\n              }\n            >\n              <div {...stylex.props(styles.panel)}>\n                <div {...stylex.props(styles.summary)}>\n                  {swatch(40)}\n                  <div>\n                    <div {...stylex.props(styles.value)}>{hex.toUpperCase()}</div>\n                    <div {...stylex.props(panelStyles.label)}>\n                      {alpha ? `HEX · ${Math.round(hsva.a * 100)}%` : 'HEX'}\n                    </div>\n                  </div>\n                  {hasEyeDropper() && (\n                    <button\n                      aria-label={t('colorPicker.eyeDropper')}\n                      {...stylex.props(panelStyles.nav, styles.eyeDropper)}\n                      type=\"button\"\n                      onClick={async () => {\n                        const dropper = new (\n                          window as unknown as {\n                            EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };\n                          }\n                        ).EyeDropper();\n                        const result = await dropper.open().catch(() => null);\n                        if (result) apply({ ...parseColor(result.sRGBHex, hsva.h), a: hsva.a });\n                      }}\n                    >\n                      <Icon icon={Pipette} size={14} />\n                    </button>\n                  )}\n                </div>\n                <SaturationArea\n                  hue={hsva.h}\n                  label={t('colorPicker.saturation')}\n                  saturation={hsva.s}\n                  value={hsva.v}\n                  onChange={(s, v) => update({ ...hsva, s, v })}\n                  onChangeComplete={(s, v) => commit({ ...hsva, s, v })}\n                />\n                <Slider\n                  aria-label={t('colorPicker.hue')}\n                  max={360}\n                  min={0}\n                  value={hsva.h}\n                  classNames={{\n                    indicator: stylex.props(styles.hidden).className,\n                    thumb: stylex.props(styles.sliderThumb).className,\n                    track: stylex.props(styles.hueTrack).className,\n                  }}\n                  onChange={(h) => update({ ...hsva, h })}\n                  onChangeComplete={(h) => commit({ ...hsva, h })}\n                />\n                {alpha && (\n                  <Slider\n                    aria-label={t('colorPicker.alpha')}\n                    max={100}\n                    min={0}\n                    value={Math.round(hsva.a * 100)}\n                    classNames={{\n                      indicator: stylex.props(styles.hidden).className,\n                      thumb: stylex.props(styles.sliderThumb).className,\n                      track: stylex.props(styles.alphaTrack).className,\n                    }}\n                    styles={{\n                      track: {\n                        '--lobe-color-picker-alpha': formatColor(hsva, false),\n                      } as CSSProperties,\n                    }}\n                    onChange={(a) => update({ ...hsva, a: a / 100 })}\n                    onChangeComplete={(a) => commit({ ...hsva, a: a / 100 })}\n                  />\n                )}\n                <div {...stylex.props(styles.hexRow)}>\n                  <Input\n                    aria-label=\"HEX\"\n                    className={stylex.props(styles.hexField).className}\n                    prefix={<span {...stylex.props(panelStyles.label)}>HEX</span>}\n                    value={draft}\n                    variant=\"filled\"\n                    onBlur={commitDraft}\n                    onChange={(event) => setDraft(event.target.value)}\n                    onPressEnter={commitDraft}\n                  />\n                  {alpha && (\n                    <InputNumber\n                      aria-label={t('colorPicker.alpha')}\n                      className={stylex.props(styles.hexField, styles.alphaField).className}\n                      controls={false}\n                      max={100}\n                      min={0}\n                      suffix=\"%\"\n                      value={Math.round(hsva.a * 100)}\n                      variant=\"filled\"\n                      onChange={(a) => a !== null && apply({ ...hsva, a: a / 100 })}\n                    />\n                  )}\n                </div>\n                {presets && presets.length > 0 && (\n                  <div\n                    aria-label={t('colorPicker.presets')}\n                    {...stylex.props(styles.presets)}\n                    role=\"group\"\n                  >\n                    {presets.map((color) => (\n                      <button\n                        aria-label={color}\n                        aria-pressed={color.toLowerCase() === hex.slice(0, 7).toLowerCase()}\n                        {...stylex.props(focusRing.info, styles.preset)}\n                        key={color}\n                        style={{ background: color }}\n                        type=\"button\"\n                        onClick={() =>\n                          apply({ ...parseColor(color, hsva.h), a: parseColor(color).a })\n                        }\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            </PopoverPopup>\n          </PopoverPositioner>\n        </PopoverPortal>\n      </PopoverRoot>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.mjs","names":["colorPickerMessages"],"sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport colorPickerMessages from '@/i18n/resources/en/colorPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { panelStyles } from '@/internal/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/Popover';\n\nimport { type ColorFormat, formatColor, type Hsva, parseColor } from './color';\nimport ColorPanel from './ColorPanel';\nimport { pushRecentColor } from './recent';\nimport ColorTrigger from './Trigger';\nimport type { ColorPickerProps } from './type';\n\nconst DEFAULT_COLOR = '#000000';\n\nconst ColorPicker = memo<ColorPickerProps>(\n  ({\n    alpha = false,\n    children,\n    className,\n    defaultFormat = 'hex',\n    defaultValue = DEFAULT_COLOR,\n    disabled,\n    onChange,\n    onChangeComplete,\n    presets,\n    recent = true,\n    showText,\n    size = 'middle',\n    style,\n    trigger = showText ? 'field' : 'swatch',\n    value,\n  }) => {\n    const { t } = useTranslation(colorPickerMessages);\n    const [hex, setHex] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [hsva, setHsva] = useState<Hsva>(() => parseColor(hex));\n    const [format, setFormat] = useState<ColorFormat>(defaultFormat);\n    const [original, setOriginal] = useState(hex);\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!hex) return;\n      setHsva((current) =>\n        formatColor(current, alpha) === hex.toLowerCase() ? current : parseColor(hex, current.h),\n      );\n    }, [hex, alpha]);\n\n    const update = (next: Hsva) => {\n      setHsva(next);\n      setHex(formatColor(next, alpha));\n    };\n    const commit = (next: Hsva) => {\n      const nextHex = formatColor(next, alpha);\n      if (recent) pushRecentColor(nextHex);\n      onChangeComplete?.(nextHex);\n    };\n    const apply = (next: Hsva) => {\n      update(next);\n      commit(next);\n    };\n\n    return (\n      <PopoverRoot\n        onOpenChange={(open) => {\n          if (open) setOriginal(hex);\n        }}\n      >\n        <PopoverTriggerElement nativeButton disabled={disabled}>\n          {children ?? (\n            <ColorTrigger\n              alpha={alpha && hex ? hsva.a : undefined}\n              className={className}\n              disabled={disabled}\n              emptyLabel={t('colorPicker.empty')}\n              hex={hex}\n              label={t('colorPicker.trigger')}\n              size={size}\n              style={style}\n              variant={trigger}\n            />\n          )}\n        </PopoverTriggerElement>\n        <PopoverPortal>\n          <PopoverPositioner placement=\"bottomLeft\">\n            <PopoverPopup\n              ref={popupRef}\n              xstyle={panelStyles.popup}\n              initialFocus={() =>\n                popupRef.current?.querySelector<HTMLElement>('[role=\"slider\"]') ?? true\n              }\n            >\n              <ColorPanel\n                alpha={alpha}\n                format={format}\n                hsva={hsva}\n                original={original}\n                presets={presets}\n                recent={recent}\n                labels={{\n                  alpha: t('colorPicker.alpha'),\n                  eyeDropper: t('colorPicker.eyeDropper'),\n                  format: t('colorPicker.format'),\n                  hue: t('colorPicker.hue'),\n                  original: t('colorPicker.original'),\n                  presets: t('colorPicker.presets'),\n                  recent: t('colorPicker.recent'),\n                  saturation: t('colorPicker.saturation'),\n                  swatches: t('colorPicker.swatches'),\n                }}\n                onApply={apply}\n                onCommit={commit}\n                onFormatChange={setFormat}\n                onUpdate={update}\n              />\n            </PopoverPopup>\n          </PopoverPositioner>\n        </PopoverPortal>\n      </PopoverRoot>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,gBAAgB;AAEtB,MAAM,cAAc,MACjB,EACC,QAAQ,OACR,UACA,WACA,gBAAgB,OAChB,eAAe,eACf,UACA,UACA,kBACA,SACA,SAAS,MACT,UACA,OAAO,UACP,OACA,UAAU,WAAW,UAAU,UAC/B,YACI;CACJ,MAAM,EAAE,MAAM,eAAeA,mBAAmB;CAChD,MAAM,CAAC,KAAK,UAAU,mBAA2B,cAAc;EAC7D;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,eAAqB,WAAW,GAAG,CAAC;CAC5D,MAAM,CAAC,QAAQ,aAAa,SAAsB,aAAa;CAC/D,MAAM,CAAC,UAAU,eAAe,SAAS,GAAG;CAC5C,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,KAAK;EACV,SAAS,YACP,YAAY,SAAS,KAAK,MAAM,IAAI,YAAY,IAAI,UAAU,WAAW,KAAK,QAAQ,CAAC,CACzF;CACF,GAAG,CAAC,KAAK,KAAK,CAAC;CAEf,MAAM,UAAU,SAAe;EAC7B,QAAQ,IAAI;EACZ,OAAO,YAAY,MAAM,KAAK,CAAC;CACjC;CACA,MAAM,UAAU,SAAe;EAC7B,MAAM,UAAU,YAAY,MAAM,KAAK;EACvC,IAAI,QAAQ,gBAAgB,OAAO;EACnC,mBAAmB,OAAO;CAC5B;CACA,MAAM,SAAS,SAAe;EAC5B,OAAO,IAAI;EACX,OAAO,IAAI;CACb;CAEA,OACE,qBAAC,aAAD;EACE,eAAe,SAAS;GACtB,IAAI,MAAM,YAAY,GAAG;EAC3B;EAHF,UAAA,CAKE,oBAAC,uBAAD;GAAuB,cAAA;GAAuB;GAC3C,UAAA,YACC,oBAAC,cAAD;IACE,OAAO,SAAS,MAAM,KAAK,IAAI,KAAA;IACpB;IACD;IACV,YAAY,EAAE,mBAAmB;IAC5B;IACL,OAAO,EAAE,qBAAqB;IACxB;IACC;IACP,SAAS;GACV,CAAA;EAEkB,CAAA,GACvB,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;GAAmB,WAAU;GAC3B,UAAA,oBAAC,cAAD;IACE,KAAK;IACL,QAAQ,YAAY;IACpB,oBACE,SAAS,SAAS,cAA2B,mBAAiB,KAAK;IAGrE,UAAA,oBAAC,YAAD;KACS;KACC;KACF;KACI;KACD;KACD;KACR,QAAQ;MACN,OAAO,EAAE,mBAAmB;MAC5B,YAAY,EAAE,wBAAwB;MACtC,QAAQ,EAAE,oBAAoB;MAC9B,KAAK,EAAE,iBAAiB;MACxB,UAAU,EAAE,sBAAsB;MAClC,SAAS,EAAE,qBAAqB;MAChC,QAAQ,EAAE,oBAAoB;MAC9B,YAAY,EAAE,wBAAwB;MACtC,UAAU,EAAE,sBAAsB;KACpC;KACA,SAAS;KACT,UAAU;KACV,gBAAgB;KAChB,UAAU;IACX,CAAA;GACW,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAEjB,CACF;AAEA,YAAY,cAAc"}

package/es/ColorPicker/SaturationArea.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 //#region src/ColorPicker/SaturationArea.tsx
 const clamp = (n) => Math.min(1, Math.max(0, Math.round(n * 100) / 100));
-const SaturationArea = memo(({ hue, label, onChange, onChangeComplete, saturation, value }) => {
+const SaturationArea = memo(({ color, hue, label, onChange, onChangeComplete, saturation, value }) => {
 	const areaRef = useRef(null);
 	const fromPointer = (event) => {
 		const rect = areaRef.current.getBoundingClientRect();
@@ -53,6 +53,7 @@ const SaturationArea = memo(({ hue, label, onChange, onChangeComplete, saturatio
 		children: /* @__PURE__ */ jsx("span", {
 			...stylex.props(styles.thumb),
 			style: {
+				background: color,
 				left: `${saturation * 100}%`,
 				top: `${(1 - value) * 100}%`
 			}

package/es/ColorPicker/SaturationArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SaturationArea.mjs","names":[],"sources":["../../src/ColorPicker/SaturationArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type PointerEvent, useRef } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { styles } from './style';\n\nexport interface SaturationAreaProps {\n  hue: number;\n  label: string;\n  onChange: (saturation: number, value: number) => void;\n  onChangeComplete: (saturation: number, value: number) => void;\n  saturation: number;\n  value: number;\n}\n\nconst clamp = (n: number) => Math.min(1, Math.max(0, Math.round(n * 100) / 100));\n\nconst SaturationArea = memo<SaturationAreaProps>(\n  ({ hue, label, onChange, onChangeComplete, saturation, value }) => {\n    const areaRef = useRef<HTMLDivElement>(null);\n\n    const fromPointer = (event: PointerEvent<HTMLDivElement>): [number, number] => {\n      const rect = areaRef.current!.getBoundingClientRect();\n      const next: [number, number] = [\n        clamp((event.clientX - rect.left) / rect.width),\n        clamp(1 - (event.clientY - rect.top) / rect.height),\n      ];\n      onChange(...next);\n      return next;\n    };\n\n    return (\n      <div\n        aria-label={label}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(saturation * 100)}\n        aria-valuetext={`Saturation ${Math.round(saturation * 100)}%, brightness ${Math.round(value * 100)}%`}\n        {...stylex.props(focusRing.info, styles.saturation)}\n        ref={areaRef}\n        role=\"slider\"\n        tabIndex={0}\n        style={{\n          background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue} 100% 50%))`,\n        }}\n        onKeyDown={(event) => {\n          const delta = event.shiftKey ? 0.1 : 0.01;\n          const moves: Record<string, [number, number]> = {\n            ArrowDown: [0, -delta],\n            ArrowLeft: [-delta, 0],\n            ArrowRight: [delta, 0],\n            ArrowUp: [0, delta],\n          };\n          const move = moves[event.key];\n          if (!move) return;\n          event.preventDefault();\n          const next: [number, number] = [clamp(saturation + move[0]), clamp(value + move[1])];\n          onChange(...next);\n          onChangeComplete(...next);\n        }}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          fromPointer(event);\n        }}\n        onPointerMove={(event) => {\n          if (event.currentTarget.hasPointerCapture(event.pointerId)) fromPointer(event);\n        }}\n        onPointerUp={(event) => {\n          event.currentTarget.releasePointerCapture(event.pointerId);\n          onChangeComplete(...fromPointer(event));\n        }}\n      >\n        <span\n          {...stylex.props(styles.thumb)}\n          style={{ left: `${saturation * 100}%`, top: `${(1 - value) * 100}%` }}\n        />\n      </div>\n    );\n  },\n);\n\nSaturationArea.displayName = 'ColorPickerSaturationArea';\n\nexport default SaturationArea;\n"],"mappings":";;;;;;;AAcA,MAAM,SAAS,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;AAC/E,MAAM,iBAAiB,MAA2B,EAChD,KACA,OACA,UACA,kBACA,YACA,YACI;CACJ,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,eAAe,UAA0D;EAC7E,MAAM,OAAO,QAAQ,QAAS,sBAAsB;EACpD,MAAM,OAAyB,CAAC,OAAO,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,GAAG,MAAM,KAAK,MAAM,UAAU,KAAK,OAAO,KAAK,MAAM,CAAC;EACpI,SAAS,GAAG,IAAI;EAChB,OAAO;CACT;CACA,OAAO,oBAAC,OAAD;EAAK,cAAY;EAAO,iBAAe;EAAK,iBAAe;EAAG,iBAAe,KAAK,MAAM,aAAa,GAAG;EAAG,kBAAgB,cAAc,KAAK,MAAM,aAAa,GAAG,EAAE,gBAAgB,KAAK,MAAM,QAAQ,GAAG,EAAE;EAAI,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,UAAU;EAAG,KAAK;EAAS,MAAK;EAAS,UAAU;EAAG,OAAO,EAC5T,YAAY,mFAAmF,IAAI,aACrG;EAAG,YAAW,UAAS;GACrB,MAAM,QAAQ,MAAM,WAAW,KAAM;GAOrC,MAAM,OAAO;IALX,WAAW,CAAC,GAAG,CAAC,KAAK;IACrB,WAAW,CAAC,CAAC,OAAO,CAAC;IACrB,YAAY,CAAC,OAAO,CAAC;IACrB,SAAS,CAAC,GAAG,KAAK;GAEH,EAAE,MAAM;GACzB,IAAI,CAAC,MAAM;GACX,MAAM,eAAe;GACrB,MAAM,OAAyB,CAAC,MAAM,aAAa,KAAK,EAAE,GAAG,MAAM,QAAQ,KAAK,EAAE,CAAC;GACnF,SAAS,GAAG,IAAI;GAChB,iBAAiB,GAAG,IAAI;EAC1B;EAAG,gBAAe,UAAS;GACzB,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACrD,YAAY,KAAK;EACnB;EAAG,gBAAe,UAAS;GACzB,IAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG,YAAY,KAAK;EAC/E;EAAG,cAAa,UAAS;GACvB,MAAM,cAAc,sBAAsB,MAAM,SAAS;GACzD,iBAAiB,GAAG,YAAY,KAAK,CAAC;EACxC;EACM,UAAA,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,KAAK;GAAG,OAAO;IAC/C,MAAM,GAAG,aAAa,IAAI;IAC1B,KAAK,IAAI,IAAI,SAAS,IAAI;GAC5B;EAAI,CAAA;CACG,CAAA;AACX,CAAC;AACD,eAAe,cAAc"}
+{"version":3,"file":"SaturationArea.mjs","names":[],"sources":["../../src/ColorPicker/SaturationArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type PointerEvent, useRef } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { styles } from './style';\n\nexport interface SaturationAreaProps {\n  color: string;\n  hue: number;\n  label: string;\n  onChange: (saturation: number, value: number) => void;\n  onChangeComplete: (saturation: number, value: number) => void;\n  saturation: number;\n  value: number;\n}\n\nconst clamp = (n: number) => Math.min(1, Math.max(0, Math.round(n * 100) / 100));\n\nconst SaturationArea = memo<SaturationAreaProps>(\n  ({ color, hue, label, onChange, onChangeComplete, saturation, value }) => {\n    const areaRef = useRef<HTMLDivElement>(null);\n\n    const fromPointer = (event: PointerEvent<HTMLDivElement>): [number, number] => {\n      const rect = areaRef.current!.getBoundingClientRect();\n      const next: [number, number] = [\n        clamp((event.clientX - rect.left) / rect.width),\n        clamp(1 - (event.clientY - rect.top) / rect.height),\n      ];\n      onChange(...next);\n      return next;\n    };\n\n    return (\n      <div\n        aria-label={label}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(saturation * 100)}\n        aria-valuetext={`Saturation ${Math.round(saturation * 100)}%, brightness ${Math.round(value * 100)}%`}\n        {...stylex.props(focusRing.info, styles.saturation)}\n        ref={areaRef}\n        role=\"slider\"\n        tabIndex={0}\n        style={{\n          background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue} 100% 50%))`,\n        }}\n        onKeyDown={(event) => {\n          const delta = event.shiftKey ? 0.1 : 0.01;\n          const moves: Record<string, [number, number]> = {\n            ArrowDown: [0, -delta],\n            ArrowLeft: [-delta, 0],\n            ArrowRight: [delta, 0],\n            ArrowUp: [0, delta],\n          };\n          const move = moves[event.key];\n          if (!move) return;\n          event.preventDefault();\n          const next: [number, number] = [clamp(saturation + move[0]), clamp(value + move[1])];\n          onChange(...next);\n          onChangeComplete(...next);\n        }}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          fromPointer(event);\n        }}\n        onPointerMove={(event) => {\n          if (event.currentTarget.hasPointerCapture(event.pointerId)) fromPointer(event);\n        }}\n        onPointerUp={(event) => {\n          event.currentTarget.releasePointerCapture(event.pointerId);\n          onChangeComplete(...fromPointer(event));\n        }}\n      >\n        <span\n          {...stylex.props(styles.thumb)}\n          style={{ background: color, left: `${saturation * 100}%`, top: `${(1 - value) * 100}%` }}\n        />\n      </div>\n    );\n  },\n);\n\nSaturationArea.displayName = 'ColorPickerSaturationArea';\n\nexport default SaturationArea;\n"],"mappings":";;;;;;;AAeA,MAAM,SAAS,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;AAC/E,MAAM,iBAAiB,MAA2B,EAChD,OACA,KACA,OACA,UACA,kBACA,YACA,YACI;CACJ,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,eAAe,UAA0D;EAC7E,MAAM,OAAO,QAAQ,QAAS,sBAAsB;EACpD,MAAM,OAAyB,CAAC,OAAO,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,GAAG,MAAM,KAAK,MAAM,UAAU,KAAK,OAAO,KAAK,MAAM,CAAC;EACpI,SAAS,GAAG,IAAI;EAChB,OAAO;CACT;CACA,OAAO,oBAAC,OAAD;EAAK,cAAY;EAAO,iBAAe;EAAK,iBAAe;EAAG,iBAAe,KAAK,MAAM,aAAa,GAAG;EAAG,kBAAgB,cAAc,KAAK,MAAM,aAAa,GAAG,EAAE,gBAAgB,KAAK,MAAM,QAAQ,GAAG,EAAE;EAAI,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,UAAU;EAAG,KAAK;EAAS,MAAK;EAAS,UAAU;EAAG,OAAO,EAC5T,YAAY,mFAAmF,IAAI,aACrG;EAAG,YAAW,UAAS;GACrB,MAAM,QAAQ,MAAM,WAAW,KAAM;GAOrC,MAAM,OAAO;IALX,WAAW,CAAC,GAAG,CAAC,KAAK;IACrB,WAAW,CAAC,CAAC,OAAO,CAAC;IACrB,YAAY,CAAC,OAAO,CAAC;IACrB,SAAS,CAAC,GAAG,KAAK;GAEH,EAAE,MAAM;GACzB,IAAI,CAAC,MAAM;GACX,MAAM,eAAe;GACrB,MAAM,OAAyB,CAAC,MAAM,aAAa,KAAK,EAAE,GAAG,MAAM,QAAQ,KAAK,EAAE,CAAC;GACnF,SAAS,GAAG,IAAI;GAChB,iBAAiB,GAAG,IAAI;EAC1B;EAAG,gBAAe,UAAS;GACzB,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACrD,YAAY,KAAK;EACnB;EAAG,gBAAe,UAAS;GACzB,IAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG,YAAY,KAAK;EAC/E;EAAG,cAAa,UAAS;GACvB,MAAM,cAAc,sBAAsB,MAAM,SAAS;GACzD,iBAAiB,GAAG,YAAY,KAAK,CAAC;EACxC;EACM,UAAA,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,KAAK;GAAG,OAAO;IAC/C,YAAY;IACZ,MAAM,GAAG,aAAa,IAAI;IAC1B,KAAK,IAAI,IAAI,SAAS,IAAI;GAC5B;EAAI,CAAA;CACG,CAAA;AACX,CAAC;AACD,eAAe,cAAc"}

package/es/ColorPicker/Swatch.mjs

@@ -0,0 +1,24 @@
+import { swatchStyles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/ColorPicker/Swatch.tsx
+const Swatch = ({ color, radius, size }) => {
+	const boxStyle = {
+		borderRadius: radius,
+		height: size,
+		width: size
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		...stylex.props(swatchStyles.box),
+		style: boxStyle,
+		children: [/* @__PURE__ */ jsx("span", {
+			...stylex.props(swatchStyles.fill),
+			style: { background: color || "transparent" }
+		}), !color && /* @__PURE__ */ jsx("span", { ...stylex.props(swatchStyles.slash) })]
+	});
+};
+//#endregion
+export { Swatch as default };
+
+//# sourceMappingURL=Swatch.mjs.map

package/es/ColorPicker/Swatch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.mjs","names":[],"sources":["../../src/ColorPicker/Swatch.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\n\nimport { swatchStyles } from './style';\n\nexport interface SwatchProps {\n  color?: string;\n  radius: number | string;\n  size: number;\n}\n\nconst Swatch = ({ color, radius, size }: SwatchProps) => {\n  const boxStyle: CSSProperties = { borderRadius: radius, height: size, width: size };\n  return (\n    <span aria-hidden {...stylex.props(swatchStyles.box)} style={boxStyle}>\n      <span {...stylex.props(swatchStyles.fill)} style={{ background: color || 'transparent' }} />\n      {!color && <span {...stylex.props(swatchStyles.slash)} />}\n    </span>\n  );\n};\n\nexport default Swatch;\n"],"mappings":";;;;AAQA,MAAM,UAAU,EACd,OACA,QACA,WACiB;CACjB,MAAM,WAA0B;EAC9B,cAAc;EACd,QAAQ;EACR,OAAO;CACT;CACA,OAAO,qBAAC,QAAD;EAAM,eAAA;EAAY,GAAI,OAAO,MAAM,aAAa,GAAG;EAAG,OAAO;EAA7D,UAAA,CACH,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,aAAa,IAAI;GAAG,OAAO,EAClD,YAAY,SAAS,cACvB;EAAI,CAAA,GACD,CAAC,SAAS,oBAAC,QAAD,EAAM,GAAI,OAAO,MAAM,aAAa,KAAK,EAAI,CAAA,CACpD;;AACV"}

package/es/ColorPicker/Swatches.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { styles, swatchStyles } from "./style.mjs";
+import { useRecentColors } from "./recent.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/ColorPicker/Swatches.tsx
+const Swatches = ({ current, labels, onPick, presets = [], recent }) => {
+	const recentColors = useRecentColors();
+	const [tab, setTab] = useState("presets");
+	const shownRecent = recent ? recentColors : [];
+	const hasPresets = presets.length > 0;
+	const hasRecent = shownRecent.length > 0;
+	if (!hasPresets && !hasRecent) return null;
+	const tabbed = hasPresets && hasRecent;
+	const active = tabbed ? tab : hasPresets ? "presets" : "recent";
+	const colors = active === "recent" ? shownRecent : presets;
+	const currentKey = current.toLowerCase();
+	return /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.swatchSection),
+		children: [tabbed ? /* @__PURE__ */ jsx("div", {
+			"aria-label": labels.swatches,
+			role: "tablist",
+			...stylex.props(styles.swatchHeader),
+			children: ["presets", "recent"].map((item) => /* @__PURE__ */ jsx("button", {
+				"aria-selected": active === item,
+				role: "tab",
+				type: "button",
+				...stylex.props(focusRing.info, styles.swatchTab),
+				onClick: () => setTab(item),
+				children: labels[item]
+			}, item))
+		}) : /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.swatchHeader),
+			children: /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.swatchLabel),
+				children: labels[active]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-label": labels[active],
+			role: "group",
+			...stylex.props(styles.swatchGrid),
+			children: colors.map((color) => {
+				const key = color.toLowerCase();
+				const selected = key === currentKey || key === currentKey.slice(0, 7);
+				return /* @__PURE__ */ jsx("button", {
+					"aria-label": color,
+					"aria-pressed": selected,
+					type: "button",
+					...stylex.props(focusRing.info, styles.swatchItem),
+					style: { color },
+					onClick: () => onPick(color),
+					children: /* @__PURE__ */ jsx("span", {
+						...stylex.props(swatchStyles.fill),
+						style: { background: color }
+					})
+				}, color);
+			})
+		})]
+	});
+};
+//#endregion
+export { Swatches as default };
+
+//# sourceMappingURL=Swatches.mjs.map