@cerberus-design/react 1.0.0-rc.5 → 1.0.0-rc.7

package/src/components/file-upload/primitives.ts

@@ -1,161 +0,0 @@
-import {
-  FileUpload,
-  type FileUploadContextProps as ArkFileUploadContextProps,
-  type FileUploadRootProps as ArkFileUploadRootProps,
-  type FileUploadLabelProps as ArkFileUploadLabelProps,
-  type FileUploadDropzoneProps as ArkFileUploadDropzoneProps,
-  type FileUploadTriggerProps as ArkFileUploadTriggerProps,
-  type FileUploadClearTriggerProps as ArkFileUploadClearTriggerProps,
-  type FileUploadItemGroupProps as ArkFileUploadItemGroupProps,
-  type FileUploadItemProps as ArkFileUploadItemProps,
-  type FileUploadItemPreviewProps as ArkFileUploadItemPreviewProps,
-  type FileUploadItemPreviewImageProps as ArkFileUploadItemPreviewImageProps,
-  type FileUploadItemNameProps as ArkFileUploadItemNameProps,
-  type FileUploadItemSizeTextProps as ArkFileUploadItemSizeTextProps,
-  type FileUploadItemDeleteTriggerProps as ArkFileUploadItemDeleteTriggerProps,
-  type FileUploadHiddenInputProps as ArkFileUploadHiddenInputProps,
-} from '@ark-ui/react/file-upload'
-import {
-  fileUploader,
-  type FileUploaderVariantProps,
-} from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(fileUploader)
-
-// Root
-
-export type FileUploadRootProps = CerberusPrimitiveProps<
-  ArkFileUploadRootProps & FileUploaderVariantProps
->
-export const FileUploadRoot = withSlotRecipe(FileUpload.Root, 'root')
-
-// Dropzone
-
-export type FileUploadDropzoneProps =
-  CerberusPrimitiveProps<ArkFileUploadDropzoneProps>
-export const FileUploadDropzone = withSlotRecipe(
-  FileUpload.Dropzone,
-  'dropzone',
-)
-
-// Label
-
-export type FileUploadLabelProps =
-  CerberusPrimitiveProps<ArkFileUploadLabelProps>
-export const FileUploadLabel = withSlotRecipe(FileUpload.Label, 'label')
-
-// Trigger
-
-export type FileUploadTriggerProps =
-  CerberusPrimitiveProps<ArkFileUploadTriggerProps>
-export const FileUploadTrigger = withSlotRecipe(FileUpload.Trigger, 'trigger')
-
-// ClearTrigger
-
-export type FileUploadClearTriggerProps =
-  CerberusPrimitiveProps<ArkFileUploadClearTriggerProps>
-export const FileUploadClearTrigger = withSlotRecipe(
-  FileUpload.ClearTrigger,
-  'clearTrigger',
-)
-
-// ItemGroup
-
-export type FileUploadItemGroupProps =
-  CerberusPrimitiveProps<ArkFileUploadItemGroupProps>
-export const FileUploadItemGroup = withSlotRecipe(
-  FileUpload.ItemGroup,
-  'itemGroup',
-)
-
-// Item
-
-export type FileUploadItemProps = CerberusPrimitiveProps<ArkFileUploadItemProps>
-export const FileUploadItem = withSlotRecipe(FileUpload.Item, 'item')
-
-// ItemPreview
-
-export type FileUploadItemPreviewProps =
-  CerberusPrimitiveProps<ArkFileUploadItemPreviewProps>
-export const FileUploadItemPreview = withSlotRecipe(
-  FileUpload.ItemPreview,
-  'itemPreview',
-)
-
-// ItemPreviewImage
-
-export type FileUploadItemPreviewImageProps =
-  CerberusPrimitiveProps<ArkFileUploadItemPreviewImageProps>
-export const FileUploadItemPreviewImage = withSlotRecipe(
-  FileUpload.ItemPreviewImage,
-  'itemPreviewImage',
-)
-
-// ItemName
-
-export type FileUploadItemNameProps =
-  CerberusPrimitiveProps<ArkFileUploadItemNameProps>
-export const FileUploadItemName = withSlotRecipe(
-  FileUpload.ItemName,
-  'itemName',
-)
-
-// ItemSizeText
-
-export type FileUploadItemSizeTextProps =
-  CerberusPrimitiveProps<ArkFileUploadItemSizeTextProps>
-export const FileUploadItemSizeText = withSlotRecipe(
-  FileUpload.ItemSizeText,
-  'itemSizeText',
-)
-
-// ItemDeleteTrigger
-
-export type FileUploadItemDeleteTriggerProps =
-  CerberusPrimitiveProps<ArkFileUploadItemDeleteTriggerProps>
-export const FileUploadItemDeleteTrigger = withSlotRecipe(
-  FileUpload.ItemDeleteTrigger,
-  'itemDeleteTrigger',
-)
-
-// HiddenInput
-
-export type FileUploadHiddenInputProps =
-  CerberusPrimitiveProps<ArkFileUploadHiddenInputProps>
-export const FileUploadHiddenInput = withNoRecipe(FileUpload.HiddenInput)
-
-// Context
-
-export type FileUploadContextProps =
-  CerberusPrimitiveProps<ArkFileUploadContextProps>
-export const FileUploadContext = withNoRecipe(FileUpload.Context)
-
-// Content
-
-export type FileUploadContentProps = CerberusPrimitiveProps<HTMLDivElement>
-export const FileUploadContent = withSlotRecipe('div', 'label')
-
-// Icon
-
-export type FileUploadIconProps = CerberusPrimitiveProps<HTMLDivElement>
-export const FileUploadIcon = withSlotRecipe('div', 'icon')
-
-// Heading
-
-export type FileUploadHeadingProps =
-  CerberusPrimitiveProps<HTMLParagraphElement>
-export const FileUploadHeading = withSlotRecipe('p', 'heading')
-
-// Description
-
-export type FileUploadDescriptionProps =
-  CerberusPrimitiveProps<HTMLParagraphElement>
-export const FileUploadDescription = withSlotRecipe('p', 'description')
-
-// Types
-
-export type { UseFileUploadContext } from '@ark-ui/react'

