@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Collapsible/Collapsible.d.mts

@@ -0,0 +1,6 @@
+import { CollapsibleProps } from "./type.mjs";
+//#region src/Collapsible/Collapsible.d.ts
+declare const Collapsible: import("react").NamedExoticComponent<CollapsibleProps>;
+//#endregion
+export { Collapsible as default };
+//# sourceMappingURL=Collapsible.d.mts.map

package/es/Collapsible/Collapsible.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { accordionStyles } from "../Accordion/style.mjs";
+import { cx } from "../styles/css.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/Collapsible/Collapsible.tsx
+const Collapsible$1 = memo(({ open, keepMounted, children, className, contentClassName, contentStyle, style }) => /* @__PURE__ */ jsx(Collapsible.Root, {
+	open,
+	children: /* @__PURE__ */ jsx(Collapsible.Panel, {
+		className: cx(accordionStyles.panel, className),
+		keepMounted,
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(accordionStyles.content, contentClassName),
+			style: contentStyle,
+			children
+		})
+	})
+}));
+Collapsible$1.displayName = "Collapsible";
+//#endregion
+export { Collapsible$1 as default };
+
+//# sourceMappingURL=Collapsible.mjs.map

package/es/Collapsible/Collapsible.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.mjs","names":["Collapsible","BaseUICollapsible"],"sources":["../../src/Collapsible/Collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as BaseUICollapsible } from '@base-ui/react/collapsible';\nimport { memo } from 'react';\n\nimport { cx } from '@/styles';\n\nimport { accordionStyles } from '../Accordion/atoms';\nimport type { CollapsibleProps } from './type';\n\nconst Collapsible = memo<CollapsibleProps>(\n  ({ open, keepMounted, children, className, contentClassName, contentStyle, style }) => (\n    <BaseUICollapsible.Root open={open}>\n      <BaseUICollapsible.Panel\n        className={cx(accordionStyles.panel, className)}\n        keepMounted={keepMounted}\n        style={style}\n      >\n        <div className={cx(accordionStyles.content, contentClassName)} style={contentStyle}>\n          {children}\n        </div>\n      </BaseUICollapsible.Panel>\n    </BaseUICollapsible.Root>\n  ),\n);\n\nCollapsible.displayName = 'Collapsible';\n\nexport default Collapsible;\n"],"mappings":";;;;;;;AAUA,MAAMA,gBAAc,MACjB,EAAE,MAAM,aAAa,UAAU,WAAW,kBAAkB,cAAc,YACzE,oBAACC,YAAkB,MAAnB;CAA8B;CAC5B,UAAA,oBAACA,YAAkB,OAAnB;EACE,WAAW,GAAG,gBAAgB,OAAO,SAAS;EACjC;EACN;EAEP,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,gBAAgB,SAAS,gBAAgB;GAAG,OAAO;GACnE;EACE,CAAA;CACkB,CAAA;AACH,CAAA,CAE5B;AAEA,cAAY,cAAc"}

package/es/Collapsible/index.mjs

@@ -0,0 +1 @@
+export { default } from "./Collapsible.mjs";

package/es/Collapsible/type.d.mts

