@cerberus-design/react 0.15.0 → 0.16.0-next-feeb186

package/src/{context/cta-modal.tsx → components/cta-dialog/provider.tsx}

@@ -1,66 +1,39 @@
 'use client'
 
 import {
-  createContext,
   useCallback,
   useContext,
   useMemo,
   useState,
   type MouseEvent,
-  type MouseEventHandler,
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Button } from '../components/Button'
-import { Show } from '../components/Show'
-import { Avatar } from '../components/Avatar'
-import { useCerberusContext } from './cerberus'
-import { HStack } from '@cerberus/styled-system/jsx'
-import { css } from '@cerberus/styled-system/css'
-import { VStack } from '@cerberus/styled-system/jsx'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
+import { useCerberusContext } from '../../context/cerberus'
+import { Show } from '../Show'
+import { For } from '../for'
+import { Avatar } from '../Avatar'
 import {
   Dialog,
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/Dialog'
-import { DialogCloseIconTrigger } from '../components/Dialog.client'
+} from '../Dialog'
+import { DialogCloseIconTrigger } from '../Dialog.client'
+import type { CTAButtonAction, CTAModalActionReturn } from './utils'
+import {
+  CTAModalContext,
+  type CTAModalValue,
+  type ShowCTAModalOptions,
+} from './context'
+import { TriggerItem } from './trigger-item'
 
 /**
- * This module provides a context and hook for the cta modal.
- * @module
+ * This module provides the provider and hook for the cta modal.
+ * @module 'react/cta-modal/provider'
  */
 
-export interface ShowCTAModalOptions {
-  /**
-   * The heading of the cta modal.
-   */
-  heading: string
-  /**
-   * The description of the cta modal.
-   */
-  description?: string
-  /**
-   * The icon used for the modal Avatar.
-   */
-  icon?: ReactNode
-  /**
-   * The actions for the cta modal. Max of 2 actions.
-   */
-  actions: {
-    text: string
-    onClick: MouseEventHandler<HTMLButtonElement>
-  }[]
-}
-
-export interface CTAModalValue {
-  show: (options: ShowCTAModalOptions) => void
-}
-
-const CTAModalContext = createContext<CTAModalValue | null>(null)
-
-export type CTAModalProviderProps = PropsWithChildren<unknown>
-
 /**
  * Provides a CTA modal to the app.
  * @see https://cerberus.digitalu.design/react/cta-modal
@@ -93,7 +66,7 @@ export type CTAModalProviderProps = PropsWithChildren<unknown>
  * }, [cta])
  * ```
  */