package/src/components/file-upload/utils.ts

@@ -1,20 +0,0 @@
-import { FileUploadRootProps } from '@ark-ui/react'
-
-/**
- * Format a given file type string into a human-readable format.
- * @param accept FileUploadRootProps['accept']
- * @returns string (e.g., ".png, .jpg, .svg")
- */
-export function formatFileTypes(accept: FileUploadRootProps['accept']): string {
-  if (Array.isArray(accept)) return accept.join(', ')
-  if (typeof accept === 'object') return Object.keys(accept).join(', ')
-
-  if (typeof accept === 'string') {
-    if (accept.includes('/*')) {
-      return `any ${accept.split('/')[0]}`
-    }
-    return accept.split(',').join(', ')
-  }
-
-  return 'any'
-}

package/src/components/for/for.tsx

@@ -1,38 +0,0 @@
-import type { ReactNode, JSX } from 'react'
-
-export interface ForProps<T extends readonly unknown[], U extends JSX.Element> {
-  /**
-   * The array to iterate over.
-   */
-  each: T | undefined | null | false
-  /**
-   * The fallback to render when the array is empty.
-   */
-  fallback?: JSX.Element
-  /**
-   * The children to render for each item in the array.
-   */
-  children: (item: T[number], index: number) => U
-}
-
-/**
- * The For component is used to iterate over an array and render a list of
- * components or display a fallback when the array is empty.
- * Inspired by the `<For>` component from SolidJS.
- *
- * @example
- * ```tsx
- * <For each={['a', 'b', 'c']}>
- *   {(item, index) => <div key={index}>{item}</div>}
- * </For>
- * ```
- */
-export function For<T extends readonly unknown[], U extends JSX.Element>(
-  props: ForProps<T, U>,
-) {
-  if (!props.each || !props.each.length) {
-    return props.fallback || null
-  }
-
-  return <>{props.each?.map(props.children) as ReactNode}</>
-}

