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

package/src/components/Dialog.tsx

@@ -1,165 +0,0 @@
-import {
-  Dialog as ArkDialog,
-  type DialogContentProps as ArkDialogContentProps,
-  type DialogRootProps,
-  type DialogTitleProps,
-} from '@ark-ui/react'
-import {
-  dialog,
-  type DialogVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { Portal } from './Portal'
-import { cx } from '@cerberus/styled-system/css'
-
-export type DialogProviderProps = DialogRootProps
-
-/**
- * The provider that controls the dialog components.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *  <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <Text>Dialog Content</Text>
- *    <DialogCloseTrigger>Close</DialogCloseTrigger>
- *  </Dialog>
- * </DialogProvider>
- * ```
- */
-export function DialogProvider(props: DialogProviderProps) {
-  return <ArkDialog.Root {...props} />
-}
-
-export interface DialogProps
-  extends Omit<ArkDialogContentProps, 'size'>,
-    DialogVariantProps {}
-
-/**
- * The content of the dialog. Must be used within the `DialogProvider` component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <Text>Dialog Content</Text>
- *  </Dialog>
- * </DialogProvider>
- * ```
- */
-export function Dialog(props: DialogProps) {
-  const { size, ...contentProps } = props
-  const styles = dialog({ size })
-  return (
-    <Portal>
-      <DialogBackdrop className={styles.backdrop} />
-      <DialogPositioner className={styles.positioner}>
-        <DialogContent className={styles.content} {...contentProps} />
-      </DialogPositioner>
-    </Portal>
-  )
-}
-
-/**
- * The heading of the dialog. Must be used within the `DialogContent` component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <DialogHeading>Dialog Title</DialogHeading>
- *    <Text>Dialog Content</Text>
- *  </Dialog>
- * </DialogProvider>
- * ```
- */
-export function DialogHeading(props: DialogTitleProps) {
-  const styles = dialog()
-  return (
-    <ArkDialog.Title {...props} className={cx(props.className, styles.title)} />
-  )
-}
-
-/**
- * The description of the dialog. Must be used within the `DialogContent` component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <DialogHeading>Dialog Title</DialogHeading>
- *    <DialogDescription>Dialog Description</DialogDescription>
- *  </Dialog>
- * </DialogProvider>
- * ```
- */
-export function DialogDescription(props: DialogTitleProps) {
-  const styles = dialog()
-  return (
-    <ArkDialog.Description
-      {...props}
-      className={cx(props.className, styles.description)}
-    />
-  )
-}
-
-/**
- * The trigger that opens the dialog. Must be used within the `DialogProvider`
- * component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogTrigger asChild>
- *  <Button>Open Dialog</Button>
- * </DialogTrigger>
- * ```
- */
-export const DialogTrigger = ArkDialog.Trigger
-
-/**
- * The trigger that closes the dialog. Must be used within the `DialogProvider`
- * component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <Text>Dialog Content</Text>
- *    <DialogCloseTrigger>Close</DialogCloseTrigger>
- *  </Dialog>
- * </DialogProvider>
- * ```
- */
-export const DialogCloseTrigger = ArkDialog.CloseTrigger
-
-/**
- * The backdrop of the dialog. Must be used within the `DialogProvider`
- * component.
- */
-export const DialogBackdrop = ArkDialog.Backdrop
-
-/**
- * The positioner of the dialog. Must be used within the `DialogProvider`
- * component.
- */
-export const DialogPositioner = ArkDialog.Positioner
-
-/**
- * The content of the dialog. Must be used within the `DialogProvider`
- * component.
- */
-export const DialogContent = ArkDialog.Content

package/src/components/Table.tsx

@@ -1,61 +0,0 @@
-import { cx } from '@cerberus/styled-system/css'
-import { table } from '@cerberus/styled-system/recipes'
-import type { PropsWithChildren, TableHTMLAttributes } from 'react'
-
-/**
- * This module contains the table component.
- * @module
- */
-
-export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
-  /**
-   * An easy to understand description of the table. Required for accessibility.
-   */
-  caption: string
-}
-
-/**
- * An accessible table component.
- * @definition [ARIA Table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
- * @see https://cerberus.digitalu.design/react/table.
- * @example
- * ```tsx
- * <Table caption="Basic Table">
- *  {children}
- * </Table>
- * ```
- */
-export function Table(props: PropsWithChildren<TableProps>) {
-  const { caption, children, ...nativeProps } = props
-  const styles = table()
-
-  return (
-    <div className={styles.container}>
-      <table
-        {...nativeProps}
-        className={cx(nativeProps.className, styles.table)}
-      >
-        <caption className={styles.caption}>{caption}</caption>
-        {children}
-      </table>
-    </div>
-  )
-}
-
-// We only provide this for consistency with the rest of the components
-
-export type TrProps = TableHTMLAttributes<HTMLTableRowElement>
-
-/**
- * The Tr component is used to render a table row.
- * @definition [Table docs](https://cerberus.digitalu.design/react/table)
- * @example
- * ```tsx
- * <Tr>
- *  {children}
- * </Tr>
- * ```
- */
-export function Tr(props: PropsWithChildren<TrProps>) {
-  return <tr {...props} />
-}

