@cerberus-design/react 0.18.4 → 0.19.0

package/src/components/menu/primitives.ts

@@ -0,0 +1,93 @@
+import {
+  Menu as ArkMenu,
+  type MenuRootProps as ArkMenuRootProps,
+  type MenuTriggerProps as ArkMenuTriggerProps,
+  type MenuTriggerItemProps as ArkMenuTriggerItemProps,
+  type MenuIndicatorProps as ArkMenuIndicatorProps,
+  type MenuPositionerProps as ArkMenuPositionerProps,
+  type MenuContentProps as ArkMenuContentProps,
+  type MenuItemProps as ArkMenuItemProps,
+  type MenuItemGroupProps as ArkMenuItemGroupProps,
+  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,
+  type MenuSeparatorProps as ArkMenuSeparatorProps,
+} from '@ark-ui/react'
+import { menu } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+
+/**
+ * This module contains the Menu component primitives.
+ * @module @cerberus-design/react/components/menu/primitives
+ */
+
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)
+
+// Root
+
+export type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>
+// @ts-expect-error this is a workaround for the type mismatch
+export const MenuRoot = withSlotRecipe<MenuRootProps>(ArkMenu.Root, 'root')
+
+// Trigger
+
+export type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>
+export const MenuTriggerEl = withNoRecipe<MenuTriggerProps>(ArkMenu.Trigger)
+
+// TriggerItem
+
+export type MenuTriggerItemProps =
+  CerberusPrimitiveProps<ArkMenuTriggerItemProps>
+export const MenuTriggerItem = withNoRecipe<MenuTriggerItemProps>(
+  ArkMenu.TriggerItem,
+)
+
+// Indicator
+
+export type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>
+export const MenuIndicator = withNoRecipe<MenuIndicatorProps>(ArkMenu.Indicator)
+
+// Positioner
+
+export type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>
+export const MenuPositioner = withNoRecipe<MenuPositionerProps>(
+  ArkMenu.Positioner,
+)
+
+// Content
+
+export type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>
+export const MenuContentEl = withSlotRecipe<MenuContentProps>(
+  ArkMenu.Content,
+  'content',
+)
+
+// Item
+
+export type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>
+export const MenuItemEl = withSlotRecipe<MenuItemProps>(ArkMenu.Item, 'item')
+
+// ItemGroup
+
+export type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>
+export const MenuItemGroupEl = withNoRecipe<MenuItemGroupProps>(
+  ArkMenu.ItemGroup,
+)
+
+// ItemGroupLabel
+
+export type MenuItemGroupLabelProps =
+  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>
+export const MenuItemGroupLabelEl = withSlotRecipe<MenuItemGroupLabelProps>(
+  ArkMenu.ItemGroupLabel,
+  'itemGroupLabel',
+)
+
+// Separator
+
+export type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>
+export const MenuSeparatorEl = withSlotRecipe<MenuSeparatorProps>(
+  ArkMenu.Separator,
+  'separator',
+)

package/src/components/notifications/center.tsx

@@ -7,7 +7,7 @@ import {
 } from '@ark-ui/react/toast'
 import { Box } from 'styled-system/jsx'
 import { Button, type ButtonProps } from '../button/button'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 import { NotificationParts } from './parts'
 import type { NotifyOptions, UseNotificationCenterReturn } from './types'
 import { MatchNotificationIcon } from './match-icon'

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

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

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

@@ -1,10 +1,10 @@
 'use client'
 
+import { ark } from '@ark-ui/react/factory'
 import { toast } from 'styled-system/recipes'
 import { useCerberusContext } from '../../context/cerberus'
-import { Spinner } from '../Spinner'
+import { Spinner } from '../spinner/index'
 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

package/src/components/notifications/primitives.tsx

@@ -3,75 +3,68 @@ import {
   Toaster,
   type ToastActionTriggerProps,
   type ToastCloseTriggerProps,
+  type ToastDescriptionProps,
   type ToasterProps,
   type ToastRootProps,
   type ToastTitleProps,
 } from '@ark-ui/react/toast'
-import { cx } from 'styled-system/css'
 import { toast } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the primitives of the Notification component.
  * @module 'notification/primitives'
  */
 
-export function NotificationProvider(props: ToasterProps) {
-  return <Toaster {...props} />
-}
+const { withSlotRecipe } = createCerberusPrimitive(toast)
 