package/src/components/for/index.ts

@@ -1 +0,0 @@
-export * from './for'

package/src/components/group/index.ts

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

package/src/components/group/primitives.ts

@@ -1,7 +0,0 @@
-import { group, type GroupVariantProps } from 'styled-system/recipes'
-import { type CerberusProps, createCerberusPrimitive } from '../../system/index'
-
-const { withRecipe } = createCerberusPrimitive(group)
-
-export type GroupProps = CerberusProps<'div'> & GroupVariantProps
-export const Group = withRecipe('div')

package/src/components/icon-button/button.tsx

@@ -1,41 +0,0 @@
-import { IconButtonRoot, type IconButtonRootProps } from './primitives'
-
-/**
- * This module contains the Icon Button component.
- * @module
- */
-
-type NonClipboardIconButtonProps = {
-  /**
-   * The aria-label attribute for the icon button.
-   */
-  ariaLabel: string
-  clipboard?: never
-}
-
-type ClipboardIconButtonProps = {
-  ariaLabel?: never
-  /**
-   * If true, the icon button is used as a clipboard trigger.
-   * In this case, the aria-label defaults to "Copy to clipboard".
-   */
-  clipboard: true
-}
-
-export type IconButtonProps = IconButtonRootProps &
-  (NonClipboardIconButtonProps | ClipboardIconButtonProps)
-/**
- * A component that allows the user to perform actions using an icon
- * @see https://cerberus.digitalu.design/react/icon-button
- */
-export function IconButton(props: IconButtonProps) {
-  const { ariaLabel, clipboard, ...rootProps } = props
-  return (
-    <IconButtonRoot
-      {...rootProps}
-      {...(!clipboard && { 'aria-label': ariaLabel })}
-      data-scope="icon-button"
-      data-part="root"
-    />
-  )
-}

package/src/components/icon-button/index.tsx

@@ -1,2 +0,0 @@
-export * from './button'
-export * from './primitives'

package/src/components/icon-button/primitives.ts

