@cerberus-design/react 0.18.4 → 0.19.0

package/build/modern/components/Text.d.ts

@@ -1,4 +0,0 @@
-export { Text_alias_1 as Text } from '../_tsup-dts-rollup.js';
-export { Headings_alias_1 as Headings } from '../_tsup-dts-rollup.js';
-export { TextElements_alias_1 as TextElements } from '../_tsup-dts-rollup.js';
-export { TextProps_alias_1 as TextProps } from '../_tsup-dts-rollup.js';

package/build/modern/components/Text.js

@@ -1,7 +0,0 @@
-import {
-  Text
-} from "../chunk-ZPHPCKAG.js";
-export {
-  Text
-};
-//# sourceMappingURL=Text.js.map

package/build/modern/components/Tooltip.d.ts

@@ -1,2 +0,0 @@
-export { Tooltip_alias_1 as Tooltip } from '../_tsup-dts-rollup.js';
-export { TooltipProps_alias_1 as TooltipProps } from '../_tsup-dts-rollup.js';

package/build/modern/components/Tooltip.js

@@ -1,7 +0,0 @@
-import {
-  Tooltip
-} from "../chunk-L2EGF5AV.js";
-export {
-  Tooltip
-};
-//# sourceMappingURL=Tooltip.js.map

package/build/modern/components/for.d.ts

@@ -1,2 +0,0 @@
-export { For_alias_1 as For } from '../_tsup-dts-rollup.js';
-export { ForProps_alias_1 as ForProps } from '../_tsup-dts-rollup.js';

package/build/modern/components/for.js

@@ -1,7 +0,0 @@
-import {
-  For
-} from "../chunk-I5RGBB57.js";
-export {
-  For
-};
-//# sourceMappingURL=for.js.map

package/src/components/CircularProgress.tsx

@@ -1,184 +0,0 @@
-import { circularProgress } from 'styled-system/recipes'
-import type { SVGProps } from 'react'
-import { Show } from './Show'
-import { For } from './for'
-
-/**
- * This module contains the CircularProgress component.
- * @module
- */
-
-export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
-  /**
-   * 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 current value of the CircularProgress
-   */
-  now: number
-  /**
-   * The title of the CircularProgress for a11y
-   */
-  title: string
-  /**
-   * What is shown below the now value (default: 'Done')
-   */
-  syntax?: string
-  /**
-   * The background style of the CircularProgress
-   */
-  bgStyle?: 'filled' | 'transparent'
-  /**
-   * The size of the CircularProgress
-   * @default '1.1em'
-   */
-  size?: string
-}
-
-/**
- * The CircularProgress component is used to display a loading indicator.
- * @param props - SVG element attributes
- * @param props.now - The current value of the CircularProgress
- * @param props.title - The title of the CircularProgress for a11y
- * @param props.label - What is shown below the now value (default: 'Done')
- * @see https://cerberus.digitalu.design/react/progress-indicators
- * @example
- * ```tsx
- * <CircularProgress now={24} title="Course completion" label="done" />
- * ```
- */
-export function CircularProgress(props: CircularProgressProps) {
-  const { size = '1.1em' } = props
-  const sizeProps = props.size
-    ? {
-        height: size,
-        width: size,
-      }
-    : {}
-
-  const strokeW: number = 14
-  const radius = `calc(50% * (1 - ${strokeW}/100))`
-  const status: string = props.syntax ?? 'Done'
-  const now: number = props.now >= 100 ? 100 : props.now
-  const bgStyle: string = props.bgStyle ?? 'filled'
-
-  const styles = circularProgress()
-
-  return (
-    <div
-      id={props.id}
-      aria-label={props.label}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={now}
-      className={styles.root}
-      role="progressbar"
-    >
-      <svg
-        data-complete={now === 100}
-        className={styles.group}
-        fill="none"
-        strokeLinecap="round"
-        strokeWidth={strokeW}
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-        {...sizeProps}
-      >
-        <title>{props.title}</title>
-        <desc>{`${now}% ${status}`}</desc>
-
-        <defs>
-          <linearGradient id="gradient">
-            <stop
-              offset="0%"
-              stopColor="var(--cerberus-colors-data-viz-progress-start)"
-            />
-            <stop
-              offset="100%"
-              stopColor="var(--cerberus-colors-data-viz-progress-end)"
-            />
-          </linearGradient>
-        </defs>
-
-        <Show when={bgStyle === 'filled'}>
-          <circle
-            className={styles.base}
-            cx="50%"
-            cy="50%"
-            r={`calc(50% * (1 - ${strokeW}/100))`}
-            pathLength="100"
-          />
-        </Show>
-
-        <circle
-          className={styles.track}
-          cx="50%"
-          cy="50%"
-          r={radius}
-          pathLength="100"
-        />
-
-        <Show
-          when={now > 0}
-          fallback={
-            <text
-              data-fallback
-              className={styles.description}
-              x="50%"
-              y="27%"
-              dominantBaseline="middle"
-              textAnchor="middle"
-              textLength="65%"
-            >
-              <For each={status.split(' ')}>
-                {(word, idx) => (
-                  <tspan key={`${word}:${idx}`} x="50%" dy="1.2em">
-                    {word}
-                  </tspan>
-                )}
-              </For>
-            </text>
-          }
-        >
-          <circle
-            data-complete={now === 100}
-            className={styles.path}
-            cx="50%"
-            cy="50%"
-            fill="none"
-            r={radius}
-            pathLength="100"
-            strokeDasharray="100"
-            strokeDashoffset={100 - now}
-            transform="rotate(-90 50 50)"
-          />
-          <g>
-            <text
-              className={styles.title}
-              x="50%"
-              y="47%"
-              dominantBaseline="middle"
-              textAnchor="middle"
-            >
-              {now}%
-            </text>
-            <text
-              className={styles.description}
-              x="50%"
-              y="59%"
-              dominantBaseline="middle"
-              textAnchor="middle"
-            >
-              {status}
-            </text>
-          </g>
-        </Show>
-      </svg>
-    </div>
-  )
-}