package/src/components/Tabs.client.tsx

@@ -1,113 +0,0 @@
-'use client'
-
-import { Tabs as ArkTabs } from '@ark-ui/react/tabs'
-import { cx } from '@cerberus/styled-system/css'
-import { useTabsContext } from '../context/tabs'
-
-/**
- * This module provides the Tabs family.
- * @module
- */
-
-/**
- * The tab list container for the Tabs group.
- * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList description="Profile settings">
- *     <Tab value="overview">Overview</Tab>
- *  </TabList>
- *  <TabPanel tab="overview">...</TabPanel>
- * </Tabs>
- * ```
- */
-export function TabsList(props: ArkTabs.ListProps) {
-  const { children, ...tabsProps } = props
-  const { styles } = useTabsContext()
-
-  return (
-    <ArkTabs.List
-      {...tabsProps}
-      className={cx(tabsProps.className, styles.list)}
-    >
-      {children}
-      <TabIndicator />
-    </ArkTabs.List>
-  )
-}
-
-/**
- * @deprecated Use `TabsList` instead.
- */
-export const TabList = TabsList
-
-/**
- * The trigger for the Tabs group.
- * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList description="Profile settings">
- *     <Tab value="overview">Overview</Tab>
- *  </TabList>
- *  <TabPanel tab="overview">...</TabPanel>
- * </Tabs>
- * ```
- */
-export function Tab(props: ArkTabs.TriggerProps) {
-  const { styles } = useTabsContext()
-  return (
-    <ArkTabs.Trigger
-      {...props}
-      className={cx(props.className, styles.trigger)}
-    />
-  )
-}
-
-/**
- * The indicator for the Tabs group which shows the active tab.
- * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList description="Profile settings">
- *     <Tab value="overview">Overview</Tab>
- *     <TabsIndicator />
- *  </TabList>
- *  <TabPanel tab="overview">...</TabPanel>
- * </Tabs>
- * ```
- */
-export function TabIndicator(props: ArkTabs.IndicatorProps) {
-  const { styles } = useTabsContext()
-  return (
-    <ArkTabs.Indicator
-      {...props}
-      className={cx(props.className, styles.indicator)}
-    />
-  )
-}
-
-/**
- * The content for the Tabs group.
- * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList description="Profile settings">
- *     <Tab value="overview">Overview</Tab>
- *  </TabList>
- *  <TabPanel tab="overview">...</TabPanel>
- * </Tabs>
- * ```
- */
-export function TabPanel(props: ArkTabs.ContentProps) {
-  const { styles } = useTabsContext()
-  return (
-    <ArkTabs.Content
-      {...props}
-      className={cx(props.className, styles.content)}
-    />
-  )
-}

