@cerberus-design/react 0.18.0 → 0.18.2

package/src/components/CircularProgress.tsx

@@ -1,9 +1,7 @@
-'use client'
-
-import { cq } from 'styled-system/patterns'
-import { css } from 'styled-system/css'
+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.
@@ -35,6 +33,11 @@ export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
    * The background style of the CircularProgress
    */
   bgStyle?: 'filled' | 'transparent'
+  /**
+   * The size of the CircularProgress
+   * @default '1.1em'
+   */
+  size?: string
 }
 
 /**
@@ -50,12 +53,22 @@ export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
  * ```
  */
 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}
@@ -63,29 +76,22 @@ export function CircularProgress(props: CircularProgressProps) {
       aria-valuemin={0}
       aria-valuemax={100}
       aria-valuenow={now}
-      className={cq({
-        alignSelf: 'stretch',
-        flex: 1,
-        m: '4px',
-        position: 'relative',
-      })}
+      className={styles.root}
       role="progressbar"
     >
       <svg
         data-complete={now === 100}
-        className={css({
-          display: 'block',
-          rounded: 'full',
-          transition: 'all 0.5s ease',
-        })}
+        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
@@ -101,71 +107,77 @@ export function CircularProgress(props: CircularProgressProps) {
 
         <Show when={bgStyle === 'filled'}>
           <circle
-            className={css({
-              fill: 'page.surface.initial',
-            })}
+            className={styles.base}
             cx="50%"
             cy="50%"
             r={`calc(50% * (1 - ${strokeW}/100))`}
             pathLength="100"
           />
         </Show>
+
         <circle
-          className={css({
-            stroke: 'page.bg.100',
-          })}
-          cx="50%"
-          cy="50%"
-          r={radius}
-          pathLength="100"
-        />
-        <circle
-          data-complete={now === 100}
-          className={css({
-            stroke: 'url(#gradient)',
-            transition: 'stroke-dashoffset, stroke 0.5s ease',
-            _isComplete: {
-              stroke: 'success.bg.initial',
-            },
-          })}
+          className={styles.track}
           cx="50%"
           cy="50%"
-          fill="none"
           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="50%"
-            y="47%"
-            dominantBaseline="middle"
-            textAnchor="middle"
-          >
-            {now}%
-          </text>
-          <text
-            className={css({
-              fill: 'page.text.100',
-              fontSize: '0.5rem',
-              fontWeight: 600,
-            })}
-            x="50%"
-            y="59%"
-            dominantBaseline="middle"
-            textAnchor="middle"
-          >
-            {status}
-          </text>
-        </g>
+        <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/build/modern/chunk-Q3LUIS3M.js

@@ -1,153 +0,0 @@
-import {
-  Show
-} from "./chunk-VEAC4I3F.js";
-
-// src/components/CircularProgress.tsx
-import { cq } from "styled-system/patterns";
-import { css } from "styled-system/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-function CircularProgress(props) {
-  const strokeW = 14;
-  const radius = `calc(50% * (1 - ${strokeW}/100))`;
-  const status = props.syntax ?? "Done";
-  const now = props.now >= 100 ? 100 : props.now;
-  const bgStyle = props.bgStyle ?? "filled";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      id: props.id,
-      "aria-label": props.label,
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-valuenow": now,
-      className: cq({
-        alignSelf: "stretch",
-        flex: 1,
-        m: "4px",
-        position: "relative"
-      }),
-      role: "progressbar",
-      children: /* @__PURE__ */ jsxs(
-        "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",
-          children: [
-            /* @__PURE__ */ jsx("title", { children: props.title }),
-            /* @__PURE__ */ jsx("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "gradient", children: [
-              /* @__PURE__ */ jsx(
-                "stop",
-                {
-                  offset: "0%",
-                  stopColor: "var(--cerberus-colors-data-viz-progress-start)"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "stop",
-                {
-                  offset: "100%",
-                  stopColor: "var(--cerberus-colors-data-viz-progress-end)"
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ jsx(
-              "circle",
-              {
-                className: css({
-                  fill: "page.surface.initial"
-                }),
-                cx: "50%",
-                cy: "50%",
-                r: `calc(50% * (1 - ${strokeW}/100))`,
-                pathLength: "100"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                className: css({
-                  stroke: "page.bg.100"
-                }),
-                cx: "50%",
-                cy: "50%",
-                r: radius,
-                pathLength: "100"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                "data-complete": now === 100,
-                className: css({
-                  stroke: "url(#gradient)",
-                  transition: "stroke-dashoffset, stroke 0.5s ease",
-                  _isComplete: {
-                    stroke: "success.bg.initial"
-                  }
-                }),
-                cx: "50%",
-                cy: "50%",
-                fill: "none",
-                r: radius,
-                pathLength: "100",
-                strokeDasharray: "100",
-                strokeDashoffset: 100 - now,
-                transform: "rotate(-90 50 50)"
-              }
-            ),
-            /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsxs(
-                "text",
-                {
-                  className: css({
-                    fill: "page.text.initial",
-                    fontFamily: "mono",
-                    textStyle: "1.25rem"
-                  }),
-                  x: "50%",
-                  y: "47%",
-                  dominantBaseline: "middle",
-                  textAnchor: "middle",
-                  children: [
-                    now,
-                    "%"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  className: css({
-                    fill: "page.text.100",
-                    fontSize: "0.5rem",
-                    fontWeight: 600
-                  }),
-                  x: "50%",
-                  y: "59%",
-                  dominantBaseline: "middle",
-                  textAnchor: "middle",
-                  children: status
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
-
-export {
-  CircularProgress
-};
-//# sourceMappingURL=chunk-Q3LUIS3M.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from 'styled-system/patterns'\nimport { css } from 'styled-system/css'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\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   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\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  const bgStyle: string = props.bgStyle ?? 'filled'\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-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\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        </Show>\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            _isComplete: {\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":[]}