@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

package/dist/components/dialog/index.cjs

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_primitives = require("./primitives.cjs");
+const require_close_icon_trigger = require("./close-icon-trigger.cjs");
+const require_parts = require("./parts.cjs");
+const require_dialog = require("./dialog.cjs");
+exports.Dialog = require_dialog.Dialog;
+exports.DialogBackdrop = require_primitives.DialogBackdrop;
+exports.DialogCloseIconTrigger = require_close_icon_trigger.DialogCloseIconTrigger;
+exports.DialogCloseTrigger = require_primitives.DialogCloseTrigger;
+exports.DialogContent = require_primitives.DialogContent;
+exports.DialogContext = require_primitives.DialogContext;
+exports.DialogDescription = require_primitives.DialogDescription;
+exports.DialogHeading = require_primitives.DialogHeading;
+exports.DialogParts = require_parts.DialogParts;
+exports.DialogPositioner = require_primitives.DialogPositioner;
+exports.DialogProvider = require_primitives.DialogProvider;
+exports.DialogRoot = require_primitives.DialogRoot;
+exports.DialogTrigger = require_primitives.DialogTrigger;

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

@@ -0,0 +1,7 @@
+export * from './parts';
+export * from './primitives';
+export * from './close-icon-trigger';
+export * from './dialog';
+export interface OpenChangeDetails {
+    open: boolean;
+}

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

@@ -0,0 +1,7 @@
+export * from './parts';
+export * from './primitives';
+export * from './close-icon-trigger';
+export * from './dialog';
+export interface OpenChangeDetails {
+    open: boolean;
+}

package/dist/components/dialog/index.js

@@ -0,0 +1,5 @@
+import { DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogHeading, DialogPositioner, DialogProvider, DialogRoot, DialogTrigger } from "./primitives.js";
+import { DialogCloseIconTrigger } from "./close-icon-trigger.js";
+import { DialogParts } from "./parts.js";
+import { Dialog } from "./dialog.js";
+export { Dialog, DialogBackdrop, DialogCloseIconTrigger, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogHeading, DialogParts, DialogPositioner, DialogProvider, DialogRoot, DialogTrigger };

package/dist/components/dialog/parts.cjs

@@ -0,0 +1,23 @@
+const require_primitives = require("./primitives.cjs");
+//#region src/components/dialog/parts.ts
+/**
+* An Object containing the parts of the dialog component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the DialogParts object and
+* the entire family of components vs. only what you use.
+*/
+var DialogParts = {
+	Root: require_primitives.DialogRoot,
+	Trigger: require_primitives.DialogTrigger,
+	Backdrop: require_primitives.DialogBackdrop,
+	Positioner: require_primitives.DialogPositioner,
+	Content: require_primitives.DialogContent,
+	Heading: require_primitives.DialogHeading,
+	Description: require_primitives.DialogDescription,
+	CloseTrigger: require_primitives.DialogCloseTrigger
+};
+//#endregion
+exports.DialogParts = DialogParts;

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