-/**
- * 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)} />
-}
+// Toaster
 
-/**
- * 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)} />
-  )
-}
+export type NotificationProviderProps = ToasterProps
+export const NotificationProvider = Toaster
 
-/**
- * The description of the Notification component.
- */
-export function NotificationDescription(props: ToastTitleProps) {
-  const styles = toast()
-  return (
-    <Toast.Description
-      {...props}
-      className={cx(styles.description, props.className)}
-    />
-  )
-}
+// Root
 
-/**
- * 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)}
-    />
+export type NotificationRootProps = CerberusPrimitiveProps<ToastRootProps>
+export const NotificationRoot = withSlotRecipe<NotificationRootProps>(
+  Toast.Root,
+  'root',
+)
+
+// Heading
+
+export type NotificationHeadingProps = CerberusPrimitiveProps<ToastTitleProps>
+export const NotificationHeading = withSlotRecipe<NotificationHeadingProps>(
+  Toast.Title,
+  'title',
+)
+
+// Description
+
+export type NotificationDescriptionProps =
+  CerberusPrimitiveProps<ToastDescriptionProps>
+export const NotificationDescription =
+  withSlotRecipe<NotificationDescriptionProps>(Toast.Description, 'description')
+
+// Close Trigger
+
+export type NotificationCloseTriggerProps =
+  CerberusPrimitiveProps<ToastCloseTriggerProps>
+export const NotificationCloseTrigger =
+  withSlotRecipe<NotificationCloseTriggerProps>(
+    Toast.CloseTrigger,
+    'closeTrigger',
   )
-}
 
-/**
- * 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)}
-    />
+// Action Trigger
+
+export type NotificationActionTriggerProps =
+  CerberusPrimitiveProps<ToastActionTriggerProps>
+export const NotificationActionTrigger =
+  withSlotRecipe<NotificationActionTriggerProps>(
+    Toast.ActionTrigger,
+    'actionTrigger',
   )
-}

package/src/components/portal/index.ts

@@ -0,0 +1 @@
+export * from './portal'

package/src/components/portal/portal.tsx

@@ -0,0 +1,28 @@
+import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'
+
+/**
+ * This module is the Portal component.
+ * @module
+ */
+
+export type { PortalProps }
+
+/**
+ * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ * @see https://cerberus.digitalu.design/react/portal
+ * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)
+ * @example
+ * ```tsx
+ * 'use client'
+ *
+ * import { Portal } from '@cerberus/react'
+ *
+ * function SomeFeatureWithinSSRPage() {
+ *   return (
+ *     <Portal>
+ *       <div>Portal Content outside of the React VDom tree</div>
+ *     </Portal>
+ *   )
+ * }
+ */
+export const Portal = ArkPortal

package/src/components/progress/index.ts

@@ -0,0 +1,2 @@
+export * from './primitives'
+export * from './progress-bar'

package/src/components/progress/primitives.ts

@@ -0,0 +1,43 @@
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import {
+  progressBar,
+  type ProgressBarVariantProps,
+} from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+
+/**
+ * This module contains the ProgressBar component primitives.
+ * @module @cerberus-design/react/components/progress-bar/primitives
+ */
+
+const { withSlotRecipe } = createCerberusPrimitive(progressBar)
+
+// Root
+
+export type ProgressBarRootProps = CerberusPrimitiveProps<
+  HTMLArkProps<'div'> & ProgressBarVariantProps
+>
+export const ProgressBarRoot = withSlotRecipe<ProgressBarRootProps>(
+  ark.div,
+  'root',
+  {
+    defaultProps: {
+      'aria-valuemin': '0',
+      'aria-valuemax': '100',
+      role: 'progressbar',
+    },
+  },
+)
+
+// Bar
+
+export type ProgressBarBarProps = CerberusPrimitiveProps<
+  HTMLArkProps<'div'> & ProgressBarVariantProps
+>
+export const ProgressBarBar = withSlotRecipe<ProgressBarBarProps>(
+  ark.div,
+  'bar',
+)

package/src/components/progress/progress-bar.tsx

