@cube-dev/ui-kit 0.199.1 → 0.200.0

package/dist/components/data/TableBase/use-column-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/data/TableBase/use-column-order.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";

package/dist/components/data/TableBase/use-column-window.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES } from "@tenphi/tasty";

package/dist/components/data/TableBase/use-container-width.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useState } from "react";
 //#region src/components/data/TableBase/use-container-width.ts

package/dist/components/data/TableBase/use-row-move-animation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useRef } from "react";
 /** Matches `DisplayTransition`'s check, which is the kit's existing precedent. */

package/dist/components/data/TableBase/use-scrollability.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useState } from "react";
 //#region src/components/data/TableBase/use-scrollability.ts

package/dist/components/data/TableBase/use-table-columns.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 /**
 * Every column's current width, so a resize can change exactly one of them.

package/dist/components/data/TableBase/use-table-search.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
 import { getColumnText } from "./use-table-columns.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/TableBase/use-table-selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { RowCollection } from "./RowCollection.js";
 import { useCallback, useMemo, useRef } from "react";

package/dist/components/data/TableBase/use-table-sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/TableBase/use-table-sorts.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { sortRows } from "./use-table-sort.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/TableBase/use-table-storage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useCallback, useRef, useState } from "react";
 //#region src/components/data/TableBase/use-table-storage.ts
 /**

package/dist/components/data/TableBase/use-table-tooltip-refresh.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { refreshAutoTooltipsWithin } from "../../content/use-auto-tooltip.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/components/data/TableBase/use-table-tree-state.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { c } from "react/compiler-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -65,9 +65,9 @@ const CheckboxElement = tasty({ styles: {
 	height: "(2x - 2bw)",
 	outline: {
 		"": "#primary-text.0",
-		focused: "1bw #primary-text"
+		focused: "$ring-width #primary-text"
 	},
-	outlineOffset: 1,
+	outlineOffset: "$outline-offset",
 	transition: "theme"
 } });
 function Checkbox(allProps, ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","mergeProps","mergeRefs","useFocus","castNullableIsSelected","WithNullableSelected","extractStyles","useAutoTooltip","getValidationMods","INLINE_LABEL_STYLES","LABEL_STYLES","resolveValidationProps","useFieldProps","wrapWithField","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","Omit","inputStyles","isIndeterminate","value","tooltip","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","children","label","isInvalid","isValid","labelProps","labelRef","labelStyles","labelPosition","isHidden","isFocused","focusProps","hoverProps","isHovered","inputRef","domRef","renderWithTooltip","toggleState","ariaProps","form","undefined","inputProps","isRequired","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","wrapperRefWith","tooltipRef","HTMLElement","renderCheckbox","tooltipFocusProps","autoFocus","checkboxField","tooltipTriggerProps","pointerProps","for","id","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName","useFocus","mergeProps","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends\n    BaseProps,\n    ContainerStyleProps,\n    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelRef,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus(true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Triggered by the wrapper rather than the input, so a disabled checkbox —\n  // whose input ignores the pointer — still shows it.\n  let { renderWithTooltip } = useAutoTooltip({ tooltip, children: null });\n\n  const toggleState = useToggleState(props);\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(ariaProps, toggleState, inputRef);\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      // The raw props: `castNullableIsSelected` turns `null` into `false`.\n      if (allProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  // The wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\n  };\n\n  // The wrapper is the checkbox's element in both branches, so the field's ref\n  // reaches it with or without the field chrome; a tooltip's ref shares it.\n  const wrapperRefWith = (tooltipRef?: RefObject<HTMLElement>) =>\n    tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef;\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        // For a dialog kept mounted while closed, as on `Button`.\n        {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n      />\n      <CheckboxElement data-element=\"Input\" mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            {...wrapperProps}\n            {...mergeProps(hoverProps, pointerProps)}\n            ref={wrapperRefWith(tooltipRef)}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, {\n      ...props,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\n        ref={wrapperRefWith(tooltipRef)}\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {(label ?? children) ? (\n          <Element\n            // Before `labelProps`, so a `ref` passed there still wins.\n            ref={labelRef}\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","mergeProps","mergeRefs","useFocus","castNullableIsSelected","WithNullableSelected","extractStyles","useAutoTooltip","getValidationMods","INLINE_LABEL_STYLES","LABEL_STYLES","resolveValidationProps","useFieldProps","wrapWithField","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","Omit","inputStyles","isIndeterminate","value","tooltip","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","children","label","isInvalid","isValid","labelProps","labelRef","labelStyles","labelPosition","isHidden","isFocused","focusProps","hoverProps","isHovered","inputRef","domRef","renderWithTooltip","toggleState","ariaProps","form","undefined","inputProps","isRequired","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","wrapperRefWith","tooltipRef","HTMLElement","renderCheckbox","tooltipFocusProps","autoFocus","checkboxField","tooltipTriggerProps","pointerProps","for","id","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName","useFocus","mergeProps","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends\n    BaseProps,\n    ContainerStyleProps,\n    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelRef,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus(true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Triggered by the wrapper rather than the input, so a disabled checkbox —\n  // whose input ignores the pointer — still shows it.\n  let { renderWithTooltip } = useAutoTooltip({ tooltip, children: null });\n\n  const toggleState = useToggleState(props);\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(ariaProps, toggleState, inputRef);\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      // The raw props: `castNullableIsSelected` turns `null` into `false`.\n      if (allProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  // The wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\n  };\n\n  // The wrapper is the checkbox's element in both branches, so the field's ref\n  // reaches it with or without the field chrome; a tooltip's ref shares it.\n  const wrapperRefWith = (tooltipRef?: RefObject<HTMLElement>) =>\n    tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef;\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        // For a dialog kept mounted while closed, as on `Button`.\n        {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n      />\n      <CheckboxElement data-element=\"Input\" mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            {...wrapperProps}\n            {...mergeProps(hoverProps, pointerProps)}\n            ref={wrapperRefWith(tooltipRef)}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, {\n      ...props,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\n        ref={wrapperRefWith(tooltipRef)}\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {(label ?? children) ? (\n          <Element\n            // Before `labelProps`, so a `ref` passed there still wins.\n            ref={labelRef}\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { createContext } from "react";
 //#region src/components/fields/Checkbox/context.ts
 const CheckboxGroupContext = createContext(null);

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";

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

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

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

@@ -17,7 +17,7 @@ export interface CubeColorSwatchProps extends BaseProps, BaseStyleProps, OuterSt
  * A square of color. Decorative on its own — pair it with the value as text, or
  * with a control that names it.
  *
- * The color travels as an inline custom property rather than through `styles`,
+ * The color travels through `tokens` (an inline custom property), not `styles`,
  * so the swatch keeps a single cached style rule however often it changes.
  */
 export declare const ColorSwatch: import("react").ForwardRefExoticComponent<CubeColorSwatchProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { c } from "react/compiler-runtime";