@@ -0,0 +1,50 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Dialog component.
+ * @module 'dialog/parts'
+ */
+interface DialogPartsValue {
+    /**
+     * The context provider of the dialog.
+     */
+    Root: ElementType;
+    /**
+     * The trigger that opens the dialog.
+     */
+    Trigger: ElementType;
+    /**
+     * The overlay of the dialog.
+     */
+    Backdrop: ElementType;
+    /**
+     * The container that positions the dialog.
+     */
+    Positioner: ElementType;
+    /**
+     * The visible content of the dialog.
+     */
+    Content: ElementType;
+    /**
+     * The heading of the dialog.
+     */
+    Heading: ElementType;
+    /**
+     * The description of the dialog.
+     */
+    Description: ElementType;
+    /**
+     * The trigger that closes the dialog.
+     */
+    CloseTrigger: ElementType;
+}
+/**
+ * An Object containing the parts of the dialog component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the DialogParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const DialogParts: DialogPartsValue;
+export {};

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

@@ -0,0 +1,50 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Dialog component.
+ * @module 'dialog/parts'
+ */
+interface DialogPartsValue {
+    /**
+     * The context provider of the dialog.
+     */
+    Root: ElementType;
+    /**
+     * The trigger that opens the dialog.
+     */
+    Trigger: ElementType;
+    /**
+     * The overlay of the dialog.
+     */
+    Backdrop: ElementType;
+    /**
+     * The container that positions the dialog.
+     */
+    Positioner: ElementType;
+    /**
+     * The visible content of the dialog.
+     */
+    Content: ElementType;
+    /**
+     * The heading of the dialog.
+     */
+    Heading: ElementType;
+    /**
+     * The description of the dialog.
+     */
+    Description: ElementType;
+    /**
+     * The trigger that closes the dialog.
+     */
+    CloseTrigger: ElementType;
+}
+/**
+ * An Object containing the parts of the dialog component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the DialogParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const DialogParts: DialogPartsValue;
+export {};

package/dist/components/dialog/parts.js

@@ -0,0 +1,23 @@
+import { DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogHeading, DialogPositioner, DialogRoot, DialogTrigger } from "./primitives.js";
+//#region src/components/dialog/parts.ts
+/**
+* An Object containing the parts of the dialog component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the DialogParts object and
+* the entire family of components vs. only what you use.
+*/
+var DialogParts = {
+	Root: DialogRoot,
+	Trigger: DialogTrigger,
+	Backdrop: DialogBackdrop,
+	Positioner: DialogPositioner,
+	Content: DialogContent,
+	Heading: DialogHeading,
+	Description: DialogDescription,
+	CloseTrigger: DialogCloseTrigger
+};
+//#endregion
+export { DialogParts };

package/dist/components/dialog/primitives.cjs

@@ -0,0 +1,33 @@
+const require_index = require("../../system/index.cjs");
+let styled_system_recipes = require("styled-system/recipes");
+let _ark_ui_react_dialog = require("@ark-ui/react/dialog");
+//#region src/components/dialog/primitives.tsx
+/**
+* This module contains the primitives of the Dialog component.
+* @module 'dialog/primitives'
+*/
+var { withSlotRecipe, withNoRecipe } = require_index.createCerberusPrimitive(styled_system_recipes.dialog);
+var DialogRoot = withNoRecipe(_ark_ui_react_dialog.Dialog.Root);
+/**
+* An abstraction of the DialogRoot component for naming consistency.
+*/
+var DialogProvider = DialogRoot;
+var DialogTrigger = withSlotRecipe(_ark_ui_react_dialog.Dialog.Trigger, "trigger");
+var DialogBackdrop = withSlotRecipe(_ark_ui_react_dialog.Dialog.Backdrop, "backdrop");
+var DialogPositioner = withSlotRecipe(_ark_ui_react_dialog.Dialog.Positioner, "positioner");
+var DialogContent = withSlotRecipe(_ark_ui_react_dialog.Dialog.Content, "content");
+var DialogHeading = withSlotRecipe(_ark_ui_react_dialog.Dialog.Title, "title");
+var DialogDescription = withSlotRecipe(_ark_ui_react_dialog.Dialog.Description, "description");
+var DialogCloseTrigger = withNoRecipe(_ark_ui_react_dialog.Dialog.CloseTrigger);
+var DialogContext = _ark_ui_react_dialog.Dialog.Context;
+//#endregion
+exports.DialogBackdrop = DialogBackdrop;
+exports.DialogCloseTrigger = DialogCloseTrigger;
+exports.DialogContent = DialogContent;
+exports.DialogContext = DialogContext;
+exports.DialogDescription = DialogDescription;
+exports.DialogHeading = DialogHeading;
+exports.DialogPositioner = DialogPositioner;
+exports.DialogProvider = DialogProvider;
+exports.DialogRoot = DialogRoot;
+exports.DialogTrigger = DialogTrigger;

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