@@ -0,0 +1,13 @@
+import { CSSProperties, ReactNode } from "react";
+//#region src/Collapsible/type.d.ts
+export interface CollapsibleProps {
+  children?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+  keepMounted?: boolean;
+  open: boolean;
+  style?: CSSProperties;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/ColorPicker/ColorInputs.mjs

@@ -0,0 +1,136 @@
+"use client";
+import Input_default from "../Input/Input.mjs";
+import InputNumber_default from "../Input/InputNumber.mjs";
+import { formatColor, fromHsl, fromRgb, normalizeHexInput, parseColor, toHsl, toRgb } from "./color.mjs";
+import { SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectTrigger, SelectValue } from "../Select/atoms.mjs";
+import { styles } from "./style.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Check, ChevronDown } from "lucide-react";
+//#region src/ColorPicker/ColorInputs.tsx
+const CHANNELS = {
+	hsl: {
+		labels: [
+			"H",
+			"S",
+			"L"
+		],
+		max: [
+			360,
+			100,
+			100
+		]
+	},
+	rgb: {
+		labels: [
+			"R",
+			"G",
+			"B"
+		],
+		max: [
+			255,
+			255,
+			255
+		]
+	}
+};
+const FORMATS = [
+	"hex",
+	"rgb",
+	"hsl"
+];
+const ColorInputs = ({ alpha, alphaLabel, format, formatLabel, hsva, onCommit, onFormatChange }) => {
+	const hex = formatColor(hsva, alpha);
+	const [drafts, setDrafts] = useState({});
+	useEffect(() => {
+		setDrafts({});
+	}, [hex, format]);
+	const channels = (kind) => kind === "rgb" ? toRgb(hsva) : toHsl(hsva);
+	const hints = {
+		hex: hex.slice(0, 7).toUpperCase(),
+		hsl: toHsl(hsva).join(" "),
+		rgb: toRgb(hsva).join(" ")
+	};
+	const commitHex = () => {
+		const draft = drafts.hex;
+		if (draft === void 0) return;
+		const normalized = normalizeHexInput(draft);
+		if (!normalized) return setDrafts({});
+		onCommit(parseColor(normalized, hsva.h));
+	};
+	const commitChannel = (kind, index) => {
+		const draft = drafts[`${kind}${index}`];
+		if (draft === void 0) return;
+		const parsed = Number.parseInt(draft, 10);
+		if (Number.isNaN(parsed)) return setDrafts({});
+		const next = channels(kind);
+		next[index] = Math.min(CHANNELS[kind].max[index], Math.max(0, parsed));
+		onCommit(kind === "rgb" ? fromRgb(next, hsva) : fromHsl(next, hsva));
+	};
+	const field = (key, label, value, onCommitField) => /* @__PURE__ */ jsx(Input_default, {
+		"aria-label": label,
+		prefix: format === "hex" ? "#" : void 0,
+		size: "small",
+		title: label,
+		value: drafts[key] ?? value,
+		variant: "filled",
+		className: stylex.props(styles.channelField, format !== "hex" && styles.channelCompact).className,
+		classNames: format === "hex" ? void 0 : { input: stylex.props(styles.channelInput).className },
+		onBlur: onCommitField,
+		onChange: (event) => setDrafts((current) => ({
+			...current,
+			[key]: event.target.value
+		})),
+		onPressEnter: onCommitField
+	}, key);
+	return /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.inputs),
+		children: [
+			/* @__PURE__ */ jsxs(SelectRoot, {
+				value: format,
+				onValueChange: (next) => next && onFormatChange(next),
+				children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+					"aria-label": formatLabel,
+					className: stylex.props(styles.formatSelect).className,
+					size: "small",
+					variant: "filled",
+					children: [/* @__PURE__ */ jsx(SelectValue, { children: (current) => String(current).toUpperCase() }), /* @__PURE__ */ jsx(SelectIcon, { children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) })]
+				}), /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsx(SelectPopup, {
+					className: stylex.props(styles.formatPopup).className,
+					children: /* @__PURE__ */ jsx(SelectList, { children: FORMATS.map((item) => /* @__PURE__ */ jsxs(SelectItem, {
+						value: item,
+						children: [
+							/* @__PURE__ */ jsx(SelectItemText, { children: item.toUpperCase() }),
+							/* @__PURE__ */ jsx("span", {
+								...stylex.props(styles.formatHint),
+								children: hints[item]
+							}),
+							/* @__PURE__ */ jsx(SelectItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14 }) })
+						]
+					}, item)) })
+				}) }) })]
+			}),
+			format === "hex" ? field("hex", "HEX", hex.slice(1).toUpperCase(), commitHex) : channels(format).map((value, index) => field(`${format}${index}`, CHANNELS[format].labels[index], String(value), () => commitChannel(format, index))),
+			alpha && /* @__PURE__ */ jsx(InputNumber_default, {
+				"aria-label": alphaLabel,
+				className: stylex.props(styles.alphaField).className,
+				controls: false,
+				max: 100,
+				min: 0,
+				size: "small",
+				suffix: "%",
+				value: Math.round(hsva.a * 100),
+				variant: "filled",
+				onChange: (a) => a !== null && onCommit({
+					...hsva,
+					a: a / 100
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ColorInputs as default };
+
+//# sourceMappingURL=ColorInputs.mjs.map

package/es/ColorPicker/ColorInputs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputs.mjs","names":["Input","InputNumber"],"sources":["../../src/ColorPicker/ColorInputs.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Check, ChevronDown } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { Input, InputNumber } from '@/Input';\nimport {\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectList,\n  SelectPopup,\n  SelectPortal,\n  SelectPositioner,\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n} from '@/Select';\n\nimport {\n  type ColorFormat,\n  formatColor,\n  fromHsl,\n  fromRgb,\n  type Hsva,\n  normalizeHexInput,\n  parseColor,\n  toHsl,\n  toRgb,\n} from './color';\nimport { styles } from './style';\n\ntype Channels = [number, number, number];\n\nconst CHANNELS: Record<Exclude<ColorFormat, 'hex'>, { labels: string[]; max: Channels }> = {\n  hsl: { labels: ['H', 'S', 'L'], max: [360, 100, 100] },\n  rgb: { labels: ['R', 'G', 'B'], max: [255, 255, 255] },\n};\n\nconst FORMATS: ColorFormat[] = ['hex', 'rgb', 'hsl'];\n\nexport interface ColorInputsProps {\n  alpha: boolean;\n  alphaLabel: string;\n  format: ColorFormat;\n  formatLabel: string;\n  hsva: Hsva;\n  onCommit: (next: Hsva) => void;\n  onFormatChange: (format: ColorFormat) => void;\n}\n\nconst ColorInputs = ({\n  alpha,\n  alphaLabel,\n  format,\n  formatLabel,\n  hsva,\n  onCommit,\n  onFormatChange,\n}: ColorInputsProps) => {\n  const hex = formatColor(hsva, alpha);\n  const [drafts, setDrafts] = useState<Record<string, string>>({});\n\n  useEffect(() => {\n    setDrafts({});\n  }, [hex, format]);\n\n  const channels = (kind: Exclude<ColorFormat, 'hex'>): Channels =>\n    kind === 'rgb' ? toRgb(hsva) : toHsl(hsva);\n\n  const hints: Record<ColorFormat, string> = {\n    hex: hex.slice(0, 7).toUpperCase(),\n    hsl: toHsl(hsva).join(' '),\n    rgb: toRgb(hsva).join(' '),\n  };\n\n  const commitHex = () => {\n    const draft = drafts.hex;\n    if (draft === undefined) return;\n    const normalized = normalizeHexInput(draft);\n    if (!normalized) return setDrafts({});\n    onCommit(parseColor(normalized, hsva.h));\n  };\n\n  const commitChannel = (kind: Exclude<ColorFormat, 'hex'>, index: number) => {\n    const draft = drafts[`${kind}${index}`];\n    if (draft === undefined) return;\n    const parsed = Number.parseInt(draft, 10);\n    if (Number.isNaN(parsed)) return setDrafts({});\n    const next = channels(kind);\n    next[index] = Math.min(CHANNELS[kind].max[index], Math.max(0, parsed));\n    onCommit(kind === 'rgb' ? fromRgb(next, hsva) : fromHsl(next, hsva));\n  };\n\n  const field = (key: string, label: string, value: string, onCommitField: () => void) => (\n    <Input\n      aria-label={label}\n      key={key}\n      prefix={format === 'hex' ? '#' : undefined}\n      size=\"small\"\n      title={label}\n      value={drafts[key] ?? value}\n      variant=\"filled\"\n      className={\n        stylex.props(styles.channelField, format !== 'hex' && styles.channelCompact).className\n      }\n      classNames={\n        format === 'hex' ? undefined : { input: stylex.props(styles.channelInput).className }\n      }\n      onBlur={onCommitField}\n      onChange={(event) => setDrafts((current) => ({ ...current, [key]: event.target.value }))}\n      onPressEnter={onCommitField}\n    />\n  );\n\n  return (\n    <div {...stylex.props(styles.inputs)}>\n      <SelectRoot\n        value={format}\n        onValueChange={(next) => next && onFormatChange(next as ColorFormat)}\n      >\n        <SelectTrigger\n          aria-label={formatLabel}\n          className={stylex.props(styles.formatSelect).className}\n          size=\"small\"\n          variant=\"filled\"\n        >\n          <SelectValue>{(current) => String(current).toUpperCase()}</SelectValue>\n          <SelectIcon>\n            <ChevronDown size={12} />\n          </SelectIcon>\n        </SelectTrigger>\n        <SelectPortal>\n          <SelectPositioner>\n            <SelectPopup className={stylex.props(styles.formatPopup).className}>\n              <SelectList>\n                {FORMATS.map((item) => (\n                  <SelectItem key={item} value={item}>\n                    <SelectItemText>{item.toUpperCase()}</SelectItemText>\n                    <span {...stylex.props(styles.formatHint)}>{hints[item]}</span>\n                    <SelectItemIndicator>\n                      <Check size={14} />\n                    </SelectItemIndicator>\n                  </SelectItem>\n                ))}\n              </SelectList>\n            </SelectPopup>\n          </SelectPositioner>\n        </SelectPortal>\n      </SelectRoot>\n      {format === 'hex'\n        ? field('hex', 'HEX', hex.slice(1).toUpperCase(), commitHex)\n        : channels(format).map((value, index) =>\n            field(`${format}${index}`, CHANNELS[format].labels[index], String(value), () =>\n              commitChannel(format, index),\n            ),\n          )}\n      {alpha && (\n        <InputNumber\n          aria-label={alphaLabel}\n          className={stylex.props(styles.alphaField).className}\n          controls={false}\n          max={100}\n          min={0}\n          size=\"small\"\n          suffix=\"%\"\n          value={Math.round(hsva.a * 100)}\n          variant=\"filled\"\n          onChange={(a) => a !== null && onCommit({ ...hsva, a: a / 100 })}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ColorInputs;\n"],"mappings":"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"}

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.d.mts

@@ -0,0 +1,6 @@
+import { ColorPickerProps } from "./type.mjs";
+//#region src/ColorPicker/ColorPicker.d.ts
+declare const ColorPicker: import("react").NamedExoticComponent<ColorPickerProps>;
+//#endregion
+export { ColorPicker as default };
+//# sourceMappingURL=ColorPicker.d.mts.map

package/es/ColorPicker/ColorPicker.mjs

@@ -0,0 +1,98 @@
+"use client";
+import { useControlledState } from "../hooks/useControlledState.mjs";
+import { useTranslation } from "../i18n/useTranslation.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 { 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";
+//#region src/ColorPicker/ColorPicker.tsx
+const DEFAULT_COLOR = "#000000";
+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 [hex, setHex] = useControlledState(defaultValue, {
+		defaultValue,
+		onChange,
+		value
+	});
+	const [hsva, setHsva] = useState(() => parseColor(hex));
+	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));
+	}, [hex, alpha]);
+	const update = (next) => {
+		setHsva(next);
+		setHex(formatColor(next, alpha));
+	};
+	const commit = (next) => {
+		const nextHex = formatColor(next, alpha);
+		if (recent) pushRecentColor(nextHex);
+		onChangeComplete?.(nextHex);
+	};
+	const apply = (next) => {
+		update(next);
+		commit(next);
+	};
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		onOpenChange: (open) => {
+			if (open) setOriginal(hex);
+		},
+		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
+export { ColorPicker as default };
+
+//# sourceMappingURL=ColorPicker.mjs.map

