@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

package/dist/components/field/field.d.ts

@@ -0,0 +1,45 @@
+import { FieldRootProps } from '@ark-ui/react/field';
+import { ReactNode } from 'react';
+import { CerberusPrimitiveProps } from '../../system/types';
+export interface FieldProps extends FieldRootProps {
+    /**
+     * The label of the field.
+     */
+    label?: string;
+    /**
+     * The helper text of the field.
+     */
+    helperText?: ReactNode;
+    /**
+     * 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;
+    /**
+     * Whether to hide the label visually while keeping it accessible to screen readers.
+     */
+    hideLabel?: boolean;
+}
+/**
+ * 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>
+ * ```
+ */
+export declare function Field(props: CerberusPrimitiveProps<FieldProps>): import("react").JSX.Element;

package/dist/components/field/field.js

@@ -0,0 +1,72 @@
+import { splitProps } from "../../utils/index.js";
+import { Show } from "../show/show.js";
+import { FieldErrorText, FieldHelperText, FieldLabel, FieldRoot } from "./primitives.js";
+import { HelperText } from "./helper-text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack } from "styled-system/jsx";
+//#region src/components/field/field.tsx
+/**
+* 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>
+* ```
+*/
+function Field(props) {
+	const [statusProps, fieldProps, rootProps] = splitProps(props, [
+		"disabled",
+		"required",
+		"readOnly",
+		"invalid"
+	], [
+		"label",
+		"helperText",
+		"secondaryHelperText",
+		"errorText",
+		"hideLabel",
+		"children"
+	]);
+	return /* @__PURE__ */ jsxs(FieldRoot, {
+		...statusProps,
+		...rootProps,
+		children: [
+			/* @__PURE__ */ jsx(Show, {
+				when: fieldProps.label,
+				children: /* @__PURE__ */ jsx(FieldLabel, {
+					hideLabel: fieldProps.hideLabel,
+					children: fieldProps.label
+				})
+			}),
+			fieldProps.children,
+			/* @__PURE__ */ jsxs(HStack, {
+				justifyContent: "space-between",
+				w: "full",
+				children: [
+					/* @__PURE__ */ jsx(HelperText, {
+						invalid: statusProps.invalid,
+						children: fieldProps.helperText
+					}),
+					/* @__PURE__ */ jsx(FieldErrorText, { children: fieldProps.errorText }),
+					/* @__PURE__ */ jsx(Show, {
+						when: fieldProps.secondaryHelperText,
+						children: /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.secondaryHelperText })
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { Field };

package/dist/components/field/helper-text.cjs

@@ -0,0 +1,18 @@
+"use client";
+const require_primitives = require("./primitives.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/field/helper-text.tsx
+/**
+* The HelperText component is an abstraction for hiding the helper text
+* when the field is invalid. Ark UI assumes people want the helper text
+* to always be visible, so this is a workaround for that.
+*/
+function HelperText(props) {
+	if (props.invalid) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.FieldHelperText, {
+		"data-has-content": Boolean(props.children),
+		children: props.children
+	});
+}
+//#endregion
+exports.HelperText = HelperText;

package/dist/components/field/helper-text.d.cts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+interface HelperTextProps {
+    invalid?: boolean;
+}
+/**
+ * The HelperText component is an abstraction for hiding the helper text
+ * when the field is invalid. Ark UI assumes people want the helper text
+ * to always be visible, so this is a workaround for that.
+ */
+export declare function HelperText(props: PropsWithChildren<HelperTextProps>): import("react").JSX.Element | null;
+export {};

package/dist/components/field/helper-text.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+interface HelperTextProps {
+    invalid?: boolean;
+}
+/**
+ * The HelperText component is an abstraction for hiding the helper text
+ * when the field is invalid. Ark UI assumes people want the helper text
+ * to always be visible, so this is a workaround for that.
+ */
+export declare function HelperText(props: PropsWithChildren<HelperTextProps>): import("react").JSX.Element | null;
+export {};

package/dist/components/field/helper-text.js

@@ -0,0 +1,18 @@
+"use client";
+import { FieldHelperText } from "./primitives.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/field/helper-text.tsx
+/**
+* The HelperText component is an abstraction for hiding the helper text
+* when the field is invalid. Ark UI assumes people want the helper text
+* to always be visible, so this is a workaround for that.
+*/
+function HelperText(props) {
+	if (props.invalid) return null;
+	return /* @__PURE__ */ jsx(FieldHelperText, {
+		"data-has-content": Boolean(props.children),
+		children: props.children
+	});
+}
+//#endregion
+export { HelperText };

package/dist/components/field/index.cjs

@@ -0,0 +1,20 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_start_indicator = require("./start-indicator.cjs");
+const require_status_indicator = require("./status-indicator.cjs");
+const require_primitives = require("./primitives.cjs");
+const require_field = require("./field.cjs");
+const require_parts = require("./parts.cjs");
+exports.Field = require_field.Field;
+exports.FieldErrorText = require_primitives.FieldErrorText;
+exports.FieldHelperText = require_primitives.FieldHelperText;
+exports.FieldInput = require_primitives.FieldInput;
+exports.FieldInputRoot = require_primitives.FieldInputRoot;
+exports.FieldLabel = require_primitives.FieldLabel;
+exports.FieldParts = require_parts.FieldParts;
+exports.FieldRequiredIndicator = require_primitives.FieldRequiredIndicator;
+exports.FieldRoot = require_primitives.FieldRoot;
+exports.FieldStartIndicator = require_start_indicator.FieldStartIndicator;
+exports.FieldStatusIndicator = require_status_indicator.FieldStatusIndicator;
+exports.FieldTextarea = require_primitives.FieldTextarea;
+exports.Input = require_primitives.Input;
+exports.Textarea = require_primitives.Textarea;

package/dist/components/field/index.d.cts

@@ -0,0 +1,6 @@
+export * from './field';
+export * from './primitives';
+export * from './parts';
+export * from './start-indicator';
+export * from './status-indicator';
+export type { FieldInputElProps } from './input';

package/dist/components/field/index.d.ts

@@ -0,0 +1,6 @@
+export * from './field';
+export * from './primitives';
+export * from './parts';
+export * from './start-indicator';
+export * from './status-indicator';
+export type { FieldInputElProps } from './input';

package/dist/components/field/index.js

@@ -0,0 +1,6 @@
+import { FieldStartIndicator } from "./start-indicator.js";
+import { FieldStatusIndicator } from "./status-indicator.js";
+import { FieldErrorText, FieldHelperText, FieldInput, FieldInputRoot, FieldLabel, FieldRequiredIndicator, FieldRoot, FieldTextarea, Input, Textarea } from "./primitives.js";
+import { Field } from "./field.js";
+import { FieldParts } from "./parts.js";
+export { Field, FieldErrorText, FieldHelperText, FieldInput, FieldInputRoot, FieldLabel, FieldParts, FieldRequiredIndicator, FieldRoot, FieldStartIndicator, FieldStatusIndicator, FieldTextarea, Input, Textarea };

package/dist/components/field/input.cjs

@@ -0,0 +1,21 @@
+"use client";
+const require_index = require("../../utils/index.cjs");
+const require_start_indicator = require("./start-indicator.cjs");
+const require_status_indicator = require("./status-indicator.cjs");
+const require_primitives = require("./primitives.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/field/input.tsx
+function CerberusFieldInput(props) {
+	const [{ startIcon, endIcon }, fieldProps] = require_index.splitProps(props, ["startIcon", "endIcon"]);
+	const hasStartIcon = Boolean(startIcon);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives.FieldInputRoot, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_start_indicator.FieldStartIndicator, { children: startIcon }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.FieldInput, {
+			...fieldProps,
+			...hasStartIcon && { "data-has": "start-indicator" }
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_status_indicator.FieldStatusIndicator, { fallback: endIcon })
+	] });
+}
+//#endregion
+exports.CerberusFieldInput = CerberusFieldInput;

package/dist/components/field/input.d.cts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { FieldVariantProps } from 'styled-system/recipes';
+import { FieldInputProps as PrimitiveInputProps } from './primitives';
+/**
+ * This module contains an abstraction of the Field.Input component.
+ * @module 'field/input'
+ */
+export interface FieldInputElProps extends Omit<PrimitiveInputProps, '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 declare function CerberusFieldInput(props: FieldInputElProps): import("react").JSX.Element;

package/dist/components/field/input.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { FieldVariantProps } from 'styled-system/recipes';
+import { FieldInputProps as PrimitiveInputProps } from './primitives';
+/**
+ * This module contains an abstraction of the Field.Input component.
+ * @module 'field/input'
+ */
+export interface FieldInputElProps extends Omit<PrimitiveInputProps, '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 declare function CerberusFieldInput(props: FieldInputElProps): import("react").JSX.Element;

package/dist/components/field/input.js

@@ -0,0 +1,21 @@
+"use client";
+import { splitProps } from "../../utils/index.js";
+import { FieldStartIndicator } from "./start-indicator.js";
+import { FieldStatusIndicator } from "./status-indicator.js";
+import { FieldInput, FieldInputRoot } from "./primitives.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/field/input.tsx
+function CerberusFieldInput(props) {
+	const [{ startIcon, endIcon }, fieldProps] = splitProps(props, ["startIcon", "endIcon"]);
+	const hasStartIcon = Boolean(startIcon);
+	return /* @__PURE__ */ jsxs(FieldInputRoot, { children: [
+		/* @__PURE__ */ jsx(FieldStartIndicator, { children: startIcon }),
+		/* @__PURE__ */ jsx(FieldInput, {
+			...fieldProps,
+			...hasStartIcon && { "data-has": "start-indicator" }
+		}),
+		/* @__PURE__ */ jsx(FieldStatusIndicator, { fallback: endIcon })
+	] });
+}
+//#endregion
+export { CerberusFieldInput };

package/dist/components/field/parts.cjs

@@ -0,0 +1,26 @@
+const require_start_indicator = require("./start-indicator.cjs");
+const require_status_indicator = require("./status-indicator.cjs");
+const require_primitives = require("./primitives.cjs");
+//#region src/components/field/parts.ts
+/**
+* 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.
+*/
+var FieldParts = {
+	Root: require_primitives.FieldRoot,
+	Label: require_primitives.FieldLabel,
+	Input: require_primitives.FieldInput,
+	Textarea: require_primitives.FieldTextarea,
+	HelperText: require_primitives.FieldHelperText,
+	ErrorText: require_primitives.FieldErrorText,
+	StartIndicator: require_start_indicator.FieldStartIndicator,
+	StatusIndicator: require_status_indicator.FieldStatusIndicator,
+	RequiredIndicator: require_primitives.FieldRequiredIndicator
+};
+//#endregion
+exports.FieldParts = FieldParts;

package/dist/components/field/parts.d.cts

@@ -0,0 +1,54 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+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;
+    /**
+     * The indicator that appears at the end of the field.
+     */
+    RequiredIndicator: ElementType;
+}
+/**
+ * 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.
+ */
+export declare const FieldParts: FieldPartsValue;
+export {};

package/dist/components/field/parts.d.ts

@@ -0,0 +1,54 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+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;
+    /**
+     * The indicator that appears at the end of the field.
+     */
+    RequiredIndicator: ElementType;
+}
+/**
+ * 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.
+ */
+export declare const FieldParts: FieldPartsValue;
+export {};

package/dist/components/field/parts.js

@@ -0,0 +1,26 @@
+import { FieldStartIndicator } from "./start-indicator.js";
+import { FieldStatusIndicator } from "./status-indicator.js";
+import { FieldErrorText, FieldHelperText, FieldInput, FieldLabel, FieldRequiredIndicator, FieldRoot, FieldTextarea } from "./primitives.js";
+//#region src/components/field/parts.ts
+/**
+* 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.
+*/
+var FieldParts = {
+	Root: FieldRoot,
+	Label: FieldLabel,
+	Input: FieldInput,
+	Textarea: FieldTextarea,
+	HelperText: FieldHelperText,
+	ErrorText: FieldErrorText,
+	StartIndicator: FieldStartIndicator,
+	StatusIndicator: FieldStatusIndicator,
+	RequiredIndicator: FieldRequiredIndicator
+};
+//#endregion
+export { FieldParts };

package/dist/components/field/primitives.cjs

@@ -0,0 +1,81 @@
+const require_index = require("../../system/index.cjs");
+const require_input = require("./input.cjs");
+const require_error_text = require("./error-text.cjs");
+let styled_system_recipes = require("styled-system/recipes");
+let styled_system_css = require("styled-system/css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+//#region src/components/field/primitives.tsx
+/**
+* This module contains all the primitives of the Field component.
+* @module 'field'
+*/
+var { withSlotRecipe, withNoRecipe } = require_index.createCerberusPrimitive(styled_system_recipes.field);
+var FieldRoot = withSlotRecipe(_ark_ui_react_field.Field.Root, "root");
+function FieldLabelEl(props) {
+	const { children, hideLabel, className, ...nativeProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_field.Field.Label, {
+		...nativeProps,
+		className: (0, styled_system_css.cx)(className, hideLabel && (0, styled_system_css.css)({ srOnly: true })),
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.RequiredIndicator, { children: "(required)" })]
+	});
+}
+var FieldLabel = withSlotRecipe(FieldLabelEl, "label");
+function FieldRequiredIndicatorEl(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.RequiredIndicator, {
+		...props,
+		children: "(required)"
+	});
+}
+var FieldRequiredIndicator = withNoRecipe(FieldRequiredIndicatorEl);
+var FieldInputRoot = withSlotRecipe(_ark_ui_react.ark.div, "inputRoot");
+var FieldInput = withSlotRecipe(_ark_ui_react_field.Field.Input, "input");
+var FieldHelperText = withSlotRecipe(_ark_ui_react_field.Field.HelperText, "helperText");
+var FieldErrorText = withSlotRecipe(require_error_text.CerberusFieldErrorText, "errorText");
+var FieldTextarea = withSlotRecipe(_ark_ui_react_field.Field.Textarea, "textarea");
+/**
+* A named export for the FieldInput component.
+* @description [Field Docs](https://cerberus.digitalu.design/react/field)
+* @example
+* ```tsx
+* import { Input } from '@cerberus/react'
+*
+* <Field
+*   label="Enter your email"
+*   helperText="We'll never share your email with anyone else."
+*   errorText="Email is required."
+*   required
+* >
+*   <Input type="email" />
+* </Field>
+* ```
+*/
+var Input = require_input.CerberusFieldInput;
+/**
+* A named export for the FieldTextarea component.
+* @description [Field Docs](https://cerberus.digitalu.design/react/field)
+* @example
+* ```tsx
+* import { Textarea } from '@cerberus/react'
+*
+* <Field
+*   label="Comments"
+*   helperText="Your comments are valuable to us."
+* >
+*   <Textarea />
+* </Field>
+* ```
+*/
+var Textarea = FieldTextarea;
+//#endregion
+exports.FieldErrorText = FieldErrorText;
+exports.FieldHelperText = FieldHelperText;
+exports.FieldInput = FieldInput;
+exports.FieldInputRoot = FieldInputRoot;
+exports.FieldLabel = FieldLabel;
+exports.FieldRequiredIndicator = FieldRequiredIndicator;
+exports.FieldRoot = FieldRoot;
+exports.FieldTextarea = FieldTextarea;
+exports.Input = Input;
+exports.Textarea = Textarea;

package/dist/components/field/primitives.d.cts

@@ -0,0 +1,73 @@
+import { Field, FieldHelperTextProps as ArkFieldHelperTextProps, FieldInputProps as ArkFieldInputProps, FieldLabelProps as ArkFieldLabelProps, FieldRootProps as ArkFieldRootProps, FieldTextareaProps as ArkFieldTextareaProps, FieldRequiredIndicatorProps as ArkFieldRequiredIndicatorProps } from '@ark-ui/react/field';
+import { HTMLArkProps, PolymorphicProps } from '@ark-ui/react';
+import { FieldVariantProps } from 'styled-system/recipes';
+import { CerberusPrimitiveProps } from '../../system/index';
+import { CerberusFieldInput } from './input';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode, ClassAttributes, HTMLAttributes } from 'react';
+import { BaseCerberusProps } from '../..';
+export type FieldRootProps = CerberusPrimitiveProps<ArkFieldRootProps & FieldVariantProps>;
+export declare const FieldRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Field.RootProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type FieldLabelProps = CerberusPrimitiveProps<ArkFieldLabelProps> & {
+    /**
+     * Whether to hide the label visually while keeping it accessible to screen readers.
+     */
+    hideLabel?: boolean;
+};
+export declare const FieldLabel: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps< BaseCerberusProps & {
+    children?: ReactNode | undefined;
+} & Field.LabelProps & {
+    /**
+     * Whether to hide the label visually while keeping it accessible to screen readers.
+     */
+    hideLabel?: boolean;
+}>, "ref"> & RefAttributes<HTMLElement>>;
+export type FieldRequiredIndicatorProps = CerberusPrimitiveProps<ArkFieldRequiredIndicatorProps>;
+export declare const FieldRequiredIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps< BaseCerberusProps & {
+    children?: ReactNode | undefined;
+} & Field.RequiredIndicatorProps>, "ref"> & RefAttributes<HTMLElement>>;
+export type FieldInputRootProps = CerberusPrimitiveProps<HTMLArkProps<'div'> & FieldVariantProps>;
+export declare const FieldInputRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & PolymorphicProps>, "ref"> & RefAttributes<HTMLElement>>;
+export type FieldInputProps = CerberusPrimitiveProps<ArkFieldInputProps & FieldVariantProps>;
+export declare const FieldInput: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Field.InputProps & RefAttributes<HTMLInputElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type FieldHelperTextProps = CerberusPrimitiveProps<ArkFieldHelperTextProps>;
+export declare const FieldHelperText: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Field.HelperTextProps & RefAttributes<HTMLSpanElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type FieldErrorTextProps = CerberusPrimitiveProps<ArkFieldHelperTextProps>;
+export declare const FieldErrorText: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps< BaseCerberusProps & {
+    children?: ReactNode | undefined;
+} & Field.HelperTextProps>, "ref"> & RefAttributes<HTMLElement>>;
+export type FieldTextareaProps = CerberusPrimitiveProps<ArkFieldTextareaProps>;
+export declare const FieldTextarea: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Field.TextareaProps & RefAttributes<HTMLTextAreaElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * A named export for the FieldInput component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * import { Input } from '@cerberus/react'
+ *
+ * <Field
+ *   label="Enter your email"
+ *   helperText="We'll never share your email with anyone else."
+ *   errorText="Email is required."
+ *   required
+ * >
+ *   <Input type="email" />
+ * </Field>
+ * ```
+ */
+export declare const Input: typeof CerberusFieldInput;
+/**
+ * A named export for the FieldTextarea component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * import { Textarea } from '@cerberus/react'
+ *
+ * <Field
+ *   label="Comments"
+ *   helperText="Your comments are valuable to us."
+ * >
+ *   <Textarea />
+ * </Field>
+ * ```
+ */
+export declare const Textarea: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Field.TextareaProps & RefAttributes<HTMLTextAreaElement>>, "ref"> & RefAttributes<HTMLElement>>;