@@ -0,0 +1,51 @@
+import { Dialog, DialogRootProviderProps as ArkDialogRootProviderProps, DialogBackdropProps as ArkDialogBackdropProps, DialogContentProps as ArkDialogContentProps, DialogDescriptionProps as ArkDialogDescriptionProps, DialogPositionerProps as ArkDialogPositionerProps, DialogRootProps as ArkDialogRootProps, DialogTitleProps as ArkDialogTitleProps, DialogTriggerProps as ArkDialogTriggerProps, DialogContextProps as ArkDialogContextProps } from '@ark-ui/react/dialog';
+import { DialogVariantProps } from 'styled-system/recipes';
+import { CerberusPrimitiveProps } from '../../system/index';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
+/**
+ * The provider that controls the dialog components.
+ */
+export type DialogRootProps = CerberusPrimitiveProps<ArkDialogRootProps>;
+export declare const DialogRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.RootProps>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * An abstraction of the DialogRoot component for naming consistency.
+ */
+export declare const DialogProvider: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.RootProps>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The trigger that opens the dialog.
+ */
+export type DialogTriggerProps = CerberusPrimitiveProps<ArkDialogTriggerProps>;
+export declare const DialogTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.TriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The overlay of the dialog.
+ */
+export type DialogBackdropProps = CerberusPrimitiveProps<ArkDialogBackdropProps>;
+export declare const DialogBackdrop: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.BackdropProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The container that positions the dialog.
+ */
+export type DialogPositionerProps = CerberusPrimitiveProps<ArkDialogPositionerProps>;
+export declare const DialogPositioner: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.PositionerProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The visible content of the dialog.
+ */
+export type DialogContentProps = CerberusPrimitiveProps<ArkDialogContentProps & DialogVariantProps>;
+export declare const DialogContent: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.ContentProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The heading of the dialog.
+ */
+export type DialogHeadingProps = CerberusPrimitiveProps<ArkDialogTitleProps>;
+export declare const DialogHeading: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.TitleProps & RefAttributes<HTMLHeadingElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The description of the dialog.
+ */
+export type DialogDescriptionProps = CerberusPrimitiveProps<ArkDialogDescriptionProps>;
+export declare const DialogDescription: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.DescriptionProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The trigger that closes the dialog.
+ */
+export type DialogCloseTriggerProps = CerberusPrimitiveProps<ArkDialogTriggerProps>;
+export declare const DialogCloseTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.CloseTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type DialogContextProps = CerberusPrimitiveProps<ArkDialogContextProps>;
+export declare const DialogContext: (props: Dialog.ContextProps) => ReactNode;
+export type DialogRootProviderProps = CerberusPrimitiveProps<ArkDialogRootProviderProps>;

package/dist/components/dialog/primitives.d.ts

@@ -0,0 +1,51 @@
+import { Dialog, DialogRootProviderProps as ArkDialogRootProviderProps, DialogBackdropProps as ArkDialogBackdropProps, DialogContentProps as ArkDialogContentProps, DialogDescriptionProps as ArkDialogDescriptionProps, DialogPositionerProps as ArkDialogPositionerProps, DialogRootProps as ArkDialogRootProps, DialogTitleProps as ArkDialogTitleProps, DialogTriggerProps as ArkDialogTriggerProps, DialogContextProps as ArkDialogContextProps } from '@ark-ui/react/dialog';
+import { DialogVariantProps } from 'styled-system/recipes';
+import { CerberusPrimitiveProps } from '../../system/index';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
+/**
+ * The provider that controls the dialog components.
+ */
+export type DialogRootProps = CerberusPrimitiveProps<ArkDialogRootProps>;
+export declare const DialogRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.RootProps>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * An abstraction of the DialogRoot component for naming consistency.
+ */
+export declare const DialogProvider: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.RootProps>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The trigger that opens the dialog.
+ */
+export type DialogTriggerProps = CerberusPrimitiveProps<ArkDialogTriggerProps>;
+export declare const DialogTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.TriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The overlay of the dialog.
+ */
+export type DialogBackdropProps = CerberusPrimitiveProps<ArkDialogBackdropProps>;
+export declare const DialogBackdrop: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.BackdropProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The container that positions the dialog.
+ */
+export type DialogPositionerProps = CerberusPrimitiveProps<ArkDialogPositionerProps>;
+export declare const DialogPositioner: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.PositionerProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The visible content of the dialog.
+ */
+export type DialogContentProps = CerberusPrimitiveProps<ArkDialogContentProps & DialogVariantProps>;
+export declare const DialogContent: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.ContentProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The heading of the dialog.
+ */
+export type DialogHeadingProps = CerberusPrimitiveProps<ArkDialogTitleProps>;
+export declare const DialogHeading: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.TitleProps & RefAttributes<HTMLHeadingElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The description of the dialog.
+ */
+export type DialogDescriptionProps = CerberusPrimitiveProps<ArkDialogDescriptionProps>;
+export declare const DialogDescription: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.DescriptionProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The trigger that closes the dialog.
+ */
+export type DialogCloseTriggerProps = CerberusPrimitiveProps<ArkDialogTriggerProps>;
+export declare const DialogCloseTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Dialog.CloseTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type DialogContextProps = CerberusPrimitiveProps<ArkDialogContextProps>;
+export declare const DialogContext: (props: Dialog.ContextProps) => ReactNode;
+export type DialogRootProviderProps = CerberusPrimitiveProps<ArkDialogRootProviderProps>;

