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

package/src/components/field/primitives.tsx

@@ -1,135 +0,0 @@
-import {
-  Field,
-  type FieldHelperTextProps as ArkFieldHelperTextProps,
-  type FieldInputProps as ArkFieldInputProps,
-  type FieldLabelProps as ArkFieldLabelProps,
-  type FieldRootProps as ArkFieldRootProps,
-  type FieldTextareaProps as ArkFieldTextareaProps,
-  type FieldRequiredIndicatorProps as ArkFieldRequiredIndicatorProps,
-} from '@ark-ui/react/field'
-import { ark, type HTMLArkProps } from '@ark-ui/react'
-import { field, type FieldVariantProps } from 'styled-system/recipes'
-import { css, cx } from 'styled-system/css'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-import { CerberusFieldInput } from './input'
-import { CerberusFieldErrorText } from './error-text'
-
-/**
- * This module contains all the primitives of the Field component.
- * @module 'field'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(field)
-
-// Root
-
-export type FieldRootProps = CerberusPrimitiveProps<
-  ArkFieldRootProps & FieldVariantProps
->
-export const FieldRoot = withSlotRecipe(Field.Root, 'root')
-
-// Label
-
-function FieldLabelEl(props: FieldLabelProps) {
-  const { children, hideLabel, className, ...nativeProps } = props
-  return (
-    <Field.Label
-      {...nativeProps}
-      className={cx(className, hideLabel && css({ srOnly: true }))}
-    >
-      {children}
-      <Field.RequiredIndicator>(required)</Field.RequiredIndicator>
-    </Field.Label>
-  )
-}
-
-export type FieldLabelProps = CerberusPrimitiveProps<ArkFieldLabelProps> & {
-  /**
-   * Whether to hide the label visually while keeping it accessible to screen readers.
-   */
-  hideLabel?: boolean
-}
-export const FieldLabel = withSlotRecipe(FieldLabelEl, 'label')
-
-// Required Indicator
-
-function FieldRequiredIndicatorEl(props: FieldRequiredIndicatorProps) {
-  return (
-    <Field.RequiredIndicator {...props}>(required)</Field.RequiredIndicator>
-  )
-}
-
-export type FieldRequiredIndicatorProps =
-  CerberusPrimitiveProps<ArkFieldRequiredIndicatorProps>
-export const FieldRequiredIndicator = withNoRecipe(FieldRequiredIndicatorEl)
-
-// Input
-
-export type FieldInputRootProps = CerberusPrimitiveProps<
-  HTMLArkProps<'div'> & FieldVariantProps
->
-export const FieldInputRoot = withSlotRecipe(ark.div, 'inputRoot')
-
-export type FieldInputProps = CerberusPrimitiveProps<
-  ArkFieldInputProps & FieldVariantProps
->
-export const FieldInput = withSlotRecipe(Field.Input, 'input')
-
-// Helper Text
-
-export type FieldHelperTextProps =
-  CerberusPrimitiveProps<ArkFieldHelperTextProps>
-export const FieldHelperText = withSlotRecipe(Field.HelperText, 'helperText')
-
-// Error Text
-
-export type FieldErrorTextProps =
-  CerberusPrimitiveProps<ArkFieldHelperTextProps>
-export const FieldErrorText = withSlotRecipe(
-  CerberusFieldErrorText,
-  'errorText',
-)
-
-// Textarea
-
-export type FieldTextareaProps = CerberusPrimitiveProps<ArkFieldTextareaProps>
-export const FieldTextarea = withSlotRecipe(Field.Textarea, 'textarea')
-
-/**
- * A named export for the FieldInput component.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * import { Input } from '@cerberus/react'
- *
- * <Field
- *   label="Enter your email"
- *   helperText="We'll never share your email with anyone else."
- *   errorText="Email is required."
- *   required
- * >
- *   <Input type="email" />
- * </Field>
- * ```
- */
-export const Input = CerberusFieldInput
-
-/**
- * A named export for the FieldTextarea component.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * import { Textarea } from '@cerberus/react'
- *
- * <Field
- *   label="Comments"
- *   helperText="Your comments are valuable to us."
- * >
- *   <Textarea />
- * </Field>
- * ```
- */
-export const Textarea = FieldTextarea

