@cube-dev/ui-kit 0.0.0-canary-51d2ebf → 0.0.0-canary-0d616fa

package/dist/components/fields/ColorInput/ColorInput.js

@@ -1,230 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-51d2ebf | Cube Dev Team */
-import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
-import { PipetteIcon } from "../../../icons/PipetteIcon.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
-import { Dialog } from "../../overlays/Dialog/Dialog.js";
-import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
-import { TextInputBase } from "../TextInput/TextInputBase.js";
-import { detectFormat, formatColor, parseColor } from "../color/color.js";
-import { ColorSwatch } from "../color/ColorSwatch.js";
-import { ColorPanel } from "../color/ColorPanel.js";
-import { useIsInsideColorPopover } from "../color/context.js";
-import { tasty } from "@tenphi/tasty";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTextField } from "react-aria";
-
-//#region src/components/fields/ColorInput/ColorInput.tsx
-/**
-* A popover caps its height at half the viewport. The panel can exceed that on
-* a short screen, and would otherwise spill outside the popover's own border.
-*/
-const POPOVER_STYLES = { overflow: "auto" };
-/** What the popover starts from when there is no color to edit yet. */
-const FALLBACK_COLOR = {
-	h: 264,
-	s: .8,
-	l: .6
-};
-const ColorInputTrigger = tasty(ItemAction, {
-	qa: "ColorInputTrigger",
-	icon: /* @__PURE__ */ jsx(PipetteIcon, {})
-});
-/**
-* A color field: the color as text, a swatch of the current value, and a
-* popover to dial it in across OKHST, OKLCH and RGB.
-*/
-const ColorInput = forwardRef(function ColorInput(allProps, ref) {
-	const props = useFieldProps(allProps, {
-		defaultValidationTrigger: "onBlur",
-		valuePropsMapper: ({ value, onChange }) => ({
-			value,
-			onChange
-		})
-	});
-	const { qa, value, defaultValue, onChange, format = "hex", formatMode = "forced", defaultSpace = "hst", isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, placeholder = "Pick a color", size, isDisabled, isReadOnly, isInvalid, isValid, isLoading, autoFocus, inputStyles, triggerStyles, swatchStyles, labelProps: userLabelProps, onBlur: userOnBlur, onFocus, label, description, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, id } = props;
-	const isInsidePopover = useIsInsideColorPopover();
-	const initialText = (value ?? defaultValue ?? "").toString();
-	const [text, setText] = useState(() => {
-		const parsed = parseColor(initialText);
-		return parsed && formatMode === "forced" ? formatColor(parsed, format) : initialText;
-	});
-	const [color, setColor] = useState(() => parseColor(initialText));
-	const [space, setSpace] = useState(defaultSpace);
-	const [isOpen, setOpen] = useState(defaultOpen ?? false);
-	const targetRef = useRef(null);
-	const inputRef = useRef(null);
-	/** The last text that parsed, so an invalid entry has something to fall back to. */
-	const validText = useRef(parseColor(initialText) ? text : "");
-	/** What was last handed to `onChange`, to tell our own updates from outside ones. */
-	const emitted = useRef(value);
-	const emit = useEvent((next) => {
-		emitted.current = next;
-		onChange?.(next);
-	});
-	/** The notation a value should be written in, given the current text. */
-	const outputFormat = (source) => formatMode === "forced" ? format : detectFormat(source) ?? format;
-	useEffect(() => {
-		if (value === void 0 || value === emitted.current) return;
-		emitted.current = value;
-		const raw = (value ?? "").toString();
-		const parsed = parseColor(raw);
-		const nextText = parsed && formatMode === "forced" ? formatColor(parsed, format) : raw;
-		setColor(parsed);
-		setText(nextText);
-		validText.current = parsed ? nextText : "";
-	}, [
-		value,
-		format,
-		formatMode
-	]);
-	const handleTextChange = useEvent((nextText) => {
-		setText(nextText);
-		if (!nextText.trim()) {
-			setColor(null);
-			validText.current = "";
-			emit(null);
-			return;
-		}
-		const parsed = parseColor(nextText);
-		if (!parsed) return;
-		setColor(parsed);
-		validText.current = nextText;
-		emit(formatMode === "free" ? nextText.trim() : formatColor(parsed, outputFormat(nextText)));
-	});
-	/** Resolve whatever is in the input into a real color, or undo it. */
-	const settle = useEvent(() => {
-		if (!text.trim()) return;
-		const parsed = parseColor(text);
-		if (!parsed) {
-			setText(validText.current);
-			return;
-		}
-		if (formatMode === "forced") setText(formatColor(parsed, format));
-	});
-	/**
-	* Focusing offers the whole value up for replacement, the way a hex field
-	* does. The string is the unit of editing here: a single channel is tuned
-	* with the sliders, not by hand-editing one number inside `oklch(…)`.
-	*
-	* Read off the event rather than `inputRef`, which `TextInputBase` re-points
-	* through `useCombinedRefs`.
-	*/
-	const handleFocus = useEvent((event) => {
-		event.currentTarget.select();
-		onFocus?.(event);
-	});
-	/**
-	* A click would otherwise drop a caret and undo that selection — the browser
-	* applies it after the focus handler has run. Suppressing the default action
-	* of the focusing press means no caret is ever placed; focus is then moved
-	* here instead, which selects.
-	*
-	* Only the press that *takes* focus is suppressed, so clicking a field that
-	* already has focus still positions the caret, and dragging still selects a
-	* range.
-	*/
-	const handleMouseDown = useEvent((event) => {
-		if (document.activeElement === event.currentTarget) return;
-		event.preventDefault();
-		event.currentTarget.focus();
-	});
-	const handleBlur = useEvent((event) => {
-		settle();
-		userOnBlur?.(event);
-	});
-	const handleKeyDown = useEvent((event) => {
-		if (event.key === "Enter") settle();
-	});
-	const handleColorChange = useEvent((nextColor) => {
-		const nextText = formatColor(nextColor, outputFormat(text));
-		setColor(nextColor);
-		setText(nextText);
-		validText.current = nextText;
-		emit(nextText);
-	});
-	const handleOpenChange = useEvent((next) => {
-		setOpen(next);
-		onOpenChange?.(next);
-	});
-	const { labelProps, inputProps } = useTextField({
-		id,
-		label,
-		description,
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledby,
-		"aria-describedby": ariaDescribedby,
-		isDisabled,
-		isReadOnly,
-		isInvalid,
-		autoFocus,
-		placeholder,
-		value: text,
-		type: "text",
-		onChange: handleTextChange,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
-		onKeyDown: handleKeyDown
-	}, inputRef);
-	return /* @__PURE__ */ jsx(TextInputBase, {
-		...props,
-		ref,
-		qa: qa || "ColorInput",
-		size,
-		autocomplete: "off",
-		icon: /* @__PURE__ */ jsx(ColorSwatch, {
-			color,
-			styles: swatchStyles
-		}),
-		inputRef,
-		inputProps: {
-			...inputProps,
-			spellCheck: false,
-			onMouseDown: handleMouseDown
-		},
-		inputStyles,
-		labelProps: mergeProps$1(labelProps, userLabelProps),
-		wrapperRef: targetRef,
-		isDisabled,
-		isReadOnly,
-		isInvalid,
-		isValid,
-		isLoading,
-		suffixPosition: "after",
-		suffix: isInsidePopover ? null : /* @__PURE__ */ jsxs(DialogTrigger, {
-			hideArrow: true,
-			type: "popover",
-			mobileType: "tray",
-			placement: "bottom right",
-			targetRef,
-			isOpen: controlledOpen ?? isOpen,
-			shouldFlip,
-			onOpenChange: handleOpenChange,
-			children: [/* @__PURE__ */ jsx(ColorInputTrigger, {
-				size,
-				"aria-label": "Open the color picker",
-				isDisabled: isDisabled || isReadOnly,
-				styles: triggerStyles
-			}), /* @__PURE__ */ jsx(Dialog, {
-				"aria-label": "Color picker",
-				width: "max-content",
-				styles: POPOVER_STYLES,
-				children: /* @__PURE__ */ jsx(ColorPanel, {
-					color: color ?? FALLBACK_COLOR,
-					space,
-					isDisabled: isDisabled || isReadOnly,
-					previewFormat: outputFormat(text),
-					onChange: handleColorChange,
-					onSpaceChange: setSpace
-				})
-			})]
-		})
-	});
-});
-ColorInput.cubeInputType = "Text";
-
-//#endregion
-export { ColorInput };
-//# sourceMappingURL=ColorInput.js.map

