@cerberus-design/react 0.18.3 → 0.19.0

package/src/components/date-picker/primitives.tsx

@@ -1,280 +1,233 @@
 import {
   DatePicker,
-  type DatePickerContentProps,
-  type DatePickerContextProps,
-  type DatePickerControlProps,
-  type DatePickerInputProps,
-  type DatePickerLabelProps,
-  type DatePickerMonthSelectProps,
-  type DatePickerNextTriggerProps,
-  type DatePickerPositionerProps,
-  type DatePickerPrevTriggerProps,
-  type DatePickerRangeTextProps,
-  type DatePickerRootProps,
-  type DatePickerTableBodyProps,
-  type DatePickerTableCellProps,
-  type DatePickerTableCellTriggerProps,
-  type DatePickerTableHeaderProps,
-  type DatePickerTableHeadProps,
-  type DatePickerTableProps,
-  type DatePickerTableRowProps,
-  type DatePickerTriggerProps,
-  type DatePickerViewControlProps,
-  type DatePickerViewProps,
-  type DatePickerViewTriggerProps,
-  type DatePickerYearSelectProps,
+  type DatePickerContentProps as ArkDatePickerContentProps,
+  type DatePickerContextProps as ArkDatePickerContextProps,
+  type DatePickerControlProps as ArkDatePickerControlProps,
+  type DatePickerInputProps as ArkDatePickerInputProps,
+  type DatePickerLabelProps as ArkDatePickerLabelProps,
+  type DatePickerMonthSelectProps as ArkDatePickerMonthSelectProps,
+  type DatePickerNextTriggerProps as ArkDatePickerNextTriggerProps,
+  type DatePickerPositionerProps as ArkDatePickerPositionerProps,
+  type DatePickerPrevTriggerProps as ArkDatePickerPrevTriggerProps,
+  type DatePickerRangeTextProps as ArkDatePickerRangeTextProps,
+  type DatePickerRootProps as ArkDatePickerRootProps,
+  type DatePickerTableBodyProps as ArkDatePickerTableBodyProps,
+  type DatePickerTableCellProps as ArkDatePickerTableCellProps,
+  type DatePickerTableCellTriggerProps as ArkDatePickerTableCellTriggerProps,
+  type DatePickerTableHeaderProps as ArkDatePickerTableHeaderProps,
+  type DatePickerTableHeadProps as ArkDatePickerTableHeadProps,
+  type DatePickerTableProps as ArkDatePickerTableProps,
+  type DatePickerTableRowProps as ArkDatePickerTableRowProps,
+  type DatePickerTriggerProps as ArkDatePickerTriggerProps,
+  type DatePickerViewControlProps as ArkDatePickerViewControlProps,
+  type DatePickerViewProps as ArkDatePickerViewProps,
+  type DatePickerViewTriggerProps as ArkDatePickerViewTriggerProps,
+  type DatePickerYearSelectProps as ArkDatePickerYearSelectProps,
 } from '@ark-ui/react/date-picker'
-import { cx } from 'styled-system/css'
 import { datePicker } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the DatePicker primitives.
  * @module 'date-picker/primitives'
  */
 
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(datePicker)
+
 /**
  * The label component for the DatePicker.
  */
-export function DatePickerLabel(props: DatePickerLabelProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.Label
-      {...props}
-      className={cx(styles.label, props.className)}
-    />
-  )
-}
+export type DatePickerLabelProps =
+  CerberusPrimitiveProps<ArkDatePickerLabelProps>
+export const DatePickerLabel = withSlotRecipe(DatePicker.Label, 'label')
 
 /**
  * The control component for the DatePicker which wraps the input and the
  * triggers to open the DatePicker and clear the value.
  */
-export function DatePickerControl(props: DatePickerControlProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.Control
-      {...props}
-      className={cx(styles.control, props.className)}
-    />
-  )
-}
+export type DatePickerControlProps =
+  CerberusPrimitiveProps<ArkDatePickerControlProps>
+export const DatePickerControl = withSlotRecipe(DatePicker.Control, 'control')
 
 /**
  * The input component for the DatePicker.
  */