package/src/components/field/start-indicator.tsx

@@ -1,23 +0,0 @@
-import { cx } from 'styled-system/css'
-import { field } from 'styled-system/recipes'
-import type { HTMLAttributes } from 'react'
-
-export type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>
-
-/**
- * The start indicator displays an indicator at the start of the Input.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- */
-export function FieldStartIndicator(props: FieldIndicatorProps) {
-  const styles = field()
-
-  if (!props.children) return null
-
-  return (
-    <span
-      {...props}
-      data-part="start-indicator"
-      className={cx(props.className, styles.startIndicator)}
-    />
-  )
-}

package/src/components/field/status-indicator.tsx

@@ -1,58 +0,0 @@
-'use client'
-
-import { useFieldContext } from '@ark-ui/react'
-import { cx } from 'styled-system/css'
-import { field } from 'styled-system/recipes'
-import { useCerberusContext } from '../../context/cerberus'
-import type { HTMLAttributes, ReactNode } from 'react'
-
-export interface FieldStatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * The fallback content to display when the field is valid.
-   */
-  fallback?: ReactNode
-}
-
-/**
- * The invalid status indicator for the Field component.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * <FieldRoot>
- *   <FieldStatusIndicator />
- * </FieldRoot>
- * ```
- */
-export function FieldStatusIndicator(props: FieldStatusIndicatorProps) {
-  const { fallback, ...nativeProps } = props
-
-  const fieldContext = useFieldContext()
-  const styles = field()
-
-  const { icons } = useCerberusContext()
-  const { invalid: InvalidIcon } = icons
-
-  if (fieldContext?.invalid) {
-    return (
-      <span
-        {...nativeProps}
-        aria-hidden="true"
-        data-invalid
-        className={cx(nativeProps.className, styles.statusIndicator)}
-      >
-        <InvalidIcon />
-      </span>
-    )
-  }
-
-  return (
-    <span
-      {...nativeProps}
-      aria-hidden="true"
-      data-part="end-indicator"
-      className={cx(nativeProps.className, styles.endIndicator)}
-    >
-      {fallback}
-    </span>
-  )
-}

package/src/components/fieldset/fieldset.tsx

@@ -1,54 +0,0 @@
-import { splitProps } from '../../utils'
-import { FieldsetParts } from './parts'
-import type { FieldsetRootProps } from './primitives'
-
-/**
- * This module contains the Fieldset component.
- * @module Fieldset
- */
-
-export interface FieldsetProps extends FieldsetRootProps {
-  /**
-   * The legend/title/label of the fieldset group.
-   */
-  legend?: string
-  /**
-   * The description text for the fieldset group.
-   */
-  helperText?: string
-  /**
-   * The error text for the fieldset group shown when the field is invalid.
-   */
-  errorText?: string
-}
-
-/**
- * A component used for grouping related fields in a form that is an
- * abstraction of the Fieldset primitives.
- * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
- * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
- */
-export function Fieldset(props: FieldsetProps) {
-  const [fieldsetProps, { usage }, rootProps] = splitProps(
-    props,
-    ['legend', 'helperText', 'errorText', 'children'],
-    ['usage'],
-  )
-
-  return (
-    <FieldsetParts.Root {...rootProps}>
-      <FieldsetParts.Legend usage={usage}>
-        {fieldsetProps.legend}
-      </FieldsetParts.Legend>
-      <FieldsetParts.HelperText usage={usage}>
-        {fieldsetProps.helperText}
-      </FieldsetParts.HelperText>
-
-      {fieldsetProps.children}
-
-      <FieldsetParts.ErrorText>
-        {fieldsetProps.errorText}
-      </FieldsetParts.ErrorText>
-    </FieldsetParts.Root>
-  )
-}

package/src/components/fieldset/index.ts

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

package/src/components/fieldset/parts.ts

