@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-739c492

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -75,8 +75,15 @@ import { DroppableContainer } from '@dnd-kit/core';
 import { DroppableContainers } from '@dnd-kit/core';
 import { DroppableMeasuring } from '@dnd-kit/core';
 import { ElementType } from 'react';
+import { FieldHelperTextProps } from '@ark-ui/react/field';
+import { FieldInputProps as FieldInputProps_2 } from '@ark-ui/react/field';
+import { FieldLabelProps } from '@ark-ui/react/field';
 import { FieldMessageVariantProps } from '@cerberus/styled-system/recipes';
+import { FieldRootProps as FieldRootProps_2 } from '@ark-ui/react/field';
+import type { FieldRootProps as FieldRootProps_3 } from '@ark-ui/react';
 import type { FieldsetHTMLAttributes } from 'react';
+import { FieldTextareaProps } from '@ark-ui/react/field';
+import { FieldVariantProps } from '@cerberus/styled-system/recipes';
 import { FileStatusVariantProps } from '@cerberus/styled-system/recipes';
 import { ForwardRefExoticComponent } from 'react';
 import { getClientRect } from '@dnd-kit/core';
@@ -86,7 +93,6 @@ import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { IconButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { InputHTMLAttributes } from 'react';
-import { InputVariantProps } from '@cerberus/styled-system/recipes';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardCode } from '@dnd-kit/core';
 import { KeyboardCodes } from '@dnd-kit/core';
@@ -150,7 +156,6 @@ import { TabsVariantProps } from '@cerberus/styled-system/recipes';
 import { TagVariantProps } from '@cerberus/styled-system/recipes';
 import { TbodyVariantProps } from '@cerberus/styled-system/recipes';
 import { TdVariantProps } from '@cerberus/styled-system/recipes';
-import type { TextareaHTMLAttributes } from 'react';
 import { ThVariantProps } from '@cerberus/styled-system/recipes';
 import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
 import { TooltipContentProps } from '@ark-ui/react/tooltip';
@@ -530,10 +535,6 @@ declare interface BaseSelectProps {
      * The placeholder text when no option is selected.
      */
     placeholder?: string;
-    /**
-     * The label of the select.
-     */
-    label: string;
 }
 export { BaseSelectProps }
 export { BaseSelectProps as BaseSelectProps_alias_1 }
@@ -575,7 +576,13 @@ export { ButtonParts as ButtonParts_alias_2 }
  * @module 'button/parts'
  */
 declare interface ButtonPartsValue {
+    /**
+     * The context provider of the button.
+     */
     Root: ElementType;
+    /**
+     * The icon of the button.
+     */
     Icon: ElementType;
 }
 
@@ -629,13 +636,13 @@ export declare type CheckboxIconProps = SVGProps<SVGSVGElement>;
  */
 declare type CheckboxProps = CheckboxVariantProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
     /**
-     * The id of the FieldMessage element describing the Checkbox.
+     * @deprecated
      */
     describedBy?: string;
     /**
-     * The unique identifier for the checkbox. Required for accessibility.
+     * @deprecated use the Field.ids.control instead
      */
-    id: string;
+    id?: string;
     /**
      * Used to display a mixed checked state.
      * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)
@@ -1506,18 +1513,34 @@ export { FeatureFlagValue }
 export { FeatureFlagValue as FeatureFlagValue_alias_1 }
 
 /**
- * Provides the field state for a all related components used within a group.
- * @see https://cerberus.digitalu.design/react/input
+ * The Field component is the context provider for all FieldParts and displays
+ * the label, helperText, and ErrorText.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <Field
+ *  ids={{
+ *   control: 'firstName',
+ *  }}
+ *  label="Label"
+ *  helperText="This is what people will see on your profile."
+ *  errorText="A first name is required to create an account."
+ *  required
+ * >
+ *   <Input name="firstName" type="text" />
+ * </Field>
+ * ```
  */
-declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
+declare function Field(props: FieldProps): JSX_2.Element;
 export { Field }
 export { Field as Field_alias_1 }
+export { Field as Field_alias_2 }
 
 /**
  * This module provides a context and hook for the field.
  * @module Field
  */
