@cerberus-design/react 0.18.4 → 0.19.0

package/src/components/combobox/primitives.tsx

@@ -1,206 +1,178 @@
 import {
   Combobox,
-  type ComboboxClearTriggerProps,
-  type ComboboxContentProps,
-  type ComboboxControlProps,
-  type ComboboxInputProps,
-  type ComboboxItemGroupLabelProps,
-  type ComboboxItemGroupProps,
-  type ComboboxItemIndicatorProps,
-  type ComboboxItemProps,
-  type ComboboxItemTextProps,
-  type ComboboxLabelProps,
-  type ComboboxPositionerProps,
-  type ComboboxRootProps,
-  type ComboboxTriggerProps,
+  type ComboboxClearTriggerProps as ArkComboboxClearTriggerProps,
+  type ComboboxContentProps as ArkComboboxContentProps,
+  type ComboboxControlProps as ArkComboboxControlProps,
+  type ComboboxInputProps as ArkComboboxInputProps,
+  type ComboboxItemGroupLabelProps as ArkComboboxItemGroupLabelProps,
+  type ComboboxItemGroupProps as ArkComboboxItemGroupProps,
+  type ComboboxItemIndicatorProps as ArkComboboxItemIndicatorProps,
+  type ComboboxItemProps as ArkComboboxItemProps,
+  type ComboboxItemTextProps as ArkComboboxItemTextProps,
+  type ComboboxLabelProps as ArkComboboxLabelProps,
+  type ComboboxPositionerProps as ArkComboboxPositionerProps,
+  type ComboboxRootProps as ArkComboboxRootProps,
+  type ComboboxTriggerProps as ArkComboboxTriggerProps,
 } from '@ark-ui/react/combobox'
-import { ark } from '@ark-ui/react/factory'
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import type { SelectCollectionItem } from '../select/select'
 import { combobox, type ComboboxVariantProps } from 'styled-system/recipes'
-import { cx } from 'styled-system/css'
-import type { PropsWithChildren } from 'react'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the primitives of the Combobox.
  * @module 'combobox/primitives'
  */
 
+const { withSlotRecipe } = createCerberusPrimitive(combobox)
+
 /**
  * The ComboboxRoot component is the context provider for the Combobox
  * component.
  */
-export function ComboboxRoot(
-  props: ComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps,
-) {
-  const { size, ...rootProps } = props
-  const styles = combobox({ size })
-  return (
-    <Combobox.Root
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-    />
-  )
-}
+
+// @ts-expect-error there is a type mismatch here, but it works in practice
+export const ComboboxRoot = withSlotRecipe<ComboboxRootProps>(
+  Combobox.Root,
+  'root',
+)
+export type ComboboxRootProps = CerberusPrimitiveProps<
+  ArkComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps
+>
 
 /**
  * The label that appears above the combobox input.
  */
-export function ComboboxLabel(props: ComboboxLabelProps) {
-  const styles = combobox()
-  return (
-    <Combobox.Label {...props} className={cx(styles.label, props.className)} />
-  )
-}
+export const ComboboxLabel = withSlotRecipe<ComboboxLabelProps>(
+  Combobox.Label,
+  'label',
+)
+export type ComboboxLabelProps = CerberusPrimitiveProps<ArkComboboxLabelProps>
 
 /**
  * The control that wraps the combobox input.
  */
-export function ComboboxControl(props: ComboboxControlProps) {
-  const styles = combobox()
-  return (
-    <Combobox.Control
-      {...props}
-      className={cx(styles.control, props.className)}
-    />
-  )
-}
+export const ComboboxControl = withSlotRecipe<ComboboxControlProps>(
+  Combobox.Control,
+  'control',
+)
+export type ComboboxControlProps =
+  CerberusPrimitiveProps<ArkComboboxControlProps>
 
 /**
  * The input of the combobox.
  */
-export function ComboboxInput(props: ComboboxInputProps) {
-  const styles = combobox()
-  return (
-    <Combobox.Input {...props} className={cx(styles.input, props.className)} />
-  )
-}
+export const ComboboxInput = withSlotRecipe<ComboboxInputProps>(
+  Combobox.Input,
+  'input',
+)
+export type ComboboxInputProps = CerberusPrimitiveProps<ArkComboboxInputProps>
 
 /**
  * The trigger that opens the dropdown.
  */
-export function ComboboxTrigger(props: ComboboxTriggerProps) {
-  const styles = combobox()
-  return (
-    <Combobox.Trigger
-      {...props}
-      className={cx(styles.trigger, props.className)}
-    />
-  )
-}
+export const ComboboxTrigger = withSlotRecipe<ComboboxTriggerProps>(
+  Combobox.Trigger,
+  'trigger',
+)
+export type ComboboxTriggerProps =
+  CerberusPrimitiveProps<ArkComboboxTriggerProps>
 
 /**
  * The trigger to clear the combobox input.
  */
