@cerberus-design/react 0.16.0 → 0.17.0

package/src/components/Accordion.tsx

@@ -1,125 +0,0 @@
-import { Accordion as ArkAccordion } from '@ark-ui/react'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  accordion,
-  type AccordionVariantProps,
-} from '@cerberus/styled-system/recipes'
-
-export type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps
-
-/**
- * The context provider for the Accordion family.
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *  <AccordionItemGroup heading="Item 1 heading" value="one">
- *     This is the content
- *  </AccordionItemGroup>
- * </Accordion>
- * ```
- */
-export function Accordion(props: AccordionProps) {
-  const { size, className, ...rootProps } = props
-  const styles = accordion({ size })
-
-  return (
-    <ArkAccordion.Root
-      collapsible
-      className={cx(className, styles.root)}
-      {...rootProps}
-    />
-  )
-}
-
-type AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps
-
-/**
- * The item for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItem value="one">
- *     <AccordionTrigger>
- *        Accordion Item 1
- *     <AccordionIndicator />
- *     </AccordionTrigger>
- *     <AccordionContent>Accordion Item 1 content</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- */
-export function AccordionItem(props: AccordionItemProps) {
-  const { size, ...itemProps } = props
-  const styles = accordion({ size })
-  return (
-    <ArkAccordion.Item
-      {...itemProps}
-      className={cx(itemProps.className, styles.item)}
-    />
-  )
-}
-
-export type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &
-  AccordionVariantProps
-
-/**
- * The trigger for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItem value="one">
- *     <AccordionTrigger>
- *        Accordion Item 1
- *     <AccordionIndicator />
- *     </AccordionTrigger>
- *     <AccordionContent>Accordion Item 1 content</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- */
-export function AccordionItemTrigger(props: AccordionItemTriggerProps) {
-  const { size, ...triggerProps } = props
-  const styles = accordion({ size })
-  return (
-    <ArkAccordion.ItemTrigger
-      {...triggerProps}
-      className={cx(triggerProps.className, styles.itemTrigger)}
-    />
-  )
-}
-
-export type AccordionItemContentProps = ArkAccordion.ItemContentProps &
-  AccordionVariantProps
-
-/**
- * The content for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItem value="one">
- *     <AccordionTrigger>
- *        Accordion Item 1
- *     <AccordionIndicator />
- *     </AccordionTrigger>
- *     <AccordionContent>Accordion Item 1 content</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- * */
-export function AccordionItemContent(props: AccordionItemContentProps) {
-  const { size, ...contentProps } = props
-  const styles = accordion({ size })
-  return (
-    <ArkAccordion.ItemContent
-      {...contentProps}
-      className={cx(contentProps.className, styles.itemContent)}
-    />
-  )
-}

package/src/components/AccordionItemGroup.tsx

@@ -1,79 +0,0 @@
-import { Accordion as ArkAccordion } from '@ark-ui/react'
-import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
-import type { PropsWithChildren } from 'react'
-import { Show } from './Show'
-import {
-  AccordionItem,
-  AccordionItemContent,
-  AccordionItemTrigger,
-} from './Accordion'
-import { css } from '@cerberus/styled-system/css'
-import { AccordionItemIndicator } from './Accordion.client'
-
-/**
- * This module contains an abstraction of the AccordionItem components.
- * @module
- */
-
-export interface AccordionItemGroupBaseProps extends ArkAccordion.ItemProps {
-  /**
-   * The heading of the accordion item to open and close the content.
-   */
-  heading: string
-  /**
-   * The position of the arrow indicator.
-   */
-  indicatorPosition?: 'start' | 'end'
-}
-export type AccordionItemGroupProps = AccordionItemGroupBaseProps &
-  AccordionVariantProps
-
-/**
- * A grouped item for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItemGroup heading="Accordion Item 1" value="one">
- *     Accordion Item 1 content
- *   </AccordionItemGroup>
- * </Accordion>
- * ```
- */
-export function AccordionItemGroup(
-  props: PropsWithChildren<AccordionItemGroupProps>,
-) {
-  const {
-    size,
-    heading,
-    children,
-    indicatorPosition = 'end',
-    ...itemProps
-  } = props
-  const triggerStyles =
-    indicatorPosition === 'start'
-      ? {
-          gap: 'md',
-          justifyContent: 'flex-start',
-        }
-      : undefined
-
-  return (
-    <AccordionItem {...itemProps}>
-      <AccordionItemTrigger className={css(triggerStyles)} size={size}>
-        <Show when={indicatorPosition === 'start'}>
-          <AccordionItemIndicator size={size} />
-        </Show>
-
-        {heading}
-
-        <Show when={indicatorPosition === 'end'}>
-          <AccordionItemIndicator size={size} />
-        </Show>
-      </AccordionItemTrigger>
-
-      <AccordionItemContent size={size}>{children}</AccordionItemContent>
-    </AccordionItem>
-  )
-}

