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

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

@@ -1,28 +0,0 @@
-import { FileUploadFileError } from '@ark-ui/react/file-upload'
-
-type FileErrorTypes = {
-  tooMany?: string
-  invalidType?: string
-  tooLarge?: string
-  tooSmall?: string
-  invalid?: string
-  exists?: string
-}
-
-/**
- * Helper function to create error messages for file upload errors. Returns a
- * record of FileUploadFileError codes and their corresponding error messages.
- * @returns Record<FileUploadFileError, string>
- */
-export function createErrorMessages(
-  options: FileErrorTypes,
-): Record<FileUploadFileError, string> {
-  return {
-    TOO_MANY_FILES: options.tooMany || '📊 Too many files selected',
-    FILE_INVALID_TYPE: options.invalidType || '🚫 Invalid file type',
-    FILE_TOO_LARGE: options.tooLarge || '📏 File too large',
-    FILE_TOO_SMALL: options.tooSmall || '📐 File too small',
-    FILE_INVALID: options.invalid || '⚠️ Invalid file',
-    FILE_EXISTS: options.exists || '🔄 File already exists',
-  }
-}

package/src/components/file-upload/img-preview.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import { UseFileUploadContext } from '@ark-ui/react/file-upload'
-import { useCerberusContext } from '../../context/cerberus'
-import { IconButton } from '../icon-button/index'
-import { FileUploadParts } from './parts'
-import { FileUploadContextProps } from './primitives'
-
-export function ImgPreview(props: Omit<FileUploadContextProps, 'children'>) {
-  const { icons } = useCerberusContext()
-  const { close: Icon } = icons
-
-  return (
-    <FileUploadParts.ItemGroup>
-      <FileUploadParts.Context {...props}>
-        {(ctx: UseFileUploadContext) =>
-          ctx.acceptedFiles.map((file) => (
-            <FileUploadParts.Item
-              key={file.name}
-              file={file}
-              className="file-item"
-            >
-              <FileUploadParts.ItemPreview type="image/*">
-                <FileUploadParts.ItemPreviewImage />
-              </FileUploadParts.ItemPreview>
-
-              <FileUploadParts.ItemName />
-              <FileUploadParts.ItemSizeText />
-
-              <FileUploadParts.ItemDeleteTrigger asChild>
-                <IconButton clipboard size="sm" usage="ghost">
-                  <Icon />
-                </IconButton>
-              </FileUploadParts.ItemDeleteTrigger>
-            </FileUploadParts.Item>
-          ))
-        }
-      </FileUploadParts.Context>
-    </FileUploadParts.ItemGroup>
-  )
-}

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

@@ -1,6 +0,0 @@
-export * from './primitives'
-export * from './parts'
-export * from './file-status'
-export * from './file-uploader'
-export * from './img-preview'
-export * from './helpers'

package/src/components/file-upload/parts.tsx

@@ -1,132 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  FileUploadContext,
-  FileUploadRoot,
-  FileUploadDropzone,
-  FileUploadLabel,
-  FileUploadTrigger,
-  FileUploadClearTrigger,
-  FileUploadItemGroup,
-  FileUploadItem,
-  FileUploadItemPreview,
-  FileUploadItemPreviewImage,
-  FileUploadItemName,
-  FileUploadItemSizeText,
-  FileUploadItemDeleteTrigger,
-  FileUploadContent,
-  FileUploadIcon,
-  FileUploadHiddenInput,
-  FileUploadHeading,
-  FileUploadDescription,
-} from './primitives'
-
-/**
- * This module contains the parts of the FileUploadParts component.
- * @module 'fileUpload/parts'
- */
-
-interface FileUploadPartsValue {
-  /**
-   * The container of the uploader.
-   */
-  Root: ElementType
-  /**
-   * The label of the uploader.
-   */
-  Label: ElementType
-  /**
-   * The dropzone of the uploader.
-   */
-  Dropzone: ElementType
-  /**
-   * The trigger of the uploader.
-   */
-  Trigger: ElementType
-  /**
-   * The clear trigger of the uploader.
-   */
-  ClearTrigger: ElementType
-  /**
-   * The item group of the uploader.
-   */
-  ItemGroup: ElementType
-  /**
-   * The item of the uploader.
-   */
-  Item: ElementType
-  /**
-   * The item preview of the uploader.
-   */
-  ItemPreview: ElementType
-  /**
-   * The item preview image of the uploader.
-   */
-  ItemPreviewImage: ElementType
-  /**
-   * The item name of the uploader.
-   */
-  ItemName: ElementType
-  /**
-   * The item size text of the uploader.
-   */
-  ItemSizeText: ElementType
-  /**
-   * The item delete trigger of the uploader.
-   */
-  ItemDeleteTrigger: ElementType
-  /**
-   * The hidden input of the uploader.
-   */
-  HiddenInput: ElementType
-  /**
-   * The context of the uploader.
-   */
-  Context: ElementType
-  /**
-   * The content container of the dropzone.
-   */
-  Content: ElementType
-  /**
-   * The icon of the uploader.
-   */
-  Icon: ElementType
-  /**
-   * The heading of the uploader.
-   */
-  Heading: ElementType
-  /**
-   * The description of the uploader.
-   */
-  Description: ElementType
-}
-
-/**
- * An Object containing the parts of the FileUploader component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the uploaderParts object and
- * the entire family of components vs. only what you use.
- */
-export const FileUploadParts: FileUploadPartsValue = {
-  Context: FileUploadContext,
-  Root: FileUploadRoot,
-  Label: FileUploadLabel,
-  Dropzone: FileUploadDropzone,
-  Trigger: FileUploadTrigger,
-  ClearTrigger: FileUploadClearTrigger,
-  ItemGroup: FileUploadItemGroup,
-  Item: FileUploadItem,
-  ItemPreview: FileUploadItemPreview,
-  ItemPreviewImage: FileUploadItemPreviewImage,
-  ItemName: FileUploadItemName,
-  ItemSizeText: FileUploadItemSizeText,
-  ItemDeleteTrigger: FileUploadItemDeleteTrigger,
-  HiddenInput: FileUploadHiddenInput,
-  // custom cerby primitives
-  Content: FileUploadContent,
-  Icon: FileUploadIcon,
-  Heading: FileUploadHeading,
-  Description: FileUploadDescription,
-}

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