package/dist/components/dialog/primitives.js

@@ -0,0 +1,24 @@
+import { createCerberusPrimitive } from "../../system/index.js";
+import { dialog } from "styled-system/recipes";
+import { Dialog } from "@ark-ui/react/dialog";
+//#region src/components/dialog/primitives.tsx
+/**
+* This module contains the primitives of the Dialog component.
+* @module 'dialog/primitives'
+*/
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(dialog);
+var DialogRoot = withNoRecipe(Dialog.Root);
+/**
+* An abstraction of the DialogRoot component for naming consistency.
+*/
+var DialogProvider = DialogRoot;
+var DialogTrigger = withSlotRecipe(Dialog.Trigger, "trigger");
+var DialogBackdrop = withSlotRecipe(Dialog.Backdrop, "backdrop");
+var DialogPositioner = withSlotRecipe(Dialog.Positioner, "positioner");
+var DialogContent = withSlotRecipe(Dialog.Content, "content");
+var DialogHeading = withSlotRecipe(Dialog.Title, "title");
+var DialogDescription = withSlotRecipe(Dialog.Description, "description");
+var DialogCloseTrigger$1 = withNoRecipe(Dialog.CloseTrigger);
+var DialogContext = Dialog.Context;
+//#endregion
+export { DialogBackdrop, DialogCloseTrigger$1 as DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogHeading, DialogPositioner, DialogProvider, DialogRoot, DialogTrigger };

package/dist/components/feature-flag/feature-flag.cjs

@@ -0,0 +1,17 @@
+"use client";
+const require_show = require("../show/show.cjs");
+const require_feature_flags = require("../../context/feature-flags.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/feature-flag/feature-flag.tsx
+/**
+* A component that allows you to show or hide content based on a feature flag.
+* @see https://cerberus.digitalu.design/react/feature-flags
+*/
+function FeatureFlag(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+		when: require_feature_flags.useFeatureFlags(props.flag),
+		children: props.children
+	});
+}
+//#endregion
+exports.FeatureFlag = FeatureFlag;

package/dist/components/feature-flag/feature-flag.d.cts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+export interface FeatureFlagProps {
+    /**
+     * The name of the feature flag to check.
+     */
+    flag: string;
+}
+/**
+ * A component that allows you to show or hide content based on a feature flag.
+ * @see https://cerberus.digitalu.design/react/feature-flags
+ */
+export declare function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): import("react").JSX.Element;

package/dist/components/feature-flag/feature-flag.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+export interface FeatureFlagProps {
+    /**
+     * The name of the feature flag to check.
+     */
+    flag: string;
+}
+/**
+ * A component that allows you to show or hide content based on a feature flag.
+ * @see https://cerberus.digitalu.design/react/feature-flags
+ */
+export declare function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): import("react").JSX.Element;

package/dist/components/feature-flag/feature-flag.js

