@cerberus-design/react 0.10.4 → 0.11.0

package/src/components/FieldsetLabel.tsx

@@ -0,0 +1,59 @@
+import { cx } from '@cerberus/styled-system/css'
+import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import type { LabelProps } from './Label'
+
+/**
+ * This module contains the FieldsetLabel component.
+ * @module FieldsetLabel
+ */
+
+export type FieldsetLabelProps = LabelProps & LabelVariantProps
+
+/**
+ * Used for labeling inputs that are children of a Fieldset group.
+ * @memberof Fieldset
+ * @see https://cerberus.digitalu.design/react/fieldset
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @example
+ * ```tsx
+ * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
+ * import { Hstack } from '@cerberus/styled-system/jsx'
+ *
+ * function SomeForm() {
+ *   return (
+ *    <form>
+ *     <Fieldset>
+ *      <Legend>Do you like cats?</Legend>
+ *      <Hstack>
+ *        <Field>
+ *          <Radio id="yes" name="cats" value="yes" />
+ *          <FieldsetLabel htmlFor="yes">Yes</FieldsetLabel>
+ *        </Field>
+ *      </Hstack>
+ *      <Hstack>
+ *        <Field>
+ *         <Radio id="no" name="cats" value="no" />
+ *         <FieldsetLabel htmlFor="no">No</FieldsetLabel>
+ *        </Field>
+ *      </Hstack>
+ *     </Fieldset>
+ *    </form>
+ *   )
+ * }
+ * ```
+ */
+export function FieldsetLabel(props: FieldsetLabelProps) {
+  const { size, usage, ...nativeProps } = props
+  return (
+    <label
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        label({
+          size,
+          usage,
+        }),
+      )}
+    />
+  )
+}

package/src/components/FileStatus.tsx