package/dist/components/fields/ColorInput/ColorInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BaseStyleProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { PipetteIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  detectFormat,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\n/**\n * How the text in the input relates to the committed value.\n *\n * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n *   and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n *   normalized in whichever notation the text is written in.\n * - `free` — the text *is* the value, verbatim. It is still verified, so an\n *   unparsable entry falls back to the last valid one.\n */\nexport type ColorInputFormatMode = 'forced' | 'derive' | 'free';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorInputTrigger = tasty(ItemAction, {\n  qa: 'ColorInputTrigger',\n  icon: <PipetteIcon />,\n});\n\nexport interface CubeColorInputProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FieldBaseProps {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the normalized color string, or `null` when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in, and the one `forced` mode displays. */\n  format?: ColorFormat;\n  /** How strictly the input text is tied to `format`. */\n  formatMode?: ColorInputFormatMode;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the input. */\n  shouldFlip?: boolean;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /** The size of the input. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  styles?: Styles;\n  /** Styles of the text input element. */\n  inputStyles?: Styles;\n  /** Styles of the popover trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch shown inside the input. */\n  swatchStyles?: Styles;\n}\n\n/**\n * A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n */\nexport const ColorInput = forwardRef(function ColorInput(\n  allProps: CubeColorInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    formatMode = 'forced',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    placeholder = 'Pick a color',\n    size,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    isLoading,\n    autoFocus,\n    inputStyles,\n    triggerStyles,\n    swatchStyles,\n    labelProps: userLabelProps,\n    onBlur: userOnBlur,\n    onFocus,\n    label,\n    description,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    id,\n  } = props;\n\n  // Already inside a color popover: this is the value field for that popover,\n  // so it must not offer a popover of its own.\n  const isInsidePopover = useIsInsideColorPopover();\n\n  const initialText = (value ?? defaultValue ?? '').toString();\n  const [text, setText] = useState(() => {\n    const parsed = parseColor(initialText);\n\n    return parsed && formatMode === 'forced'\n      ? formatColor(parsed, format)\n      : initialText;\n  });\n  const [color, setColor] = useState(() => parseColor(initialText));\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  const targetRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  /** The last text that parsed, so an invalid entry has something to fall back to. */\n  const validText = useRef(parseColor(initialText) ? text : '');\n  /** What was last handed to `onChange`, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  const emit = useEvent((next: string | null) => {\n    emitted.current = next;\n    onChange?.(next);\n  });\n\n  /** The notation a value should be written in, given the current text. */\n  const outputFormat = (source: string): ColorFormat =>\n    formatMode === 'forced' ? format : detectFormat(source) ?? format;\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n\n    const raw = (value ?? '').toString();\n    const parsed = parseColor(raw);\n    const nextText =\n      parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n    setColor(parsed);\n    setText(nextText);\n    validText.current = parsed ? nextText : '';\n  }, [value, format, formatMode]);\n\n  const handleTextChange = useEvent((nextText: string) => {\n    setText(nextText);\n\n    if (!nextText.trim()) {\n      setColor(null);\n      validText.current = '';\n      emit(null);\n\n      return;\n    }\n\n    const parsed = parseColor(nextText);\n\n    // Half-typed input keeps the last valid color, so the value stays a real\n    // color at every keystroke.\n    if (!parsed) return;\n\n    setColor(parsed);\n    validText.current = nextText;\n    emit(\n      formatMode === 'free'\n        ? nextText.trim()\n        : formatColor(parsed, outputFormat(nextText)),\n    );\n  });\n\n  /** Resolve whatever is in the input into a real color, or undo it. */\n  const settle = useEvent(() => {\n    if (!text.trim()) return;\n\n    const parsed = parseColor(text);\n\n    if (!parsed) {\n      setText(validText.current);\n\n      return;\n    }\n\n    if (formatMode === 'forced') setText(formatColor(parsed, format));\n  });\n\n  /**\n   * Focusing offers the whole value up for replacement, the way a hex field\n   * does. The string is the unit of editing here: a single channel is tuned\n   * with the sliders, not by hand-editing one number inside `oklch(…)`.\n   *\n   * Read off the event rather than `inputRef`, which `TextInputBase` re-points\n   * through `useCombinedRefs`.\n   */\n  const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    event.currentTarget.select();\n    onFocus?.(event);\n  });\n\n  /**\n   * A click would otherwise drop a caret and undo that selection — the browser\n   * applies it after the focus handler has run. Suppressing the default action\n   * of the focusing press means no caret is ever placed; focus is then moved\n   * here instead, which selects.\n   *\n   * Only the press that *takes* focus is suppressed, so clicking a field that\n   * already has focus still positions the caret, and dragging still selects a\n   * range.\n   */\n  const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n    if (document.activeElement === event.currentTarget) return;\n\n    event.preventDefault();\n    event.currentTarget.focus();\n  });\n\n  const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    settle();\n    userOnBlur?.(event);\n  });\n\n  const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') settle();\n  });\n\n  const handleColorChange = useEvent((nextColor: ColorValue) => {\n    const nextText = formatColor(nextColor, outputFormat(text));\n\n    setColor(nextColor);\n    setText(nextText);\n    validText.current = nextText;\n    emit(nextText);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  const { labelProps, inputProps } = useTextField(\n    {\n      id,\n      label,\n      description,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      isDisabled,\n      isReadOnly,\n      isInvalid,\n      autoFocus,\n      placeholder,\n      value: text,\n      type: 'text',\n      onChange: handleTextChange,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    inputRef,\n  );\n\n  return (\n    <TextInputBase\n      {...props}\n      ref={ref}\n      qa={qa || 'ColorInput'}\n      size={size}\n      autocomplete=\"off\"\n      icon={<ColorSwatch color={color} styles={swatchStyles} />}\n      inputRef={inputRef}\n      inputProps={{\n        ...inputProps,\n        spellCheck: false,\n        onMouseDown: handleMouseDown,\n      }}\n      inputStyles={inputStyles}\n      labelProps={mergeProps(labelProps, userLabelProps)}\n      wrapperRef={targetRef}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      isLoading={isLoading}\n      // The validation state reads left of the trigger, the way `DateInputBase`\n      // orders it for the date pickers.\n      suffixPosition=\"after\"\n      suffix={\n        isInsidePopover ? null : (\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={controlledOpen ?? isOpen}\n            shouldFlip={shouldFlip}\n            onOpenChange={handleOpenChange}\n          >\n            <ColorInputTrigger\n              size={size}\n              aria-label=\"Open the color picker\"\n              isDisabled={isDisabled || isReadOnly}\n              styles={triggerStyles}\n            />\n            <Dialog\n              aria-label=\"Color picker\"\n              width=\"max-content\"\n              styles={POPOVER_STYLES}\n            >\n              <ColorPanel\n                color={color ?? FALLBACK_COLOR}\n                space={space}\n                isDisabled={isDisabled || isReadOnly}\n                previewFormat={outputFormat(text)}\n                onChange={handleColorChange}\n                onSpaceChange={setSpace}\n              />\n            </Dialog>\n          </DialogTrigger>\n        )\n      }\n    />\n  );\n});\n\n(ColorInput as any).cubeInputType = 'Text';\n"],"mappings":"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"}

package/dist/components/fields/ColorInput/index.d.ts

@@ -1,2 +0,0 @@
-
-import { ColorInput, ColorInputFormatMode, CubeColorInputProps } from "./ColorInput.js";

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.d.ts

@@ -1,50 +0,0 @@
-
-import { FieldBaseProps } from "../../../shared/form.js";
-import "../../../shared/index.js";
-import { ColorFormat } from "../color/color.js";
-import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
-import * as react from "react";
-
-//#region src/components/fields/ColorSwatchGroup/ColorSwatchGroup.d.ts
-/** A swatch: a color, and optionally a name to announce instead of the color. */
-type CubeColorSwatchItem = string | {
-  color: string;
-  label?: string;
-};
-interface CubeColorSwatchGroupProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps {
-  /** The colors to offer. Duplicates of the same color are dropped. */
-  colors?: CubeColorSwatchItem[];
-  /** The selected color (controlled). */
-  value?: string | null;
-  /** The selected color (uncontrolled). */
-  defaultValue?: string | null;
-  /** Called with the chosen color, written in `format`. */
-  onChange?: (value: string | null) => void;
-  /** Notation the value is written in. */
-  format?: ColorFormat;
-  /** How many swatches per row. Defaults to a single row. */
-  columns?: number;
-  /**
-   * Append a `ColorPicker` for colors outside the set. Ignored inside a color
-   * popover, which is where that picker would otherwise recurse.
-   */
-  allowCustom?: boolean;
-  /** The size of each swatch. */
-  size?: 'small' | 'medium' | 'large' | (string & {});
-  styles?: Styles;
-  /** Styles of an individual swatch. */
-  swatchStyles?: Styles;
-  'aria-label'?: string;
-}
-/**
- * A grid of color swatches, one of which can be selected — the palette half of
- * choosing a color, where `ColorPicker` is the freeform half.
- *
- * Swatches are keyed by their canonical hex, so the same color written two ways
- * collapses into one entry. Equivalent colors would otherwise make selection
- * ambiguous.
- */
-declare const ColorSwatchGroup: react.ForwardRefExoticComponent<CubeColorSwatchGroupProps & react.RefAttributes<HTMLElement>>;
-//#endregion
-export { ColorSwatchGroup, CubeColorSwatchGroupProps, CubeColorSwatchItem };
-//# sourceMappingURL=ColorSwatchGroup.d.ts.map

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js

@@ -1,269 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-51d2ebf | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
-import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
-import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
-import { wrapWithField } from "../../form/wrapper.js";
-import { HiddenInput } from "../../HiddenInput.js";
-import { formatColor, parseColor, toHex } from "../color/color.js";
-import { useIsInsideColorPopover } from "../color/context.js";
-import { ColorPicker } from "../ColorPicker/ColorPicker.js";
-import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
-import { forwardRef, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRadio, useRadioGroup } from "react-aria";
-import { useRadioGroupState } from "react-stately";
-import { useObjectRef } from "@react-aria/utils";
-
-//#region src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx
-/**
-* Two rings drawn inside the swatch, as React Aria marks selection. Outer ring
-* first: earlier shadows paint over later ones, so this reads as 2bw of
-* `#surface-text` at the edge and 2bw of `#surface` within it. Two tones that
-* flip with the scheme stay visible against any color the swatch holds.
-*/
-const SELECTED_RING = "inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface";
-/** The swatch edge in px, per size. `Item` takes an exact number. */
-const SWATCH_PX = {
-	small: 16,
-	medium: 20,
-	large: 24
-};
-/**
-* The trailing picker is a button wrapping a swatch, which would otherwise read
-* as a box inside a box. Stripping its chrome leaves just the swatch, so it
-* sits in the row as one of them.
-*/
-const CUSTOM_TRIGGER_STYLES = {
-	width: "$swatch-size $swatch-size",
-	height: "$swatch-size $swatch-size",
-	padding: 0,
-	radius: "1r",
-	border: 0,
-	position: "relative"
-};
-/**
-* The swatch is docked over the whole button rather than placed inside it.
-* `Item` lays its icon out in a grid that reserves room for a label even when
-* there is none, which left the swatch a pixel off centre.
-*/
-const CUSTOM_SWATCH_STYLES = {
-	position: "absolute",
-	inset: 0,
-	width: "auto",
-	height: "auto",
-	radius: "1r"
-};
-/**
-* The ring goes on the swatch, not on the button around it: an inset shadow
-* paints under child content, and the swatch covers the button edge to edge.
-*/
-const CUSTOM_SWATCH_SELECTED_STYLES = {
-	...CUSTOM_SWATCH_STYLES,
-	shadow: SELECTED_RING
-};
-const GroupElement = tasty({
-	qa: "ColorSwatchGroup",
-	styles: {
-		display: {
-			"": "flex",
-			columns: "grid"
-		},
-		flow: {
-			"": "row wrap",
-			columns: "row"
-		},
-		gap: ".5x",
-		placeItems: {
-			"": "center start",
-			columns: "stretch"
-		},
-		width: {
-			"": "auto",
-			columns: "max-content"
-		},
-		gridColumns: "repeat($columns, max-content)",
-		"$swatch-size": {
-			"": "2.5x",
-			"size=small": "2x",
-			"size=large": "3x"
-		}
-	}
-});
-/**
-* Only the swatches belong to the radiogroup. The custom picker is a button,
-* and inside `role="radiogroup"` it both misreports what the palette holds and
-* hands arrow keys to React Aria's radio walker — pressing one while the picker
-* is focused jumps into a swatch and changes the color. The box is dropped so
-* the swatches remain direct children of the group's own layout.
-*/
-const RadiosElement = tasty({ styles: { display: "contents" } });
-const SwatchElement = tasty({
-	as: "label",
-	qa: "ColorSwatchOption",
-	styles: {
-		display: "grid",
-		placeItems: "stretch",
-		position: "relative",
-		radius: "1r",
-		cursor: {
-			"": "pointer",
-			disabled: "default"
-		},
-		width: "$swatch-size $swatch-size",
-		height: "$swatch-size $swatch-size",
-		fill: "(#color-swatch, #clear)",
-		opacity: {
-			"": 1,
-			disabled: "$disabled-opacity"
-		},
-		shadow: {
-			"": "inset 0 0 0 1bw #dark.15",
-			selected: SELECTED_RING
-		},
-		outline: {
-			"": "2bw #focus.0 / 1bw",
-			focused: "2bw #focus / 1bw"
-		},
-		transition: "theme"
-	}
-});
-function Swatch({ colorKey, label, state, isDisabled, size, styles, mods }) {
-	const inputRef = useRef(null);
-	const { inputProps, isSelected, isDisabled: isRadioDisabled } = useRadio({
-		value: colorKey,
-		"aria-label": label,
-		isDisabled
-	}, state, inputRef);
-	const { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
-	return /* @__PURE__ */ jsx(SwatchElement, {
-		"data-size": size,
-		mods: {
-			selected: isSelected,
-			disabled: isRadioDisabled,
-			focused: isFocused,
-			...mods
-		},
-		styles,
-		style: { "--color-swatch-color": colorKey },
-		children: /* @__PURE__ */ jsx(HiddenInput, {
-			...mergeProps$1(inputProps, focusProps),
-			ref: inputRef,
-			qa: "ColorSwatchInput",
-			mods: {
-				button: true,
-				disabled: isRadioDisabled
-			}
-		})
-	});
-}
-/**
-* A grid of color swatches, one of which can be selected — the palette half of
-* choosing a color, where `ColorPicker` is the freeform half.
-*
-* Swatches are keyed by their canonical hex, so the same color written two ways
-* collapses into one entry. Equivalent colors would otherwise make selection
-* ambiguous.
-*/
-const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
-	const props = useFieldProps(allProps, {
-		defaultValidationTrigger: "onChange",
-		valuePropsMapper: ({ value, onChange }) => ({
-			value,
-			onChange
-		})
-	});
-	const { qa, colors = [], value, defaultValue, onChange, format = "hex", columns, allowCustom, size = "medium", isDisabled, isInvalid, isValid, swatchStyles, "aria-label": ariaLabel } = props;
-	const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-	const isInsidePopover = useIsInsideColorPopover();
-	const showCustom = allowCustom && !isInsidePopover;
-	/** Keyed by canonical hex so the same color written two ways is one swatch. */
-	const swatches = useMemo(() => {
-		const seen = /* @__PURE__ */ new Map();
-		for (const entry of colors) {
-			const parsed = parseColor(typeof entry === "string" ? entry : entry.color);
-			if (!parsed) continue;
-			const key = toHex(parsed);
-			if (seen.has(key)) continue;
-			seen.set(key, {
-				key,
-				label: (typeof entry === "string" ? void 0 : entry.label) ?? formatColor(parsed, format)
-			});
-		}
-		return [...seen.values()];
-	}, [colors, format]);
-	const [internalValue, setInternalValue] = useState(() => defaultValue ?? null);
-	const currentValue = value !== void 0 ? value : internalValue;
-	const selectedColor = parseColor((currentValue ?? "").toString());
-	const selectedKey = selectedColor ? toHex(selectedColor) : null;
-	const isCustom = !!selectedKey && !swatches.some((s) => s.key === selectedKey);
-	const publish = useEvent((next) => {
-		if (value === void 0) setInternalValue(next);
-		onChange?.(next);
-	});
-	const handleChange = useEvent((nextKey) => {
-		const parsed = parseColor(nextKey);
-		publish(parsed ? formatColor(parsed, format) : null);
-	});
-	const state = useRadioGroupState({
-		value: selectedKey ?? null,
-		isDisabled,
-		isReadOnly: props.isReadOnly,
-		onChange: handleChange
-	});
-	const domRef = useObjectRef(ref);
-	const { radioGroupProps, labelProps } = useRadioGroup({
-		...props,
-		"aria-label": props.label ? void 0 : ariaLabel ?? "Colors",
-		orientation: "horizontal"
-	}, state);
-	return wrapWithField(/* @__PURE__ */ jsxs(GroupElement, {
-		ref: domRef,
-		qa: qa || "ColorSwatchGroup",
-		"data-size": size,
-		"data-input-type": "colorswatchgroup",
-		styles,
-		mods: {
-			...getValidationMods({
-				isInvalid,
-				isValid
-			}),
-			columns: !!columns
-		},
-		style: columns ? { "--columns": String(columns) } : void 0,
-		children: [/* @__PURE__ */ jsx(RadiosElement, {
-			...radioGroupProps,
-			children: swatches.map((swatch) => /* @__PURE__ */ jsx(Swatch, {
-				colorKey: swatch.key,
-				label: swatch.label,
-				state,
-				isDisabled,
-				size,
-				styles: swatchStyles
-			}, swatch.key))
-		}), showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
-			"aria-label": "Custom color",
-			qa: "ColorSwatchGroupCustom",
-			format,
-			type: "clear",
-			size: SWATCH_PX[size] ?? SWATCH_PX.medium,
-			value: isCustom ? currentValue ?? null : null,
-			isDisabled,
-			isReadOnly: props.isReadOnly,
-			triggerStyles: CUSTOM_TRIGGER_STYLES,
-			swatchStyles: isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES,
-			onChange: publish,
-			children: null
-		}) : null]
-	}), domRef, {
-		...props,
-		labelProps: mergeProps$1(props.labelProps, labelProps)
-	});
-});
-ColorSwatchGroup.cubeInputType = "Picker";
-
-//#endregion
-export { ColorSwatchGroup };
-//# sourceMappingURL=ColorSwatchGroup.js.map

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorSwatchGroup.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. */\nexport type CubeColorSwatchItem = string | { color: string; label?: string };\n\n/**\n * Two rings drawn inside the swatch, as React Aria marks selection. Outer ring\n * first: earlier shadows paint over later ones, so this reads as 2bw of\n * `#surface-text` at the edge and 2bw of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n */\nconst SELECTED_RING = 'inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface';\n\n/** The swatch edge in px, per size. `Item` takes an exact number. */\nconst SWATCH_PX: Record<string, number> = {\n  small: 16,\n  medium: 20,\n  large: 24,\n};\n\n/**\n * The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n */\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n  // `size` sets the control's height; the box is pinned here as well so a flex\n  // row cannot let the button size itself to its content instead.\n  width: '$swatch-size $swatch-size',\n  height: '$swatch-size $swatch-size',\n  padding: 0,\n  radius: '1r',\n  border: 0,\n  position: 'relative',\n};\n\n/**\n * The swatch is docked over the whole button rather than placed inside it.\n * `Item` lays its icon out in a grid that reserves room for a label even when\n * there is none, which left the swatch a pixel off centre.\n */\nconst CUSTOM_SWATCH_STYLES: Styles = {\n  position: 'absolute',\n  inset: 0,\n  width: 'auto',\n  height: 'auto',\n  radius: '1r',\n};\n\n/**\n * The ring goes on the swatch, not on the button around it: an inset shadow\n * paints under child content, and the swatch covers the button edge to edge.\n */\nconst CUSTOM_SWATCH_SELECTED_STYLES: Styles = {\n  ...CUSTOM_SWATCH_STYLES,\n  shadow: SELECTED_RING,\n};\n\nconst GroupElement = tasty({\n  qa: 'ColorSwatchGroup',\n  styles: {\n    // Wrapping is the better default: it is a single row wherever there is\n    // room, and folds instead of overflowing where there is not. A fixed\n    // `columns` switches to a grid, sized to the swatches rather than to the\n    // container — `1fr` tracks would stretch them apart.\n    display: {\n      '': 'flex',\n      columns: 'grid',\n    },\n    flow: {\n      '': 'row wrap',\n      columns: 'row',\n    },\n    gap: '.5x',\n    placeItems: {\n      '': 'center start',\n      columns: 'stretch',\n    },\n    width: {\n      '': 'auto',\n      columns: 'max-content',\n    },\n    gridColumns: 'repeat($columns, max-content)',\n\n    // 20px, 16px and 24px — 1x is 8px.\n    '$swatch-size': {\n      '': '2.5x',\n      'size=small': '2x',\n      'size=large': '3x',\n    },\n  },\n});\n\n/**\n * Only the swatches belong to the radiogroup. The custom picker is a button,\n * and inside `role=\"radiogroup\"` it both misreports what the palette holds and\n * hands arrow keys to React Aria's radio walker — pressing one while the picker\n * is focused jumps into a swatch and changes the color. The box is dropped so\n * the swatches remain direct children of the group's own layout.\n */\nconst RadiosElement = tasty({\n  styles: { display: 'contents' },\n});\n\nconst SwatchElement = tasty({\n  as: 'label',\n  qa: 'ColorSwatchOption',\n  styles: {\n    display: 'grid',\n    placeItems: 'stretch',\n    position: 'relative',\n    radius: '1r',\n    cursor: {\n      '': 'pointer',\n      disabled: 'default',\n    },\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    fill: '(#color-swatch, #clear)',\n    opacity: {\n      '': 1,\n      disabled: '$disabled-opacity',\n    },\n    // A ring at one border-width's distance, so the color area stays whole —\n    // the inner ring is the surface showing through as the gap. `outline` is\n    // deliberately left to the focus ring.\n    shadow: {\n      '': 'inset 0 0 0 1bw #dark.15',\n      selected: SELECTED_RING,\n    },\n    // A 1bw offset keeps the ring clear of the 4px gap to its neighbours.\n    outline: {\n      '': '2bw #focus.0 / 1bw',\n      focused: '2bw #focus / 1bw',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps {\n  /** The colors to offer. Duplicates of the same color are dropped. */\n  colors?: CubeColorSwatchItem[];\n  /** The selected color (controlled). */\n  value?: string | null;\n  /** The selected color (uncontrolled). */\n  defaultValue?: string | null;\n  /** Called with the chosen color, written in `format`. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** How many swatches per row. Defaults to a single row. */\n  columns?: number;\n  /**\n   * Append a `ColorPicker` for colors outside the set. Ignored inside a color\n   * popover, which is where that picker would otherwise recurse.\n   */\n  allowCustom?: boolean;\n  /** The size of each swatch. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n  /** Styles of an individual swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\ninterface SwatchProps {\n  colorKey: string;\n  label: string;\n  state: RadioGroupState;\n  isDisabled?: boolean;\n  size?: string;\n  styles?: Styles;\n  mods?: Record<string, boolean | undefined>;\n}\n\nfunction Swatch({\n  colorKey,\n  label,\n  state,\n  isDisabled,\n  size,\n  styles,\n  mods,\n}: SwatchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    inputProps,\n    isSelected,\n    isDisabled: isRadioDisabled,\n  } = useRadio(\n    { value: colorKey, 'aria-label': label, isDisabled },\n    state,\n    inputRef,\n  );\n  // `useRadio` reports selection but not focus, and the swatch is the only\n  // thing a keyboard user can see — without this the ring never appears.\n  const { isFocused, focusProps } = useFocus({ isDisabled }, true);\n\n  return (\n    <SwatchElement\n      data-size={size}\n      mods={{\n        selected: isSelected,\n        disabled: isRadioDisabled,\n        focused: isFocused,\n        ...mods,\n      }}\n      styles={styles}\n      style={{ '--color-swatch-color': colorKey }}\n    >\n      <HiddenInput\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        qa=\"ColorSwatchInput\"\n        mods={{ button: true, disabled: isRadioDisabled }}\n      />\n    </SwatchElement>\n  );\n}\n\n/**\n * A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n *\n * Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n */\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n  allProps: CubeColorSwatchGroupProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    colors = [],\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    columns,\n    allowCustom,\n    size = 'medium',\n    isDisabled,\n    isInvalid,\n    isValid,\n    swatchStyles,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n  const isInsidePopover = useIsInsideColorPopover();\n  // A custom picker inside a color popover would open a popover of its own.\n  const showCustom = allowCustom && !isInsidePopover;\n\n  /** Keyed by canonical hex so the same color written two ways is one swatch. */\n  const swatches = useMemo(() => {\n    const seen = new Map<string, { key: string; label: string }>();\n\n    for (const entry of colors) {\n      const raw = typeof entry === 'string' ? entry : entry.color;\n      const parsed = parseColor(raw);\n\n      if (!parsed) continue;\n\n      const key = toHex(parsed);\n\n      if (seen.has(key)) continue;\n\n      seen.set(key, {\n        key,\n        label:\n          (typeof entry === 'string' ? undefined : entry.label) ??\n          formatColor(parsed, format),\n      });\n    }\n\n    return [...seen.values()];\n  }, [colors, format]);\n\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? null,\n  );\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const selectedColor = parseColor((currentValue ?? '').toString());\n  const selectedKey = selectedColor ? toHex(selectedColor) : null;\n  const isCustom =\n    !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n  const publish = useEvent((next: string | null) => {\n    if (value === undefined) setInternalValue(next);\n\n    onChange?.(next);\n  });\n\n  const handleChange = useEvent((nextKey: string) => {\n    const parsed = parseColor(nextKey);\n\n    publish(parsed ? formatColor(parsed, format) : null);\n  });\n\n  const state = useRadioGroupState({\n    value: selectedKey ?? null,\n    isDisabled,\n    isReadOnly: props.isReadOnly,\n    onChange: handleChange,\n  });\n\n  // `useFocusableRef` wants the ref of a real focusable control to forward to,\n  // and a group of radios has no single one — `RadioGroup` takes the same\n  // approach for the same reason.\n  const domRef = useObjectRef(ref);\n  const { radioGroupProps, labelProps } = useRadioGroup(\n    {\n      ...props,\n      // Only name the group here when nothing else does: an `aria-label` set\n      // unconditionally would outrank the visible label React Aria wires up.\n      'aria-label': props.label ? undefined : ariaLabel ?? 'Colors',\n      orientation: 'horizontal',\n    },\n    state,\n  );\n\n  const group = (\n    <GroupElement\n      ref={domRef}\n      qa={qa || 'ColorSwatchGroup'}\n      data-size={size}\n      data-input-type=\"colorswatchgroup\"\n      styles={styles}\n      mods={{\n        ...getValidationMods({ isInvalid, isValid }),\n        columns: !!columns,\n      }}\n      style={columns ? { '--columns': String(columns) } : undefined}\n    >\n      <RadiosElement {...radioGroupProps}>\n        {swatches.map((swatch) => (\n          <Swatch\n            key={swatch.key}\n            colorKey={swatch.key}\n            label={swatch.label}\n            state={state}\n            isDisabled={isDisabled}\n            size={size}\n            styles={swatchStyles}\n          />\n        ))}\n      </RadiosElement>\n      {showCustom ? (\n        <ColorPicker\n          aria-label=\"Custom color\"\n          qa=\"ColorSwatchGroupCustom\"\n          format={format}\n          type=\"clear\"\n          size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n          value={isCustom ? currentValue ?? null : null}\n          isDisabled={isDisabled}\n          isReadOnly={props.isReadOnly}\n          triggerStyles={CUSTOM_TRIGGER_STYLES}\n          swatchStyles={\n            isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES\n          }\n          onChange={publish}\n        >\n          {null}\n        </ColorPicker>\n      ) : null}\n    </GroupElement>\n  );\n\n  return wrapWithField(group, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

