@cerberus-design/react 0.18.4 → 0.19.1

package/src/components/Menu.tsx

@@ -1,165 +0,0 @@
-import {
-  Menu as ArkMenu,
-  type MenuItemGroupProps,
-  type MenuRootProps,
-} from '@ark-ui/react'
-import { menu } from 'styled-system/recipes'
-import { cx } from 'styled-system/css'
-
-/**
- * This module contains the Menu component family.
- * @module Menu
- */
-
-const menuStyles = menu()
-
-/**
- * The root Menu component which controls the menu.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>Trigger</MenuTrigger>
- * </Menu>
- */
-export function Menu(props: MenuRootProps) {
-  return <ArkMenu.Root {...props} />
-}
-
-/**
- * The MenuTrigger component opens/closes the Menu.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- * </Menu>
- */
-export function MenuTrigger(props: ArkMenu.TriggerProps) {
-  return <ArkMenu.Trigger {...props} asChild />
-}
-
-/**
- * The MenuContent component is the container for the menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *   <MenuItem value="item_1">Item 1</MenuItem>
- *   <MenuItem value="item_2">Item 2</MenuItem>
- *  </MenuContent>
- * </Menu>
- */
-export function MenuContent(props: ArkMenu.ContentProps) {
-  return (
-    <ArkMenu.Positioner>
-      <ArkMenu.Content
-        {...props}
-        className={cx(props.className, menuStyles.content)}
-      />
-    </ArkMenu.Positioner>
-  )
-}
-
-/**
- * The MenuItem component is a single item in the menu.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *   <MenuItem value="item_1">Item 1</MenuItem>
- *   <MenuItem value="item_2">Item 2</MenuItem>
- *  </MenuContent>
- * </Menu>
- */
-export function MenuItem(props: ArkMenu.ItemProps) {
-  return (
-    <ArkMenu.Item {...props} className={cx(props.className, menuStyles.item)} />
-  )
-}
-
-/**
- * The MenuItemGroup component is a group of menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *   <MenuItemGroup>
- *    <MenuItem value="item_1">Item 1</MenuItem>
- *    <MenuItem value="item_2">Item 2</MenuItem>
- *   </MenuItemGroup>
- *  </MenuContent>
- * </Menu>
- */
-export function MenuItemGroup(props: MenuItemGroupProps) {
-  return <ArkMenu.ItemGroup {...props} />
-}
-
-/**
- * The MenuItemGroupLabel component is the label for a group of menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *   <MenuItemGroup>
- *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>
- *    <MenuItem value="item_1">Item 1</MenuItem>
- *    <MenuItem value="item_2">Item 2</MenuItem>
- *   </MenuItemGroup>
- *  </MenuContent>
- * </Menu>
- */
-export function MenuGroupLabel(props: ArkMenu.ItemGroupLabelProps) {
-  return (
-    <ArkMenu.ItemGroupLabel
-      {...props}
-      className={cx(props.className, menuStyles.itemGroupLabel)}
-    />
-  )
-}
-
-/**
- * The MenuSeparator component is a visual divider between menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *    <MenuItemGroup>
- *      <MenuGroupLabel>Group Label</MenuGroupLabel>
- *      <MenuSeparator />
- *      <MenuItem value="item_1">Item 1</MenuItem>
- *      <MenuItem value="item_2">Item 2</MenuItem>
- *    </MenuItemGroup>
- *  </MenuContent>
- * </Menu>
- */
-export function MenuSeparator(props: ArkMenu.SeparatorProps) {
-  return (
-    <ArkMenu.Separator
-      {...props}
-      className={cx(props.className, menuStyles.separator)}
-    />
-  )
-}

package/src/components/Portal.tsx

@@ -1,31 +0,0 @@
-import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'
-import type { PropsWithChildren } from 'react'
-
-/**
- * This module is the Portal component.
- * @module
- */
-
-export type { PortalProps }
-
-/**
- * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
- * @see https://cerberus.digitalu.design/react/portal
- * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)
- * @example
- * ```tsx
- * 'use client'
- *
- * import { Portal } from '@cerberus/react'
- *
- * function SomeFeatureWithinSSRPage() {
- *   return (
- *     <Portal>
- *       <div>Portal Content outside of the React VDom tree</div>
- *     </Portal>
- *   )
- * }
- */
-export function Portal(props: PropsWithChildren<PortalProps>) {
-  return <ArkPortal {...props} />
-}

package/src/components/ProgressBar.tsx