-export function ComboboxClearTrigger(props: ComboboxClearTriggerProps) {
-  const styles = combobox()
-  return (
-    <Combobox.ClearTrigger
-      {...props}
-      className={cx(styles.clearTrigger, props.className)}
-    />
-  )
-}
+export const ComboboxClearTrigger = withSlotRecipe<ComboboxClearTriggerProps>(
+  Combobox.ClearTrigger,
+  'clearTrigger',
+)
+export type ComboboxClearTriggerProps =
+  CerberusPrimitiveProps<ArkComboboxClearTriggerProps>
 
 /**
  * The positioner that wraps the content.
  */
-export function ComboboxPositioner(props: ComboboxPositionerProps) {
-  const styles = combobox()
-  return (
-    <Combobox.Positioner
-      {...props}
-      className={cx(styles.positioner, props.className)}
-    />
-  )
-}
+export const ComboboxPositioner = withSlotRecipe<ComboboxPositionerProps>(
+  Combobox.Positioner,
+  'positioner',
+)
+export type ComboboxPositionerProps =
+  CerberusPrimitiveProps<ArkComboboxPositionerProps>
 
 /**
  * The content of the combobox component.
  */
-export function ComboboxContent(
-  props: ComboboxContentProps & ComboboxVariantProps,
-) {
-  const { size, ...contentProps } = props
-  const styles = combobox({ size })
-  return (
-    <Combobox.Content
-      {...contentProps}
-      className={cx(styles.content, contentProps.className)}
-    />
-  )
-}
+export const ComboboxContent = withSlotRecipe<ComboboxContentProps>(
+  Combobox.Content,
+  'content',
+)
+export type ComboboxContentProps = CerberusPrimitiveProps<
+  ArkComboboxContentProps & ComboboxVariantProps
+>
 
 /**
  * A group of items in the combobox component.
  */
-export function ComboboxItemGroup(props: ComboboxItemGroupProps) {
-  const styles = combobox()
-  return (
-    <Combobox.ItemGroup
-      {...props}
-      className={cx(styles.itemGroup, props.className)}
-    />
-  )
-}
+export const ComboboxItemGroup = withSlotRecipe<ComboboxItemGroupProps>(
+  Combobox.ItemGroup,
+  'itemGroup',
+)
+export type ComboboxItemGroupProps =
+  CerberusPrimitiveProps<ArkComboboxItemGroupProps>
 
 /**
  * The label for a group of items in the combobox component.
  */