@@ -1,47 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  FieldsetErrorText,
-  FieldsetHelperText,
-  FieldsetLegend,
-  FieldsetRoot,
-} from './primitives'
-
-/**
- * This module contains the parts of the Field component.
- * @module 'field/parts'
- */
-
-interface FieldsetPartsValue {
-  /**
-   * The container of the field.
-   */
-  Root: ElementType
-  /**
-   * The label of the field.
-   */
-  Legend: ElementType
-  /**
-   * The text that displays when the field is valid.
-   */
-  HelperText: ElementType
-  /**
-   * The text that displays when the field is invalid.
-   */
-  ErrorText: ElementType
-}
-
-/**
- * An Object containing the parts of the Field component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the FieldParts object and
- * the entire family of components vs. only what you use.
- */
-export const FieldsetParts: FieldsetPartsValue = {
-  Root: FieldsetRoot,
-  Legend: FieldsetLegend,
-  HelperText: FieldsetHelperText,
-  ErrorText: FieldsetErrorText,
-}

package/src/components/fieldset/primitives.tsx

@@ -1,48 +0,0 @@
-import {
-  Fieldset,
-  type FieldsetHelperTextProps as ArkFieldsetHelperText,
-  type FieldsetLegendProps as ArkFieldsetLegendProps,
-  type FieldsetRootProps as ArkFieldsetRootProps,
-} from '@ark-ui/react/fieldset'
-import { fieldset, type FieldsetVariantProps } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains all the primitives of the Fieldset component.
- * @module 'react/fieldset'
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(fieldset)
-
-// Root
-
-export const FieldsetRoot = withSlotRecipe(Fieldset.Root, 'root')
-export type FieldsetRootProps = CerberusPrimitiveProps<
-  ArkFieldsetRootProps & FieldsetVariantProps
->
-
-// Legend
-
-export type FieldsetLegendProps = CerberusPrimitiveProps<
-  ArkFieldsetLegendProps & FieldsetVariantProps
->
-export const FieldsetLegend = withSlotRecipe(Fieldset.Legend, 'legend')
-
-// Helper Text
-
-export type FieldsetHelperTextProps = CerberusPrimitiveProps<
-  ArkFieldsetHelperText & FieldsetVariantProps
->
-export const FieldsetHelperText = withSlotRecipe(
-  Fieldset.HelperText,
-  'helperText',
-)
-
-// Error Text
-
-export type FieldsetErrorTextProps =
-  CerberusPrimitiveProps<ArkFieldsetHelperText>
-export const FieldsetErrorText = withSlotRecipe(Fieldset.ErrorText, 'errorText')

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