-export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
+export function CTAModal(props: PropsWithChildren<object>) {
   const [open, setOpen] = useState<boolean>(false)
   const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
   const confirmIcon = content?.icon
@@ -103,12 +76,6 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
 
   const handleShow = useCallback(
     (options: ShowCTAModalOptions) => {
-      const maxActions = 2
-      if (options.actions.length > maxActions) {
-        throw new Error(
-          `CTA Modal only supports a maximum of ${maxActions} actions.`,
-        )
-      }
       setContent({ ...options })
       setOpen(true)
     },
@@ -117,10 +84,10 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
 
   const handleActionClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
-      const index = event.currentTarget.getAttribute('data-index')
-      const action = content?.actions[Number(index)]
-      const { onClick } = action || {}
-      onClick?.(event)
+      const index = Number(event.currentTarget.getAttribute('data-index'))
+      const contentActions = content?.actions as CTAModalActionReturn
+      const action = contentActions._actions[index] as CTAButtonAction
+      action?.handleClick?.(event)
       setOpen(false)
     },
     [content, setOpen],
@@ -163,22 +130,21 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
             </VStack>
 
             <HStack gap="md" w="full">
-              <Show when={Boolean(content?.actions?.length)}>
-                {content?.actions?.map((action, index) => (
-                  <Button
-                    data-index={index}
-                    className={css({
-                      w: '1/2',
-                    })}
+              <For each={content?.actions._actions}>
+                {(action, index) => (
+                  <Show
                     key={index}
-                    onClick={handleActionClick}
-                    shape="rounded"
-                    usage="outlined"
+                    when={content?.actions?.type === 'btnAction'}
+                    fallback={
+                      <TriggerItem asChild>{action as ReactNode}</TriggerItem>
+                    }
                   >
-                    {action.text}
-                  </Button>
-                ))}
-              </Show>
+                    <TriggerItem data-index={index} onClick={handleActionClick}>
+                      {(action as CTAButtonAction)?.text}
+                    </TriggerItem>
+                  </Show>
+                )}
+              </For>
             </HStack>
           </VStack>
         </Dialog>

package/src/components/cta-dialog/trigger-item.tsx

@@ -0,0 +1,53 @@
+import { css, cx } from '@cerberus/styled-system/css'
+import { Button, type ButtonProps } from '../button/button'
+import { ark } from '@ark-ui/react/factory'
+import { button } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module provides the trigger item for the cta modal.
+ * @module 'react/cta-modal/trigger-item'
+ */
+
+export interface TriggerItemProps extends ButtonProps {
+  asChild?: boolean
+}
+
+/**
+ * Trigger item for the cta modal which renders content based on the actions.
+ * type.
+ */
+export function TriggerItem(props: TriggerItemProps) {
+  const { asChild, children, ...buttonProps } = props
+
+  if (asChild) {
+    return (
+      <ark.div
+        className={cx(
+          button({
+            shape: 'rounded',
+            usage: 'ghost',
+          }),
+          css({
+            w: '1/2',
+          }),
+        )}
+        asChild
+      >
+        {children}
+      </ark.div>
+    )
+  }
+
+  return (
+    <Button
+      {...buttonProps}
+      className={css({
+        w: '1/2',
+      })}
+      shape="rounded"
+      usage="outlined"
+    >
+      {children}
+    </Button>
+  )
+}

package/src/components/cta-dialog/utils.ts

@@ -0,0 +1,57 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+
+/**
+ * This module provide utility functions for the cta modal.
+ * @module 'react/cta-modal/utils'
+ */
+
+export type CTAButtonAction = {
+  /**
+   * The text of the button.
+   */
+  text: string
+  /**
+   * The onClick handler for the button.
+   */
+  handleClick: MouseEventHandler<HTMLButtonElement>
+}
+
+export type CTAModalAction = (CTAButtonAction | ReactNode)[]
+
+export interface CTAModalActionReturn {
+  /**
+   * The type of the action content.
+   */
+  type: 'reactNode' | 'btnAction'
+  /**
+   * The actions for the cta modal. Max of 2 actions.
+   */
+  _actions: CTAModalAction
+}
+
+/**
+ * Creates the action data to pass to the cta modal `show` method.
+ */
+export function createCTAModalActions(
+  providedActions: CTAModalAction,
+): CTAModalActionReturn {
+  if (providedActions.length !== 2) {
+    throw new Error('CTAModal must include 2 actions')
+  }
+
+  if (
+    providedActions.every(
+      (action) => (action as unknown as CTAButtonAction)?.handleClick,
+    )
+  ) {
+    return {
+      type: 'btnAction',
+      _actions: providedActions as CTAButtonAction[],
+    }
+  }
+
+  return {
+    type: 'reactNode',
+    _actions: providedActions as ReactNode[],
+  }
+}

package/src/components/{FieldMessage.tsx → deprecated/FieldMessage.tsx}

@@ -6,7 +6,7 @@ import {
   fieldMessage,
   type FieldMessageVariantProps,
 } from '@cerberus/styled-system/recipes'
-import { useFieldContext } from '../context/field'
+import { useFieldContext } from '@ark-ui/react/field'
 
 /**
  * This module contains the FieldMessage component.
@@ -25,18 +25,7 @@ export interface FieldMessageBaseProps
 export type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps
 
 /**
- * A component that provides feedback about the field.
- * @see https://cerberus.digitalu.design/react/field-message
- * @example
- * ```tsx
- * <Field>
- *  <Label htmlFor="first_name">First Name</Label>
- *  <Input aria-describedBy="help:first_name" id="first_name" type="text" />
- *  <FieldMessage id="help:first_name">
- *   This will only be used in your account information.
- *  </FieldMessage>
- * </Field>
- * ```
+ * @deprecated use FieldHelperText, FieldErrorText, or FieldParts instead
  */
 export function FieldMessage(props: FieldMessageProps) {
   const { invalid } = useFieldContext()

package/src/components/deprecated/FieldsetLabel.tsx

@@ -0,0 +1,32 @@
+import { cx } from '@cerberus/styled-system/css'
+import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import type { LabelProps } from './Label'
+
+/**
+ * This module contains the FieldsetLabel component.
+ * @module FieldsetLabel
+ */
+
+export type FieldsetLabelProps = LabelProps &
+  LabelVariantProps & {
+    htmlFor?: string
+  }
+
+/**
+ * @deprecated
+ */
+export function FieldsetLabel(props: FieldsetLabelProps) {
+  const { size, usage, ...nativeProps } = props
+  return (
+    <label
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        label({
+          size,
+          usage,
+        }),
+      )}
+    />
+  )
+}