package/src/components/FeatureFlag.tsx

@@ -1,21 +0,0 @@
-'use client'
-
-import type { PropsWithChildren } from 'react'
-import { useFeatureFlags } from '../context/feature-flags'
-import { Show } from './Show'
-
-export interface FeatureFlagProps {
-  /**
-   * The name of the feature flag to check.
-   */
-  flag: string
-}
-
-/**
- * A component that allows you to show or hide content based on a feature flag.
- * @see https://cerberus.digitalu.design/react/feature-flags
- */
-export function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {
-  const showContent = useFeatureFlags(props.flag)
-  return <Show when={showContent}>{props.children}</Show>
-}

package/src/components/FileStatus.tsx

@@ -1,278 +0,0 @@
-'use client'
-
-import {
-  useCallback,
-  useMemo,
-  type HTMLAttributes,
-  type MouseEvent,
-} from 'react'
-import { fileStatus, type FileStatusVariantProps } from 'styled-system/recipes'
-import { css, cx } from 'styled-system/css'
-import { hstack, vstack } from 'styled-system/patterns'
-import { useCerberusContext } from '../context/cerberus'
-import { ProgressBar, type ProgressBarProps } from './ProgressBar'
-import { IconButton } from './IconButton'
-import { Avatar } from './avatar/avatar'
-import { Field, FieldHelperText } from './field/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) {
-      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],
-  )
-
-  return (
-    <div
-      {...nativeProps}
-      className={cx(nativeProps.className, styles.root, hstack())}
-    >
-      <Avatar
-        gradient={modalIconPalette}
-        fallback={<MatchFileStatusIcon size={24} status={status} />}
-      />
-
-      <div
-        className={vstack({
-          alignItems: 'flex-start',
-          gap: '0.12rem',
-          w: 'full',
-        })}
-      >
-        <small
-          className={css({
-            color: 'page.text.initial',
-            textStyle: 'label-sm',
-          })}
-        >
-          {file}
-        </small>
-        <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>
-      </div>
-
-      <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) {
-    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) {
-    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) {
-    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-light'
-    default:
-      return 'charon-light'
-  }
-}

package/src/components/FileUploader.tsx

@@ -1,72 +0,0 @@
-'use client'
-
-import { cx } from 'styled-system/css'
-import { vstack } from 'styled-system/patterns'
-import { type InputHTMLAttributes } from 'react'
-import { Show } from './Show'
-import { fileUploader } from 'styled-system/recipes'
-import { useCerberusContext } from '../context/cerberus'
-import { Avatar } from './avatar/avatar'
-
-export interface FileUploaderProps
-  extends InputHTMLAttributes<HTMLInputElement> {
-  /**
-   * The optional heading to display in the FileUploader component.
-   */
-  heading?: string
-  /**
-   * The name of the file input element.
-   */
-  name: string
-  /**
-   * Disable the FileUploader component. Good for single-use file uploads.
-   */
-  disabled?: boolean
-}
-
-/**
- * A component that allows the user to upload files.
- * @see https://cerberus.digitalu.design/react/file-uploader
- */
-export function FileUploader(props: FileUploaderProps) {
-  const { icons } = useCerberusContext()
-  const styles = fileUploader()
-  const { waitingFileUploader: Icon } = icons
-
-  return (
-    <div
-      {...(props.disabled ? { 'aria-disabled': true } : {})}
-      className={cx(
-        vstack({
-          justify: 'center',
-        }),
-        styles.container,
-      )}
-    >
-      <div className={styles.icon}>
-        <Avatar gradient="charon-light" fallback={<Icon />} />
-      </div>
-
-      <label
-        className={cx(
-          vstack({
-            justify: 'center',
-          }),
-          styles.label,
-        )}
-        htmlFor={props.name}
-      >
-        <Show when={props.heading}>
-          <p className={styles.heading}>{props.heading}</p>
-        </Show>
-        Import {props.accept?.replace(',', ', ')} files
-        <p className={styles.description}>Click to select files</p>
-        <input
-          {...props}
-          className={cx(props.className, styles.input)}
-          type="file"
-        />
-      </label>
-    </div>
-  )
-}

package/src/components/IconButton.tsx

@@ -1,38 +0,0 @@
-import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import { cx } from 'styled-system/css'
-import { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'
-
-/**
- * This module contains the Icon Button component.
- * @module
- */
-
-export interface IconButtonRawProps extends HTMLArkProps<'button'> {
-  /**
-   * The aria-label attribute for the icon button.
-   */
-  ariaLabel: string
-}
-export type IconButtonProps = IconButtonRawProps & IconButtonVariantProps
-
-/**
- * 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, palette, usage, size, ...nativeProps } = props
-  return (
-    <ark.button
-      {...nativeProps}
-      aria-label={ariaLabel ?? 'Icon Button'}
-      className={cx(
-        nativeProps.className,
-        iconButton({
-          palette,
-          usage,
-          size,
-        }),
-      )}
-    />
-  )
-}