@cerberus-design/react 0.17.2 → 0.18.0

package/src/components/combobox/combobox.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { ComboboxRootProps } from '@ark-ui/react/combobox'
-import type { ComboboxVariantProps } from '@cerberus/styled-system/recipes'
+import type { ComboboxVariantProps } from 'styled-system/recipes'
 import { useCerberusContext } from '../../context/cerberus'
 import type { SelectCollectionItem } from '../select/select'
 import { type FieldInputProps } from '../field/index'
@@ -33,7 +33,7 @@ export function Combobox(props: ComboboxProps) {
 
   return (
     <ComboboxParts.Root {...rootProps}>
-      <Show when={Boolean(label)}>
+      <Show when={label}>
         <ComboboxParts.Label>{label}</ComboboxParts.Label>
       </Show>
 

package/src/components/combobox/primitives.tsx

@@ -16,11 +16,8 @@ import {
 } from '@ark-ui/react/combobox'
 import { ark } from '@ark-ui/react/factory'
 import type { SelectCollectionItem } from '../select/select'
-import {
-  combobox,
-  type ComboboxVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { combobox, type ComboboxVariantProps } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 import type { PropsWithChildren } from 'react'
 
 /**

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

@@ -9,7 +9,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { HStack, VStack } from '@cerberus/styled-system/jsx'
+import { HStack, VStack } from 'styled-system/jsx'
 import { useCerberusContext } from '../../context/cerberus'
 import { Show } from '../Show'
 import { For } from '../for'
@@ -115,7 +115,7 @@ export function CTAModal(props: PropsWithChildren<object>) {
                   gradient="charon-light"
                   fallback={
                     <Show
-                      when={Boolean(confirmIcon)}
+                      when={confirmIcon}
                       fallback={<FallbackIcon size={24} />}
                     >
                       {confirmIcon}

package/src/components/cta-dialog/trigger-item.tsx

@@ -1,7 +1,7 @@
-import { css, cx } from '@cerberus/styled-system/css'
+import { css, cx } from 'styled-system/css'
 import { Button, type ButtonProps } from '../button/button'
 import { ark } from '@ark-ui/react/factory'
-import { button } from '@cerberus/styled-system/recipes'
+import { button } from 'styled-system/recipes'
 
 /**
  * This module provides the trigger item for the cta modal.

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

@@ -1,19 +1,31 @@
 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,
 } from '@ark-ui/react/date-picker'
-import { cx } from '@cerberus/styled-system/css'
-import { datePicker } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { datePicker } from 'styled-system/recipes'
 
 /**
  * This module contains the DatePicker primitives.
@@ -170,63 +182,99 @@ export function DatePickerTableCellTrigger(
 /**
  * The root component of the DatePicker. This primitive has no Cerberus styles.
  */
-export const DatePickerRoot = DatePicker.Root
+export function DatePickerRoot(props: DatePickerRootProps) {
+  return <DatePicker.Root {...props} />
+}
+
 /**
  * The label component of the DatePicker. This primitive has no Cerberus styles.
  */
-export const DatePickerClearTrigger = DatePicker.ClearTrigger
+export function DatePickerClearTrigger(props: DatePickerTriggerProps) {
+  return <DatePicker.ClearTrigger {...props} />
+}
+
 /**
  * The control component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerPositioner = DatePicker.Positioner
+export function DatePickerPositioner(props: DatePickerPositionerProps) {
+  return <DatePicker.Positioner {...props} />
+}
+
 /**
  * The year select input component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export const DatePickerYearSelect = DatePicker.YearSelect
+export function DatePickerYearSelect(props: DatePickerYearSelectProps) {
+  return <DatePicker.YearSelect {...props} />
+}
+
 /**
  * The month select input component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export const DatePickerMonthSelect = DatePicker.MonthSelect
+export function DatePickerMonthSelect(props: DatePickerMonthSelectProps) {
+  return <DatePicker.MonthSelect {...props} />
+}
+
 /**
  * The day view component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerView = DatePicker.View
+export function DatePickerView(props: DatePickerViewProps) {
+  return <DatePicker.View {...props} />
+}
+
 /**
  * The day context component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export const DatePickerContext = DatePicker.Context
+export function DatePickerContext(props: DatePickerContextProps) {
+  return <DatePicker.Context {...props} />
+}
+
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerPrevTrigger = DatePicker.PrevTrigger
+export function DatePickerPrevTrigger(props: DatePickerPrevTriggerProps) {
+  return <DatePicker.PrevTrigger {...props} />
+}
+
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerNextTrigger = DatePicker.NextTrigger
+export function DatePickerNextTrigger(props: DatePickerNextTriggerProps) {
+  return <DatePicker.NextTrigger {...props} />
+}
+
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerViewTrigger = DatePicker.ViewTrigger
+export function DatePickerViewTrigger(props: DatePickerViewTriggerProps) {
+  return <DatePicker.ViewTrigger {...props} />
+}
+
 /**
  * The table head component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerTableHead = DatePicker.TableHead
+export function DatePickerTableHead(props: DatePickerTableHeadProps) {
+  return <DatePicker.TableHead {...props} />
+}
 /**
  * The table row component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerTableRow = DatePicker.TableRow
+export function DatePickerTableRow(props: DatePickerTableRowProps) {
+  return <DatePicker.TableRow {...props} />
+}
 /**
  * The table body component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerTableBody = DatePicker.TableBody
+export function DatePickerTableBody(props: DatePickerTableBodyProps) {
+  return <DatePicker.TableBody {...props} />
+}

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

@@ -5,7 +5,7 @@ import { useCerberusContext } from '../../context/cerberus'
 import { IconButton } from '../IconButton'
 import { DatePickerParts } from './parts'
 import { Button } from '../button/button'
-import { css } from '@cerberus/styled-system/css'
+import { css } from 'styled-system/css'
 
 /**
  * This private module contains an abstraction of the DatePickerViewControl

package/src/components/deprecated/FieldMessage.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import type { HTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx } from 'styled-system/css'
 import {
   fieldMessage,
   type FieldMessageVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import { useFieldContext } from '@ark-ui/react/field'
 
 /**

package/src/components/deprecated/FieldsetLabel.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { label, type LabelVariantProps } from 'styled-system/recipes'
 import type { LabelProps } from './Label'
 
 /**

package/src/components/deprecated/Label.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { label, type LabelVariantProps } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 import { FieldLabel } from '../field'
 
 /**

package/src/components/deprecated/Legend.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useFieldContext } from '@ark-ui/react/field'
-import { css, cx } from '@cerberus/styled-system/css'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
-import { hstack } from '@cerberus/styled-system/patterns'
+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'
 

package/src/components/deprecated/Modal.tsx

@@ -1,6 +1,6 @@
-import { cx } from '@cerberus/styled-system/css'
-import { modal } from '@cerberus/styled-system/recipes'
-import { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'
+import { cx } from 'styled-system/css'
+import { modal } from 'styled-system/recipes'
+import { type HTMLAttributes, type Ref } from 'react'
 
 /**
  * This module contains the Modal root component for a customizable modal.
@@ -9,19 +9,13 @@ import { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'
 
 // Modal
 
-export type ModalProps = HTMLAttributes<HTMLDialogElement>
-
-function ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {
-  return (
-    <dialog
-      {...props}
-      className={cx(props.className, modal().dialog)}
-      ref={ref}
-    />
-  )
+export type ModalProps = HTMLAttributes<HTMLDialogElement> & {
+  ref?: Ref<HTMLDialogElement>
 }
 
 /**
  * @deprecated use `Dialog` instead
  */
-export const Modal = forwardRef(ModalEl)
+export function Modal(props: ModalProps) {
+  return <dialog {...props} className={cx(props.className, modal().dialog)} />
+}

package/src/components/deprecated/ModalDescription.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { modal } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { modal } from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/ModalHeader.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { vstack } from '@cerberus/styled-system/patterns'
+import { cx } from 'styled-system/css'
+import { vstack } from 'styled-system/patterns'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/ModalHeading.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { modal } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { modal } from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/NavMenuLink.tsx

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
-import { css, cx } from '@cerberus/styled-system/css'
+import { css, cx } from 'styled-system/css'
 import { Show } from '../Show'
 
 /**
@@ -19,7 +19,7 @@ export interface NavMenuLinkProps
 /**
  * @deprecated use the {@link Menu} family instead
  */
-export function NavMenuLink(props: NavMenuLinkProps): JSX.Element {
+export function NavMenuLink(props: NavMenuLinkProps) {
   const { as, ...nativeProps } = props
   const hasAs = Boolean(as)
   const AsSub: ElementType = as!

package/src/components/deprecated/NavMenuList.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useMemo, type HTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { vstack } from '@cerberus/styled-system/patterns'
+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'
@@ -114,7 +114,7 @@ export interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {
  * </NavMenu>
  * ```
  **/
-export function NavMenuList(props: NavMenuListProps): JSX.Element {
+export function NavMenuList(props: NavMenuListProps) {
   const { position, ...nativeProps } = props
   const { menuRef, expanded } = useNavMenuContext()
   const locationStyles = useMemo(

package/src/components/deprecated/NavMenuTrigger.tsx

@@ -6,8 +6,8 @@ import {
   type ElementType,
   type MouseEvent,
 } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { button } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { button } from 'styled-system/recipes'
 import {
   createNavTriggerProps,
   type NavTriggerAriaValues,
@@ -39,7 +39,7 @@ export interface NavMenuTriggerProps
 /**
  * @deprecated use the {@link Menu} family instead
  */
-export function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {
+export function NavMenuTrigger(props: NavMenuTriggerProps) {
   const {
     as,
     palette,

package/src/components/deprecated/Notification.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { cx } from '@cerberus/styled-system/css'
-import { hstack, vstack } from '@cerberus/styled-system/patterns'
+import { cx } from 'styled-system/css'
+import { hstack, vstack } from 'styled-system/patterns'
 import {
   notification,
   type NotificationVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import {
   useRef,
   type DialogHTMLAttributes,
@@ -50,7 +50,7 @@ export type NotificationProps = NotificationBaseProps & NotificationVariantProps
  */
 export function Notification(props: PropsWithChildren<NotificationProps>) {
   const { children, palette, onClose, ...nativeProps } = props
-  const ref = useRef<HTMLDialogElement>(null)
+  const ref = useRef<HTMLDialogElement | null>(null)
 
   const onKeyDown = trapFocus(ref)
   const styles = notification({ palette })

package/src/components/deprecated/NotificationDescription.tsx

@@ -1,8 +1,8 @@
-import { cx } from '@cerberus/styled-system/css'
+import { cx } from 'styled-system/css'
 import {
   notification,
   type NotificationVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/NotificationHeading.tsx

@@ -1,8 +1,8 @@
-import { cx } from '@cerberus/styled-system/css'
+import { cx } from 'styled-system/css'
 import {
   notification,
   type NotificationVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

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

@@ -4,8 +4,8 @@ import { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'
 import { useCerberusContext } from '../../context/cerberus'
 import { IconButton } from '../IconButton'
 import { DialogCloseTrigger } from './primitives'
-import { dialog } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { dialog } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 
 /**
  * This module contains the close trigger for the dialog.

package/src/components/dialog/dialog.tsx

@@ -1,5 +1,5 @@
 import type { DialogContentProps } from '@ark-ui/react/dialog'
-import type { DialogVariantProps } from '@cerberus/styled-system/recipes'
+import type { DialogVariantProps } from 'styled-system/recipes'
 import { Portal } from '../Portal'
 import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
 

package/src/components/dialog/primitives.tsx

@@ -8,11 +8,8 @@ import {
   type DialogTitleProps,
   type DialogTriggerProps,
 } from '@ark-ui/react/dialog'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  dialog,
-  type DialogVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { dialog, type DialogVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains the primitives of the Dialog component.

package/src/components/field/field.tsx

@@ -6,7 +6,7 @@ import {
   FieldLabel,
   FieldRoot,
 } from './primitives'
-import { HStack } from '@cerberus/styled-system/jsx'
+import { HStack } from 'styled-system/jsx'
 import { Show } from '../Show'
 
 export interface FieldProps extends FieldRootProps {
@@ -56,16 +56,16 @@ export function Field(props: FieldProps) {
 
   return (
     <FieldRoot {...statusProps} {...rootProps}>
-      <Show when={Boolean(fieldProps.label)}>
+      <Show when={fieldProps.label}>
         <FieldLabel>{fieldProps.label}</FieldLabel>
       </Show>
 
       {fieldProps.children}
 
-      <Show when={Boolean(fieldProps.helperText && !statusProps.invalid)}>
+      <Show when={fieldProps.helperText && !statusProps.invalid}>
         <HStack justifyContent="space-between" w="full">
           <FieldHelperText>{fieldProps.helperText}</FieldHelperText>
-          <Show when={Boolean(fieldProps.secondaryHelperText)}>
+          <Show when={fieldProps.secondaryHelperText}>
             <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
           </Show>
         </HStack>

package/src/components/field/primitives.tsx

@@ -7,8 +7,8 @@ import {
   type FieldTextareaProps,
 } from '@ark-ui/react/field'
 import type { ReactNode } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { field, type FieldVariantProps } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { field, type FieldVariantProps } from 'styled-system/recipes'
 import { FieldStatusIndicator } from './status-indicator'
 import { FieldStartIndicator } from './start-indicator'
 

package/src/components/field/start-indicator.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { field } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { field } from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 export type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>

package/src/components/field/status-indicator.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useFieldContext } from '@ark-ui/react'
-import { cx } from '@cerberus/styled-system/css'
-import { field } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { field } from 'styled-system/recipes'
 import { useCerberusContext } from '../../context/cerberus'
 import type { HTMLAttributes, ReactNode } from 'react'
 

package/src/components/fieldset/fieldset.tsx

@@ -1,7 +1,7 @@
 import type { FieldsetRootProps } from '@ark-ui/react'
 import { splitProps } from '../../utils'
 import { FieldsetParts } from './parts'
-import type { FieldsetVariantProps } from '@cerberus/styled-system/recipes'
+import type { FieldsetVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains the Fieldset component.

package/src/components/fieldset/primitives.tsx

@@ -4,11 +4,8 @@ import {
   type FieldsetLegendProps,
   type FieldsetRootProps,
 } from '@ark-ui/react/fieldset'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  fieldset,
-  type FieldsetVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { fieldset, type FieldsetVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains all the primitives of the Fieldset component.

package/src/components/for.tsx

@@ -34,5 +34,5 @@ export function For<T extends readonly unknown[], U extends JSX.Element>(
     return props.fallback || null
   }
 
-  return props.each?.map(props.children) as ReactNode
+  return <>{props.each?.map(props.children) as ReactNode}</>
 }

package/src/components/notifications/center.tsx

@@ -1,7 +1,11 @@
 'use client'
 
-import { createToaster, Toaster } from '@ark-ui/react/toast'
-import { Box } from '@cerberus/styled-system/jsx'
+import {
+  createToaster,
+  Toaster,
+  type CreateToasterReturn,
+} from '@ark-ui/react/toast'
+import { Box } from 'styled-system/jsx'
 import { Button, type ButtonProps } from '../button/button'
 import { Show } from '../Show'
 import { NotificationParts } from './parts'
@@ -14,7 +18,7 @@ import { ToastCloseTrigger } from './close-trigger'
  * @module 'notification/center'
  */
 
-export const toaster = createToaster({
+export const toaster: CreateToasterReturn = createToaster({
   gap: 16,
   overlap: true,
   placement: 'top-end',
@@ -38,7 +42,7 @@ export function NotificationCenter() {
             <NotificationParts.Description>
               {toast.description}
             </NotificationParts.Description>
-            <Show when={Boolean(toast.action)}>
+            <Show when={toast.action}>
               <NotificationParts.ActionTrigger asChild>
                 <Button
                   palette={toast.type as ButtonProps['palette']}

package/src/components/notifications/match-icon.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { toast } from '@cerberus/styled-system/recipes'
+import { toast } from 'styled-system/recipes'
 import { useCerberusContext } from '../../context/cerberus'
 import { Spinner } from '../Spinner'
 import type { NotifyOptions } from './types'

package/src/components/notifications/primitives.tsx

@@ -3,18 +3,21 @@ import {
   Toaster,
   type ToastActionTriggerProps,
   type ToastCloseTriggerProps,
+  type ToasterProps,
   type ToastRootProps,
   type ToastTitleProps,
 } from '@ark-ui/react/toast'
-import { cx } from '@cerberus/styled-system/css'
-import { toast } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { toast } from 'styled-system/recipes'
 
 /**
  * This module contains the primitives of the Notification component.
  * @module 'notification/primitives'
  */
 
-export const NotificationProvider = Toaster
+export function NotificationProvider(props: ToasterProps) {
+  return <Toaster {...props} />
+}
 
 /**
  * The context provider for the Notification component.