@cerberus-design/react 0.10.4-next-07645b7 → 0.10.4-next-6b8d314

package/build/modern/_tsup-dts-rollup.d.ts

@@ -347,6 +347,10 @@ declare interface CircularProgressProps extends SVGProps<SVGSVGElement> {
      * What is shown below the now value (default: 'Done')
      */
     syntax?: string;
+    /**
+     * The background style of the CircularProgress
+     */
+    bgStyle?: 'filled' | 'transparent';
 }
 export { CircularProgressProps }
 export { CircularProgressProps as CircularProgressProps_alias_1 }
@@ -878,6 +882,10 @@ declare interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement
      * The name of the file input element.
      */
     name: string;
+    /**
+     * Disable the FileUploader component. Good for single-use file uploads.
+     */
+    disabled?: boolean;
 }
 export { FileUploaderProps }
 export { FileUploaderProps as FileUploaderProps_alias_1 }

package/build/modern/{chunk-YLPSE5Z2.js → chunk-6QHOKCV3.js}

@@ -1,3 +1,7 @@
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
 // src/components/CircularProgress.tsx
 import { cq } from "@cerberus/styled-system/patterns";
 import { css } from "@cerberus/styled-system/css";
@@ -7,6 +11,7 @@ function CircularProgress(props) {
   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",
     {
@@ -44,18 +49,18 @@ function CircularProgress(props) {
                 "stop",
                 {
                   offset: "0%",
-                  stopColor: "var(--cerberus-colors-action-bg-initial)"
+                  stopColor: "var(--cerberus-colors-data-viz-progress-start)"
                 }
               ),
               /* @__PURE__ */ jsx(
                 "stop",
                 {
                   offset: "100%",
-                  stopColor: "var(--cerberus-colors-action-bg-active)"
+                  stopColor: "var(--cerberus-colors-data-viz-progress-end)"
                 }
               )
             ] }) }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ jsx(
               "circle",
               {
                 className: css({
@@ -66,7 +71,7 @@ function CircularProgress(props) {
                 r: `calc(50% * (1 - ${strokeW}/100))`,
                 pathLength: "100"
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               "circle",
               {
@@ -86,7 +91,7 @@ function CircularProgress(props) {
                 className: css({
                   stroke: "url(#gradient)",
                   transition: "stroke-dashoffset, stroke 0.5s ease",
-                  "&:is([data-complete=true])": {
+                  _isComplete: {
                     stroke: "success.bg.initial"
                   }
                 }),
@@ -145,4 +150,4 @@ function CircularProgress(props) {
 export {
   CircularProgress
 };
-//# sourceMappingURL=chunk-YLPSE5Z2.js.map
+//# sourceMappingURL=chunk-6QHOKCV3.js.map

package/build/modern/chunk-6QHOKCV3.js.map

@@ -0,0 +1 @@
+{"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'\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":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,WAAW;AAmFZ,cAGE,YAHF;AAnCD,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,UAAkB;AACxB,QAAM,SAAS,mBAAmB,OAAO;AACzC,QAAM,SAAiB,MAAM,UAAU;AACvC,QAAM,MAAc,MAAM,OAAO,MAAM,MAAM,MAAM;AACnD,QAAM,UAAkB,MAAM,WAAW;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,MAAM;AAAA,MACV,cAAY,MAAM;AAAA,MAClB,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,GAAG;AAAA,QACZ,WAAW;AAAA,QACX,MAAM;AAAA,QACN,GAAG;AAAA,QACH,UAAU;AAAA,MACZ,CAAC;AAAA,MACD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,iBAAe,QAAQ;AAAA,UACvB,WAAW,IAAI;AAAA,YACb,SAAS;AAAA,YACT,SAAS;AAAA,YACT,YAAY;AAAA,UACd,CAAC;AAAA,UACD,MAAK;AAAA,UACL,eAAc;AAAA,UACd,aAAa;AAAA,UACb,SAAQ;AAAA,UACR,OAAM;AAAA,UAEN;AAAA,gCAAC,WAAO,gBAAM,OAAM;AAAA,YACpB,oBAAC,UAAM,aAAG,GAAG,KAAK,MAAM,IAAG;AAAA,YAC3B,oBAAC,UACC,+BAAC,oBAAe,IAAG,YACjB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,eACF,GACF;AAAA,YAEA,oBAAC,QAAK,MAAM,YAAY,UACtB;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,MAAM;AAAA,gBACR,CAAC;AAAA,gBACD,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,mBAAmB,OAAO;AAAA,gBAC7B,YAAW;AAAA;AAAA,YACb,GACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,QAAQ;AAAA,gBACV,CAAC;AAAA,gBACD,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG;AAAA,gBACH,YAAW;AAAA;AAAA,YACb;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAe,QAAQ;AAAA,gBACvB,WAAW,IAAI;AAAA,kBACb,QAAQ;AAAA,kBACR,YAAY;AAAA,kBACZ,aAAa;AAAA,oBACX,QAAQ;AAAA,kBACV;AAAA,gBACF,CAAC;AAAA,gBACD,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAG;AAAA,gBACH,YAAW;AAAA,gBACX,iBAAgB;AAAA,gBAChB,kBAAkB,MAAM;AAAA,gBACxB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEA,qBAAC,OACC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,IAAI;AAAA,oBACb,MAAM;AAAA,oBACN,YAAY;AAAA,oBACZ,WAAW;AAAA,kBACb,CAAC;AAAA,kBACD,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,oBAAI;AAAA;AAAA;AAAA,cACP;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,IAAI;AAAA,oBACb,MAAM;AAAA,oBACN,UAAU;AAAA,oBACV,YAAY;AAAA,kBACd,CAAC;AAAA,kBACD,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,cACH;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-7K6PZBHN.js → chunk-CO4BKT7K.js}

@@ -30,7 +30,10 @@ function Th(props) {
               display: "inline-flex",
               justifyContent: "space-between",
               userSelect: "none",
-              w: "full"
+              w: "full",
+              _hover: {
+                bgColor: "page.bg.100"
+              }
             })
           ),
           onClick,
@@ -44,4 +47,4 @@ function Th(props) {
 export {
   Th
 };
-//# sourceMappingURL=chunk-7K6PZBHN.js.map
+//# sourceMappingURL=chunk-CO4BKT7K.js.map

package/build/modern/{chunk-7K6PZBHN.js.map → chunk-CO4BKT7K.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  /**\n   * Converts the Th into a actionable button. Called when the user clicks on\n   * the Th.\n   */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n * @example\n * ```tsx\n * <Th onClick={handleClick}>\n *   Names\n *   <SortIcon />\n * </Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AAwChC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  /**\n   * Converts the Th into a actionable button. Called when the user clicks on\n   * the Th.\n   */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n * @example\n * ```tsx\n * <Th onClick={handleClick}>\n *   Names\n *   <SortIcon />\n * </Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n              _hover: {\n                bgColor: 'page.bg.100',\n              },\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AAwChC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,cACH,QAAQ;AAAA,gBACN,SAAS;AAAA,cACX;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-4HDONKKB.js → chunk-P3THICWW.js}

@@ -19,6 +19,7 @@ function FileUploader(props) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props.disabled ? { "aria-disabled": true } : {},
       className: cx(
         vstack({
           justify: "center"
@@ -71,4 +72,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-4HDONKKB.js.map
+//# sourceMappingURL=chunk-P3THICWW.js.map

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

@@ -0,0 +1 @@
+{"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   * Disable the FileUploader component. Good for single-use file uploads.\n   */\n  disabled?: boolean\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 { waitingFileUploader: Icon } = $cerberusIcons\n\n  return (\n    <div\n      {...(props.disabled ? { 'aria-disabled': true } : {})}\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;AA0Cb,cAMV,YANU;AAlBT,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,aAAa;AAC5B,QAAM,EAAE,qBAAqB,KAAK,IAAI;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,MAAM,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAAA,MACnD,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/components/CircularProgress.js

@@ -1,7 +1,8 @@
 "use client";
 import {
   CircularProgress
-} from "../chunk-YLPSE5Z2.js";
+} from "../chunk-6QHOKCV3.js";
+import "../chunk-BUVVRQLZ.js";
 export {
   CircularProgress
 };

package/build/modern/components/FileUploader.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   FileUploader
-} from "../chunk-4HDONKKB.js";
+} from "../chunk-P3THICWW.js";
 import "../chunk-XWQEINEL.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-5NELG2TB.js";

package/build/modern/components/Th.js

@@ -1,6 +1,6 @@
 import {
   Th
-} from "../chunk-7K6PZBHN.js";
+} from "../chunk-CO4BKT7K.js";
 import "../chunk-BUVVRQLZ.js";
 export {
   Th

package/build/modern/index.js

@@ -18,7 +18,7 @@ import {
 } from "./chunk-JIJM6JFJ.js";
 import {
   Th
-} from "./chunk-7K6PZBHN.js";
+} from "./chunk-CO4BKT7K.js";
 import {
   Thead
 } from "./chunk-PKY46RRA.js";
@@ -127,7 +127,7 @@ import {
 } from "./chunk-JWIJHSI6.js";
 import {
   FileUploader
-} from "./chunk-4HDONKKB.js";
+} from "./chunk-P3THICWW.js";
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
@@ -155,12 +155,12 @@ import {
   Field,
   useFieldContext
 } from "./chunk-UZDVOIW5.js";
+import {
+  CircularProgress
+} from "./chunk-6QHOKCV3.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  CircularProgress
-} from "./chunk-YLPSE5Z2.js";
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.10.4-next-07645b7",
+  "version": "0.10.4-next-6b8d314",
   "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.10.4-next-07645b7"
+    "@cerberus-design/styled-system": "0.10.4-next-6b8d314"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CircularProgress.tsx

@@ -3,6 +3,7 @@
 import { cq } from '@cerberus/styled-system/patterns'
 import { css } from '@cerberus/styled-system/css'
 import type { SVGProps } from 'react'
+import { Show } from './Show'
 
 /**
  * This module contains the CircularProgress component.
@@ -30,6 +31,10 @@ export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
    * What is shown below the now value (default: 'Done')
    */
   syntax?: string
+  /**
+   * The background style of the CircularProgress
+   */
+  bgStyle?: 'filled' | 'transparent'
 }
 
 /**
@@ -49,6 +54,7 @@ export function CircularProgress(props: CircularProgressProps) {
   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'
 
   return (
     <div
@@ -84,24 +90,26 @@ export function CircularProgress(props: CircularProgressProps) {
           <linearGradient id="gradient">
             <stop
               offset="0%"
-              stopColor="var(--cerberus-colors-action-bg-initial)"
+              stopColor="var(--cerberus-colors-data-viz-progress-start)"
             />
             <stop
               offset="100%"
-              stopColor="var(--cerberus-colors-action-bg-active)"
+              stopColor="var(--cerberus-colors-data-viz-progress-end)"
             />
           </linearGradient>
         </defs>
 
-        <circle
-          className={css({
-            fill: 'page.surface.initial',
-          })}
-          cx="50%"
-          cy="50%"
-          r={`calc(50% * (1 - ${strokeW}/100))`}
-          pathLength="100"
-        />
+        <Show when={bgStyle === 'filled'}>
+          <circle
+            className={css({
+              fill: 'page.surface.initial',
+            })}
+            cx="50%"
+            cy="50%"
+            r={`calc(50% * (1 - ${strokeW}/100))`}
+            pathLength="100"
+          />
+        </Show>
         <circle
           className={css({
             stroke: 'page.bg.100',
@@ -116,7 +124,7 @@ export function CircularProgress(props: CircularProgressProps) {
           className={css({
             stroke: 'url(#gradient)',
             transition: 'stroke-dashoffset, stroke 0.5s ease',
-            '&:is([data-complete=true])': {
+            _isComplete: {
               stroke: 'success.bg.initial',
             },
           })}

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
 }
 
 /**
@@ -30,6 +34,7 @@ export function FileUploader(props: FileUploaderProps) {
 
   return (
     <div
+      {...(props.disabled ? { 'aria-disabled': true } : {})}
       className={cx(
         vstack({
           justify: 'center',

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/build/modern/chunk-4HDONKKB.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 { waitingFileUploader: Icon } = $cerberusIcons\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,EAAE,qBAAqB,KAAK,IAAI;AAEtC,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-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":[]}