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

package/src/components/field/primitives.tsx

@@ -0,0 +1,197 @@
+import {
+  Field,
+  type FieldHelperTextProps,
+  type FieldInputProps as ArkFieldInputProps,
+  type FieldLabelProps,
+  type FieldRootProps as ArkFieldRootProps,
+  type FieldTextareaProps,
+} from '@ark-ui/react/field'
+import type { ReactNode } from 'react'
+import { cx } from '@cerberus/styled-system/css'
+import { field, type FieldVariantProps } from '@cerberus/styled-system/recipes'
+import { FieldStatusIndicator } from './status-indicator'
+import { FieldStartIndicator } from './start-indicator'
+
+/**
+ * This module contains all the primitives of the Field component.
+ * @module 'field'
+ */
+
+export type FieldRootProps = ArkFieldRootProps & FieldVariantProps
+
+/**
+ * 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>
+ * ```
+ */
+export function FieldRoot(props: FieldRootProps) {
+  const { size, ...fieldProps } = props
+  const styles = field({ size })
+  return (
+    <Field.Root
+      {...fieldProps}
+      className={cx(styles.root, fieldProps.className)}
+    />
+  )
+}
+
+/**
+ * The label for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldLabel>Label</FieldLabel>
+ * </FieldRoot>
+ * ```
+ */
+export function FieldLabel(props: FieldLabelProps) {
+  const { children, ...nativeProps } = props
+  const styles = field()
+  return (
+    <Field.Label {...nativeProps} className={cx(styles.label, props.className)}>
+      {children}
+      <Field.RequiredIndicator>(required)</Field.RequiredIndicator>
+    </Field.Label>
+  )
+}
+
+export interface FieldInputProps
+  extends Omit<ArkFieldInputProps, '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
+}
+
+/**
+ * The input for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldInput />
+ * </FieldRoot>
+ * ```
+ */
+export function FieldInput(props: FieldInputProps) {
+  const { size, startIcon, endIcon, ...fieldProps } = props
+  const styles = field({ size })
+  const hasStartIcon = Boolean(startIcon)
+
+  return (
+    <div className={styles.inputRoot}>
+      <FieldStartIndicator>{startIcon}</FieldStartIndicator>
+      <Field.Input
+        {...fieldProps}
+        {...(hasStartIcon && { 'data-has': 'start-indicator' })}
+        className={cx(styles.input, fieldProps.className)}
+      />
+      <FieldStatusIndicator fallback={endIcon} />
+    </div>
+  )
+}
+
+/**
+ * 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>
+ * ```
+ */
+export function FieldHelperText(props: FieldHelperTextProps) {
+  const styles = field()
+
+  if (!props.children) return null
+
+  return (
+    <Field.HelperText
+      {...props}
+      className={cx(styles.helperText, props.className)}
+    />
+  )
+}
+
+/**
+ * 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 function FieldErrorText(props: FieldHelperTextProps) {
+  const styles = field()
+
+  if (!props.children) return null
+
+  return (
+    <Field.ErrorText
+      {...props}
+      className={cx(styles.errorText, props.className)}
+    />
+  )
+}
+
+/**
+ * The textarea for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldTextarea />
+ * </FieldRoot>
+ * ```
+ */
+export function FieldTextarea(props: FieldTextareaProps) {
+  const styles = field()
+  return (
+    <Field.Textarea
+      {...props}
+      className={cx(styles.textarea, props.className)}
+    />
+  )
+}
+
+/**
+ * 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>
+ * ```
+ */
+export const Input = FieldInput
+export const Textarea = FieldTextarea

package/src/components/field/start-indicator.tsx

@@ -0,0 +1,23 @@
+import { cx } from '@cerberus/styled-system/css'
+import { field } from '@cerberus/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+export type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>
+
+/**
+ * The start indicator displays an indicator at the start of the Input.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ */
+export function FieldStartIndicator(props: FieldIndicatorProps) {
+  const styles = field()
+
+  if (!props.children) return null
+
+  return (
+    <span
+      {...props}
+      data-part="start-indicator"
+      className={cx(props.className, styles.startIndicator)}
+    />
+  )
+}

package/src/components/field/status-indicator.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useFieldContext } from '@ark-ui/react'
+import { cx } from '@cerberus/styled-system/css'
+import { field } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+export interface FieldStatusIndicatorProps
+  extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The fallback content to display when the field is valid.
+   */
+  fallback?: ReactNode
+}
+
+/**
+ * The invalid status indicator for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldStatusIndicator />
+ * </FieldRoot>
+ * ```
+ */
+export function FieldStatusIndicator(props: FieldStatusIndicatorProps) {
+  const { fallback, ...nativeProps } = props
+  const styles = field()
+  const fieldContext = useFieldContext()
+
+  const { icons } = useCerberusContext()
+  const { invalid: InvalidIcon } = icons
+
+  if (fieldContext.invalid) {
+    return (
+      <span
+        {...nativeProps}
+        aria-hidden="true"
+        data-invalid
+        className={cx(nativeProps.className, styles.statusIndicator)}
+      >
+        <InvalidIcon />
+      </span>
+    )
+  }
+
+  return (
+    <span
+      {...nativeProps}
+      aria-hidden="true"
+      data-part="end-indicator"
+      className={cx(nativeProps.className, styles.endIndicator)}
+    >
+      {fallback}
+    </span>
+  )
+}