@@ -1,88 +0,0 @@
-import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import { cx } from 'styled-system/css'
-import {
-  progressBar,
-  type ProgressBarVariantProps,
-} from 'styled-system/recipes'
-
-/**
- * This module contains the ProgressBar component.
- * @module
- */
-
-export type ProgressBarBaseProps = HTMLArkProps<'div'>
-export type NonIndeterminateProgressBarProps = {
-  /**
-   * A unique identifier for the progress bar. Required for accessibility.
-   */
-  id: string
-  /**
-   * A description label for the progress bar. Required for accessibility.
-   */
-  label: string
-  /**
-   * The state of the progress bar.
-   */
-  indeterminate?: never
-  /**
-   * The current value of the progress bar.
-   */
-  now: number
-}
-export type IndeterminateProgressBarProps = {
-  /**
-   * A unique identifier for the progress bar. Required for accessibility.
-   */
-  id: string
-  /**
-   * A description label for the progress bar. Required for accessibility.
-   */
-  label: string
-  /**
-   * The state of the progress bar.
-   */
-  indeterminate?: true
-  /**
-   * The current value of the progress bar.
-   */
-  now?: never
-}
-export type ProgressBarProps = ProgressBarBaseProps &
-  ProgressBarVariantProps &
-  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)
-
-/**
- * The ProgressBar component is used to display the progress of a task.
- * @see https://cerberus.digitalu.design/react/progress-indicators
- * @example
- * ```tsx
- * <ProgressBar value={75} />
- * ```
- */
-export function ProgressBar(props: ProgressBarProps) {
-  const { indeterminate, size, usage, now, label, ...nativeProps } = props
-  const styles = progressBar({ size, usage })
-  const nowClamped = Math.min(100, Math.max(0, now || 0))
-  const width = {
-    width: indeterminate ? '50%' : `${nowClamped}%`,
-  }
-
-  return (
-    <ark.div
-      {...nativeProps}
-      aria-label={label}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={indeterminate ? 0 : nowClamped}
-      className={cx(nativeProps.className, styles.root)}
-      role="progressbar"
-    >
-      <ark.div
-        {...(indeterminate && { 'data-indeterminate': true })}
-        data-complete={nowClamped === 100}
-        className={styles.bar}
-        style={width}
-      />
-    </ark.div>
-  )
-}

package/src/components/Tag.tsx

@@ -1,108 +0,0 @@
-'use client'
-
-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 { Show } from './Show'
-import { IconButton } from './IconButton'
-
-/**
- * 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
-}
-
-export type TagProps = StaticTagProps | ClickableTagProps
-
-/**
- * The Tag component is used to display a meta descriptions.
- * @see https://cerberus.digitalu.design/react/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
-
-  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>
-  )
-}
-
-const closableCss = css({
-  bgColor: 'action.bg.active',
-  color: 'action.text.initial',
-  paddingInlineEnd: '0',
-})

package/src/components/Tooltip.tsx

@@ -1,61 +0,0 @@
-import {
-  Tooltip as ArkTooltip,
-  type TooltipContentProps,
-} from '@ark-ui/react/tooltip'
-import { cx } from 'styled-system/css'
-import { tooltip } from 'styled-system/recipes'
-import type { ReactNode } from 'react'
-
-/**
- * This module contains the Tooltip component.
- * @module Tooltip
- */
-
-export interface TooltipProps {
-  /**
-   * The text content to display in the tooltip.
-   */
-  content: ReactNode
-  /**
-   * The position of the tooltip relative to the trigger element.
-   */
-  position?: 'top' | 'right' | 'bottom' | 'left'
-}
-
-/**
- * The Tooltip component is used to provide additional information about an element when it is hovered over.
- * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)
- * @example
- * ```tsx
- * <Tooltip content="This is a tooltip">
- *   <Information />
- * </Tooltip>
- */
-export function Tooltip(props: TooltipProps & TooltipContentProps) {
-  const { content, children, asChild, ...nativeProps } = props
-  const styles = tooltip()
-  const position = {
-    placement: props.position || 'top',
-  }
-
-  return (
-    <ArkTooltip.Root openDelay={400} positioning={position}>
-      <ArkTooltip.Trigger className={styles.trigger} asChild={asChild}>
-        {children}
-      </ArkTooltip.Trigger>
-
-      <ArkTooltip.Positioner>
-        <ArkTooltip.Content
-          {...nativeProps}
-          className={cx(nativeProps.className, styles.content)}
-        >
-          <ArkTooltip.Arrow className={styles.arrow}>
-            <ArkTooltip.ArrowTip className={styles.arrowTip} />
-          </ArkTooltip.Arrow>
-
-          {content}
-        </ArkTooltip.Content>
-      </ArkTooltip.Positioner>
-    </ArkTooltip.Root>
-  )
-}