-export function ComboboxItemGroupLabel(props: ComboboxItemGroupLabelProps) {
-  const styles = combobox()
-  return (
-    <Combobox.ItemGroupLabel
-      {...props}
-      className={cx(styles.itemGroupLabel, props.className)}
-    />
+export const ComboboxItemGroupLabel =
+  withSlotRecipe<ComboboxItemGroupLabelProps>(
+    Combobox.ItemGroupLabel,
+    'itemGroupLabel',
   )
-}
+export type ComboboxItemGroupLabelProps =
+  CerberusPrimitiveProps<ArkComboboxItemGroupLabelProps>
 
 /**
  * An individual item in the combobox component.
  */
-export function ComboboxItem(props: ComboboxItemProps) {
-  const styles = combobox()
-  return (
-    <Combobox.Item {...props} className={cx(styles.item, props.className)} />
-  )
-}
+export const ComboboxItem = withSlotRecipe<ComboboxItemProps>(
+  Combobox.Item,
+  'item',
+)
+export type ComboboxItemProps = CerberusPrimitiveProps<ArkComboboxItemProps>
 
 /**
  * The text that labels a single item of the combobox.
  */
-export function ComboboxItemText(props: ComboboxItemTextProps) {
-  const styles = combobox()
-  return (
-    <Combobox.ItemText
-      {...props}
-      className={cx(styles.itemText, props.className)}
-    />
-  )
-}
+export const ComboboxItemText = withSlotRecipe<ComboboxItemTextProps>(
+  Combobox.ItemText,
+  'itemText',
+)
+export type ComboboxItemTextProps =
+  CerberusPrimitiveProps<ArkComboboxItemTextProps>
 
 /**
  * The indicator that appears when the item has been selected.
  */
-export function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {
-  const styles = combobox()
-  return (
-    <Combobox.ItemIndicator
-      {...props}
-      className={cx(styles.itemIndicator, props.className)}
-    />
-  )
-}
+export const ComboboxItemIndicator = withSlotRecipe<ComboboxItemIndicatorProps>(
+  Combobox.ItemIndicator,
+  'itemIndicator',
+)
+export type ComboboxItemIndicatorProps =
+  CerberusPrimitiveProps<ArkComboboxItemIndicatorProps>
 
 /**
  * The icon that appears at the start of the combobox input.
  */
-export function ComboboxStartIcon(props: PropsWithChildren) {
-  const styles = combobox()
-  return <ark.span {...props} className={styles.startIcon} />
-}
+export const ComboboxStartIcon = withSlotRecipe<ComboboxStartIconProps>(
+  ark.span,
+  'startIcon',
+)
+export type ComboboxStartIconProps = CerberusPrimitiveProps<
+  HTMLArkProps<'span'>
+>
 
 // We are only doing this to make the API consistent
 export const ComboItemText = ComboboxItemText
-
 export type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails

package/src/components/cta-dialog/provider.tsx

@@ -11,8 +11,8 @@ import {
 } from 'react'
 import { HStack, VStack } from 'styled-system/jsx'
 import { useCerberusContext } from '../../context/cerberus'
-import { Show } from '../Show'
-import { For } from '../for'
+import { Show } from '../show/index'
+import { For } from '../for/index'
 import { Avatar } from '../avatar/avatar'
 import {
   Dialog,

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

@@ -1,3 +1,4 @@
+import type { RefObject } from 'react'
 import { DatePickerContent } from './content'
 import { DatePickerDayView } from './day-view'
 import { DatePickerMonthView } from './month-view'
@@ -8,6 +9,22 @@ import { DatePickerYearView } from './year-view'
  * @module 'date-picker/calendar'
  */
 
+export interface DatePickerCalendarProps {
+  /**
+   * Determines whether to disable the Portal used to render the DatePicker
+   * content in a modal. This is an alternative to using the `container` prop
+   * which provides the context to the Portal instead.
+   * @default false
+   */
+  withModal?: boolean
+  /**
+   * The container element to render the DatePicker content in. This is used
+   * to render the DatePicker content in a specific context, such as a modal.
+   * @default document.body
+   */
+  container?: RefObject<HTMLElement | null>
+}
+
 /**
  * An abstraction of the DatePicker content components that contain the
  * different calendar views and controls.
@@ -23,12 +40,12 @@ import { DatePickerYearView } from './year-view'
  * </Field>
  * ```
  */
-export function DatePickerCalendar(props: { withModal?: boolean }) {
+export function DatePickerCalendar(props: DatePickerCalendarProps) {
   return (
-    <DatePickerContent withModal={props.withModal}>
+    <DatePickerContent {...props}>
       <DatePickerDayView />
-      <DatePickerMonthView />
-      <DatePickerYearView />
+      <DatePickerMonthView view="month" />
+      <DatePickerYearView view="year" />
     </DatePickerContent>
   )
 }

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

@@ -1,6 +1,7 @@
-import type { DatePickerContentProps } from '@ark-ui/react/date-picker'
-import { Portal } from '../Portal'
+import { Portal } from '../portal/index'
+import type { DatePickerCalendarProps } from './calendar'
 import { DatePickerParts } from './parts'
+import type { DatePickerContentProps } from './primitives'
 
 /**
  * This private module contains an abstraction of the DatePickerContent
@@ -14,13 +15,11 @@ import { DatePickerParts } from './parts'
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
 export function DatePickerContent(
-  props: DatePickerContentProps & {
-    withModal?: boolean
-  },
+  props: DatePickerContentProps & DatePickerCalendarProps,
 ) {
-  const { withModal, ...contentProps } = props
+  const { withModal, container, ...contentProps } = props
   return (
-    <Portal disabled={withModal ?? false}>
+    <Portal disabled={withModal ?? false} container={container}>
       <DatePickerParts.Positioner>
         <DatePickerParts.Content {...contentProps} />
       </DatePickerParts.Positioner>

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

@@ -1,5 +1,5 @@
-import type { DatePickerRootProps } from '@ark-ui/react/date-picker'
 import { DatePickerParts } from './parts'
+import type { DatePickerRootProps } from './primitives'
 
 /**
  * This module contains an abstraction of the DatePicker.Root primitive.

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

@@ -2,10 +2,10 @@
 
 import type {
   DatePicker,
-  DatePickerViewProps,
   UseDatePickerContext,
 } from '@ark-ui/react/date-picker'
 import { DatePickerParts } from './parts'
+import type { DatePickerViewProps } from './primitives'
 import { DatePickerViewControlGroup } from './view-control-group'
 
 /**

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

@@ -1,6 +1,6 @@
-import type { DatePickerInputProps } from '@ark-ui/react/date-picker'
 import { DatePickerTrigger } from './trigger'
 import { DatePickerParts } from './parts'
+import type { DatePickerInputElProps } from './primitives'
 
 /**
  * This module contains an abstraction of the DatePickerInputEl primitive.
@@ -12,7 +12,7 @@ import { DatePickerParts } from './parts'
  * triggers to open the DatePicker and clear the value.
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
-export function DatePickerInput(props: DatePickerInputProps) {
+export function DatePickerInput(props: DatePickerInputElProps) {
   return (
     <DatePickerParts.Control>
       <DatePickerTrigger />

package/src/components/date-picker/month-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 DatePickerMonthView
@@ -18,7 +16,7 @@ import { DatePickerViewControlGroup } from './view-control-group'
  * DatePicker.
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
-export function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {
+export function DatePickerMonthView(props: DatePickerViewProps) {
   return (
     <DatePickerParts.View {...props} view="month">
       <DatePickerParts.Context>