package/src/context/field.tsx

@@ -1,11 +1,13 @@
 'use client'
 
+import type { FieldRootProps } from '@ark-ui/react'
 import {
   createContext,
   useContext,
   useMemo,
   type PropsWithChildren,
 } from 'react'
+import { FieldRoot } from '../components/field/primitives'
 
 /**
  * This module provides a context and hook for the field.
@@ -35,11 +37,10 @@ export interface FieldContextValue {
 const FieldContext = createContext<FieldContextValue | null>(null)
 
 /**
- * Provides the field state for a all related components used within a group.
- * @see https://cerberus.digitalu.design/react/input
+ * @deprecated use FieldRoot or FieldParts instead
  */
-export function Field(
-  props: PropsWithChildren<FieldContextValue>,
+export function FieldProvider(
+  props: PropsWithChildren<FieldRootProps>,
 ): JSX.Element {
   const value = useMemo(
     () => ({
@@ -53,7 +54,7 @@ export function Field(
 
   return (
     <FieldContext.Provider value={value}>
-      {props.children}
+      <FieldRoot {...props} />
     </FieldContext.Provider>
   )
 }

package/src/context/prompt-modal.tsx

@@ -11,12 +11,12 @@ import {
   type MouseEvent,
   type PropsWithChildren,
 } from 'react'
-import { Button } from '../components/button/button'
+import { DialogCloseTrigger } from '@ark-ui/react'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
 import { css } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
-import { Input } from '../components/Input'
-import { Field } from './field'
-import { Label } from '../components/Label'
+import { FieldLabel, FieldRoot, Input } from '../components/field/index'
+import { Button } from '../components/button/button'
 import { Show } from '../components/Show'
 import { Avatar } from '../components/Avatar'
 import { Text } from '../components/Text'
@@ -27,8 +27,6 @@ import {
   DialogHeading,
   DialogProvider,
 } from '../components/Dialog'
-import { HStack, VStack } from '@cerberus/styled-system/jsx'
-import { DialogCloseTrigger } from '@ark-ui/react'
 
 /**
  * This module provides a context and hook for the prompt modal.
@@ -216,28 +214,28 @@ export function PromptModal(
               marginBlockEnd="lg"
               w="full"
             >
-              <Field invalid={!isValid}>
-                <Label
+              <FieldRoot
+                ids={{
+                  control: 'confirm',
+                }}
+                invalid={!isValid}
+              >
+                <FieldLabel
                   className={hstack({
                     gap: 'xs',
                     justify: 'flex-start !important',
+                    marginBlockEnd: 'xs',
+                    textStyle: 'label-md',
                   })}
-                  htmlFor="confirm"
-                  size="md"
                 >
                   Type
                   <Text as="strong" textTransform="uppercase">
                     {content?.key}
                   </Text>
                   to confirm
-                </Label>
-                <Input
-                  id="confirm"
-                  name="confirm"
-                  onChange={handleChange}
-                  type="text"
-                />
-              </Field>
+                </FieldLabel>
+                <Input name="confirm" onChange={handleChange} type="text" />
+              </FieldRoot>
             </VStack>
 
             <HStack gap="md" justify="stretch" w="full">

package/src/hooks/useDate.ts

@@ -38,13 +38,7 @@ export interface UseDateReturn extends UseDateBase {
 }
 
 /**
- * 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
  */
 export function useDate(options?: UseDateOptions): UseDateReturn {
   const initialValue = options?.initialValue ?? ''

package/src/index.ts

@@ -5,6 +5,8 @@
 
 // deprecated
 
+export * from './components/deprecated/FieldMessage'
+export * from './components/deprecated/Label'
 export * from './components/deprecated/Modal'
 export * from './components/deprecated/ModalHeader'
 export * from './components/deprecated/ModalHeading'
@@ -12,6 +14,7 @@ export * from './components/deprecated/ModalDescription'
 export * from './components/deprecated/NavMenuTrigger'
 export * from './components/deprecated/NavMenuList'
 export * from './components/deprecated/NavMenuLink'
+export * from './hooks/useDate'
 
 // components
 
@@ -28,15 +31,13 @@ export * from './components/DatePicker.server'
 export * from './components/Dialog'
 export * from './components/Dialog.client'
 export * from './components/Droppable'
-export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
+export * from './components/field/index'
 export * from './components/Fieldset'
 export * from './components/FieldsetLabel'
 export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/IconButton'
-export * from './components/Input'
-export * from './components/Label'
 export * from './components/Legend'
 export * from './components/Menu'
 export * from './components/Notification'
@@ -54,7 +55,6 @@ export * from './components/Td'
 export * from './components/Tbody'
 export * from './components/Tag'
 export * from './components/Text'
-export * from './components/Textarea'
 export * from './components/Toggle'
 export * from './components/Tooltip'
 export * from './components/Select'
@@ -67,7 +67,6 @@ export * from './context/cerberus'
 export * from './context/confirm-modal'
 export * from './context/cta-modal'
 export * from './context/feature-flags'
-export * from './context/field'
 export * from './context/navMenu'
 export * from './context/notification-center'
 export * from './context/prompt-modal'
@@ -76,7 +75,6 @@ export * from './context/theme'
 
 // hooks
 
-export * from './hooks/useDate'
 export * from './hooks/useModal'
 export * from './hooks/useTheme'
 export * from './hooks/useToggle'

package/src/utils/index.ts

@@ -18,4 +18,34 @@ export function formatNotifyCount(count: number): string {
   return count.toString()
 }
 
+/**
+ * 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.
+ */
+export function splitProps<T extends object>(
+  props: T,
+  ...keyGroups: (keyof T)[][]
+): { [K in keyof T]?: T[K] }[] {
+  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })
+  const rest = {} as { [K in keyof T]?: T[K] }
+
+  for (const key in props) {
+    let assigned = false
+    for (let i = 0; i < keyGroups.length; i++) {
+      if (keyGroups[i].includes(key as keyof T)) {
+        result[i][key as keyof T] = props[key]
+        assigned = true
+        break
+      }
+    }
+    if (!assigned) {
+      rest[key as keyof T] = props[key]
+    }
+  }
+
+  return [...result, rest]
+}
+
 export * from './localStorage'

package/build/legacy/components/FieldMessage.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/FieldMessage.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  fieldMessage,\n  type FieldMessageVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\nexport interface FieldMessageBaseProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.\n   *\n   * @example For help messages: `help:field_id`\n   * @example For error messages: `error:field_id`\n   */\n  id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps\n\n/**\n * A component that provides feedback about the field.\n * @see https://cerberus.digitalu.design/react/field-message\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAmB;AACnB,qBAGO;;;ACLP,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;AD3BI,IAAAA,sBAAA;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,eAAW,eAAG,MAAM,eAAW,6BAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/Input.cjs

@@ -1,95 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Input.tsx
-var Input_exports = {};
-__export(Input_exports, {
-  Input: () => Input
-});
-module.exports = __toCommonJS(Input_exports);
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_css = require("@cerberus/styled-system/css");
-
-// src/context/field.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FieldContext = (0, import_react.createContext)(null);
-function useFieldContext() {
-  const context = (0, import_react.useContext)(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
-}
-
-// src/context/cerberus.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react2.createContext)(null);
-function useCerberusContext() {
-  const context = (0, import_react2.useContext)(CerberusContext);
-  if (!context) {
-    throw new Error("useCerberus must be used within a CerberusProvider");
-  }
-  return context;
-}
-
-// src/components/Show.tsx
-var import_react3 = require("react");
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = (0, import_react3.useMemo)(() => when ?? false, [when]);
-  return (0, import_react3.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
-}
-
-// src/components/Input.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Input(props) {
-  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
-  const inputStyles = (0, import_recipes.input)({ size });
-  const { invalid, ...fieldStates } = useFieldContext();
-  const hasEndIcon = Boolean(endIcon);
-  const { icons } = useCerberusContext();
-  const { invalid: InvalidIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "input",
-      {
-        ...nativeProps,
-        ...fieldStates,
-        ...describedBy && { "aria-describedby": describedBy },
-        ...invalid && { "aria-invalid": true },
-        "data-start-icon": Boolean(startIcon),
-        className: (0, import_css.cx)("peer", nativeProps.className, inputStyles.input)
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Input
-});
-//# sourceMappingURL=Input.cjs.map

package/build/legacy/components/Input.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Input.tsx","../../../src/context/field.tsx","../../../src/context/cerberus.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Show } from './Show'\n\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  /**\n   * The id of the FieldMessage component used to describe the input. Required for accessibility.\n   */\n  describedBy?: string\n  /**\n   * The unique identifier for the input element. Required for accessibility.\n   */\n  id: string\n  /**\n   * An optional icon to display at the start of the input.\n   */\n  startIcon?: ReactNode\n  /**\n   * An optional icon to display at the end of the input.\n   */\n  endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputVariantProps\n\n/**\n * A component that allows the user to input text. Must be wrapped in a Field\n * component to keep track of the state for entire group of elements related to\n * the field.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n\n  const { icons } = useCerberusContext()\n  const { invalid: InvalidIcon } = icons\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <InvalidIcon className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,iBAAmB;;;ACFnB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAA,gBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,6BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ACzCA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AHQI,IAAAC,sBAAA;AAVG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,kBAAc,sBAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAElC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,8CAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,iDAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,uDAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,eAAW,eAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,6CAAC,QAAK,MAAM,SACV,uDAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,6CAAC,QAAK,MAAM,cAAc,CAAC,SACzB,uDAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":["import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}