@cerberus-design/react 0.14.2 → 0.15.0

package/src/components/AccordionItemGroup.tsx

@@ -5,10 +5,10 @@ import { Show } from './Show'
 import {
   AccordionItem,
   AccordionItemContent,
-  AccordionItemIndicator,
   AccordionItemTrigger,
 } from './Accordion'
 import { css } from '@cerberus/styled-system/css'
+import { AccordionItemIndicator } from './Accordion.client'
 
 /**
  * This module contains an abstraction of the AccordionItem components.

package/src/components/Admonition.client.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../context/cerberus'
+import { Avatar } from './Avatar'
+
+type MatchAvatarProps = AdmonitionVariantProps
+
+export function MatchAvatar(props: MatchAvatarProps) {
+  const { icons } = useCerberusContext()
+  const {
+    infoNotification: InfoIcon,
+    successNotification: SuccessIcon,
+    warningNotification: WarningIcon,
+    dangerNotification: DangerIcon,
+  } = icons
+
+  switch (props.palette) {
+    case 'page':
+      return (
+        <Avatar
+          gradient="charon-light"
+          ariaLabel=""
+          icon={<InfoIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'info':
+      return (
+        <Avatar
+          gradient="amphiaraus-dark"
+          ariaLabel=""
+          icon={<InfoIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'success':
+      return (
+        <Avatar
+          gradient="thanatos-dark"
+          ariaLabel=""
+          icon={<SuccessIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'warning':
+      return (
+        <Avatar
+          gradient="asphodel-light"
+          ariaLabel=""
+          icon={<WarningIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'danger':
+      return (
+        <Avatar
+          gradient="hades-light"
+          ariaLabel=""
+          icon={<DangerIcon />}
+          size="sm"
+          src=""
+        />
+      )
+
+    default:
+      throw new Error('Unsupported admonition palette')
+  }
+}

package/src/components/Admonition.tsx

@@ -4,10 +4,9 @@ import {
 } from '@cerberus/styled-system/recipes'
 import { cx } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
-import { $cerberusIcons } from '../config/defineIcons'
 import type { HTMLAttributes, ReactNode } from 'react'
-import { Avatar } from './Avatar'
 import { Show } from './Show'
+import { MatchAvatar } from './Admonition.client'
 
 /**
  * This module provides a set of components for creating admonitions.
@@ -116,71 +115,3 @@ export function AdmonitionDescription(props: AdmonitionDescriptionProps) {
     />
   )
 }
-
-// Private components
-
-type MatchAvatarProps = AdmonitionVariantProps
-
-function MatchAvatar(props: MatchAvatarProps) {
-  const {
-    infoNotification: InfoIcon,
-    successNotification: SuccessIcon,
-    warningNotification: WarningIcon,
-    dangerNotification: DangerIcon,
-  } = $cerberusIcons
-  switch (props.palette) {
-    case 'page':
-      return (
-        <Avatar
-          gradient="charon-light"
-          ariaLabel=""
-          icon={<InfoIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'info':
-      return (
-        <Avatar
-          gradient="amphiaraus-dark"
-          ariaLabel=""
-          icon={<InfoIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'success':
-      return (
-        <Avatar
-          gradient="thanatos-dark"
-          ariaLabel=""
-          icon={<SuccessIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'warning':
-      return (
-        <Avatar
-          gradient="asphodel-light"
-          ariaLabel=""
-          icon={<WarningIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'danger':
-      return (
-        <Avatar
-          gradient="hades-light"
-          ariaLabel=""
-          icon={<DangerIcon />}
-          size="sm"
-          src=""
-        />
-      )
-
-    default:
-      throw new Error('Unsupported admonition palette')
-  }
-}

package/src/components/AnimatingUploadIcon.tsx

@@ -1,11 +1,11 @@
-import { type CarbonIconProps } from '@cerberus/icons'
-
 /**
  * This module contains an animating icon to use for the FileStatus component.
  * @module
  */
 