package/src/components/Tbody.tsx

@@ -1,36 +0,0 @@
-import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
-
-/**
- * This module provides a TBody component.
- * @module
- */
-
-export type TbodyBaseProps = JSX.IntrinsicElements['tbody']
-export type TbodyProps = TbodyBaseProps & TbodyVariantProps
-
-/**
- * The TBody component is used to render a table body.
- * @see https://cerberus.digitalu.design/react/table
- * @memberof module:Table
- * @example
- * ```tsx
- * <TBody>
- *  {children}
- * </TBody>
- * ```
- */
-export function Tbody(props: TbodyProps) {
-  const { decoration, ...nativeProps } = props
-  return (
-    <tbody
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        tbody({
-          decoration,
-        }),
-      )}
-    />
-  )
-}

package/src/components/Td.tsx

@@ -1,34 +0,0 @@
-import { cx } from '@cerberus/styled-system/css'
-import { td, type TdVariantProps } from '@cerberus/styled-system/recipes'
-
-/**
- * Th component for the Td component
- * @module
- */
-
-export type TdBaseProps = JSX.IntrinsicElements['td']
-export type TdProps = TdBaseProps & TdVariantProps
-
-/**
- * Styles for the Th component
- * @see https://cerberus.digitalu.design/react/table
- * @memberof module:Table
- * @example
- * ```tsx
- * <Td>Data cell</Td>
- * ```
- */
-export function Td(props: TdProps) {
-  const { size, ...nativeProps } = props
-  return (
-    <td
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        td({
-          size,
-        }),
-      )}
-    />
-  )
-}

package/src/components/Th.tsx

@@ -1,73 +0,0 @@
-'use client'
-
-import { css, cx } from '@cerberus/styled-system/css'
-import { th, type ThVariantProps } from '@cerberus/styled-system/recipes'
-import type { MouseEvent } from 'react'
-import { Show } from './Show'
-
-/**
- * Th component for the Table component
- * @module
- */
-
-export type ThBaseProps = JSX.IntrinsicElements['th'] & {
-  /**
-   * Converts the Th into a actionable button. Called when the user clicks on
-   * the Th.
-   */
-  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
-}
-export type ThProps = ThBaseProps & ThVariantProps
-
-/**
- * Styles for the Th component
- * @see https://cerberus.digitalu.design/react/table
- * @memberof module:Table
- * @example
- * ```tsx
- * <Th>Header 1</Th>
- * ```
- * @example
- * ```tsx
- * <Th onClick={handleClick}>
- *   Names
- *   <SortIcon />
- * </Th>
- * ```
- */
-export function Th(props: ThProps) {
-  const { size, onClick, ...nativeProps } = props
-  return (
-    <Show
-      when={Boolean(onClick)}
-      fallback={
-        <th
-          {...nativeProps}
-          className={cx(nativeProps.className, th({ size }))}
-        />
-      }
-    >
-      <th {...nativeProps}>
-        <button
-          className={cx(
-            nativeProps.className,
-            th({ size }),
-            css({
-              alignItems: 'center',
-              display: 'inline-flex',
-              justifyContent: 'space-between',
-              userSelect: 'none',
-              w: 'full',
-              _hover: {
-                bgColor: 'page.bg.100',
-              },
-            }),
-          )}
-          onClick={onClick}
-        >
-          {props.children}
-        </button>
-      </th>
-    </Show>
-  )
-}

package/src/components/Thead.tsx

@@ -1,24 +0,0 @@
-import { cx } from '@cerberus/styled-system/css'
-import { thead } from '@cerberus/styled-system/recipes'
-
-/**
- * This module contains the Thead component.
- * @module
- */
-
-export type TheadProps = JSX.IntrinsicElements['thead']
-
-/**
- * The Thead component is used to render a table header.
- * @see https://cerberus.digitalu.design/react/table
- * @memberof module:Table
- * @example
- * ```tsx
- * <Thead>
- *  {children}
- * </Thead>
- * ```
- */
-export function Thead(props: TheadProps) {
-  return <thead {...props} className={cx(props.className, thead())} />
-}

