@cerberus-design/react 0.22.0 → 0.24.0

package/src/components/collapsible/parts.ts

@@ -0,0 +1,47 @@
+import type { ElementType } from 'react'
+import {
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsibleIndicator,
+  CollapsibleContent,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Collapsible component.
+ * @module 'collapsible/parts'
+ */
+
+interface CollapsiblePartsValue {
+  /**
+   * The context provider of the collapsible.
+   */
+  Root: ElementType
+  /**
+   * The button that toggles the collapsible.
+   */
+  Trigger: ElementType
+  /**
+   * The indicator that shows the state of the collapsible.
+   */
+  Indicator: ElementType
+  /**
+   * The content of the collapsible.
+   */
+  Content: ElementType
+}
+
+/**
+ * An Object containing the parts of the Collapsible component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the CollapsibleParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const Collapsible: CollapsiblePartsValue = {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Indicator: CollapsibleIndicator,
+  Content: CollapsibleContent,
+}

package/src/components/collapsible/primitives.tsx

@@ -0,0 +1,47 @@
+import {
+  Collapsible,
+  type CollapsibleRootProps as ArkCollapsibleRootProps,
+  type CollapsibleTriggerProps as ArkCollapsibleTriggerProps,
+  type CollapsibleIndicatorProps as ArkCollapsibleIndicatorProps,
+  type CollapsibleContentProps as ArkCollapsibleContentProps,
+} from '@ark-ui/react/collapsible'
+import {
+  collapsible,
+  type CollapsibleVariantProps,
+} from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+
+/**
+ * This module contains all the primitives of the Collapsible component.
+ * @module 'collapsible'
+ */
+
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(collapsible)
+
+// Root
+
+export type CollapsibleRootProps =
+  CerberusPrimitiveProps<ArkCollapsibleRootProps>
+export const CollapsibleRoot = withNoRecipe(Collapsible.Root)
+
+// Trigger
+
+export type CollapsibleTriggerProps =
+  CerberusPrimitiveProps<ArkCollapsibleTriggerProps>
+export const CollapsibleTrigger = withNoRecipe(Collapsible.Trigger)
+
+// Indicator
+
+export type CollapsibleIndicatorProps =
+  CerberusPrimitiveProps<ArkCollapsibleIndicatorProps>
+export const CollapsibleIndicator = withNoRecipe(Collapsible.Indicator)
+
+// Content
+
+export type CollapsibleContentProps = CerberusPrimitiveProps<
+  ArkCollapsibleContentProps & CollapsibleVariantProps
+>
+export const CollapsibleContent = withSlotRecipe(Collapsible.Content, 'content')

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

@@ -104,7 +104,12 @@ export function CTAModal(props: PropsWithChildren<object>) {
     <CTAModalContext.Provider value={value}>
       {props.children}
 
-      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
+      <DialogProvider
+        lazyMount
+        open={open}
+        onOpenChange={(e) => setOpen(e.open)}
+        unmountOnExit
+      >
         <Dialog
           size="sm"
           style={{

package/src/components/field/field.tsx

@@ -1,5 +1,6 @@
 import { type FieldRootProps } from '@ark-ui/react/field'
 import { HStack } from 'styled-system/jsx'
+import type { CerberusPrimitiveProps } from '../../system/types'
 import { splitProps } from '../../utils/index'
 import { Show } from '../show/index'
 import {
@@ -52,7 +53,7 @@ export interface FieldProps extends FieldRootProps {
  * </Field>
  * ```
  */
-export function Field(props: FieldProps) {
+export function Field(props: CerberusPrimitiveProps<FieldProps>) {
   const [statusProps, fieldProps, rootProps] = splitProps(
     props,
     ['disabled', 'required', 'readOnly', 'invalid'],

package/src/components/file-upload/file-status.tsx

@@ -96,7 +96,7 @@ export function FileStatus(props: FileStatusProps) {
   const palette = useMemo(() => getPalette(status), [status])
   const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])
   const styles = useMemo(() => {
-    switch (status) {
+    switch (status as processStatus) {
       case processStatus.TODO:
         return fileStatus({ status: 'todo' })
       case processStatus.PROCESSING:
@@ -190,7 +190,7 @@ function MatchFileStatusIcon(props: FileStatusElProps) {
     successNotification: DoneIcon,
   } = icons
 
-  switch (props.status) {
+  switch (props.status as processStatus) {
     case processStatus.TODO:
       return <TodoIcon size={props.size} />
     case processStatus.PROCESSING:
@@ -205,7 +205,7 @@ function MatchFileStatusIcon(props: FileStatusElProps) {
 }
 
 function MatchFileStatusText(props: FileStatusElProps) {
-  switch (props.status) {
+  switch (props.status as processStatus) {
     case processStatus.TODO:
       return 'Waiting to upload'
     case processStatus.PROCESSING:
@@ -222,7 +222,7 @@ function MatchFileStatusText(props: FileStatusElProps) {
 function MatchStatusAction(props: FileStatusElProps) {
   const { icons } = useCerberusContext()
   const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons
-  switch (props.status) {
+  switch (props.status as processStatus) {
     case processStatus.TODO:
     case processStatus.PROCESSING:
       return <CloseIcon />

package/src/components/icon-button/button.tsx

@@ -5,23 +5,35 @@ import { IconButtonRoot, type IconButtonRootProps } from './primitives'
  * @module
  */
 
-export interface IconButtonProps extends IconButtonRootProps {
+type NonClipboardIconButtonProps = {
   /**
    * The aria-label attribute for the icon button.
    */
   ariaLabel: string
+  clipboard?: never
 }
 
+type ClipboardIconButtonProps = {
+  ariaLabel?: never
+  /**
+   * If true, the icon button is used as a clipboard trigger.
+   * In this case, the aria-label defaults to "Copy to clipboard".
+   */
+  clipboard: true
+}
+
+export type IconButtonProps = IconButtonRootProps &
+  (NonClipboardIconButtonProps | ClipboardIconButtonProps)
 /**
  * A component that allows the user to perform actions using an icon
  * @see https://cerberus.digitalu.design/react/icon-button
  */
 export function IconButton(props: IconButtonProps) {
-  const { ariaLabel, ...rootProps } = props
+  const { ariaLabel, clipboard, ...rootProps } = props
   return (
     <IconButtonRoot
       {...rootProps}
-      aria-label={ariaLabel ?? 'Icon Button'}
+      {...(!clipboard && { 'aria-label': ariaLabel })}
       data-scope="icon-button"
       data-part="root"
     />

package/src/components/menu/primitives.ts

@@ -48,7 +48,7 @@ export const MenuIndicator = withNoRecipe(ArkMenu.Indicator)
 // Positioner
 
 export type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>
-export const MenuPositioner = withNoRecipe(ArkMenu.Positioner)
+export const MenuPositioner = withSlotRecipe(ArkMenu.Positioner, 'positioner')
 
 // Content
 

package/src/components/notifications/center.tsx

@@ -1,10 +1,6 @@
 'use client'
 
-import {
-  createToaster,
-  Toaster,
-  type CreateToasterReturn,
-} from '@ark-ui/react/toast'
+import { 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/index'
@@ -16,29 +12,30 @@ import type {
 } from './types'
 import { MatchNotificationIcon } from './match-icon'
 import { ToastCloseTrigger } from './close-trigger'
+import { toaster } from './toaster'
 
 /**
  * This module contains an abstraction of the Notification parts.
  * @module 'notification/center'
  */
 
-export const toaster: CreateToasterReturn = createToaster({
-  gap: 16,
-  overlap: true,
-  placement: 'top-end',
-})
-
 export function getEmphasis(type: NotifyOptionsType) {
   return type.includes('subtle') ? 'low' : 'high'
 }
 
+export interface NotificationCenterProps {
+  toaster?: CreateToasterReturn
+}
+
 /**
  * The NotificationCenter component is an abstraction for the Notification
  * component. It manages displaying all the toasts in the center.
  */
-export function NotificationCenter() {
+export function NotificationCenter(props: NotificationCenterProps) {
+  const cachedToaster = props.toaster || toaster
+
   return (
-    <Toaster toaster={toaster}>
+    <Toaster toaster={cachedToaster}>
       {(toast) => (
         <NotificationParts.Root
           key={toast.id}

package/src/components/notifications/index.ts

@@ -2,3 +2,4 @@ export * from './parts'
 export * from './primitives'
 export * from './center'
 export * from './types'
+export * from './toaster'

package/src/components/notifications/toaster.ts

@@ -0,0 +1,13 @@
+'use client'
+
+import { createToaster, type CreateToasterReturn } from '@ark-ui/react/toast'
+
+export const toaster: CreateToasterReturn = createToaster({
+  gap: 16,
+  overlap: true,
+  placement: 'top-end',
+})
+
+// Re-exporting for easier customization
+
+export { createToaster, Toaster } from '@ark-ui/react/toast'

package/src/components/show/show.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactNode } from 'react'
+import { type ReactNode } from 'react'
 
 /**
  * This module contains the Show component.
@@ -6,6 +6,12 @@ import { type PropsWithChildren, type ReactNode } from 'react'
  */
 
 export interface ShowProps<T> {
+  /**
+   * The children to render when the condition is true.
+   * This can be a ReactNode or a function that returns a ReactNode. Passing a
+   * function will lazy render the children only when needed.
+   */
+  children: ReactNode | (() => ReactNode)
   /**
    * The condition to render memoized children or the fallback content.
    */
@@ -26,16 +32,17 @@ export interface ShowProps<T> {
  *   <Dashboard />
  * </Show>
  */
-export function Show<T>(props: PropsWithChildren<ShowProps<T>>) {
+export function Show<T>(props: ShowProps<T>) {
   const { when, children, fallback } = props
 
   if (when) {
+    if (typeof children === 'function') {
+      return <>{children()}</>
+    }
     return <>{children}</>
   }
 
-  if (fallback) {
-    return <>{fallback}</>
-  }
+  if (fallback) return <>{fallback}</>
 
   return null
 }

package/src/components/split-button/button.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import type { PropsWithChildren } from 'react'
 import { useCerberusContext } from '../../context/cerberus'
 import { splitProps } from '../../utils'
-import { Button, ButtonGroup, type ButtonProps } from '../button/index'
+import { ButtonGroup, ButtonParts, type ButtonProps } from '../button/index'
 import { IconButton } from '../icon-button/index'
 import { Menu, MenuTrigger, MenuContent } from '../menu/index'
+import type { CerberusPrimitiveProps } from '../../system/types'
 
 /**
  * This module provides an abstraction for a SplitButton component.
@@ -13,6 +13,9 @@ import { Menu, MenuTrigger, MenuContent } from '../menu/index'
  */
 
 export interface SplitButtonProps extends ButtonProps {
+  /** T
+   * he text for the primary action button.
+   */
   actionText: string
 }
 
@@ -21,7 +24,7 @@ export interface SplitButtonProps extends ButtonProps {
  * dropdown menu for additional actions.
  * @definition [Cerberus docs](https://cerberus.digitalu.designdocs/components/split-button)
  */
-export function SplitButton(props: PropsWithChildren<SplitButtonProps>) {
+export function SplitButton(props: CerberusPrimitiveProps<SplitButtonProps>) {
   const [elProps, { usage = 'filled', actionText }, actionProps] = splitProps(
     props,
     ['children'],
@@ -35,21 +38,24 @@ export function SplitButton(props: PropsWithChildren<SplitButtonProps>) {
 
   return (
     <ButtonGroup layout="attached" shape={actionProps.shape}>
-      <Button usage={usage} {...actionProps}>
+      <ButtonParts.Root usage={usage} {...actionProps}>
+        <ButtonParts.Icon />
         {actionText}
-      </Button>
+      </ButtonParts.Root>
 
       <Menu>
         <MenuTrigger>
           <IconButton
             ariaLabel="More options"
             palette={actionProps.palette}
+            disabled={actionProps.pending}
             shape={iconShape}
             usage={usage}
           >
             <SelectArrow />
           </IconButton>
         </MenuTrigger>
+
         <MenuContent>{elProps.children}</MenuContent>
       </Menu>
     </ButtonGroup>

package/src/components/tag/closable.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { type ButtonHTMLAttributes } from 'react'
+import { useCerberusContext } from '../../context/cerberus'
+import { IconButton, type IconButtonProps } from '../icon-button'
+import { TagRoot, TagRootProps } from './primitives'
+
+export interface ClosableTagProps extends TagRootProps {
+  /**
+   * The action to be performed when the close button is clicked.
+   */
+  onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick']
+}
+
+export function ClosableTag(props: ClosableTagProps) {
+  const { onClick, children, ...rootProps } = props
+
+  const { icons } = useCerberusContext()
+  const { close: Close } = icons
+
+  const palette =
+    rootProps.palette === 'page'
+      ? 'secondaryAction'
+      : (rootProps.palette ?? 'secondaryAction')
+
+  return (
+    <TagRoot
+      data-palette={palette}
+      palette={palette}
+      shape="pill"
+      pe="0"
+      {...rootProps}
+    >
+      {children}
+
+      <IconButton
+        ariaLabel="Close"
+        onClick={onClick}
+        palette={palette as IconButtonProps['palette']}
+        usage="filled"
+        size="sm"
+      >
+        <Close />
+      </IconButton>
+    </TagRoot>
+  )
+}

package/src/components/tag/index.ts

@@ -1 +1,2 @@
+export * from './primitives'
 export * from './tag'

package/src/components/tag/primitives.ts

@@ -0,0 +1,19 @@
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+import { tag, type TagVariantProps } from 'styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+const { withRecipe } = createCerberusPrimitive(tag)
+
+export type TagRootProps = CerberusPrimitiveProps<
+  Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> & TagVariantProps
+>
+
+export const TagRoot = withRecipe('span', {
+  defaultProps: {
+    'data-scope': 'tag',
+    'data-part': 'root',
+  },
+})

package/src/components/tag/tag.tsx

@@ -1,108 +1,39 @@
-'use client'
+import type { PropsWithChildren } from 'react'
+import { TagRoot, type TagRootProps } from './primitives'
+import { ClosableTag, type ClosableTagProps } from './closable'
 
-import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import type { MouseEventHandler, PropsWithChildren } from 'react'
-import { css, cx } from 'styled-system/css'
-import { tag, type TagVariantProps } from 'styled-system/recipes'
-import { useCerberusContext } from '../../context/cerberus'
-import { IconButton } from '../icon-button/index'
-import { Show } from '../show/index'
-
-/**
- * This module contains the tag component.
- * @module
- */
-
-export type StaticTagProps = HTMLArkProps<'span'> &
-  TagVariantProps & {
-    /**
-     * The action to be performed when the tag is clicked. Not available when
-     * the palette or gradient props are provided.
-     */
-    onClick?: never
-  }
-
-export type ClickableTagProps = HTMLArkProps<'span'> & {
-  /**
-   * The gradient to apply to the tag. Not available when the onClick prop is
-   * provided.
-   */
-  gradient?: never
-  /**
-   * The palette to use for the tag. Not available when the onClick prop is
-   * provided.
-   */
-  palette?: never
-  /**
-   * The action to be performed when the tag is clicked.
-   */
-  onClick: MouseEventHandler<HTMLSpanElement>
-  /**
-   * The shape of the tag. Not available when the onClick prop is provided.
-   * @type 'pill' | 'rounded'
-   * @default 'pill'
-   */
-  shape?: never
-  /**
-   * The usage of the tag. Not available when the onClick prop is provided.
-   * @type 'filled' | 'outlined'
-   * @default 'filled'
-   */
-  usage?: never
+function isClosableTag(props: TagProps): props is ClosableTagProps {
+  return 'onClick' in props && typeof props.onClick !== 'undefined'
 }
 
-export type TagProps = StaticTagProps | ClickableTagProps
+// Component
+
+export type TagProps = TagRootProps | ClosableTagProps
 
 /**
  * The Tag component is used to display a meta descriptions.
- * @see https://cerberus.digitalu.design/react/tag
+ * @see https://cerberus.digitalu.design/docs/components/tag
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
  * ```
  */
 export function Tag(props: PropsWithChildren<TagProps>) {
-  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
-  const palette = props?.palette ?? 'page'
-  const isClosable = Boolean(onClick)
-  const shape = isClosable ? 'pill' : initShape
-  const closableStyles = isClosable ? closableCss : ''
-  const { icons } = useCerberusContext()
-  const { close: Close } = icons
+  const { children } = props
+
+  if (isClosableTag(props)) {
+    const { onClick, ...rootProps } = props
+    return (
+      <ClosableTag onClick={onClick} {...rootProps}>
+        {children}
+      </ClosableTag>
+    )
+  }
 
+  const rootProps = props as TagRootProps
   return (
-    <ark.span
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        tag({
-          gradient,
-          palette,
-          shape,
-          usage,
-        }),
-        closableStyles,
-      )}
-    >
-      {props.children}
-
-      <Show when={isClosable}>
-        <IconButton
-          ariaLabel="Close"
-          onClick={onClick}
-          palette="action"
-          usage="filled"
-          size="sm"
-        >
-          <Close />
-        </IconButton>
-      </Show>
-    </ark.span>
+    <TagRoot data-palette={rootProps.palette ?? 'page'} {...rootProps}>
+      {children}
+    </TagRoot>
   )
 }
-
-const closableCss = css({
-  bgColor: 'action.bg.active',
-  color: 'action.text.initial',
-  paddingInlineEnd: '0',
-})

package/src/config/icons/checkbox.icons.tsx

@@ -39,3 +39,60 @@ export function IndeterminateIcon() {
     </svg>
   )
 }
+
+/**
+ * Animated checkmark icon for Clipboard.Indicator component
+ */
+export function AnimatedCheckmarkIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeDasharray={24}
+        strokeDashoffset={24}
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M5 11l6 6l10 -10"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.28s"
+          values="24;0"
+        ></animate>
+      </path>
+    </svg>
+  )
+}
+
+/**
+ * Copy icon for Clipboard.Indicator component
+ */
+export function CopyIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+      viewBox="0 0 32 32"
+    >
+      <title>copy</title>
+      <path
+        d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"
+        fill="currentColor"
+      />
+      <path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor" />
+      <path
+        fill="none"
+        d="M0 0h32v32H0z"
+        data-name="&lt;Transparent Rectangle&gt;"
+      />
+    </svg>
+  )
+}

package/src/context/confirm-modal.tsx

@@ -178,7 +178,12 @@ export function ConfirmModal(
     <ConfirmModalContext.Provider value={value}>
       {props.children}
 
-      <DialogProvider open={open} onOpenChange={handleOpenChange}>
+      <DialogProvider
+        lazyMount
+        open={open}
+        onOpenChange={handleOpenChange}
+        unmountOnExit
+      >
         <Dialog
           size="sm"
           style={{