-declare interface FieldContextValue {
+export declare interface FieldContextValue {
     /**
      * Whether the field is disabled.
      * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
@@ -1536,23 +1559,93 @@ declare interface FieldContextValue {
      */
     invalid?: boolean;
 }
-export { FieldContextValue }
-export { FieldContextValue as FieldContextValue_alias_1 }
 
 /**
- * A component that provides feedback about the field.
- * @see https://cerberus.digitalu.design/react/field-message
+ * The error text for the Field component that is shown when the field is
+ * invalid.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
  * @example
  * ```tsx
- * <Field>
- *  <Label htmlFor="first_name">First Name</Label>
- *  <Input aria-describedBy="help:first_name" id="first_name" type="text" />
- *  <FieldMessage id="help:first_name">
- *   This will only be used in your account information.
- *  </FieldMessage>
- * </Field>
+ * <FieldRoot>
+ *   <FieldInput />
+ *   <FieldErrorText>Error text</FieldErrorText>
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldErrorText(props: FieldHelperTextProps): JSX_2.Element | null;
+export { FieldErrorText }
+export { FieldErrorText as FieldErrorText_alias_1 }
+export { FieldErrorText as FieldErrorText_alias_2 }
+
+/**
+ * The helper text for the Field component that is shown when the field is
+ * valid.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldInput />
+ *   <FieldHelperText>Helper text</FieldHelperText>
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldHelperText(props: FieldHelperTextProps): JSX_2.Element | null;
+export { FieldHelperText }
+export { FieldHelperText as FieldHelperText_alias_1 }
+export { FieldHelperText as FieldHelperText_alias_2 }
+
+declare type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>;
+export { FieldIndicatorProps }
+export { FieldIndicatorProps as FieldIndicatorProps_alias_1 }
+export { FieldIndicatorProps as FieldIndicatorProps_alias_2 }
+
+/**
+ * The input for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldInput />
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldInput(props: FieldInputProps): JSX_2.Element;
+export { FieldInput }
+export { FieldInput as FieldInput_alias_1 }
+export { FieldInput as FieldInput_alias_2 }
+
+declare interface FieldInputProps extends Omit<FieldInputProps_2, 'size'>, FieldVariantProps {
+    /**
+     * An optional icon to display at the start of the input.
+     */
+    startIcon?: ReactNode;
+    /**
+     * An optional icon to display at the end of the input.
+     */
+    endIcon?: ReactNode;
+}
+export { FieldInputProps }
+export { FieldInputProps as FieldInputProps_alias_1 }
+export { FieldInputProps as FieldInputProps_alias_2 }
+
+/**
+ * The label for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldLabel>Label</FieldLabel>
+ * </FieldRoot>
  * ```
  */
+declare function FieldLabel(props: FieldLabelProps): JSX_2.Element;
+export { FieldLabel }
+export { FieldLabel as FieldLabel_alias_1 }
+export { FieldLabel as FieldLabel_alias_2 }
+
+/**
+ * @deprecated use FieldHelperText, FieldErrorText, or FieldParts instead
+ */
 declare function FieldMessage(props: FieldMessageProps): JSX_2.Element;
 export { FieldMessage }
 export { FieldMessage as FieldMessage_alias_1 }
@@ -1577,6 +1670,111 @@ declare type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProp
 export { FieldMessageProps }
 export { FieldMessageProps as FieldMessageProps_alias_1 }
 
