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

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/rating/index.ts

@@ -0,0 +1,8 @@
+export * from './parts'
+export * from './primitives'
+export * from './rating'
+
+export type {
+  UseRatingGroupContext,
+  UseRatingGroupItemContext,
+} from '@ark-ui/react/rating-group'

package/src/components/rating/parts.tsx

@@ -0,0 +1,65 @@
+import type { ElementType } from 'react'
+import {
+  RatingContext,
+  RatingControl,
+  RatingHiddenInput,
+  RatingItem,
+  RatingItemContext,
+  RatingLabel,
+  RatingRoot,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Rating component.
+ * @module 'rating/parts'
+ */
+
+interface RatingPartsValue {
+  /**
+   * The container of the rating.
+   */
+  Root: ElementType
+  /**
+   * The label of the rating.
+   */
+  Label: ElementType
+  /**
+   * The visual representation of the rating.
+   */
+  Control: ElementType
+  /**
+   * The context of the rating.
+   */
+  Context: ElementType
+  /**
+   * The item to display for the rating.
+   */
+  Item: ElementType
+  /**
+   * The context provider for the rating items.
+   */
+  ItemContext: ElementType
+  /**
+   * The native input of the rating.
+   */
+  HiddenInput: ElementType
+}
+
+/**
+ * An Object containing the parts of the Rating component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the RatingParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const RatingParts: RatingPartsValue = {
+  Root: RatingRoot,
+  Label: RatingLabel,
+  Control: RatingControl,
+  Context: RatingContext,
+  Item: RatingItem,
+  ItemContext: RatingItemContext,
+  HiddenInput: RatingHiddenInput,
+}

package/src/components/rating/primitives.tsx

@@ -0,0 +1,99 @@
+import {
+  RatingGroup,
+  type RatingGroupContextProps,
+  type RatingGroupControlProps,
+  type RatingGroupHiddenInputProps,
+  type RatingGroupItemContextProps,
+  type RatingGroupItemProps,
+  type RatingGroupLabelProps,
+  type RatingGroupRootProps,
+} from '@ark-ui/react/rating-group'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  ratingGroup,
+  type RatingGroupVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Rating component.
+ * @module 'rating/primitives'
+ */
+
+/**
+ * The root primitive of the Rating component.
+ */
+export function RatingRoot(
+  props: RatingGroupRootProps & RatingGroupVariantProps,
+) {
+  const { orientation, size, ...rootProps } = props
+  const styles = ratingGroup({ orientation, size })
+  return (
+    <RatingGroup.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The label primitive of the Rating component.
+ */
+export function RatingLabel(props: RatingGroupLabelProps) {
+  const styles = ratingGroup()
+  return (
+    <RatingGroup.Label
+      {...props}
+      className={cx(styles.label, props.className)}
+    />
+  )
+}
+
+/**
+ * The control primitive of the Rating component.
+ */
+export function RatingControl(props: RatingGroupControlProps) {
+  const styles = ratingGroup()
+  return (
+    <RatingGroup.Control
+      {...props}
+      className={cx(styles.control, props.className)}
+    />
+  )
+}
+
+/**
+ * The context primitive of the Rating component.
+ */
+export function RatingContext(props: RatingGroupContextProps) {
+  return <RatingGroup.Context {...props} />
+}
+
+/**
+ * The item primitive of the Rating component.
+ */
+export function RatingItem(
+  props: RatingGroupItemProps & RatingGroupVariantProps,
+) {
+  const { palette, ...itemProps } = props
+  const styles = ratingGroup({ palette })
+  return (
+    <RatingGroup.Item
+      {...itemProps}
+      className={cx(styles.item, itemProps.className)}
+    />
+  )
+}
+
+/**
+ * The item context primitive of the Rating component.
+ */
+export function RatingItemContext(props: RatingGroupItemContextProps) {
+  return <RatingGroup.ItemContext {...props} />
+}
+
+/**
+ * The hidden input primitive of the Rating component.
+ */
+export function RatingHiddenInput(props: RatingGroupHiddenInputProps) {
+  return <RatingGroup.HiddenInput {...props} />
+}

package/src/components/rating/rating.tsx

@@ -0,0 +1,78 @@
+import type {
+  RatingGroupRootProps,
+  UseRatingGroupContext,
+  UseRatingGroupItemContext,
+} from '@ark-ui/react/rating-group'
+import type { RatingGroupVariantProps } from '@cerberus/styled-system/recipes'
+import type { ReactNode } from 'react'
+import { splitProps } from '../../utils/index'
+import { Show } from '../Show'
+import { RatingParts } from './parts'
+
+/**
+ * This module contains the abstracted Rating component.
+ * @module 'react/rating'
+ */
+
+export interface RatingProps
+  extends Omit<RatingGroupRootProps, 'children'>,
+    RatingGroupVariantProps {
+  /**
+   * The label of the rating component.
+   */
+  label?: string
+  /**
+   * The children of the rating component.
+   */
+  children: (context: UseRatingGroupItemContext) => ReactNode
+}
+
+/**
+ * The Rating component is an abstraction of the primitives which provides a
+ * visual rating system for a user to select a value.
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/react/rating)
+ * @description [Ark Docs](https://ark-ui.com/react/docs/components/rating-group#api-reference)
+ * @example
+ * ```tsx
+ * <Rating count={5} defaultValue={3} allowHalf>
+ *  {({ half, highlighted }) => {
+ *   if (half) return <StarHalfIcon fill="current" />
+ *   if (highlighted) return <StarIcon fill="current" />
+ *   return <StarIcon />
+ *  }}
+ * </Rating>
+ * ```
+ */
+export function Rating(props: RatingProps) {
+  const [{ label }, styleProps, rootProps] = splitProps(
+    props,
+    ['label'],
+    ['orientation', 'palette', 'size'],
+  )
+
+  return (
+    <RatingParts.Root {...styleProps} {...rootProps}>
+      <Show when={Boolean(label)}>
+        <RatingParts.Label>{label}</RatingParts.Label>
+      </Show>
+
+      <RatingParts.Control>
+        <RatingParts.Context>
+          {(context: UseRatingGroupContext) =>
+            context.items.map((item) => (
+              <RatingParts.Item
+                key={item}
+                index={item}
+                palette={styleProps.palette}
+              >
+                <RatingParts.ItemContext>
+                  {rootProps.children}
+                </RatingParts.ItemContext>
+              </RatingParts.Item>
+            ))
+          }
+        </RatingParts.Context>
+      </RatingParts.Control>
+    </RatingParts.Root>
+  )
+}

package/src/components/select/select.tsx

@@ -79,6 +79,7 @@ export type SelectProps = SelectRootProps<SelectCollectionItem> &
  */
 export function Select(props: SelectProps) {
   const { collection, placeholder, ...rootProps } = props
+
   const { icons } = useCerberusContext()
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
 

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,
+}

package/src/components/table/primitives.tsx

@@ -0,0 +1,163 @@
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import { cx } from '@cerberus/styled-system/css'
+import { table, type TableVariantProps } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Table component.
+ * @module 'table/primitives'
+ */
+
+/**
+ * The root element is the container of the Table.
+ */
+export function TableRoot(props: HTMLArkProps<'div'> & TableVariantProps) {
+  const { decoration, size, ...rootProps } = props
+  const styles = table({
+    decoration,
+    size,
+  })
+
+  return (
+    <ark.div
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+      data-scope="table"
+      data-part="root"
+    />
+  )
+}
+
+/**
+ * The table element is the table itself.
+ */
+export function TableEl(props: HTMLArkProps<'table'>) {
+  const styles = table()
+  return (
+    <ark.table
+      {...props}
+      className={cx(styles.table, props.className)}
+      data-scope="table"
+      data-part="table"
+    />
+  )
+}
+
+/**
+ * The table caption element is the caption of the table.
+ */
+export function Caption(props: HTMLArkProps<'caption'>) {
+  const styles = table()
+  return (
+    <ark.caption
+      {...props}
+      className={cx(styles.caption, props.className)}
+      data-scope="table"
+      data-part="caption"
+    />
+  )
+}
+
+/**
+ * The table head element is the head of the table.
+ */
+export function Thead(props: HTMLArkProps<'thead'>) {
+  const styles = table()
+  return (
+    <ark.thead
+      {...props}
+      className={cx(styles.thead, props.className)}
+      data-scope="table"
+      data-part="header"
+    />
+  )
+}
+
+/**
+ * The table header cell element is the header cell of the table.
+ */
+export function Th(props: HTMLArkProps<'th'>) {
+  const styles = table()
+  return (
+    <ark.th
+      {...props}
+      className={cx(styles.th, props.className)}
+      data-scope="table"
+      data-part="header-col"
+    />
+  )
+}
+
+/**
+ * The table body element is the body of the table.
+ */
+export function Tbody(props: HTMLArkProps<'tbody'>) {
+  const styles = table()
+  return (
+    <ark.tbody
+      {...props}
+      className={cx(styles.tbody, props.className)}
+      data-scope="table"
+      data-part="body"
+    />
+  )
+}
+
+/**
+ * The table row element is the row of the table.
+ */
+export function Tr(props: HTMLArkProps<'tr'>) {
+  const styles = table()
+  return (
+    <ark.tr
+      {...props}
+      className={cx(styles.tr, props.className)}
+      data-scope="table"
+      data-part="row"
+    />
+  )
+}
+
+/**
+ * The table cell element is the cell of the table.
+ */
+export function Td(props: HTMLArkProps<'td'>) {
+  const styles = table()
+  return (
+    <ark.td
+      {...props}
+      className={cx(styles.td, props.className)}
+      data-scope="table"
+      data-part="cell"
+    />
+  )
+}
+
+/**
+ * The table footer element is the footer of the table.
+ */
+export function Tfoot(props: HTMLArkProps<'tfoot'>) {
+  const styles = table()
+  return (
+    <ark.tfoot
+      {...props}
+      className={cx(styles.tfoot, props.className)}
+      data-scope="table"
+      data-part="footer"
+    />
+  )
+}
+
+/**
+ * The table trigger element is the trigger of an actionable th cell.
+ */
+export function TableTrigger(props: HTMLArkProps<'button'>) {
+  const styles = table()
+  return (
+    <ark.button
+      {...props}
+      className={cx(styles.trigger, props.className)}
+      data-scope="table"
+      data-part="trigger"
+    />
+  )
+}