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

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/admonition/index'\nexport * from './components/accordion/index'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/combobox/index'\nexport * from './components/cta-dialog/index'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/dialog/index'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './components/deprecated/Legend'\nexport * from './context/confirm-modal'\nexport * from './context/prompt-modal'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/admonition/index'\nexport * from './components/accordion/index'\nexport * from './components/avatar/index'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/combobox/index'\nexport * from './components/cta-dialog/index'\nexport * from './components/date-picker/index'\nexport * from './components/dialog/index'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Menu'\nexport * from './components/notifications/index'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/table/index'\nexport * from './components/tabs/index'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,cAAc;","names":[]}

package/build/modern/types.d.ts

@@ -0,0 +1 @@
+export { Positions_alias_1 as Positions } from './_tsup-dts-rollup.js';

package/build/modern/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { formatNotifyCount_alias_1 as formatNotifyCount } from '../_tsup-dts-rollup.js';
+export { splitProps_alias_1 as splitProps } from '../_tsup-dts-rollup.js';
+export { getLocalStorage_alias_1 as getLocalStorage } from '../_tsup-dts-rollup.js';
+export { setLocalStorage_alias_1 as setLocalStorage } from '../_tsup-dts-rollup.js';

package/build/modern/utils/localStorage.d.ts