@@ -189,6 +189,7 @@ interface FileStatusElProps {
 
 function MatchFileStatusIcon(props: FileStatusElProps) {
   const {
+    waitingFileUploader: TodoIcon,
     fileUploader: FileUploaderIcon,
     invalidAlt: InvalidIcon,
     successNotification: DoneIcon,
@@ -196,6 +197,7 @@ function MatchFileStatusIcon(props: FileStatusElProps) {
 
   switch (props.status) {
     case processStatus.TODO:
+      return <TodoIcon size={props.size} />
     case processStatus.PROCESSING:
       return <FileUploaderIcon size={props.size} />
     case processStatus.DONE:

package/src/components/FileUploader.tsx

@@ -18,6 +18,10 @@ export interface FileUploaderProps
    * The name of the file input element.
    */
   name: string
+  /**
+   * Disable the FileUploader component. Good for single-use file uploads.
+   */
+  disabled?: boolean
 }
 
 /**
@@ -26,10 +30,11 @@ export interface FileUploaderProps
  */
 export function FileUploader(props: FileUploaderProps) {
   const styles = fileUploader()
-  const Icon = $cerberusIcons.fileUploader
+  const { waitingFileUploader: Icon } = $cerberusIcons
 
   return (
     <div
+      {...(props.disabled ? { 'aria-disabled': true } : {})}
       className={cx(
         vstack({
           justify: 'center',

package/src/components/Label.tsx

@@ -57,7 +57,7 @@ export function Label(props: PropsWithChildren<LabelProps>) {
       <Show when={required}>
         <span
           className={css({
-            color: 'inherit',
+            color: 'page.text.100',
             fontSize: 'inherit',
           })}
         >

package/src/components/Legend.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { css, cx } from '@cerberus/styled-system/css'
+import { type HTMLAttributes } from 'react'
+import { useFieldContext } from '../context/field'
+import { Show } from './Show'
+import {
+  label,
+  type LabelVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import { hstack } from '@cerberus-design/styled-system/patterns'
+
+/**
+ * This module contains the Fieldset component.
+ * @module Fieldset
+ */
+
+export type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
+
+/**
+ * A component to provide a global label for a group of related elements in a form (for accessibility).
+ * @memberof Fieldset
+ * @see https://cerberus.digitalu.com/react/fieldset
+ * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
+ * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
+ * @example
+ * ```tsx
+ * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
+ * import { Hstack } from '@cerberus/styled-system/jsx'
+ *
+ * function SomeForm() {
+ *   return (
+ *    <form>
+ *     <Fieldset>
+ *      <Legend>Do you like cats?</Legend>
+ *      <Hstack>
+ *        <Field>
+ *          <Radio id="yes" name="cats" value="yes" />
+ *          <Label htmlFor="yes">Yes</Label>
+ *        </Field>
+ *      </Hstack>
+ *      <Hstack>
+ *        <Field>
+ *         <Radio id="no" name="cats" value="no" />
+ *         <Label htmlFor="no">No</Label>
+ *        </Field>
+ *      </Hstack>
+ *     </Fieldset>
+ *    </form>
+ *   )
+ * }
+ * ```
+ */
+export function Legend(props: LegendProps) {
+  const { size, ...nativeProps } = props
+  const { invalid, ...formState } = useFieldContext()
+
+  return (
+    <legend
+      {...nativeProps}
+      {...formState}
+      {...(invalid && { 'aria-invalid': true })}
+      className={cx(
+        nativeProps.className,
+        hstack({
+          justify: 'space-between',
+          w: 'full',
+        }),
+        label({
+          size,
+        }),
+      )}
+    >
+      {nativeProps.children}
+      <Show when={formState.required}>
+        <span
+          className={css({
+            color: 'page.text.100',
+            fontSize: 'inherit',
+          })}
+        >
+          (required)
+        </span>
+      </Show>
+    </legend>
+  )
+}

package/src/components/ModalHeader.tsx

@@ -29,8 +29,8 @@ export function ModalHeader(props: ModalHeaderProps) {
         props.className,
         vstack({
           alignItems: 'flex-start',
-          gap: '4',
-          mb: '8',
+          gap: 'md',
+          mb: 'md',
         }),
       )}
     />

package/src/components/Radio.tsx

@@ -49,7 +49,16 @@ export function Radio(props: PropsWithChildren<RadioProps>) {
   const styles = radio({ size })
 
   return (
-    <div className={cx('group', hstack(), styles.root)} tabIndex={0}>
+    <div
+      className={cx(
+        'group',
+        hstack({
+          gap: 'sm',
+        }),
+        styles.root,
+      )}
+      tabIndex={0}
+    >
       <input
         {...nativeProps}
         {...state}

package/src/components/Th.tsx

@@ -56,6 +56,9 @@ export function Th(props: ThProps) {
               justifyContent: 'space-between',
               userSelect: 'none',
               w: 'full',
+              _hover: {
+                bgColor: 'page.bg.100',
+              },
             }),
           )}
           onClick={onClick}

package/src/config/cerbIcons.ts

@@ -1,21 +1,21 @@
 import {
   Checkmark,
-  CheckmarkFilled,
+  CheckmarkOutline,
   ChevronDown,
   CloseFilled,
   CloudUpload,
-  ErrorFilled,
   Information,
-  InformationFilled,
   Restart,
   TrashCan,
   UserFilled,
   Warning,
+  WarningAlt,
   WarningFilled,
   type CarbonIconType,
 } from '@cerberus/icons'
 import type { ElementType } from 'react'
 import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'
+import { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'
 
 export type IconType = CarbonIconType | ElementType
 
@@ -26,6 +26,7 @@ export interface DefinedIcons {
   confirmModal?: IconType
   delete?: IconType
   promptModal?: IconType
+  waitingFileUploader?: IconType
   fileUploader?: IconType
   indeterminate?: IconType
   infoNotification?: IconType
@@ -46,12 +47,13 @@ export const defaultIcons: DefinedIcons = {
   confirmModal: Information,
   delete: TrashCan,
   promptModal: Information,
-  fileUploader: CloudUpload,
+  waitingFileUploader: CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
-  infoNotification: InformationFilled,
-  successNotification: CheckmarkFilled,
-  warningNotification: WarningFilled,
-  dangerNotification: ErrorFilled,
+  infoNotification: Information,
+  successNotification: CheckmarkOutline,
+  warningNotification: WarningAlt,
+  dangerNotification: WarningFilled,
   invalid: WarningFilled,
   invalidAlt: Warning,
   redo: Restart,

package/src/context/prompt-modal.tsx

@@ -214,7 +214,14 @@ export function PromptModal(
             })}
           >
             <Field invalid={!isValid}>
-              <Label htmlFor="confirm" size="md">
+              <Label
+                className={css({
+                  gap: 1,
+                  justifyContent: 'flex-start',
+                })}
+                htmlFor="confirm"
+                size="md"
+              >
                 Type
                 <strong
                   className={css({

package/src/hooks/useModal.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useRef, type RefObject } from 'react'
+import { useCallback, useMemo, useRef, useState, type RefObject } from 'react'
 
 /**
  * This module provides a hook for using a custom modal.
@@ -20,22 +20,36 @@ interface UseModalReturnValue {
    * Closes the modal.
    */
   close: () => void
+  /**
+   * Whether the modal is open based on the show and close methods.
+   */
+  isOpen: boolean
 }
 
 /**
- * Provides a hook for using a custom modal.
+ * Provides a hook for using a custom modal via the native dialog element
+ * methods.
+ *
+ * Cerberus modals use the native dialog element. This hook
+ * does not control the modal via React state but rather by calling the
+ * native dialog element's `showModal` and `close` methods.
+ *
  * @memberof module:Modal
- * @returns The modal hook.
+ * @see https://cerberus.digitalu.design/react/modal
+ * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
  */
 export function useModal(): UseModalReturnValue {
   const modalRef = useRef<HTMLDialogElement | null>(null)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
 
   const show = useCallback(() => {
     modalRef.current?.showModal()
+    setIsOpen(true)
   }, [])
 
   const close = useCallback(() => {
     modalRef.current?.close()
+    setIsOpen(false)
   }, [])
 
   return useMemo(() => {
@@ -43,6 +57,7 @@ export function useModal(): UseModalReturnValue {
       modalRef,
       show,
       close,
+      isOpen,
     }
-  }, [modalRef, show, close])
+  }, [modalRef, show, close, isOpen])
 }

package/src/index.ts

@@ -5,6 +5,7 @@
 
 // components
 
+export * from './components/Admonition'
 export * from './components/Avatar'
 export * from './components/Button'
 export * from './components/Checkbox'
@@ -12,11 +13,14 @@ export * from './components/CircularProgress'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
+export * from './components/Fieldset'
+export * from './components/FieldsetLabel'
 export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'
+export * from './components/Legend'
 export * from './components/Modal'
 export * from './components/ModalHeader'
 export * from './components/ModalHeading'

package/build/modern/chunk-BDCFYW34.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA0BA,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

package/build/modern/chunk-JCGWTIR4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FileUploader.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Avatar } from './Avatar'\n\nexport interface FileUploaderProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * The optional heading to display in the FileUploader component.\n   */\n  heading?: string\n  /**\n   * The name of the file input element.\n   */\n  name: string\n}\n\n/**\n * A component that allows the user to upload files.\n * @see https://cerberus.digitalu.design/react/file-uploader\n */\nexport function FileUploader(props: FileUploaderProps) {\n  const styles = fileUploader()\n  const Icon = $cerberusIcons.fileUploader\n\n  return (\n    <div\n      className={cx(\n        vstack({\n          justify: 'center',\n        }),\n        styles.container,\n      )}\n    >\n      <div className={styles.icon}>\n        <Avatar\n          gradient=\"charon-light\"\n          ariaLabel=\"\"\n          icon={<Icon />}\n          size=\"md\"\n          src=\"\"\n        />\n      </div>\n\n      <label\n        className={cx(\n          vstack({\n            justify: 'center',\n          }),\n          styles.label,\n        )}\n        htmlFor={props.name}\n      >\n        <Show when={Boolean(props.heading)}>\n          <p className={styles.heading}>{props.heading}</p>\n        </Show>\n        Import {props.accept?.replace(',', ', ')} files\n        <p className={styles.description}>Click to select files</p>\n        <input\n          {...props}\n          className={cx(props.className, styles.input)}\n          type=\"file\"\n        />\n      </label>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AAGvB,SAAS,oBAAoB;AAqCb,cAMV,YANU;AAjBT,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,aAAa;AAC5B,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,OAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,WAAU;AAAA,YACV,MAAM,oBAAC,QAAK;AAAA,YACZ,MAAK;AAAA,YACL,KAAI;AAAA;AAAA,QACN,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,cACD,OAAO;AAAA,YACT;AAAA,YACA,SAAS,MAAM;AAAA,YAEf;AAAA,kCAAC,QAAK,MAAM,QAAQ,MAAM,OAAO,GAC/B,8BAAC,OAAE,WAAW,OAAO,SAAU,gBAAM,SAAQ,GAC/C;AAAA,cAAO;AAAA,cACC,MAAM,QAAQ,QAAQ,KAAK,IAAI;AAAA,cAAE;AAAA,cACzC,oBAAC,OAAE,WAAW,OAAO,aAAa,mCAAqB;AAAA,cACvD;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,WAAW,GAAG,MAAM,WAAW,OAAO,KAAK;AAAA,kBAC3C,MAAK;AAAA;AAAA,cACP;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-LJYCFFX7.js

@@ -1,33 +0,0 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
-
-// src/components/Radio.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { hstack } from "@cerberus/styled-system/patterns";
-import { radio } from "@cerberus/styled-system/recipes";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Radio(props) {
-  const { children, size, ...nativeProps } = props;
-  const { invalid, ...state } = useFieldContext();
-  const styles = radio({ size });
-  return /* @__PURE__ */ jsxs("div", { className: cx("group", hstack(), styles.root), tabIndex: 0, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...nativeProps,
-        ...state,
-        ...invalid && { "aria-invalid": true },
-        className: cx(nativeProps.className, styles.input),
-        tabIndex: -1,
-        type: "radio"
-      }
-    ),
-    children
-  ] });
-}
-
-export {
-  Radio
-};
-//# sourceMappingURL=chunk-LJYCFFX7.js.map

package/build/modern/chunk-OW62FLJ6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/useModal.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\ninterface UseModalReturnValue {\n  /**\n   * The ref for the modal.\n   */\n  modalRef: RefObject<HTMLDialogElement>\n  /**\n   * Shows the modal.\n   */\n  show: () => void\n  /**\n   * Closes the modal.\n   */\n  close: () => void\n}\n\n/**\n * Provides a hook for using a custom modal.\n * @memberof module:Modal\n * @returns The modal hook.\n */\nexport function useModal(): UseModalReturnValue {\n  const modalRef = useRef<HTMLDialogElement | null>(null)\n\n  const show = useCallback(() => {\n    modalRef.current?.showModal()\n  }, [])\n\n  const close = useCallback(() => {\n    modalRef.current?.close()\n  }, [])\n\n  return useMemo(() => {\n    return {\n      modalRef,\n      show,\n      close,\n    }\n  }, [modalRef, show, close])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,cAA8B;AA2BtD,SAAS,WAAgC;AAC9C,QAAM,WAAW,OAAiC,IAAI;AAEtD,QAAM,OAAO,YAAY,MAAM;AAC7B,aAAS,SAAS,UAAU;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,MAAM;AACnB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,KAAK,CAAC;AAC5B;","names":[]}

package/build/modern/chunk-UXHAFEBA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FileStatus.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useMemo,\n  type HTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport {\n  fileStatus,\n  type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Field } from '../context/field'\nimport { FieldMessage } from './FieldMessage'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * A unique identifier for the file status. Required for accessibility.\n   */\n  id: string\n  /**\n   * The name of the file.\n   */\n  file: string\n  /**\n   * The percentage of the file that has been processed.\n   */\n  now: ProgressBarProps['now']\n  /**\n   * The status of the file.\n   */\n  status: processStatus\n  /**\n   * The action to perform on the file when a user clicks the\n   * button located at the end of the status card.\n   * @param status - The status of the file.\n   * @param e - The event object.\n   * @example\n   * ```tsx\n   * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n   * ```\n   * @default () => {}\n   */\n  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n  TODO = 'todo',\n  PROCESSING = 'processing',\n  DONE = 'done',\n  ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n  const { file, now, status, onClick, ...nativeProps } = props\n  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n  const palette = useMemo(() => getPalette(status), [status])\n  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n  const styles = useMemo(() => {\n    switch (status) {\n      case processStatus.TODO:\n        return fileStatus({ status: 'todo' })\n      case processStatus.PROCESSING:\n        return fileStatus({ status: 'processing' })\n      case processStatus.DONE:\n        return fileStatus({ status: 'done' })\n      case processStatus.ERROR:\n        return fileStatus({ status: 'error' })\n      default:\n        return fileStatus()\n    }\n  }, [status])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const actionStatus = getStatusActionLabel(\n        status,\n      ).toLocaleLowerCase() as FileStatusActions\n      onClick(actionStatus, e)\n    },\n    [onClick],\n  )\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(nativeProps.className, styles.root, hstack())}\n    >\n      <Avatar\n        ariaLabel=\"\"\n        gradient={modalIconPalette}\n        icon={<MatchFileStatusIcon size={24} status={status} />}\n        src=\"\"\n      />\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0.12rem',\n          w: 'full',\n        })}\n      >\n        <small\n          className={css({\n            color: 'page.text.initial',\n            textStyle: 'label-sm',\n          })}\n        >\n          {file}\n        </small>\n        <ProgressBar\n          id={props.id}\n          label=\"File upload status\"\n          now={now}\n          size=\"sm\"\n        />\n        <Field invalid={modalIconPalette === 'hades-dark'}>\n          <FieldMessage\n            className={css({\n              color: 'page.text.100',\n            })}\n            id={`help:${file}`}\n          >\n            <MatchFileStatusText status={status} now={now} />\n          </FieldMessage>\n        </Field>\n      </div>\n\n      <IconButton\n        ariaLabel={actionLabel}\n        onClick={handleClick}\n        palette={palette}\n        size=\"sm\"\n      >\n        <MatchStatusAction status={status} />\n      </IconButton>\n    </div>\n  )\n}\n\ninterface FileStatusElProps {\n  status: FileStatusProps['status']\n  size?: 16 | 20 | 24 | 32\n  now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n  const {\n    fileUploader: FileUploaderIcon,\n    invalidAlt: InvalidIcon,\n    successNotification: DoneIcon,\n  } = $cerberusIcons\n\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <FileUploaderIcon size={props.size} />\n    case processStatus.DONE:\n      return <DoneIcon size={props.size} />\n    case processStatus.ERROR:\n      return <InvalidIcon size={props.size} />\n    default:\n      throw new Error('Unknown status')\n  }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n  switch (props.status) {\n    case processStatus.TODO:\n      return 'Waiting to upload'\n    case processStatus.PROCESSING:\n      return `${props.now}% Complete`\n    case processStatus.DONE:\n      return 'File uploaded successfully'\n    case processStatus.ERROR:\n      return 'There was an error uploading the file'\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <CloseIcon />\n    case processStatus.ERROR:\n      return <RedoIcon />\n    case processStatus.DONE:\n      return <TrashIcon />\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'Cancel'\n    case processStatus.ERROR:\n      return 'Retry'\n    case processStatus.DONE:\n      return 'Delete'\n    default:\n      return ''\n  }\n}\n\nfunction getPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'danger'\n    case processStatus.ERROR:\n      return 'action'\n    case processStatus.DONE:\n      return 'danger'\n    default:\n      return 'action'\n  }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'charon-light'\n    case processStatus.ERROR:\n      return 'hades-dark'\n    case processStatus.DONE:\n      return 'thanatos-light'\n    default:\n      return 'charon-light'\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,KAAK,UAAU;AACxB,SAAS,QAAQ,cAAc;AAyHjB,cAIR,YAJQ;AArDP,IAAW,gBAAX,kBAAWA,mBAAX;AACL,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,gBAAa;AACb,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,WAAQ;AAJQ,SAAAA;AAAA,GAAA;AAeX,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,MAAM,KAAK,QAAQ,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,cAAc,QAAQ,MAAM,qBAAqB,MAAM,GAAG,CAAC,MAAM,CAAC;AACxE,QAAM,UAAU,QAAQ,MAAM,WAAW,MAAM,GAAG,CAAC,MAAM,CAAC;AAC1D,QAAM,mBAAmB,QAAQ,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAC5E,QAAM,SAAS,QAAQ,MAAM;AAC3B,YAAQ,QAAQ;AAAA,MACd,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,OAAO,CAAC;AAAA,MACtC,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,aAAa,CAAC;AAAA,MAC5C,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,OAAO,CAAC;AAAA,MACtC,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,QAAQ,CAAC;AAAA,MACvC;AACE,eAAO,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,YAAM,eAAe;AAAA,QACnB;AAAA,MACF,EAAE,kBAAkB;AACpB,cAAQ,cAAc,CAAC;AAAA,IACzB;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,MAAM,OAAO,CAAC;AAAA,MAE1D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,UAAU;AAAA,YACV,MAAM,oBAAC,uBAAoB,MAAM,IAAI,QAAgB;AAAA,YACrD,KAAI;AAAA;AAAA,QACN;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,GAAG;AAAA,YACL,CAAC;AAAA,YAED;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,IAAI;AAAA,oBACb,OAAO;AAAA,oBACP,WAAW;AAAA,kBACb,CAAC;AAAA,kBAEA;AAAA;AAAA,cACH;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAI,MAAM;AAAA,kBACV,OAAM;AAAA,kBACN;AAAA,kBACA,MAAK;AAAA;AAAA,cACP;AAAA,cACA,oBAAC,SAAM,SAAS,qBAAqB,cACnC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,IAAI;AAAA,oBACb,OAAO;AAAA,kBACT,CAAC;AAAA,kBACD,IAAI,QAAQ,IAAI;AAAA,kBAEhB,8BAAC,uBAAoB,QAAgB,KAAU;AAAA;AAAA,cACjD,GACF;AAAA;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,SAAS;AAAA,YACT;AAAA,YACA,MAAK;AAAA,YAEL,8BAAC,qBAAkB,QAAgB;AAAA;AAAA,QACrC;AAAA;AAAA;AAAA,EACF;AAEJ;AAQA,SAAS,oBAAoB,OAA0B;AACrD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,qBAAqB;AAAA,EACvB,IAAI;AAEJ,UAAQ,MAAM,QAAQ;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,oBAAC,oBAAiB,MAAM,MAAM,MAAM;AAAA,IAC7C,KAAK;AACH,aAAO,oBAAC,YAAS,MAAM,MAAM,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,oBAAC,eAAY,MAAM,MAAM,MAAM;AAAA,IACxC;AACE,YAAM,IAAI,MAAM,gBAAgB;AAAA,EACpC;AACF;AAEA,SAAS,oBAAoB,OAA0B;AACrD,UAAQ,MAAM,QAAQ;AAAA,IACpB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO,GAAG,MAAM,GAAG;AAAA,IACrB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,YAAM,IAAI,MAAM,gBAAgB;AAAA,EACpC;AACF;AAEA,SAAS,kBAAkB,OAA0B;AACnD,QAAM,EAAE,OAAO,WAAW,MAAM,UAAU,QAAQ,UAAU,IAAI;AAChE,UAAQ,MAAM,QAAQ;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,oBAAC,aAAU;AAAA,IACpB,KAAK;AACH,aAAO,oBAAC,YAAS;AAAA,IACnB,KAAK;AACH,aAAO,oBAAC,aAAU;AAAA,IACpB;AACE,YAAM,IAAI,MAAM,gBAAgB;AAAA,EACpC;AACF;AAEA,SAAS,qBAAqB,QAAuB;AACnD,UAAQ,QAAQ;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,WAAW,QAAuB;AACzC,UAAQ,QAAQ;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,oBAAoB,QAAuB;AAClD,UAAQ,QAAQ;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;","names":["processStatus"]}

package/build/modern/chunk-YLPSE5Z2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from '@cerberus/styled-system/patterns'\nimport { css } from '@cerberus/styled-system/css'\nimport type { SVGProps } from 'react'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  syntax?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={cq({\n        alignSelf: 'stretch',\n        flex: 1,\n        m: '4px',\n        position: 'relative',\n      })}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={css({\n          display: 'block',\n          rounded: 'full',\n          transition: 'all 0.5s ease',\n        })}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-action-bg-initial)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-action-bg-active)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <circle\n          className={css({\n            fill: 'page.surface.initial',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={`calc(50% * (1 - ${strokeW}/100))`}\n          pathLength=\"100\"\n        />\n        <circle\n          className={css({\n            stroke: 'page.bg.100',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n        <circle\n          data-complete={now === 100}\n          className={css({\n            stroke: 'url(#gradient)',\n            transition: 'stroke-dashoffset, stroke 0.5s ease',\n            '&:is([data-complete=true])': {\n              stroke: 'success.bg.initial',\n            },\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          r={radius}\n          pathLength=\"100\"\n          strokeDasharray=\"100\"\n          strokeDashoffset={100 - now}\n          transform=\"rotate(-90 50 50)\"\n        />\n\n        <g>\n          <text\n            className={css({\n              fill: 'page.text.initial',\n              fontFamily: 'mono',\n              textStyle: '1.25rem',\n            })}\n            x=\"50%\"\n            y=\"47%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n              fontWeight: 600,\n            })}\n            x=\"50%\"\n            y=\"59%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}