@@ -0,0 +1,80 @@
+import {
+  ProgressBarBar,
+  ProgressBarRoot,
+  type ProgressBarRootProps,
+} from './primitives'
+
+/**
+ * This module contains the ProgressBar component.
+ * @module
+ */
+
+export type NonIndeterminateProgressBarProps = {
+  /**
+   * A unique identifier for the progress bar. Required for accessibility.
+   */
+  id: string
+  /**
+   * A description label for the progress bar. Required for accessibility.
+   */
+  label: string
+  /**
+   * The state of the progress bar.
+   */
+  indeterminate?: never
+  /**
+   * The current value of the progress bar.
+   */
+  now: number
+}
+export type IndeterminateProgressBarProps = {
+  /**
+   * A unique identifier for the progress bar. Required for accessibility.
+   */
+  id: string
+  /**
+   * A description label for the progress bar. Required for accessibility.
+   */
+  label: string
+  /**
+   * The state of the progress bar.
+   */
+  indeterminate?: true
+  /**
+   * The current value of the progress bar.
+   */
+  now?: never
+}
+export type ProgressBarProps = ProgressBarRootProps &
+  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)
+
+/**
+ * The ProgressBar component is used to display the progress of a task.
+ * @see https://cerberus.digitalu.design/react/progress-indicators
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} />
+ * ```
+ */
+export function ProgressBar(props: ProgressBarProps) {
+  const { indeterminate, now, label, ...nativeProps } = props
+
+  const nowClamped = Math.min(100, Math.max(0, now || 0))
+  const width = {
+    width: indeterminate ? '50%' : `${nowClamped}%`,
+  }
+
+  return (
+    <ProgressBarRoot
+      {...nativeProps}
+      aria-label={label}
+      aria-valuenow={indeterminate ? 0 : nowClamped}
+    >
+      <ProgressBarBar
+        {...(indeterminate && { 'data-state': 'indeterminate' })}
+        data-complete={nowClamped === 100}
+        style={width}
+      />
+    </ProgressBarRoot>
+  )
+}

package/src/components/radio/primitives.tsx

@@ -1,120 +1,102 @@
 import {
   RadioGroup as ArkRadioGroup,
-  type RadioGroupIndicatorProps,
-  type RadioGroupItemControlProps,
-  type RadioGroupItemHiddenInputProps,
-  type RadioGroupItemProps,
-  type RadioGroupItemTextProps,
-  type RadioGroupLabelProps,
-  type RadioGroupRootProps,
+  type RadioGroupIndicatorProps as ArkRadioGroupIndicatorProps,
+  type RadioGroupItemControlProps as ArkRadioGroupItemControlProps,
+  type RadioGroupItemHiddenInputProps as ArkRadioGroupItemHiddenInputProps,
+  type RadioGroupItemProps as ArkRadioGroupItemProps,
+  type RadioGroupItemTextProps as ArkRadioGroupItemTextProps,
+  type RadioGroupLabelProps as ArkRadioGroupLabelProps,
+  type RadioGroupRootProps as ArkRadioGroupRootProps,
 } from '@ark-ui/react/radio-group'
-import { cx } from 'styled-system/css'
 import { radioGroup, type RadioGroupVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the Radio primitives
  * @module 'react/radio'
  */
 
-/**
- * The RadioGroupRoot component is used to group radio buttons together.
- */
-export function RadioGroupRoot(
-  props: RadioGroupRootProps & RadioGroupVariantProps,
-) {
-  const { size, orientation, ...rootProps } = props
-  const styles = radioGroup({ size, orientation })
-  return (
-    <ArkRadioGroup.Root
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-    />
-  )
-}
+const { withSlotRecipe } = createCerberusPrimitive(radioGroup)
 
-/**
- * The RadioGroupLabel component is used to label a group of radio buttons.
- */
-export function RadioGroupLabel(props: RadioGroupLabelProps) {
-  const styles = radioGroup()
-  return (
-    <ArkRadioGroup.Label
-      {...props}
-      className={cx(styles.label, props.className)}
-    />
-  )
-}
+// Root
 
-/**
- * The RadioGroupIndicator component is used to indicate the selected radio
- * button in a group.
- */
-export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
-  const styles = radioGroup()
-  return (
-    <ArkRadioGroup.Indicator
-      {...props}
-      className={cx(styles.indicator, props.className)}
-    />
-  )
-}
+export type RadioGroupRootProps = CerberusPrimitiveProps<
+  ArkRadioGroupRootProps & RadioGroupVariantProps
+>
+// @ts-expect-error this is a workaround for the type WIP
+export const RadioGroupRoot = withSlotRecipe<RadioGroupRootProps>(
+  ArkRadioGroup.Root,
+  'root',
+)
 