+/**
+ * An Object containing the parts of the Field component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the FieldParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const FieldParts: FieldPartsValue;
+export { FieldParts }
+export { FieldParts as FieldParts_alias_1 }
+export { FieldParts as FieldParts_alias_2 }
+
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+declare interface FieldPartsValue {
+    /**
+     * The container of the field.
+     */
+    Root: ElementType;
+    /**
+     * The label of the field.
+     */
+    Label: ElementType;
+    /**
+     * The input of the field.
+     */
+    Input: ElementType;
+    /**
+     * The textarea of the field.
+     */
+    Textarea: ElementType;
+    /**
+     * The text that displays when the field is valid.
+     */
+    HelperText: ElementType;
+    /**
+     * The text that displays when the field is invalid.
+     */
+    ErrorText: ElementType;
+    /**
+     * The indicator that appears at the start of the field.
+     */
+    StartIndicator: ElementType;
+    /**
+     * The status indicator of the field.
+     */
+    StatusIndicator: ElementType;
+}
+
+declare interface FieldProps extends FieldRootProps_2 {
+    /**
+     * The label of the field.
+     */
+    label?: string;
+    /**
+     * The helper text of the field.
+     */
+    helperText?: string;
+    /**
+     * A helper text positioned at the end of the field. Good for Textarea fields.
+     */
+    secondaryHelperText?: string;
+    /**
+     * The error text of the field. Shown when the field is invalid.
+     */
+    errorText?: string;
+}
+export { FieldProps }
+export { FieldProps as FieldProps_alias_1 }
+export { FieldProps as FieldProps_alias_2 }
+
+/**
+ * @deprecated use FieldRoot or FieldParts instead
+ */
+export declare function FieldProvider(props: PropsWithChildren<FieldRootProps_3>): JSX.Element;
+
+/**
+ * The context & container for the Field components.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot required ids={{ input: 'exampleId' }}>
+ *  <FieldLabel>Label</FieldLabel>
+ *  <FieldInput />
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldRoot(props: FieldRootProps): JSX_2.Element;
+export { FieldRoot }
+export { FieldRoot as FieldRoot_alias_1 }
+export { FieldRoot as FieldRoot_alias_2 }
+
+/**
+ * This module contains all the primitives of the Field component.
+ * @module 'field'
+ */
+declare type FieldRootProps = FieldRootProps_2 & FieldVariantProps;
+export { FieldRootProps }
+export { FieldRootProps as FieldRootProps_alias_1 }
+export { FieldRootProps as FieldRootProps_alias_2 }
+
 /**
  * A component to group related elements in a form for accessibility.
  * @memberof Field
@@ -1655,7 +1853,9 @@ export { FieldsetLabel as FieldsetLabel_alias_1 }
  * This module contains the FieldsetLabel component.
  * @module FieldsetLabel
  */
-declare type FieldsetLabelProps = LabelProps & LabelVariantProps;
+declare type FieldsetLabelProps = LabelProps & LabelVariantProps & {
+    htmlFor?: string;
+};
 export { FieldsetLabelProps }
 export { FieldsetLabelProps as FieldsetLabelProps_alias_1 }
 
@@ -1667,6 +1867,55 @@ declare type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
 export { FieldsetProps }
 export { FieldsetProps as FieldsetProps_alias_1 }
 
+/**
+ * The start indicator displays an indicator at the start of the Input.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ */
+declare function FieldStartIndicator(props: FieldIndicatorProps): JSX_2.Element | null;
+export { FieldStartIndicator }
+export { FieldStartIndicator as FieldStartIndicator_alias_1 }
+export { FieldStartIndicator as FieldStartIndicator_alias_2 }
+
+/**
+ * The invalid status indicator for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldStatusIndicator />
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldStatusIndicator(props: FieldStatusIndicatorProps): JSX_2.Element;
+export { FieldStatusIndicator }
+export { FieldStatusIndicator as FieldStatusIndicator_alias_1 }
+export { FieldStatusIndicator as FieldStatusIndicator_alias_2 }
+
+declare interface FieldStatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The fallback content to display when the field is valid.
+     */
+    fallback?: ReactNode;
+}
+export { FieldStatusIndicatorProps }
+export { FieldStatusIndicatorProps as FieldStatusIndicatorProps_alias_1 }
+export { FieldStatusIndicatorProps as FieldStatusIndicatorProps_alias_2 }
+
+/**
+ * The textarea for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldTextarea />
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldTextarea(props: FieldTextareaProps): JSX_2.Element;
+export { FieldTextarea }
+export { FieldTextarea as FieldTextarea_alias_1 }
+export { FieldTextarea as FieldTextarea_alias_2 }
+
 declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
     /**
      * A unique identifier for the file status. Required for accessibility.
@@ -1923,39 +2172,29 @@ export { IndeterminateProgressBarProps }
 export { IndeterminateProgressBarProps as IndeterminateProgressBarProps_alias_1 }
 
 /**
- * A component that allows the user to input text. Must be wrapped in a Field
- * component to keep track of the state for entire group of elements related to
- * the field.
- * @see https://cerberus.digitalu.design/react/input
+ * A named export for the FieldInput component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * import { Input } from '@cerberus/react'
+ *
+ * <Field
+ *   ids={{
+ *    control: 'email',
+ *   }}
+ *   label="Enter your email"
+ *   helperText="We'll never share your email with anyone else."
+ *   errorText="Email is required."
+ *   required
+ * >
+ *   <Input type="email" />
+ * </Field>
+ * ```
  */
