@cerberus-design/react 0.9.2-next-f877bc3 → 0.9.2-next-5604236

package/build/modern/context/prompt-modal.js

@@ -2,18 +2,18 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-V4Y7DU4B.js";
-import "../chunk-JB7IQ2BM.js";
+} from "../chunk-ZBEHDXFT.js";
 import "../chunk-4CAT3FHV.js";
-import "../chunk-FMFKM2AB.js";
-import "../chunk-2FK7NR7Y.js";
+import "../chunk-QU7UV5DB.js";
+import "../chunk-JB7IQ2BM.js";
+import "../chunk-SSY3KX3F.js";
+import "../chunk-RQPDRHRP.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
-import "../chunk-QU7UV5DB.js";
 import "../chunk-UN3OAW56.js";
 import "../chunk-6F34A7NZ.js";
-import "../chunk-4O4QFF4S.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";

package/build/modern/index.js

@@ -1,19 +1,25 @@
+import {
+  ThemeProvider,
+  useThemeContext
+} from "./chunk-S3MTABYX.js";
+import {
+  Toggle
+} from "./chunk-4YJOK7JJ.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-RSFFVJSM.js";
+} from "./chunk-CMKBUSGN.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-WFHZDHJB.js";
+} from "./chunk-AEDGCR25.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-V4Y7DU4B.js";
+} from "./chunk-ZBEHDXFT.js";
 import {
-  ThemeProvider,
-  useThemeContext
-} from "./chunk-S3MTABYX.js";
+  TabPanel
+} from "./chunk-U72VPIZA.js";
 import {
   Table,
   Tr
@@ -37,18 +43,18 @@ import {
   Thead
 } from "./chunk-N3FUF4TB.js";
 import {
-  Toggle
-} from "./chunk-4YJOK7JJ.js";
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-PH64POOB.js";
 import {
   Option,
   Select
-} from "./chunk-VRPAW76S.js";
+} from "./chunk-XPVDT4VF.js";
 import {
   Spinner
-} from "./chunk-RN6HSKIG.js";
+} from "./chunk-IXOJLCNO.js";
 import {
   Tab
 } from "./chunk-SONHHNYQ.js";
@@ -56,8 +62,8 @@ import {
   TabList
 } from "./chunk-ISPTI4GC.js";
 import {
-  TabPanel
-} from "./chunk-U72VPIZA.js";
+  ModalHeader
+} from "./chunk-QU7UV5DB.js";
 import {
   ModalHeading
 } from "./chunk-JB7IQ2BM.js";
@@ -84,16 +90,16 @@ import {
 import {
   NotificationHeading
 } from "./chunk-3C2DJSEE.js";
-import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
 import {
   FileStatus,
   processStatus
-} from "./chunk-XGIACYC3.js";
+} from "./chunk-LAOQSNMN.js";
 import {
   ProgressBar
-} from "./chunk-TYTEREKZ.js";
+} from "./chunk-G6O7KRQ6.js";
+import {
+  FieldMessage
+} from "./chunk-VGHVH2T3.js";
 import {
   FileUploader
 } from "./chunk-BTEEBIVN.js";
@@ -102,19 +108,16 @@ import {
 } from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-FMFKM2AB.js";
+} from "./chunk-SSY3KX3F.js";
 import {
   Label
-} from "./chunk-2FK7NR7Y.js";
+} from "./chunk-RQPDRHRP.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
 import {
   ModalDescription
 } from "./chunk-4M4LCQ43.js";
-import {
-  ModalHeader
-} from "./chunk-QU7UV5DB.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -131,7 +134,14 @@ import {
 } from "./chunk-6F34A7NZ.js";
 import {
   Checkbox
-} from "./chunk-ZCIJRM2X.js";
+} from "./chunk-GABTVDSB.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+import {
+  CircularProgress
+} from "./chunk-A6CLBPFE.js";
 import {
   Droppable
 } from "./chunk-7VJOPJVX.js";
@@ -145,13 +155,6 @@ import {
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  FieldMessage
-} from "./chunk-VGHVH2T3.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -184,6 +187,7 @@ export {
   Avatar,
   Button,
   Checkbox,
+  CircularProgress,
   ConfirmModal,
   Droppable,
   FeatureFlag,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.9.2-next-f877bc3",