-export type AnimatingUploadIconProps = CarbonIconProps
+export interface AnimatingUploadIconProps {
+  size?: 16 | 20 | 24 | 32
+}
 
 export function AnimatingUploadIcon(props: AnimatingUploadIconProps) {
   return (

package/src/components/Avatar.tsx

@@ -1,12 +1,14 @@
+'use client'
+
 import { css, cx } from '@cerberus/styled-system/css'
 import { circle } from '@cerberus/styled-system/patterns'
 import {
   avatar,
   type AvatarVariantProps,
 } from '@cerberus/styled-system/recipes'
-import { $cerberusIcons } from '../config/defineIcons'
 import type { HtmlHTMLAttributes, ReactNode } from 'react'
 import { Show } from './Show'
+import { useCerberusContext } from '../context/cerberus'
 
 /**
  * This module contains the Avatar component.
@@ -84,7 +86,8 @@ export function Avatar(props: AvatarProps) {
     icon,
     ...nativeProps
   } = props
-  const { avatar: AvatarIcon } = $cerberusIcons
+  const { icons } = useCerberusContext()
+  const { avatar: AvatarIcon } = icons
   const initials = (ariaLabel || '')
     .split(' ')
     .map((word) => word[0])

package/src/components/Checkbox.tsx

@@ -9,7 +9,7 @@ import { cx } from '@cerberus/styled-system/css'
 import type { InputHTMLAttributes } from 'react'
 import { Show } from './Show'
 import { useFieldContext } from '../context/field'
-import { $cerberusIcons } from '../config/defineIcons'
+import { useCerberusContext } from '../context/cerberus'
 
 /**
  * This module contains the Checkbox component.
@@ -49,8 +49,15 @@ export function Checkbox(props: CheckboxProps) {
   const { describedBy, size, checked, mixed, ...nativeProps } = props
   const { invalid, ...fieldStates } = useFieldContext()
   const styles = checkbox({ size })
-  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } =
-    $cerberusIcons
+  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 (
     <div

package/src/components/DatePicker.client.tsx

@@ -5,25 +5,27 @@ import {
   type DatePickerContentProps,
   type DatePickerInputProps,
   type DatePickerRootProps,
+  type DatePickerTriggerProps,
+  type DatePickerViewControlProps,
   type DatePickerViewProps,
-  // type DateValue,
 } from '@ark-ui/react'
 import { Portal } from './Portal'
-// import { useCallback } from 'react'
-import { datePicker } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { datePicker, iconButton } from '@cerberus/styled-system/recipes'
+import { css, cx } from '@cerberus/styled-system/css'
 import { useFieldContext } from '../context/field'
 import {
-  DatePickerTrigger,
   DatePickerView,
   DatePickerContext,
-  DatePickerViewControlGroup,
   DatePickerTable,
   DatePickerTableHeader,
   DatePickerTableCellTrigger,
   DatePickerTableCell,
+  DatePickerViewControl,
 } from './DatePicker.server'
-// import { formatISOToMilitary } from '../hooks/useDate'
+import { IconButton } from './IconButton'
+import { Button } from './Button'
+import { useCerberusContext } from '../context/cerberus'
+import { useMemo, type InputHTMLAttributes } from 'react'
 
 /**
  * This module contains the DatePicker client family components.
@@ -69,6 +71,77 @@ export function DatePicker(props: DatePickerRootProps) {
   )
 }
 
+/**
+ * An abstraction of the DatePicker control that contains the prev, view, and
+ * next triggers which control the calendar output.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerViewControlGroup />
+ * ```
+ */
+export function DatePickerViewControlGroup(props: DatePickerViewControlProps) {
+  const { icons } = useCerberusContext()
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons
+  return (
+    <DatePickerViewControl {...props}>
+      <ArkDP.PrevTrigger asChild>
+        <IconButton ariaLabel="Previous" size="sm">
+          <PrevIcon />
+        </IconButton>
+      </ArkDP.PrevTrigger>
+
+      <ArkDP.ViewTrigger asChild>
+        <Button
+          className={css({
+            h: '2rem',
+            paddingInline: 'md',
+          })}
+          shape="rounded"
+          size="sm"
+          usage="ghost"
+        >
+          <ArkDP.RangeText />
+        </Button>
+      </ArkDP.ViewTrigger>
+
+      <ArkDP.NextTrigger asChild>
+        <IconButton ariaLabel="Next" size="sm">
+          <NextIcon />
+        </IconButton>
+      </ArkDP.NextTrigger>
+    </DatePickerViewControl>
+  )
+}
+
+/**
+ * The trigger component for the DatePicker which opens the calendar.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTrigger />
+ * ```
+ */
+export function DatePickerTrigger(props: DatePickerTriggerProps) {
+  const { icons } = useCerberusContext()
+  const { calendar: CalendarIcon } = icons
+  return (
+    <ArkDP.Trigger
+      {...props}
+      className={cx(
+        props.className,
+        iconButton({
+          size: 'sm',
+          usage: 'ghost',
+        }),
+        datePickerStyles.trigger,
+      )}
+    >
+      <CalendarIcon />
+    </ArkDP.Trigger>
+  )
+}
+
 /**
  * The input component for the DatePicker.
  * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
@@ -100,6 +173,18 @@ export function DatePickerInput(props: DatePickerInputProps) {
   )
 }
 
+export interface RangePickerInputProps
+  extends Omit<DatePickerInputProps, 'defaultValue'> {
+  /**
+   * The defaultValue to add for the inputs. The first item is the start date
+   * and the second item is the end date.
+   */
+  defaultValue?: [
+    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
+    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
+  ]
+}
+
 /**
  * The input component for the DatePicker that uses ranges.
  * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
@@ -114,26 +199,33 @@ export function DatePickerInput(props: DatePickerInputProps) {
  * </Field>
  * ```
  */
-export function RangePickerInput(props: DatePickerInputProps) {
+export function RangePickerInput(props: RangePickerInputProps) {
   const { invalid, ...fieldStates } = useFieldContext()
+  const { defaultValue, ...nativeProps } = props
+
+  const startDate = useMemo(() => defaultValue?.[0], [defaultValue])
+  const endDate = useMemo(() => defaultValue?.[1], [defaultValue])
+
   return (
     <ArkDP.Control data-range className={datePickerStyles.control}>
       <DatePickerTrigger />
       <ArkDP.Input
-        {...props}
+        {...nativeProps}
         {...fieldStates}
         {...(invalid && { 'aria-invalid': true })}
         data-range-input
+        defaultValue={startDate}
         className={cx(props.className, datePickerStyles.input)}
         placeholder={props.placeholder ?? 'DD MMM YYYY'}
         maxLength={11}
         index={0}
       />
       <ArkDP.Input
-        {...props}
+        {...nativeProps}
         {...fieldStates}
         {...(invalid && { 'aria-invalid': true })}
         data-range-input
+        defaultValue={endDate}
         data-range-end-input
         className={cx(props.className, datePickerStyles.input)}
         placeholder={props.placeholder ?? 'DD MMM YYYY'}
@@ -158,10 +250,14 @@ export function RangePickerInput(props: DatePickerInputProps) {
  * </Field>
  * ```
  */
-export function DatePickerContent(props: DatePickerContentProps) {
-  const { children, ...contentProps } = props
+export function DatePickerContent(
+  props: DatePickerContentProps & {
+    withModal?: boolean
+  },
+) {
+  const { children, withModal, ...contentProps } = props
   return (
-    <Portal>
+    <Portal disabled={withModal ?? false}>
       <ArkDP.Positioner className={datePickerStyles.positioner}>
         <ArkDP.Content
           {...contentProps}
@@ -354,9 +450,9 @@ export function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
  * </Field>
  * ```
  */
-export function DatePickerCalendar() {
+export function DatePickerCalendar(props: { withModal?: boolean }) {
   return (
-    <DatePickerContent>
+    <DatePickerContent withModal={props.withModal}>
       <DatePickerDayView />
       <DatePickerMonthView />
       <DatePickerYearView />

package/src/components/DatePicker.server.tsx

@@ -5,14 +5,10 @@ import {
   type DatePickerTableCellTriggerProps,
   type DatePickerTableHeaderProps,
   type DatePickerTableProps,
-  type DatePickerTriggerProps,
   type DatePickerViewControlProps,
 } from '@ark-ui/react'
-import { css, cx } from '@cerberus/styled-system/css'
-import { datePicker, iconButton, label } from '@cerberus/styled-system/recipes'
-import { $cerberusIcons } from '../config/defineIcons'
-import { IconButton } from './IconButton'
-import { Button } from './Button'
+import { cx } from '@cerberus/styled-system/css'
+import { datePicker, label } from '@cerberus/styled-system/recipes'
 
 /**
  * This module contains the DatePicker server family components.
@@ -47,33 +43,6 @@ export function DatePickerLabel(props: DatePickerLabelProps) {
   )
 }
 
-/**
- * The trigger component for the DatePicker which opens the calendar.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- * @example
- * ```tsx
- * <DatePickerTrigger />
- * ```
- */
-export function DatePickerTrigger(props: DatePickerTriggerProps) {
-  const { calendar: CalendarIcon } = $cerberusIcons
-  return (
-    <ArkDP.Trigger
-      {...props}
-      className={cx(
-        props.className,
-        iconButton({
-          size: 'sm',
-          usage: 'ghost',
-        }),
-        datePickerStyles.trigger,
-      )}
-    >
-      <CalendarIcon />
-    </ArkDP.Trigger>
-  )
-}
-
 /**
  * The control component for the DatePicker which wraps the triggers to switch
  * between calendar views.
@@ -96,48 +65,6 @@ export function DatePickerViewControl(props: DatePickerViewControlProps) {
   )
 }
 
-/**
- * An abstraction of the DatePicker control that contains the prev, view, and
- * next triggers which control the calendar output.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- * @example
- * ```tsx
- * <DatePickerViewControlGroup />
- * ```
- */
-export function DatePickerViewControlGroup(props: DatePickerViewControlProps) {
-  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons
-  return (
-    <DatePickerViewControl {...props}>
-      <ArkDP.PrevTrigger asChild>
-        <IconButton ariaLabel="Previous" size="sm">
-          <PrevIcon />
-        </IconButton>
-      </ArkDP.PrevTrigger>
-
-      <ArkDP.ViewTrigger asChild>
-        <Button
-          className={css({
-            h: '2rem',
-            paddingInline: 'md',
-          })}
-          shape="rounded"
-          size="sm"
-          usage="ghost"
-        >
-          <ArkDP.RangeText />
-        </Button>
-      </ArkDP.ViewTrigger>
-
-      <ArkDP.NextTrigger asChild>
-        <IconButton ariaLabel="Next" size="sm">
-          <NextIcon />
-        </IconButton>
-      </ArkDP.NextTrigger>
-    </DatePickerViewControl>
-  )
-}
-
 /**
  * The table component for the DatePicker.
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)

package/src/components/Dialog.client.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import {
+  Dialog as ArkDialog,
+  type DialogCloseTriggerProps,
+} from '@ark-ui/react'
+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
+ */
+
+export function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon } = icons
+
+  const styles = dialog()
+
+  return (
+    <ArkDialog.CloseTrigger
+      {...props}
+      className={cx(props.className, styles.closeTrigger)}
+      asChild
+    >
+      <IconButton
+        ariaLabel="Close dialog"
+        palette="action"
+        size="lg"
+        usage="ghost"
+      >
+        <CloseIcon />
+      </IconButton>
+    </ArkDialog.CloseTrigger>
+  )
+}