@lobehub/ui 5.51.2 → 5.53.0

package/es/base-ui/ColorPicker/ColorPicker.mjs

@@ -0,0 +1,227 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { rootVariants } from "../Input/style.mjs";
+import Input from "../Input/Input.mjs";
+import InputNumber from "../Input/InputNumber.mjs";
+import { panelStyles } from "../panelStyles.mjs";
+import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../Popover/atoms.mjs";
+import Slider from "../Slider/Slider.mjs";
+import colorPicker_default from "../../i18n/resources/en/colorPicker.mjs";
+import { formatColor, normalizeHexInput, parseColor } from "./color.mjs";
+import { styles } from "./style.mjs";
+import SaturationArea from "./SaturationArea.mjs";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import useMergeState from "use-merge-value";
+import { Pipette } from "lucide-react";
+//#region src/base-ui/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 { t } = useTranslation(colorPicker_default);
+	const { isDarkMode } = useThemeMode();
+	const [hex, setHex] = useMergeState(defaultValue, {
+		defaultValue,
+		onChange,
+		value
+	});
+	const [hsva, setHsva] = useState(() => parseColor(hex));
+	const [draft, setDraft] = useState(hex.slice(1).toUpperCase());
+	const popupRef = useRef(null);
+	useEffect(() => {
+		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 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", {
+		className: styles.swatch,
+		style: {
+			height: dimension,
+			width: dimension
+		},
+		children: /* @__PURE__ */ jsx("span", { style: { background: hex } })
+	});
+	const trigger = children ?? (showText ? /* @__PURE__ */ jsxs("button", {
+		"aria-label": t("colorPicker.trigger"),
+		disabled,
+		style,
+		type: "button",
+		className: cx(rootVariants({
+			size,
+			variant: isDarkMode ? "filled" : "outlined"
+		}), styles.textTrigger, className),
+		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"),
+		className: cx(styles.swatchButton, className),
+		disabled,
+		style,
+		type: "button",
+		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, {
+			className: panelStyles.popup,
+			ref: popupRef,
+			initialFocus: () => popupRef.current?.querySelector("[role=\"slider\"]") ?? true,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: styles.panel,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: styles.summary,
+						children: [
+							swatch(40),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+								className: styles.value,
+								children: hex.toUpperCase()
+							}), /* @__PURE__ */ jsx("div", {
+								className: panelStyles.label,
+								children: alpha ? `HEX · ${Math.round(hsva.a * 100)}%` : "HEX"
+							})] }),
+							hasEyeDropper() && /* @__PURE__ */ jsx("button", {
+								"aria-label": t("colorPicker.eyeDropper"),
+								className: panelStyles.nav,
+								style: { marginInlineStart: "auto" },
+								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: styles.hidden,
+							thumb: styles.sliderThumb,
+							track: styles.hueTrack
+						},
+						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: styles.hidden,
+							thumb: styles.sliderThumb,
+							track: styles.alphaTrack
+						},
+						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", {
+						className: styles.hexRow,
+						children: [/* @__PURE__ */ jsx(Input, {
+							"aria-label": "HEX",
+							prefix: /* @__PURE__ */ jsx("span", {
+								className: panelStyles.label,
+								children: "HEX"
+							}),
+							value: draft,
+							variant: "filled",
+							onBlur: commitDraft,
+							onChange: (event) => setDraft(event.target.value),
+							onPressEnter: commitDraft
+						}), alpha && /* @__PURE__ */ jsx(InputNumber, {
+							"aria-label": t("colorPicker.alpha"),
+							className: styles.alphaField,
+							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"),
+						className: styles.presets,
+						role: "group",
+						children: presets.map((color) => /* @__PURE__ */ jsx("button", {
+							"aria-label": color,
+							"aria-pressed": color.toLowerCase() === hex.slice(0, 7).toLowerCase(),
+							className: styles.preset,
+							style: { background: color },
+							type: "button",
+							onClick: () => apply({
+								...parseColor(color, hsva.h),
+								a: parseColor(color).a
+							})
+						}, color))
+					})
+				]
+			})
+		})
+	}) })] });
+});
+ColorPicker.displayName = "ColorPicker";
+//#endregion
+export { ColorPicker as default };
+
+//# sourceMappingURL=ColorPicker.mjs.map