+  "version": "0.9.2-next-5604236",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.9.2-next-f877bc3"
+    "@cerberus-design/styled-system": "0.9.2-next-5604236"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CircularProgress.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { cq } from '@cerberus/styled-system/patterns'
+import { css } from '@cerberus/styled-system/css'
+import type { SVGProps } from 'react'
+
+/**
+ * This module contains the CircularProgress component.
+ * @module
+ */
+
+export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
+  /**
+   * 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')
+   */
+  label?: 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')
+ * @description [CircularProgress Docs](https://cerberus.digitalu.design/react/progress/)
+ * @example
+ * ```tsx
+ * <CircularProgress now={24} title="Course completion" label="done" />
+ * ```
+ */
+export function CircularProgress(props: CircularProgressProps) {
+  const strokeW: number = 14
+  const radius = `calc(50% * (1 - ${strokeW}/100))`
+  const status: string = props.label ?? 'Done'
+  const now: number = props.now >= 100 ? 100 : props.now
+
+  return (
+    <div
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={now}
+      className={cq({
+        alignSelf: 'stretch',
+        flex: 1,
+        m: '4px',
+        position: 'relative',
+      })}
+      role="progressbar"
+    >
+      <svg
+        data-complete={now === 100}
+        className={css({
+          display: 'block',
+          rounded: 'full',
+          transition: 'all 0.5s ease',
+        })}
+        fill="none"
+        strokeLinecap="round"
+        strokeWidth={strokeW}
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>{props.title}</title>
+        <desc>{`${now}% ${status}`}</desc>
+        <mask id="progMask">
+          <rect fill="white" width="100%" height="100%" />
+          <circle
+            className={css({
+              stroke: 'page.bg.100',
+            })}
+            cx="50%"
+            cy="50%"
+            r={radius}
+            pathLength="100"
+          />
+          <circle
+            className={css({
+              transition: 'stroke-dashoffset 0.5s ease',
+            })}
+            cx="50%"
+            cy="50%"
+            r={radius}
+            pathLength="100"
+            stroke="black"
+            strokeDasharray="100"
+            strokeDashoffset={100 - now}
+            transform="rotate(-90 50 50)"
+          />
+        </mask>
+
+        {/* <circle
+          fill="var(--cerberus-colors-page-surface-initial)"
+          cx="50%"
+          cy="50%"
+          r={`calc(50% * (1.15 - ${strokeW}/100))`}
+          pathLength="100"
+          mask="url(#progMask)"
+        /> */}
+
+        <circle
+          className={css({
+            fill: 'page.surface.initial',
+          })}
+          cx="50%"
+          cy="50%"
+          r={`calc(50% * (1 - ${strokeW}/100))`}
+          pathLength="100"
+        />
+        <circle
+          className={css({
+            stroke: 'page.bg.100',
+          })}
+          cx="50%"
+          cy="50%"
+          r={radius}
+          pathLength="100"
+        />
+        <circle
+          data-complete={now === 100}
+          className={css({
+            stroke: 'action.bg.initial',
+            transition: 'stroke-dashoffset 0.5s ease',
+            '&:is([data-complete=true])': {
+              stroke: 'success.bg.initial',
+            },
+          })}
+          cx="50%"
+          cy="50%"
+          r={radius}
+          pathLength="100"
+          strokeDasharray="100"
+          strokeDashoffset={100 - now}
+          transform="rotate(-90 50 50)"
+        />
+
+        <g>
+          <text
+            className={css({
+              fill: 'page.text.initial',
+              fontFamily: 'mono',
+              textStyle: '1.25rem',
+            })}
+            x="35%"
+            y="50%"
+          >
+            {now}%
+          </text>
+          <text
+            className={css({
+              fill: 'page.text.100',
+              fontSize: '0.5rem',
+            })}
+            x="39%"
+            y="60%"
+          >
+            {status}
+          </text>
+        </g>
+      </svg>
+    </div>
+  )
+}

package/src/components/ProgressBar.tsx

@@ -48,7 +48,7 @@ export function ProgressBar(props: ProgressBarProps) {
       aria-valuemax={100}
       aria-valuenow={indeterminate ? 0 : nowClamped}
       className={cx(nativeProps.className, styles.root)}
-      role="meter"
+      role="progressbar"
     >
       <div
         {...(indeterminate && { 'data-indeterminate': true })}

package/src/components/Spinner.tsx

@@ -1,9 +1,24 @@
 import type { SVGProps } from 'react'
 
+/**
+ * This module contains the Spinner component.
+ * @module
+ */
+
 export type SpinnerProps = SVGProps<SVGSVGElement> & {
   size?: number | string
 }
 
+/**
+ * The Spinner component is used to display a loading indicator.
+ * @param props - SVG element attributes
+ * @param props.size - The size of the spinner
+ * @description [Spinner Docs](https://cerberus.digitalu.design/react/loading-states/)
+ * @example
+ * ```tsx
+ * <Spinner size={24} />
+ * ```
+ */
 export function Spinner(props: SpinnerProps) {
   return (
     <svg

package/src/index.ts

@@ -8,6 +8,7 @@
 export * from './components/Avatar'
 export * from './components/Button'
 export * from './components/Checkbox'
+export * from './components/CircularProgress'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'