@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

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";
-import useControlledState from "use-merge-value";
 //#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';\nimport useControlledState from 'use-merge-value';\n\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

package/es/ColorPicker/Swatches.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.mjs","names":[],"sources":["../../src/ColorPicker/Swatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { useRecentColors } from './recent';\nimport { styles, swatchStyles } from './style';\n\ntype Tab = 'presets' | 'recent';\n\nexport interface SwatchesProps {\n  current: string;\n  labels: { presets: string; recent: string; swatches: string };\n  onPick: (color: string) => void;\n  presets?: string[];\n  recent: boolean;\n}\n\nconst Swatches = ({ current, labels, onPick, presets = [], recent }: SwatchesProps) => {\n  const recentColors = useRecentColors();\n  const [tab, setTab] = useState<Tab>('presets');\n\n  const shownRecent = recent ? recentColors : [];\n  const hasPresets = presets.length > 0;\n  const hasRecent = shownRecent.length > 0;\n  if (!hasPresets && !hasRecent) return null;\n\n  const tabbed = hasPresets && hasRecent;\n  const active: Tab = tabbed ? tab : hasPresets ? 'presets' : 'recent';\n  const colors = active === 'recent' ? shownRecent : presets;\n  const currentKey = current.toLowerCase();\n\n  return (\n    <div {...stylex.props(styles.swatchSection)}>\n      {tabbed ? (\n        <div aria-label={labels.swatches} role=\"tablist\" {...stylex.props(styles.swatchHeader)}>\n          {(['presets', 'recent'] as const).map((item) => (\n            <button\n              aria-selected={active === item}\n              key={item}\n              role=\"tab\"\n              type=\"button\"\n              {...stylex.props(focusRing.info, styles.swatchTab)}\n              onClick={() => setTab(item)}\n            >\n              {labels[item]}\n            </button>\n          ))}\n        </div>\n      ) : (\n        <div {...stylex.props(styles.swatchHeader)}>\n          <span {...stylex.props(styles.swatchLabel)}>{labels[active]}</span>\n        </div>\n      )}\n      <div aria-label={labels[active]} role=\"group\" {...stylex.props(styles.swatchGrid)}>\n        {colors.map((color) => {\n          const key = color.toLowerCase();\n          const selected = key === currentKey || key === currentKey.slice(0, 7);\n          return (\n            <button\n              aria-label={color}\n              aria-pressed={selected}\n              key={color}\n              type=\"button\"\n              {...stylex.props(focusRing.info, styles.swatchItem)}\n              style={{ color }}\n              onClick={() => onPick(color)}\n            >\n              <span {...stylex.props(swatchStyles.fill)} style={{ background: color }} />\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Swatches;\n"],"mappings":";;;;;;;;AAmBA,MAAM,YAAY,EAChB,SACA,QACA,QACA,UAAU,CAAC,GACX,aACmB;CACnB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,KAAK,UAAU,SAAc,SAAS;CAC7C,MAAM,cAAc,SAAS,eAAe,CAAC;CAC7C,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,YAAY,YAAY,SAAS;CACvC,IAAI,CAAC,cAAc,CAAC,WAAW,OAAO;CACtC,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAc,SAAS,MAAM,aAAa,YAAY;CAC5D,MAAM,SAAS,WAAW,WAAW,cAAc;CACnD,MAAM,aAAa,QAAQ,YAAY;CACvC,OAAO,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,aAAa;EAA1C,UAAA,CACF,SAAS,oBAAC,OAAD;GAAK,cAAY,OAAO;GAAU,MAAK;GAAU,GAAI,OAAO,MAAM,OAAO,YAAY;GACzF,UAAA,CAAC,WAAW,QAAQ,CAAC,CAAW,KAAI,SAAQ,oBAAC,UAAD;IAAQ,iBAAe,WAAW;IAAiB,MAAK;IAAM,MAAK;IAAS,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,SAAS;IAAG,eAAe,OAAO,IAAI;IACnM,UAAA,OAAO;GACF,GAFiF,IAEjF,CAAC;EACR,CAAA,IAAI,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,YAAY;GAChD,UAAA,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,WAAW;IAAI,UAAA,OAAO;GAAc,CAAA;EAC/D,CAAA,GACP,oBAAC,OAAD;GAAK,cAAY,OAAO;GAAS,MAAK;GAAQ,GAAI,OAAO,MAAM,OAAO,UAAU;GAC7E,UAAA,OAAO,KAAI,UAAS;IACrB,MAAM,MAAM,MAAM,YAAY;IAC9B,MAAM,WAAW,QAAQ,cAAc,QAAQ,WAAW,MAAM,GAAG,CAAC;IACpE,OAAO,oBAAC,UAAD;KAAQ,cAAY;KAAO,gBAAc;KAAsB,MAAK;KAAS,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,UAAU;KAAG,OAAO,EAC9I,MACF;KAAG,eAAe,OAAO,KAAK;KACxB,UAAA,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAM,aAAa,IAAI;MAAG,OAAO,EACpD,YAAY,MACd;KAAI,CAAA;IACM,GANmD,KAMnD;GACd,CAAC;EACI,CAAA,CACF;;AACT"}

package/es/ColorPicker/Trigger.mjs

@@ -0,0 +1,112 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { inputRootStyles } from "../Input/style.mjs";
+import { triggerStyles } from "./style.mjs";
+import Swatch from "./Swatch.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronDown } from "lucide-react";
+//#region src/ColorPicker/Trigger.tsx
+const SWATCH_TILE = {
+	large: 32,
+	middle: 28,
+	small: 24
+};
+const SWATCH_FIELD = {
+	large: 20,
+	middle: 16,
+	small: 14
+};
+const SWATCH_CHIP = {
+	large: 26,
+	middle: 20,
+	small: 16
+};
+const fieldSize = {
+	large: triggerStyles.fieldLarge,
+	middle: triggerStyles.fieldMiddle,
+	small: triggerStyles.fieldSmall
+};
+const chipSize = {
+	large: triggerStyles.chipLarge,
+	middle: triggerStyles.chipMiddle,
+	small: triggerStyles.chipSmall
+};
+const ColorTrigger = ({ alpha, className, emptyLabel, hex, label, size, style, variant, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const empty = !hex;
+	const common = {
+		"aria-label": label,
+		"type": "button",
+		...rest
+	};
+	if (variant === "swatch") {
+		const tile = SWATCH_TILE[size];
+		return /* @__PURE__ */ jsx("button", {
+			...common,
+			...styleProps([focusRing.info, triggerStyles.swatch], className, {
+				height: tile,
+				width: tile,
+				...style
+			}),
+			children: /* @__PURE__ */ jsx(Swatch, {
+				color: hex,
+				radius: 8,
+				size: tile
+			})
+		});
+	}
+	const text = empty ? /* @__PURE__ */ jsx("span", {
+		...stylex.props(triggerStyles.empty),
+		children: emptyLabel
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		...stylex.props(triggerStyles.text),
+		children: hex.slice(0, 7).toUpperCase()
+	}), alpha !== void 0 && /* @__PURE__ */ jsxs("span", {
+		...stylex.props(triggerStyles.text, triggerStyles.alpha),
+		children: [Math.round(alpha * 100), "%"]
+	})] });
+	if (variant === "chip") return /* @__PURE__ */ jsxs("button", {
+		...common,
+		...styleProps([
+			focusRing.info,
+			triggerStyles.chip,
+			chipSize[size]
+		], className, style),
+		children: [/* @__PURE__ */ jsx(Swatch, {
+			color: hex,
+			radius: "50%",
+			size: SWATCH_CHIP[size]
+		}), text]
+	});
+	const fieldSwatch = SWATCH_FIELD[size];
+	return /* @__PURE__ */ jsxs("button", {
+		...common,
+		...styleProps([
+			...inputRootStyles({
+				size,
+				variant: isDarkMode ? "filled" : "outlined"
+			}),
+			triggerStyles.field,
+			fieldSize[size]
+		], className, style),
+		children: [
+			/* @__PURE__ */ jsx(Swatch, {
+				color: hex,
+				radius: Math.round(fieldSwatch / 4),
+				size: fieldSwatch
+			}),
+			text,
+			/* @__PURE__ */ jsx(ChevronDown, {
+				...stylex.props(triggerStyles.caret),
+				size: 14
+			})
+		]
+	});
+};
+//#endregion
+export { ColorTrigger as default };
+
+//# sourceMappingURL=Trigger.mjs.map