package/src/components/deprecated/Label.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import { FieldLabel } from '../field'
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+export type LabelBaseProps = HTMLAttributes<HTMLLabelElement>
+export type LabelProps = LabelBaseProps & LabelVariantProps
+
+/**
+ * @deprecated Use FieldLabel or FieldParts.Label instead.
+ */
+export function Label(props: PropsWithChildren<LabelProps>) {
+  const { size, ...nativeProps } = props
+  return (
+    <FieldLabel
+      {...nativeProps}
+      className={cx(label({ size }), props.className)}
+    />
+  )
+}

package/src/components/{NavMenuLink.tsx → deprecated/NavMenuLink.tsx}

@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
 import { css, cx } from '@cerberus/styled-system/css'
-import { Show } from './Show'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuLink component.

package/src/components/{NavMenuList.tsx → deprecated/NavMenuList.tsx}

@@ -3,9 +3,9 @@
 import { useMemo, type HTMLAttributes } from 'react'
 import { cx } from '@cerberus/styled-system/css'
 import { vstack } from '@cerberus/styled-system/patterns'
-import { useNavMenuContext } from '../context/navMenu'
-import type { Positions } from '../types'
-import { Show } from './Show'
+import { useNavMenuContext } from '../../context/navMenu'
+import type { Positions } from '../../types'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuList component.

package/src/components/{NavMenuTrigger.tsx → deprecated/NavMenuTrigger.tsx}

@@ -11,10 +11,10 @@ import { button } from '@cerberus/styled-system/recipes'
 import {
   createNavTriggerProps,
   type NavTriggerAriaValues,
-} from '../aria-helpers/nav-menu.aria'
-import { useNavMenuContext } from '../context/navMenu'
-import type { ButtonProps } from './Button'
-import { Show } from './Show'
+} from '../../aria-helpers/nav-menu.aria'
+import { useNavMenuContext } from '../../context/navMenu'
+import type { ButtonProps } from '../button/button'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuTrigger component.

package/src/components/field/field.tsx

@@ -0,0 +1,77 @@
+import { type FieldRootProps } from '@ark-ui/react/field'
+import { splitProps } from '../../utils/index'
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldLabel,
+  FieldRoot,
+} from './primitives'
+import { HStack } from '@cerberus/styled-system/jsx'
+import { Show } from '../Show'
+
+export interface FieldProps extends FieldRootProps {
+  /**
+   * The label of the field.
+   */
+  label?: string
+  /**
+   * The helper text of the field.
+   */
+  helperText?: string
+  /**
+   * A helper text positioned at the end of the field. Good for Textarea fields.
+   */
+  secondaryHelperText?: string
+  /**
+   * The error text of the field. Shown when the field is invalid.
+   */
+  errorText?: string
+}
+
+/**
+ * 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 function Field(props: FieldProps) {
+  const [statusProps, fieldProps, rootProps] = splitProps(
+    props,
+    ['disabled', 'required', 'readOnly', 'invalid'],
+    ['label', 'helperText', 'secondaryHelperText', 'errorText', 'children'],
+  )
+
+  return (
+    <FieldRoot {...statusProps} {...rootProps}>
+      <Show when={Boolean(fieldProps.label)}>
+        <FieldLabel>{fieldProps.label}</FieldLabel>
+      </Show>
+
+      {fieldProps.children}
+
+      <Show when={Boolean(fieldProps.helperText && !statusProps.invalid)}>
+        <HStack justifyContent="space-between" w="full">
+          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>
+          <Show when={Boolean(fieldProps.secondaryHelperText)}>
+            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
+          </Show>
+        </HStack>
+      </Show>
+
+      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>
+    </FieldRoot>
+  )
+}

package/src/components/field/index.ts

@@ -0,0 +1,5 @@
+export * from './field'
+export * from './primitives'
+export * from './start-indicator'
+export * from './status-indicator'
+export * from './parts'

package/src/components/field/parts.ts

@@ -0,0 +1,77 @@
+import type { ElementType } from 'react'
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldInput,
+  FieldLabel,
+  FieldRequiredIndicator,
+  FieldRoot,
+  FieldTextarea,
+} from './primitives'
+import { FieldStatusIndicator } from './status-indicator'
+import { FieldStartIndicator } from './start-indicator'
+
+/**
+ * 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 const FieldParts: FieldPartsValue = {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Input: FieldInput,
+  Textarea: FieldTextarea,
+  HelperText: FieldHelperText,
+  ErrorText: FieldErrorText,
+  StartIndicator: FieldStartIndicator,
+  StatusIndicator: FieldStatusIndicator,
+  RequiredIndicator: FieldRequiredIndicator,
+}