package/dist/components/fields/ColorSwatchGroup/index.d.ts

@@ -1,2 +0,0 @@
-
-import { ColorSwatchGroup, CubeColorSwatchGroupProps, CubeColorSwatchItem } from "./ColorSwatchGroup.js";

package/dist/components/fields/color/ColorPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPanel.js","names":["Slider","Radio"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode, useMemo } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  /** Optional palette rendered under the channels. */\n  swatches?: ReactNode;\n  /** Optional value field rendered above the preview. */\n  input?: ReactNode;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body shared by `ColorInput` and `ColorPicker`: a preview, a\n * switch between the three color concepts, and one gradient slider per channel\n * of the active one.\n */\nexport function ColorPanel(props: ColorPanelProps) {\n  const {\n    color,\n    space,\n    isDisabled,\n    previewFormat,\n    swatches,\n    input,\n    onChange,\n    onSpaceChange,\n  } = props;\n\n  const colorTokens = useMemo(\n    () => ({\n      '--color-picker-color': toHex(color),\n      '--color-picker-contrast-color': getContrastingColor(color),\n    }),\n    [color],\n  );\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      {input}\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        aria-label=\"Color space\"\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n      {swatches}\n    </PanelElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;EACL,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,aAAa;CACb,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,OAAO;CACR,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,SAAS;CACT,YAAY;CACb,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,YAAY;CACZ,OAAO;CACR,EACF,CAAC;;;;;;;AAQF,MAAM,eAAuB;CAC3B,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACP;;AAGD,MAAM,eAAuB,EAC3B,QAAQ,yCACT;AAED,MAAM,eAAe,EAAE,iBAAiB,6BAA6B;AAErE,MAAM,eAAuB,EAAE,OAAO,QAAQ;AAC9C,MAAM,aAAqB,EAAE,UAAU,GAAG;AAuB1C,SAAS,WAAW,EAAE,SAAS,OAAO,YAAY,YAA6B;CAC7E,MAAM,MAAM,QAAQ,IAAI,MAAM;CAE9B,MAAM,eAAe,UAAU,UAAkB;AAC/C,WAAS,QAAQ,MAAM,OAAO,MAAM,CAAC;GACrC;AAEF,QACE;EACE,oBAAC;GAAoB,eAAY;aAC9B,QAAQ;IACW;EACtB,oBAAC;GACC,OAAO,EACL,sBAAsB,6BAA6B,QAAQ,MACzD,MACD,CAAC,IACH;aAED,oBAACA;IACC,cAAY,QAAQ;IACpB,OAAO,KAAK,IAAI,QAAQ,MAAM,MAAM,EAAE,IAAI;IAC1C,UAAU,QAAQ;IAClB,UAAU;IACV,MAAM,QAAQ;IACF;IACZ,aAAa;IACb,aAAa;IACb,aAAa;IACb,UAAU;KACV;IACkB;EACtB,oBAAC,iCAAqB,QAAQ,QAAQ,MAAM,GAAuB;KAClE;;;;;;;AASP,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,OACA,OACA,YACA,eACA,UACA,OACA,UACA,kBACE;CAEJ,MAAM,cAAc,eACX;EACL,wBAAwB,MAAM,MAAM;EACpC,iCAAiC,oBAAoB,MAAM;EAC5D,GACD,CAAC,MAAM,CACR;CAED,MAAM,oBAAoB,UAAU,UAAkB;AACpD,gBAAc,MAAoB;GAClC;AAEF,QACE,qBAAC;EAAa,OAAO;;GAClB;GACD,oBAAC,4BAAgB,YAAY,OAAO,cAAc,GAAkB;GACpE,oBAACC,QAAM;IACL,cAAW;IACX,OAAO;IACK;IACZ,QAAQ;IACR,UAAU;cAET,aAAa,KAAK,SACjB,oBAACA;KAEC,OAAO;KACP,cAAY,mBAAmB;KAC/B,SAAS,kBAAkB;KAC3B,QAAQ;eAEP,mBAAmB;OANf,KAOC,CACR;KACS;GACb,oBAAC,6BACE,SAAS,OAAO,KAAK,YACpB,oBAAC;IAEU;IACF;IACK;IACF;MAJL,GAAG,MAAM,GAAG,QAAQ,QAKzB,CACF,GACc;GACjB;;GACY"}