@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5d5a2b2

package/dist/fields/Checkbox/Input.js

@@ -4,12 +4,13 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useId, useState } from 'react';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { Tooltip } from '../../elements/Tooltip/index.js';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { CheckIcon } from '../../icons/Check/index.js';
 import { LineIcon } from '../../icons/Line/index.js';
 export const inputBaseClass = 'checkbox-input';
 export const CheckboxInput = t0 => {
-  const $ = _c(24);
+  const $ = _c(35);
   const {
     id: idFromProps,
     name,
@@ -17,6 +18,7 @@ export const CheckboxInput = t0 => {
     BeforeInput,
     checked,
     className,
+    Error,
     inputRef,
     Label,
     label,
@@ -24,46 +26,70 @@ export const CheckboxInput = t0 => {
     onToggle,
     partialChecked,
     readOnly: readOnlyFromProps,
-    required
+    required,
+    tooltip,
+    variant: t1
   } = t0;
+  const variant = t1 === undefined ? "default" : t1;
   const [isHydrated, setIsHydrated] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
   const fallbackID = useId();
   const id = idFromProps || fallbackID;
-  let t1;
   let t2;
+  let t3;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
+    t2 = () => {
       setIsHydrated(true);
     };
-    t2 = [];
-    $[0] = t1;
-    $[1] = t2;
+    t3 = [];
+    $[0] = t2;
+    $[1] = t3;
   } else {
-    t1 = $[0];
-    t2 = $[1];
+    t2 = $[0];
+    t3 = $[1];
   }
-  useEffect(t1, t2);
+  useEffect(t2, t3);
   const readOnly = readOnlyFromProps || !isHydrated;
-  const t3 = checked && `${inputBaseClass}--checked`;
-  const t4 = readOnly && `${inputBaseClass}--read-only`;
-  let t5;
-  if ($[2] !== className || $[3] !== t3 || $[4] !== t4) {
-    t5 = [className, inputBaseClass, t3, t4].filter(Boolean);
+  const t4 = checked && `${inputBaseClass}--checked`;
+  const t5 = readOnly && `${inputBaseClass}--read-only`;
+  const t6 = tooltip && `${inputBaseClass}--has-tooltip`;
+  const t7 = variant !== "default" && `${inputBaseClass}--${variant}`;
+  let t8;
+  if ($[2] !== className || $[3] !== t4 || $[4] !== t5 || $[5] !== t6 || $[6] !== t7) {
+    t8 = [className, inputBaseClass, t4, t5, t6, t7].filter(Boolean);
     $[2] = className;
-    $[3] = t3;
-    $[4] = t4;
-    $[5] = t5;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = t6;
+    $[6] = t7;
+    $[7] = t8;
   } else {
-    t5 = $[5];
+    t8 = $[7];
   }
-  const t6 = t5.join(" ");
-  const t7 = Boolean(checked);
-  let t8;
-  if ($[6] !== AfterInput || $[7] !== BeforeInput || $[8] !== Label || $[9] !== checked || $[10] !== id || $[11] !== inputRef || $[12] !== label || $[13] !== localized || $[14] !== name || $[15] !== onToggle || $[16] !== partialChecked || $[17] !== readOnly || $[18] !== required || $[19] !== t6 || $[20] !== t7) {
-    const t9 = _jsx("input", {
+  const t9 = t8.join(" ");
+  let t10;
+  if ($[8] !== tooltip) {
+    t10 = tooltip ? () => setShowTooltip(true) : undefined;
+    $[8] = tooltip;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  let t11;
+  if ($[10] !== tooltip) {
+    t11 = tooltip ? () => setShowTooltip(false) : undefined;
+    $[10] = tooltip;
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+  const t12 = Boolean(checked);
+  let t13;
+  if ($[12] !== AfterInput || $[13] !== BeforeInput || $[14] !== Error || $[15] !== Label || $[16] !== checked || $[17] !== id || $[18] !== inputRef || $[19] !== label || $[20] !== localized || $[21] !== name || $[22] !== onToggle || $[23] !== partialChecked || $[24] !== readOnly || $[25] !== required || $[26] !== showTooltip || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t9 || $[31] !== tooltip) {
+    const t14 = _jsx("input", {
       "aria-label": "",
       "aria-labelledby": name,
-      checked: t7,
+      checked: t12,
       disabled: readOnly,
       id,
       name,
@@ -73,52 +99,67 @@ export const CheckboxInput = t0 => {
       title: name,
       type: "checkbox"
     });
-    const t10 = !checked && partialChecked ? "partial" : "check";
-    let t11;
-    if ($[22] !== t10) {
-      t11 = [`${inputBaseClass}__icon`, t10].filter(Boolean);
-      $[22] = t10;
-      $[23] = t11;
+    const t15 = !checked && partialChecked ? "partial" : "check";
+    let t16;
+    if ($[33] !== t15) {
+      t16 = [`${inputBaseClass}__icon`, t15].filter(Boolean);
+      $[33] = t15;
+      $[34] = t16;
     } else {
-      t11 = $[23];
+      t16 = $[34];
     }
-    t8 = _jsxs("div", {
-      className: t6,
-      children: [_jsxs("div", {
-        className: `${inputBaseClass}__input`,
-        children: [BeforeInput, t9, _jsxs("span", {
-          className: t11.join(" "),
-          children: [checked && _jsx(CheckIcon, {}), !checked && partialChecked && _jsx(LineIcon, {})]
-        }), AfterInput]
-      }), _jsx(RenderCustomComponent, {
-        CustomComponent: Label,
-        Fallback: _jsx(FieldLabel, {
-          htmlFor: id,
-          label,
-          localized,
-          required
-        })
-      })]
+    t13 = _jsxs("div", {
+      className: t9,
+      onPointerEnter: t10,
+      onPointerLeave: t11,
+      children: [BeforeInput, _jsxs("div", {
+        className: `${inputBaseClass}__wrap`,
+        children: [_jsxs("div", {
+          className: `${inputBaseClass}__input`,
+          children: [t14, _jsxs("span", {
+            className: t16.join(" "),
+            children: [checked && _jsx(CheckIcon, {}), !checked && partialChecked && _jsx(LineIcon, {})]
+          })]
+        }), _jsx(RenderCustomComponent, {
+          CustomComponent: Label,
+          Fallback: _jsx(FieldLabel, {
+            htmlFor: id,
+            label,
+            localized,
+            required
+          })
+        }), Error]
+      }), tooltip && _jsx(Tooltip, {
+        alignCaret: "left",
+        className: `${inputBaseClass}__tooltip`,
+        show: showTooltip,
+        children: tooltip
+      }), AfterInput]
     });
-    $[6] = AfterInput;
-    $[7] = BeforeInput;
-    $[8] = Label;
-    $[9] = checked;
-    $[10] = id;
-    $[11] = inputRef;
-    $[12] = label;
-    $[13] = localized;
-    $[14] = name;
-    $[15] = onToggle;
-    $[16] = partialChecked;
-    $[17] = readOnly;
-    $[18] = required;
-    $[19] = t6;
-    $[20] = t7;
-    $[21] = t8;
+    $[12] = AfterInput;
+    $[13] = BeforeInput;
+    $[14] = Error;
+    $[15] = Label;
+    $[16] = checked;
+    $[17] = id;
+    $[18] = inputRef;
+    $[19] = label;
+    $[20] = localized;
+    $[21] = name;
+    $[22] = onToggle;
+    $[23] = partialChecked;
+    $[24] = readOnly;
+    $[25] = required;
+    $[26] = showTooltip;
+    $[27] = t10;
+    $[28] = t11;
+    $[29] = t12;
+    $[30] = t9;
+    $[31] = tooltip;
+    $[32] = t13;
   } else {
-    t8 = $[21];
+    t13 = $[32];
   }
-  return t8;
+  return t13;
 };
 //# sourceMappingURL=Input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["c","_c","React","useEffect","useId","useState","RenderCustomComponent","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","BeforeInput","checked","className","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","isHydrated","setIsHydrated","fallbackID","t1","t2","Symbol","for","t3","t4","t5","filter","Boolean","t6","join","t7","t8","t9","_jsx","disabled","onChange","ref","title","type","t10","t11","_jsxs","children","CustomComponent","Fallback","htmlFor"],"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 { 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 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}\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  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n}) => {\n  const [isHydrated, setIsHydrated] = 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      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${inputBaseClass}__input`}>\n        {BeforeInput}\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        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n        }\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"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":[]}

package/dist/fields/Checkbox/index.css

@@ -0,0 +1,261 @@
+@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 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    position: relative;
+    width: 100%;
+  }
+
+  .checkbox-input__input {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 0;
+    position: relative;
+    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;
+    }
+  }
+
+  .checkbox-input__icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      opacity: 0;
+    }
+
+    .icon--line {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
+
+    &.partial {
+      svg {
+        opacity: 1;
+        color: var(--color-icon-onbrand);
+      }
+    }
+  }
+
+  /* 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);
+    }
+
+    &:has(:focus-visible) .checkbox-input__input {
+      outline: 1px solid var(--color-bg);
+      outline-offset: -2px;
+    }
+  }
+
+  .checkbox-input--checked {
+    .checkbox-input__input {
+      background-color: var(--field-color-toggle-bg-checked);
+      border-color: var(--field-color-toggle-border-checked);
+    }
+
+    &:has(:focus-visible) .checkbox-input__input {
+      outline: 1px solid var(--color-bg);
+      outline-offset: -2px; /* inset offset */
+    }
+
+    .checkbox-input__icon {
+      svg {
+        opacity: 1;
+        color: var(--field-color-toggle-icon);
+      }
+    }
+  }
+
+  .checkbox-input--read-only {
+    .checkbox-input__input {
+      background: var(--field-color-toggle-bg-disabled);
+      border-color: var(--field-color-toggle-border-disabled);
+    }
+
+    label {
+      color: var(--field-color-text-disabled);
+    }
+  }
+
+  .checkbox-input--has-tooltip {
+    position: relative;
+    width: max-content;
+    max-width: 100%;
+  }
+
+  /* Allow Wrap */
+  .checkbox-input__tooltip {
+    --tooltip-x: 0;
+    left: 0;
+    width: max-content;
+    max-width: 280px;
+    white-space: normal;
+    text-align: start;
+  }
+
+  /* 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__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
+    transform: translateX(-50%) rotate(180deg);
+  }
+
+  .checkbox-input--has-tooltip {
+    position: relative;
+    width: max-content;
+    max-width: 100%;
+  }
+
+  /* Allow Wrap */
+  .checkbox-input__tooltip {
+    --tooltip-x: 0;
+    left: 0;
+    width: max-content;
+    max-width: 280px;
+    white-space: normal;
+    text-align: start;
+  }
+
+  /* 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__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);
+        }
+      }
+    }
+  }
+}

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

@@ -2,7 +2,7 @@ import type { CheckboxFieldClientProps, CheckboxFieldValidation } from 'payload'
 import React from 'react';
 import type { CheckboxInputProps } from './Input.js';
 import { CheckboxInput } from './Input.js';
-import './index.scss';
+import './index.css';
 export { CheckboxFieldClientProps, CheckboxInput, type CheckboxInputProps };
 export declare const CheckboxField: React.FC<{
     readonly checked?: boolean;
@@ -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, "customComponents" | "field">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAapD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,cAAc,CAAA;AAIrB,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,CAAA;AA4G3E,eAAO,MAAM,aAAa;;;;;;;;;;+EAAwC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAapD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,CAAA;AA8G3E,eAAO,MAAM,aAAa;;;;;;;;;;+EAAwC,CAAA"}

package/dist/fields/Checkbox/index.js

@@ -15,7 +15,7 @@ import { generateFieldID } from '../../utilities/generateFieldID.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { CheckboxInput } from './Input.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'checkbox';
 export { CheckboxInput };
 const CheckboxFieldComponent = props => {
@@ -88,17 +88,18 @@ const CheckboxFieldComponent = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, baseClass, showError && 'error', className, value_0 && `${baseClass}--checked`, (readOnly || disabled) && `${baseClass}--read-only`].filter(Boolean).join(' '),
     style: styles,
-    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
-      CustomComponent: Error,
-      Fallback: /*#__PURE__*/_jsx(FieldError, {
-        alignCaret: isRTL ? 'right' : 'left',
-        path: path,
-        showError: showError
-      })
-    }), /*#__PURE__*/_jsx(CheckboxInput, {
+    children: [/*#__PURE__*/_jsx(CheckboxInput, {
       AfterInput: AfterInput,
       BeforeInput: BeforeInput,
       checked: checked,
+      Error: /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          alignCaret: isRTL ? 'right' : 'left',
+          path: path,
+          showError: showError
+        })
+      }),
       id: fieldID,
       inputRef: null,
       Label: Label,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["rtlLanguages","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useForm","useField","withCondition","useEditDepth","useTranslation","generateFieldID","mergeFieldStyles","fieldBaseClass","CheckboxInput","baseClass","CheckboxFieldComponent","props","id","checked","checkedFromProps","disableFormData","field","admin","className","description","label","required","onChange","onChangeFromProps","partialChecked","path","pathFromProps","readOnly","validate","uuid","editDepth","i18n","language","isRTL","includes","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","onToggle","Boolean","fieldID","styles","_jsxs","filter","join","style","_jsx","CustomComponent","Fallback","alignCaret","inputRef","name","CheckboxField"],"sources":["../../../src/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  CheckboxFieldClientComponent,\n  CheckboxFieldClientProps,\n  CheckboxFieldValidation,\n} from 'payload'\n\nimport { rtlLanguages } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { CheckboxInputProps } from './Input.js'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { CheckboxInput } from './Input.js'\nimport './index.scss'\n\nconst baseClass = 'checkbox'\n\nexport { CheckboxFieldClientProps, CheckboxInput, type CheckboxInputProps }\n\nconst CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {\n  const {\n    id,\n    checked: checkedFromProps,\n    disableFormData,\n    field,\n    field: {\n      admin: { className, description } = {} as CheckboxFieldClientProps['field']['admin'],\n      label,\n      required,\n    } = {} as CheckboxFieldClientProps['field'],\n    onChange: onChangeFromProps,\n    partialChecked,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { uuid } = useForm()\n\n  const editDepth = useEditDepth()\n\n  const {\n    i18n: { language },\n  } = useTranslation()\n  const isRTL = (rtlLanguages as readonly string[]).includes(language)\n\n  const memoizedValidate: CheckboxFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    disableFormData,\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onToggle = useCallback(() => {\n    if (!readOnly) {\n      setValue(!value)\n      if (typeof onChangeFromProps === 'function') {\n        onChangeFromProps(!value)\n      }\n    }\n  }, [onChangeFromProps, readOnly, setValue, value])\n\n  const checked = checkedFromProps || Boolean(value)\n\n  const fieldID = id || generateFieldID(path, editDepth, uuid)\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        showError && 'error',\n        className,\n        value && `${baseClass}--checked`,\n        (readOnly || disabled) && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={\n          <FieldError alignCaret={isRTL ? 'right' : 'left'} path={path} showError={showError} />\n        }\n      />\n      <CheckboxInput\n        AfterInput={AfterInput}\n        BeforeInput={BeforeInput}\n        checked={checked}\n        id={fieldID}\n        inputRef={null}\n        Label={Label}\n        label={label}\n        name={path}\n        onToggle={onToggle}\n        partialChecked={partialChecked}\n        readOnly={readOnly || disabled}\n        required={required}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const CheckboxField = withCondition(CheckboxFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["rtlLanguages","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useForm","useField","withCondition","useEditDepth","useTranslation","generateFieldID","mergeFieldStyles","fieldBaseClass","CheckboxInput","baseClass","CheckboxFieldComponent","props","id","checked","checkedFromProps","disableFormData","field","admin","className","description","label","required","onChange","onChangeFromProps","partialChecked","path","pathFromProps","readOnly","validate","uuid","editDepth","i18n","language","isRTL","includes","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","onToggle","Boolean","fieldID","styles","_jsxs","filter","join","style","_jsx","CustomComponent","Fallback","alignCaret","inputRef","name","CheckboxField"],"sources":["../../../src/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  CheckboxFieldClientComponent,\n  CheckboxFieldClientProps,\n  CheckboxFieldValidation,\n} from 'payload'\n\nimport { rtlLanguages } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { CheckboxInputProps } from './Input.js'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { CheckboxInput } from './Input.js'\nimport './index.css'\n\nconst baseClass = 'checkbox'\n\nexport { CheckboxFieldClientProps, CheckboxInput, type CheckboxInputProps }\n\nconst CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {\n  const {\n    id,\n    checked: checkedFromProps,\n    disableFormData,\n    field,\n    field: {\n      admin: { className, description } = {} as CheckboxFieldClientProps['field']['admin'],\n      label,\n      required,\n    } = {} as CheckboxFieldClientProps['field'],\n    onChange: onChangeFromProps,\n    partialChecked,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { uuid } = useForm()\n\n  const editDepth = useEditDepth()\n\n  const {\n    i18n: { language },\n  } = useTranslation()\n  const isRTL = (rtlLanguages as readonly string[]).includes(language)\n\n  const memoizedValidate: CheckboxFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    disableFormData,\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onToggle = useCallback(() => {\n    if (!readOnly) {\n      setValue(!value)\n      if (typeof onChangeFromProps === 'function') {\n        onChangeFromProps(!value)\n      }\n    }\n  }, [onChangeFromProps, readOnly, setValue, value])\n\n  const checked = checkedFromProps || Boolean(value)\n\n  const fieldID = id || generateFieldID(path, editDepth, uuid)\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        showError && 'error',\n        className,\n        value && `${baseClass}--checked`,\n        (readOnly || disabled) && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <CheckboxInput\n        AfterInput={AfterInput}\n        BeforeInput={BeforeInput}\n        checked={checked}\n        Error={\n          <RenderCustomComponent\n            CustomComponent={Error}\n            Fallback={\n              <FieldError alignCaret={isRTL ? 'right' : 'left'} path={path} showError={showError} />\n            }\n          />\n        }\n        id={fieldID}\n        inputRef={null}\n        Label={Label}\n        label={label}\n        name={path}\n        onToggle={onToggle}\n        partialChecked={partialChecked}\n        readOnly={readOnly || disabled}\n        required={required}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const CheckboxField = withCondition(CheckboxFieldComponent)\n"],"mappings":"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","ignoreList":[]}