@payloadcms/ui 4.0.0-canary.9 → 4.0.0-internal.016994f

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["c","_c","React","useEffect","useId","useState","RenderCustomComponent","Tooltip","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","t1","undefined","isHydrated","setIsHydrated","showTooltip","setShowTooltip","fallbackID","t2","t3","Symbol","for","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","t13","t14","_jsx","disabled","onChange","ref","title","type","t15","t16","_jsxs","onPointerEnter","onPointerLeave","children","CustomComponent","Fallback","htmlFor","alignCaret","show"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useEffect, useId, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { LineIcon } from '../../icons/Line/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly tooltip?: string\n  /**\n   * Visual variant for the checkbox\n   * - 'default': Dark border, transparent background (for form fields)\n   * - 'muted': Light gray background and border (for tables)\n   */\n  readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n  tooltip,\n  variant = 'default',\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [showTooltip, setShowTooltip] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        readOnly && `${inputBaseClass}--read-only`,\n        tooltip && `${inputBaseClass}--has-tooltip`,\n        variant !== 'default' && `${inputBaseClass}--${variant}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n      onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`}>\n          <input\n            aria-label=\"\"\n            aria-labelledby={name}\n            checked={Boolean(checked)}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={onToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          <span\n            className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'partial' : 'check']\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {checked && <CheckIcon />}\n            {!checked && partialChecked && <LineIcon />}\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {tooltip && (\n        <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {AfterInput}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["React","useCallback","useEffect","useId","useRef","useState","RenderCustomComponent","Tooltip","FieldLabel","inputBaseClass","CheckboxInput","id","idFromProps","name","AfterInput","ariaLabelFromProps","ariaLabelledByFromProps","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","isHydrated","setIsHydrated","showTooltip","setShowTooltip","hasChanged","setHasChanged","fallbackID","ariaLabel","undefined","ariaLabelledBy","controlWrapRef","isIndeterminate","Boolean","control","current","querySelector","HTMLInputElement","indeterminate","handleToggle","event","_jsxs","filter","join","onPointerEnter","onPointerLeave","ref","_jsx","disabled","onChange","title","type","Mark","shape","CustomComponent","Fallback","htmlFor","alignCaret","show","markShapes","check","d","shapeRendering","mixed","fill","height","viewBox","width","xmlns"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useCallback, useEffect, useId, useRef, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly 'aria-label'?: string\n  readonly 'aria-labelledby'?: string\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly tooltip?: string\n  /**\n   * Visual variant for the checkbox\n   * - 'default': Brand fill and an on-brand mark when checked (for form fields)\n   * - 'muted': Keeps the neutral surface when checked (for tables)\n   */\n  readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  'aria-label': ariaLabelFromProps,\n  'aria-labelledby': ariaLabelledByFromProps,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n  tooltip,\n  variant = 'default',\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [showTooltip, setShowTooltip] = useState(false)\n  const [hasChanged, setHasChanged] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n  const ariaLabel = ariaLabelFromProps || undefined\n  const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name\n  const controlWrapRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n  const isIndeterminate = !checked && Boolean(partialChecked)\n\n  /**\n   * `indeterminate` has no HTML attribute, so the mixed state has to be written to the\n   * node itself. The node is reached through the wrapper rather than a ref on the input\n   * so that a caller-supplied `inputRef` stays the only ref attached to it. Setting the\n   * property keeps mark selection in CSS and reports the real `mixed` state to\n   * assistive technology.\n   */\n  useEffect(() => {\n    const control = controlWrapRef.current?.querySelector(`.${inputBaseClass}__control`)\n\n    if (control instanceof HTMLInputElement) {\n      control.indeterminate = isIndeterminate\n    }\n  }, [isIndeterminate])\n\n  /**\n   * The mark only draws itself in once the value has actually changed, so a document\n   * that loads with the box already checked doesn't replay the animation.\n   */\n  const handleToggle = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setHasChanged(true)\n      onToggle(event)\n    },\n    [onToggle],\n  )\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        isIndeterminate && `${inputBaseClass}--indeterminate`,\n        readOnly && `${inputBaseClass}--read-only`,\n        hasChanged && `${inputBaseClass}--changed`,\n        tooltip && `${inputBaseClass}--has-tooltip`,\n        variant !== 'default' && `${inputBaseClass}--${variant}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n      onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`} ref={controlWrapRef}>\n          <input\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={Boolean(checked)}\n            className={[\n              `${inputBaseClass}__control`,\n              variant !== 'default' && `${inputBaseClass}__control--${variant}`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={handleToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          {/* Both marks are always rendered and revealed by CSS, so an uncontrolled\n              input that changes without React knowing still shows the right mark. */}\n          <span className={`${inputBaseClass}__visuals`}>\n            <Mark className={`${inputBaseClass}__mixed`} shape=\"mixed\" />\n            <Mark className={`${inputBaseClass}__check`} shape=\"check\" />\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {tooltip && (\n        <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {AfterInput}\n    </div>\n  )\n}\n\nconst markShapes = {\n  check: { d: 'M5.00012 8.5L7.5 11L11.5 5', shapeRendering: 'geometricPrecision' },\n  mixed: { d: 'M5 8H11', shapeRendering: 'crispEdges' },\n} as const\n\n/**\n * Each mark is drawn twice: a wider halo stroke underneath, then the mark itself on\n * top. The halo is what keeps the mark legible against the brand fill.\n */\nconst Mark: React.FC<{\n  readonly className: string\n  readonly shape: keyof typeof markShapes\n}> = ({ className, shape }) => {\n  const { d, shapeRendering } = markShapes[shape]\n\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      height={16}\n      viewBox=\"0 0 16 16\"\n      width={16}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path className={`${inputBaseClass}__mark-halo`} d={d} shapeRendering={shapeRendering} />\n      <path className={`${inputBaseClass}__mark`} d={d} shapeRendering={shapeRendering} />\n    </svg>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Checkbox/index.css

@@ -1,181 +1,203 @@
 @layer payload-default {
   .checkbox {
     position: relative;
-
-    .tooltip:not([aria-hidden='true']) {
-      left: auto;
-      right: calc(-1 * var(--spacer-2));
-      position: absolute;
-      transform: translateY(calc(var(--caret-size) * -1));
-      margin-bottom: 0.2em;
-      max-width: fit-content;
-    }
   }
 
   .checkbox-input {
     display: flex;
-
-    &:hover:not(.checkbox-input--read-only) {
-      label,
-      input {
-        cursor: pointer;
-      }
-    }
-
-    label.field-label {
-      padding-bottom: 0;
-    }
-
-    &:not(.checkbox-input--read-only) {
-      &:active,
-      &:focus-within,
-      &:focus {
-        .checkbox-input__input {
-          border-color: var(--field-color-border-focus);
-        }
-      }
-
-      &:hover {
-        .checkbox-input__input {
-          border-color: var(--field-color-toggle-border-hover);
-        }
-      }
-    }
-
-    &:not(.checkbox-input--read-only):not(.checkbox-input--checked) {
-      &:hover {
-        cursor: pointer;
-
-        .checkbox-input__icon svg {
-          opacity: 0.2;
-        }
-      }
-    }
   }
 
   .checkbox-input__wrap {
+    position: relative;
     display: inline-flex;
-    align-items: center;
+    align-items: flex-start;
     gap: var(--spacer-2);
-    position: relative;
     width: 100%;
   }
 
+  /* Positioning shell only. The border, fill and focus ring all live on
+     `__visuals`, which is a sibling of the input so every visual state can be
+     driven from the input's own pseudo-classes. */
   .checkbox-input__input {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    line-height: 0;
     position: relative;
+    display: inline-block;
+    flex-shrink: 0;
     width: var(--spacer-3);
     height: var(--spacer-3);
-    border: var(--stroke-width-small) solid var(--field-color-toggle-border);
-    border-radius: var(--button-radius);
-    background: transparent;
-
-    & input[type='checkbox'] {
-      position: absolute;
-      padding: 0;
-      margin: 0;
-      opacity: 0;
-      border-radius: 0;
-      z-index: 1;
-    }
+    margin-block: var(--spacer-1);
+
+    /* On iPad, inline elements are selectable by default */
+    user-select: none;
   }
 
-  .checkbox-input__icon {
+  /* Kept in the accessibility tree and hit-testable, but invisible */
+  .checkbox-input__control {
     position: absolute;
     inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border-radius: 0;
+    outline: none;
+    opacity: 0;
+  }
 
-    svg {
-      opacity: 0;
-    }
+  .checkbox-input__visuals {
+    --checkbox-bg: var(--color-bg-secondary);
+    --checkbox-border-color: var(--special-border-translucent-strong);
+    --checkbox-focus-ring-color: transparent;
+    --checkbox-mark-color: var(--color-icon);
+    --checkbox-mark-halo-color: transparent;
+    --checkbox-duration: 100ms;
+    --checkbox-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
 
-    .icon--line {
-      width: 1.4rem;
-      height: 1.4rem;
-    }
+    position: absolute;
+    inset: 0;
+    display: inline-grid;
+    place-content: center;
+    border: var(--stroke-width-small) solid var(--checkbox-border-color);
+    border-radius: var(--radius-small);
+    outline: var(--stroke-width-small) solid var(--checkbox-focus-ring-color);
+    outline-offset: var(--stroke-width-small);
+    background: var(--checkbox-bg);
+    pointer-events: none;
+  }
+
+  .checkbox-input__check,
+  .checkbox-input__mixed {
+    display: none;
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+  }
 
-    &.partial {
-      svg {
-        opacity: 1;
-        color: var(--color-icon-onbrand);
-      }
-    }
+  .checkbox-input__mark,
+  .checkbox-input__mark-halo {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+
+    /* The dash pattern is longer than either path, so offsetting by its length
+       hides the mark entirely and animating back to 0 draws it in. */
+    stroke-dasharray: 12;
+    stroke-dashoffset: 0;
   }
 
-  /* Partial/indeterminate state - same blue background as checked */
-  .checkbox-input:has(.checkbox-input__icon.partial) {
-    .checkbox-input__input {
-      background-color: var(--field-color-toggle-bg-checked);
-      border-color: var(--field-color-toggle-border-checked);
-    }
+  .checkbox-input__mark {
+    stroke: var(--checkbox-mark-color);
+    stroke-width: 1.5;
+  }
 
-    &:has(:focus-visible) .checkbox-input__input {
-      outline: var(--stroke-width-small) solid var(--color-bg);
-      outline-offset: -2px;
-    }
+  .checkbox-input__mark-halo {
+    stroke: var(--checkbox-mark-halo-color);
+    stroke-width: 4;
   }
 
-  .checkbox-input--checked {
-    .checkbox-input__input {
-      background-color: var(--field-color-toggle-bg-checked);
-      border-color: var(--field-color-toggle-border-checked);
-    }
+  .checkbox-input__control:hover + .checkbox-input__visuals {
+    --checkbox-bg: var(--color-bg-secondary-hover);
+  }
 
-    &:has(:focus-visible) .checkbox-input__input {
-      outline: var(--stroke-width-small) solid var(--color-bg);
-      outline-offset: -2px; /* inset offset */
-    }
+  .checkbox-input__control:focus-visible + .checkbox-input__visuals {
+    --checkbox-focus-ring-color: var(--accessibility-focus-color);
+  }
 
-    .checkbox-input__icon {
-      svg {
-        opacity: 1;
-        color: var(--field-color-toggle-icon);
-      }
-    }
+  .checkbox-input__control:active + .checkbox-input__visuals {
+    --checkbox-bg: var(--color-bg-secondary-pressed);
+  }
+
+  .checkbox-input__control:disabled + .checkbox-input__visuals {
+    --checkbox-bg: transparent;
+    --checkbox-border-color: var(--color-border-disabled);
+    --checkbox-mark-color: var(--color-icon-ondisabled);
+  }
+
+  .checkbox-input__control:disabled:checked + .checkbox-input__visuals,
+  .checkbox-input__control:disabled:indeterminate + .checkbox-input__visuals {
+    --checkbox-mark-color: var(--color-icon-disabled);
+  }
+
+  .checkbox-input__control:disabled:not(.checkbox-input__control--muted):checked
+    + .checkbox-input__visuals,
+  .checkbox-input__control:disabled:not(.checkbox-input__control--muted):indeterminate
+    + .checkbox-input__visuals {
+    --checkbox-bg: var(--color-bg-disabled);
+    --checkbox-border-color: transparent;
+    --checkbox-mark-color: var(--color-icon-ondisabled);
   }
 
-  .checkbox-input--read-only {
-    .checkbox-input__input {
-      background: var(--field-color-toggle-bg-disabled);
-      border-color: var(--field-color-toggle-border-disabled);
+  /* The muted variant keeps the neutral surface when marked, so only the default
+     variant gets the brand fill, the on-brand mark and the mark halo. */
+  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled)
+    + .checkbox-input__visuals {
+    --checkbox-mark-color: var(--color-icon-onbrand);
+    --checkbox-mark-halo-color: var(--special-border-translucent);
+  }
+
+  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked
+    + .checkbox-input__visuals,
+  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate
+    + .checkbox-input__visuals {
+    --checkbox-bg: var(--color-bg-brand);
+    --checkbox-border-color: var(--special-border-translucent);
+
+    transition: background var(--checkbox-duration) var(--checkbox-easing);
+  }
+
+  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:hover
+    + .checkbox-input__visuals,
+  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:hover
+    + .checkbox-input__visuals {
+    --checkbox-border-color: var(--special-border-translucent-strong);
+  }
+
+  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:active
+    + .checkbox-input__visuals,
+  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:active
+    + .checkbox-input__visuals {
+    --checkbox-bg: var(--color-bg-brand-hover);
+  }
+
+  .checkbox-input__control:indeterminate + .checkbox-input__visuals .checkbox-input__mixed {
+    display: block;
+  }
+
+  .checkbox-input__control:checked:not(:indeterminate)
+    + .checkbox-input__visuals
+    .checkbox-input__check {
+    display: block;
+  }
+
+  .checkbox-input--changed .checkbox-input__mark,
+  .checkbox-input--changed .checkbox-input__mark-halo {
+    animation: payload-checkbox-mark-draw var(--checkbox-duration) var(--checkbox-easing) forwards;
+  }
+
+  @keyframes payload-checkbox-mark-draw {
+    from {
+      stroke-dashoffset: 12;
     }
 
-    label {
-      color: var(--field-color-text-disabled);
+    to {
+      stroke-dashoffset: 0;
     }
   }
 
-  .checkbox-input--has-tooltip {
-    position: relative;
-    width: max-content;
-    max-width: 100%;
+  .checkbox-input label.field-label {
+    margin-block-start: var(--spacer-1);
   }
 
-  /* Allow Wrap */
-  .checkbox-input__tooltip {
-    --tooltip-x: 0;
-    left: 0;
-    width: max-content;
-    max-width: 280px;
-    white-space: normal;
-    text-align: start;
+  /* Align the description with the label rather than the control */
+  .checkbox > .field-description {
+    padding-inline-start: var(--spacer-4);
   }
 
-  /* Center the caret on the checkbox box itself (0.5rem from the row's
-     left edge = center of the 1rem-wide checkbox input). */
-  .checkbox-input__tooltip.tooltip--caret-left .tooltip__caret {
-    left: 0.5rem;
-    transform: translateX(-50%);
+  .checkbox-input:not(.checkbox-input--read-only),
+  .checkbox-input:not(.checkbox-input--read-only) label,
+  .checkbox-input:not(.checkbox-input--read-only) input {
+    cursor: pointer;
   }
 
-  .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
-    transform: translateX(-50%) rotate(180deg);
+  .checkbox-input--read-only label.field-label:not(.unstyled) {
+    color: var(--field-color-text-disabled);
   }
 
   .checkbox-input--has-tooltip {
@@ -186,7 +208,6 @@
 
   /* Allow Wrap */
   .checkbox-input__tooltip {
-    --tooltip-x: 0;
     left: 0;
     width: max-content;
     max-width: 280px;
@@ -203,59 +224,15 @@
 
   .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
     transform: translateX(-50%) rotate(180deg);
-    /* Muted variant - used in tables with lighter appearance */
-    .checkbox-input--muted {
-      .checkbox-input__input {
-        background: var(--color-bg-secondary);
-        border-color: var(--color-border);
-      }
-
-      &:not(.checkbox-input--read-only):not(.checkbox-input--checked) {
-        &:hover {
-          .checkbox-input__input {
-            border-color: var(--field-color-toggle-border-hover);
-          }
-        }
-      }
-
-      /* Ensure checked state overrides muted base styles */
-      &.checkbox-input--checked {
-        .checkbox-input__input {
-          background-color: var(--field-color-toggle-bg-checked);
-          border-color: var(--field-color-toggle-border-checked);
-        }
-      }
-
-      /* Ensure partial state overrides muted base styles */
-      &:has(.checkbox-input__icon.partial) {
-        .checkbox-input__input {
-          background-color: var(--field-color-toggle-bg-checked);
-          border-color: var(--field-color-toggle-border-checked);
-        }
-      }
-    }
+  }
 
-    .checkbox.error {
-      .checkbox-input--checked {
-        .checkbox-input__input {
-          background-color: var(--field-color-error-bg);
-          border-color: var(--field-color-border-error);
-        }
-
-        &:hover .checkbox-input__input {
-          border-color: var(--field-color-border-error);
-        }
-      }
-
-      .checkbox-input:not(.checkbox-input--checked) {
-        .checkbox-input__input {
-          border-color: var(--field-color-border-error);
-        }
-
-        &:hover .checkbox-input__input {
-          border-color: var(--field-color-border-error);
-        }
-      }
-    }
+  .checkbox.error .checkbox-input__visuals {
+    --checkbox-border-color: var(--field-color-border-error);
+  }
+
+  .checkbox.error .checkbox-input__control:checked + .checkbox-input__visuals,
+  .checkbox.error .checkbox-input__control:indeterminate + .checkbox-input__visuals {
+    --checkbox-bg: var(--field-color-error-bg);
+    --checkbox-border-color: var(--field-color-border-error);
   }
 }

package/dist/fields/Checkbox/index.d.ts

@@ -14,5 +14,5 @@ export declare const CheckboxField: React.FC<{
     readonly validate?: CheckboxFieldValidation;
 } & {
     readonly field: Omit<import("payload").CheckboxFieldClient, "type"> & Partial<Pick<import("payload").CheckboxFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Code/index.css

@@ -10,7 +10,7 @@
       border: var(--stroke-width-small) solid var(--field-color-border);
       border-radius: var(--field-border-radius);
       padding: var(--spacer-2) 0;
-      overflow: clip;
+      overflow: visible;
       box-shadow: none;
 
       &:hover {

package/dist/fields/Code/index.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import './index.css';
 export declare const CodeField: React.FC<{
     readonly autoComplete?: string;
-    readonly onMount?: import("@monaco-editor/react").EditorProps["onMount"];
+    readonly onMount?: import("@monaco-editor/react").EditorProps['onMount'];
     readonly path: string;
     readonly validate?: import("payload").CodeFieldValidation;
 } & {
     readonly field: Omit<import("payload").CodeFieldClient, "type"> & Partial<Pick<import("payload").CodeFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Collapsible/index.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import './index.css';
 export declare const CollapsibleField: React.FC<import("payload").FieldPaths & {
     readonly field: Omit<import("payload").CollapsibleFieldClient, "type"> & Partial<Pick<import("payload").CollapsibleFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/DateTime/index.d.ts

@@ -5,5 +5,5 @@ export declare const DateTimeField: import("react").FC<{
     readonly validate?: DateFieldValidation;
 } & {
     readonly field: Omit<import("payload").DateFieldClient, "type"> & Partial<Pick<import("payload").DateFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Email/index.d.ts

@@ -6,5 +6,5 @@ export declare const EmailField: React.FC<{
     readonly validate?: EmailFieldValidation;
 } & {
     readonly field: Omit<import("payload").EmailFieldClient, "type"> & Partial<Pick<import("payload").EmailFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/FieldError/index.css

@@ -1,15 +1,6 @@
 @layer payload-default {
   .field-error.tooltip {
-    --tooltip-x: 0%;
-    left: auto;
-    max-width: 75%;
-    right: 0;
     color: var(--field-color-error-text);
     background-color: var(--field-color-error-bg);
-
-    &::after {
-      border-top-color: var(--field-color-error-bg);
-      border-bottom-color: var(--field-color-error-bg);
-    }
   }
 }

package/dist/fields/FieldError/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiClD,CAAA"}

package/dist/fields/FieldError/index.js

@@ -4,11 +4,13 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Tooltip } from '../../elements/Tooltip/index.js';
-import { useFormFields, useFormSubmitted } from '../../forms/Form/context.js';
+import { useForm, useFormFields, useFormSubmitted } from '../../forms/Form/context.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
 import './index.css';
 const baseClass = 'field-error';
 export const FieldError = props => {
-  const $ = _c(8);
+  const $ = _c(11);
   const {
     alignCaret: t0,
     message: messageFromProps,
@@ -17,6 +19,10 @@ export const FieldError = props => {
   } = props;
   const alignCaret = t0 === undefined ? "right" : t0;
   const hasSubmitted = useFormSubmitted();
+  const {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
   let t1;
   if ($[0] !== path) {
     t1 = t2 => {
@@ -30,7 +36,7 @@ export const FieldError = props => {
   }
   const field = useFormFields(t1);
   let t2;
-  if ($[2] !== alignCaret || $[3] !== field || $[4] !== hasSubmitted || $[5] !== messageFromProps || $[6] !== showErrorFromProps) {
+  if ($[2] !== alignCaret || $[3] !== editDepth || $[4] !== field || $[5] !== hasSubmitted || $[6] !== messageFromProps || $[7] !== path || $[8] !== showErrorFromProps || $[9] !== uuid) {
     t2 = Symbol.for("react.early_return_sentinel");
     bb0: {
       const {
@@ -44,6 +50,7 @@ export const FieldError = props => {
           alignCaret,
           className: baseClass,
           delay: 0,
+          id: generateFieldID(path, editDepth, uuid, "field-error"),
           staticPositioning: true,
           children: message
         });
@@ -51,13 +58,16 @@ export const FieldError = props => {
       }
     }
     $[2] = alignCaret;
-    $[3] = field;
-    $[4] = hasSubmitted;
-    $[5] = messageFromProps;
-    $[6] = showErrorFromProps;
-    $[7] = t2;
+    $[3] = editDepth;
+    $[4] = field;
+    $[5] = hasSubmitted;
+    $[6] = messageFromProps;
+    $[7] = path;
+    $[8] = showErrorFromProps;
+    $[9] = uuid;
+    $[10] = t2;
   } else {
-    t2 = $[7];
+    t2 = $[10];
   }
   if (t2 !== Symbol.for("react.early_return_sentinel")) {
     return t2;

package/dist/fields/FieldError/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Tooltip","useFormFields","useFormSubmitted","baseClass","FieldError","props","$","alignCaret","t0","message","messageFromProps","path","showError","showErrorFromProps","undefined","hasSubmitted","t1","t2","fields","field","Symbol","for","errorMessage","valid","showMessage","length","_jsx","className","delay","staticPositioning","children"],"sources":["../../../src/fields/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericErrorProps } from 'payload'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport './index.css'\n\nconst baseClass = 'field-error'\n\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n  const {\n    alignCaret = 'right',\n    message: messageFromProps,\n    path,\n    showError: showErrorFromProps,\n  } = props\n\n  const hasSubmitted = useFormSubmitted()\n  const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n  const { errorMessage, valid } = field || {}\n\n  const message = messageFromProps || errorMessage\n  const showMessage = showErrorFromProps || (hasSubmitted && valid === false)\n\n  if (showMessage && message?.length) {\n    return (\n      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0} staticPositioning>\n        {message}\n      </Tooltip>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,aAAa,EAAEC,gBAAgB,QAAQ;AAChD,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACrD;IAAAS,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,IAAA;IAAAC,SAAA,EAAAC;EAAA,IAKIR,KAAA;EAJF,MAAAE,UAAA,GAAAC,EAAoB,KAAAM,SAAA,GAAP,OAAO,GAApBN,EAAoB;EAMtB,MAAAO,YAAA,GAAqBb,gBAAA;EAAA,IAAAc,EAAA;EAAA,IAAAV,CAAA,QAAAK,IAAA;IACOK,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAASP,IAAA,CAAK,QAAK;IAAA;IAAAL,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAxE,MAAAa,KAAA,GAAclB,aAAA,CAAce,EAA4C;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAa,KAAA,IAAAb,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAO,kBAAA;IASpEI,EAAA,GAAAG,MAAA,CAAAC,GAAA,8B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCJ,KAAA,MAAU;MAE1C,MAAAV,OAAA,GAAgBC,gBAAA,IAAoBY,YAAA;MACpC,MAAAE,WAAA,GAAoBX,kBAAA,IAAuBE,YAAA,IAAgBQ,KAAA,UAAU;MAAA,IAEjEC,WAAA,IAAef,OAAA,EAAAgB,MAAS;QAExBR,EAAA,GAAAS,IAAA,CAAA1B,OAAA;UAAAO,UAAA;UAAAoB,SAAA,EAAAxB,SAAA;UAAAyB,KAAA;UAAAC,iBAAA;UAAAC,QAAA,EACGrB;QAAA,C;;;;;;;;;;;;;;;;;CAMT","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Tooltip","useForm","useFormFields","useFormSubmitted","useEditDepth","generateFieldID","baseClass","FieldError","props","$","alignCaret","t0","message","messageFromProps","path","showError","showErrorFromProps","undefined","hasSubmitted","uuid","editDepth","t1","t2","fields","field","Symbol","for","errorMessage","valid","showMessage","length","_jsx","className","delay","id","staticPositioning","children"],"sources":["../../../src/fields/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericErrorProps } from 'payload'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useForm, useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport './index.css'\n\nconst baseClass = 'field-error'\n\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n  const {\n    alignCaret = 'right',\n    message: messageFromProps,\n    path,\n    showError: showErrorFromProps,\n  } = props\n\n  const hasSubmitted = useFormSubmitted()\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n  const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n  const { errorMessage, valid } = field || {}\n\n  const message = messageFromProps || errorMessage\n  const showMessage = showErrorFromProps || (hasSubmitted && valid === false)\n\n  if (showMessage && message?.length) {\n    return (\n      <Tooltip\n        alignCaret={alignCaret}\n        className={baseClass}\n        delay={0}\n        id={generateFieldID(path, editDepth, uuid, 'field-error')}\n        staticPositioning\n      >\n        {message}\n      </Tooltip>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,EAAEC,aAAa,EAAEC,gBAAgB,QAAQ;AACzD,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EACrD;IAAAY,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,IAAA;IAAAC,SAAA,EAAAC;EAAA,IAKIR,KAAA;EAJF,MAAAE,UAAA,GAAAC,EAAoB,KAAAM,SAAA,GAAP,OAAO,GAApBN,EAAoB;EAMtB,MAAAO,YAAA,GAAqBf,gBAAA;EACrB;IAAAgB;EAAA,IAAiBlB,OAAA;EACjB,MAAAmB,SAAA,GAAkBhB,YAAA;EAAA,IAAAiB,EAAA;EAAA,IAAAZ,CAAA,QAAAK,IAAA;IACUO,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAAST,IAAA,CAAK,QAAK;IAAA;IAAAL,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAxE,MAAAe,KAAA,GAActB,aAAA,CAAcmB,EAA4C;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAW,SAAA,IAAAX,CAAA,QAAAe,KAAA,IAAAf,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAO,kBAAA,IAAAP,CAAA,QAAAU,IAAA;IASpEG,EAAA,GAAAG,MAAA,CAAAC,GAAA,8B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCJ,KAAA,MAAU;MAE1C,MAAAZ,OAAA,GAAgBC,gBAAA,IAAoBc,YAAA;MACpC,MAAAE,WAAA,GAAoBb,kBAAA,IAAuBE,YAAA,IAAgBU,KAAA,UAAU;MAAA,IAEjEC,WAAA,IAAejB,OAAA,EAAAkB,MAAS;QAExBR,EAAA,GAAAS,IAAA,CAAA/B,OAAA;UAAAU,UAAA;UAAAsB,SAAA,EAAA1B,SAAA;UAAA2B,KAAA;UAAAC,EAAA,EAIM7B,eAAA,CAAgBS,IAAA,EAAMM,SAAA,EAAWD,IAAA,EAAM;UAAAgB,iBAAA;UAAAC,QAAA,EAG1CxB;QAAA,C;;;;;;;;;;;;;;;;;;;;CAMT","ignoreList":[]}

package/dist/fields/Group/index.d.ts

@@ -5,6 +5,6 @@ import { GroupProvider, useGroup } from './provider.js';
 export declare const GroupFieldComponent: GroupFieldClientComponent;
 export { GroupProvider, useGroup };
 export declare const GroupField: React.FC<import("payload").FieldPaths & {
-    readonly field: (Omit<import("payload").UnnamedGroupFieldClient, "type"> & Partial<Pick<import("payload").UnnamedGroupFieldClient, "type">>) | (Omit<import("payload").NamedGroupFieldClient, "type"> & Partial<Pick<import("payload").NamedGroupFieldClient, "type">>);
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+    readonly field: (Omit<import("payload").NamedGroupFieldClient, "type"> & Partial<Pick<import("payload").NamedGroupFieldClient, "type">>) | (Omit<import("payload").UnnamedGroupFieldClient, "type"> & Partial<Pick<import("payload").UnnamedGroupFieldClient, "type">>);
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/JSON/index.d.ts

@@ -5,5 +5,5 @@ export declare const JSONField: React.FC<{
     readonly validate?: import("payload").JSONFieldValidation;
 } & {
     readonly field: Omit<import("payload").JSONFieldClient, "type"> & Partial<Pick<import("payload").JSONFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map