package/es/base-ui/ColorPicker/ColorPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.mjs","names":["colorPickerMessages","useControlledState"],"sources":["../../../src/base-ui/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { Pipette } from 'lucide-react';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Input, InputNumber } from '@/base-ui/Input';\nimport { rootVariants } from '@/base-ui/Input/style';\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/base-ui/Popover';\nimport { Slider } from '@/base-ui/Slider';\nimport colorPickerMessages from '@/i18n/resources/en/colorPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\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 className={styles.swatch} style={{ height: dimension, width: dimension }}>\n        <span 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          style={style}\n          type=\"button\"\n          className={cx(\n            rootVariants({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n            styles.textTrigger,\n            className,\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          className={cx(styles.swatchButton, className)}\n          disabled={disabled}\n          style={style}\n          type=\"button\"\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              className={panelStyles.popup}\n              ref={popupRef}\n              initialFocus={() =>\n                popupRef.current?.querySelector<HTMLElement>('[role=\"slider\"]') ?? true\n              }\n            >\n              <div className={styles.panel}>\n                <div className={styles.summary}>\n                  {swatch(40)}\n                  <div>\n                    <div className={styles.value}>{hex.toUpperCase()}</div>\n                    <div className={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                      className={panelStyles.nav}\n                      style={{ marginInlineStart: 'auto' }}\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: styles.hidden,\n                    thumb: styles.sliderThumb,\n                    track: styles.hueTrack,\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: styles.hidden,\n                      thumb: styles.sliderThumb,\n                      track: styles.alphaTrack,\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 className={styles.hexRow}>\n                  <Input\n                    aria-label=\"HEX\"\n                    prefix={<span className={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={styles.alphaField}\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                    className={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                        className={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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"}

package/es/base-ui/ColorPicker/SaturationArea.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { styles } from "./style.mjs";
+import { memo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/base-ui/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 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)}%`,
+		className: 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", {
+			className: styles.thumb,
+			style: {
+				left: `${saturation * 100}%`,
+				top: `${(1 - value) * 100}%`
+			}
+		})
+	});
+});
+SaturationArea.displayName = "ColorPickerSaturationArea";
+//#endregion
+export { SaturationArea as default };
+
+//# sourceMappingURL=SaturationArea.mjs.map

package/es/base-ui/ColorPicker/SaturationArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaturationArea.mjs","names":[],"sources":["../../../src/base-ui/ColorPicker/SaturationArea.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type PointerEvent, useRef } from 'react';\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        className={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          className={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":";;;;;AAeA,MAAM,SAAS,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;AAE/E,MAAM,iBAAiB,MACpB,EAAE,KAAK,OAAO,UAAU,kBAAkB,YAAY,YAAY;CACjE,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,eAAe,UAA0D;EAC7E,MAAM,OAAO,QAAQ,QAAS,sBAAsB;EACpD,MAAM,OAAyB,CAC7B,OAAO,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,GAC9C,MAAM,KAAK,MAAM,UAAU,KAAK,OAAO,KAAK,MAAM,CACpD;EACA,SAAS,GAAG,IAAI;EAChB,OAAO;CACT;CAEA,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,MAAM,aAAa,GAAG;EAC1C,kBAAgB,cAAc,KAAK,MAAM,aAAa,GAAG,EAAE,gBAAgB,KAAK,MAAM,QAAQ,GAAG,EAAE;EACnG,WAAW,OAAO;EAClB,KAAK;EACL,MAAK;EACL,UAAU;EACV,OAAO,EACL,YAAY,mFAAmF,IAAI,aACrG;EACA,YAAY,UAAU;GACpB,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;EACA,gBAAgB,UAAU;GACxB,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACrD,YAAY,KAAK;EACnB;EACA,gBAAgB,UAAU;GACxB,IAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG,YAAY,KAAK;EAC/E;EACA,cAAc,UAAU;GACtB,MAAM,cAAc,sBAAsB,MAAM,SAAS;GACzD,iBAAiB,GAAG,YAAY,KAAK,CAAC;EACxC;EAEA,UAAA,oBAAC,QAAD;GACE,WAAW,OAAO;GAClB,OAAO;IAAE,MAAM,GAAG,aAAa,IAAI;IAAI,KAAK,IAAI,IAAI,SAAS,IAAI;GAAG;EACrE,CAAA;CACE,CAAA;AAET,CACF;AAEA,eAAe,cAAc"}

package/es/base-ui/ColorPicker/color.mjs

@@ -0,0 +1,28 @@
+import chroma from "chroma-js";
+//#region src/base-ui/ColorPicker/color.ts
+const parseColor = (value, fallbackHue = 0) => {
+	if (!value || !chroma.valid(value)) return {
+		a: 1,
+		h: fallbackHue,
+		s: 0,
+		v: 0
+	};
+	const color = chroma(value);
+	const [h, s, v] = color.hsv();
+	return {
+		a: color.alpha(),
+		h: Number.isNaN(h) ? fallbackHue : h,
+		s,
+		v
+	};
+};
+const formatColor = ({ a, h, s, v }, alpha) => chroma.hsv(h, s, v).alpha(alpha ? a : 1).hex(alpha ? "rgba" : "rgb");
+const normalizeHexInput = (input) => {
+	const raw = input.trim().replace(/^#/, "");
+	if (!/^([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.test(raw)) return null;
+	return `#${raw.toLowerCase()}`;
+};
+//#endregion
+export { formatColor, normalizeHexInput, parseColor };
+
+//# sourceMappingURL=color.mjs.map

