@cerberus-design/react 0.16.0 → 0.17.0-next-e7f9956

package/src/components/date-picker/year-view.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import type {
+  DatePickerViewProps,
+  UseDatePickerContext,
+} from '@ark-ui/react/date-picker'
+import { DatePickerParts } from './parts'
+import { DatePickerViewControlGroup } from './view-control-group'
+
+/**
+ * This private module contains an abstraction of the DatePickerYearView
+ * component.
+ * @module 'date-picker/year-view'
+ */
+
+/**
+ * An abstraction of the DatePickerYearView that renders the year view of the
+ * DatePicker.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ */
+export function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <DatePickerParts.View {...props} view="year">
+      <DatePickerParts.Context>
+        {(datePicker: UseDatePickerContext) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerParts.Table>
+              <DatePickerParts.TableBody>
+                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
+                  <DatePickerParts.TableRow key={id}>
+                    {years.map((year, id) => (
+                      <DatePickerParts.TableCell key={id} value={year.value}>
+                        <DatePickerParts.TableCellTrigger>
+                          {year.label}
+                        </DatePickerParts.TableCellTrigger>
+                      </DatePickerParts.TableCell>
+                    ))}
+                  </DatePickerParts.TableRow>
+                ))}
+              </DatePickerParts.TableBody>
+            </DatePickerParts.Table>
+          </>
+        )}
+      </DatePickerParts.Context>
+    </DatePickerParts.View>
+  )
+}

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

@@ -1,11 +1,11 @@
 'use client'
 
+import { useFieldContext } from '@ark-ui/react/field'
 import { css, cx } from '@cerberus/styled-system/css'
 import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
 import { hstack } from '@cerberus/styled-system/patterns'
 import { type HTMLAttributes } from 'react'
