@cerberus-design/react 0.13.2 → 0.14.0

package/src/components/DatePicker.server.tsx

@@ -0,0 +1,229 @@
+import {
+  DatePicker as ArkDP,
+  type DatePickerLabelProps,
+  type DatePickerTableCellProps,
+  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'
+
+/**
+ * This module contains the DatePicker server family components.
+ * @module DatePicker
+ */
+
+// We are not exposing this to the public API
+const datePickerStyles = datePicker()
+
+/**
+ * The label component for the DatePicker.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerLabel>
+ *   <DatePickerLabel.Label>...</DatePickerLabel.Label>
+ * </DatePickerLabel>
+ * ```
+ */
+export function DatePickerLabel(props: DatePickerLabelProps) {
+  const { className, ...arkProps } = props
+  return (
+    <ArkDP.Label
+      {...arkProps}
+      className={cx(
+        className,
+        label({
+          size: 'sm',
+        }),
+      )}
+    />
+  )
+}
+
+/**
+ * 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.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerViewControl>
+ *   <PrevTrigger />
+ *   <ViewTrigger />
+ *   <NextTrigger />
+ * </DatePickerViewControl>
+ * ```
+ */
+export function DatePickerViewControl(props: DatePickerViewControlProps) {
+  return (
+    <ArkDP.Control
+      {...props}
+      className={cx(props.className, datePickerStyles.viewControl)}
+    />
+  )
+}
+
+/**
+ * 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)
+ * @example
+ * ```tsx
+ * <DatePickerTable />
+ * ```
+ */
+export function DatePickerTable(props: DatePickerTableProps) {
+  return (
+    <ArkDP.Table
+      {...props}
+      className={cx(props.className, datePickerStyles.table)}
+    />
+  )
+}
+
+/**
+ * The header component for the DatePicker table.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTableHeader />
+ * ```
+ */
+export function DatePickerTableHeader(props: DatePickerTableHeaderProps) {
+  return (
+    <ArkDP.TableHeader
+      {...props}
+      className={cx(props.className, datePickerStyles.tableHeader)}
+    />
+  )
+}
+
+/**
+ * The cell component for the DatePicker table.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTableCell />
+ * ```
+ */
+export function DatePickerTableCell(props: DatePickerTableCellProps) {
+  return (
+    <ArkDP.TableCell
+      {...props}
+      className={cx(props.className, datePickerStyles.tableCell)}
+    />
+  )
+}
+
+/**
+ * The cell component for the DatePicker table.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTableCell />
+ * ```
+ */
+export function DatePickerTableCellTrigger(
+  props: DatePickerTableCellTriggerProps,
+) {
+  return (
+    <ArkDP.TableCellTrigger
+      {...props}
+      className={cx(props.className, datePickerStyles.tableCellTrigger)}
+    />
+  )
+}
+
+/**
+ * The view container which wraps the control and content components.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerView />
+ * ```
+ */
+export const DatePickerView = ArkDP.View
+
+/**
+ * The context component for the DatePicker which provides the DatePicker state.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerContext />
+ * ```
+ */
+export const DatePickerContext = ArkDP.Context

package/src/components/Notification.tsx

@@ -13,7 +13,6 @@ import {
   type MouseEvent,
 } from 'react'
 import { $cerberusIcons } from '../config/defineIcons'
-import type { IconType } from '../config/cerbIcons'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
 
 /**
@@ -22,9 +21,13 @@ import { trapFocus } from '../aria-helpers/trap-focus.aria'
  */
 
 function MatchNotificationIcon(props: NotificationVariantProps) {
-  const palette = props.palette || 'info'
+  const palette = (props.palette || 'info') as
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
   const key = `${palette}Notification` as keyof typeof $cerberusIcons
-  const Icon = $cerberusIcons[key] as IconType
+  const Icon = $cerberusIcons[key]
   return <Icon />
 }
 

package/src/components/NotificationDescription.tsx

@@ -10,8 +10,8 @@ import type { HTMLAttributes } from 'react'
  * @module
  */
 
-export interface BaseNotificationDescriptionProps
-  extends HTMLAttributes<HTMLParagraphElement> {}
+export type BaseNotificationDescriptionProps =
+  HTMLAttributes<HTMLParagraphElement>
 export type NotificationDescriptionProps = BaseNotificationDescriptionProps &
   NotificationVariantProps
 

package/src/components/NotificationHeading.tsx

@@ -10,8 +10,7 @@ import type { HTMLAttributes } from 'react'
  * @module
  */
 
-export interface BaseNotificationHeadingProps
-  extends HTMLAttributes<HTMLParagraphElement> {}
+export type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>
 export type NotificationHeadingProps = BaseNotificationHeadingProps &
   NotificationVariantProps
 

package/src/components/ProgressBar.tsx

@@ -10,7 +10,7 @@ import type { HTMLAttributes } from 'react'
  * @module
  */
 
-export interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}
+export type ProgressBarBaseProps = HTMLAttributes<HTMLDivElement>
 export type NonIndeterminateProgressBarProps = {
   /**
    * A unique identifier for the progress bar. Required for accessibility.

package/src/components/Tabs.client.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { Tabs as ArkTabs } from '@ark-ui/react/tabs'
+import { cx } from '@cerberus/styled-system/css'
+import { useTabsContext } from '../context/tabs'
+
+/**
+ * This module provides the Tabs family.
+ * @module
+ */
+
+/**
+ * The tab list container for the Tabs group.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function TabsList(props: ArkTabs.ListProps) {
+  const { children, ...tabsProps } = props
+  const { styles } = useTabsContext()
+
+  return (
+    <ArkTabs.List
+      {...tabsProps}
+      className={cx(tabsProps.className, styles.list)}
+    >
+      {children}
+      <TabIndicator />
+    </ArkTabs.List>
+  )
+}
+
+/**
+ * @deprecated Use `TabsList` instead.
+ */
+export const TabList = TabsList
+
+/**
+ * The trigger for the Tabs group.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function Tab(props: ArkTabs.TriggerProps) {
+  const { styles } = useTabsContext()
+  return (
+    <ArkTabs.Trigger
+      {...props}
+      className={cx(props.className, styles.trigger)}
+    />
+  )
+}
+
+/**
+ * The indicator for the Tabs group which shows the active tab.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *     <TabsIndicator />
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function TabIndicator(props: ArkTabs.IndicatorProps) {
+  const { styles } = useTabsContext()
+  return (
+    <ArkTabs.Indicator
+      {...props}
+      className={cx(props.className, styles.indicator)}
+    />
+  )
+}
+
+/**
+ * The content for the Tabs group.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function TabPanel(props: ArkTabs.ContentProps) {
+  const { styles } = useTabsContext()
+  return (
+    <ArkTabs.Content
+      {...props}
+      className={cx(props.className, styles.content)}
+    />
+  )
+}

package/src/components/Text.tsx

@@ -0,0 +1,70 @@
+import {
+  Em,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  Small,
+  Span,
+  Strong,
+  type BoxProps,
+} from '@cerberus-design/styled-system/jsx'
+import { type PropsWithChildren } from 'react'
+
+/**
+ * This module exports a component for rendering text utilizing the styled-system JSX utility.
+ * @module @cerberus-design/react/Text
+ */
+
+export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+export type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'
+
+export interface TextProps extends BoxProps {
+  /**
+   * The element to render as. Defaults to 'p'.
+   */
+  as?: TextElements | Headings
+}
+
+/**
+ * A component for rendering text utilizing the styled-system JSX utility.
+ * @definition [Text docs](https://cerberus.digitalu.design/react/text)
+ * @example
+ * ```tsx
+ * <Text as="h1" color="page.text.100" textStyle={{
+ *   base: 'heading-md',
+ *   md: 'heading-lg',
+ * }}>
+ *  Hello, world!
+ * </Text>
+ */
+export function Text(props: PropsWithChildren<TextProps>) {
+  const { as = 'p', ...pandaJSXProps } = props
+  switch (as) {
+    case 'h1':
+      return <H1 {...pandaJSXProps} />
+    case 'h2':
+      return <H2 {...pandaJSXProps} />
+    case 'h3':
+      return <H3 {...pandaJSXProps} />
+    case 'h4':
+      return <H4 {...pandaJSXProps} />
+    case 'h5':
+      return <H5 {...pandaJSXProps} />
+    case 'h6':
+      return <H6 {...pandaJSXProps} />
+    case 'strong':
+      return <Strong {...pandaJSXProps} />
+    case 'em':
+      return <Em {...pandaJSXProps} />
+    case 'small':
+      return <Small {...pandaJSXProps} />
+    case 'span':
+      return <Span {...pandaJSXProps} />
+    default:
+      return <P {...pandaJSXProps} />
+  }
+}

package/src/components/Tooltip.tsx

@@ -32,7 +32,7 @@ export interface TooltipProps {
  * </Tooltip>
  */
 export function Tooltip(props: TooltipProps & TooltipContentProps) {
-  const { content, children, ...nativeProps } = props
+  const { content, children, asChild, ...nativeProps } = props
   const styles = tooltip()
   const position = {
     placement: props.position || 'top',
@@ -40,7 +40,7 @@ export function Tooltip(props: TooltipProps & TooltipContentProps) {
 
   return (
     <ArkTooltip.Root openDelay={400} positioning={position}>
-      <ArkTooltip.Trigger className={styles.trigger}>
+      <ArkTooltip.Trigger className={styles.trigger} asChild={asChild}>
         {children}
       </ArkTooltip.Trigger>
 

package/src/config/cerbIcons.ts

@@ -1,7 +1,10 @@
 import {
+  Calendar,
   Checkmark,
   CheckmarkOutline,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
   Close,
   CloudUpload,
   Information,
@@ -21,6 +24,9 @@ export type IconType = CarbonIconType | ElementType
 
 export interface DefinedIcons {
   avatar?: IconType
+  calendar?: IconType
+  calendarPrev?: IconType
+  calendarNext?: IconType
   checkbox?: IconType
   close?: IconType
   confirmModal?: IconType
@@ -42,6 +48,9 @@ export interface DefinedIcons {
 
 export const defaultIcons: DefinedIcons = {
   avatar: UserFilled,
+  calendar: Calendar,
+  calendarPrev: ChevronLeft,
+  calendarNext: ChevronRight,
   checkbox: CheckmarkIcon,
   close: Close,
   confirmModal: Information,

package/src/config/icons/checkbox.icons.tsx

@@ -5,7 +5,7 @@ import type { SVGProps } from 'react'
  * @module
  */
 
-interface CheckboxIconProps extends SVGProps<SVGSVGElement> {}
+export type CheckboxIconProps = SVGProps<SVGSVGElement>
 
 /**
  * Checkmark icon for Checkbox component
@@ -28,7 +28,7 @@ export function CheckmarkIcon(props: CheckboxIconProps) {
   )
 }
 
-interface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}
+export type IndeterminateIconProps = SVGProps<SVGSVGElement>
 
 /**
  * Indeterminate icon for Checkbox component

package/src/context/confirm-modal.tsx

@@ -86,7 +86,7 @@ export interface ConfirmModalValue {
 
 const ConfirmModalContext = createContext<ConfirmModalValue | null>(null)
 
-export interface ConfirmModalProviderProps {}
+export type ConfirmModalProviderProps = PropsWithChildren<unknown>
 
 /**
  * Provides a confirm modal to the app.

package/src/context/cta-modal.tsx

@@ -6,8 +6,8 @@ import {
   useContext,
   useMemo,
   useState,
-  type ButtonHTMLAttributes,
   type MouseEvent,
+  type MouseEventHandler,
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
@@ -50,7 +50,7 @@ export interface ShowCTAModalOptions {
    */
   actions: {
     text: string
-    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>
+    onClick: MouseEventHandler<HTMLButtonElement>
   }[]
 }
 
@@ -60,7 +60,7 @@ export interface CTAModalValue {
 
 const CTAModalContext = createContext<CTAModalValue | null>(null)
 
-export interface CTAModalProviderProps {}
+export type CTAModalProviderProps = PropsWithChildren<unknown>
 
 /**
  * Provides a CTA modal to the app.
@@ -99,7 +99,7 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
   const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
   const focusTrap = trapFocus(modalRef)
   const FallbackIcon = $cerberusIcons.confirmModal
-  const confirmIcon = content?.icon as ReactNode
+  const confirmIcon = content?.icon
   const { close: CloseIcon } = $cerberusIcons
 
   const handleShow = useCallback(
@@ -120,9 +120,8 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
     (event: MouseEvent<HTMLButtonElement>) => {
       const index = event.currentTarget.getAttribute('data-index')
       const action = content?.actions[Number(index)]
-      if (typeof action?.onClick === 'function') {
-        action.onClick(event)
-      }
+      const { onClick } = action || {}
+      onClick?.(event)
       close()
     },
     [content, close],

package/src/context/notification-center.tsx

@@ -55,7 +55,7 @@ export interface NotificationsValue {
 
 const NotificationsContext = createContext<NotificationsValue | null>(null)
 
-export interface NotificationsProviderProps extends PortalProps {}
+export type NotificationsProviderProps = PortalProps
 
 /**
  * Provides a notification center to the app.

package/src/context/prompt-modal.tsx

@@ -85,7 +85,7 @@ export interface PromptModalValue {
 
 const PromptModalContext = createContext<PromptModalValue | null>(null)
 
-export interface PromptModalProviderProps {}
+export type PromptModalProviderProps = PropsWithChildren<unknown>
 
 /**
  * Provides a prompt modal to the app.