@@ -1,271 +0,0 @@
-'use client'
-
-import {
-  useCallback,
-  useMemo,
-  type HTMLAttributes,
-  type MouseEvent,
-} from 'react'
-import { VStack } from 'styled-system/jsx'
-import { css, cx } from 'styled-system/css'
-import { hstack } from 'styled-system/patterns'
-import { fileStatus, type FileStatusVariantProps } from 'styled-system/recipes'
-import { useCerberusContext } from '../../context/cerberus'
-import { Avatar } from '../avatar/avatar'
-import { Field, FieldHelperText } from '../field/index'
-import { IconButton } from '../icon-button/index'
-import { ProgressBar, type ProgressBarProps } from '../progress/index'
-import { Text } from '../text/index'
-
-/**
- * This module contains the FileStatus component.
- * @module
- */
-
-/**
- * The available values of the fileStatus helper Object.
- * @example
- * ```tsx
- * import { fileStatus } from '@cerberus/react'
- * processStatus.TODO // 'todo'
- * ```
- */
-export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]
-
-/**
- * The actions that can be performed on a file.
- */
-export type FileStatusActions = 'cancel' | 'retry' | 'delete'
-export interface FileBaseStatusProps extends Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'onClick'
-> {
-  /**
-   * A unique identifier for the file status. Required for accessibility.
-   */
-  id: string
-  /**
-   * The name of the file.
-   */
-  file: string
-  /**
-   * The percentage of the file that has been processed.
-   */
-  now: ProgressBarProps['now']
-  /**
-   * The status of the file.
-   */
-  status: processStatus
-  /**
-   * The action to perform on the file when a user clicks the
-   * button located at the end of the status card.
-   * @param status - The status of the file.
-   * @param e - The event object.
-   * @example
-   * ```tsx
-   * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
-   * ```
-   * @default () => {}
-   */
-  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
-}
-export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps
-
-/**
- * A helper object to represent the status of a file.
- * @example
- * ```tsx
- * import { fileStatus } from '@cerberus/react'
- * processStatus.TODO // 'todo'
- * ```
- */
-export const enum processStatus {
-  TODO = 'todo',
-  PROCESSING = 'processing',
-  DONE = 'done',
-  ERROR = 'error',
-}
-
-/**
- * A component that displays the status of a file during file processing.
- * @see https://cerberus.digitalu.design/react/file-uploader
- * @example
- * ```tsx
- * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
- * ```
- */
-export function FileStatus(props: FileStatusProps) {
-  const { file, now, status, onClick, ...nativeProps } = props
-  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])
-  const palette = useMemo(() => getPalette(status), [status])
-  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])
-  const styles = useMemo(() => {
-    switch (status as processStatus) {
-      case processStatus.TODO:
-        return fileStatus({ status: 'todo' })
-      case processStatus.PROCESSING:
-        return fileStatus({ status: 'processing' })
-      case processStatus.DONE:
-        return fileStatus({ status: 'done' })
-      case processStatus.ERROR:
-        return fileStatus({ status: 'error' })
-      default:
-        return fileStatus()
-    }
-  }, [status])
-
-  const handleClick = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      const actionStatus = getStatusActionLabel(
-        status,
-      ).toLocaleLowerCase() as FileStatusActions
-      onClick(actionStatus, e)
-    },
-    [onClick, status],
-  )
-
-  return (
-    <div
-      {...nativeProps}
-      className={cx(nativeProps.className, styles.root, hstack())}
-    >
-      <Avatar
-        gradient={modalIconPalette}
-        fallback={<MatchFileStatusIcon size={24} status={status} />}
-      />
-
-      <VStack alignItems="flex-start" gap="0.12rem" w="full">
-        <Text as="small" color="page.text.initial" textStyle="label-sm">
-          {file}
-        </Text>
-        <ProgressBar
-          id={props.id}
-          label="File upload status"
-          now={now}
-          size="sm"
-        />
-        <Field label="" invalid={modalIconPalette === 'hades-dark'}>
-          <FieldHelperText
-            className={css({
-              color: 'page.text.100',
-            })}
-            id={`help:${file}`}
-          >
-            <MatchFileStatusText status={status} now={now} />
-          </FieldHelperText>
-        </Field>
-      </VStack>
-
-      <IconButton
-        ariaLabel={actionLabel}
-        onClick={handleClick}
-        palette={palette}
-        size="sm"
-      >
-        <MatchStatusAction status={status} />
-      </IconButton>
-    </div>
-  )
-}
-
-interface FileStatusElProps {
-  status: FileStatusProps['status']
-  size?: 16 | 20 | 24 | 32
-  now?: number
-}
-
-function MatchFileStatusIcon(props: FileStatusElProps) {
-  const { icons } = useCerberusContext()
-  const {
-    waitingFileUploader: TodoIcon,
-    fileUploader: FileUploaderIcon,
-    invalidAlt: InvalidIcon,
-    successNotification: DoneIcon,
-  } = icons
-
-  switch (props.status as processStatus) {
-    case processStatus.TODO:
-      return <TodoIcon size={props.size} />
-    case processStatus.PROCESSING:
-      return <FileUploaderIcon size={props.size} />
-    case processStatus.DONE:
-      return <DoneIcon size={props.size} />
-    case processStatus.ERROR:
-      return <InvalidIcon size={props.size} />
-    default:
-      throw new Error('Unknown status')
-  }
-}
-
-function MatchFileStatusText(props: FileStatusElProps) {
-  switch (props.status as processStatus) {
-    case processStatus.TODO:
-      return 'Waiting to upload'
-    case processStatus.PROCESSING:
-      return `${props.now}% Complete`
-    case processStatus.DONE:
-      return 'File uploaded successfully'
-    case processStatus.ERROR:
-      return 'There was an error uploading the file'
-    default:
-      throw new Error('Invalid status')
-  }
-}
-
-function MatchStatusAction(props: FileStatusElProps) {
-  const { icons } = useCerberusContext()
-  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons
-  switch (props.status as processStatus) {
-    case processStatus.TODO:
-    case processStatus.PROCESSING:
-      return <CloseIcon />
-    case processStatus.ERROR:
-      return <RedoIcon />
-    case processStatus.DONE:
-      return <TrashIcon />
-    default:
-      throw new Error('Invalid status')
-  }
-}
-
-function getStatusActionLabel(status: FileStatusKey) {
-  switch (status) {
-    case processStatus.TODO:
-    case processStatus.PROCESSING:
-      return 'Cancel'
-    case processStatus.ERROR:
-      return 'Retry'
-    case processStatus.DONE:
-      return 'Delete'
-    default:
-      return ''
-  }
-}
-
-function getPalette(status: FileStatusKey) {
-  switch (status) {
-    case processStatus.TODO:
-    case processStatus.PROCESSING:
-      return 'danger'
-    case processStatus.ERROR:
-      return 'action'
-    case processStatus.DONE:
-      return 'danger'
-    default:
-      return 'action'
-  }
-}
-
-function getModalIconPalette(status: FileStatusKey) {
-  switch (status) {
-    case processStatus.TODO:
-    case processStatus.PROCESSING:
-      return 'charon-light'
-    case processStatus.ERROR:
-      return 'hades-dark'
-    case processStatus.DONE:
-      return 'thanatos-dark'
-    default:
-      return 'charon-light'
-  }
-}

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