@@ -53,7 +53,7 @@ const SwatchElement = tasty({
 * A square of color. Decorative on its own — pair it with the value as text, or
 * with a control that names it.
 *
-* The color travels as an inline custom property rather than through `styles`,
+* The color travels through `tokens` (an inline custom property), not `styles`,
 * so the swatch keeps a single cached style rule however often it changes.
 */
 const ColorSwatch = forwardRef(function ColorSwatch(props, ref) {
@@ -86,7 +86,7 @@ const ColorSwatch = forwardRef(function ColorSwatch(props, ref) {
 	} else t3 = $[6];
 	let t4;
 	if ($[7] !== resolved) {
-		t4 = resolved ? { "--color-picker-color": toHex(resolved) } : void 0;
+		t4 = resolved ? { "#color-picker": toHex(resolved) } : void 0;
 		$[7] = resolved;
 		$[8] = t4;
 	} else t4 = $[8];
@@ -98,7 +98,7 @@ const ColorSwatch = forwardRef(function ColorSwatch(props, ref) {
 			"data-size": size,
 			mods: t3,
 			styles,
-			style: t4
+			tokens: t4
 		});
 		$[9] = qa;
 		$[10] = ref;

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.js","names":["BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","DIMENSION_STYLES","DimensionStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","extractStyles","ColorValue","parseColor","toHex","STYLE_PROPS","SwatchElement","qa","styles","display","width","height","radius","fill","empty","shadow","image","CubeColorSwatchProps","color","size","ColorSwatch","props","ref","$","_c","mods","t0","t1","resolved","t2","t3","t4","undefined","t5","_c"],"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\n    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,MAAMiB,cAAc;CAClB,GAAGjB;CACH,GAAGO;CACH,GAAGJ;CACH,GAAGE;AAAgB;AAGrB,MAAMa,gBAAgBR,MAAM;CAC1BS,IAAI;CACJC,QAAQ;EACNC,SAAS;;;;;;;;;;;;;EAcT,gBAAgB;GAEd,IAAI;GAGJ,cAAc;GACd,eAAe;GACf,cAAc;EAChB;EACA,gBAAgB;EAEhBC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,MAAM;GACJ,IAAI;GACJC,OAAO;EACT;EACAC,QAAQ;EAERC,OAAO;GACL,IAAI;GACJF,OACE;EACJ;CACF;AACF,CAAC;;;;;;;;AA2BD,MAAaM,cAAcpB,WAAW,SAAAoB,YAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAIpC,MAAA,EAAAN,OAAAO,MAAAlB,IAAAY,SAAkCE;CAAM,IAAAK;CAAA,IAAAH,EAAA,OAAAF,OAAA;EACzBK,KAAAzB,cAAcoB,OAAOhB,WAAW;EAACkB,EAAA,KAAAF;EAAAE,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAhD,MAAAf,SAAekB;CAAkC,IAAAC;CAAA,IAAAJ,EAAA,OAAAL,OAAA;EAG/CS,KAAA,OAAOT,UAAU,WAAWf,WAAWe,KAAuB,IAAbA,SAAA;EAAcK,EAAA,KAAAL;EAAAK,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CADjE,MAAAK,WACED;CAOiB,MAAAE,KAAA,CAACD;CAAQ,IAAAE;CAAA,IAAAP,EAAA,OAAAE,QAAAF,EAAA,OAAAM,IAAA;EAAlBC,KAAA;GAAAhB,OAASe;GAAS,GAAKJ;EAAK;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAK,UAAA;EAE5BG,KAAAH,WAAA,EAAA,wBAAqCxB,MAAMwB,QAAQ,EAAc,IAAjEI,KAAAA;EAAkET,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAhB,MAAAgB,EAAA,QAAAD,OAAAC,EAAA,QAAAJ,QAAAI,EAAA,QAAAf,UAAAe,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,IAAA;EAN3EE,KAAA,oBAAC,eAAD;GACOX;GACDf;GACOY,aAAAA;GACL,MAAAW;GACEtB;GACD,OAAAuB;EAAkE,CAAA;EACzER,EAAA,KAAAhB;EAAAgB,EAAA,MAAAD;EAAAC,EAAA,MAAAJ;EAAAI,EAAA,MAAAf;EAAAe,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAPFU;AAOE,CAEL"}
+{"version":3,"file":"ColorSwatch.js","names":["BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","DIMENSION_STYLES","DimensionStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","extractStyles","ColorValue","parseColor","toHex","STYLE_PROPS","SwatchElement","qa","styles","display","width","height","radius","fill","empty","shadow","image","CubeColorSwatchProps","color","size","ColorSwatch","props","ref","$","_c","mods","t0","t1","resolved","t2","t3","t4","undefined","t5","_c"],"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\n    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 through `tokens` (an inline custom property), not `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      tokens={resolved ? { '#color-picker': toHex(resolved) } : undefined}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAkBA,MAAMiB,cAAc;CAClB,GAAGjB;CACH,GAAGO;CACH,GAAGJ;CACH,GAAGE;AAAgB;AAGrB,MAAMa,gBAAgBR,MAAM;CAC1BS,IAAI;CACJC,QAAQ;EACNC,SAAS;;;;;;;;;;;;;EAcT,gBAAgB;GAEd,IAAI;GAGJ,cAAc;GACd,eAAe;GACf,cAAc;EAChB;EACA,gBAAgB;EAEhBC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,MAAM;GACJ,IAAI;GACJC,OAAO;EACT;EACAC,QAAQ;EAERC,OAAO;GACL,IAAI;GACJF,OACE;EACJ;CACF;AACF,CAAC;;;;;;;;AA2BD,MAAaM,cAAcpB,WAAW,SAAAoB,YAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAIpC,MAAA,EAAAN,OAAAO,MAAAlB,IAAAY,SAAkCE;CAAM,IAAAK;CAAA,IAAAH,EAAA,OAAAF,OAAA;EACzBK,KAAAzB,cAAcoB,OAAOhB,WAAW;EAACkB,EAAA,KAAAF;EAAAE,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAhD,MAAAf,SAAekB;CAAkC,IAAAC;CAAA,IAAAJ,EAAA,OAAAL,OAAA;EAG/CS,KAAA,OAAOT,UAAU,WAAWf,WAAWe,KAAuB,IAAbA,SAAA;EAAcK,EAAA,KAAAL;EAAAK,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CADjE,MAAAK,WACED;CAOiB,MAAAE,KAAA,CAACD;CAAQ,IAAAE;CAAA,IAAAP,EAAA,OAAAE,QAAAF,EAAA,OAAAM,IAAA;EAAlBC,KAAA;GAAAhB,OAASe;GAAS,GAAKJ;EAAK;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAK,UAAA;EAE3BG,KAAAH,WAAA,EAAA,iBAA8BxB,MAAMwB,QAAQ,EAAc,IAA1DI,KAAAA;EAA2DT,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAhB,MAAAgB,EAAA,QAAAD,OAAAC,EAAA,QAAAJ,QAAAI,EAAA,QAAAf,UAAAe,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,IAAA;EANrEE,KAAA,oBAAC,eAAD;GACOX;GACDf;GACOY,aAAAA;GACL,MAAAW;GACEtB;GACA,QAAAuB;EAA2D,CAAA;EACnER,EAAA,KAAAhB;EAAAgB,EAAA,MAAAD;EAAAC,EAAA,MAAAJ;EAAAI,EAAA,MAAAf;EAAAe,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAPFU;AAOE,CAEL"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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";
@@ -12,7 +12,7 @@ import { formatColor, parseColor, toHex } from "../color/color.js";
 import { useIsInsideColorPopover } from "../color/context.js";
 import { ColorPicker } from "../ColorPicker/ColorPicker.js";
 import { c } from "react/compiler-runtime";
-import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { BLOCK_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRadio, useRadioGroup } from "react-aria";
@@ -21,11 +21,11 @@ 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
+* first: earlier shadows paint over later ones, so this reads as two ring widths
+* of `#surface-text` at the edge and two 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";
+const SELECTED_RING = "inset 0 0 0 (2 * $ring-width) #surface-text, inset 0 0 0 (4 * $ring-width) #surface";
 /** The swatch edge in px, per size. `Item` takes an exact number. */
 const SWATCH_PX = {
 	small: 16,
@@ -61,10 +61,7 @@ const CUSTOM_SWATCH_STYLES = {
 * 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 CUSTOM_SWATCH_SELECTED_STYLES = mergeStyles(CUSTOM_SWATCH_STYLES, { shadow: SELECTED_RING });
 const GroupElement = tasty({
 	qa: "ColorSwatchGroup",
 	styles: {
@@ -125,8 +122,8 @@ const SwatchElement = tasty({
 			selected: SELECTED_RING
 		},
 		outline: {
-			"": "2bw #focus.0 / 1bw",
-			focused: "2bw #focus / 1bw"
+			"": "(2 * $ring-width) #focus.0 / $outline-offset",
+			focused: "(2 * $ring-width) #focus / $outline-offset"
 		},
 		transition: "theme"
 	}
@@ -165,7 +162,7 @@ function Swatch(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== colorKey) {
-		t3 = { "--color-swatch-color": colorKey };
+		t3 = { "#color-swatch": colorKey };
 		$[9] = colorKey;
 		$[10] = t3;
 	} else t3 = $[10];
@@ -203,7 +200,7 @@ function Swatch(t0) {
 			"data-size": size,
 			mods: t2,
 			styles,
-			style: t3,
+			tokens: t3,
 			children: t6
 		});
 		$[19] = size;
@@ -384,7 +381,7 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 	} else t19 = $[39];
 	let t20;
 	if ($[40] !== columns) {
-		t20 = columns ? { "--columns": String(columns) } : void 0;
+		t20 = columns ? { $columns: columns } : void 0;
 		$[40] = columns;
 		$[41] = t20;
 	} else t20 = $[41];
@@ -452,7 +449,7 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 			"data-input-type": "colorswatchgroup",
 			styles,
 			mods: t19,
-			style: t20,
+			tokens: t20,
 			children: [t22, t23]
 		});
 		$[61] = domRef;

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","useI18n","FieldBaseProps","mergeProps","useFocus","extractStyles","getValidationMods","useFieldProps","wrapWithField","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","isFocused","focusProps","t2","t3","t4","t5","button","t6","t7","ColorSwatchGroup","allProps","ref","t","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","value_0","onChange_0","isInvalid","isValid","ariaLabel","undefined","isInsidePopover","showCustom","seen","Map","entry","raw","parsed","key","has","set","values","swatches","internalValue","setInternalValue","currentValue","t8","selectedColor","toString","selectedKey","t9","some","s","isCustom","t10","next","publish","t11","nextKey","parsed_0","handleChange","t12","t13","isReadOnly","domRef","t14","t15","form","orientation","radioGroupProps","labelProps","t16","t17","t18","t19","t20","String","t21","map","swatch","t22","t23","t24","group","t25","cubeInputType","_c","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 { useI18n } from '../../../i18n';\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\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\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(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 { t } = useI18n();\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  // `null` arrives from React Aria's native form reset of a group that\n  // mounted with no value.\n  const handleChange = useEvent((nextKey: string | null) => {\n    const parsed = nextKey == null ? null : 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    // Becomes the group's `aria-invalid`, which is what says the field is\n    // invalid to a screen reader; the red outline says it only to the eye.\n    isInvalid,\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      // React Aria hands `form` to every swatch's input as the id of its\n      // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n      form: undefined,\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\n        ? undefined\n        : (ariaLabel ?? t('colorSwatchGroup.colors', '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          isBare\n          aria-label={t('colorSwatchGroup.customColor', '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, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","BLOCK_STYLES","BlockStyleProps","mergeStyles","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","useI18n","FieldBaseProps","mergeProps","useFocus","extractStyles","getValidationMods","useFieldProps","wrapWithField","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","isFocused","focusProps","t2","t3","t4","t5","button","t6","t7","ColorSwatchGroup","allProps","ref","t","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","value_0","onChange_0","isInvalid","isValid","ariaLabel","undefined","isInsidePopover","showCustom","seen","Map","entry","raw","parsed","key","has","set","values","swatches","internalValue","setInternalValue","currentValue","t8","selectedColor","toString","selectedKey","t9","some","s","isCustom","t10","next","publish","t11","nextKey","parsed_0","handleChange","t12","t13","isReadOnly","domRef","t14","t15","form","orientation","radioGroupProps","labelProps","t16","t17","t18","t19","t20","$columns","t21","map","swatch","t22","t23","t24","group","t25","cubeInputType","_c","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  mergeStyles,\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 { useI18n } from '../../../i18n';\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 two ring widths\n * of `#surface-text` at the edge and two of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n */\nconst SELECTED_RING =\n  'inset 0 0 0 (2 * $ring-width) #surface-text, inset 0 0 0 (4 * $ring-width) #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 = mergeStyles(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    // The outline offset keeps the ring clear of the 4px gap to its neighbours.\n    outline: {\n      '': '(2 * $ring-width) #focus.0 / $outline-offset',\n      focused: '(2 * $ring-width) #focus / $outline-offset',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\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(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      tokens={{ '#color-swatch': 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 { t } = useI18n();\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  // `null` arrives from React Aria's native form reset of a group that\n  // mounted with no value.\n  const handleChange = useEvent((nextKey: string | null) => {\n    const parsed = nextKey == null ? null : 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    // Becomes the group's `aria-invalid`, which is what says the field is\n    // invalid to a screen reader; the red outline says it only to the eye.\n    isInvalid,\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      // React Aria hands `form` to every swatch's input as the id of its\n      // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n      form: undefined,\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\n        ? undefined\n        : (ariaLabel ?? t('colorSwatchGroup.colors', '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      tokens={columns ? { $columns: 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          isBare\n          aria-label={t('colorSwatchGroup.customColor', '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, {\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/ComboBox/ComboBox.d.ts

@@ -108,7 +108,7 @@ export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyl
   sectionStyles?: Styles;
   /** Custom styles for section headings */
   headingStyles?: Styles;
-  /** Space between options, in pixels. Defaults to a hairline (`1bw`). */
+  /** Space between options, in pixels. Defaults to a hairline (`$item-gap`, `1px`). */
   listGap?: number;
   /** Whether the combobox is disabled */
   isDisabled?: boolean;