-declare function Input(props: InputProps): JSX_2.Element;
+declare const Input: typeof FieldInput;
 export { Input }
 export { Input as Input_alias_1 }
-
-declare interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
-    /**
-     * The id of the FieldMessage component used to describe the input. Required for accessibility.
-     */
-    describedBy?: string;
-    /**
-     * The unique identifier for the input element. Required for accessibility.
-     */
-    id: string;
-    /**
-     * An optional icon to display at the start of the input.
-     */
-    startIcon?: ReactNode;
-    /**
-     * An optional icon to display at the end of the input.
-     */
-    endIcon?: ReactNode;
-}
-export { InputBaseProps }
-export { InputBaseProps as InputBaseProps_alias_1 }
-
-declare type InputProps = InputBaseProps & InputVariantProps;
-export { InputProps }
-export { InputProps as InputProps_alias_1 }
+export { Input as Input_alias_2 }
 
 export { KeyboardCode }
 
@@ -1970,16 +2209,7 @@ export { KeyboardSensorOptions }
 export { KeyboardSensorProps }
 
 /**
- * A a11y compliant label component.
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @see https://cerberus.digitalu.design/react/label
- * @example
- * ```tsx
- * <Field required>
- *   <Label htmlFor="search" hidden>Search everything</Label>
- *   <Input id="search" startIcon={Search} type="text" />
- * </Field>
- * ```
+ * @deprecated Use FieldLabel or FieldParts.Label instead.
  */
 declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
 export { Label }
@@ -1989,16 +2219,7 @@ export { Label as Label_alias_1 }
  * This module contains the Label component.
  * @module
  */
-declare interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {
-    /**
-     * The unique identifier for the input element. Required for accessibility.
-     */
-    htmlFor: string;
-    /**
-     * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.
-     */
-    hidden?: boolean;
-}
+declare type LabelBaseProps = HTMLAttributes<HTMLLabelElement>;
 export { LabelBaseProps }
 export { LabelBaseProps as LabelBaseProps_alias_1 }
 
@@ -3272,6 +3493,18 @@ declare type SpinnerProps = SVGProps<SVGSVGElement> & {
 export { SpinnerProps }
 export { SpinnerProps as SpinnerProps_alias_1 }
 
+/**
+ * Splits the properties of an object into multiple groups based on lists of keys.
+ * @param props - The object to split.
+ * @param keyGroups - The lists of keys to include in each group.
+ * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.
+ */
+declare function splitProps<T extends object>(props: T, ...keyGroups: (keyof T)[][]): {
+    [K in keyof T]?: T[K];
+}[];
+export { splitProps }
+export { splitProps as splitProps_alias_1 }
+
 /**
  * This module contains the tag component.
  * @module
@@ -3556,34 +3789,10 @@ declare function Text_2(props: PropsWithChildren<TextProps>): JSX_2.Element;
 export { Text_2 as Text }
 export { Text_2 as Text_alias_1 }
 
-/**
- * A component that allows the user to input large blocks of text.
- * @see https://cerberus.digitalu.design/react/textarea
- */
-declare function Textarea(props: TextareaProps): JSX.Element;
+declare const Textarea: typeof FieldTextarea;
 export { Textarea }
 export { Textarea as Textarea_alias_1 }
-
-/**
- * This module contains the Textarea component.
- * @module
- */
-declare interface TextareaBaseProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
-    /**
-     * The ID of the FieldMessage that describes the textarea.
-     */
-    describedBy?: string;
-    /**
-     * The unique id of the textarea.
-     */
-    id: string;
-}
-export { TextareaBaseProps }
-export { TextareaBaseProps as TextareaBaseProps_alias_1 }
-
-declare type TextareaProps = InputVariantProps & TextareaBaseProps;
-export { TextareaProps }
-export { TextareaProps as TextareaProps_alias_1 }
+export { Textarea as Textarea_alias_2 }
 
 declare type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span';
 export { TextElements }