-export function DatePickerInputEl(props: DatePickerInputProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.Input
-      {...props}
-      className={cx(styles.input, props.className)}
-    />
-  )
-}
+export type DatePickerInputElProps =
+  CerberusPrimitiveProps<ArkDatePickerInputProps>
+export const DatePickerInputEl = withSlotRecipe(DatePicker.Input, 'input')
 
 /**
  * The trigger component that opens the DatePicker.
  */
-export function DatePickerTrigger(props: DatePickerTriggerProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.Trigger
-      {...props}
-      className={cx(styles.trigger, props.className)}
-    />
-  )
-}
+export type DatePickerTriggerProps =
+  CerberusPrimitiveProps<ArkDatePickerTriggerProps>
+export const DatePickerTrigger = withSlotRecipe(DatePicker.Trigger, 'trigger')
 
 /**
  * The content component for the DatePicker.
  */
-export function DatePickerContent(props: DatePickerContentProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.Content
-      {...props}
-      className={cx(styles.content, props.className)}
-    />
-  )
-}
+export type DatePickerContentProps =
+  CerberusPrimitiveProps<ArkDatePickerContentProps>
+export const DatePickerContent = withSlotRecipe(DatePicker.Content, 'content')
 
 /**
  * The view control component for the DatePicker which wraps the triggers to
  * switch between calendar views.
  */
-export function DatePickerViewControl(props: DatePickerViewControlProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.Control
-      {...props}
-      className={cx(styles.viewControl, props.className)}
-    />
-  )
-}
+export type DatePickerViewControlProps =
+  CerberusPrimitiveProps<ArkDatePickerViewControlProps>
+export const DatePickerViewControl = withSlotRecipe(
+  DatePicker.Control,
+  'viewControl',
+)
 
 /**
  * The range text component for the DatePicker.
  */
-export function DatePickerRangeText(props: DatePickerRangeTextProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.RangeText
-      {...props}
-      className={cx(styles.rangeText, props.className)}
-    />
-  )
-}
+export type DatePickerRangeTextProps =
+  CerberusPrimitiveProps<ArkDatePickerRangeTextProps>
+export const DatePickerRangeText = withSlotRecipe(
+  DatePicker.RangeText,
+  'rangeText',
+)
 
 /**
  * The table component for the DatePicker.
  */
-export function DatePickerTable(props: DatePickerTableProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.Table
-      {...props}
-      className={cx(styles.table, props.className)}
-    />
-  )
-}
+export type DatePickerTableProps =
+  CerberusPrimitiveProps<ArkDatePickerTableProps>
+export const DatePickerTable = withSlotRecipe(DatePicker.Table, 'table')
 
 /**
  * The header component for the DatePicker table.
  */
-export function DatePickerTableHeader(props: DatePickerTableHeaderProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.TableHeader
-      {...props}
-      className={cx(styles.tableHeader, props.className)}
-    />
-  )
-}
+export type DatePickerTableHeaderProps =
+  CerberusPrimitiveProps<ArkDatePickerTableHeaderProps>
+export const DatePickerTableHeader = withSlotRecipe(
+  DatePicker.TableHeader,
+  'tableHeader',
+)
 
 /**
  * The table cell component for the DatePicker.
  */
-export function DatePickerTableCell(props: DatePickerTableCellProps) {
-  const styles = datePicker()
-  return (
-    <DatePicker.TableCell
-      {...props}
-      className={cx(styles.tableCell, props.className)}
-    />
-  )
-}
+export type DatePickerTableCellProps =
+  CerberusPrimitiveProps<ArkDatePickerTableCellProps>
+export const DatePickerTableCell = withSlotRecipe(
+  DatePicker.TableCell,
+  'tableCell',
+)
 
 /**
  * The table cell trigger component for the DatePicker.
  */