package/es/ColorPicker/ColorPicker.mjs.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,67 @@
+"use client";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { styles } from "./style.mjs";
+import { memo, useRef } from "react";
+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(({ color, hue, label, onChange, onChangeComplete, saturation, value }) => {
+	const areaRef = useRef(null);
+	const fromPointer = (event) => {
+		const rect = areaRef.current.getBoundingClientRect();
+		const next = [clamp((event.clientX - rect.left) / rect.width), clamp(1 - (event.clientY - rect.top) / rect.height)];
+		onChange(...next);
+		return next;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		"aria-valuemax": 100,
+		"aria-valuemin": 0,
+		"aria-valuenow": Math.round(saturation * 100),
+		"aria-valuetext": `Saturation ${Math.round(saturation * 100)}%, brightness ${Math.round(value * 100)}%`,
+		...stylex.props(focusRing.info, styles.saturation),
+		ref: areaRef,
+		role: "slider",
+		tabIndex: 0,
+		style: { background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue} 100% 50%))` },
+		onKeyDown: (event) => {
+			const delta = event.shiftKey ? .1 : .01;
+			const move = {
+				ArrowDown: [0, -delta],
+				ArrowLeft: [-delta, 0],
+				ArrowRight: [delta, 0],
+				ArrowUp: [0, delta]
+			}[event.key];
+			if (!move) return;
+			event.preventDefault();
+			const next = [clamp(saturation + move[0]), clamp(value + move[1])];
+			onChange(...next);
+			onChangeComplete(...next);
+		},
+		onPointerDown: (event) => {
+			event.currentTarget.setPointerCapture(event.pointerId);
+			fromPointer(event);
+		},
+		onPointerMove: (event) => {
+			if (event.currentTarget.hasPointerCapture(event.pointerId)) fromPointer(event);
+		},
+		onPointerUp: (event) => {
+			event.currentTarget.releasePointerCapture(event.pointerId);
+			onChangeComplete(...fromPointer(event));
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			...stylex.props(styles.thumb),
+			style: {
+				background: color,
+				left: `${saturation * 100}%`,
+				top: `${(1 - value) * 100}%`
+			}
+		})
+	});
+});
+SaturationArea.displayName = "ColorPickerSaturationArea";
+//#endregion
+export { SaturationArea as default };
+
+//# sourceMappingURL=SaturationArea.mjs.map

package/es/ColorPicker/SaturationArea.mjs.map

@@ -0,0 +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  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"}