@cerberus-design/react 0.16.0-next-d049636 → 0.17.0-next-e7f9956

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

@@ -0,0 +1,54 @@
+'use client'
+
+import type { DatePickerViewControlProps } from '@ark-ui/react/date-picker'
+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'
+
+/**
+ * This private module contains an abstraction of the DatePickerViewControl
+ * primitive.
+ * @module 'date-picker/view-control-group'
+ */
+
+/**
+ * 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)
+ */
+export function DatePickerViewControlGroup(props: DatePickerViewControlProps) {
+  const { icons } = useCerberusContext()
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons
+
+  return (
+    <DatePickerParts.ViewControl {...props}>
+      <DatePickerParts.PrevTrigger asChild>
+        <IconButton ariaLabel="Previous" size="sm">
+          <PrevIcon />
+        </IconButton>
+      </DatePickerParts.PrevTrigger>
+
+      <DatePickerParts.ViewTrigger asChild>
+        <Button
+          className={css({
+            h: '2rem',
+            paddingInline: 'md',
+          })}
+          shape="rounded"
+          size="sm"
+          usage="ghost"
+        >
+          <DatePickerParts.RangeText />
+        </Button>
+      </DatePickerParts.ViewTrigger>
+
+      <DatePickerParts.NextTrigger asChild>
+        <IconButton ariaLabel="Next" size="sm">
+          <NextIcon />
+        </IconButton>
+      </DatePickerParts.NextTrigger>
+    </DatePickerParts.ViewControl>
+  )
+}

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

@@ -0,0 +1,49 @@
+'use client'
+
+import type {
+  DatePickerViewProps,
+  UseDatePickerContext,
+} from '@ark-ui/react/date-picker'
+import { DatePickerParts } from './parts'
+import { DatePickerViewControlGroup } from './view-control-group'
+
+/**
+ * This private module contains an abstraction of the DatePickerYearView
+ * component.
+ * @module 'date-picker/year-view'
+ */
+
+/**
+ * An abstraction of the DatePickerYearView that renders the year view of the
+ * DatePicker.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ */
+export function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <DatePickerParts.View {...props} view="year">
+      <DatePickerParts.Context>
+        {(datePicker: UseDatePickerContext) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerParts.Table>
+              <DatePickerParts.TableBody>
+                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
+                  <DatePickerParts.TableRow key={id}>
+                    {years.map((year, id) => (
+                      <DatePickerParts.TableCell key={id} value={year.value}>
+                        <DatePickerParts.TableCellTrigger>
+                          {year.label}
+                        </DatePickerParts.TableCellTrigger>
+                      </DatePickerParts.TableCell>
+                    ))}
+                  </DatePickerParts.TableRow>
+                ))}
+              </DatePickerParts.TableBody>
+            </DatePickerParts.Table>
+          </>
+        )}
+      </DatePickerParts.Context>
+    </DatePickerParts.View>
+  )
+}

package/src/components/{Legend.tsx → deprecated/Legend.tsx}

@@ -1,11 +1,11 @@
 '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 { type HTMLAttributes } from 'react'