@@ -0,0 +1,2 @@
+export { getLocalStorage_alias_2 as getLocalStorage } from '../_tsup-dts-rollup.js';
+export { setLocalStorage_alias_2 as setLocalStorage } from '../_tsup-dts-rollup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.16.0-next-d049636",
+  "version": "0.17.0-next-e7f9956",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -8,14 +8,12 @@
   "main": "build/legacy/index.cjs",
   "module": "build/modern/index.js",
   "peerDependencies": {
-    "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@*",
     "@pandacss/dev": "*",
     "react": "*",
     "react-dom": "*"
   },
   "dependencies": {
-    "@ark-ui/react": "^4.4.0",
+    "@ark-ui/react": "^4.9.2",
     "@dnd-kit/core": "^6.1.0"
   },
   "devDependencies": {
@@ -24,9 +22,9 @@
     "@types/react-dom": "^18",
     "react": "^18",
     "react-dom": "^18",
-    "tsup": "^8.1.0",
+    "tsup": "^8.4.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-d049636"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.17.0-next-e7f9956"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AnimatingUploadIcon.tsx

@@ -55,8 +55,8 @@ export function AnimatingUploadIcon(props: AnimatingUploadIconProps) {
         <svg
           aria-hidden="true"
           xmlns="http://www.w3.org/2000/svg"
-          width="0.8em"
-          height="0.8em"
+          width="1.1em"
+          height="1.1em"
           x="27%"
           y="27%"
           viewBox="0 0 24 24"

package/src/components/FileStatus.tsx

@@ -15,7 +15,7 @@ import { hstack, vstack } from '@cerberus/styled-system/patterns'
 import { useCerberusContext } from '../context/cerberus'
 import { ProgressBar, type ProgressBarProps } from './ProgressBar'
 import { IconButton } from './IconButton'
-import { Avatar } from './Avatar'
+import { Avatar } from './avatar/avatar'
 import { Field, FieldHelperText } from './field/index'
 
 /**
@@ -129,10 +129,8 @@ export function FileStatus(props: FileStatusProps) {
       className={cx(nativeProps.className, styles.root, hstack())}
     >
       <Avatar
-        ariaLabel=""
         gradient={modalIconPalette}
-        icon={<MatchFileStatusIcon size={24} status={status} />}
-        src=""
+        fallback={<MatchFileStatusIcon size={24} status={status} />}
       />
 
       <div

package/src/components/FileUploader.tsx

@@ -6,7 +6,7 @@ import { type InputHTMLAttributes } from 'react'
 import { Show } from './Show'
 import { fileUploader } from '@cerberus/styled-system/recipes'
 import { useCerberusContext } from '../context/cerberus'
-import { Avatar } from './Avatar'
+import { Avatar } from './avatar/avatar'
 
 export interface FileUploaderProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -44,13 +44,7 @@ export function FileUploader(props: FileUploaderProps) {
       )}
     >
       <div className={styles.icon}>
-        <Avatar
-          gradient="charon-light"
-          ariaLabel=""
-          icon={<Icon />}
-          size="md"
-          src=""
-        />
+        <Avatar gradient="charon-light" fallback={<Icon />} />
       </div>
 
       <label

package/src/components/IconButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes } from 'react'
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import { cx } from '@cerberus/styled-system/css'
 import {
   iconButton,
@@ -10,8 +10,7 @@ import {
  * @module
  */
 
-export interface IconButtonRawProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonRawProps extends HTMLArkProps<'button'> {
   /**
    * The aria-label attribute for the icon button.
    */
@@ -26,7 +25,7 @@ export type IconButtonProps = IconButtonRawProps & IconButtonVariantProps
 export function IconButton(props: IconButtonProps): JSX.Element {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props
   return (
-    <button
+    <ark.button
       {...nativeProps}
       aria-label={ariaLabel ?? 'Icon Button'}
       className={cx(

package/src/components/ProgressBar.tsx

@@ -1,16 +1,16 @@
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import { cx } from '@cerberus/styled-system/css'
 import {
   progressBar,
   type ProgressBarVariantProps,
 } from '@cerberus/styled-system/recipes'
-import type { HTMLAttributes } from 'react'
 
 /**
  * This module contains the ProgressBar component.
  * @module
  */
 
-export type ProgressBarBaseProps = HTMLAttributes<HTMLDivElement>
+export type ProgressBarBaseProps = HTMLArkProps<'div'>
 export type NonIndeterminateProgressBarProps = {
   /**
    * A unique identifier for the progress bar. Required for accessibility.
@@ -68,7 +68,7 @@ export function ProgressBar(props: ProgressBarProps) {
   }
 
   return (
-    <div
+    <ark.div
       {...nativeProps}
       aria-label={label}
       aria-valuemin={0}
@@ -77,12 +77,12 @@ export function ProgressBar(props: ProgressBarProps) {
       className={cx(nativeProps.className, styles.root)}
       role="progressbar"
     >
-      <div
+      <ark.div
         {...(indeterminate && { 'data-indeterminate': true })}
         data-complete={nowClamped === 100}
         className={styles.bar}
         style={width}
       />
-    </div>
+    </ark.div>
   )
 }

package/src/components/Tag.tsx

@@ -1,25 +1,19 @@
 'use client'
 
-import type {
-  HTMLAttributes,
-  MouseEventHandler,
-  PropsWithChildren,
-} from 'react'
-import { Show } from './Show'
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
 import { css, cx } from '@cerberus/styled-system/css'
-import {
-  iconButton,
-  tag,
-  type TagVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { tag, type TagVariantProps } from '@cerberus/styled-system/recipes'
 import { useCerberusContext } from '../context/cerberus'
+import { Show } from './Show'
+import { IconButton } from './IconButton'
 
 /**
  * This module contains the tag component.
  * @module
  */
 
-export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
+export type StaticTagProps = HTMLArkProps<'span'> &
   TagVariantProps & {
     /**
      * The action to be performed when the tag is clicked. Not available when
@@ -28,7 +22,7 @@ export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
     onClick?: never
   }
 
-export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+export type ClickableTagProps = HTMLArkProps<'span'> & {
   /**
    * The gradient to apply to the tag. Not available when the onClick prop is
    * provided.
@@ -67,7 +61,7 @@ export type TagProps = StaticTagProps | ClickableTagProps
  * <Tag>Tag</Tag>
  * ```
  */
-export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
+export function Tag(props: PropsWithChildren<TagProps>) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
   const palette = props?.palette ?? 'page'
   const isClosable = Boolean(onClick)
@@ -77,7 +71,7 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
   const { close: Close } = icons
 
   return (
-    <span
+    <ark.span
       {...nativeProps}
       className={cx(
         nativeProps.className,
@@ -93,19 +87,17 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
       {props.children}
 
       <Show when={isClosable}>
-        <button
-          aria-label="Close"
-          className={iconButton({
-            palette: 'action',
-            usage: 'filled',
-            size: 'sm',
-          })}
+        <IconButton
+          ariaLabel="Close"
           onClick={onClick}
+          palette="action"
+          usage="filled"
+          size="sm"
         >
           <Close />
-        </button>
+        </IconButton>
       </Show>
-    </span>
+    </ark.span>
   )
 }
 

package/src/components/admonition/match-avatar.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
-import { useCerberusContext } from '../../context/cerberus'
-import { Avatar } from '../Avatar'
 import { useRef, type ReactNode } from 'react'
+import { useCerberusContext } from '../../context/cerberus'
+import { Avatar } from '../avatar/avatar'
 
 /**
  * This module provides a component for creating the admonition indicator.
@@ -33,50 +33,18 @@ export function MatchAvatar(props: MatchAvatarProps) {
 
   // cache the el since the result is static and the component is client side
   const elRef = useRef<AvatarRefProps>({
-    page: (
-      <Avatar
-        gradient="charon-light"
-        ariaLabel=""
-        icon={<InfoIcon />}
-        size="sm"
-        src=""
-      />
-    ),
+    page: <Avatar gradient="charon-light" fallback={<InfoIcon />} size="sm" />,
     info: (
-      <Avatar
-        gradient="amphiaraus-dark"
-        ariaLabel=""
-        icon={<InfoIcon />}
-        size="sm"
-        src=""
-      />
+      <Avatar gradient="amphiaraus-dark" fallback={<InfoIcon />} size="sm" />
     ),
     success: (
-      <Avatar
-        gradient="thanatos-dark"
-        ariaLabel=""
-        icon={<SuccessIcon />}
-        size="sm"
-        src=""
-      />
+      <Avatar gradient="thanatos-dark" fallback={<SuccessIcon />} size="sm" />
     ),
     warning: (
-      <Avatar
-        gradient="asphodel-light"
-        ariaLabel=""
-        icon={<WarningIcon />}
-        size="sm"
-        src=""
-      />
+      <Avatar gradient="asphodel-light" fallback={<WarningIcon />} size="sm" />
     ),
     danger: (
-      <Avatar
-        gradient="hades-light"
-        ariaLabel=""
-        icon={<DangerIcon />}
-        size="sm"
-        src=""
-      />
+      <Avatar gradient="hades-light" fallback={<DangerIcon />} size="sm" />
     ),
   })
 

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,55 @@
+import type { AvatarRootProps } from '@ark-ui/react/avatar'
+import type { AvatarVariantProps } from '@cerberus/styled-system/recipes'
+import type { ReactNode } from 'react'
+import { splitProps } from '../../utils'
+import { Show } from '../Show'
+import { AvatarParts } from './parts'
+
+/**
+ * This module provides an abstraction of the Avatar primitives.
+ * @module 'avatar'
+ */
+
+export interface AvatarWithoutImage
+  extends AvatarRootProps,
+    AvatarVariantProps {
+  alt?: never
+  src?: never
+  fallback?: ReactNode
+}
+
+export interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {
+  alt: string
+  src: string
+  fallback?: ReactNode
+}
+
+/**
+ * Avatar component is an abstraction of the primitives that displays a
+ * avatar or it's fallback when the image fails to load.
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)
+ * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)
+ */
+export function Avatar(props: AvatarWithoutImage | AvatarWithImage) {
+  const [imgProps, { fallback, children }, rootProps] = splitProps(
+    props,
+    ['alt', 'src'],
+    ['fallback', 'children'],
+  )
+
+  return (
+    <AvatarParts.Root {...rootProps}>
+      <Show
+        when={Boolean(children)}
+        fallback={
+          <>
+            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>
+            <AvatarParts.Image {...imgProps} />
+          </>
+        }
+      >
+        {children}
+      </Show>
+    </AvatarParts.Root>
+  )
+}

package/src/components/avatar/index.ts

@@ -0,0 +1,5 @@
+export * from './parts'
+export * from './primitives'
+export * from './avatar'
+
+export { useAvatarContext } from '@ark-ui/react/avatar'

package/src/components/avatar/parts.ts

@@ -0,0 +1,37 @@
+import type { ElementType } from 'react'
+import { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'
+
+/**
+ * This module contains the parts of the Avatar component.
+ * @module 'avatar/parts'
+ */
+
+interface AvatarPartsValue {
+  /**
+   * The context provider of the Avatar.
+   */
+  Root: ElementType
+  /**
+   * The image of the Avatar.
+   */
+  Image: ElementType
+  /**
+   * The fallback content to display when the image fails to load.
+   */
+  Fallback: ElementType
+}
+
+/**
+ * An Object containing the parts of the Accordion component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the AvatarParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const AvatarParts: AvatarPartsValue = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+}

package/src/components/avatar/primitives.tsx

@@ -0,0 +1,53 @@
+import {
+  Avatar,
+  type AvatarFallbackProps,
+  type AvatarImageProps,
+  type AvatarRootProps,
+} from '@ark-ui/react/avatar'
+import {
+  avatar,
+  type AvatarVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+
+/**
+ * This module provides the primitive components for the Avatar component.
+ * @module 'avatar/primitives'
+ */
+
+/**
+ * The root component of the Avatar.
+ */
+export function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {
+  const { gradient, shape, size, ...rootProps } = props
+  const styles = avatar({ gradient, shape, size })
+  return (
+    <Avatar.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The image component of the Avatar.
+ */
+export function AvatarImage(props: AvatarImageProps) {
+  const styles = avatar()
+  return (
+    <Avatar.Image {...props} className={cx(styles.image, props.className)} />
+  )
+}
+
+/**
+ * The fallback component of the Avatar.
+ */
+export function AvatarFallback(props: AvatarFallbackProps) {
+  const styles = avatar()
+  return (
+    <Avatar.Fallback
+      {...props}
+      className={cx(styles.fallback, props.className)}
+    />
+  )
+}

package/src/components/button/button.tsx

@@ -1,7 +1,7 @@
 'use client'
 
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import {
-  type ButtonHTMLAttributes,
   type PropsWithChildren,
   createContext,
   useContext,
@@ -29,7 +29,7 @@ const ButtonContext = createContext<ButtonContextValue>({
   pending: false,
 })
 
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+export type ButtonProps = HTMLArkProps<'button'> &
   ButtonVariantProps & {
     pending?: boolean
   }
@@ -38,13 +38,13 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
  * A component that allows the user to perform actions
  * @see https://cerberus.digitalu.design/react/button
  */
-export function Button(props: ButtonProps): JSX.Element {
+export function Button(props: ButtonProps) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props
   const value = useMemo(() => ({ pending }), [pending])
 
   return (
     <ButtonContext.Provider value={value}>
-      <button
+      <ark.button
         {...nativeProps}
         disabled={pending || nativeProps.disabled}
         className={cx(

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

@@ -13,7 +13,7 @@ import { HStack, VStack } from '@cerberus/styled-system/jsx'
 import { useCerberusContext } from '../../context/cerberus'
 import { Show } from '../Show'
 import { For } from '../for'
-import { Avatar } from '../Avatar'
+import { Avatar } from '../avatar/avatar'
 import {
   Dialog,
   DialogDescription,
@@ -112,9 +112,8 @@ export function CTAModal(props: PropsWithChildren<object>) {
             <VStack alignItems="flex-start" gap="md" w="full">
               <VStack gap="lg" w="full">
                 <Avatar
-                  ariaLabel=""
                   gradient="charon-light"
-                  icon={
+                  fallback={
                     <Show
                       when={Boolean(confirmIcon)}
                       fallback={<FallbackIcon size={24} />}
@@ -122,7 +121,6 @@ export function CTAModal(props: PropsWithChildren<object>) {
                       {confirmIcon}
                     </Show>
                   }
-                  src=""
                 />
                 <DialogHeading>{content?.heading}</DialogHeading>
                 <DialogDescription>{content?.description}</DialogDescription>

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

@@ -0,0 +1,34 @@
+import { DatePickerContent } from './content'
+import { DatePickerDayView } from './day-view'
+import { DatePickerMonthView } from './month-view'
+import { DatePickerYearView } from './year-view'
+
+/**
+ * This module contains an abstraction of the DatePicker component.
+ * @module 'date-picker/calendar'
+ */
+
+/**
+ * An abstraction of the DatePicker content components that contain the
+ * different calendar views and controls.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerCalendar(props: { withModal?: boolean }) {
+  return (
+    <DatePickerContent withModal={props.withModal}>
+      <DatePickerDayView />
+      <DatePickerMonthView />
+      <DatePickerYearView />
+    </DatePickerContent>
+  )
+}

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

@@ -0,0 +1,29 @@
+import type { DatePickerContentProps } from '@ark-ui/react/date-picker'
+import { Portal } from '../Portal'
+import { DatePickerParts } from './parts'
+
+/**
+ * This private module contains an abstraction of the DatePickerContent
+ * primitive.
+ * @module 'date-picker/content'
+ */
+
+/**
+ * An abstraction of the DatePicker content that wraps the DatePickerParts
+ * primitives.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ */
+export function DatePickerContent(
+  props: DatePickerContentProps & {
+    withModal?: boolean
+  },
+) {
+  const { withModal, ...contentProps } = props
+  return (
+    <Portal disabled={withModal ?? false}>
+      <DatePickerParts.Positioner>
+        <DatePickerParts.Content {...contentProps} />
+      </DatePickerParts.Positioner>
+    </Portal>
+  )
+}