@@ -1,60 +0,0 @@
-'use client'
-
-import { PropsWithChildren } from 'react'
-import { useCerberusContext } from '../../context/cerberus'
-import { splitProps } from '../../utils'
-import { Show } from '../show/index'
-import { Avatar } from '../avatar/avatar'
-import { formatFileTypes } from './utils'
-import { ImgPreview } from './img-preview'
-import { FileUploadParts } from './parts'
-import { FileUploadRootProps } from './primitives'
-
-export interface FileUploaderProps extends FileUploadRootProps {
-  /**
-   * The optional heading to display in the FileUploader component.
-   */
-  heading?: string
-  /**
-   * Show a preview of the uploaded image.
-   */
-  showPreview?: boolean
-}
-
-/**
- * A component that allows the user to upload files.
- * @see https://cerberus.digitalu.design/docs/components/file-uploader
- */
-export function FileUploader(props: PropsWithChildren<FileUploaderProps>) {
-  const [elProps, rootProps] = splitProps(props, ['heading', 'showPreview'])
-  const { showPreview = true } = elProps
-
-  const { icons } = useCerberusContext()
-  const { waitingFileUploader: Icon } = icons
-
-  return (
-    <FileUploadParts.Root {...rootProps}>
-      <FileUploadParts.Dropzone>
-        <FileUploadParts.Icon>
-          <Avatar gradient="charon-light" fallback={<Icon />} />
-        </FileUploadParts.Icon>
-
-        <FileUploadParts.Content>
-          <Show when={elProps.heading}>
-            <FileUploadParts.Heading>{elProps.heading}</FileUploadParts.Heading>
-          </Show>
-          Import {formatFileTypes(rootProps.accept)} files
-          <FileUploadParts.Description>
-            Drag and drop files or click to upload
-          </FileUploadParts.Description>
-        </FileUploadParts.Content>
-      </FileUploadParts.Dropzone>
-
-      <Show when={showPreview} fallback={<>{props.children}</>}>
-        {() => <ImgPreview />}
-      </Show>
-
-      <FileUploadParts.HiddenInput />
-    </FileUploadParts.Root>
-  )
-}