@cerberus-design/react 0.13.2-next-c6aea71 → 0.13.2-next-b5a889e

package/src/components/DatePicker.client.tsx

@@ -0,0 +1,364 @@
+'use client'
+
+import {
+  DatePicker as ArkDP,
+  type DatePickerContentProps,
+  type DatePickerInputProps,
+  type DatePickerRootProps,
+  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 { useFieldContext } from '../context/field'
+import {
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerContext,
+  DatePickerViewControlGroup,
+  DatePickerTable,
+  DatePickerTableHeader,
+  DatePickerTableCellTrigger,
+  DatePickerTableCell,
+} from './DatePicker.server'
+import { formatISOToMilitary } from '../hooks/useDate'
+
+/**
+ * This module contains the DatePicker client family components.
+ * @module DatePicker:client
+ */
+
+// We are not exposing this to the public API
+const datePickerStyles = datePicker()
+
+/**
+ * The main context provider for the DatePicker family components.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePicker(props: DatePickerRootProps) {
+  const states = useFieldContext()
+
+  // TODO: Fix this format bug
+  // There is a bug with the Root component that causes random date selection onBlur after the first selection if the format prop is used.
+  const handleFormat = useCallback((value: DateValue) => {
+    return formatISOToMilitary(value.toString())
+  }, [])
+
+  return (
+    <ArkDP.Root
+      {...props}
+      {...states}
+      format={handleFormat}
+      positioning={{
+        placement: 'bottom-start',
+      }}
+    />
+  )
+}
+
+/**
+ * The input component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerInput(props: DatePickerInputProps) {
+  const { invalid, ...fieldStates } = useFieldContext()
+  return (
+    <ArkDP.Control className={datePickerStyles.control}>
+      <DatePickerTrigger />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+      />
+    </ArkDP.Control>
+  )
+}
+
+/**
+ * The input component for the DatePicker that uses ranges.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date" selection="range">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <RangePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function RangePickerInput(props: DatePickerInputProps) {
+  const { invalid, ...fieldStates } = useFieldContext()
+  return (
+    <ArkDP.Control data-range className={datePickerStyles.control}>
+      <DatePickerTrigger />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        data-range-input
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={0}
+      />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        data-range-input
+        data-range-end-input
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={1}
+      />
+    </ArkDP.Control>
+  )
+}
+
+/**
+ * The content component for the DatePicker which contains the calendar.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerContent(props: DatePickerContentProps) {
+  const { children, ...contentProps } = props
+  return (
+    <Portal>
+      <ArkDP.Positioner className={datePickerStyles.positioner}>
+        <ArkDP.Content
+          {...contentProps}
+          className={cx(contentProps.className, datePickerStyles.content)}
+        >
+          {children}
+        </ArkDP.Content>
+      </ArkDP.Positioner>
+    </Portal>
+  )
+}
+
+/**
+ * The day view component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {
+  function isToday(date: ArkDP.DateValue): boolean {
+    const today = new Date()
+    const formatted = today.toISOString().split('T')[0]
+    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
+    return formatted === arkDate
+  }
+
+  function isPastDay(date: ArkDP.DateValue): boolean {
+    const today = new Date()
+    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
+    return new Date(arkDate) < today
+  }
+
+  function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {
+    if (isToday(date)) return 'today'
+    if (isPastDay(date)) return 'past'
+    return 'future'
+  }
+
+  return (
+    <DatePickerView {...props} view="day">
+      <DatePickerContext>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableHead>
+                <ArkDP.TableRow>
+                  {datePicker.weekDays.map((weekDay, id) => (
+                    <DatePickerTableHeader key={id}>
+                      {weekDay.narrow}
+                    </DatePickerTableHeader>
+                  ))}
+                </ArkDP.TableRow>
+              </ArkDP.TableHead>
+
+              <ArkDP.TableBody>
+                {datePicker.weeks.map((week, id) => (
+                  <ArkDP.TableRow key={id}>
+                    {week.map((day, id) => (
+                      <DatePickerTableCell key={id} value={day}>
+                        <DatePickerTableCellTrigger
+                          data-date={getDayValue(day)}
+                        >
+                          {day.day}
+                        </DatePickerTableCellTrigger>
+                      </DatePickerTableCell>
+                    ))}
+                  </ArkDP.TableRow>
+                ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </DatePickerContext>
+    </DatePickerView>
+  )
+}
+
+/**
+ * The month view component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <ArkDP.View {...props} view="month">
+      <ArkDP.Context>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableBody>
+                {datePicker
+                  .getMonthsGrid({ columns: 4, format: 'short' })
+                  .map((months, id) => (
+                    <ArkDP.TableRow key={id}>
+                      {months.map((month, id) => (
+                        <DatePickerTableCell key={id} value={month.value}>
+                          <DatePickerTableCellTrigger>
+                            {month.label}
+                          </DatePickerTableCellTrigger>
+                        </DatePickerTableCell>
+                      ))}
+                    </ArkDP.TableRow>
+                  ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </ArkDP.Context>
+    </ArkDP.View>
+  )
+}
+
+/**
+ * The year view component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <ArkDP.View {...props} view="year">
+      <ArkDP.Context>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableBody>
+                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
+                  <ArkDP.TableRow key={id}>
+                    {years.map((year, id) => (
+                      <DatePickerTableCell key={id} value={year.value}>
+                        <DatePickerTableCellTrigger>
+                          {year.label}
+                        </DatePickerTableCellTrigger>
+                      </DatePickerTableCell>
+                    ))}
+                  </ArkDP.TableRow>
+                ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </ArkDP.Context>
+    </ArkDP.View>
+  )
+}
+
+/**
+ * An abstraction of the DatePicker content components that contain the
+ * different calendar views and controls.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerCalendar() {
+  return (
+    <DatePickerContent>
+      <DatePickerDayView />
+      <DatePickerMonthView />
+      <DatePickerYearView />
+    </DatePickerContent>
+  )
+}

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.