@@ -3747,7 +3956,7 @@ export { Toggle as Toggle_alias_1 }
  */
 declare type ToggleBase = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'value'> & {
     /**
-     * The FieldMessage providing context for the Toggle.
+     * @deprecated
      */
     describedBy?: string;
     /**
@@ -3872,13 +4081,7 @@ export { useCTAModal }
 export { useCTAModal as useCTAModal_alias_1 }
 
 /**
- * A hook for formatting and validating date inputs. The date format defaults to US Military format.
- * @example
- * ```tsx
- * const MyComponent = () => {
- *  const date = useDate({ initialValue: '01 JAN 2024' })
- *  return <input onChange={date.onChange} type="text" value={date.value} />
- * }
+ * @deprecated use the DatePicker family instead
  */
 declare function useDate(options?: UseDateOptions): UseDateReturn;
 export { useDate }
@@ -3944,9 +4147,7 @@ export { useFeatureFlags as useFeatureFlags_alias_1 }
  * Used to access the field context.
  * @returns The field context.
  */
-declare function useFieldContext(): FieldContextValue;
-export { useFieldContext }
-export { useFieldContext as useFieldContext_alias_1 }
+export declare function useFieldContext(): FieldContextValue;
 
 /**
  * Provides a hook for using a custom modal via the native dialog element

package/build/legacy/components/Checkbox.cjs

@@ -28,46 +28,35 @@ var import_recipes = require("@cerberus/styled-system/recipes");
 var import_patterns = require("@cerberus/styled-system/patterns");
 var import_css = require("@cerberus/styled-system/css");
 
-// src/components/Show.tsx
+// src/context/cerberus.tsx
 var import_react = require("react");
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
-}
-
-// src/context/field.tsx
-var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var FieldContext = (0, import_react2.createContext)(null);
-function useFieldContext() {
-  const context = (0, import_react2.useContext)(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
-}
-
-// src/context/cerberus.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react3.createContext)(null);
+var CerberusContext = (0, import_react.createContext)(null);
 function useCerberusContext() {
-  const context = (0, import_react3.useContext)(CerberusContext);
+  const context = (0, import_react.useContext)(CerberusContext);
   if (!context) {
     throw new Error("useCerberus must be used within a CerberusProvider");
   }
   return context;
 }
 
+// src/components/Show.tsx
+var import_react2 = require("react");
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = (0, import_react2.useMemo)(() => when ?? false, [when]);
+  return (0, import_react2.useMemo)(() => {
+    if (condition) return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
 // src/components/Checkbox.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_field = require("@ark-ui/react/field");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Checkbox(props) {
-  const { describedBy, size, checked, mixed, ...nativeProps } = props;
-  const { invalid, ...fieldStates } = useFieldContext();
+  const { size, checked, mixed, ...nativeProps } = props;
+  const { invalid, disabled, readOnly, required, ariaDescribedby, ids } = (0, import_field.useFieldContext)();
   const styles = (0, import_recipes.checkbox)({ size });
   const { icons } = useCerberusContext();
   const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons;
@@ -77,7 +66,7 @@ function Checkbox(props) {
   if (!IndeterminateIcon) {
     throw new Error("The CerberusProvider is missing the indeterminate icon.");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       className: (0, import_css.cx)(
@@ -88,20 +77,23 @@ function Checkbox(props) {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "input",
           {
             ...nativeProps,
-            ...fieldStates,
-            ...describedBy && { "aria-describedby": describedBy },
+            ...disabled && { disabled: true },
+            ...readOnly && { readOnly: true },
+            ...required && { required: true },
+            ...ariaDescribedby && { "aria-describedby": ariaDescribedby },
             ...invalid && { "aria-invalid": true },
             ...mixed && { "aria-checked": "mixed" },
+            id: ids.control,
             className: (0, import_css.cx)("peer", nativeProps.className, styles.input),
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IndeterminateIcon, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndeterminateIcon, {}) }) })
       ]
     }
   );