@cube-dev/ui-kit 0.0.0-canary-7a50d11 → 0.0.0-canary-4f9d7d0

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\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/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\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 ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\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 color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\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 trigger. */\n  shouldFlip?: boolean;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from the field tooltip. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\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    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\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    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        mobileType=\"tray\"\n        placement=\"bottom start\"\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          icon={<ColorSwatch color={color} styles={swatchStyles} />}\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  aria-label=\"Color value\"\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label=\"Palette\"\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":["Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\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/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\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 ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\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 color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\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 trigger. */\n  shouldFlip?: boolean;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from the field tooltip. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\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    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\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    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        mobileType=\"tray\"\n        placement=\"bottom start\"\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          icon={<ColorSwatch color={color} styles={swatchStyles} />}\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  aria-label=\"Color value\"\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label=\"Palette\"\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

package/dist/components/fields/{color → ColorSwatch}/ColorSwatch.d.ts

@@ -1,12 +1,18 @@
 
-import { ColorValue } from "./color.js";
+import { ColorValue } from "../color/color.js";
 import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
 
-//#region src/components/fields/color/ColorSwatch.d.ts
+//#region src/components/fields/ColorSwatch/ColorSwatch.d.ts
 interface CubeColorSwatchProps extends BaseProps, BaseStyleProps, OuterStyleProps, BlockStyleProps, DimensionStyleProps {
   /** The color to show. Anything the color inputs accept; `null` shows the empty state. */
   color?: string | ColorValue | null;
+  /**
+   * The edge of the swatch: 20px, 24px or 28px. Left unset, the swatch tracks
+   * the control around it — `1x` inside its height — and falls back to `medium`
+   * where there is no control.
+   */
+  size?: 'small' | 'medium' | 'large' | (string & {});
   styles?: Styles;
 }
 /**

package/dist/components/fields/{color → ColorSwatch}/ColorSwatch.js

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
-import { parseColor, toHex } from "./color.js";
+import { parseColor, toHex } from "../color/color.js";
 import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/components/fields/color/ColorSwatch.tsx
+//#region src/components/fields/ColorSwatch/ColorSwatch.tsx
 const STYLE_PROPS = [
 	...BASE_STYLES,
 	...OUTER_STYLES,
@@ -16,8 +16,15 @@ const SwatchElement = tasty({
 	qa: "ColorSwatch",
 	styles: {
 		display: "block",
-		width: "2.5x",
-		height: "2.5x",
+		"$swatch-host": {
+			"": "($size, 4x)",
+			"size=small": "3.5x",
+			"size=medium": "4x",
+			"size=large": "4.5x"
+		},
+		"$swatch-size": "($swatch-host - 1x)",
+		width: "$swatch-size $swatch-size",
+		height: "$swatch-size $swatch-size",
 		radius: "1r",
 		fill: {
 			"": "(#color-picker, #clear)",
@@ -38,12 +45,13 @@ const SwatchElement = tasty({
 * so the swatch keeps a single cached style rule however often it changes.
 */
 const ColorSwatch = forwardRef(function ColorSwatch(props, ref) {
-	const { color, mods, qa } = props;
+	const { color, mods, qa, size } = props;
 	const styles = extractStyles(props, STYLE_PROPS);
 	const resolved = typeof color === "string" ? parseColor(color) : color ?? null;
 	return /* @__PURE__ */ jsx(SwatchElement, {
 		ref,
 		qa,
+		"data-size": size,
 		mods: {
 			empty: !resolved,
 			...mods

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","names":[],"sources":["../../../../src/components/fields/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\nimport { ColorValue, parseColor, toHex } from '../color/color';\n\nconst STYLE_PROPS = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...DIMENSION_STYLES,\n];\n\nconst SwatchElement = tasty({\n  qa: 'ColorSwatch',\n  styles: {\n    display: 'block',\n\n    /**\n     * The control the swatch sits in, when there is one.\n     *\n     * `Item`, `Button` and `TextInputBase` all publish their own height as\n     * `$size`, and a custom property reaches any descendant — so a swatch in an\n     * icon, prefix or suffix slot reads the host's height without either side\n     * knowing about the other. `$swatch-host` is the fallback chain: an explicit\n     * `size` pins it, and outside a control the medium default stands in.\n     *\n     * The named sizes are stated as the *host* they would fit, not as the swatch\n     * itself, so the `- 1x` below is the single place the inset is expressed.\n     */\n    '$swatch-host': {\n      // `var(--size, 4x)` — a host wins, and 32px is a medium control.\n      '': '($size, 4x)',\n      // An explicit size ignores the host: these are 28/32/36, one `1x` above\n      // the 20/24/28 the swatch ends up at.\n      'size=small': '3.5x',\n      'size=medium': '4x',\n      'size=large': '4.5x',\n    },\n    '$swatch-size': '($swatch-host - 1x)',\n\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    radius: '1r',\n    fill: {\n      '': '(#color-picker, #clear)',\n      empty: '#clear',\n    },\n    shadow: 'inset 0 0 0 1bw #dark.15',\n    // A single diagonal stroke is the conventional \"no color\" swatch.\n    image: {\n      '': false,\n      empty:\n        'linear-gradient(to bottom right, #clear 46%, #danger 46%, #danger 54%, #clear 54%)',\n    },\n  },\n});\n\nexport interface CubeColorSwatchProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The color to show. Anything the color inputs accept; `null` shows the empty state. */\n  color?: string | ColorValue | null;\n  /**\n   * The edge of the swatch: 20px, 24px or 28px. Left unset, the swatch tracks\n   * the control around it — `1x` inside its height — and falls back to `medium`\n   * where there is no control.\n   */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n}\n\n/**\n * A square of color. Decorative on its own — pair it with the value as text, or\n * with a control that names it.\n *\n * The color travels as an inline custom property rather than through `styles`,\n * so the swatch keeps a single cached style rule however often it changes.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(\n  props: CubeColorSwatchProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { color, mods, qa, size } = props;\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  const resolved =\n    typeof color === 'string' ? parseColor(color) : color ?? null;\n\n  return (\n    <SwatchElement\n      ref={ref}\n      qa={qa}\n      data-size={size}\n      mods={{ empty: !resolved, ...mods }}\n      styles={styles}\n      style={resolved ? { '--color-picker-color': toHex(resolved) } : undefined}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAkBA,MAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,SAAS;EAcT,gBAAgB;GAEd,IAAI;GAGJ,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACD,gBAAgB;EAEhB,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,OAAO;GACR;EACD,QAAQ;EAER,OAAO;GACL,IAAI;GACJ,OACE;GACH;EACF;CACF,CAAC;;;;;;;;AA0BF,MAAa,cAAc,WAAW,SAAS,YAC7C,OACA,KACA;CACA,MAAM,EAAE,OAAO,MAAM,IAAI,SAAS;CAClC,MAAM,SAAS,cAAc,OAAO,YAAY;CAEhD,MAAM,WACJ,OAAO,UAAU,WAAW,WAAW,MAAM,GAAG,SAAS;AAE3D,QACE,oBAAC;EACM;EACD;EACJ,aAAW;EACX,MAAM;GAAE,OAAO,CAAC;GAAU,GAAG;GAAM;EAC3B;EACR,OAAO,WAAW,EAAE,wBAAwB,MAAM,SAAS,EAAE,GAAG;GAChE;EAEJ"}

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

@@ -0,0 +1,2 @@
+
+import { ColorSwatch, CubeColorSwatchProps } from "./ColorSwatch.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | 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";

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/MonthPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/PeriodPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/QuarterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/WeekPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/YearPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/period.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { CalendarDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/period.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/FilterPicker/FilterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Input/Input.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { TextInput } from "../TextInput/TextInput.js";
 import { _FileInput } from "../FileInput/FileInput.js";
 import { _NumberInput } from "../NumberInput/NumberInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/ListBox/ListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Portal } from "../../portal/Portal.js";

package/dist/components/fields/ListBoxPopover/listNavigation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { useCallback, useEffect, useRef } from "react";
 
 //#region src/components/fields/ListBoxPopover/useCompositeFocus.ts

package/dist/components/fields/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableNumberValue } from "../../../utils/react/nullableValue.js";

package/dist/components/fields/NumberInput/StepButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";

package/dist/components/fields/PasswordInput/PasswordInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/Picker/Picker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/RadioGroup/Radio.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";
@@ -29,6 +29,7 @@ const RadioGroupElement = tasty({
 			"": "0",
 			tabs: ".5x"
 		},
+		boxSizing: "border-box",
 		radius: true,
 		fill: {
 			"": "#clear",

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormContext, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n  extends BaseProps,\n    Omit<AriaRadioGroupProps, 'errorMessage'>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  groupStyles?: Styles;\n  orientation?: 'horizontal' | 'vertical';\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /* Size for all radio buttons in the group */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance */\n  buttonType?: CubeItemProps['type'];\n  /* Visual type for all radios in the group: radio (default), button, or tabs */\n  type?: 'radio' | 'button' | 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n  qa: 'RadioGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n      'horizontal & tabs': 'row',\n    },\n    padding: {\n      '': '0',\n      tabs: '.5x',\n    },\n    radius: true,\n    fill: {\n      '': '#clear',\n      'tabs | disabled': '#surface-4',\n    },\n    width: 'max-content max-content initial',\n    flexShrink: 0,\n    gap: {\n      '': '1x',\n      button: 0,\n      tabs: '.5x',\n    },\n    whiteSpace: 'nowrap',\n    // Keyboard focus ring on the group, shown only for button/tabs layouts\n    // where individual items are visually merged (button-group) or share a\n    // single chrome (tabs) — the classic vertical radio list already shows\n    // a per-item focus ring on the radio circle.\n    outline: {\n      '': '1bw #primary-text.0 / 1bw',\n      'focused & (button | tabs)': '1bw #primary-text / 1bw',\n    },\n  },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = props.orientation;\n\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    id,\n    isDisabled,\n    isRequired,\n    labelPosition = 'top',\n    isInvalid,\n    isValid,\n    children,\n    styles,\n    groupStyles,\n    insideForm,\n    // orientation, // ignore orientation since it came from the form context\n    labelProps: baseLabelProps,\n    size,\n    buttonType,\n    type,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n  let state = useRadioGroupState(props);\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n    { ...props, orientation },\n    state,\n  );\n\n  // Keyboard-only focus ring on the group container (button/tabs layouts).\n  // `within: true` tracks focus on any descendant radio. We read\n  // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n  // clicks on a radio focus the input but leave `isFocusVisible` false.\n  let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n    useFocusRing({ within: true });\n\n  let radioGroup = (\n    <RadioGroupElement\n      id={id}\n      qa={qa || 'RadioGroup'}\n      styles={styles}\n      data-input-type=\"radiogroup\"\n      data-radio-button-group={type === 'button' ? '' : undefined}\n      mods={{\n        horizontal: orientation === 'horizontal',\n        'inside-form': insideForm,\n        'side-label': labelPosition === 'side',\n        button: type === 'button',\n        tabs: type === 'tabs',\n        focused: isFocusWithinVisible,\n      }}\n      {...groupFocusProps}\n    >\n      <FormContext.Provider\n        value={{\n          isRequired,\n          isInvalid,\n          isValid,\n          isDisabled,\n        }}\n      >\n        <RadioContext.Provider\n          value={{\n            state,\n            name: props.name,\n            size,\n            buttonType,\n            type,\n            isDisabled,\n          }}\n        >\n          {children}\n        </RadioContext.Provider>\n      </FormContext.Provider>\n    </RadioGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    fieldProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACZ,qBAAqB;GACtB;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EACD,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACpB;EACD,OAAO;EACP,YAAY;EACZ,KAAK;GACH,IAAI;GACJ,QAAQ;GACR,MAAM;GACP;EACD,YAAY;EAKZ,SAAS;GACP,IAAI;GACJ,6BAA6B;GAC9B;EACF;CACF,CAAC;AAEF,SAAS,WAAW,OAA+C,KAAK;CACtE,IAAI,cAAc,MAAM;AAExB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,SACA,UACA,QACA,aACA,YAEA,YAAY,gBACZ,MACA,YACA,MACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAE9B,UAAS,cAAc,YAAY,kBAAkB,OAAO;CAE5D,IAAI,QAAQ,mBAAmB,MAAM;AAGrC,KAAI,eAAe,KACjB,eACE,SAAS,YAAY,SAAS,SAAS,eAAe;CAG1D,IAAI,EAAE,iBAAiB,YAAY,eAAe,cAChD;EAAE,GAAG;EAAO;EAAa,EACzB,MACD;CAMD,IAAI,EAAE,gBAAgB,sBAAsB,YAAY,oBACtD,aAAa,EAAE,QAAQ,MAAM,CAAC;AA2ChC,QAAO,cAxCL,oBAAC;EACK;EACJ,IAAI,MAAM;EACF;EACR,mBAAgB;EAChB,2BAAyB,SAAS,WAAW,KAAK;EAClD,MAAM;GACJ,YAAY,gBAAgB;GAC5B,eAAe;GACf,cAAc,kBAAkB;GAChC,QAAQ,SAAS;GACjB,MAAM,SAAS;GACf,SAAS;GACV;EACD,GAAI;YAEJ,oBAAC,YAAY;GACX,OAAO;IACL;IACA;IACA;IACA;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACH;GACL,EAGW,QAAQ;EACvC,GAAG;EACH;EACA,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,cAAc,WAAW,WAAW;AAE1C,AAAC,YAAoB,gBAAgB;AACrC,YAAY,cAAc"}
+{"version":3,"file":"RadioGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormContext, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n  extends BaseProps,\n    Omit<AriaRadioGroupProps, 'errorMessage'>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  groupStyles?: Styles;\n  orientation?: 'horizontal' | 'vertical';\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /* Size for all radio buttons in the group */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance */\n  buttonType?: CubeItemProps['type'];\n  /* Visual type for all radios in the group: radio (default), button, or tabs */\n  type?: 'radio' | 'button' | 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n  qa: 'RadioGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n      'horizontal & tabs': 'row',\n    },\n    padding: {\n      '': '0',\n      tabs: '.5x',\n    },\n    // The tabs layout is the only one with padding, and a caller that gives the\n    // group an explicit width (`width: 100%` inside a popover, say) means the\n    // box it can see. Without this the padding is added on top and the group\n    // overhangs its container by `1x`.\n    boxSizing: 'border-box',\n    radius: true,\n    fill: {\n      '': '#clear',\n      'tabs | disabled': '#surface-4',\n    },\n    width: 'max-content max-content initial',\n    flexShrink: 0,\n    gap: {\n      '': '1x',\n      button: 0,\n      tabs: '.5x',\n    },\n    whiteSpace: 'nowrap',\n    // Keyboard focus ring on the group, shown only for button/tabs layouts\n    // where individual items are visually merged (button-group) or share a\n    // single chrome (tabs) — the classic vertical radio list already shows\n    // a per-item focus ring on the radio circle.\n    outline: {\n      '': '1bw #primary-text.0 / 1bw',\n      'focused & (button | tabs)': '1bw #primary-text / 1bw',\n    },\n  },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = props.orientation;\n\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    id,\n    isDisabled,\n    isRequired,\n    labelPosition = 'top',\n    isInvalid,\n    isValid,\n    children,\n    styles,\n    groupStyles,\n    insideForm,\n    // orientation, // ignore orientation since it came from the form context\n    labelProps: baseLabelProps,\n    size,\n    buttonType,\n    type,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n  let state = useRadioGroupState(props);\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n    { ...props, orientation },\n    state,\n  );\n\n  // Keyboard-only focus ring on the group container (button/tabs layouts).\n  // `within: true` tracks focus on any descendant radio. We read\n  // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n  // clicks on a radio focus the input but leave `isFocusVisible` false.\n  let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n    useFocusRing({ within: true });\n\n  let radioGroup = (\n    <RadioGroupElement\n      id={id}\n      qa={qa || 'RadioGroup'}\n      styles={styles}\n      data-input-type=\"radiogroup\"\n      data-radio-button-group={type === 'button' ? '' : undefined}\n      mods={{\n        horizontal: orientation === 'horizontal',\n        'inside-form': insideForm,\n        'side-label': labelPosition === 'side',\n        button: type === 'button',\n        tabs: type === 'tabs',\n        focused: isFocusWithinVisible,\n      }}\n      {...groupFocusProps}\n    >\n      <FormContext.Provider\n        value={{\n          isRequired,\n          isInvalid,\n          isValid,\n          isDisabled,\n        }}\n      >\n        <RadioContext.Provider\n          value={{\n            state,\n            name: props.name,\n            size,\n            buttonType,\n            type,\n            isDisabled,\n          }}\n        >\n          {children}\n        </RadioContext.Provider>\n      </FormContext.Provider>\n    </RadioGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    fieldProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACZ,qBAAqB;GACtB;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EAKD,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACpB;EACD,OAAO;EACP,YAAY;EACZ,KAAK;GACH,IAAI;GACJ,QAAQ;GACR,MAAM;GACP;EACD,YAAY;EAKZ,SAAS;GACP,IAAI;GACJ,6BAA6B;GAC9B;EACF;CACF,CAAC;AAEF,SAAS,WAAW,OAA+C,KAAK;CACtE,IAAI,cAAc,MAAM;AAExB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,SACA,UACA,QACA,aACA,YAEA,YAAY,gBACZ,MACA,YACA,MACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAE9B,UAAS,cAAc,YAAY,kBAAkB,OAAO;CAE5D,IAAI,QAAQ,mBAAmB,MAAM;AAGrC,KAAI,eAAe,KACjB,eACE,SAAS,YAAY,SAAS,SAAS,eAAe;CAG1D,IAAI,EAAE,iBAAiB,YAAY,eAAe,cAChD;EAAE,GAAG;EAAO;EAAa,EACzB,MACD;CAMD,IAAI,EAAE,gBAAgB,sBAAsB,YAAY,oBACtD,aAAa,EAAE,QAAQ,MAAM,CAAC;AA2ChC,QAAO,cAxCL,oBAAC;EACK;EACJ,IAAI,MAAM;EACF;EACR,mBAAgB;EAChB,2BAAyB,SAAS,WAAW,KAAK;EAClD,MAAM;GACJ,YAAY,gBAAgB;GAC5B,eAAe;GACf,cAAc,kBAAkB;GAChC,QAAQ,SAAS;GACjB,MAAM,SAAS;GACf,SAAS;GACV;EACD,GAAI;YAEJ,oBAAC,YAAY;GACX,OAAO;IACL;IACA;IACA;IACA;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACH;GACL,EAGW,QAAQ;EACvC,GAAG;EACH;EACA,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,cAAc,WAAW,WAAW;AAE1C,AAAC,YAAoB,gBAAgB;AACrC,YAAY,cAAc"}

package/dist/components/fields/RadioGroup/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/RadioGroup/context.ts

package/dist/components/fields/SearchComboBox/SearchComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";

package/dist/components/fields/SearchInput/SearchInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/Select/Select.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/Slider/Gradation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { SliderGradationElement, SliderGradeElement } from "./elements.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/Slider/HueSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7a50d11 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4f9d7d0 | Cube Dev Team */
 import { __Slider } from "./Slider.js";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -16,6 +16,18 @@ const HUE_STOPS = [
 const HUE_SATURATION = 80;
 const HUE_LIGHTNESS = 50;
 const HUE_GRADIENT = HUE_STOPS.map((h) => `okhsl(${h} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`).join(", ");
+/**
+* A hue is an angle, so the value label says so.
+*
+* `unitDisplay: 'narrow'` is what turns `23 deg` into `23°`. Left to the plain
+* number, a caller who wanted the unit had to put it in the label — which then
+* repeated the value the slider already prints beside it.
+*/
+const HUE_FORMAT_OPTIONS = {
+	style: "unit",
+	unit: "degree",
+	unitDisplay: "narrow"
+};
 const horizontalTrackStyles = {
 	image: `linear-gradient(to right, ${HUE_GRADIENT})`,
 	Fill: false
@@ -25,7 +37,7 @@ const verticalTrackStyles = {
 	Fill: false
 };
 function HueSlider(props, ref) {
-	const { value, defaultValue = 0, onChange, orientation = "horizontal", thumbTokens: userThumbTokens, thumbStyles: userThumbStyles, trackStyles: userTrackStyles, ...rest } = props;
+	const { value, defaultValue = 0, onChange, orientation = "horizontal", formatOptions = HUE_FORMAT_OPTIONS, thumbTokens: userThumbTokens, thumbStyles: userThumbStyles, trackStyles: userTrackStyles, ...rest } = props;
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const currentHue = value ?? internalValue;
 	const handleChange = useCallback((newValue) => {
@@ -43,6 +55,7 @@ function HueSlider(props, ref) {
 		defaultValue,
 		orientation,
 		maxValue: 359,
+		formatOptions,
 		thumbStyles: useMemo(() => ({
 			outline: {
 				"": "1bw #slider-thumb-hovered.0",