package/src/context/tabs.tsx

@@ -1,133 +0,0 @@
-'use client'
-
-import { Tabs as ArkTabs } from '@ark-ui/react/tabs'
-import { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'
-import type { Pretty } from '@cerberus/styled-system/types'
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type PropsWithChildren,
-} from 'react'
-import { getLocalStorage, setLocalStorage } from '../utils/localStorage'
-
-/**
- * This module provides a Tabs component and a hook to access its context.
- * @module Tabs
- */
-
-export interface TabsContextValue {
-  /**
-   * The styles for the tabs.
-   */
-  styles: {
-    list: Pretty<string>
-    trigger: Pretty<string>
-    content: Pretty<string>
-    indicator: Pretty<string>
-  }
-}
-
-export const TabsContext = createContext<TabsContextValue | null>(null)
-
-export interface TabsProviderBaseProps extends ArkTabs.RootProps {
-  /**
-   * A unique identifier for the Tabs component. Typically used when there are
-   * multiple Tabs components on the same page and you want to uniquely cache
-   * the active tab state.
-   */
-  uuid?: string
-  /**
-   * The default tab to display when the component is first rendered.
-   */
-  defaultValue?: string
-  /**
-   * Whether to cache the active tab state in local storage.
-   */
-  cache?: boolean
-}
-
-export type TabsProviderProps = TabsProviderBaseProps & TabsVariantProps
-
-/**
- * The Tabs component provides a context to manage tab state.
- * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
- * @example
- * ```tsx
- * <Tabs cache>
- *  <TabsList>
- *    <Tab value="overview">Overview</Tab>
- *    <Tab value="guidelines">Guidelines</Tab>
- *  </TabsList>
- *  <TabPanel value="overview">Overview content</TabPanel>
- *  <TabPanel value="guidelines">Guidelines content</TabPanel>
- * </Tabs>
- * ```
- */
-export function Tabs(props: PropsWithChildren<TabsProviderProps>): JSX.Element {
-  const { cache, defaultValue, palette, uuid, ...arkProps } = props
-  const [activeTab, setActiveTab] = useState<string | undefined>(() =>
-    cache ? '' : defaultValue,
-  )
-  const styles = tabs({ palette })
-
-  const cacheKey = useMemo(
-    () => (uuid ? `cerberus-tabs-${uuid}` : 'cerberus-tabs'),
-    [uuid],
-  )
-
-  const handleValueChange = useCallback(
-    (details: { value: string }) => {
-      if (cache) {
-        setLocalStorage(cacheKey, details.value)
-      }
-      setActiveTab(details.value)
-    },
-    [cache],
-  )
-
-  useEffect(() => {
-    if (cache && !activeTab) {
-      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? '')
-      setActiveTab(cachedTab)
-    }
-  }, [cache, defaultValue, activeTab])
-
-  const value = useMemo(
-    () => ({
-      active: activeTab,
-      styles,
-    }),
-    [activeTab, palette, styles],
-  )
-
-  return (
-    <TabsContext.Provider value={value}>
-      <ArkTabs.Root
-        {...arkProps}
-        aria-busy={!activeTab}
-        className={styles.root}
-        defaultValue={defaultValue}
-        onValueChange={handleValueChange}
-        value={activeTab}
-      >
-        {props.children}
-      </ArkTabs.Root>
-    </TabsContext.Provider>
-  )
-}
-
-/**
- * Used to access the tabs context.
- * @returns The tabs context.
- */
-export function useTabsContext(): TabsContextValue {
-  const context = useContext(TabsContext)
-  if (!context) {
-    throw new Error('useTabsContext must be used within a Tabs Provider.')
-  }
-  return context
-}