-export function DatePickerTableCellTrigger(
-  props: DatePickerTableCellTriggerProps,
-) {
-  const styles = datePicker()
-  return (
-    <DatePicker.TableCellTrigger
-      {...props}
-      className={cx(styles.tableCellTrigger, props.className)}
-    />
-  )
-}
+export type DatePickerTableCellTriggerProps =
+  CerberusPrimitiveProps<ArkDatePickerTableCellTriggerProps>
+export const DatePickerTableCellTrigger = withSlotRecipe(
+  DatePicker.TableCellTrigger,
+  'tableCellTrigger',
+)
 
 /**
  * The root component of the DatePicker. This primitive has no Cerberus styles.
  */
-export function DatePickerRoot(props: DatePickerRootProps) {
-  return <DatePicker.Root {...props} />
-}
+export type DatePickerRootProps = CerberusPrimitiveProps<ArkDatePickerRootProps>
+// @ts-expect-error this is a workaround for the type error WIP
+export const DatePickerRoot = withNoRecipe(DatePicker.Root)
 
 /**
  * The label component of the DatePicker. This primitive has no Cerberus styles.
  */
-export function DatePickerClearTrigger(props: DatePickerTriggerProps) {
-  return <DatePicker.ClearTrigger {...props} />
-}
+export type DatePickerClearTriggerProps =
+  CerberusPrimitiveProps<ArkDatePickerTriggerProps>
+export const DatePickerClearTrigger = withNoRecipe(DatePicker.ClearTrigger)
 
 /**
  * The control component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerPositioner(props: DatePickerPositionerProps) {
-  return <DatePicker.Positioner {...props} />
-}
+export type DatePickerPositionerProps =
+  CerberusPrimitiveProps<ArkDatePickerPositionerProps>
+export const DatePickerPositioner = withNoRecipe(DatePicker.Positioner)
 
 /**
  * The year select input component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export function DatePickerYearSelect(props: DatePickerYearSelectProps) {
-  return <DatePicker.YearSelect {...props} />
-}
+export type DatePickerYearSelectProps =
+  CerberusPrimitiveProps<ArkDatePickerYearSelectProps>
+export const DatePickerYearSelect = withNoRecipe(DatePicker.YearSelect)
 
 /**
  * The month select input component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export function DatePickerMonthSelect(props: DatePickerMonthSelectProps) {
-  return <DatePicker.MonthSelect {...props} />
-}
+export type DatePickerMonthSelectProps =
+  CerberusPrimitiveProps<ArkDatePickerMonthSelectProps>
+export const DatePickerMonthSelect = withNoRecipe(DatePicker.MonthSelect)
 
 /**
  * The day view component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerView(props: DatePickerViewProps) {
-  return <DatePicker.View {...props} />
-}
+export type DatePickerViewProps = CerberusPrimitiveProps<ArkDatePickerViewProps>
+export const DatePickerView = withNoRecipe(DatePicker.View)
 
 /**
  * The day context component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export function DatePickerContext(props: DatePickerContextProps) {
-  return <DatePicker.Context {...props} />
-}
+export type DatePickerContextProps =
+  CerberusPrimitiveProps<ArkDatePickerContextProps>
+export const DatePickerContext = DatePicker.Context
 
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerPrevTrigger(props: DatePickerPrevTriggerProps) {
-  return <DatePicker.PrevTrigger {...props} />
-}
+export type DatePickerPrevTriggerProps =
+  CerberusPrimitiveProps<ArkDatePickerPrevTriggerProps>
+export const DatePickerPrevTrigger = withNoRecipe(DatePicker.PrevTrigger)
 
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerNextTrigger(props: DatePickerNextTriggerProps) {
-  return <DatePicker.NextTrigger {...props} />
-}
+export type DatePickerNextTriggerProps =
+  CerberusPrimitiveProps<ArkDatePickerNextTriggerProps>
+export const DatePickerNextTrigger = withNoRecipe(DatePicker.NextTrigger)
 
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerViewTrigger(props: DatePickerViewTriggerProps) {
-  return <DatePicker.ViewTrigger {...props} />
-}
+export type DatePickerViewTriggerProps =
+  CerberusPrimitiveProps<ArkDatePickerViewTriggerProps>
+export const DatePickerViewTrigger = withNoRecipe(DatePicker.ViewTrigger)
 
 /**
  * The table head component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerTableHead(props: DatePickerTableHeadProps) {
-  return <DatePicker.TableHead {...props} />
-}
+export type DatePickerTableHeadProps =
+  CerberusPrimitiveProps<ArkDatePickerTableHeadProps>
+export const DatePickerTableHead = withNoRecipe(DatePicker.TableHead)
+
 /**
  * The table row component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerTableRow(props: DatePickerTableRowProps) {
-  return <DatePicker.TableRow {...props} />
-}
+export type DatePickerTableRowProps =
+  CerberusPrimitiveProps<ArkDatePickerTableRowProps>
+export const DatePickerTableRow = withNoRecipe(DatePicker.TableRow)
+
 /**
  * The table body component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export function DatePickerTableBody(props: DatePickerTableBodyProps) {
-  return <DatePicker.TableBody {...props} />
-}
+export type DatePickerTableBodyProps =
+  CerberusPrimitiveProps<ArkDatePickerTableBodyProps>
+export const DatePickerTableBody = withNoRecipe(DatePicker.TableBody)

package/src/components/date-picker/range-input.tsx

@@ -1,21 +1,13 @@
-'use client'
-
-import type { DatePickerInputProps } from '@ark-ui/react/date-picker'
-import { useMemo, type InputHTMLAttributes } from 'react'
 import { DatePickerParts } from './parts'
+import type { DatePickerInputElProps } from './primitives'
 import { DatePickerTrigger } from './trigger'
 
-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'],
-  ]
-}
+/**
+ * This private module contains the RangePickerInput component.
+ * @module RangePickerInput
+ */
+
+export type RangePickerInputProps = DatePickerInputElProps
 
 /**
  * An abstraction of the DatePicker input that wraps the input and the
@@ -23,26 +15,19 @@ export interface RangePickerInputProps
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
 export function RangePickerInput(props: RangePickerInputProps) {
-  const { defaultValue, ...nativeProps } = props
-
-  const startDate = useMemo(() => defaultValue?.[0], [defaultValue])
-  const endDate = useMemo(() => defaultValue?.[1], [defaultValue])
-
   return (
     <DatePickerParts.Control data-range>
       <DatePickerTrigger />
       <DatePickerParts.Input
-        {...nativeProps}
+        {...props}
         data-range-input
-        defaultValue={startDate}
         placeholder={props.placeholder ?? 'DD MMM YYYY'}
         maxLength={11}
         index={0}
       />
       <DatePickerParts.Input
-        {...nativeProps}
+        {...props}
         data-range-input
-        defaultValue={endDate}
         data-range-end-input
         placeholder={props.placeholder ?? 'DD MMM YYYY'}
         maxLength={11}

package/src/components/date-picker/trigger.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import type { DatePickerTriggerProps } from '@ark-ui/react/date-picker'
 import { useCerberusContext } from '../../context/cerberus'
-import { IconButton } from '../IconButton'
+import { IconButton } from '../icon-button/index'
 import { DatePickerParts } from './parts'
+import type { DatePickerTriggerProps } from './primitives'
 
 /**
  * This private module contains the DatePicker trigger component.

package/src/components/date-picker/view-control-group.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import type { DatePickerViewControlProps } from '@ark-ui/react/date-picker'
+import { css } from 'styled-system/css'
 import { useCerberusContext } from '../../context/cerberus'
-import { IconButton } from '../IconButton'
-import { DatePickerParts } from './parts'
 import { Button } from '../button/button'
-import { css } from 'styled-system/css'
+import { IconButton } from '../icon-button/index'
+import { DatePickerParts } from './parts'
+import type { DatePickerViewControlProps } from './primitives'
 
 /**
  * This private module contains an abstraction of the DatePickerViewControl

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

@@ -1,11 +1,9 @@
 'use client'
 
-import type {
-  DatePickerViewProps,
-  UseDatePickerContext,
-} from '@ark-ui/react/date-picker'
+import type { UseDatePickerContext } from '@ark-ui/react/date-picker'
 import { DatePickerParts } from './parts'
 import { DatePickerViewControlGroup } from './view-control-group'
+import type { DatePickerViewProps } from './primitives'
 
 /**
  * This private module contains an abstraction of the DatePickerYearView
@@ -18,7 +16,7 @@ import { DatePickerViewControlGroup } from './view-control-group'
  * DatePicker.
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
-export function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
+export function DatePickerYearView(props: DatePickerViewProps) {
   return (
     <DatePickerParts.View {...props} view="year">
       <DatePickerParts.Context>

package/src/components/deprecated/Legend.tsx

@@ -5,7 +5,7 @@ import { css, cx } from 'styled-system/css'
 import { label, type LabelVariantProps } from 'styled-system/recipes'
 import { hstack } from 'styled-system/patterns'
 import { type HTMLAttributes } from 'react'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 
 /**
  * This module contains the Fieldset component.

package/src/components/deprecated/NavMenuLink.tsx

@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
 import { css, cx } from 'styled-system/css'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 
 /**
  * This module contains the NavMenuLink component.

package/src/components/deprecated/NavMenuList.tsx

@@ -5,7 +5,7 @@ import { cx } from 'styled-system/css'
 import { vstack } from 'styled-system/patterns'
 import { useNavMenuContext } from '../../context/navMenu'
 import type { Positions } from '../../types'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 
 /**
  * This module contains the NavMenuList component.

package/src/components/deprecated/NavMenuTrigger.tsx

@@ -7,14 +7,13 @@ import {
   type MouseEvent,
 } from 'react'
 import { cx } from 'styled-system/css'
-import { button } from 'styled-system/recipes'
+import { button, type ButtonVariantProps } from 'styled-system/recipes'
+import { useNavMenuContext } from '../../context/navMenu'
+import { Show } from '../show/index'
 import {
   createNavTriggerProps,
   type NavTriggerAriaValues,
-} from '../../aria-helpers/nav-menu.aria'
-import { useNavMenuContext } from '../../context/navMenu'
-import type { ButtonProps } from '../button/button'
-import { Show } from '../Show'
+} from './aria-helpers/nav-menu.aria'
 
 /**
  * This module contains the NavMenuTrigger component.
@@ -23,7 +22,7 @@ import { Show } from '../Show'
 
 export interface NavMenuTriggerProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonProps,
+    ButtonVariantProps,
     NavTriggerAriaValues {
   /**
    * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.

package/src/components/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'
 
 /**
  * This module exports the Notification component.

package/src/components/dialog/close-icon-trigger.tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'
 import { useCerberusContext } from '../../context/cerberus'
-import { IconButton } from '../IconButton'
-import { DialogCloseTrigger } from './primitives'
+import { IconButton } from '../icon-button/index'
+import { DialogCloseTrigger, type DialogCloseTriggerProps } from './primitives'
 import { dialog } from 'styled-system/recipes'
 import { cx } from 'styled-system/css'
 

package/src/components/dialog/dialog.tsx

@@ -1,7 +1,12 @@
-import type { DialogContentProps } from '@ark-ui/react/dialog'
 import type { DialogVariantProps } from 'styled-system/recipes'
-import { Portal } from '../Portal'
-import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
+import type { WithCss } from '../../types'
+import { Portal } from '../portal/index'
+import {
+  DialogBackdrop,
+  DialogContent,
+  DialogPositioner,
+  type DialogContentProps,
+} from './primitives'
 
 /**
  * This module contains and abstraction of the Dialog primitives.
@@ -9,8 +14,9 @@ import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
  */
 
 export interface DialogProps
-  extends Omit<DialogContentProps, 'size'>,
-    DialogVariantProps {}
+  extends Omit<DialogContentProps, 'size' | 'style'>,
+    DialogVariantProps,
+    WithCss {}
 
 /**
  * An abstraction of the Dialog primitives that controls the content of the

package/src/components/dialog/index.ts

@@ -2,3 +2,7 @@ export * from './parts'
 export * from './primitives'
 export * from './close-icon-trigger'
 export * from './dialog'
+
+export interface OpenChangeDetails {
+  open: boolean
+}