@@ -0,0 +1,17 @@
+"use client";
+import { Show } from "../show/show.js";
+import { useFeatureFlags } from "../../context/feature-flags.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feature-flag/feature-flag.tsx
+/**
+* A component that allows you to show or hide content based on a feature flag.
+* @see https://cerberus.digitalu.design/react/feature-flags
+*/
+function FeatureFlag(props) {
+	return /* @__PURE__ */ jsx(Show, {
+		when: useFeatureFlags(props.flag),
+		children: props.children
+	});
+}
+//#endregion
+export { FeatureFlag };

package/dist/components/feature-flag/index.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_feature_flag = require("./feature-flag.cjs");
+exports.FeatureFlag = require_feature_flag.FeatureFlag;

package/dist/components/feature-flag/index.d.cts

@@ -0,0 +1 @@
+export * from './feature-flag';

package/dist/components/feature-flag/index.d.ts

@@ -0,0 +1 @@
+export * from './feature-flag';

package/dist/components/feature-flag/index.js

@@ -0,0 +1,2 @@
+import { FeatureFlag } from "./feature-flag.js";
+export { FeatureFlag };

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

@@ -0,0 +1,22 @@
+"use client";
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+//#region src/components/field/error-text.tsx
+/**
+* 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
+* <FieldRoot>
+*   <FieldInput />
+*   <FieldErrorText>Error text</FieldErrorText>
+* </FieldRoot>
+* ```
+*/
+function CerberusFieldErrorText(props) {
+	if (!props.children) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.ErrorText, { ...props });
+}
+//#endregion
+exports.CerberusFieldErrorText = CerberusFieldErrorText;

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

@@ -0,0 +1,14 @@
+import { FieldErrorTextProps } from './primitives';
+/**
+ * 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
+ * <FieldRoot>
+ *   <FieldInput />
+ *   <FieldErrorText>Error text</FieldErrorText>
+ * </FieldRoot>
+ * ```
+ */
+export declare function CerberusFieldErrorText(props: FieldErrorTextProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,14 @@
+import { FieldErrorTextProps } from './primitives';
+/**
+ * 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
+ * <FieldRoot>
+ *   <FieldInput />
+ *   <FieldErrorText>Error text</FieldErrorText>
+ * </FieldRoot>
+ * ```
+ */
+export declare function CerberusFieldErrorText(props: FieldErrorTextProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@ark-ui/react/field";
+//#region src/components/field/error-text.tsx
+/**
+* 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
+* <FieldRoot>
+*   <FieldInput />
+*   <FieldErrorText>Error text</FieldErrorText>
+* </FieldRoot>
+* ```
+*/
+function CerberusFieldErrorText(props) {
+	if (!props.children) return null;
+	return /* @__PURE__ */ jsx(Field.ErrorText, { ...props });
+}
+//#endregion
+export { CerberusFieldErrorText };

package/dist/components/field/field.cjs

@@ -0,0 +1,72 @@
+const require_index = require("../../utils/index.cjs");
+const require_show = require("../show/show.cjs");
+const require_primitives = require("./primitives.cjs");
+const require_helper_text = require("./helper-text.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let styled_system_jsx = require("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] = require_index.splitProps(props, [
+		"disabled",
+		"required",
+		"readOnly",
+		"invalid"
+	], [
+		"label",
+		"helperText",
+		"secondaryHelperText",
+		"errorText",
+		"hideLabel",
+		"children"
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives.FieldRoot, {
+		...statusProps,
+		...rootProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+				when: fieldProps.label,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.FieldLabel, {
+					hideLabel: fieldProps.hideLabel,
+					children: fieldProps.label
+				})
+			}),
+			fieldProps.children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+				justifyContent: "space-between",
+				w: "full",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_helper_text.HelperText, {
+						invalid: statusProps.invalid,
+						children: fieldProps.helperText
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.FieldErrorText, { children: fieldProps.errorText }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+						when: fieldProps.secondaryHelperText,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.FieldHelperText, { children: fieldProps.secondaryHelperText })
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+exports.Field = Field;

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

@@ -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;