package/es/base-ui/ColorPicker/color.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.mjs","names":[],"sources":["../../../src/base-ui/ColorPicker/color.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nexport interface Hsva {\n  a: number;\n  h: number;\n  s: number;\n  v: number;\n}\n\nexport const parseColor = (value: string | undefined, fallbackHue = 0): Hsva => {\n  if (!value || !chroma.valid(value)) return { a: 1, h: fallbackHue, s: 0, v: 0 };\n  const color = chroma(value);\n  const [h, s, v] = color.hsv();\n  return { a: color.alpha(), h: Number.isNaN(h) ? fallbackHue : h, s, v };\n};\n\nexport const formatColor = ({ a, h, s, v }: Hsva, alpha: boolean): string =>\n  chroma\n    .hsv(h, s, v)\n    .alpha(alpha ? a : 1)\n    .hex(alpha ? 'rgba' : 'rgb');\n\nexport const normalizeHexInput = (input: string): string | null => {\n  const raw = input.trim().replace(/^#/, '');\n  if (!/^([\\da-f]{3}|[\\da-f]{6}|[\\da-f]{8})$/i.test(raw)) return null;\n  return `#${raw.toLowerCase()}`;\n};\n"],"mappings":";;AASA,MAAa,cAAc,OAA2B,cAAc,MAAY;CAC9E,IAAI,CAAC,SAAS,CAAC,OAAO,MAAM,KAAK,GAAG,OAAO;EAAE,GAAG;EAAG,GAAG;EAAa,GAAG;EAAG,GAAG;CAAE;CAC9E,MAAM,QAAQ,OAAO,KAAK;CAC1B,MAAM,CAAC,GAAG,GAAG,KAAK,MAAM,IAAI;CAC5B,OAAO;EAAE,GAAG,MAAM,MAAM;EAAG,GAAG,OAAO,MAAM,CAAC,IAAI,cAAc;EAAG;EAAG;CAAE;AACxE;AAEA,MAAa,eAAe,EAAE,GAAG,GAAG,GAAG,KAAW,UAChD,OACG,IAAI,GAAG,GAAG,CAAC,CAAC,CACZ,MAAM,QAAQ,IAAI,CAAC,CAAC,CACpB,IAAI,QAAQ,SAAS,KAAK;AAE/B,MAAa,qBAAqB,UAAiC;CACjE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC,QAAQ,MAAM,EAAE;CACzC,IAAI,CAAC,wCAAwC,KAAK,GAAG,GAAG,OAAO;CAC/D,OAAO,IAAI,IAAI,YAAY;AAC7B"}

package/es/base-ui/ColorPicker/index.d.mts

@@ -0,0 +1,3 @@
+import { ColorPickerProps } from "./type.mjs";
+import ColorPicker from "./ColorPicker.mjs";
+export { ColorPicker, type ColorPickerProps };

package/es/base-ui/ColorPicker/style.mjs

@@ -0,0 +1,180 @@
+import { focusRing } from "../focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/ColorPicker/style.ts
+const checker = (color) => `
+  background-image:
+    linear-gradient(45deg, ${color} 25%, transparent 25%, transparent 75%, ${color} 75%),
+    linear-gradient(45deg, ${color} 25%, transparent 25%, transparent 75%, ${color} 75%);
+  background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
+`;
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	alphaField: css`
+    flex: none;
+    width: 76px;
+  `,
+	alphaTrack: css`
+    height: 10px;
+    border-radius: 999px;
+
+    background-image:
+      linear-gradient(to right, transparent, var(--lobe-color-picker-alpha)),
+      linear-gradient(
+        45deg,
+        ${cssVar.colorFillSecondary} 25%,
+        transparent 25%,
+        transparent 75%,
+        ${cssVar.colorFillSecondary} 75%
+      ),
+      linear-gradient(
+        45deg,
+        ${cssVar.colorFillSecondary} 25%,
+        transparent 25%,
+        transparent 75%,
+        ${cssVar.colorFillSecondary} 75%
+      );
+    background-position:
+      0 0,
+      0 0,
+      4px 4px;
+    background-size:
+      100% 100%,
+      8px 8px,
+      8px 8px;
+  `,
+	hexRow: css`
+    display: flex;
+    gap: 6px;
+
+    & > * {
+      min-width: 0;
+    }
+  `,
+	hidden: css`
+    background: transparent !important;
+  `,
+	hueTrack: css`
+    height: 10px;
+    border-radius: 999px;
+    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+  `,
+	panel: css`
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    width: 240px;
+  `,
+	preset: css`
+    ${focusRing};
+    cursor: pointer;
+
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+
+    &[aria-pressed='true'] {
+      box-shadow:
+        0 0 0 2px ${cssVar.colorBgElevated},
+        0 0 0 4px ${cssVar.colorText};
+    }
+  `,
+	presets: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    padding-block-start: 14px;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	saturation: css`
+    ${focusRing};
+    touch-action: none;
+    cursor: crosshair;
+
+    position: relative;
+
+    height: 164px;
+    border-radius: 12px;
+  `,
+	swatch: css`
+    ${checker(cssVar.colorFillSecondary)};
+    overflow: hidden;
+    display: inline-flex;
+    flex: none;
+
+    border-radius: 50%;
+
+    box-shadow: inset 0 0 0 1px ${cssVar.colorFillSecondary};
+
+    & > span {
+      flex: 1;
+    }
+  `,
+	swatchButton: css`
+    ${focusRing};
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+
+    background: none;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+	textTrigger: css`
+    cursor: pointer;
+    width: auto;
+  `,
+	thumb: css`
+    position: absolute;
+
+    box-sizing: border-box;
+    width: 18px;
+    height: 18px;
+    margin-block: -9px 0;
+    margin-inline: -9px 0;
+    border: 3px solid #fff;
+    border-radius: 50%;
+
+    box-shadow:
+      0 0 0 1px rgb(0 0 0 / 12%),
+      0 2px 6px rgb(0 0 0 / 25%);
+  `,
+	sliderThumb: css`
+    width: 18px !important;
+    height: 18px !important;
+    border: 3px solid #fff !important;
+
+    background: transparent !important;
+    box-shadow:
+      0 0 0 1px rgb(0 0 0 / 12%),
+      0 2px 6px rgb(0 0 0 / 25%) !important;
+  `,
+	summary: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  `,
+	value: css`
+    font-family: ${cssVar.fontFamilyCode};
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/ColorPicker/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ColorPicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nconst checker = (color: string) => `\n  background-image:\n    linear-gradient(45deg, ${color} 25%, transparent 25%, transparent 75%, ${color} 75%),\n    linear-gradient(45deg, ${color} 25%, transparent 25%, transparent 75%, ${color} 75%);\n  background-position: 0 0, 4px 4px;\n  background-size: 8px 8px;\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  alphaField: css`\n    flex: none;\n    width: 76px;\n  `,\n  alphaTrack: css`\n    height: 10px;\n    border-radius: 999px;\n\n    background-image:\n      linear-gradient(to right, transparent, var(--lobe-color-picker-alpha)),\n      linear-gradient(\n        45deg,\n        ${cssVar.colorFillSecondary} 25%,\n        transparent 25%,\n        transparent 75%,\n        ${cssVar.colorFillSecondary} 75%\n      ),\n      linear-gradient(\n        45deg,\n        ${cssVar.colorFillSecondary} 25%,\n        transparent 25%,\n        transparent 75%,\n        ${cssVar.colorFillSecondary} 75%\n      );\n    background-position:\n      0 0,\n      0 0,\n      4px 4px;\n    background-size:\n      100% 100%,\n      8px 8px,\n      8px 8px;\n  `,\n  hexRow: css`\n    display: flex;\n    gap: 6px;\n\n    & > * {\n      min-width: 0;\n    }\n  `,\n  hidden: css`\n    background: transparent !important;\n  `,\n  hueTrack: css`\n    height: 10px;\n    border-radius: 999px;\n    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);\n  `,\n  panel: css`\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    width: 240px;\n  `,\n  preset: css`\n    ${focusRing};\n    cursor: pointer;\n\n    width: 22px;\n    height: 22px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    &[aria-pressed='true'] {\n      box-shadow:\n        0 0 0 2px ${cssVar.colorBgElevated},\n        0 0 0 4px ${cssVar.colorText};\n    }\n  `,\n  presets: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n\n    padding-block-start: 14px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  saturation: css`\n    ${focusRing};\n    touch-action: none;\n    cursor: crosshair;\n\n    position: relative;\n\n    height: 164px;\n    border-radius: 12px;\n  `,\n  swatch: css`\n    ${checker(cssVar.colorFillSecondary)};\n    overflow: hidden;\n    display: inline-flex;\n    flex: none;\n\n    border-radius: 50%;\n\n    box-shadow: inset 0 0 0 1px ${cssVar.colorFillSecondary};\n\n    & > span {\n      flex: 1;\n    }\n  `,\n  swatchButton: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    background: none;\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n  textTrigger: css`\n    cursor: pointer;\n    width: auto;\n  `,\n  thumb: css`\n    position: absolute;\n\n    box-sizing: border-box;\n    width: 18px;\n    height: 18px;\n    margin-block: -9px 0;\n    margin-inline: -9px 0;\n    border: 3px solid #fff;\n    border-radius: 50%;\n\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 12%),\n      0 2px 6px rgb(0 0 0 / 25%);\n  `,\n  sliderThumb: css`\n    width: 18px !important;\n    height: 18px !important;\n    border: 3px solid #fff !important;\n\n    background: transparent !important;\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 12%),\n      0 2px 6px rgb(0 0 0 / 25%) !important;\n  `,\n  summary: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n  `,\n  value: css`\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.2;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAM,WAAW,UAAkB;;6BAEN,MAAM,0CAA0C,MAAM;6BACtD,MAAM,0CAA0C,MAAM;;;;AAKnF,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAY,GAAG;;;;CAIf,YAAY,GAAG;;;;;;;;UAQP,OAAO,mBAAmB;;;UAG1B,OAAO,mBAAmB;;;;UAI1B,OAAO,mBAAmB;;;UAG1B,OAAO,mBAAmB;;;;;;;;;;;CAWlC,QAAQ,GAAG;;;;;;;;CAQX,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;;;;CAKb,OAAO,GAAG;;;;;;CAMV,QAAQ,GAAG;MACP,UAAU;;;;;;;;;;;oBAWI,OAAO,gBAAgB;oBACvB,OAAO,UAAU;;;CAGnC,SAAS,GAAG;;;;;;oCAMsB,OAAO,qBAAqB;;CAE9D,YAAY,GAAG;MACX,UAAU;;;;;;;;;CASd,QAAQ,GAAG;MACP,QAAQ,OAAO,kBAAkB,EAAE;;;;;;;kCAOP,OAAO,mBAAmB;;;;;;CAM1D,cAAc,GAAG;MACb,UAAU;;;;;;;;;;;;;;;;;;;;CAoBd,aAAa,GAAG;;;;CAIhB,OAAO,GAAG;;;;;;;;;;;;;;;CAeV,aAAa,GAAG;;;;;;;;;;CAUhB,SAAS,GAAG;;;;;CAKZ,OAAO,GAAG;mBACO,OAAO,eAAe;;;;;AAKzC,EAAE"}

package/es/base-ui/ColorPicker/type.d.mts

@@ -0,0 +1,20 @@
+import { InputSize } from "../Input/type.mjs";
+import { CSSProperties, ReactElement } from "react";
+//#region src/base-ui/ColorPicker/type.d.ts
+interface ColorPickerProps {
+  alpha?: boolean;
+  children?: ReactElement;
+  className?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  onChange?: (hex: string) => void;
+  onChangeComplete?: (hex: string) => void;
+  presets?: string[];
+  showText?: boolean;
+  size?: InputSize;
+  style?: CSSProperties;
+  value?: string;
+}
+//#endregion
+export { ColorPickerProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { MenuVirtualList } from '@/base-ui/virtual';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n  closeContextMenu,\n  getServerSnapshot,\n  getSnapshot,\n  setContextMenuState,\n  subscribe,\n  updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n  const isClient = useIsClient();\n  const appElement = useAppElement();\n  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n  useEffect(() => {\n    const DEV = process.env.NODE_ENV === 'development';\n    if (!isClient || !DEV) return;\n    return registerDevSingleton('ContextMenuHost', document.body);\n  }, [isClient]);\n\n  useEffect(() => {\n    const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n    window.addEventListener('pointerdown', handler, true);\n    window.addEventListener('contextmenu', handler, true);\n    return () => {\n      window.removeEventListener('pointerdown', handler, true);\n      window.removeEventListener('contextmenu', handler, true);\n    };\n  }, []);\n\n  const menuItems = useMemo(\n    () =>\n      renderContextMenuItems(state.items, [], {\n        iconAlign: state.iconAlign,\n        iconSpaceMode: state.iconSpaceMode,\n      }),\n    [state.items, state.iconAlign, state.iconSpaceMode],\n  );\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n  const hasSlots = state.header != null || state.footer != null;\n  if (!isClient) return null;\n  if (!state.open && state.items.length === 0) return null;\n\n  return (\n    <ContextMenu.Root\n      open={state.open}\n      onOpenChange={(open) => {\n        if (open) {\n          setContextMenuState({ open });\n          return;\n        }\n        closeContextMenu();\n      }}\n    >\n      <ContextMenu.Portal container={appElement}>\n        <ContextMenu.Positioner\n          anchor={state.anchor ?? undefined}\n          className={styles.positioner}\n          collisionPadding={getFloatingCollisionPadding()}\n          ref={zRef as any}\n          sideOffset={6}\n          style={{ ...noAnimationStyles, zIndex }}\n        >\n          <ContextMenu.Popup\n            className={cx(styles.popup, hasSlots && styles.popupWithSlots)}\n            data-has-footer={state.footer == null ? undefined : ''}\n            data-has-header={state.header == null ? undefined : ''}\n            onContextMenu={preventDefaultAndStopPropagation}\n          >\n            {state.header == null ? null : <div className={styles.header}>{state.header}</div>}\n            {state.virtual ? (\n              <MenuVirtualList itemSize={state.listItemHeight}>{menuItems}</MenuVirtualList>\n            ) : hasSlots ? (\n              <div className={styles.slotViewport}>{menuItems}</div>\n            ) : (\n              menuItems\n            )}\n            {state.footer == null ? null : <div className={styles.footer}>{state.footer}</div>}\n          </ContextMenu.Popup>\n        </ContextMenu.Positioner>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,MAAM,oBAAoB,EAAE,sCAAsC,MAAM;AAExE,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,cAAc;CACjC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAE5E,gBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;EACrC,IAAI,CAAC,YAAY,CAAC,KAAK;EACvB,OAAO,qBAAqB,mBAAmB,SAAS,IAAI;CAC9D,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,KAAK;EAC7E,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,aAAa;GACX,OAAO,oBAAoB,eAAe,SAAS,IAAI;GACvD,OAAO,oBAAoB,eAAe,SAAS,IAAI;EACzD;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,cAEd,uBAAuB,MAAM,OAAO,CAAC,GAAG;EACtC,WAAW,MAAM;EACjB,eAAe,MAAM;CACvB,CAAC,GACH;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;CAAa,CACpD;CACA,MAAM,EAAE,QAAQ,KAAK,SAAS,eAA+B,UAAU;CACvE,MAAM,WAAW,MAAM,UAAU,QAAQ,MAAM,UAAU;CACzD,IAAI,CAAC,UAAU,OAAO;CACtB,IAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,GAAG,OAAO;CAEpD,OACE,oBAAC,YAAY,MAAb;EACE,MAAM,MAAM;EACZ,eAAe,SAAS;GACtB,IAAI,MAAM;IACR,oBAAoB,EAAE,KAAK,CAAC;IAC5B;GACF;GACA,iBAAiB;EACnB;EAEA,UAAA,oBAAC,YAAY,QAAb;GAAoB,WAAW;GAC7B,UAAA,oBAAC,YAAY,YAAb;IACE,QAAQ,MAAM,UAAU,KAAA;IACxB,WAAW,OAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO;KAAE,GAAG;KAAmB;IAAO;IAEtC,UAAA,qBAAC,YAAY,OAAb;KACE,WAAW,GAAG,OAAO,OAAO,YAAY,OAAO,cAAc;KAC7D,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,eAAe;KAJjB,UAAA;MAMG,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;MAChF,MAAM,UACL,oBAAC,iBAAD;OAAiB,UAAU,MAAM;OAAiB,UAAA;MAA2B,CAAA,IAC3E,WACF,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAe,UAAA;MAAe,CAAA,IAErD;MAED,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;KAChE;;GACG,CAAA;EACN,CAAA;CACJ,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { MenuVirtualList } from '@/base-ui/virtual';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n  closeContextMenu,\n  getServerSnapshot,\n  getSnapshot,\n  setContextMenuState,\n  subscribe,\n  updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n  const isClient = useIsClient();\n  const appElement = useAppElement();\n  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n  useEffect(() => {\n    const DEV = process.env.NODE_ENV === 'development';\n    if (!isClient || !DEV) return;\n    return registerDevSingleton('ContextMenuHost', document.body);\n  }, [isClient]);\n\n  useEffect(() => {\n    const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n    window.addEventListener('pointerdown', handler, true);\n    window.addEventListener('contextmenu', handler, true);\n    return () => {\n      window.removeEventListener('pointerdown', handler, true);\n      window.removeEventListener('contextmenu', handler, true);\n    };\n  }, []);\n\n  const menuItems = useMemo(\n    () =>\n      renderContextMenuItems(state.items, [], {\n        iconAlign: state.iconAlign,\n        iconSpaceMode: state.iconSpaceMode,\n      }),\n    [state.items, state.iconAlign, state.iconSpaceMode],\n  );\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n  const hasSlots = state.header != null || state.footer != null;\n  if (!isClient) return null;\n  if (!state.open && state.items.length === 0) return null;\n\n  return (\n    <ContextMenu.Root\n      open={state.open}\n      onOpenChange={(open) => {\n        if (open) {\n          setContextMenuState({ open });\n          return;\n        }\n        closeContextMenu();\n      }}\n    >\n      <ContextMenu.Portal container={appElement}>\n        <ContextMenu.Positioner\n          anchor={state.anchor ?? undefined}\n          className={styles.positioner}\n          collisionPadding={getFloatingCollisionPadding()}\n          ref={zRef as any}\n          sideOffset={6}\n          style={{ ...noAnimationStyles, zIndex }}\n        >\n          <ContextMenu.Popup\n            className={cx(styles.popup, hasSlots && styles.popupWithSlots)}\n            data-has-footer={state.footer == null ? undefined : ''}\n            data-has-header={state.header == null ? undefined : ''}\n            onContextMenu={preventDefaultAndStopPropagation}\n          >\n            {state.header == null ? null : <div className={styles.header}>{state.header}</div>}\n            {state.virtual ? (\n              <MenuVirtualList itemSize={state.listItemHeight}>{menuItems}</MenuVirtualList>\n            ) : hasSlots ? (\n              <div className={styles.slotViewport}>{menuItems}</div>\n            ) : (\n              menuItems\n            )}\n            {state.footer == null ? null : <div className={styles.footer}>{state.footer}</div>}\n          </ContextMenu.Popup>\n        </ContextMenu.Positioner>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,MAAM,oBAAoB,EAAE,sCAAsC,MAAM;AAExE,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,cAAc;CACjC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAE5E,gBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;EACrC,IAAI,CAAC,YAAY,CAAC,KAAK;EACvB,OAAO,qBAAqB,mBAAmB,SAAS,IAAI;CAC9D,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,KAAK;EAC7E,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,aAAa;GACX,OAAO,oBAAoB,eAAe,SAAS,IAAI;GACvD,OAAO,oBAAoB,eAAe,SAAS,IAAI;EACzD;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,cAEd,uBAAuB,MAAM,OAAO,CAAC,GAAG;EACtC,WAAW,MAAM;EACjB,eAAe,MAAM;CACvB,CAAC,GACH;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;CAAa,CACpD;CACA,MAAM,EAAE,QAAQ,KAAK,SAAS,eAA+B,UAAU;CACvE,MAAM,WAAW,MAAM,UAAU,QAAQ,MAAM,UAAU;CACzD,IAAI,CAAC,UAAU,OAAO;CACtB,IAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,GAAG,OAAO;CAEpD,OACE,oBAAC,YAAY,MAAb;EACE,MAAM,MAAM;EACZ,eAAe,SAAS;GACtB,IAAI,MAAM;IACR,oBAAoB,EAAE,KAAK,CAAC;IAC5B;GACF;GACA,iBAAiB;EACnB;EAEA,UAAA,oBAAC,YAAY,QAAb;GAAoB,WAAW;GAC7B,UAAA,oBAAC,YAAY,YAAb;IACE,QAAQ,MAAM,UAAU,KAAA;IACxB,WAAW,OAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO;KAAE,GAAG;KAAmB;IAAO;IAEtC,UAAA,qBAAC,YAAY,OAAb;KACE,WAAW,GAAG,OAAO,OAAO,YAAY,OAAO,cAAc;KAC7D,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,eAAe;KAJjB,UAAA;MAMG,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;MAChF,MAAM,UACL,oBAAC,iBAAD;OAAiB,UAAU,MAAM;OAAiB,UAAA;MAA2B,CAAA,IAC3E,WACF,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAe,UAAA;MAAe,CAAA,IAErD;MAED,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;KAChE;;GACG,CAAA;EACN,CAAA;CACJ,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc"}

package/es/base-ui/ContextMenu/renderItems.d.mts

@@ -1,5 +1,4 @@
 import { IconAlign, IconSpaceMode } from "../../Menu/renderUtils.mjs";
-import "../../Menu/index.mjs";
 import "./type.mjs";
 import { ReactNode } from "react";
 export type { IconSpaceMode };