-/**
- * The RadioGroupItem component is used to render a single radio button in a
- * group.
- */
-export function RadioGroupItem(props: RadioGroupItemProps) {
-  const styles = radioGroup()
-  return (
-    <ArkRadioGroup.Item
-      {...props}
-      className={cx(styles.item, props.className)}
-    />
-  )
-}
+// Label
 
-/**
- * The RadioGroupItemText component is used to render the text label for a
- * single radio button in a group.
- */
-export function RadioGroupItemText(
-  props: RadioGroupItemTextProps & RadioGroupVariantProps,
-) {
-  const { size, orientation, ...itemTextProps } = props
-  const styles = radioGroup({ size, orientation })
-  return (
-    <ArkRadioGroup.ItemText
-      {...itemTextProps}
-      className={cx(styles.itemText, itemTextProps.className)}
-    />
-  )
-}
+export type RadioGroupLabelProps =
+  CerberusPrimitiveProps<ArkRadioGroupLabelProps>
+export const RadioGroupLabel = withSlotRecipe<RadioGroupLabelProps>(
+  ArkRadioGroup.Label,
+  'label',
+)
 
-/**
- * The RadioGroupItemControl component is used to render the control for a
- * single radio button in a group.
- */
-export function RadioGroupItemControl(
-  props: RadioGroupItemControlProps & RadioGroupVariantProps,
-) {
-  const { size, orientation, ...itemControlProps } = props
-  const styles = radioGroup({ size, orientation })
-  return (
-    <ArkRadioGroup.ItemControl
-      {...itemControlProps}
-      className={cx(styles.itemControl, itemControlProps.className)}
-    />
-  )
-}
+// Indicator
+
+export type RadioGroupIndicatorProps =
+  CerberusPrimitiveProps<ArkRadioGroupIndicatorProps>
+export const RadioGroupIndicator = withSlotRecipe<RadioGroupIndicatorProps>(
+  ArkRadioGroup.Indicator,
+  'indicator',
+)
+
+// Item
+
+export type RadioGroupItemProps = CerberusPrimitiveProps<ArkRadioGroupItemProps>
+export const RadioGroupItem = withSlotRecipe<RadioGroupItemProps>(
+  ArkRadioGroup.Item,
+  'item',
+)
+
+// Item Text
+
+export type RadioGroupItemTextProps = CerberusPrimitiveProps<
+  ArkRadioGroupItemTextProps & RadioGroupVariantProps
+>
+export const RadioGroupItemText = withSlotRecipe<RadioGroupItemTextProps>(
+  ArkRadioGroup.ItemText,
+  'itemText',
+)
+
+// Item Control
+
+export type RadioGroupItemControlProps = CerberusPrimitiveProps<
+  ArkRadioGroupItemControlProps & RadioGroupVariantProps
+>
+export const RadioGroupItemControl = withSlotRecipe<RadioGroupItemControlProps>(
+  ArkRadioGroup.ItemControl,
+  'itemControl',
+)
+
+// Item Hidden Input
+
+export type RadioGroupItemHiddenInputProps = ArkRadioGroupItemHiddenInputProps
+export const RadioGroupItemHiddenInput = ArkRadioGroup.ItemHiddenInput
 
 /**
- * The RadioGroupItemHiddenInput component is used to render the hidden input
- * for a single radio button in a group.
+ * The context provider for a set of radio buttons.
+ * It provides the necessary context for managing the state of the radio group.
+ * @see {@link https://cerberus.digitalu.design/react/radio/overview}
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup } from '@cerberus/react/radio';
+ *
+ * <RadioGroup defaultValue="cerberus">
+ *   <Radio value="cerberus">Cerberus</Radio>
+ *   <Radio value="hades">Hades</Radio>
+ *   <Radio value="zeus">Zeus</Radio>
+ * </RadioGroup>
+ * ```
  */
-export function RadioGroupItemHiddenInput(
-  props: RadioGroupItemHiddenInputProps,
-) {
-  return <ArkRadioGroup.ItemHiddenInput {...props} />
-}
-
 export const RadioGroup = RadioGroupRoot