@livestorm/ui-vue 1.1.3 → 2.0.1

package/src/components/UiColorPicker/UiColorPicker.vue

@@ -0,0 +1,487 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import {
+  ColorAreaRoot,
+  ColorAreaArea,
+  ColorAreaThumb,
+  ColorSliderRoot,
+  ColorSliderTrack,
+  ColorSliderThumb,
+  ColorFieldRoot,
+  ColorFieldInput,
+  ColorSwatch,
+  ColorSwatchPickerRoot,
+  ColorSwatchPickerItem,
+  ColorSwatchPickerItemSwatch,
+  Label,
+  colorToHex,
+  colorToString,
+  convertToHsb,
+  convertToHsl,
+  convertToRgb,
+  isValidColor,
+  normalizeColor,
+  useId,
+} from 'reka-ui'
+import type { Color } from 'reka-ui'
+import { UiDropdown, UiDropdownTrigger, UiDropdownContent, UiDropdownItem } from '../UiDropdown'
+import type { ColorFormat, UiColorPickerPreset, UiColorPickerProps, UiColorPickerSwatchSize } from './types'
+
+const props = withDefaults(defineProps<UiColorPickerProps>(), {
+  modelValue: undefined,
+  color: undefined,
+  variant: 'default',
+  modes: () => ['hex', 'rgb', 'hsl', 'hsb'],
+  outputFormat: 'auto',
+  presetConfig: undefined,
+  selectedPresetValue: undefined,
+  showAlpha: true,
+  disabled: false,
+})
+
+// only used when the picker initialised with no color prop and modelValue is invalid or missing
+const DEFAULT_HEX = '#0B42C3'
+const presetsLabelId = useId()
+const fieldId = useId()
+
+const presets = computed(() => props.presetConfig?.presets)
+// null = heading hidden (the listbox falls back to a direct aria-label)
+const presetsLabel = computed<string | null>(() => {
+  if (props.presetConfig?.label === null) return null
+  return props.presetConfig?.label ?? 'Presets'
+})
+
+// Preset selector swatch sizes; the selection check icon scales to half the swatch.
+// maxPerRow is how many swatches (at that size + gap) fit the panel's content width.
+const SWATCH_SIZE_CLASSES: Record<UiColorPickerSwatchSize, { swatch: string; swatchPickerList: string; indicatorWrapper: string; indicator: string; maxPerRow: number }> = {
+  sm: { swatch: 'size-6', swatchPickerList: 'gap-2', indicatorWrapper: 'ring-2', indicator: 'h-3 w-3', maxPerRow: 8 },
+  lg: { swatch: 'size-12', swatchPickerList: 'gap-4', indicatorWrapper: 'ring-4', indicator: 'h-4 w-4', maxPerRow: 4 },
+}
+const swatchSizeClasses = computed(() => SWATCH_SIZE_CLASSES[props.presetConfig?.swatchSize ?? 'lg'])
+
+// Balanced column count: distribute presets over the fewest rows the cap
+// allows, evenly (6 = 3+3, 7 = 4+3).
+// Used for the swatch grid's `grid-template-columns`.
+const presetColumns = computed(() => {
+  const count = presets.value?.length ?? 0
+  if (count === 0) return 1
+  const rows = Math.ceil(count / swatchSizeClasses.value.maxPerRow)
+  return Math.ceil(count / rows)
+})
+
+const emit = defineEmits<{
+  /**
+   * Value in the currently-selected output format (e.g. '#0B42C3', 'rgb(...)')
+   * 'auto' output format emits the value in the currently-selected display mode (e.g. hex/rgb/hsl/hsb).
+   * else the value is emitted in the specified output format (e.g. hex/rgb/hsl/hsb) regardless of the display mode.
+   */
+  'update:modelValue': [value: string]
+  'update:color': [color: Color]
+  /**
+   * Identity of the selected preset (`preset.value`), for
+   * `v-model:selected-preset-value`. Emitted only when the selected preset
+   * declares a `value`. Unlike the color emits, this survives duplicate-hex
+   * presets: it reports the preset the user actually picked.
+   */
+  'update:selectedPresetValue': [value: string]
+  /** gets emitted when a value is committed (e.g., after dragging a slider or selecting a preset) */
+  'change': [value: string]
+}>()
+
+function toHsb(value: string | Color): Color {
+  return convertToHsb(normalizeColor(value))
+}
+
+const MODE_LABELS: Record<ColorFormat, string> = {
+  hex: 'HEX',
+  rgb: 'RGB',
+  hsl: 'HSL',
+  hsb: 'HSB',
+}
+
+interface ChannelDef {
+  channel: 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'lightness' | 'brightness'
+  /** Accessible name for the channel input (no visible label is rendered). */
+  label: string
+}
+
+// Each non-hex mode is composed from one reka ColorFieldRoot per channel.
+const MODE_CHANNELS: Record<Exclude<ColorFormat, 'hex'>, ChannelDef[]> = {
+  rgb: [
+    { channel: 'red', label: 'Red' },
+    { channel: 'green', label: 'Green' },
+    { channel: 'blue', label: 'Blue' },
+  ],
+  hsl: [
+    { channel: 'hue', label: 'Hue' },
+    { channel: 'saturation', label: 'Saturation' },
+    { channel: 'lightness', label: 'Lightness' },
+  ],
+  hsb: [
+    { channel: 'hue', label: 'Hue' },
+    { channel: 'saturation', label: 'Saturation' },
+    { channel: 'brightness', label: 'Brightness' },
+  ],
+}
+
+// Shared styling for each bordered value box (the hex field and each channel field).
+// The mode switcher is a separate bordered box (the dropdown trigger draws its own).
+const FIELD_BOX_CLASS =
+  'flex h-full items-center rounded-lg border border-solid border-borders-neutral-strong bg-actions-neutral-idle-alpha-light transition-all focus-within:border-actions-primary-idle-alpha-strong'
+
+// Detect a value's mode. reka represents hex as space 'rgb', so hex must be
+// matched on the '#' prefix; rgb/hsl/hsb (and hsv→hsb) come from normalizeColor.
+function detectMode(value: string | undefined): ColorFormat | undefined {
+  if (!value || !isValidColor(value)) return undefined
+  if (value.trim().startsWith('#')) return 'hex'
+  return normalizeColor(value).space
+}
+
+const detectedMode = detectMode(props.modelValue)
+const colorMode = ref<ColorFormat>(
+  detectedMode && props.modes.includes(detectedMode) ? detectedMode : props.modes[0],
+)
+
+// Format the emitted value uses: the selected display mode when 'auto',
+// otherwise the fixed outputFormat (independent of `modes`).
+const outputMode = computed<ColorFormat>(() =>
+  props.outputFormat === 'auto' ? colorMode.value : props.outputFormat,
+)
+
+const showSwitcher = computed(() => props.modes.length > 1)
+const showCustomControls = computed(() => props.variant !== 'swatch-only')
+const activeChannels = computed<ChannelDef[]>(() =>
+  colorMode.value === 'hex' ? [] : MODE_CHANNELS[colorMode.value],
+)
+
+// The color in the active mode's space. Required so saturation/lightness vs
+// brightness resolve correctly: reka's getChannelValue reads the stored channel
+// for whichever space the color is in (HSL saturation ≠ HSB saturation).
+const channelModel = computed<Color>(() => {
+  switch (colorMode.value) {
+    case 'rgb': return convertToRgb(internalColor.value)
+    case 'hsl': return convertToHsl(internalColor.value)
+    case 'hsb': return convertToHsb(internalColor.value)
+    default: return internalColor.value
+  }
+})
+
+// HSB color space because that corresponds to what the color area uses
+const internalColor = ref<Color>(
+  toHsb(
+    props.color ??
+      (props.modelValue && isValidColor(props.modelValue) ? props.modelValue : DEFAULT_HEX),
+  ),
+)
+
+// This is used to determine if a preset is selected so we can show the indicator
+// instead of letting the ColorSwatchPicker component handle it with its internal state to allow
+// keyboard navigation of the picker.
+// This is because the swatch picker is a listbox which will re-focus the matching swatch/first
+// swatch whenever the model value is updated programatically, so we leave it uncontrolled
+// (it has a watch on the model value which does this for programatic updates)
+const currentHex = computed(() => colorToHex(internalColor.value).toLowerCase())
+function isPresetActive(preset: UiColorPickerPreset): boolean {
+  // Controlled identity selection (selectedPresetValue provided, incl. null)
+  // never falls back to color matching — duplicate-hex presets must not both
+  // light up, and null must mark none.
+  if (props.selectedPresetValue !== undefined) {
+    return preset.value !== undefined && preset.value === props.selectedPresetValue
+  }
+  return preset.color.toLowerCase() === currentHex.value
+}
+
+function emitModelValue(): void {
+  emit('update:modelValue', colorToString(internalColor.value, outputMode.value))
+}
+
+function onColorUpdate(next: Color): void {
+  // Field edits arrive in the active mode's space; normalize back to canonical HSB
+  // so the area + hue/alpha sliders (all hsb) stay correct.
+  const hsbNextColor = toHsb(next)
+  internalColor.value = hsbNextColor
+  emit('update:color', hsbNextColor)
+  emitModelValue()
+}
+
+function onCommit(): void {
+  emit('change', colorToString(internalColor.value, outputMode.value))
+}
+
+// Selection is handled per item via its `select` event (fired for click, Space
+// and Enter): the v-for closure carries the exact preset, so duplicate-hex
+// presets stay distinguishable, and the listbox model's update — which reka
+// double-emits per selection — is deliberately not listened to.
+// reka fires `select` before its own disabled check, so guard it here.
+function onPresetSelect(preset: UiColorPickerPreset): void {
+  if (props.disabled) return
+  onColorUpdate(toHsb(preset.color))
+  if (preset.value !== undefined) emit('update:selectedPresetValue', preset.value)
+  onCommit()
+}
+
+// Re-emit modelValue in the new format when the user switches modes (same color).
+// Only relevant while the output follows the display mode ('auto'); with a fixed
+// output format the emitted string is unchanged, so skip the redundant emit.
+watch(colorMode, () => {
+  if (props.outputFormat === 'auto') emitModelValue()
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value || !isValidColor(value)) return
+    // Parse any supported format; guard against echoing our own emit and never
+    // re-select the mode (inference is initial-only).
+    const next = toHsb(value)
+    if (colorToHex(internalColor.value).toLowerCase() !== colorToHex(next).toLowerCase()) {
+      internalColor.value = next
+    }
+  },
+)
+
+watch(
+  () => props.color,
+  (color) => {
+    if (!color) return
+    const next = toHsb(color)
+    // Guard against echoing our own emit (compare normalized hex).
+    if (colorToHex(internalColor.value).toLowerCase() !== colorToHex(next).toLowerCase()) {
+      internalColor.value = next
+    }
+  },
+)
+</script>
+
+<template>
+  <!-- Fixed width sized for the color area/sliders; swatch-only has none, so it hugs the swatch grid -->
+  <div
+    class="flex flex-col gap-4 rounded-2xl bg-surface-neutral-bg-main p-4 shadow-lg"
+    :class="showCustomControls ? 'w-[284px]' : 'w-fit'"
+  >
+    <ColorAreaRoot
+      v-if="showCustomControls"
+      v-slot="{ style }"
+      data-testid="ui-color-picker-area"
+      :model-value="internalColor"
+      :disabled="disabled"
+      color-space="hsb"
+      x-channel="saturation"
+      y-channel="brightness"
+      class="relative h-[189px] w-full rounded-md"
+      :class="{ 'cursor-not-allowed': disabled }"
+      @update:color="onColorUpdate"
+      @change-end="onCommit"
+    >
+      <ColorAreaArea
+        :style="style"
+        class="absolute inset-0 rounded-md"
+      >
+        <ColorAreaThumb class="group size-6 rounded-full border-4 border-actions-neutral-invert-idle transition-shadow hover:cursor-pointer hover:shadow-md">
+          <span class="pointer-events-none absolute -inset-1 rounded-full bg-actions-primary-hover-overlay opacity-0 transition-opacity group-hover:opacity-100" />
+        </ColorAreaThumb>
+      </ColorAreaArea>
+    </ColorAreaRoot>
+
+    <ColorSliderRoot
+      v-if="showCustomControls"
+      data-testid="ui-color-picker-hue"
+      :model-value="internalColor"
+      :disabled="disabled"
+      color-space="hsb"
+      channel="hue"
+      class="relative flex h-6 w-full items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+      @update:color="onColorUpdate"
+      @change-end="onCommit"
+    >
+      <ColorSliderTrack class="h-1 w-full rounded-full" />
+      <ColorSliderThumb class="group size-6 rounded-full border-4 border-actions-primary-idle bg-actions-neutral-invert-idle transition-shadow hover:cursor-pointer hover:shadow-md">
+        <span class="pointer-events-none absolute -inset-1 rounded-full bg-actions-primary-hover-overlay opacity-0 transition-opacity group-hover:opacity-100" />
+      </ColorSliderThumb>
+    </ColorSliderRoot>
+
+    <ColorSliderRoot
+      v-if="showCustomControls && showAlpha"
+      data-testid="ui-color-picker-alpha"
+      :model-value="internalColor"
+      :disabled="disabled"
+      color-space="hsb"
+      channel="alpha"
+      class="relative flex h-6 w-full items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+      @update:color="onColorUpdate"
+      @change-end="onCommit"
+    >
+      <ColorSliderTrack class="h-1 w-full rounded-full" />
+      <ColorSliderThumb class="group size-6 rounded-full border-4 border-actions-primary-idle bg-actions-neutral-invert-idle transition-shadow hover:cursor-pointer hover:shadow-md">
+        <span class="pointer-events-none absolute -inset-1 rounded-full bg-actions-primary-hover-overlay opacity-0 transition-opacity group-hover:opacity-100" />
+      </ColorSliderThumb>
+    </ColorSliderRoot>
+
+    <div
+      v-if="showCustomControls"
+      data-testid="ui-color-picker-field"
+      class="flex h-10 w-full items-center gap-2"
+      :class="{ 'cursor-not-allowed opacity-50': disabled }"
+    >
+      <!-- Mode switcher — its own bordered box; hidden when only one mode is available -->
+      <div
+        v-if="showSwitcher"
+        class="h-full w-20 shrink-0"
+      >
+        <UiDropdown
+          v-model="colorMode"
+          :disabled="disabled"
+        >
+          <UiDropdownTrigger
+            size="md"
+            variant="secondary"
+            color="neutral"
+            aria-label="Color format"
+          />
+          <UiDropdownContent>
+            <UiDropdownItem
+              v-for="mode in modes"
+              :key="mode"
+              :value="mode"
+              :title="MODE_LABELS[mode]"
+            />
+          </UiDropdownContent>
+        </UiDropdown>
+      </div>
+
+      <!-- HEX: swatch + value in a single bordered box (swatch only in hex mode) -->
+      <ColorFieldRoot
+        v-if="colorMode === 'hex'"
+        :model-value="internalColor"
+        :disabled="disabled"
+        color-space="hsb"
+        :class="[FIELD_BOX_CLASS, 'min-w-0 flex-1 gap-1.5 px-3']"
+        @update:color="onColorUpdate"
+      >
+        <ColorSwatch
+          :color="internalColor"
+          class="size-4 shrink-0 rounded-[5px] border border-borders-neutral-light bg-(--reka-color-swatch-color)"
+        />
+        <Label
+          :for="fieldId"
+          class="sr-only"
+        >
+          Hex color
+        </Label>
+        <ColorFieldInput
+          :id="fieldId"
+          class="h-full w-full min-w-0 bg-transparent text-content-text-regular-md text-text-neutral-base"
+          @blur="onCommit"
+        />
+      </ColorFieldRoot>
+
+      <!-- RGB / HSL / HSB: each channel is its own bordered box (no visible label) -->
+      <template v-else>
+        <ColorFieldRoot
+          v-for="ch in activeChannels"
+          :key="ch.channel"
+          :model-value="channelModel"
+          :disabled="disabled"
+          :color-space="colorMode"
+          :channel="ch.channel"
+          :class="[FIELD_BOX_CLASS, 'min-w-0 flex-1 justify-center px-2']"
+          @update:color="onColorUpdate"
+        >
+          <ColorFieldInput
+            :id="`${fieldId}-${ch.channel}`"
+            :aria-label="ch.label"
+            class="h-full w-full min-w-0 bg-transparent text-center text-content-text-regular-md text-text-neutral-base"
+            @blur="onCommit"
+          />
+        </ColorFieldRoot>
+      </template>
+    </div>
+
+    <div
+      v-if="presets?.length"
+      class="flex flex-col gap-4"
+    >
+      <label
+        v-if="presetsLabel !== null"
+        :id="presetsLabelId"
+        class="text-content-legends-bold-md text-text-neutral-tertiary"
+      >
+        {{ presetsLabel }}
+      </label>
+      <!-- uncontrolled on purpose; otherwise it would steal focus from the sliders when the internal color is updated with the preset color -->
+      <ColorSwatchPickerRoot
+        :aria-labelledby="presetsLabel !== null ? presetsLabelId : undefined"
+        :aria-label="presetsLabel === null ? 'Presets' : undefined"
+        :disabled="disabled"
+        class="grid justify-center"
+        :class="[swatchSizeClasses.swatchPickerList, { 'cursor-not-allowed': disabled }]"
+        :style="{ gridTemplateColumns: `repeat(${presetColumns}, max-content)` }"
+      >
+        <div
+          v-for="preset in presets"
+          :key="preset.value ?? preset.color"
+          class="relative flex"
+          :class="swatchSizeClasses.swatch"
+        >
+          <ColorSwatchPickerItem
+            :value="preset.color.toLowerCase()"
+            v-bind="preset.label ? { 'aria-label': preset.label } : {}"
+            class="group block size-full cursor-pointer rounded-full data-disabled:cursor-not-allowed border border-borders-neutral-light"
+            @select="onPresetSelect(preset)"
+          >
+            <span class="relative block size-full overflow-hidden rounded-full">
+              <span
+                v-if="preset.leftColor && preset.rightColor"
+                class="flex size-full"
+              >
+                <span
+                  class="h-full w-1/2"
+                  :style="{ backgroundColor: preset.leftColor }"
+                />
+                <span
+                  class="h-full w-1/2"
+                  :style="{ backgroundColor: preset.rightColor }"
+                />
+              </span>
+              <ColorSwatchPickerItemSwatch
+                v-else
+                class="size-full rounded-full bg-(--reka-color-swatch-color)"
+              />
+              <!-- focus-visible instead of data-highlighted to identify the preset that is being keyboard focused
+              because the listbox highlights the first item on mount if there's no preset matching the current color -->
+              <span
+                aria-hidden="true"
+                class="absolute inset-0 flex items-center justify-center rounded-full bg-actions-neutral-hover-overlay opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+              >
+                <div
+                  class="i-ls-check-circle-fill text-text-neutral-invert-tertiary"
+                  :class="swatchSizeClasses.indicator"
+                />
+              </span>
+            </span>
+          </ColorSwatchPickerItem>
+          <!-- selection indicator: rendered outside the (v-memo'd) item so it reacts
+          to the live color and clears the moment the color moves off this preset -->
+          <span
+            v-if="isPresetActive(preset)"
+            aria-hidden="true"
+            :data-selected-preset="preset.value ?? preset.color.toLowerCase()"
+            class="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-actions-neutral-active-overlay ring-actions-neutral-idle ring-offset-surface-neutral-bg-main"
+            :class="swatchSizeClasses.indicatorWrapper"
+          >
+            <div
+              class="i-ls-check-circle-fill text-text-neutral-invert-base"
+              :class="swatchSizeClasses.indicator"
+            />
+          </span>
+        </div>
+      </ColorSwatchPickerRoot>
+    </div>
+
+    <div v-if="$slots.footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/UiColorPicker/index.ts

@@ -0,0 +1,2 @@
+export { default as UiColorPicker } from './UiColorPicker.vue'
+export type { UiColorPickerProps, Color, ColorFormat } from './types'

package/src/components/UiColorPicker/types.ts

@@ -0,0 +1,103 @@
+import type { Color, ColorFormat } from 'reka-ui'
+
+export type { Color, ColorFormat }
+
+/**
+ * Rendering variant:
+ * - 'default' — full picker (area, sliders, value fields, presets).
+ * - 'swatch-only' — only the card with the presets grid (plus heading and footer
+ *   slot); the custom-color controls are not rendered. `modes`, `outputFormat`,
+ *   and `showAlpha` are irrelevant in this variant.
+ */
+export type UiColorPickerVariant = 'default' | 'swatch-only'
+
+/** Size of the preset selector swatches: 'sm' (24px), 'lg' (48px). */
+export type UiColorPickerSwatchSize = 'sm' | 'lg'
+
+export interface UiColorPickerPreset {
+  /** Color applied to the picker when this preset is selected. */
+  color: string
+  /**
+   * Stable identity for the preset (e.g. a semantic token or enum name).
+   * Colors are lossy identifiers — two presets may share a hex. Set `value`
+   * together with the `selectedPresetValue` prop / `update:selectedPresetValue`
+   * emit to select and indicate presets by identity instead of by color.
+   */
+  value?: string
+  /**
+   * Accessible name for the swatch (e.g. 'Accent 100'). When omitted, reka-ui
+   * announces a generated descriptive color name (e.g. 'vibrant red') — coarse
+   * and English-only, so prefer a label for semantic palettes.
+   */
+  label?: string
+  /**
+   * Left half of the swatch (e.g. the tone as it appears in light mode).
+   * A two-tone swatch is rendered only when both leftColor and rightColor are set;
+   * otherwise the swatch uses `color`.
+   */
+  leftColor?: string
+  /** Right half of the swatch (e.g. the tone as it appears in dark mode). See leftColor. */
+  rightColor?: string
+}
+
+export interface UiColorPickerPresetConfig {
+  /** Label rendered above the presets grid. Defaults to 'Presets'; pass null to hide the heading (the swatch listbox keeps an aria-label). */
+  label?: string | null
+  /**
+   * Preset swatches. Each preset's `color` is applied to the picker on select;
+   * an optional `leftColor`/`rightColor` pair renders a two-tone swatch (otherwise
+   * the swatch uses `color`).
+   */
+  presets: UiColorPickerPreset[]
+  /**
+   * Size of the preset selector swatches: 'sm' (24px), 'lg' (48px).
+   * @default 'lg'
+   */
+  swatchSize?: UiColorPickerSwatchSize
+}
+
+export interface UiColorPickerProps {
+  /**
+   * Primary v-model: a color string (e.g. '#0B42C3', 'rgb(11, 66, 195)',
+   * 'hsl(222, 89%, 40%)', 'hsb(222, 94%, 76%)').
+   * With the default `outputFormat: 'auto'`, the format follows the active
+   * display mode and changes when the mode is switched. With a fixed
+   * `outputFormat`, the emitted format is that fixed format regardless of
+   * the display mode. See `outputFormat`.
+   */
+  modelValue?: string
+  /** Optional v-model:color — the full reka Color object (lossless). */
+  color?: Color
+  /** Rendering variant. See UiColorPickerVariant. */
+  variant?: UiColorPickerVariant
+  /**
+   * Color modes the user may switch between, in display order. Defaults to all
+   * four. With a single entry the switcher is hidden and the output format is
+   * fixed to that mode.
+   */
+  modes?: ColorFormat[]
+  /**
+   * Format the `modelValue` / `change` value is emitted in.
+   * - `'auto'` (default) follows the mode the user has selected in the switcher.
+   * - A specific format (`'hex'`, `'rgb'`, `'hsl'`, `'hsb'`) pins the emitted
+   *   format regardless of the display mode, independent of `modes`.
+   */
+  outputFormat?: ColorFormat | 'auto'
+  /**
+   * Preset swatches plus their label and swatch size. Omit (or pass an empty
+   * `presets` array) to hide the presets section.
+   */
+  presetConfig?: UiColorPickerPresetConfig
+  /**
+   * Controlled preset selection by identity (`v-model:selected-preset-value`).
+   * When provided (including null), the selection indicator marks the preset
+   * whose `value` matches — never by color, so duplicate-hex presets stay
+   * distinguishable; null marks none. When omitted, the indicator falls back
+   * to matching the current color against each preset's hex.
+   */
+  selectedPresetValue?: string | null
+  /** Show the alpha/transparency slider. */
+  showAlpha?: boolean
+  /** Disable all interaction. */
+  disabled?: boolean
+}