@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/browser/modules/colorpicker/colorpicker.js

@@ -1,9 +1,11 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/colorpicker.css';
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TinyColor } from "@ctrl/tinycolor";
 import { Check, X } from "lucide-react";
 import { useEffect, useId, useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { useFormField } from "../form/form.js";
 import { classes } from "../shared/classes.js";
@@ -125,7 +127,18 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                 style: style,
                 "data-status": status,
                 "data-disabled": disabled || void 0,
+                "data-readonly": readOnly || void 0,
                 "data-open": open || void 0,
+                onMouseDown: (event)=>{
+                    if (!disabled && event.target === event.currentTarget) event.preventDefault();
+                },
+                onClick: (event)=>{
+                    if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    trigger.current?.focus();
+                    trigger.current?.click();
+                },
                 children: [
                     /*#__PURE__*/ jsxs("button", {
                         ...props,
@@ -135,7 +148,7 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                         id: props.id ?? field?.id,
                         className: "leaf-color-picker__trigger",
                         disabled: disabled,
-                        "aria-label": label ?? (field?.labelId ? void 0 : messages.color),
+                        "aria-label": label ?? (field?.labelId ? void 0 : messages.colorPicker.label),
                         "aria-labelledby": props['aria-labelledby'] ?? field?.labelId,
                         "aria-describedby": [
                             props['aria-describedby'],
@@ -161,14 +174,14 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                             }),
                             showText && /*#__PURE__*/ jsx("span", {
                                 className: "leaf-color-picker__text",
-                                children: 'function' == typeof showText ? showText(display) : display || messages.color
+                                children: 'function' == typeof showText ? showText(display) : display || messages.colorPicker.label
                             })
                         ]
                     }),
                     clearable && /*#__PURE__*/ jsx("button", {
                         type: "button",
                         className: "leaf-color-picker__clear",
-                        "aria-label": messages.clearColor,
+                        "aria-label": messages.colorPicker.clear,
                         onClick: ()=>{
                             setCurrent('');
                             onChange?.('');
@@ -197,7 +210,7 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                 className: classes('leaf-floating', 'leaf-color-picker__panel', popupClassName),
                 id: id,
                 role: "dialog",
-                "aria-label": messages.color,
+                "aria-label": messages.colorPicker.label,
                 width: popupWidth,
                 style: popupStyle,
                 render: popupRender,
@@ -207,11 +220,11 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                     /*#__PURE__*/ jsx("div", {
                         role: "slider",
                         tabIndex: 0,
-                        "aria-label": `${messages.saturation} / ${messages.brightness}`,
+                        "aria-label": `${messages.colorPicker.saturation} / ${messages.colorPicker.brightness}`,
                         "aria-valuemin": 0,
                         "aria-valuemax": 100,
                         "aria-valuenow": Math.round(100 * activeHsv.s),
-                        "aria-valuetext": `${messages.saturation} ${Math.round(100 * activeHsv.s)}%, ${messages.brightness} ${Math.round(100 * activeHsv.v)}%`,
+                        "aria-valuetext": `${messages.colorPicker.saturation} ${Math.round(100 * activeHsv.s)}%, ${messages.colorPicker.brightness} ${Math.round(100 * activeHsv.v)}%`,
                         className: "leaf-color-picker__area",
                         style: {
                             backgroundImage: gradient ? `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})` : void 0,
@@ -263,7 +276,7 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                                         min: 0,
                                         max: 359,
                                         value: Math.round(activeHsv.h),
-                                        "aria-label": messages.hue,
+                                        "aria-label": messages.colorPicker.hue,
                                         onChange: (event)=>change({
                                                 ...activeHsv,
                                                 h: Number(event.target.value)
@@ -277,7 +290,7 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                                         min: 0,
                                         max: 100,
                                         value: Math.round(100 * activeHsv.a),
-                                        "aria-label": messages.alpha,
+                                        "aria-label": messages.colorPicker.alpha,
                                         style: {
                                             '--leaf-alpha-color': opaqueColor
                                         },
@@ -294,7 +307,7 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                     }),
                     /*#__PURE__*/ jsx("fieldset", {
                         className: "leaf-color-picker__formats",
-                        "aria-label": messages.colorValue,
+                        "aria-label": messages.colorPicker.value,
                         children: [
                             'hex',
                             'rgb',
@@ -311,7 +324,7 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                     }),
                     /*#__PURE__*/ jsx("input", {
                         className: "leaf-color-picker__input",
-                        "aria-label": messages.colorValue,
+                        "aria-label": messages.colorPicker.value,
                         "aria-invalid": invalid || void 0,
                         "aria-describedby": invalid ? `${id}-error` : void 0,
                         value: input,
@@ -330,11 +343,11 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
                     invalid && /*#__PURE__*/ jsx("span", {
                         className: "leaf-color-picker__error",
                         id: `${id}-error`,
-                        children: messages.invalidColor
+                        children: messages.colorPicker.invalid
                     }),
                     (presets ?? [
                         {
-                            label: messages.presets,
+                            label: messages.colorPicker.presets,
                             colors: [
                                 '#20834a',
                                 '#13a8a8',
@@ -379,7 +392,8 @@ function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeC
         ]
     });
 }
-function ColorPicker(props) {
+function ColorPicker(rawProps) {
+    const props = useComponentProps('ColorPicker', rawProps);
     return 'gradient' === props.mode || props.gradient ? /*#__PURE__*/ jsx(GradientColorPicker, {
         ...props
     }) : /*#__PURE__*/ jsx(SolidColorPicker, {

package/dist/esm/browser/modules/colorpicker/colorpicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorpicker/colorpicker.js","sources":["../../../../../src/colorpicker/colorpicker.tsx"],"sourcesContent":["import { TinyColor } from '@ctrl/tinycolor';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport {\n  FloatingPanel,\n  type PopupOptions,\n  useFloatingDismiss,\n  usePopupState,\n} from '../shared/floating';\nimport type { ControlSize, ControlStatus } from '../shared/types';\nimport { GradientColorPicker } from './gradient';\n\nexport interface ColorPreset {\n  label: ReactNode;\n  colors: readonly string[];\n}\nexport interface ColorPickerProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'>,\n    PopupOptions {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (color: string) => void;\n  onChangeComplete?: (color: string) => void;\n  format?: 'hex' | 'rgb' | 'hsl';\n  defaultFormat?: 'hex' | 'rgb' | 'hsl';\n  onFormatChange?: (format: 'hex' | 'rgb' | 'hsl') => void;\n  disableAlpha?: boolean;\n  showText?: boolean | ((color: string) => ReactNode);\n  allowClear?: boolean;\n  presets?: readonly ColorPreset[];\n  size?: ControlSize;\n  status?: ControlStatus;\n  required?: boolean;\n  readOnly?: boolean;\n  popupWidth?: number | string;\n  onOpenChange?: (open: boolean) => void;\n  gradient?: boolean;\n  mode?: 'solid' | 'gradient';\n  open?: boolean;\n  defaultOpen?: boolean;\n  popupClassName?: string;\n  popupStyle?: CSSProperties;\n  popupRender?: (content: ReactNode) => ReactNode;\n  getPopupContainer?: () => Element | DocumentFragment;\n}\ntype HSV = { h: number; s: number; v: number; a: number };\nconst clamp = (value: number) => Math.min(1, Math.max(0, value));\nexport function SolidColorPicker({\n  value,\n  defaultValue = '#20834a',\n  onChange,\n  onChangeComplete,\n  format: formatProp,\n  defaultFormat = 'hex',\n  onFormatChange,\n  disableAlpha = false,\n  showText = false,\n  allowClear = false,\n  presets,\n  size = 'md',\n  status: statusProp,\n  required: requiredProp,\n  popupWidth = 280,\n  onOpenChange,\n  gradient = false,\n  mode: _mode,\n  open: controlledOpen,\n  defaultOpen,\n  popupClassName,\n  popupStyle,\n  popupRender,\n  popupPlacement,\n  getPopupContainer,\n  readOnly,\n  disabled: disabledProp,\n  name,\n  form,\n  className,\n  style,\n  'aria-label': label,\n  ...props\n}: ColorPickerProps) {\n  const { messages } = useLeafConfig();\n  const field = useFormField();\n  const disabled = disabledProp || field?.disabled;\n  const required = requiredProp ?? field?.required;\n  const status = statusProp ?? (field?.error ? 'error' : undefined);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const root = useRef<HTMLSpanElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const [internalFormat, setFormat] = useState(defaultFormat);\n  const format = formatProp ?? internalFormat;\n  const [open, setOpen] = usePopupState(\n    disabled || readOnly,\n    onOpenChange,\n    controlledOpen,\n    defaultOpen,\n  );\n  const id = `${useId()}-color`;\n  const color = new TinyColor(current || '#20834a');\n  const hsv = color.isValid ? color.toHsv() : new TinyColor('#20834a').toHsv();\n  const [rememberedHue, setRememberedHue] = useState(hsv.h);\n  const [coordinates, setCoordinates] = useState<{ value: string; hsv: HSV }>();\n  const activeHsv = {\n    ...(coordinates && new TinyColor(coordinates.value).toHex8String() === color.toHex8String()\n      ? coordinates.hsv\n      : { ...hsv, h: hsv.s === 0 || hsv.v === 0 ? rememberedHue : hsv.h }),\n    a: disableAlpha ? 1 : hsv.a,\n  };\n  const serialize = (next: TinyColor) => {\n    const normalized = disableAlpha ? next.setAlpha(1) : next;\n    return format === 'rgb'\n      ? normalized.toRgbString()\n      : format === 'hsl'\n        ? normalized.toHslString()\n        : normalized.getAlpha() < 1\n          ? normalized.toHex8String()\n          : normalized.toHexString();\n  };\n  const display = current ? serialize(new TinyColor(activeHsv)) : '';\n  const [input, setInput] = useState(display);\n  const [invalid, setInvalid] = useState(false);\n  const latest = useRef(display);\n  useEffect(() => {\n    setInput(display);\n    setInvalid(false);\n  }, [display]);\n  const close = () => {\n    setOpen(false);\n    setInput(display);\n    setInvalid(false);\n  };\n  useFloatingDismiss(open, close, trigger, panel, root);\n  const change = (next: HSV, complete = false) => {\n    if (disabled || readOnly) return;\n    setRememberedHue(next.h);\n    const result = serialize(new TinyColor(next));\n    setCoordinates({ value: result, hsv: { ...next, a: disableAlpha ? 1 : next.a } });\n    latest.current = result;\n    setCurrent(result);\n    setInput(result);\n    setInvalid(false);\n    if (result !== current) onChange?.(result);\n    if (complete) onChangeComplete?.(result);\n  };\n  const chooseText = () => {\n    if (input === display) return;\n    const next = new TinyColor(input);\n    if (!next.isValid) {\n      setInvalid(true);\n      return;\n    }\n    change(next.toHsv(), true);\n  };\n  const areaChange = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n    change({\n      ...activeHsv,\n      s: clamp((event.clientX - rect.left) / rect.width),\n      v: clamp(1 - (event.clientY - rect.top) / rect.height),\n    });\n  };\n  const areaKey = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 0.1 : 0.01;\n    const next = { ...activeHsv };\n    if (event.key === 'ArrowLeft') next.s = clamp(next.s - step);\n    else if (event.key === 'ArrowRight') next.s = clamp(next.s + step);\n    else if (event.key === 'ArrowUp') next.v = clamp(next.v + step);\n    else if (event.key === 'ArrowDown') next.v = clamp(next.v - step);\n    else if (event.key === 'Home') next.s = 0;\n    else if (event.key === 'End') next.s = 1;\n    else return;\n    event.preventDefault();\n    change(next, true);\n  };\n  const previewColor = current ? new TinyColor(activeHsv).toRgbString() : 'transparent';\n  const hueColor = new TinyColor({ h: activeHsv.h, s: 1, v: 1 }).toHexString();\n  const opaqueColor = new TinyColor({ ...activeHsv, a: 1 }).toRgbString();\n  const clearable = allowClear && Boolean(current) && !disabled && !readOnly;\n  return (\n    <>\n      <span\n        ref={root}\n        className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}\n        style={style}\n        data-status={status}\n        data-disabled={disabled || undefined}\n        data-open={open || undefined}\n      >\n        <button\n          {...props}\n          ref={trigger}\n          type={props.type ?? 'button'}\n          form={form}\n          id={props.id ?? field?.id}\n          className=\"leaf-color-picker__trigger\"\n          disabled={disabled}\n          aria-label={label ?? (field?.labelId ? undefined : messages.color)}\n          aria-labelledby={props['aria-labelledby'] ?? field?.labelId}\n          aria-describedby={\n            [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n          }\n          aria-invalid={status === 'error' || props['aria-invalid']}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-controls={open ? id : undefined}\n          onClick={(event) => {\n            props.onClick?.(event);\n            if (!event.defaultPrevented) setOpen(!open);\n          }}\n        >\n          <span className=\"leaf-color-picker__swatch\" aria-hidden=\"true\">\n            <i style={{ background: previewColor }} />\n          </span>\n          {showText && (\n            <span className=\"leaf-color-picker__text\">\n              {typeof showText === 'function' ? showText(display) : display || messages.color}\n            </span>\n          )}\n        </button>\n        {clearable && (\n          <button\n            type=\"button\"\n            className=\"leaf-color-picker__clear\"\n            aria-label={messages.clearColor}\n            onClick={() => {\n              setCurrent('');\n              onChange?.('');\n              onChangeComplete?.('');\n              trigger.current?.focus();\n            }}\n          >\n            <X size={14} aria-hidden=\"true\" />\n          </button>\n        )}\n        <FormValue\n          value={current}\n          name={name}\n          form={form}\n          disabled={disabled}\n          required={required}\n          triggerRef={trigger}\n        />\n      </span>\n      <FloatingPanel\n        open={open}\n        triggerRef={trigger}\n        panelRef={panel}\n        className={classes('leaf-floating', 'leaf-color-picker__panel', popupClassName)}\n        id={id}\n        role=\"dialog\"\n        aria-label={messages.color}\n        width={popupWidth}\n        style={popupStyle}\n        render={popupRender}\n        placement={popupPlacement}\n        container={getPopupContainer}\n      >\n        <div\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={`${messages.saturation} / ${messages.brightness}`}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(activeHsv.s * 100)}\n          aria-valuetext={`${messages.saturation} ${Math.round(activeHsv.s * 100)}%, ${messages.brightness} ${Math.round(activeHsv.v * 100)}%`}\n          className=\"leaf-color-picker__area\"\n          style={{\n            backgroundImage: gradient\n              ? `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`\n              : undefined,\n            backgroundColor: hueColor,\n          }}\n          onKeyDown={areaKey}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return;\n            event.preventDefault();\n            event.currentTarget.focus();\n            event.currentTarget.setPointerCapture(event.pointerId);\n            areaChange(event);\n          }}\n          onPointerMove={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) areaChange(event);\n          }}\n          onPointerUp={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n              event.currentTarget.releasePointerCapture(event.pointerId);\n              onChangeComplete?.(latest.current);\n            }\n          }}\n        >\n          <span\n            className=\"leaf-color-picker__handle\"\n            style={{\n              left: `${activeHsv.s * 100}%`,\n              top: `${(1 - activeHsv.v) * 100}%`,\n              background: opaqueColor,\n            }}\n          />\n        </div>\n        <div className=\"leaf-color-picker__sliders\">\n          <span\n            className=\"leaf-color-picker__swatch leaf-color-picker__swatch--large\"\n            aria-hidden=\"true\"\n          >\n            <i style={{ background: previewColor }} />\n          </span>\n          <div>\n            <input\n              type=\"range\"\n              className=\"leaf-color-picker__hue\"\n              min={0}\n              max={359}\n              value={Math.round(activeHsv.h)}\n              aria-label={messages.hue}\n              onChange={(event) => change({ ...activeHsv, h: Number(event.target.value) })}\n              onPointerUp={() => onChangeComplete?.(latest.current)}\n              onKeyUp={() => onChangeComplete?.(latest.current)}\n            />\n            {!disableAlpha && (\n              <input\n                type=\"range\"\n                className=\"leaf-color-picker__alpha\"\n                min={0}\n                max={100}\n                value={Math.round(activeHsv.a * 100)}\n                aria-label={messages.alpha}\n                style={{ '--leaf-alpha-color': opaqueColor } as CSSProperties}\n                onChange={(event) => change({ ...activeHsv, a: Number(event.target.value) / 100 })}\n                onPointerUp={() => onChangeComplete?.(latest.current)}\n                onKeyUp={() => onChangeComplete?.(latest.current)}\n              />\n            )}\n          </div>\n        </div>\n        <fieldset className=\"leaf-color-picker__formats\" aria-label={messages.colorValue}>\n          {(['hex', 'rgb', 'hsl'] as const).map((next) => (\n            <button\n              type=\"button\"\n              key={next}\n              aria-pressed={format === next}\n              onClick={() => {\n                if (formatProp === undefined) setFormat(next);\n                onFormatChange?.(next);\n              }}\n            >\n              {next.toUpperCase()}\n            </button>\n          ))}\n        </fieldset>\n        <input\n          className=\"leaf-color-picker__input\"\n          aria-label={messages.colorValue}\n          aria-invalid={invalid || undefined}\n          aria-describedby={invalid ? `${id}-error` : undefined}\n          value={input}\n          onChange={(event) => {\n            setInput(event.target.value);\n            setInvalid(false);\n          }}\n          onBlur={chooseText}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              chooseText();\n            }\n          }}\n        />\n        {invalid && (\n          <span className=\"leaf-color-picker__error\" id={`${id}-error`}>\n            {messages.invalidColor}\n          </span>\n        )}\n        {(\n          presets ?? [\n            {\n              label: messages.presets,\n              colors: [\n                '#20834a',\n                '#13a8a8',\n                '#1677ff',\n                '#7654c6',\n                '#ffc53d',\n                '#f49b23',\n                '#ef5350',\n                '#203329',\n              ],\n            },\n          ]\n        ).map((group, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: Preset groups are static descriptions supplied by the consumer.\n          <div className=\"leaf-color-picker__presets\" key={index}>\n            <div className=\"leaf-color-picker__preset-label\">{group.label}</div>\n            <div>\n              {[...new Set(group.colors)].map((preset) => (\n                <button\n                  type=\"button\"\n                  key={preset}\n                  className=\"leaf-color-picker__preset\"\n                  aria-label={preset}\n                  aria-pressed={\n                    new TinyColor(preset).toHex8String() === new TinyColor(activeHsv).toHex8String()\n                  }\n                  style={{\n                    background: preset,\n                    color: new TinyColor(preset).isLight() ? '#203329' : '#fff',\n                  }}\n                  onClick={() => change(new TinyColor(preset).toHsv(), true)}\n                >\n                  {new TinyColor(preset).toHex8String() ===\n                    new TinyColor(activeHsv).toHex8String() && (\n                    <Check size={12} aria-hidden=\"true\" />\n                  )}\n                </button>\n              ))}\n            </div>\n          </div>\n        ))}\n      </FloatingPanel>\n    </>\n  );\n}\n\nexport function ColorPicker(props: ColorPickerProps) {\n  return props.mode === 'gradient' || props.gradient ? (\n    <GradientColorPicker {...props} />\n  ) : (\n    <SolidColorPicker {...props} />\n  );\n}\n"],"names":["clamp","value","Math","SolidColorPicker","defaultValue","onChange","onChangeComplete","formatProp","defaultFormat","onFormatChange","disableAlpha","showText","allowClear","presets","size","statusProp","requiredProp","popupWidth","onOpenChange","gradient","_mode","controlledOpen","defaultOpen","popupClassName","popupStyle","popupRender","popupPlacement","getPopupContainer","readOnly","disabledProp","name","form","className","style","label","props","messages","useLeafConfig","field","useFormField","disabled","required","status","undefined","trigger","useRef","root","panel","current","setCurrent","useFieldValue","internalFormat","setFormat","useState","format","open","setOpen","usePopupState","id","useId","color","TinyColor","hsv","rememberedHue","setRememberedHue","coordinates","setCoordinates","activeHsv","serialize","next","normalized","display","input","setInput","invalid","setInvalid","latest","useEffect","close","useFloatingDismiss","change","complete","result","chooseText","areaChange","event","rect","areaKey","step","previewColor","hueColor","opaqueColor","clearable","Boolean","classes","X","FormValue","FloatingPanel","Number","group","index","Set","preset","Check","ColorPicker","GradientColorPicker"],"mappings":"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"}
+{"version":3,"file":"colorpicker/colorpicker.js","sources":["../../../../../src/colorpicker/colorpicker.tsx"],"sourcesContent":["import { TinyColor } from '@ctrl/tinycolor';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport {\n  FloatingPanel,\n  type PopupOptions,\n  useFloatingDismiss,\n  usePopupState,\n} from '../shared/floating';\nimport type { ControlSize, ControlStatus } from '../shared/types';\nimport { GradientColorPicker } from './gradient';\n\nexport interface ColorPreset {\n  label: ReactNode;\n  colors: readonly string[];\n}\nexport interface ColorPickerProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'>,\n    PopupOptions {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (color: string) => void;\n  onChangeComplete?: (color: string) => void;\n  format?: 'hex' | 'rgb' | 'hsl';\n  defaultFormat?: 'hex' | 'rgb' | 'hsl';\n  onFormatChange?: (format: 'hex' | 'rgb' | 'hsl') => void;\n  disableAlpha?: boolean;\n  showText?: boolean | ((color: string) => ReactNode);\n  allowClear?: boolean;\n  presets?: readonly ColorPreset[];\n  size?: ControlSize;\n  status?: ControlStatus;\n  required?: boolean;\n  readOnly?: boolean;\n  popupWidth?: number | string;\n  onOpenChange?: (open: boolean) => void;\n  gradient?: boolean;\n  mode?: 'solid' | 'gradient';\n  open?: boolean;\n  defaultOpen?: boolean;\n  popupClassName?: string;\n  popupStyle?: CSSProperties;\n  popupRender?: (content: ReactNode) => ReactNode;\n  getPopupContainer?: () => Element | DocumentFragment;\n}\ntype HSV = { h: number; s: number; v: number; a: number };\nconst clamp = (value: number) => Math.min(1, Math.max(0, value));\nexport function SolidColorPicker({\n  value,\n  defaultValue = '#20834a',\n  onChange,\n  onChangeComplete,\n  format: formatProp,\n  defaultFormat = 'hex',\n  onFormatChange,\n  disableAlpha = false,\n  showText = false,\n  allowClear = false,\n  presets,\n  size = 'md',\n  status: statusProp,\n  required: requiredProp,\n  popupWidth = 280,\n  onOpenChange,\n  gradient = false,\n  mode: _mode,\n  open: controlledOpen,\n  defaultOpen,\n  popupClassName,\n  popupStyle,\n  popupRender,\n  popupPlacement,\n  getPopupContainer,\n  readOnly,\n  disabled: disabledProp,\n  name,\n  form,\n  className,\n  style,\n  'aria-label': label,\n  ...props\n}: ColorPickerProps) {\n  const { messages } = useLeafConfig();\n  const field = useFormField();\n  const disabled = disabledProp || field?.disabled;\n  const required = requiredProp ?? field?.required;\n  const status = statusProp ?? (field?.error ? 'error' : undefined);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const root = useRef<HTMLSpanElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const [internalFormat, setFormat] = useState(defaultFormat);\n  const format = formatProp ?? internalFormat;\n  const [open, setOpen] = usePopupState(\n    disabled || readOnly,\n    onOpenChange,\n    controlledOpen,\n    defaultOpen,\n  );\n  const id = `${useId()}-color`;\n  const color = new TinyColor(current || '#20834a');\n  const hsv = color.isValid ? color.toHsv() : new TinyColor('#20834a').toHsv();\n  const [rememberedHue, setRememberedHue] = useState(hsv.h);\n  const [coordinates, setCoordinates] = useState<{ value: string; hsv: HSV }>();\n  const activeHsv = {\n    ...(coordinates && new TinyColor(coordinates.value).toHex8String() === color.toHex8String()\n      ? coordinates.hsv\n      : { ...hsv, h: hsv.s === 0 || hsv.v === 0 ? rememberedHue : hsv.h }),\n    a: disableAlpha ? 1 : hsv.a,\n  };\n  const serialize = (next: TinyColor) => {\n    const normalized = disableAlpha ? next.setAlpha(1) : next;\n    return format === 'rgb'\n      ? normalized.toRgbString()\n      : format === 'hsl'\n        ? normalized.toHslString()\n        : normalized.getAlpha() < 1\n          ? normalized.toHex8String()\n          : normalized.toHexString();\n  };\n  const display = current ? serialize(new TinyColor(activeHsv)) : '';\n  const [input, setInput] = useState(display);\n  const [invalid, setInvalid] = useState(false);\n  const latest = useRef(display);\n  useEffect(() => {\n    setInput(display);\n    setInvalid(false);\n  }, [display]);\n  const close = () => {\n    setOpen(false);\n    setInput(display);\n    setInvalid(false);\n  };\n  useFloatingDismiss(open, close, trigger, panel, root);\n  const change = (next: HSV, complete = false) => {\n    if (disabled || readOnly) return;\n    setRememberedHue(next.h);\n    const result = serialize(new TinyColor(next));\n    setCoordinates({ value: result, hsv: { ...next, a: disableAlpha ? 1 : next.a } });\n    latest.current = result;\n    setCurrent(result);\n    setInput(result);\n    setInvalid(false);\n    if (result !== current) onChange?.(result);\n    if (complete) onChangeComplete?.(result);\n  };\n  const chooseText = () => {\n    if (input === display) return;\n    const next = new TinyColor(input);\n    if (!next.isValid) {\n      setInvalid(true);\n      return;\n    }\n    change(next.toHsv(), true);\n  };\n  const areaChange = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n    change({\n      ...activeHsv,\n      s: clamp((event.clientX - rect.left) / rect.width),\n      v: clamp(1 - (event.clientY - rect.top) / rect.height),\n    });\n  };\n  const areaKey = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 0.1 : 0.01;\n    const next = { ...activeHsv };\n    if (event.key === 'ArrowLeft') next.s = clamp(next.s - step);\n    else if (event.key === 'ArrowRight') next.s = clamp(next.s + step);\n    else if (event.key === 'ArrowUp') next.v = clamp(next.v + step);\n    else if (event.key === 'ArrowDown') next.v = clamp(next.v - step);\n    else if (event.key === 'Home') next.s = 0;\n    else if (event.key === 'End') next.s = 1;\n    else return;\n    event.preventDefault();\n    change(next, true);\n  };\n  const previewColor = current ? new TinyColor(activeHsv).toRgbString() : 'transparent';\n  const hueColor = new TinyColor({ h: activeHsv.h, s: 1, v: 1 }).toHexString();\n  const opaqueColor = new TinyColor({ ...activeHsv, a: 1 }).toRgbString();\n  const clearable = allowClear && Boolean(current) && !disabled && !readOnly;\n  return (\n    <>\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on the outer row forward to the keyboard-accessible trigger button. */}\n      {/* biome-ignore lint/a11y/useKeyWithClickEvents: The enclosed native button owns keyboard interaction; this wrapper only extends its hit area. */}\n      <span\n        ref={root}\n        className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}\n        style={style}\n        data-status={status}\n        data-disabled={disabled || undefined}\n        data-readonly={readOnly || undefined}\n        data-open={open || undefined}\n        onMouseDown={(event) => {\n          if (!disabled && event.target === event.currentTarget) event.preventDefault();\n        }}\n        onClick={(event) => {\n          if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n          event.preventDefault();\n          event.stopPropagation();\n          trigger.current?.focus();\n          trigger.current?.click();\n        }}\n      >\n        <button\n          {...props}\n          ref={trigger}\n          type={props.type ?? 'button'}\n          form={form}\n          id={props.id ?? field?.id}\n          className=\"leaf-color-picker__trigger\"\n          disabled={disabled}\n          aria-label={label ?? (field?.labelId ? undefined : messages.colorPicker.label)}\n          aria-labelledby={props['aria-labelledby'] ?? field?.labelId}\n          aria-describedby={\n            [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n          }\n          aria-invalid={status === 'error' || props['aria-invalid']}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-controls={open ? id : undefined}\n          onClick={(event) => {\n            props.onClick?.(event);\n            if (!event.defaultPrevented) setOpen(!open);\n          }}\n        >\n          <span className=\"leaf-color-picker__swatch\" aria-hidden=\"true\">\n            <i style={{ background: previewColor }} />\n          </span>\n          {showText && (\n            <span className=\"leaf-color-picker__text\">\n              {typeof showText === 'function'\n                ? showText(display)\n                : display || messages.colorPicker.label}\n            </span>\n          )}\n        </button>\n        {clearable && (\n          <button\n            type=\"button\"\n            className=\"leaf-color-picker__clear\"\n            aria-label={messages.colorPicker.clear}\n            onClick={() => {\n              setCurrent('');\n              onChange?.('');\n              onChangeComplete?.('');\n              trigger.current?.focus();\n            }}\n          >\n            <X size={14} aria-hidden=\"true\" />\n          </button>\n        )}\n        <FormValue\n          value={current}\n          name={name}\n          form={form}\n          disabled={disabled}\n          required={required}\n          triggerRef={trigger}\n        />\n      </span>\n      <FloatingPanel\n        open={open}\n        triggerRef={trigger}\n        panelRef={panel}\n        className={classes('leaf-floating', 'leaf-color-picker__panel', popupClassName)}\n        id={id}\n        role=\"dialog\"\n        aria-label={messages.colorPicker.label}\n        width={popupWidth}\n        style={popupStyle}\n        render={popupRender}\n        placement={popupPlacement}\n        container={getPopupContainer}\n      >\n        <div\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={`${messages.colorPicker.saturation} / ${messages.colorPicker.brightness}`}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(activeHsv.s * 100)}\n          aria-valuetext={`${messages.colorPicker.saturation} ${Math.round(activeHsv.s * 100)}%, ${messages.colorPicker.brightness} ${Math.round(activeHsv.v * 100)}%`}\n          className=\"leaf-color-picker__area\"\n          style={{\n            backgroundImage: gradient\n              ? `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`\n              : undefined,\n            backgroundColor: hueColor,\n          }}\n          onKeyDown={areaKey}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return;\n            event.preventDefault();\n            event.currentTarget.focus();\n            event.currentTarget.setPointerCapture(event.pointerId);\n            areaChange(event);\n          }}\n          onPointerMove={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) areaChange(event);\n          }}\n          onPointerUp={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n              event.currentTarget.releasePointerCapture(event.pointerId);\n              onChangeComplete?.(latest.current);\n            }\n          }}\n        >\n          <span\n            className=\"leaf-color-picker__handle\"\n            style={{\n              left: `${activeHsv.s * 100}%`,\n              top: `${(1 - activeHsv.v) * 100}%`,\n              background: opaqueColor,\n            }}\n          />\n        </div>\n        <div className=\"leaf-color-picker__sliders\">\n          <span\n            className=\"leaf-color-picker__swatch leaf-color-picker__swatch--large\"\n            aria-hidden=\"true\"\n          >\n            <i style={{ background: previewColor }} />\n          </span>\n          <div>\n            <input\n              type=\"range\"\n              className=\"leaf-color-picker__hue\"\n              min={0}\n              max={359}\n              value={Math.round(activeHsv.h)}\n              aria-label={messages.colorPicker.hue}\n              onChange={(event) => change({ ...activeHsv, h: Number(event.target.value) })}\n              onPointerUp={() => onChangeComplete?.(latest.current)}\n              onKeyUp={() => onChangeComplete?.(latest.current)}\n            />\n            {!disableAlpha && (\n              <input\n                type=\"range\"\n                className=\"leaf-color-picker__alpha\"\n                min={0}\n                max={100}\n                value={Math.round(activeHsv.a * 100)}\n                aria-label={messages.colorPicker.alpha}\n                style={{ '--leaf-alpha-color': opaqueColor } as CSSProperties}\n                onChange={(event) => change({ ...activeHsv, a: Number(event.target.value) / 100 })}\n                onPointerUp={() => onChangeComplete?.(latest.current)}\n                onKeyUp={() => onChangeComplete?.(latest.current)}\n              />\n            )}\n          </div>\n        </div>\n        <fieldset className=\"leaf-color-picker__formats\" aria-label={messages.colorPicker.value}>\n          {(['hex', 'rgb', 'hsl'] as const).map((next) => (\n            <button\n              type=\"button\"\n              key={next}\n              aria-pressed={format === next}\n              onClick={() => {\n                if (formatProp === undefined) setFormat(next);\n                onFormatChange?.(next);\n              }}\n            >\n              {next.toUpperCase()}\n            </button>\n          ))}\n        </fieldset>\n        <input\n          className=\"leaf-color-picker__input\"\n          aria-label={messages.colorPicker.value}\n          aria-invalid={invalid || undefined}\n          aria-describedby={invalid ? `${id}-error` : undefined}\n          value={input}\n          onChange={(event) => {\n            setInput(event.target.value);\n            setInvalid(false);\n          }}\n          onBlur={chooseText}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              chooseText();\n            }\n          }}\n        />\n        {invalid && (\n          <span className=\"leaf-color-picker__error\" id={`${id}-error`}>\n            {messages.colorPicker.invalid}\n          </span>\n        )}\n        {(\n          presets ?? [\n            {\n              label: messages.colorPicker.presets,\n              colors: [\n                '#20834a',\n                '#13a8a8',\n                '#1677ff',\n                '#7654c6',\n                '#ffc53d',\n                '#f49b23',\n                '#ef5350',\n                '#203329',\n              ],\n            },\n          ]\n        ).map((group, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: Preset groups are static descriptions supplied by the consumer.\n          <div className=\"leaf-color-picker__presets\" key={index}>\n            <div className=\"leaf-color-picker__preset-label\">{group.label}</div>\n            <div>\n              {[...new Set(group.colors)].map((preset) => (\n                <button\n                  type=\"button\"\n                  key={preset}\n                  className=\"leaf-color-picker__preset\"\n                  aria-label={preset}\n                  aria-pressed={\n                    new TinyColor(preset).toHex8String() === new TinyColor(activeHsv).toHex8String()\n                  }\n                  style={{\n                    background: preset,\n                    color: new TinyColor(preset).isLight() ? '#203329' : '#fff',\n                  }}\n                  onClick={() => change(new TinyColor(preset).toHsv(), true)}\n                >\n                  {new TinyColor(preset).toHex8String() ===\n                    new TinyColor(activeHsv).toHex8String() && (\n                    <Check size={12} aria-hidden=\"true\" />\n                  )}\n                </button>\n              ))}\n            </div>\n          </div>\n        ))}\n      </FloatingPanel>\n    </>\n  );\n}\n\nexport function ColorPicker(rawProps: ColorPickerProps) {\n  const props = useComponentProps('ColorPicker', rawProps);\n  return props.mode === 'gradient' || props.gradient ? (\n    <GradientColorPicker {...props} />\n  ) : (\n    <SolidColorPicker {...props} />\n  );\n}\n"],"names":["clamp","value","Math","SolidColorPicker","defaultValue","onChange","onChangeComplete","formatProp","defaultFormat","onFormatChange","disableAlpha","showText","allowClear","presets","size","statusProp","requiredProp","popupWidth","onOpenChange","gradient","_mode","controlledOpen","defaultOpen","popupClassName","popupStyle","popupRender","popupPlacement","getPopupContainer","readOnly","disabledProp","name","form","className","style","label","props","messages","useLeafConfig","field","useFormField","disabled","required","status","undefined","trigger","useRef","root","panel","current","setCurrent","useFieldValue","internalFormat","setFormat","useState","format","open","setOpen","usePopupState","id","useId","color","TinyColor","hsv","rememberedHue","setRememberedHue","coordinates","setCoordinates","activeHsv","serialize","next","normalized","display","input","setInput","invalid","setInvalid","latest","useEffect","close","useFloatingDismiss","change","complete","result","chooseText","areaChange","event","rect","areaKey","step","previewColor","hueColor","opaqueColor","clearable","Boolean","classes","X","FormValue","FloatingPanel","Number","group","index","Set","preset","Check","ColorPicker","rawProps","useComponentProps","GradientColorPicker"],"mappings":"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"}

package/dist/esm/browser/modules/colorpicker/gradient.js

@@ -1,18 +1,20 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/colorpicker.css';
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TinyColor } from "@ctrl/tinycolor";
 import { Plus, X } from "lucide-react";
 import { useId, useRef, useState } from "react";
-import { Button } from "../button/index.js";
+import { ButtonControl } from "../button/button.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { FieldScope, useFormField } from "../form/form.js";
-import { InputNumber } from "../inputnumber/index.js";
+import { InputNumberControl } from "../inputnumber/inputnumber.js";
 import { classes } from "../shared/classes.js";
 import { FormValue, useFieldValue } from "../shared/field.js";
 import { FloatingPanel, useFloatingDismiss, usePopupState } from "../shared/floating.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 import { useText } from "../shared/use-text.js";
-import { Slider } from "../slider/index.js";
+import { SliderControl } from "../slider/slider.js";
 import { SolidColorPicker } from "./colorpicker.js";
 function gradientString({ angle, stops }) {
     return `linear-gradient(${angle}deg, ${[
@@ -54,6 +56,7 @@ const defaultGradient = {
 const initial = gradientString(defaultGradient);
 function GradientColorPicker({ value, defaultValue = initial, onChange, onChangeComplete, size = 'md', disabled: disabledProp, readOnly, allowClear = false, status: statusProp, format, defaultFormat, onFormatChange, disableAlpha, presets, gradient: _gradient, mode: _mode, name, form, required, open: controlledOpen, defaultOpen, onOpenChange, popupWidth = 300, popupClassName, popupStyle, popupRender, popupPlacement, getPopupContainer, showText, className, style, id, ...props }) {
     const field = useFormField(), { messages } = useLeafConfig(), t = useText();
+    const formatText = useFormattedText();
     const disabled = disabledProp || field?.disabled;
     const status = statusProp ?? (field?.error ? 'error' : void 0);
     const trigger = useRef(null), panel = useRef(null), root = useRef(null);
@@ -104,6 +107,18 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                 style: style,
                 "data-status": status,
                 "data-disabled": disabled || void 0,
+                "data-readonly": readOnly || void 0,
+                "data-open": open || void 0,
+                onMouseDown: (event)=>{
+                    if (!disabled && event.target === event.currentTarget) event.preventDefault();
+                },
+                onClick: (event)=>{
+                    if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    trigger.current?.focus();
+                    trigger.current?.click();
+                },
                 children: [
                     /*#__PURE__*/ jsxs("button", {
                         ...props,
@@ -112,7 +127,7 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                         form: form,
                         id: id ?? field?.id,
                         disabled: disabled,
-                        "aria-label": props['aria-label'] ?? (field?.labelId ? void 0 : messages.color),
+                        "aria-label": props['aria-label'] ?? (field?.labelId ? void 0 : messages.colorPicker.label),
                         "aria-labelledby": props['aria-labelledby'] ?? field?.labelId,
                         "aria-describedby": [
                             props['aria-describedby'],
@@ -139,14 +154,14 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                             }),
                             showText && /*#__PURE__*/ jsx("span", {
                                 className: "leaf-color-picker__text",
-                                children: 'function' == typeof showText ? showText(current) : current ? t('渐变', 'Gradient') : messages.color
+                                children: 'function' == typeof showText ? showText(current) : current ? t('colorPicker.gradient') : messages.colorPicker.label
                             })
                         ]
                     }),
                     allowClear && current && !disabled && !readOnly && /*#__PURE__*/ jsx("button", {
                         type: "button",
                         className: "leaf-color-picker__clear",
-                        "aria-label": messages.clearColor,
+                        "aria-label": messages.colorPicker.clear,
                         onClick: ()=>{
                             setCurrent('');
                             onChange?.('');
@@ -175,7 +190,7 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                 width: popupWidth,
                 id: panelId,
                 role: "dialog",
-                "aria-label": messages.color,
+                "aria-label": messages.colorPicker.label,
                 className: [
                     'leaf-floating',
                     'leaf-color-picker__gradient',
@@ -198,17 +213,19 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                             children: [
                                 model.stops.map((stop, index)=>/*#__PURE__*/ jsx("button", {
                                         type: "button",
-                                        "aria-label": `${t('色标', 'Color stop')} ${index + 1}`,
+                                        "aria-label": formatText('colorPicker.colorStop', {
+                                            index: index + 1
+                                        }),
                                         "aria-pressed": active === index,
                                         style: {
                                             background: stop.color
                                         },
                                         onClick: ()=>setActive(index)
                                     }, stop.key)),
-                                /*#__PURE__*/ jsx(Button, {
+                                /*#__PURE__*/ jsx(ButtonControl, {
                                     size: "sm",
                                     variant: "ghost",
-                                    "aria-label": t('增加色标', 'Add color stop'),
+                                    "aria-label": t('colorPicker.addColorStop'),
                                     startIcon: /*#__PURE__*/ jsx(Plus, {
                                         size: 14
                                     }),
@@ -228,10 +245,10 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                                         setActive(model.stops.length);
                                     }
                                 }),
-                                /*#__PURE__*/ jsx(Button, {
+                                /*#__PURE__*/ jsx(ButtonControl, {
                                     size: "sm",
                                     variant: "ghost",
-                                    "aria-label": t('删除色标', 'Remove color stop'),
+                                    "aria-label": t('colorPicker.removeColorStop'),
                                     startIcon: /*#__PURE__*/ jsx(X, {
                                         size: 14
                                     }),
@@ -250,7 +267,7 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                             className: "leaf-color-picker__gradient-field",
                             children: [
                                 /*#__PURE__*/ jsx("span", {
-                                    children: t('颜色', 'Color')
+                                    children: t('colorPicker.color')
                                 }),
                                 /*#__PURE__*/ jsx(SolidColorPicker, {
                                     value: selected.color,
@@ -273,10 +290,10 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                             className: "leaf-color-picker__gradient-field",
                             children: [
                                 /*#__PURE__*/ jsx("span", {
-                                    children: t('位置', 'Position')
+                                    children: t('colorPicker.position')
                                 }),
-                                /*#__PURE__*/ jsx(Slider, {
-                                    "aria-label": t('色标位置', 'Color stop position'),
+                                /*#__PURE__*/ jsx(SliderControl, {
+                                    "aria-label": t('colorPicker.colorStopPosition'),
                                     value: selected.offset,
                                     onChange: (offset)=>changeStop({
                                             offset
@@ -289,10 +306,10 @@ function GradientColorPicker({ value, defaultValue = initial, onChange, onChange
                             className: "leaf-color-picker__gradient-field",
                             children: [
                                 /*#__PURE__*/ jsx("span", {
-                                    children: t('角度', 'Angle')
+                                    children: t('colorPicker.angle')
                                 }),
-                                /*#__PURE__*/ jsx(InputNumber, {
-                                    "aria-label": t('渐变角度', 'Gradient angle'),
+                                /*#__PURE__*/ jsx(InputNumberControl, {
+                                    "aria-label": t('colorPicker.gradientAngle'),
                                     min: 0,
                                     max: 360,
                                     value: model.angle,

package/dist/esm/browser/modules/colorpicker/gradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorpicker/gradient.js","sources":["../../../../../src/colorpicker/gradient.tsx"],"sourcesContent":["import { TinyColor } from '@ctrl/tinycolor';\nimport { Plus, X } from 'lucide-react';\nimport { useId, useRef, useState } from 'react';\nimport { Button } from '../button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { FieldScope, useFormField } from '../form/form';\nimport { InputNumber } from '../inputnumber';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport { FloatingPanel, useFloatingDismiss, usePopupState } from '../shared/floating';\nimport { useText } from '../shared/use-text';\nimport { Slider } from '../slider';\nimport { type ColorPickerProps, SolidColorPicker } from './colorpicker';\nexport interface ColorGradientStop {\n  key?: string;\n  color: string;\n  offset: number;\n}\nexport interface ColorGradient {\n  angle: number;\n  stops: readonly ColorGradientStop[];\n}\nexport function gradientString({ angle, stops }: ColorGradient) {\n  return `linear-gradient(${angle}deg, ${[...stops]\n    .sort((a, b) => a.offset - b.offset)\n    .map((stop) => `${stop.color} ${stop.offset}%`)\n    .join(', ')})`;\n}\nexport function parseGradient(value: string): ColorGradient | null {\n  const match = value.match(/^linear-gradient\\(\\s*([+-]?[\\d.]+)deg\\s*,([\\s\\S]+)\\)$/i);\n  if (!match) return null;\n  const pieces = (match[2] ?? '').split(/,(?![^()]*\\))/);\n  const stops: ColorGradientStop[] = [];\n  for (const piece of pieces) {\n    const stop = piece.trim().match(/^(.+?)\\s+([\\d.]+)%$/);\n    if (!stop || !new TinyColor(stop[1]).isValid) return null;\n    stops.push({ color: stop[1] ?? '', offset: Math.min(100, Math.max(0, Number(stop[2]))) });\n  }\n  const angle = Number(match[1]);\n  return stops.length >= 2 && Number.isFinite(angle) ? { angle, stops } : null;\n}\nconst defaultGradient: ColorGradient = {\n  angle: 90,\n  stops: [\n    { color: '#20834a', offset: 0 },\n    { color: '#83cf9e', offset: 100 },\n  ],\n};\nconst initial = gradientString(defaultGradient);\nexport function GradientColorPicker({\n  value,\n  defaultValue = initial,\n  onChange,\n  onChangeComplete,\n  size = 'md',\n  disabled: disabledProp,\n  readOnly,\n  allowClear = false,\n  status: statusProp,\n  format,\n  defaultFormat,\n  onFormatChange,\n  disableAlpha,\n  presets,\n  gradient: _gradient,\n  mode: _mode,\n  name,\n  form,\n  required,\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange,\n  popupWidth = 300,\n  popupClassName,\n  popupStyle,\n  popupRender,\n  popupPlacement,\n  getPopupContainer,\n  showText,\n  className,\n  style,\n  id,\n  ...props\n}: ColorPickerProps) {\n  const field = useFormField(),\n    { messages } = useLeafConfig(),\n    t = useText();\n  const disabled = disabledProp || field?.disabled;\n  const status = statusProp ?? (field?.error ? 'error' : undefined);\n  const trigger = useRef<HTMLButtonElement>(null),\n    panel = useRef<HTMLDivElement>(null),\n    root = useRef<HTMLSpanElement>(null);\n  const panelId = useId();\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const [open, setOpen] = usePopupState(\n      disabled || readOnly,\n      onOpenChange,\n      controlledOpen,\n      defaultOpen,\n    ),\n    [active, setActive] = useState(0);\n  const serial = useRef(0);\n  const cache = useRef<{ value: string; model: ColorGradient } | null>(null);\n  if (cache.current?.value !== current)\n    cache.current = {\n      value: current,\n      model: {\n        ...(parseGradient(current) ?? defaultGradient),\n        stops: (parseGradient(current) ?? defaultGradient).stops.map((stop) => ({\n          ...stop,\n          key: `${panelId}-${++serial.current}`,\n        })),\n      },\n    };\n  const model = cache.current.model;\n  const selected = model.stops[Math.min(active, model.stops.length - 1)] ??\n    defaultGradient.stops[0] ?? { color: '#20834a', offset: 0 };\n  const change = (next: ColorGradient, complete = false) => {\n    if (disabled || readOnly) return;\n    const text = gradientString(next);\n    cache.current = { value: text, model: next };\n    setCurrent(text);\n    if (text !== current) onChange?.(text);\n    if (complete) onChangeComplete?.(text);\n  };\n  const changeStop = (patch: Partial<ColorGradientStop>, complete = false) =>\n    change(\n      {\n        ...model,\n        stops: model.stops.map((stop, index) =>\n          index === Math.min(active, model.stops.length - 1) ? { ...stop, ...patch } : stop,\n        ),\n      },\n      complete,\n    );\n  useFloatingDismiss(open, () => setOpen(false), trigger, panel, root);\n  return (\n    <>\n      <span\n        ref={root}\n        className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}\n        style={style}\n        data-status={status}\n        data-disabled={disabled || undefined}\n      >\n        <button\n          {...props}\n          ref={trigger}\n          type={props.type ?? 'button'}\n          form={form}\n          id={id ?? field?.id}\n          disabled={disabled}\n          aria-label={props['aria-label'] ?? (field?.labelId ? undefined : messages.color)}\n          aria-labelledby={props['aria-labelledby'] ?? field?.labelId}\n          aria-describedby={\n            [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n          }\n          aria-invalid={status === 'error' || props['aria-invalid']}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          className=\"leaf-color-picker__trigger\"\n          onClick={(event) => {\n            props.onClick?.(event);\n            if (!event.defaultPrevented) setOpen(!open);\n          }}\n        >\n          <span className=\"leaf-color-picker__swatch\" aria-hidden=\"true\">\n            <i style={{ background: current || 'transparent' }} />\n          </span>\n          {showText && (\n            <span className=\"leaf-color-picker__text\">\n              {typeof showText === 'function'\n                ? showText(current)\n                : current\n                  ? t('渐变', 'Gradient')\n                  : messages.color}\n            </span>\n          )}\n        </button>\n        {allowClear && current && !disabled && !readOnly && (\n          <button\n            type=\"button\"\n            className=\"leaf-color-picker__clear\"\n            aria-label={messages.clearColor}\n            onClick={() => {\n              setCurrent('');\n              onChange?.('');\n              onChangeComplete?.('');\n              trigger.current?.focus();\n            }}\n          >\n            <X size={14} aria-hidden=\"true\" />\n          </button>\n        )}\n        <FormValue\n          name={name}\n          form={form}\n          value={current}\n          required={required ?? field?.required}\n          disabled={disabled}\n          triggerRef={trigger}\n        />\n      </span>\n      <FloatingPanel\n        open={open}\n        triggerRef={trigger}\n        panelRef={panel}\n        width={popupWidth}\n        id={panelId}\n        role=\"dialog\"\n        aria-label={messages.color}\n        className={['leaf-floating', 'leaf-color-picker__gradient', popupClassName]\n          .filter(Boolean)\n          .join(' ')}\n        style={popupStyle}\n        render={popupRender}\n        placement={popupPlacement}\n        container={getPopupContainer}\n      >\n        <FieldScope>\n          <div className=\"leaf-color-picker__gradient-preview\" style={{ background: current }} />\n          <div className=\"leaf-color-picker__stops\">\n            {model.stops.map((stop, index) => (\n              <button\n                key={stop.key}\n                type=\"button\"\n                aria-label={`${t('色标', 'Color stop')} ${index + 1}`}\n                aria-pressed={active === index}\n                style={{ background: stop.color }}\n                onClick={() => setActive(index)}\n              />\n            ))}\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              aria-label={t('增加色标', 'Add color stop')}\n              startIcon={<Plus size={14} />}\n              disabled={model.stops.length >= 10}\n              onClick={() => {\n                change(\n                  {\n                    ...model,\n                    stops: [\n                      ...model.stops,\n                      { color: selected.color, offset: 50, key: `${panelId}-${++serial.current}` },\n                    ],\n                  },\n                  true,\n                );\n                setActive(model.stops.length);\n              }}\n            />\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              aria-label={t('删除色标', 'Remove color stop')}\n              startIcon={<X size={14} />}\n              disabled={model.stops.length <= 2}\n              onClick={() => {\n                change(\n                  { ...model, stops: model.stops.filter((_, index) => index !== active) },\n                  true,\n                );\n                setActive(0);\n              }}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('颜色', 'Color')}</span>\n            <SolidColorPicker\n              value={selected.color}\n              onChange={(color) => changeStop({ color })}\n              onChangeComplete={(color) => changeStop({ color }, true)}\n              showText\n              disableAlpha={disableAlpha}\n              presets={presets}\n              format={format}\n              defaultFormat={defaultFormat}\n              onFormatChange={onFormatChange}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('位置', 'Position')}</span>\n            <Slider\n              aria-label={t('色标位置', 'Color stop position')}\n              value={selected.offset}\n              onChange={(offset) => changeStop({ offset })}\n              onChangeComplete={() => onChangeComplete?.(current)}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('角度', 'Angle')}</span>\n            <InputNumber\n              aria-label={t('渐变角度', 'Gradient angle')}\n              min={0}\n              max={360}\n              value={model.angle}\n              onChange={(angle) => {\n                if (angle !== null) change({ ...model, angle }, true);\n              }}\n              suffix=\"°\"\n            />\n          </div>\n        </FieldScope>\n      </FloatingPanel>\n    </>\n  );\n}\n"],"names":["gradientString","angle","stops","a","b","stop","parseGradient","value","match","pieces","piece","TinyColor","Math","Number","defaultGradient","initial","GradientColorPicker","defaultValue","onChange","onChangeComplete","size","disabledProp","readOnly","allowClear","statusProp","format","defaultFormat","onFormatChange","disableAlpha","presets","_gradient","_mode","name","form","required","controlledOpen","defaultOpen","onOpenChange","popupWidth","popupClassName","popupStyle","popupRender","popupPlacement","getPopupContainer","showText","className","style","id","props","field","useFormField","messages","useLeafConfig","t","useText","disabled","status","undefined","trigger","useRef","panel","root","panelId","useId","current","setCurrent","useFieldValue","open","setOpen","usePopupState","active","setActive","useState","serial","cache","model","selected","change","next","complete","text","changeStop","patch","index","useFloatingDismiss","classes","Boolean","event","X","FormValue","FloatingPanel","FieldScope","Button","Plus","_","SolidColorPicker","color","Slider","offset","InputNumber"],"mappings":"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"}
+{"version":3,"file":"colorpicker/gradient.js","sources":["../../../../../src/colorpicker/gradient.tsx"],"sourcesContent":["import { TinyColor } from '@ctrl/tinycolor';\nimport { Plus, X } from 'lucide-react';\nimport { useId, useRef, useState } from 'react';\nimport { ButtonControl } from '../button/button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { FieldScope, useFormField } from '../form/form';\nimport { InputNumberControl as InputNumber } from '../inputnumber/inputnumber';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport { FloatingPanel, useFloatingDismiss, usePopupState } from '../shared/floating';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\nimport { SliderControl as Slider } from '../slider/slider';\nimport { type ColorPickerProps, SolidColorPicker } from './colorpicker';\nexport interface ColorGradientStop {\n  key?: string;\n  color: string;\n  offset: number;\n}\nexport interface ColorGradient {\n  angle: number;\n  stops: readonly ColorGradientStop[];\n}\nexport function gradientString({ angle, stops }: ColorGradient) {\n  return `linear-gradient(${angle}deg, ${[...stops]\n    .sort((a, b) => a.offset - b.offset)\n    .map((stop) => `${stop.color} ${stop.offset}%`)\n    .join(', ')})`;\n}\nexport function parseGradient(value: string): ColorGradient | null {\n  const match = value.match(/^linear-gradient\\(\\s*([+-]?[\\d.]+)deg\\s*,([\\s\\S]+)\\)$/i);\n  if (!match) return null;\n  const pieces = (match[2] ?? '').split(/,(?![^()]*\\))/);\n  const stops: ColorGradientStop[] = [];\n  for (const piece of pieces) {\n    const stop = piece.trim().match(/^(.+?)\\s+([\\d.]+)%$/);\n    if (!stop || !new TinyColor(stop[1]).isValid) return null;\n    stops.push({ color: stop[1] ?? '', offset: Math.min(100, Math.max(0, Number(stop[2]))) });\n  }\n  const angle = Number(match[1]);\n  return stops.length >= 2 && Number.isFinite(angle) ? { angle, stops } : null;\n}\nconst defaultGradient: ColorGradient = {\n  angle: 90,\n  stops: [\n    { color: '#20834a', offset: 0 },\n    { color: '#83cf9e', offset: 100 },\n  ],\n};\nconst initial = gradientString(defaultGradient);\nexport function GradientColorPicker({\n  value,\n  defaultValue = initial,\n  onChange,\n  onChangeComplete,\n  size = 'md',\n  disabled: disabledProp,\n  readOnly,\n  allowClear = false,\n  status: statusProp,\n  format,\n  defaultFormat,\n  onFormatChange,\n  disableAlpha,\n  presets,\n  gradient: _gradient,\n  mode: _mode,\n  name,\n  form,\n  required,\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange,\n  popupWidth = 300,\n  popupClassName,\n  popupStyle,\n  popupRender,\n  popupPlacement,\n  getPopupContainer,\n  showText,\n  className,\n  style,\n  id,\n  ...props\n}: ColorPickerProps) {\n  const field = useFormField(),\n    { messages } = useLeafConfig(),\n    t = useText();\n  const formatText = useFormattedText();\n  const disabled = disabledProp || field?.disabled;\n  const status = statusProp ?? (field?.error ? 'error' : undefined);\n  const trigger = useRef<HTMLButtonElement>(null),\n    panel = useRef<HTMLDivElement>(null),\n    root = useRef<HTMLSpanElement>(null);\n  const panelId = useId();\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const [open, setOpen] = usePopupState(\n      disabled || readOnly,\n      onOpenChange,\n      controlledOpen,\n      defaultOpen,\n    ),\n    [active, setActive] = useState(0);\n  const serial = useRef(0);\n  const cache = useRef<{ value: string; model: ColorGradient } | null>(null);\n  if (cache.current?.value !== current)\n    cache.current = {\n      value: current,\n      model: {\n        ...(parseGradient(current) ?? defaultGradient),\n        stops: (parseGradient(current) ?? defaultGradient).stops.map((stop) => ({\n          ...stop,\n          key: `${panelId}-${++serial.current}`,\n        })),\n      },\n    };\n  const model = cache.current.model;\n  const selected = model.stops[Math.min(active, model.stops.length - 1)] ??\n    defaultGradient.stops[0] ?? { color: '#20834a', offset: 0 };\n  const change = (next: ColorGradient, complete = false) => {\n    if (disabled || readOnly) return;\n    const text = gradientString(next);\n    cache.current = { value: text, model: next };\n    setCurrent(text);\n    if (text !== current) onChange?.(text);\n    if (complete) onChangeComplete?.(text);\n  };\n  const changeStop = (patch: Partial<ColorGradientStop>, complete = false) =>\n    change(\n      {\n        ...model,\n        stops: model.stops.map((stop, index) =>\n          index === Math.min(active, model.stops.length - 1) ? { ...stop, ...patch } : stop,\n        ),\n      },\n      complete,\n    );\n  useFloatingDismiss(open, () => setOpen(false), trigger, panel, root);\n  return (\n    <>\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on the outer row forward to the keyboard-accessible trigger button. */}\n      {/* biome-ignore lint/a11y/useKeyWithClickEvents: The enclosed native button owns keyboard interaction; this wrapper only extends its hit area. */}\n      <span\n        ref={root}\n        className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}\n        style={style}\n        data-status={status}\n        data-disabled={disabled || undefined}\n        data-readonly={readOnly || undefined}\n        data-open={open || undefined}\n        onMouseDown={(event) => {\n          if (!disabled && event.target === event.currentTarget) event.preventDefault();\n        }}\n        onClick={(event) => {\n          if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n          event.preventDefault();\n          event.stopPropagation();\n          trigger.current?.focus();\n          trigger.current?.click();\n        }}\n      >\n        <button\n          {...props}\n          ref={trigger}\n          type={props.type ?? 'button'}\n          form={form}\n          id={id ?? field?.id}\n          disabled={disabled}\n          aria-label={\n            props['aria-label'] ?? (field?.labelId ? undefined : messages.colorPicker.label)\n          }\n          aria-labelledby={props['aria-labelledby'] ?? field?.labelId}\n          aria-describedby={\n            [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n          }\n          aria-invalid={status === 'error' || props['aria-invalid']}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          className=\"leaf-color-picker__trigger\"\n          onClick={(event) => {\n            props.onClick?.(event);\n            if (!event.defaultPrevented) setOpen(!open);\n          }}\n        >\n          <span className=\"leaf-color-picker__swatch\" aria-hidden=\"true\">\n            <i style={{ background: current || 'transparent' }} />\n          </span>\n          {showText && (\n            <span className=\"leaf-color-picker__text\">\n              {typeof showText === 'function'\n                ? showText(current)\n                : current\n                  ? t('colorPicker.gradient')\n                  : messages.colorPicker.label}\n            </span>\n          )}\n        </button>\n        {allowClear && current && !disabled && !readOnly && (\n          <button\n            type=\"button\"\n            className=\"leaf-color-picker__clear\"\n            aria-label={messages.colorPicker.clear}\n            onClick={() => {\n              setCurrent('');\n              onChange?.('');\n              onChangeComplete?.('');\n              trigger.current?.focus();\n            }}\n          >\n            <X size={14} aria-hidden=\"true\" />\n          </button>\n        )}\n        <FormValue\n          name={name}\n          form={form}\n          value={current}\n          required={required ?? field?.required}\n          disabled={disabled}\n          triggerRef={trigger}\n        />\n      </span>\n      <FloatingPanel\n        open={open}\n        triggerRef={trigger}\n        panelRef={panel}\n        width={popupWidth}\n        id={panelId}\n        role=\"dialog\"\n        aria-label={messages.colorPicker.label}\n        className={['leaf-floating', 'leaf-color-picker__gradient', popupClassName]\n          .filter(Boolean)\n          .join(' ')}\n        style={popupStyle}\n        render={popupRender}\n        placement={popupPlacement}\n        container={getPopupContainer}\n      >\n        <FieldScope>\n          <div className=\"leaf-color-picker__gradient-preview\" style={{ background: current }} />\n          <div className=\"leaf-color-picker__stops\">\n            {model.stops.map((stop, index) => (\n              <button\n                key={stop.key}\n                type=\"button\"\n                aria-label={formatText('colorPicker.colorStop', { index: index + 1 })}\n                aria-pressed={active === index}\n                style={{ background: stop.color }}\n                onClick={() => setActive(index)}\n              />\n            ))}\n            <ButtonControl\n              size=\"sm\"\n              variant=\"ghost\"\n              aria-label={t('colorPicker.addColorStop')}\n              startIcon={<Plus size={14} />}\n              disabled={model.stops.length >= 10}\n              onClick={() => {\n                change(\n                  {\n                    ...model,\n                    stops: [\n                      ...model.stops,\n                      { color: selected.color, offset: 50, key: `${panelId}-${++serial.current}` },\n                    ],\n                  },\n                  true,\n                );\n                setActive(model.stops.length);\n              }}\n            />\n            <ButtonControl\n              size=\"sm\"\n              variant=\"ghost\"\n              aria-label={t('colorPicker.removeColorStop')}\n              startIcon={<X size={14} />}\n              disabled={model.stops.length <= 2}\n              onClick={() => {\n                change(\n                  { ...model, stops: model.stops.filter((_, index) => index !== active) },\n                  true,\n                );\n                setActive(0);\n              }}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('colorPicker.color')}</span>\n            <SolidColorPicker\n              value={selected.color}\n              onChange={(color) => changeStop({ color })}\n              onChangeComplete={(color) => changeStop({ color }, true)}\n              showText\n              disableAlpha={disableAlpha}\n              presets={presets}\n              format={format}\n              defaultFormat={defaultFormat}\n              onFormatChange={onFormatChange}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('colorPicker.position')}</span>\n            <Slider\n              aria-label={t('colorPicker.colorStopPosition')}\n              value={selected.offset}\n              onChange={(offset) => changeStop({ offset })}\n              onChangeComplete={() => onChangeComplete?.(current)}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('colorPicker.angle')}</span>\n            <InputNumber\n              aria-label={t('colorPicker.gradientAngle')}\n              min={0}\n              max={360}\n              value={model.angle}\n              onChange={(angle) => {\n                if (angle !== null) change({ ...model, angle }, true);\n              }}\n              suffix=\"°\"\n            />\n          </div>\n        </FieldScope>\n      </FloatingPanel>\n    </>\n  );\n}\n"],"names":["gradientString","angle","stops","a","b","stop","parseGradient","value","match","pieces","piece","TinyColor","Math","Number","defaultGradient","initial","GradientColorPicker","defaultValue","onChange","onChangeComplete","size","disabledProp","readOnly","allowClear","statusProp","format","defaultFormat","onFormatChange","disableAlpha","presets","_gradient","_mode","name","form","required","controlledOpen","defaultOpen","onOpenChange","popupWidth","popupClassName","popupStyle","popupRender","popupPlacement","getPopupContainer","showText","className","style","id","props","field","useFormField","messages","useLeafConfig","t","useText","formatText","useFormattedText","disabled","status","undefined","trigger","useRef","panel","root","panelId","useId","current","setCurrent","useFieldValue","open","setOpen","usePopupState","active","setActive","useState","serial","cache","model","selected","change","next","complete","text","changeStop","patch","index","useFloatingDismiss","classes","event","Boolean","X","FormValue","FloatingPanel","FieldScope","ButtonControl","Plus","_","SolidColorPicker","color","Slider","offset","InputNumber"],"mappings":"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"}