-import { Show } from './Show'
-import { useFieldContext } from '@ark-ui/react/field'
+import { Show } from '../Show'
 
 /**
  * This module contains the Fieldset component.
@@ -15,38 +15,7 @@ import { useFieldContext } from '@ark-ui/react/field'
 export type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
 
 /**
- * A component to provide a global label for a group of related elements in a form (for accessibility).
- * @memberof Fieldset
- * @see https://cerberus.digitalu.com/react/fieldset
- * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
- * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
- * @example
- * ```tsx
- * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
- * import { Hstack } from '@cerberus/styled-system/jsx'
- *
- * function SomeForm() {
- *   return (
- *    <form>
- *     <Fieldset>
- *      <Legend>Do you like cats?</Legend>
- *      <Hstack>
- *        <Field>
- *          <Radio id="yes" name="cats" value="yes" />
- *          <Label htmlFor="yes">Yes</Label>
- *        </Field>
- *      </Hstack>
- *      <Hstack>
- *        <Field>
- *         <Radio id="no" name="cats" value="no" />
- *         <Label htmlFor="no">No</Label>
- *        </Field>
- *      </Hstack>
- *     </Fieldset>
- *    </form>
- *   )
- * }
- * ```
+ * @deprecated use Fieldset instead
  */
 export function Legend(props: LegendProps) {
   const { size, ...nativeProps } = props

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

@@ -12,8 +12,8 @@ import {
   type PropsWithChildren,
   type MouseEvent,
 } from 'react'
-import { trapFocus } from '../aria-helpers/trap-focus.aria'
-import { useCerberusContext } from '../context/cerberus'
+import { trapFocus } from '../../aria-helpers/trap-focus.aria'
+import { useCerberusContext } from '../../context/cerberus'
 
 /**
  * This module exports the Notification component.
@@ -46,19 +46,7 @@ export interface NotificationBaseProps
 export type NotificationProps = NotificationBaseProps & NotificationVariantProps
 
 /**
- * A static Notification component that displays a message to the user. This
- * is typically only used when not utilizing the NotificationCenter.
- * @see https://cerberus.digitalu.design/react/notification
- * @memberof module:NotificationCenter
- * @example
- * ```tsx
- * <Notification id="info:1" open>
- *  <NotificationHeading>Info Notification</NotificationHeading>
- *  <NotificationDescription>
- *   This is a description with a <a href="#">link</a> in the message.
- *  </NotificationDescription>
- * </Notification>
- * ```
+ * @deprecated use `NotificationParts` instead
  */
 export function Notification(props: PropsWithChildren<NotificationProps>) {
   const { children, palette, onClose, ...nativeProps } = props

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

@@ -16,10 +16,7 @@ export type NotificationDescriptionProps = BaseNotificationDescriptionProps &
   NotificationVariantProps
 
 /**
- * Used to render the description of a notification.
- * @see https://cerberus.digitalu.design/react/notification
- * @memberof module:NotificationCenter
- * @param props - The anything a HTMLParagraphElement can accept.
+ * @deprecated use `NotificationParts` instead
  */
 export function NotificationDescription(props: NotificationDescriptionProps) {
   const { palette, ...nativeProps } = props

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

@@ -15,10 +15,7 @@ export type NotificationHeadingProps = BaseNotificationHeadingProps &
   NotificationVariantProps
 
 /**
- * Used to render the heading of a notification.
- * @see https://cerberus.digitalu.design/react/notification
- * @memberof module:NotificationCenter
- * @param props - The anything a HTMLParagraphElement can accept.
+ * @deprecated use `NotificationParts` instead
  */
 export function NotificationHeading(props: NotificationHeadingProps) {
   const { palette, ...nativeProps } = props

package/src/components/{Dialog.client.tsx → dialog/close-icon-trigger.tsx}

@@ -1,29 +1,27 @@
 'use client'
 
-import {
-  Dialog as ArkDialog,
-  type DialogCloseTriggerProps,
-} from '@ark-ui/react'
+import { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'
+import { useCerberusContext } from '../../context/cerberus'
+import { IconButton } from '../IconButton'
+import { DialogCloseTrigger } from './primitives'
 import { dialog } from '@cerberus/styled-system/recipes'
 import { cx } from '@cerberus/styled-system/css'
-import { IconButton } from './IconButton'
-import { useCerberusContext } from '../context/cerberus'
 
 /**
- * This module contains client-side components for the Dialog family.
- * @module @cerberus-design/react/dialog
+ * This module contains the close trigger for the dialog.
+ * @module react/dialog
  */
 
 export function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {
+  const styles = dialog()
+
   const { icons } = useCerberusContext()
   const { close: CloseIcon } = icons
 
-  const styles = dialog()
-
   return (
-    <ArkDialog.CloseTrigger
+    <DialogCloseTrigger
       {...props}
-      className={cx(props.className, styles.closeTrigger)}
+      className={cx(styles.closeTrigger, props.className)}
       asChild
     >
       <IconButton
@@ -34,6 +32,6 @@ export function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {
       >
         <CloseIcon />
       </IconButton>
-    </ArkDialog.CloseTrigger>
+    </DialogCloseTrigger>
   )
 }

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,41 @@
+import type { DialogContentProps } from '@ark-ui/react/dialog'
+import type { DialogVariantProps } from '@cerberus/styled-system/recipes'
+import { Portal } from '../Portal'
+import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
+
+/**
+ * This module contains and abstraction of the Dialog primitives.
+ * @module 'dialog'
+ */
+
+export interface DialogProps
+  extends Omit<DialogContentProps, 'size'>,
+    DialogVariantProps {}
+
+/**
+ * An abstraction of the Dialog primitives that controls the content of the
+ * dialog. Must be used within the `DialogProvider` component.
+ * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
+ * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)
+ * @example
+ * ```tsx
+ * <DialogProvider>
+ *   <DialogTrigger asChild>
+ *    <Button>Open Dialog</Button>
+ *  </DialogTrigger>
+ *  <Dialog>
+ *    <Text>Dialog Content</Text>
+ *  </Dialog>
+ * </DialogProvider>
+ * ```
+ */
+export function Dialog(props: DialogProps) {
+  return (
+    <Portal>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent {...props} />
+      </DialogPositioner>
+    </Portal>
+  )
+}

package/src/components/dialog/index.ts

@@ -0,0 +1,4 @@
+export * from './parts'
+export * from './primitives'
+export * from './close-icon-trigger'
+export * from './dialog'

package/src/components/dialog/parts.ts

@@ -0,0 +1,71 @@
+import type { ElementType } from 'react'
+import {
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogRoot,
+  DialogTrigger,
+} from './primitives'
+
+/**
+ * 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 const DialogParts: DialogPartsValue = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Backdrop: DialogBackdrop,
+  Positioner: DialogPositioner,
+  Content: DialogContent,
+  Heading: DialogHeading,
+  Description: DialogDescription,
+  CloseTrigger: DialogCloseTrigger,
+}

package/src/components/dialog/primitives.tsx

@@ -0,0 +1,116 @@
+import {
+  Dialog,
+  type DialogBackdropProps,
+  type DialogContentProps,
+  type DialogDescriptionProps,
+  type DialogPositionerProps,
+  type DialogRootProps,
+  type DialogTitleProps,
+  type DialogTriggerProps,
+} from '@ark-ui/react/dialog'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  dialog,
+  type DialogVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Dialog component.
+ * @module 'dialog/primitives'
+ */
+
+/**
+ * The provider that controls the dialog components.
+ */
+export function DialogRoot(props: DialogRootProps) {
+  return <Dialog.Root {...props} />
+}
+
+/**
+ * The trigger that opens the dialog.
+ */
+export function DialogTrigger(props: DialogTriggerProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Trigger
+      {...props}
+      className={cx(styles.trigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The overlay of the dialog.
+ */
+export function DialogBackdrop(props: DialogBackdropProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Backdrop
+      {...props}
+      className={cx(styles.backdrop, props.className)}
+    />
+  )
+}
+
+/**
+ * The container that positions the dialog.
+ */
+export function DialogPositioner(props: DialogPositionerProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Positioner
+      {...props}
+      className={cx(styles.positioner, props.className)}
+    />
+  )
+}
+
+/**
+ * The visible content of the dialog.
+ */
+export function DialogContent(props: DialogContentProps & DialogVariantProps) {
+  const { size, ...contentProps } = props
+  const styles = dialog({ size })
+  return (
+    <Dialog.Content
+      {...contentProps}
+      className={cx(styles.content, contentProps.className)}
+    />
+  )
+}
+
+/**
+ * The heading of the dialog.
+ */
+export function DialogHeading(props: DialogTitleProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Title {...props} className={cx(styles.title, props.className)} />
+  )
+}
+
+/**
+ * The description of the dialog.
+ */
+export function DialogDescription(props: DialogDescriptionProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Description
+      {...props}
+      className={cx(styles.description, props.className)}
+    />
+  )
+}
+
+/**
+ * The trigger that closes the dialog.
+ */
+export function DialogCloseTrigger(props: DialogTriggerProps) {
+  return <Dialog.CloseTrigger {...props} />
+}
+
+/**
+ * The provider that controls the dialog components. This is a named export of
+ * the DialogRoot primitive.
+ */
+export const DialogProvider = DialogRoot

package/src/components/for.tsx

@@ -1,18 +1,18 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, JSX } from 'react'
 
-export interface ForProps<T> {
+export interface ForProps<T extends readonly unknown[], U extends JSX.Element> {
   /**
-   * The array to iterate over
+   * The array to iterate over.
    */
-  each: T[]
+  each: T | undefined | null | false
   /**
-   * The fallback content to render when the array is empty
+   * The fallback to render when the array is empty.
    */
-  fallback?: ReactNode
+  fallback?: JSX.Element
   /**
-   * The render function to render each item in the array
+   * The children to render for each item in the array.
    */
-  children: (item: Exclude<T, undefined>, index: number) => ReactNode
+  children: (item: T[number], index: number) => U
 }
 
 /**
@@ -27,17 +27,12 @@ export interface ForProps<T> {
  * </For>
  * ```
  */
-export function For<
-  T extends string | number | Record<string, unknown> | object | undefined,
->(props: ForProps<T>) {
-  const mappableChildren = props.children as unknown as (
-    item: T,
-    index: number,
-  ) => ReactNode
-
-  if (props.each?.length === 0) {
+export function For<T extends readonly unknown[], U extends JSX.Element>(
+  props: ForProps<T, U>,
+) {
+  if (!props.each || !props.each.length) {
     return props.fallback || null
   }
 
-  return props.each?.map(mappableChildren) as ReactNode
+  return props.each?.map(props.children) as ReactNode
 }

package/src/components/notifications/center.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { createToaster, Toaster } from '@ark-ui/react/toast'
+import { Box } from '@cerberus/styled-system/jsx'
+import { Button, type ButtonProps } from '../button/button'
+import { Show } from '../Show'
+import { NotificationParts } from './parts'
+import type { NotifyOptions, UseNotificationCenterReturn } from './types'
+import { MatchNotificationIcon } from './match-icon'
+import { ToastCloseTrigger } from './close-trigger'
+
+/**
+ * This module contains an abstraction of the Notification parts.
+ * @module 'notification/center'
+ */
+
+export const toaster = createToaster({
+  gap: 16,
+  overlap: true,
+  placement: 'top-end',
+})
+
+/**
+ * The NotificationCenter component is an abstraction for the Notification
+ * component. It manages displaying all the toasts in the center.
+ */
+export function NotificationCenter() {
+  return (
+    <Toaster toaster={toaster}>
+      {(toast) => (
+        <NotificationParts.Root key={toast.id}>
+          <MatchNotificationIcon
+            type={toast.type as NotifyOptions['palette']}
+          />
+
+          <Box flex="1" paddingBlock="sm">
+            <NotificationParts.Heading>{toast.title}</NotificationParts.Heading>
+            <NotificationParts.Description>
+              {toast.description}
+            </NotificationParts.Description>
+            <Show when={Boolean(toast.action)}>
+              <NotificationParts.ActionTrigger asChild>
+                <Button
+                  palette={toast.type as ButtonProps['palette']}
+                  usage="ghost"
+                  size="sm"
+                >
+                  {toast.action?.label}
+                </Button>
+              </NotificationParts.ActionTrigger>
+            </Show>
+          </Box>
+
+          <ToastCloseTrigger />
+        </NotificationParts.Root>
+      )}
+    </Toaster>
+  )
+}
+
+/**
+ * @deprecated use `toaster` instead
+ */
+export function useNotificationCenter(): UseNotificationCenterReturn {
+  function notify(options: NotifyOptions) {
+    toaster.create({
+      title: options.heading,
+      description: options.description,
+      type: options.palette,
+      action: options.action,
+    })
+  }
+  return { ...toaster, notify }
+}

package/src/components/notifications/close-trigger.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import type { ToastCloseTriggerProps } from '@ark-ui/react/toast'
+import { useCerberusContext } from '../../context/cerberus'
+import { NotificationParts } from './parts'
+
+/**
+ * This private module contains a abstraction of the close trigger primitive.
+ * @module 'notification/close-trigger'
+ */
+
+export function ToastCloseTrigger(props: ToastCloseTriggerProps) {
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon } = icons
+
+  return (
+    <NotificationParts.CloseTrigger {...props}>
+      <CloseIcon />
+    </NotificationParts.CloseTrigger>
+  )
+}

package/src/components/notifications/index.ts

@@ -0,0 +1,4 @@
+export * from './parts'
+export * from './primitives'
+export * from './center'
+export * from './types'

package/src/components/notifications/match-icon.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { toast } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import { Spinner } from '../Spinner'
+import type { NotifyOptions } from './types'
+import { ark } from '@ark-ui/react/factory'
+
+/**
+ * This private module contains a component that returns the correct icon for a
+ * notification based on the palette. If there is no result, it is assumed to
+ * be a 'loading' type.
+ * @module 'notification/match-icon'
+ */
+
+interface MatchNotificationIconProps {
+  type?: NotifyOptions['palette']
+}
+
+export function MatchNotificationIcon(props: MatchNotificationIconProps) {
+  const { icons } = useCerberusContext()
+  const type = props.type || 'info'
+  const styles = toast()
+
+  const key = `${type}Notification` as keyof typeof icons
+  const Icon = icons[key] || ToastLoadingIcon
+
+  return (
+    <ark.div className={styles.icon}>
+      <Icon />
+    </ark.div>
+  )
+}
+
+function ToastLoadingIcon() {
+  return <Spinner size="1rem" />
+}