package/src/components/Admonition.client.tsx

@@ -1,73 +0,0 @@
-'use client'
-
-import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
-import { useCerberusContext } from '../context/cerberus'
-import { Avatar } from './Avatar'
-
-type MatchAvatarProps = AdmonitionVariantProps
-
-export function MatchAvatar(props: MatchAvatarProps) {
-  const { icons } = useCerberusContext()
-  const {
-    infoNotification: InfoIcon,
-    successNotification: SuccessIcon,
-    warningNotification: WarningIcon,
-    dangerNotification: DangerIcon,
-  } = icons
-
-  switch (props.palette) {
-    case 'page':
-      return (
-        <Avatar
-          gradient="charon-light"
-          ariaLabel=""
-          icon={<InfoIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'info':
-      return (
-        <Avatar
-          gradient="amphiaraus-dark"
-          ariaLabel=""
-          icon={<InfoIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'success':
-      return (
-        <Avatar
-          gradient="thanatos-dark"
-          ariaLabel=""
-          icon={<SuccessIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'warning':
-      return (
-        <Avatar
-          gradient="asphodel-light"
-          ariaLabel=""
-          icon={<WarningIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'danger':
-      return (
-        <Avatar
-          gradient="hades-light"
-          ariaLabel=""
-          icon={<DangerIcon />}
-          size="sm"
-          src=""
-        />
-      )
-
-    default:
-      throw new Error('Unsupported admonition palette')
-  }
-}

package/src/components/Admonition.tsx

@@ -1,117 +0,0 @@
-import {
-  admonition,
-  type AdmonitionVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import type { HTMLAttributes, ReactNode } from 'react'
-import { Show } from './Show'
-import { MatchAvatar } from './Admonition.client'
-
-/**
- * This module provides a set of components for creating admonitions.
- * @module Admonition
- */
-
-export type AdmonitionProps = HTMLAttributes<HTMLDivElement> &
-  AdmonitionVariantProps & {
-    /**
-     * One off replacement for the icon.
-     */
-    icon?: ReactNode
-  }
-
-/**
- * The `Admonition` component is used to create an admonition.
- * @example
- * ```tsx
- * <Admonition palette="page">
- *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
- *  <AdmonitionDescription palette="page">
- *   This is a page admonition.
- *  </AdmonitionDescription>
- * </Admonition>
- * ```
- * @see https://cerberus.digitalu.design/react/admonition
- */
-export function Admonition(props: AdmonitionProps) {
-  const { children, palette = 'page', usage, icon, ...nativeProps } = props
-  return (
-    <aside
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        hstack({
-          gap: 'md',
-          w: 'full',
-        }),
-        admonition({ palette, usage }).root,
-      )}
-    >
-      <Show when={Boolean(icon)} fallback={<MatchAvatar palette={palette} />}>
-        {icon}
-      </Show>
-      <div>{children}</div>
-    </aside>
-  )
-}
-
-export type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> &
-  AdmonitionVariantProps
-
-/**
- * The `AdmonitionHeading` component is used to create a heading within an
- * admonition.
- * @example
- * ```tsx
- * <Admonition palette="page">
- *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
- *  <AdmonitionDescription palette="page">
- *   This is a page admonition.
- *  </AdmonitionDescription>
- * </Admonition>
- * ```
- * @see https://cerberus.digitalu.design/react/admonition
- */
-export function AdmonitionHeading(props: AdmonitionHeadingProps) {
-  const { palette, usage, ...nativeProps } = props
-  return (
-    <p
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        admonition({ palette, usage }).heading,
-      )}
-    />
-  )
-}
-
-export type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> &
-  AdmonitionVariantProps
-
-/**
- * The `AdmonitionDescription` component is used to create a description within
- * an admonition.
- * @example
- * ```tsx
- * <Admonition palette="page">
- *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
- *  <AdmonitionDescription palette="page">
- *   This is a page admonition.
- *  </AdmonitionDescription>
- * </Admonition>
- * ```
- * @see https://cerberus.digitalu.design/react/admonition
- */
-export function AdmonitionDescription(props: AdmonitionDescriptionProps) {
-  const { palette, usage, ...nativeProps } = props
-  return (
-    <p
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        admonition({ palette, usage }).description,
-      )}
-    />
-  )
-}

package/src/components/Avatar.tsx

@@ -1,162 +0,0 @@
-'use client'
-
-import { css, cx } from '@cerberus/styled-system/css'
-import { circle } from '@cerberus/styled-system/patterns'
-import {
-  avatar,
-  type AvatarVariantProps,
-} from '@cerberus/styled-system/recipes'
-import type { HtmlHTMLAttributes, ReactNode } from 'react'
-import { Show } from './Show'
-import { useCerberusContext } from '../context/cerberus'
-
-/**
- * This module contains the Avatar component.
- * @module
- */
-
-export type SharedAvatarProps = {
-  /**
-   * An optional icon to show when no src or ariaLabel is provided.
-   */
-  icon?: ReactNode
-  /**
-   * The size of the avatar.
-   */
-  width?: number
-  /**
-   * The size of the avatar.
-   */
-  height?: number
-}
-export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &
-  SharedAvatarProps & {
-    /**
-     * The aria-label for the avatar needed for accessibility.
-     */
-    ariaLabel: string
-    /**
-     * An optional element to replace the image. Recommended for Next.js Image component.
-     */
-    as?: never
-    /**
-     * The source of the image.
-     */
-    src: string
-  }
-export type AvatarAsProps = SharedAvatarProps & {
-  /**
-   * An optional element to replace the image. Recommended for Next.js Image component.
-   */
-  as: ReactNode
-  /**
-   * The aria-label for the avatar needed for accessibility.
-   */
-  ariaLabel?: never
-  /**
-   * The source of the image.
-   */
-  src?: never
-}
-
-export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
-  AvatarVariantProps) &
-  (AvatarImageProps | AvatarAsProps)
-
-/**
- * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.
- * @see https://cerberus.digitalu.design/react/avatar
- * @example
- * ```tsx
- * <Avatar
- *   ariaLabel="Protector Cerberus"
- *   src="https://cerberus.digitalu.design/logo.svg"
- * />
- * ```
- */
-export function Avatar(props: AvatarProps) {
-  const {
-    ariaLabel,
-    as,
-    gradient,
-    size,
-    src,
-    width,
-    height,
-    icon,
-    ...nativeProps
-  } = props
-  const { icons } = useCerberusContext()
-  const { avatar: AvatarIcon } = icons
-  const initials = (ariaLabel || '')
-    .split(' ')
-    .map((word) => word[0])
-    .join('')
-    .slice(0, 2)
-
-  return (
-    <div
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        avatar({ gradient, size }),
-        circle(),
-      )}
-    >
-      <Show
-        when={Boolean(src) || Boolean(as)}
-        fallback={
-          <Show
-            when={Boolean(initials)}
-            fallback={
-              <Show
-                when={Boolean(icon)}
-                fallback={
-                  <AvatarIcon
-                    size={iconSizeMap[size as keyof typeof iconSizeMap]}
-                  />
-                }
-              >
-                {icon}
-              </Show>
-            }
-          >
-            {initials}
-          </Show>
-        }
-      >
-        <Show
-          when={Boolean(as)}
-          fallback={
-            <img
-              alt={props.ariaLabel}
-              className={css({
-                h: 'full',
-                objectFit: 'cover',
-                w: 'full',
-              })}
-              decoding="async"
-              loading="lazy"
-              src={src}
-              height={height}
-              width={width}
-            />
-          }
-        >
-          {as}
-        </Show>
-      </Show>
-    </div>
-  )
-}
-
-const iconSizeMap = {
-  xs: 16,
-  sm: 16,
-  md: 20,
-  lg: 34,
-  xl: 32,
-  '2xl': 32,
-  '3xl': 32,
-  '4xl': 32,
-}