@cerberus-design/react 0.14.2-next-a928afd → 0.14.2-next-0052cda

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,26 @@ 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'
 
 /**
  * This module contains the DatePicker client family components.
@@ -69,6 +70,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)

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/FileStatus.tsx

@@ -12,8 +12,8 @@ import {
 } from '@cerberus/styled-system/recipes'
 import { css, cx } from '@cerberus/styled-system/css'
 import { hstack, vstack } from '@cerberus/styled-system/patterns'
-import { $cerberusIcons } from '../config/defineIcons'
 import { Field } from '../context/field'
+import { useCerberusContext } from '../context/cerberus'
 import { FieldMessage } from './FieldMessage'
 import { ProgressBar, type ProgressBarProps } from './ProgressBar'
 import { IconButton } from './IconButton'
@@ -188,12 +188,13 @@ interface FileStatusElProps {
 }
 
 function MatchFileStatusIcon(props: FileStatusElProps) {
+  const { icons } = useCerberusContext()
   const {
     waitingFileUploader: TodoIcon,
     fileUploader: FileUploaderIcon,
     invalidAlt: InvalidIcon,
     successNotification: DoneIcon,
-  } = $cerberusIcons
+  } = icons
 
   switch (props.status) {
     case processStatus.TODO:
@@ -225,7 +226,8 @@ function MatchFileStatusText(props: FileStatusElProps) {
 }
 
 function MatchStatusAction(props: FileStatusElProps) {
-  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons
   switch (props.status) {
     case processStatus.TODO:
     case processStatus.PROCESSING:

package/src/components/FileUploader.tsx

@@ -5,7 +5,7 @@ import { vstack } from '@cerberus/styled-system/patterns'
 import { type InputHTMLAttributes } from 'react'
 import { Show } from './Show'
 import { fileUploader } from '@cerberus/styled-system/recipes'
-import { $cerberusIcons } from '../config/defineIcons'
+import { useCerberusContext } from '../context/cerberus'
 import { Avatar } from './Avatar'
 
 export interface FileUploaderProps
@@ -29,8 +29,9 @@ export interface FileUploaderProps
  * @see https://cerberus.digitalu.design/react/file-uploader
  */
 export function FileUploader(props: FileUploaderProps) {
+  const { icons } = useCerberusContext()
   const styles = fileUploader()
-  const { waitingFileUploader: Icon } = $cerberusIcons
+  const { waitingFileUploader: Icon } = icons
 
   return (
     <div

package/src/components/Input.tsx

@@ -4,7 +4,7 @@ import type { InputHTMLAttributes, ReactNode } from 'react'
 import { input, type InputVariantProps } from '@cerberus/styled-system/recipes'
 import { cx } from '@cerberus/styled-system/css'
 import { useFieldContext } from '../context/field'
-import { $cerberusIcons } from '../config/defineIcons'
+import { useCerberusContext } from '../context/cerberus'
 import { Show } from './Show'
 
 export interface InputBaseProps
@@ -39,7 +39,9 @@ export function Input(props: InputProps) {
   const inputStyles = input({ size })
   const { invalid, ...fieldStates } = useFieldContext()
   const hasEndIcon = Boolean(endIcon)
-  const { invalid: InvalidIcon } = $cerberusIcons
+
+  const { icons } = useCerberusContext()
+  const { invalid: InvalidIcon } = icons
 
   return (
     <div className={inputStyles.root}>

package/src/components/Notification.tsx

@@ -12,8 +12,8 @@ import {
   type PropsWithChildren,
   type MouseEvent,
 } from 'react'
-import { $cerberusIcons } from '../config/defineIcons'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
+import { useCerberusContext } from '../context/cerberus'
 
 /**
  * This module exports the Notification component.
@@ -21,13 +21,14 @@ import { trapFocus } from '../aria-helpers/trap-focus.aria'
  */
 
 function MatchNotificationIcon(props: NotificationVariantProps) {
+  const { icons } = useCerberusContext()
   const palette = (props.palette || 'info') as
     | 'info'
     | 'success'
     | 'warning'
     | 'danger'
-  const key = `${palette}Notification` as keyof typeof $cerberusIcons
-  const Icon = $cerberusIcons[key]
+  const key = `${palette}Notification` as keyof typeof icons
+  const Icon = icons[key]
   return <Icon />
 }
 
@@ -64,7 +65,9 @@ export function Notification(props: PropsWithChildren<NotificationProps>) {
   const ref = useRef<HTMLDialogElement>(null)
   const onKeyDown = trapFocus(ref)
   const styles = notification({ palette })
-  const { close: CloseIcon } = $cerberusIcons
+
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon } = icons
 
   return (
     <dialog

package/src/components/Select.tsx

@@ -7,8 +7,8 @@ import {
   type SelectVariantProps,
 } from '@cerberus/styled-system/recipes'
 import type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'
-import { $cerberusIcons } from '../config/defineIcons'
 import { useFieldContext } from '../context/field'
+import { useCerberusContext } from '../context/cerberus'
 import { Show } from './Show'
 
 /**
@@ -50,7 +50,10 @@ export type SelectProps = Omit<
 export function Select(props: SelectProps) {
   const { describedBy, size, ...nativeProps } = props
   const { invalid, ...fieldStates } = useFieldContext()
-  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons
+
+  const { icons } = useCerberusContext()
+  const { invalid: InvalidIcon, selectArrow: SelectArrow } = icons
+
   const styles = select({
     size,
   })

package/src/components/Tag.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import type {
   HTMLAttributes,
   MouseEventHandler,
@@ -10,7 +12,7 @@ import {
   tag,
   type TagVariantProps,
 } from '@cerberus/styled-system/recipes'
-import { $cerberusIcons } from '../config/defineIcons'
+import { useCerberusContext } from '../context/cerberus'
 
 /**
  * This module contains the tag component.
@@ -71,7 +73,8 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
   const closableStyles = isClosable ? closableCss : ''
-  const { close: Close } = $cerberusIcons
+  const { icons } = useCerberusContext()
+  const { close: Close } = icons
 
   return (
     <span

package/src/components/Toggle.tsx

@@ -7,8 +7,8 @@ import {
   type ToggleVariantProps,
 } from '@cerberus/styled-system/recipes'
 import type { InputHTMLAttributes } from 'react'
-import { $cerberusIcons } from '../config/defineIcons'
 import { useFieldContext } from '../context/field'
+import { useCerberusContext } from '../context/cerberus'
 
 /**
  * This module provides a toggle component.
@@ -59,7 +59,8 @@ export function Toggle(props: ToggleProps) {
   const { size, describedBy, ...nativeProps } = props
   const styles = toggle({ size })
   const { invalid, ...state } = useFieldContext()
-  const Icon = $cerberusIcons.toggleChecked
+  const { icons } = useCerberusContext()
+  const CheckedIcon = icons.toggleChecked
 
   return (
     <span
@@ -83,7 +84,7 @@ export function Toggle(props: ToggleProps) {
           }),
         )}
       >
-        <Icon />
+        <CheckedIcon />
       </span>
     </span>
   )

package/src/config/defineIcons.ts

@@ -1,22 +1,34 @@
-import { defaultIcons, type DefinedIcons } from './cerbIcons'
+import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'
+import { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'
+import type { DefinedIcons, IconType } from './types'
 
-function _validateIconsProperties(icons: DefinedIcons) {
-  if (!icons.invalid) {
-    throw new Error(
-      'The an invalid property must be defined in your custom icons library.',
-    )
-  }
+const defaultIcons: Pick<
+  DefinedIcons,
+  'checkbox' | 'fileUploader' | 'indeterminate'
+> = {
+  checkbox: CheckmarkIcon,
+  fileUploader: AnimatingUploadIcon,
+  indeterminate: IndeterminateIcon,
 }
 
-export function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {
-  _validateIconsProperties(icons)
-  $cerberusIcons = {
+/**
+ * Defines the icons that will be used in Cerberus React components via the
+ * CerberusProvider.
+ * @param icons The icons that will be used in Cerberus React components.
+ * @returns Icons object compatible with the CerberusProvider SystemConfig.
+ * @example
+ * ```tsx
+ * const icons = defineIcons({
+ *  accordionIndicator: MyAccordionIndicatorIcon,
+ *  ...
+ * })
+ * ```
+ */
+export function defineIcons<T extends IconType>(
+  icons: DefinedIcons,
+): Required<DefinedIcons<T>> {
+  return {
     ...defaultIcons,
     ...icons,
-  } as Required<DefinedIcons>
-  return $cerberusIcons
+  } as Required<DefinedIcons<T>>
 }
-
-// Default icons
-
-export let $cerberusIcons = defaultIcons as Required<DefinedIcons>