-import { Show } from './Show'
-import { useFieldContext } from '@ark-ui/react/field'
+import { Show } from '../Show'
 
 /**
  * This module contains the Fieldset component.
@@ -15,38 +15,7 @@ import { useFieldContext } from '@ark-ui/react/field'
 export type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
 
 /**
- * A component to provide a global label for a group of related elements in a form (for accessibility).
- * @memberof Fieldset
- * @see https://cerberus.digitalu.com/react/fieldset
- * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
- * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
- * @example
- * ```tsx
- * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
- * import { Hstack } from '@cerberus/styled-system/jsx'
- *
- * function SomeForm() {
- *   return (
- *    <form>
- *     <Fieldset>
- *      <Legend>Do you like cats?</Legend>
- *      <Hstack>
- *        <Field>
- *          <Radio id="yes" name="cats" value="yes" />
- *          <Label htmlFor="yes">Yes</Label>
- *        </Field>
- *      </Hstack>
- *      <Hstack>
- *        <Field>
- *         <Radio id="no" name="cats" value="no" />
- *         <Label htmlFor="no">No</Label>
- *        </Field>
- *      </Hstack>
- *     </Fieldset>
- *    </form>
- *   )
- * }
- * ```
+ * @deprecated use Fieldset instead
  */
 export function Legend(props: LegendProps) {
   const { size, ...nativeProps } = props

package/src/components/{Notification.tsx → 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'
+import { useCerberusContext } from '../../context/cerberus'
 
 /**
  * This module exports the Notification component.
@@ -46,19 +46,7 @@ export interface NotificationBaseProps
 export type NotificationProps = NotificationBaseProps & NotificationVariantProps
 
 /**
- * A static Notification component that displays a message to the user. This
- * is typically only used when not utilizing the NotificationCenter.
- * @see https://cerberus.digitalu.design/react/notification
- * @memberof module:NotificationCenter
- * @example
- * ```tsx
- * <Notification id="info:1" open>
- *  <NotificationHeading>Info Notification</NotificationHeading>
- *  <NotificationDescription>
- *   This is a description with a <a href="#">link</a> in the message.
- *  </NotificationDescription>
- * </Notification>
- * ```
+ * @deprecated use `NotificationParts` instead
  */
 export function Notification(props: PropsWithChildren<NotificationProps>) {
   const { children, palette, onClose, ...nativeProps } = props

package/src/components/{NotificationDescription.tsx → deprecated/NotificationDescription.tsx}

@@ -16,10 +16,7 @@ export type NotificationDescriptionProps = BaseNotificationDescriptionProps &
   NotificationVariantProps
 
 /**
- * Used to render the description of a notification.
- * @see https://cerberus.digitalu.design/react/notification
- * @memberof module:NotificationCenter
- * @param props - The anything a HTMLParagraphElement can accept.
+ * @deprecated use `NotificationParts` instead
  */
 export function NotificationDescription(props: NotificationDescriptionProps) {
   const { palette, ...nativeProps } = props

package/src/components/{NotificationHeading.tsx → deprecated/NotificationHeading.tsx}

@@ -15,10 +15,7 @@ export type NotificationHeadingProps = BaseNotificationHeadingProps &
   NotificationVariantProps
 
 /**
- * Used to render the heading of a notification.
- * @see https://cerberus.digitalu.design/react/notification
- * @memberof module:NotificationCenter
- * @param props - The anything a HTMLParagraphElement can accept.
+ * @deprecated use `NotificationParts` instead
  */
 export function NotificationHeading(props: NotificationHeadingProps) {
   const { palette, ...nativeProps } = props

package/src/components/notifications/center.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { createToaster, Toaster } from '@ark-ui/react/toast'
+import { Box } from '@cerberus/styled-system/jsx'
+import { Button, type ButtonProps } from '../button/button'
+import { Show } from '../Show'
+import { NotificationParts } from './parts'
+import type { NotifyOptions, UseNotificationCenterReturn } from './types'
+import { MatchNotificationIcon } from './match-icon'
+import { ToastCloseTrigger } from './close-trigger'
+
+/**
+ * This module contains an abstraction of the Notification parts.
+ * @module 'notification/center'
+ */
+
+export const toaster = createToaster({
+  gap: 16,
+  overlap: true,
+  placement: 'top-end',
+})
+
+/**
+ * The NotificationCenter component is an abstraction for the Notification
+ * component. It manages displaying all the toasts in the center.
+ */
+export function NotificationCenter() {
+  return (
+    <Toaster toaster={toaster}>
+      {(toast) => (
+        <NotificationParts.Root key={toast.id}>
+          <MatchNotificationIcon
+            type={toast.type as NotifyOptions['palette']}
+          />
+
+          <Box flex="1" paddingBlock="sm">
+            <NotificationParts.Heading>{toast.title}</NotificationParts.Heading>
+            <NotificationParts.Description>
+              {toast.description}
+            </NotificationParts.Description>
+            <Show when={Boolean(toast.action)}>
+              <NotificationParts.ActionTrigger asChild>
+                <Button
+                  palette={toast.type as ButtonProps['palette']}
+                  usage="ghost"
+                  size="sm"
+                >
+                  {toast.action?.label}
+                </Button>
+              </NotificationParts.ActionTrigger>
+            </Show>
+          </Box>
+
+          <ToastCloseTrigger />
+        </NotificationParts.Root>
+      )}
+    </Toaster>
+  )
+}
+
+/**
+ * @deprecated use `toaster` instead
+ */
+export function useNotificationCenter(): UseNotificationCenterReturn {
+  function notify(options: NotifyOptions) {
+    toaster.create({
+      title: options.heading,
+      description: options.description,
+      type: options.palette,
+      action: options.action,
+    })
+  }
+  return { ...toaster, notify }
+}

package/src/components/notifications/close-trigger.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import type { ToastCloseTriggerProps } from '@ark-ui/react/toast'
+import { useCerberusContext } from '../../context/cerberus'
+import { NotificationParts } from './parts'
+
+/**
+ * This private module contains a abstraction of the close trigger primitive.
+ * @module 'notification/close-trigger'
+ */
+
+export function ToastCloseTrigger(props: ToastCloseTriggerProps) {
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon } = icons
+
+  return (
+    <NotificationParts.CloseTrigger {...props}>
+      <CloseIcon />
+    </NotificationParts.CloseTrigger>
+  )
+}

package/src/components/notifications/index.ts

@@ -0,0 +1,4 @@
+export * from './parts'
+export * from './primitives'
+export * from './center'
+export * from './types'

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

@@ -0,0 +1,37 @@
+'use client'
+
+import { toast } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import { Spinner } from '../Spinner'
+import type { NotifyOptions } from './types'
+import { ark } from '@ark-ui/react/factory'
+
+/**
+ * This private module contains a component that returns the correct icon for a
+ * notification based on the palette. If there is no result, it is assumed to
+ * be a 'loading' type.
+ * @module 'notification/match-icon'
+ */
+
+interface MatchNotificationIconProps {
+  type?: NotifyOptions['palette']
+}
+
+export function MatchNotificationIcon(props: MatchNotificationIconProps) {
+  const { icons } = useCerberusContext()
+  const type = props.type || 'info'
+  const styles = toast()
+
+  const key = `${type}Notification` as keyof typeof icons
+  const Icon = icons[key] || ToastLoadingIcon
+
+  return (
+    <ark.div className={styles.icon}>
+      <Icon />
+    </ark.div>
+  )
+}
+
+function ToastLoadingIcon() {
+  return <Spinner size="1rem" />
+}

package/src/components/notifications/parts.ts

@@ -0,0 +1,53 @@
+import type { ElementType } from 'react'
+import {
+  NotificationActionTrigger,
+  NotificationCloseTrigger,
+  NotificationDescription,
+  NotificationHeading,
+  NotificationRoot,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Notification parts.
+ * @module 'notification/parts'
+ */
+
+interface NotificationPartsValue {
+  /**
+   * The context provider of the notification.
+   */
+  Root: ElementType
+  /**
+   * The title heading of the notification.
+   */
+  Heading: ElementType
+  /**
+   * The description of the notification.
+   */
+  Description: ElementType
+  /**
+   * The close button of the notification.
+   */
+  CloseTrigger: ElementType
+  /**
+   * The action trigger of the notification.
+   */
+  ActionTrigger: ElementType
+}
+
+/**
+ * An Object containing the parts of the Notification components. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the NotificationParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const NotificationParts: NotificationPartsValue = {
+  Root: NotificationRoot,
+  Heading: NotificationHeading,
+  Description: NotificationDescription,
+  CloseTrigger: NotificationCloseTrigger,
+  ActionTrigger: NotificationActionTrigger,
+}

package/src/components/notifications/primitives.tsx

@@ -0,0 +1,74 @@
+import {
+  Toast,
+  Toaster,
+  type ToastActionTriggerProps,
+  type ToastCloseTriggerProps,
+  type ToastRootProps,
+  type ToastTitleProps,
+} from '@ark-ui/react/toast'
+import { cx } from '@cerberus/styled-system/css'
+import { toast } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Notification component.
+ * @module 'notification/primitives'
+ */
+
+export const NotificationProvider = Toaster
+
+/**
+ * The context provider for the Notification component.
+ */
+export function NotificationRoot(props: ToastRootProps) {
+  const styles = toast()
+  return <Toast.Root {...props} className={cx(styles.root, props.className)} />
+}
+
+/**
+ * The title heading of the Notification component.
+ */
+export function NotificationHeading(props: ToastTitleProps) {
+  const styles = toast()
+  return (
+    <Toast.Title {...props} className={cx(styles.title, props.className)} />
+  )
+}
+
+/**
+ * The description of the Notification component.
+ */
+export function NotificationDescription(props: ToastTitleProps) {
+  const styles = toast()
+  return (
+    <Toast.Description
+      {...props}
+      className={cx(styles.description, props.className)}
+    />
+  )
+}
+
+/**
+ * The close button of the Notification component.
+ */
+export function NotificationCloseTrigger(props: ToastCloseTriggerProps) {
+  const styles = toast()
+  return (
+    <Toast.CloseTrigger
+      {...props}
+      className={cx(styles.closeTrigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The action trigger of the Notification component.
+ */
+export function NotificationActionTrigger(props: ToastActionTriggerProps) {
+  const styles = toast()
+  return (
+    <Toast.ActionTrigger
+      {...props}
+      className={cx(styles.actionTrigger, props.className)}
+    />
+  )
+}

package/src/components/notifications/types.ts

@@ -0,0 +1,32 @@
+import type { CreateToasterReturn } from '@ark-ui/react/toast'
+import type { ReactNode } from 'react'
+
+export interface NotifyOptions {
+  /**
+   * The palette of the notification.
+   * @default 'info'
+   */
+  palette?: 'info' | 'success' | 'warning' | 'error' | 'loading'
+  /**
+   * The heading of the notification.
+   */
+  heading: string
+  /**
+   * The description of the notification.
+   */
+  description?: ReactNode
+  /**
+   * The action to take when the notification is closed
+   */
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+export type UseNotificationCenterReturn = CreateToasterReturn & {
+  /**
+   * @deprecated use `create` instead
+   */
+  notify: (options: NotifyOptions) => void
+}

package/src/components/switch/parts.ts

@@ -8,8 +8,8 @@ import {
 } from './primitives'
 
 /**
- * This module contains the parts of the Radio parts.
- * @module 'radio/parts'
+ * This module contains the parts of the Switch parts.
+ * @module 'switch/parts'
  */
 
 interface SwitchPartsValue {
@@ -36,7 +36,7 @@ interface SwitchPartsValue {
 }
 
 /**
- * An Object containing the parts of the Radio component. For users that
+ * An Object containing the parts of the Switch component. For users that
  * prefer Object component syntax.
  *
  * @remarks

package/src/components/table/index.ts

@@ -0,0 +1,3 @@
+export * from './parts'
+export * from './primitives'
+export * from './table'

package/src/components/table/parts.ts

@@ -0,0 +1,83 @@
+import type { ElementType } from 'react'
+import {
+  TableRoot,
+  Thead,
+  Th,
+  Tbody,
+  Tr,
+  Td,
+  Tfoot,
+  TableEl,
+  Caption,
+  TableTrigger,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Table parts.
+ * @module 'table/parts'
+ */
+
+export interface TablePartsValue {
+  /**
+   * The container of the table.
+   */
+  Root: ElementType
+  /**
+   * The table element.
+   */
+  Table: ElementType
+  /**
+   * The table caption element.
+   */
+  Caption: ElementType
+  /**
+   * The table head element.
+   */
+  Header: ElementType
+  /**
+   * The table header cell element.
+   */
+  HeaderCol: ElementType
+  /**
+   * The table body element.
+   */
+  Body: ElementType
+  /**
+   * The table row element.
+   */
+  Row: ElementType
+  /**
+   * The table cell element.
+   */
+  Cell: ElementType
+  /**
+   * The table footer element.
+   */
+  Footer: ElementType
+  /**
+   * The table trigger element.
+   */
+  Trigger: ElementType
+}
+
+/**
+ * An Object containing the parts of the Table component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TableParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const TableParts: TablePartsValue = {
+  Root: TableRoot,
+  Table: TableEl,
+  Caption: Caption,
+  Header: Thead,
+  HeaderCol: Th,
+  Body: Tbody,
+  Row: Tr,
+  Cell: Td,
+  Footer: Tfoot,
+  Trigger: TableTrigger,
+}