@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-5d7dc1e

package/src/components/field/primitives.tsx

@@ -0,0 +1,204 @@
+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>
+  )
+}
+
+/**
+ * The required indicator for the Field component.
+ */
+export function FieldRequiredIndicator() {
+  return <Field.RequiredIndicator>(required)</Field.RequiredIndicator>
+}
+
+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/components/for.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+
+export interface ForProps<T> {
+  /**
+   * The array to iterate over
+   */
+  each: T[]
+  /**
+   * The fallback content to render when the array is empty
+   */
+  fallback?: ReactNode
+  /**
+   * The render function to render each item in the array
+   */
+  children: (item: Exclude<T, undefined>, index: number) => ReactNode
+}
+
+/**
+ * The For component is used to iterate over an array and render a list of
+ * components or display a fallback when the array is empty.
+ * Inspired by the `<For>` component from SolidJS.
+ *
+ * @example
+ * ```tsx
+ * <For each={['a', 'b', 'c']}>
+ *   {(item, index) => <div key={index}>{item}</div>}
+ * </For>
+ * ```
+ */
+export function For<
+  T extends string | number | Record<string, unknown> | undefined,
+>(props: ForProps<T>) {
+  const mappableChildren = props.children as unknown as (
+    item: T,
+    index: number,
+  ) => ReactNode
+
+  if (props.each?.length === 0) {
+    return props.fallback || null
+  }
+
+  return props.each?.map(mappableChildren) as ReactNode
+}

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
 
@@ -21,22 +24,21 @@ export * from './components/AccordionItemGroup'
 export * from './components/Admonition'
 export * from './components/Avatar'
 export * from './components/button/index'
-export * from './components/Checkbox'
+export * from './components/checkbox/index'
 export * from './components/CircularProgress'
 export * from './components/DatePicker.client'
 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/for'
 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 +56,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 +68,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 +76,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/Checkbox.cjs

@@ -1,113 +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/Checkbox.tsx
-var Checkbox_exports = {};
-__export(Checkbox_exports, {
-  Checkbox: () => Checkbox
-});
-module.exports = __toCommonJS(Checkbox_exports);
-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
-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);
-function useCerberusContext() {
-  const context = (0, import_react3.useContext)(CerberusContext);
-  if (!context) {
-    throw new Error("useCerberus must be used within a CerberusProvider");
-  }
-  return context;
-}
-
-// src/components/Checkbox.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Checkbox(props) {
-  const { describedBy, size, checked, mixed, ...nativeProps } = props;
-  const { invalid, ...fieldStates } = useFieldContext();
-  const styles = (0, import_recipes.checkbox)({ size });
-  const { icons } = useCerberusContext();
-  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons;
-  if (!CheckIcon) {
-    throw new Error("The CerberusProvider is missing the checkbox icon.");
-  }
-  if (!IndeterminateIcon) {
-    throw new Error("The CerberusProvider is missing the indeterminate icon.");
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      className: (0, import_css.cx)(
-        styles.root,
-        (0, import_patterns.vstack)({
-          gap: "0",
-          justify: "center"
-        })
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "input",
-          {
-            ...nativeProps,
-            ...fieldStates,
-            ...describedBy && { "aria-describedby": describedBy },
-            ...invalid && { "aria-invalid": true },
-            ...mixed && { "aria-checked": "mixed" },
-            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, {}) }) })
-      ]
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Checkbox
-});
-//# sourceMappingURL=Checkbox.cjs.map