package/es/ColorPicker/Trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.mjs","names":[],"sources":["../../src/ColorPicker/Trigger.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronDown } from 'lucide-react';\nimport type { ComponentPropsWithRef } from 'react';\n\nimport { inputRootStyles } from '@/Input/style';\nimport type { InputSize } from '@/Input/type';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { triggerStyles } from './style';\nimport Swatch from './Swatch';\nimport type { ColorPickerTrigger } from './type';\n\nconst SWATCH_TILE: Record<InputSize, number> = { large: 32, middle: 28, small: 24 };\nconst SWATCH_FIELD: Record<InputSize, number> = { large: 20, middle: 16, small: 14 };\nconst SWATCH_CHIP: Record<InputSize, number> = { large: 26, middle: 20, small: 16 };\n\nconst fieldSize = {\n  large: triggerStyles.fieldLarge,\n  middle: triggerStyles.fieldMiddle,\n  small: triggerStyles.fieldSmall,\n};\nconst chipSize = {\n  large: triggerStyles.chipLarge,\n  middle: triggerStyles.chipMiddle,\n  small: triggerStyles.chipSmall,\n};\n\nexport interface ColorTriggerProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {\n  alpha?: number;\n  emptyLabel: string;\n  hex: string;\n  label: string;\n  size: InputSize;\n  variant: ColorPickerTrigger;\n}\n\nconst ColorTrigger = ({\n  alpha,\n  className,\n  emptyLabel,\n  hex,\n  label,\n  size,\n  style,\n  variant,\n  ...rest\n}: ColorTriggerProps) => {\n  const { isDarkMode } = useThemeMode();\n  const empty = !hex;\n  const common = { 'aria-label': label, 'type': 'button' as const, ...rest };\n\n  if (variant === 'swatch') {\n    const tile = SWATCH_TILE[size];\n    return (\n      <button\n        {...common}\n        {...styleProps([focusRing.info, triggerStyles.swatch], className, {\n          height: tile,\n          width: tile,\n          ...style,\n        })}\n      >\n        <Swatch color={hex} radius={8} size={tile} />\n      </button>\n    );\n  }\n\n  const text = empty ? (\n    <span {...stylex.props(triggerStyles.empty)}>{emptyLabel}</span>\n  ) : (\n    <>\n      <span {...stylex.props(triggerStyles.text)}>{hex.slice(0, 7).toUpperCase()}</span>\n      {alpha !== undefined && (\n        <span {...stylex.props(triggerStyles.text, triggerStyles.alpha)}>\n          {Math.round(alpha * 100)}%\n        </span>\n      )}\n    </>\n  );\n\n  if (variant === 'chip') {\n    return (\n      <button\n        {...common}\n        {...styleProps([focusRing.info, triggerStyles.chip, chipSize[size]], className, style)}\n      >\n        <Swatch color={hex} radius=\"50%\" size={SWATCH_CHIP[size]} />\n        {text}\n      </button>\n    );\n  }\n\n  const fieldSwatch = SWATCH_FIELD[size];\n  return (\n    <button\n      {...common}\n      {...styleProps(\n        [\n          ...inputRootStyles({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n          triggerStyles.field,\n          fieldSize[size],\n        ],\n        className,\n        style,\n      )}\n    >\n      <Swatch color={hex} radius={Math.round(fieldSwatch / 4)} size={fieldSwatch} />\n      {text}\n      <ChevronDown {...stylex.props(triggerStyles.caret)} size={14} />\n    </button>\n  );\n};\n\nexport default ColorTrigger;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,cAAyC;CAC7C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,eAA0C;CAC9C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,cAAyC;CAC7C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,YAAY;CAChB,OAAO,cAAc;CACrB,QAAQ,cAAc;CACtB,OAAO,cAAc;AACvB;AACA,MAAM,WAAW;CACf,OAAO,cAAc;CACrB,QAAQ,cAAc;CACtB,OAAO,cAAc;AACvB;AASA,MAAM,gBAAgB,EACpB,OACA,WACA,YACA,KACA,OACA,MACA,OACA,SACA,GAAG,WACoB;CACvB,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,QAAQ,CAAC;CACf,MAAM,SAAS;EACb,cAAc;EACd,QAAQ;EACR,GAAG;CACL;CACA,IAAI,YAAY,UAAU;EACxB,MAAM,OAAO,YAAY;EACzB,OAAO,oBAAC,UAAD;GAAQ,GAAI;GAAQ,GAAI,WAAW,CAAC,UAAU,MAAM,cAAc,MAAM,GAAG,WAAW;IAC3F,QAAQ;IACR,OAAO;IACP,GAAG;GACL,CAAC;GACG,UAAA,oBAAC,QAAD;IAAQ,OAAO;IAAK,QAAQ;IAAG,MAAM;GAAO,CAAA;EACtC,CAAA;CACZ;CACA,MAAM,OAAO,QAAQ,oBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,cAAc,KAAK;EAAI,UAAA;CAAiB,CAAA,IAAI,qBAAA,UAAA,EAAA,UAAA,CACpF,oBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,cAAc,IAAI;EAAI,UAAA,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;CAAQ,CAAA,GAChF,UAAU,KAAA,KAAa,qBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,cAAc,MAAM,cAAc,KAAK;EAA9D,UAAA,CACnB,KAAK,MAAM,QAAQ,GAAG,GAAE,GACrB;CACR,CAAA,CAAA,EAAA,CAAA;CACJ,IAAI,YAAY,QACd,OAAO,qBAAC,UAAD;EAAQ,GAAI;EAAQ,GAAI,WAAW;GAAC,UAAU;GAAM,cAAc;GAAM,SAAS;EAAK,GAAG,WAAW,KAAK;EAAzG,UAAA,CACH,oBAAC,QAAD;GAAQ,OAAO;GAAK,QAAO;GAAM,MAAM,YAAY;EAAQ,CAAA,GAC1D,IACK;;CAEZ,MAAM,cAAc,aAAa;CACjC,OAAO,qBAAC,UAAD;EAAQ,GAAI;EAAQ,GAAI,WAAW;GAAC,GAAG,gBAAgB;IAC5D;IACA,SAAS,aAAa,WAAW;GACnC,CAAC;GAAG,cAAc;GAAO,UAAU;EAAK,GAAG,WAAW,KAAK;EAHpD,UAAA;GAIH,oBAAC,QAAD;IAAQ,OAAO;IAAK,QAAQ,KAAK,MAAM,cAAc,CAAC;IAAG,MAAM;GAAc,CAAA;GAC5E;GACD,oBAAC,aAAD;IAAa,GAAI,OAAO,MAAM,cAAc,KAAK;IAAG,MAAM;GAAK,CAAA;EACzD;;AACZ"}

package/es/ColorPicker/color.mjs

@@ -22,7 +22,31 @@ const normalizeHexInput = (input) => {
 	if (!/^([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.test(raw)) return null;
 	return `#${raw.toLowerCase()}`;
 };
+const toRgb = ({ h, s, v }) => {
+	const [r, g, b] = chroma.hsv(h, s, v).rgb();
+	return [
+		r,
+		g,
+		b
+	];
+};
+const toHsl = (hsva) => {
+	const [h, s, l] = chroma.hsv(hsva.h, hsva.s, hsva.v).hsl();
+	return [
+		Math.round(Number.isNaN(h) ? hsva.h : h),
+		Math.round(s * 100),
+		Math.round(l * 100)
+	];
+};
+const fromRgb = ([r, g, b], current) => ({
+	...parseColor(chroma.rgb(r, g, b).hex(), current.h),
+	a: current.a
+});
+const fromHsl = ([h, s, l], current) => ({
+	...parseColor(chroma.hsl(h, s / 100, l / 100).hex(), h),
+	a: current.a
+});
 //#endregion
-export { formatColor, normalizeHexInput, parseColor };
+export { formatColor, fromHsl, fromRgb, normalizeHexInput, parseColor, toHsl, toRgb };
 
 //# sourceMappingURL=color.mjs.map