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

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"
+    />
+  )
+}

package/src/components/table/table.tsx

@@ -0,0 +1,75 @@
+import type { HTMLArkProps } from '@ark-ui/react/factory'
+import type { TablePartsValue } from './parts'
+import {
+  Caption,
+  TableEl,
+  TableRoot,
+  TableTrigger,
+  Tbody,
+  Td,
+  Tfoot,
+  Th,
+  Thead,
+  Tr,
+} from './primitives'
+import type { TableVariantProps } from '@cerberus/styled-system/recipes'
+import { Show } from '../Show'
+
+interface TableRootElProps extends HTMLArkProps<'div'>, TableVariantProps {
+  /**
+   * An easy to understand description of the table. Required for accessibility.
+   */
+  caption: string
+  /**
+   * If true, the table header will be sticky.
+   *
+   * @default false
+   */
+  sticky?: boolean
+}
+
+/**
+ * An abstraction over the TableRoot component that adds a sticky attribute.
+ *
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/react/table)
+ *
+ * @remarks
+ *
+ * This component is used to create a table with an optional sticky header.
+ * It is a wrapper around the TableRoot component and the TableEl primitive.
+ */
+function TableRootEl(props: TableRootElProps) {
+  const { sticky, caption, ...rootProps } = props
+  return (
+    <TableRoot {...rootProps} data-sticky={sticky ?? false}>
+      <TableEl>
+        <Show when={Boolean(caption)}>
+          <Caption>{caption}</Caption>
+        </Show>
+
+        {rootProps.children}
+      </TableEl>
+    </TableRoot>
+  )
+}
+
+/**
+ * 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 Table: Omit<TablePartsValue, 'Table'> = {
+  Root: TableRootEl,
+  Caption: Caption,
+  Header: Thead,
+  HeaderCol: Th,
+  Body: Tbody,
+  Row: Tr,
+  Cell: Td,
+  Footer: Tfoot,
+  Trigger: TableTrigger,
+}

package/src/components/tabs/index.ts

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

package/src/components/tabs/parts.ts

@@ -0,0 +1,53 @@
+import type { ElementType } from 'react'
+import {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Tabs parts.
+ * @module 'tabs/parts'
+ */
+
+export interface TabsPartsValue {
+  /**
+   * The container of the tabs.
+   */
+  Root: ElementType
+  /**
+   * The tab list element.
+   */
+  List: ElementType
+  /**
+   * The tab element.
+   */
+  Trigger: ElementType
+  /**
+   * The tab content element.
+   */
+  Content: ElementType
+  /**
+   * The tab indicator element.
+   */
+  Indicator: ElementType
+}
+
+/**
+ * An Object containing the parts of the Switch component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const TabsParts: TabsPartsValue = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+  Indicator: TabsIndicator,
+}

package/src/components/tabs/primitives.tsx

@@ -0,0 +1,70 @@
+import {
+  Tabs,
+  type TabContentProps,
+  type TabIndicatorProps,
+  type TabListProps,
+  type TabsRootProps,
+  type TabTriggerProps,
+} from '@ark-ui/react/tabs'
+import { cx } from '@cerberus/styled-system/css'
+import { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module provides the primitives for the Tabs component.
+ * @module 'tabs/primitives'
+ */
+
+/**
+ * The container and context provider of the tabs.
+ */
+export function TabsRoot(props: TabsRootProps & TabsVariantProps) {
+  const { palette, ...rootProps } = props
+  const styles = tabs({ palette })
+  return (
+    <Tabs.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The tab list container for the Tabs group.
+ */
+export function TabsList(props: TabListProps) {
+  const styles = tabs()
+  return <Tabs.List {...props} className={cx(styles.list, props.className)} />
+}
+
+/**
+ * The tab element.
+ */
+export function TabsTrigger(props: TabTriggerProps) {
+  const styles = tabs()
+  return (
+    <Tabs.Trigger {...props} className={cx(styles.trigger, props.className)} />
+  )
+}
+
+/**
+ * The tab content element.
+ */
+export function TabsContent(props: TabContentProps) {
+  const styles = tabs()
+  return (
+    <Tabs.Content {...props} className={cx(styles.content, props.className)} />
+  )
+}
+
+/**
+ * The tab indicator element.
+ */
+export function TabsIndicator(props: TabIndicatorProps) {
+  const styles = tabs()
+  return (
+    <Tabs.Indicator
+      {...props}
+      className={cx(styles.indicator, props.className)}
+    />
+  )
+}

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,48 @@
+import type { TabListProps } from '@ark-ui/react/tabs'
+import { TabsParts, type TabsPartsValue } from './parts'
+import type { ElementType } from 'react'
+
+/**
+ * This module contains an abstraction of the Tabs family.
+ * @module 'tabs'
+ */
+
+interface TabsValueProps
+  extends Omit<TabsPartsValue, 'Trigger' | 'Content' | 'Indicator'> {
+  /**
+   * A named component for the TabsTrigger.
+   */
+  Tab: ElementType
+  /**
+   * A named component for the TabsContent.
+   */
+  Panel: ElementType
+}
+
+/**
+ * An abstraction of the TabsList component that includes the TabIndicator.
+ */
+function TabsList(props: TabListProps) {
+  const { children, ...listProps } = props
+  return (
+    <TabsParts.List {...listProps}>
+      {children}
+      <TabsParts.Indicator />
+    </TabsParts.List>
+  )
+}
+
+/**
+ * An Object containing the abstracted parts of the Tabs component.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const Tabs: TabsValueProps = {
+  Root: TabsParts.Root,
+  List: TabsList,
+  Tab: TabsParts.Trigger,
+  Panel: TabsParts.Content,
+}

package/src/context/confirm-modal.tsx

@@ -14,7 +14,7 @@ import {
 import { Button } from '../components/button/button'
 import { css } from '@cerberus/styled-system/css'
 import { Show } from '../components/Show'
-import { Avatar } from '../components/Avatar'
+import { Avatar } from '../components/avatar/avatar'
 import { HStack, VStack } from '@cerberus/styled-system/jsx'
 import { useCerberusContext } from './cerberus'
 import {
@@ -176,18 +176,14 @@ export function ConfirmModal(
                   when={palette === 'danger'}
                   fallback={
                     <Avatar
-                      ariaLabel=""
                       gradient="charon-light"
-                      icon={<ConfirmIcon size={24} />}
-                      src=""
+                      fallback={<ConfirmIcon size={24} />}
                     />
                   }
                 >
                   <Avatar
-                    ariaLabel=""
                     gradient="hades-dark"
-                    icon={<ConfirmIcon size={24} />}
-                    src=""
+                    fallback={<ConfirmIcon size={24} />}
                   />
                 </Show>
               </HStack>

package/src/context/notification-center.tsx

@@ -14,9 +14,9 @@ import { animateIn, vstack } from '@cerberus/styled-system/patterns'
 import { notification } from '@cerberus/styled-system/recipes'
 import { cx } from '@cerberus/styled-system/css'
 import { Show } from '../components/Show'
-import { NotificationHeading } from '../components/NotificationHeading'
-import { NotificationDescription } from '../components/NotificationDescription'
-import { Notification } from '../components/Notification'
+import { NotificationHeading } from '../components/deprecated/NotificationHeading'
+import { NotificationDescription } from '../components/deprecated/NotificationDescription'
+import { Notification } from '../components/deprecated/Notification'
 import { Portal, type PortalProps } from '../components/Portal'
 import { Button } from '../components/button/button'
 import {
@@ -71,28 +71,9 @@ export type NotificationsProviderProps = PortalProps & {
 }
 
 /**
- * Provides a notification center to the app.
- * @see https://cerberus.digitalu.design/react/notification
- * @example
- * ```tsx
- * // Wrap the Provider around the root of the feature.
- * <Notifications>
- *   <SomeFeatureSection />
- * </Notifications>
- *
- * // Use the hook to show a notification.
- * const notify = useNotifications()
- *
- * const handleClick = useCallback(() => {
- *  notify({
- *   palette: 'info',
- *   heading: 'New feature!',
- *   description: 'We have added a new feature to the app.',
- * })
- * }, [notify])
- * ```
+ * @deprecated
  */
-export function NotificationCenter(
+export function NotificationCenter_deprecated(
   props: PropsWithChildren<NotificationsProviderProps>,
 ) {
   const [state, dispatch] = useReducer(notificationCenterReducer, [])
@@ -265,20 +246,7 @@ function MatchNotification(props: MatchNotificationProps) {
   }
 }
 
-/**
- * The hook to use the NotificationCenter.
- * @returns The notify method to trigger a notification.
- * @example
- * ```tsx
- * const {notify} = useNotificationCenter()
- * notify({
- *  palette: 'info',
- *  heading: 'New feature',
- *  description: 'We have added a new feature to the app.',
- * })
- * ```
- */
-export function useNotificationCenter(): NotificationsValue {
+export function useNotificationCenter_deprecated(): NotificationsValue {
   const context = useContext(NotificationsContext)
   if (!context) {
     throw new Error(

package/src/context/prompt-modal.tsx

@@ -18,7 +18,7 @@ import { hstack } from '@cerberus/styled-system/patterns'
 import { FieldLabel, FieldRoot, Input } from '../components/field/index'
 import { Button } from '../components/button/button'
 import { Show } from '../components/Show'
-import { Avatar } from '../components/Avatar'
+import { Avatar } from '../components/avatar/avatar'
 import { Text } from '../components/Text'
 import { useCerberusContext } from './cerberus'
 import {
@@ -189,18 +189,14 @@ export function PromptModal(
                   when={palette === 'danger'}
                   fallback={
                     <Avatar
-                      ariaLabel=""
                       gradient="charon-light"
-                      icon={<PromptIcon size={24} />}
-                      src=""
+                      fallback={<PromptIcon size={24} />}
                     />
                   }
                 >
                   <Avatar
-                    ariaLabel=""
                     gradient="hades-dark"
-                    icon={<PromptIcon size={24} />}
-                    src=""
+                    fallback={<PromptIcon size={24} />}
                   />
                 </Show>
               </HStack>

package/src/index.ts

@@ -15,6 +15,9 @@ export * from './components/deprecated/ModalDescription'
 export * from './components/deprecated/NavMenuTrigger'
 export * from './components/deprecated/NavMenuList'
 export * from './components/deprecated/NavMenuLink'
+export * from './components/deprecated/Legend'
+export * from './context/confirm-modal'
+export * from './context/prompt-modal'
 export * from './hooks/useDate'
 export * from './hooks/useModal'
 export * from './hooks/useToggle'
@@ -23,14 +26,13 @@ export * from './hooks/useToggle'
 
 export * from './components/admonition/index'
 export * from './components/accordion/index'
-export * from './components/Avatar'
+export * from './components/avatar/index'
 export * from './components/button/index'
 export * from './components/checkbox/index'
 export * from './components/CircularProgress'
 export * from './components/combobox/index'
 export * from './components/cta-dialog/index'
-export * from './components/DatePicker.client'
-export * from './components/DatePicker.server'
+export * from './components/date-picker/index'
 export * from './components/dialog/index'
 export * from './components/Droppable'
 export * from './components/FeatureFlag'
@@ -40,11 +42,8 @@ export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/for'
 export * from './components/IconButton'
-export * from './components/Legend'
 export * from './components/Menu'
-export * from './components/Notification'
-export * from './components/NotificationHeading'
-export * from './components/NotificationDescription'
+export * from './components/notifications/index'
 export * from './components/Portal'
 export * from './components/ProgressBar'
 export * from './components/radio/index'
@@ -53,12 +52,8 @@ export * from './components/select/index'
 export * from './components/Show'
 export * from './components/Spinner'
 export * from './components/switch/index'
-export * from './components/Tabs.client'
-export * from './components/Table'
-export * from './components/Thead'
-export * from './components/Th'
-export * from './components/Td'
-export * from './components/Tbody'
+export * from './components/table/index'
+export * from './components/tabs/index'
 export * from './components/Tag'
 export * from './components/Text'
 export * from './components/toggle/index'
@@ -67,12 +62,8 @@ export * from './components/Tooltip'
 // context
 
 export * from './context/cerberus'
-export * from './context/confirm-modal'
 export * from './context/feature-flags'
 export * from './context/navMenu'
-export * from './context/notification-center'
-export * from './context/prompt-modal'
-export * from './context/tabs'
 export * from './context/theme'
 
 // hooks