@@ -1,19 +0,0 @@
-import { ark } from '@ark-ui/react/factory'
-import { HTMLAttributes } from 'react'
-import { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'
-import {
-  CerberusPrimitiveProps,
-  createCerberusPrimitive,
-} from '../../system/index'
-
-/**
- * This module contains the IconButton component primitives.
- * @module @cerberus-design/react/components/icon-button/primitives
- */
-
-const { withRecipe } = createCerberusPrimitive(iconButton)
-
-export type IconButtonRootProps = CerberusPrimitiveProps<
-  HTMLAttributes<HTMLButtonElement> & IconButtonVariantProps
->
-export const IconButtonRoot = withRecipe(ark.button)

package/src/components/menu/index.ts

@@ -1,2 +0,0 @@
-export * from './primitives'
-export * from './menu'

package/src/components/menu/menu.tsx

@@ -1,144 +0,0 @@
-import {
-  MenuContentEl,
-  MenuItemEl,
-  MenuItemGroupEl,
-  MenuItemGroupLabelEl,
-  MenuPositioner,
-  MenuRoot,
-  MenuSeparatorEl,
-  MenuTriggerEl,
-  type MenuContentProps,
-  type MenuTriggerProps,
-} from './primitives'
-
-/**
- * This module contains the Menu named abstractions component.
- * @module @cerberus-design/react/components/menu
- */
-
-/**
- * The root Menu component which controls the menu.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
- *
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>Trigger</MenuTrigger>
- * </Menu>
- */
-export const Menu = MenuRoot
-
-/**
- * The MenuTrigger component opens/closes the Menu.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- * </Menu>
- */
-export function MenuTrigger(props: MenuTriggerProps) {
-  return <MenuTriggerEl {...props} asChild />
-}
-
-/**
- * The MenuContent component is the container for the menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
- * @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: MenuContentProps) {
-  return (
-    <MenuPositioner>
-      <MenuContentEl {...props} />
-    </MenuPositioner>
-  )
-}
-
-/**
- * The MenuItem component is a single item in the menu.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
- * @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 const MenuItem = MenuItemEl
-
-/**
- * The MenuItemGroup component is a group of menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
- * @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 const MenuItemGroup = MenuItemGroupEl
-
-/**
- * The MenuItemGroupLabel component is the label for a group of menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
- * @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 const MenuGroupLabel = MenuItemGroupLabelEl
-
-/**
- * The MenuSeparator component is a visual divider between menu items.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)
- * @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 const MenuSeparator = MenuSeparatorEl

package/src/components/menu/primitives.ts

@@ -1,84 +0,0 @@
-import {
-  Menu as ArkMenu,
-  type MenuRootProps as ArkMenuRootProps,
-  type MenuTriggerProps as ArkMenuTriggerProps,
-  type MenuTriggerItemProps as ArkMenuTriggerItemProps,
-  type MenuIndicatorProps as ArkMenuIndicatorProps,
-  type MenuPositionerProps as ArkMenuPositionerProps,
-  type MenuContentProps as ArkMenuContentProps,
-  type MenuItemProps as ArkMenuItemProps,
-  type MenuItemGroupProps as ArkMenuItemGroupProps,
-  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,
-  type MenuSeparatorProps as ArkMenuSeparatorProps,
-} from '@ark-ui/react'
-import { menu } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the Menu component primitives.
- * @module @cerberus-design/react/components/menu/primitives
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)
-
-// Root
-
-export type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>
-export const MenuRoot = withSlotRecipe(ArkMenu.Root, 'root')
-
-// Trigger
-
-export type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>
-export const MenuTriggerEl = withNoRecipe(ArkMenu.Trigger)
-
-// TriggerItem
-
-export type MenuTriggerItemProps =
-  CerberusPrimitiveProps<ArkMenuTriggerItemProps>
-export const MenuTriggerItem = withNoRecipe(ArkMenu.TriggerItem)
-
-// Indicator
-
-export type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>
-export const MenuIndicator = withNoRecipe(ArkMenu.Indicator)
-
-// Positioner
-
-export type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>
-export const MenuPositioner = withSlotRecipe(ArkMenu.Positioner, 'positioner')
-
-// Content
-
-export type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>
-export const MenuContentEl = withSlotRecipe(ArkMenu.Content, 'content')
-
-// Item
-
-export type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>
-export const MenuItemEl = withSlotRecipe(ArkMenu.Item, 'item')
-
-// ItemGroup
-
-export type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>
-export const MenuItemGroupEl = withNoRecipe(ArkMenu.ItemGroup)
-
-// ItemGroupLabel
-
-export type MenuItemGroupLabelProps =
-  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>
-export const MenuItemGroupLabelEl = withSlotRecipe(
-  ArkMenu.ItemGroupLabel,
-  'itemGroupLabel',
-)
-
-// Separator
-
-export type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>
-export const MenuSeparatorEl = withSlotRecipe(ArkMenu.Separator, 'separator')
-
-// Types
-
-export type { MenuSelectionDetails } from '@ark-ui/react/menu'

package/src/components/notifications/center.tsx

@@ -1,88 +0,0 @@
-'use client'
-
-import { Toaster, type CreateToasterReturn } from '@ark-ui/react/toast'
-import { Box } from 'styled-system/jsx'
-import { Button, type ButtonProps } from '../button/button'
-import { Show } from '../show/index'
-import { NotificationParts } from './parts'
-import type {
-  NotifyOptions,
-  NotifyOptionsType,
-  UseNotificationCenterReturn,
-} from './types'
-import { MatchNotificationIcon } from './match-icon'
-import { ToastCloseTrigger } from './close-trigger'
-import { toaster } from './toaster'
-
-/**
- * This module contains an abstraction of the Notification parts.
- * @module 'notification/center'
- */
-
-export function getEmphasis(type: NotifyOptionsType) {
-  return type.includes('subtle') ? 'low' : 'high'
-}
-
-export interface NotificationCenterProps {
-  toaster?: CreateToasterReturn
-}
-
-/**
- * The NotificationCenter component is an abstraction for the Notification
- * component. It manages displaying all the toasts in the center.
- */
-export function NotificationCenter(props: NotificationCenterProps) {
-  const cachedToaster = props.toaster || toaster
-
-  return (
-    <Toaster toaster={cachedToaster}>
-      {(toast) => (
-        <NotificationParts.Root
-          key={toast.id}
-          data-emphasis={getEmphasis(
-            (toast.type ?? 'info') as NotifyOptionsType,
-          )}
-        >
-          <MatchNotificationIcon
-            type={toast.type as NotifyOptions['palette']}
-          />
-
-          <Box flex="1" paddingBlock="sm">
-            <NotificationParts.Heading>{toast.title}</NotificationParts.Heading>
-            <NotificationParts.Description>
-              {toast.description}
-            </NotificationParts.Description>
-            <Show when={toast.action}>
-              <NotificationParts.ActionTrigger asChild>
-                <Button
-                  palette={toast.type as ButtonProps['palette']}
-                  usage="ghost"
-                  size="sm"
-                >
-                  {toast.action?.label}
-                </Button>
-              </NotificationParts.ActionTrigger>
-            </Show>
-          </Box>
-
-          <ToastCloseTrigger />
-        </NotificationParts.Root>
-      )}
-    </Toaster>
-  )
-}
-
-/**
- * @deprecated use `toaster` instead
- */
-export function useNotificationCenter(): UseNotificationCenterReturn {
-  function notify(options: NotifyOptions) {
-    toaster.create({
-      title: options.heading,
-      description: options.description,
-      type: options.palette,
-      action: options.action,
-    })
-  }
-  return { ...toaster, notify }
-}

package/src/components/notifications/close-trigger.tsx

@@ -1,21 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { NotificationParts } from './parts'
-import type { NotificationCloseTriggerProps } from './primitives'
-
-/**
- * This private module contains a abstraction of the close trigger primitive.
- * @module 'notification/close-trigger'
- */
-
-export function ToastCloseTrigger(props: NotificationCloseTriggerProps) {
-  const { icons } = useCerberusContext()
-  const { close: CloseIcon } = icons
-
-  return (
-    <NotificationParts.CloseTrigger {...props}>
-      <CloseIcon />
-    </NotificationParts.CloseTrigger>
-  )
-}

package/src/components/notifications/index.ts

@@ -1,5 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './center'
-export * from './types'
-export * from './toaster'

package/src/components/notifications/match-icon.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import { ark } from '@ark-ui/react/factory'
-import { toast } from 'styled-system/recipes'
-import { useCerberusContext } from '../../context/cerberus'
-import { Spinner } from '../spinner/index'
-import type { NotifyOptions, NotifyOptionsType } from './types'
-import { getEmphasis } from './center'
-
-/**
- * This private module contains a component that returns the correct icon for a
- * notification based on the palette. If there is no result, it is assumed to
- * be a 'loading' type.
- * @module 'notification/match-icon'
- */
-
-interface MatchNotificationIconProps {
-  type?: NotifyOptions['palette']
-}
-
-export function MatchNotificationIcon(props: MatchNotificationIconProps) {
-  const { icons } = useCerberusContext()
-  const type = props.type?.split('-')[0] || 'info'
-  const styles = toast()
-
-  const key = `${type}Notification` as keyof typeof icons
-  const Icon = icons[key] || ToastLoadingIcon
-
-  return (
-    <ark.div
-      data-emphasis={getEmphasis(props.type as NotifyOptionsType)}
-      className={styles.icon}
-    >
-      <Icon />
-    </ark.div>
-  )
-}
-
-function ToastLoadingIcon() {
-  return <Spinner size="1rem" />
-}