@cerberus-design/react 0.10.2 → 0.10.3

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

@@ -827,12 +827,6 @@ declare interface IconButtonRawProps extends ButtonHTMLAttributes<HTMLButtonElem
      * The aria-label attribute for the icon button.
      */
     ariaLabel: string;
-    /**
-     * The position of the tooltip relative to the icon button.
-     * @example 'top' | 'right' | 'bottom' | 'left'
-     * @default 'top'
-     */
-    tooltipPosition?: Positions;
 }
 export { IconButtonRawProps }
 export { IconButtonRawProps as IconButtonRawProps_alias_1 }
@@ -1391,7 +1385,7 @@ export { pointerWithin }
  * @see https://cerberus.digitalu.design/react/portal
  * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)
  */
-declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal;
+declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal | null;
 export { Portal }
 export { Portal as Portal_alias_1 }
 

package/build/modern/{chunk-VYDHM3XL.js → chunk-6YUB3ITX.js}

@@ -1,6 +1,6 @@
 import {
   Portal
-} from "./chunk-5IVINNV2.js";
+} from "./chunk-GLY7GU5S.js";
 import {
   ModalHeader
 } from "./chunk-WLEX22KS.js";
@@ -176,4 +176,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-VYDHM3XL.js.map
+//# sourceMappingURL=chunk-6YUB3ITX.js.map

package/build/modern/{chunk-UBJBMOG7.js → chunk-APD6IX5R.js}

@@ -10,8 +10,6 @@ function IconButton(props) {
     "button",
     {
       ...nativeProps,
-      "data-tooltip": true,
-      "data-position": props.tooltipPosition ?? "top",
       "aria-label": ariaLabel ?? "Icon Button",
       className: cx(
         nativeProps.className,
@@ -28,4 +26,4 @@ function IconButton(props) {
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-UBJBMOG7.js.map
+//# sourceMappingURL=chunk-APD6IX5R.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAuBH;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-GLY7GU5S.js

@@ -0,0 +1,14 @@
+// src/components/Portal.tsx
+import { createPortal } from "react-dom";
+function Portal(props) {
+  if (typeof window !== "undefined") {
+    const container = props.container || document.body;
+    return createPortal(props.children, container, props.key);
+  }
+  return null;
+}
+
+export {
+  Portal
+};
+//# sourceMappingURL=chunk-GLY7GU5S.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  /**\n   * The root container to render the children into.\n   * @default document.body\n   */\n  container?: Element | DocumentFragment\n  /**\n   * An optional key to use for the Portal component.\n   */\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  if (typeof window !== 'undefined') {\n    const container = props.container || document.body\n    return createPortal(props.children, container, props.key)\n  }\n\n  return null\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAwBtB,SAAS,OAAO,OAAuC;AAC5D,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,WAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAAA,EAC1D;AAEA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-KDFCISMF.js → chunk-LKFXUM3Z.js}

@@ -1,6 +1,6 @@
 import {
   Portal
-} from "./chunk-5IVINNV2.js";
+} from "./chunk-GLY7GU5S.js";
 import {
   ModalHeader
 } from "./chunk-WLEX22KS.js";
@@ -229,4 +229,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-KDFCISMF.js.map
+//# sourceMappingURL=chunk-LKFXUM3Z.js.map

package/build/modern/{chunk-3O6UTN3J.js → chunk-SEK6HENF.js}

@@ -37,37 +37,22 @@ function CircularProgress(props) {
           children: [
             /* @__PURE__ */ jsx("title", { children: props.title }),
             /* @__PURE__ */ jsx("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ jsxs("mask", { id: "progMask", children: [
-              /* @__PURE__ */ jsx("rect", { fill: "white", width: "100%", height: "100%" }),
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "gradient", children: [
               /* @__PURE__ */ jsx(
-                "circle",
+                "stop",
                 {
-                  className: css({
-                    stroke: "page.bg.100"
-                  }),
-                  cx: "50%",
-                  cy: "50%",
-                  r: radius,
-                  pathLength: "100"
+                  offset: "0%",
+                  stopColor: "var(--cerberus-colors-action-bg-initial)"
                 }
               ),
               /* @__PURE__ */ jsx(
-                "circle",
+                "stop",
                 {
-                  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)"
+                  offset: "100%",
+                  stopColor: "var(--cerberus-colors-action-bg-active)"
                 }
               )
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsx(
               "circle",
               {
@@ -97,14 +82,15 @@ function CircularProgress(props) {
               {
                 "data-complete": now === 100,
                 className: css({
-                  stroke: "action.bg.initial",
-                  transition: "stroke-dashoffset 0.5s ease",
+                  stroke: "url(#gradient)",
+                  transition: "stroke-dashoffset, stroke 0.5s ease",
                   "&:is([data-complete=true])": {
                     stroke: "success.bg.initial"
                   }
                 }),
                 cx: "50%",
                 cy: "50%",
+                fill: "none",
                 r: radius,
                 pathLength: "100",
                 strokeDasharray: "100",
@@ -121,8 +107,10 @@ function CircularProgress(props) {
                     fontFamily: "mono",
                     textStyle: "1.25rem"
                   }),
-                  x: "35%",
-                  y: "50%",
+                  x: "50%",
+                  y: "47%",
+                  dominantBaseline: "middle",
+                  textAnchor: "middle",
                   children: [
                     now,
                     "%"
@@ -134,10 +122,13 @@ function CircularProgress(props) {
                 {
                   className: css({
                     fill: "page.text.100",
-                    fontSize: "0.5rem"
+                    fontSize: "0.5rem",
+                    fontWeight: 600
                   }),
-                  x: "39%",
-                  y: "60%",
+                  x: "50%",
+                  y: "59%",
+                  dominantBaseline: "middle",
+                  textAnchor: "middle",
                   children: status
                 }
               )
@@ -152,4 +143,4 @@ function CircularProgress(props) {
 export {
   CircularProgress
 };
-//# sourceMappingURL=chunk-3O6UTN3J.js.map
+//# sourceMappingURL=chunk-SEK6HENF.js.map

package/build/modern/chunk-SEK6HENF.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'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\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  label?: 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.label ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n\n  return (\n    <div\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":";AAEA,SAAS,UAAU;AACnB,SAAS,WAAW;AAmEZ,cAGE,YAHF;AAhCD,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,UAAkB;AACxB,QAAM,SAAS,mBAAmB,OAAO;AACzC,QAAM,SAAiB,MAAM,SAAS;AACtC,QAAM,MAAc,MAAM,OAAO,MAAM,MAAM,MAAM;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,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;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;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,8BAA8B;AAAA,oBAC5B,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-6GAIXCCO.js → chunk-VV27XB6X.js}

@@ -1,6 +1,6 @@
 import {
   Portal
-} from "./chunk-5IVINNV2.js";
+} from "./chunk-GLY7GU5S.js";
 import {
   Notification
 } from "./chunk-VG46RHBJ.js";
@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-6GAIXCCO.js.map
+//# sourceMappingURL=chunk-VV27XB6X.js.map

package/build/modern/{chunk-2RPWSVRX.js → chunk-XOKHIEDT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-JWIJHSI6.js";
 import {
   IconButton
-} from "./chunk-UBJBMOG7.js";
+} from "./chunk-APD6IX5R.js";
 import {
   Avatar
 } from "./chunk-477G5ZEL.js";
@@ -215,4 +215,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-2RPWSVRX.js.map
+//# sourceMappingURL=chunk-XOKHIEDT.js.map

package/build/modern/components/CircularProgress.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   CircularProgress
-} from "../chunk-3O6UTN3J.js";
+} from "../chunk-SEK6HENF.js";
 export {
   CircularProgress
 };

package/build/modern/components/FileStatus.js

@@ -2,10 +2,10 @@
 import {
   FileStatus,
   processStatus
-} from "../chunk-2RPWSVRX.js";
+} from "../chunk-XOKHIEDT.js";
 import "../chunk-ZFK33MVD.js";
 import "../chunk-JWIJHSI6.js";
-import "../chunk-UBJBMOG7.js";
+import "../chunk-APD6IX5R.js";
 import "../chunk-477G5ZEL.js";
 import "../chunk-UZDVOIW5.js";
 import "../chunk-BUVVRQLZ.js";

package/build/modern/components/IconButton.js

@@ -1,6 +1,6 @@
 import {
   IconButton
-} from "../chunk-UBJBMOG7.js";
+} from "../chunk-APD6IX5R.js";
 export {
   IconButton
 };

package/build/modern/components/Portal.js

@@ -1,7 +1,6 @@
-"use client";
 import {
   Portal
-} from "../chunk-5IVINNV2.js";
+} from "../chunk-GLY7GU5S.js";
 export {
   Portal
 };

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

@@ -2,8 +2,8 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-VYDHM3XL.js";
-import "../chunk-5IVINNV2.js";
+} from "../chunk-6YUB3ITX.js";
+import "../chunk-GLY7GU5S.js";
 import "../chunk-WLEX22KS.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-BE4EOU2P.js";

package/build/modern/context/notification-center.js

@@ -2,8 +2,8 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-6GAIXCCO.js";
-import "../chunk-5IVINNV2.js";
+} from "../chunk-VV27XB6X.js";
+import "../chunk-GLY7GU5S.js";
 import "../chunk-VG46RHBJ.js";
 import "../chunk-XEW6TJJ4.js";
 import "../chunk-SXIXDXG3.js";

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

@@ -2,8 +2,8 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-KDFCISMF.js";
-import "../chunk-5IVINNV2.js";
+} from "../chunk-LKFXUM3Z.js";
+import "../chunk-GLY7GU5S.js";
 import "../chunk-WLEX22KS.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-WZOYPFUU.js";

package/build/modern/index.js

@@ -8,15 +8,15 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-VYDHM3XL.js";
+} from "./chunk-6YUB3ITX.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-6GAIXCCO.js";
+} from "./chunk-VV27XB6X.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-KDFCISMF.js";
+} from "./chunk-LKFXUM3Z.js";
 import {
   TabPanel
 } from "./chunk-HHVQ6LCA.js";
@@ -44,7 +44,7 @@ import {
 } from "./chunk-PKY46RRA.js";
 import {
   Portal
-} from "./chunk-5IVINNV2.js";
+} from "./chunk-GLY7GU5S.js";
 import {
   Radio
 } from "./chunk-LJYCFFX7.js";
@@ -93,7 +93,7 @@ import {
 import {
   FileStatus,
   processStatus
-} from "./chunk-2RPWSVRX.js";
+} from "./chunk-XOKHIEDT.js";
 import {
   ProgressBar
 } from "./chunk-ZFK33MVD.js";
@@ -105,7 +105,7 @@ import {
 } from "./chunk-JCGWTIR4.js";
 import {
   IconButton
-} from "./chunk-UBJBMOG7.js";
+} from "./chunk-APD6IX5R.js";
 import {
   Input
 } from "./chunk-WZOYPFUU.js";
@@ -141,7 +141,7 @@ import {
 } from "./chunk-UZDVOIW5.js";
 import {
   CircularProgress
-} from "./chunk-3O6UTN3J.js";
+} from "./chunk-SEK6HENF.js";
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "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.2"
+    "@cerberus-design/styled-system": "0.10.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CircularProgress.tsx

@@ -70,40 +70,18 @@ export function CircularProgress(props: CircularProgressProps) {
       >
         <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)"
-        /> */}
+        <defs>
+          <linearGradient id="gradient">
+            <stop
+              offset="0%"
+              stopColor="var(--cerberus-colors-action-bg-initial)"
+            />
+            <stop
+              offset="100%"
+              stopColor="var(--cerberus-colors-action-bg-active)"
+            />
+          </linearGradient>
+        </defs>
 
         <circle
           className={css({
@@ -126,14 +104,15 @@ export function CircularProgress(props: CircularProgressProps) {
         <circle
           data-complete={now === 100}
           className={css({
-            stroke: 'action.bg.initial',
-            transition: 'stroke-dashoffset 0.5s ease',
+            stroke: 'url(#gradient)',
+            transition: 'stroke-dashoffset, stroke 0.5s ease',
             '&:is([data-complete=true])': {
               stroke: 'success.bg.initial',
             },
           })}
           cx="50%"
           cy="50%"
+          fill="none"
           r={radius}
           pathLength="100"
           strokeDasharray="100"
@@ -148,8 +127,10 @@ export function CircularProgress(props: CircularProgressProps) {
               fontFamily: 'mono',
               textStyle: '1.25rem',
             })}
-            x="35%"
-            y="50%"
+            x="50%"
+            y="47%"
+            dominantBaseline="middle"
+            textAnchor="middle"
           >
             {now}%
           </text>
@@ -157,9 +138,12 @@ export function CircularProgress(props: CircularProgressProps) {
             className={css({
               fill: 'page.text.100',
               fontSize: '0.5rem',
+              fontWeight: 600,
             })}
-            x="39%"
-            y="60%"
+            x="50%"
+            y="59%"
+            dominantBaseline="middle"
+            textAnchor="middle"
           >
             {status}
           </text>

package/src/components/IconButton.tsx

@@ -4,7 +4,6 @@ import {
   iconButton,
   type IconButtonVariantProps,
 } from '@cerberus/styled-system/recipes'
-import type { Positions } from '../types'
 
 /**
  * This module contains the Icon Button component.
@@ -17,12 +16,6 @@ export interface IconButtonRawProps
    * The aria-label attribute for the icon button.
    */
   ariaLabel: string
-  /**
-   * The position of the tooltip relative to the icon button.
-   * @example 'top' | 'right' | 'bottom' | 'left'
-   * @default 'top'
-   */
-  tooltipPosition?: Positions
 }
 export type IconButtonProps = IconButtonRawProps & IconButtonVariantProps
 
@@ -35,8 +28,6 @@ export function IconButton(props: IconButtonProps): JSX.Element {
   return (
     <button
       {...nativeProps}
-      data-tooltip
-      data-position={props.tooltipPosition ?? 'top'}
       aria-label={ariaLabel ?? 'Icon Button'}
       className={cx(
         nativeProps.className,

package/src/components/Portal.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import type { PropsWithChildren } from 'react'
 import { createPortal } from 'react-dom'
 
@@ -26,6 +24,10 @@ export interface PortalProps {
  * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)
  */
 export function Portal(props: PropsWithChildren<PortalProps>) {
-  const container = props.container || document.body
-  return createPortal(props.children, container, props.key)
+  if (typeof window !== 'undefined') {
+    const container = props.container || document.body
+    return createPortal(props.children, container, props.key)
+  }
+
+  return null
 }

package/build/modern/chunk-3O6UTN3J.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   * 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  label?: 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.label ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n\n  return (\n    <div\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        <mask id=\"progMask\">\n          <rect fill=\"white\" width=\"100%\" height=\"100%\" />\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            className={css({\n              transition: 'stroke-dashoffset 0.5s ease',\n            })}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            pathLength=\"100\"\n            stroke=\"black\"\n            strokeDasharray=\"100\"\n            strokeDashoffset={100 - now}\n            transform=\"rotate(-90 50 50)\"\n          />\n        </mask>\n\n        {/* <circle\n          fill=\"var(--cerberus-colors-page-surface-initial)\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r={`calc(50% * (1.15 - ${strokeW}/100))`}\n          pathLength=\"100\"\n          mask=\"url(#progMask)\"\n        /> */}\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: 'action.bg.initial',\n            transition: 'stroke-dashoffset 0.5s ease',\n            '&:is([data-complete=true])': {\n              stroke: 'success.bg.initial',\n            },\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\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=\"35%\"\n            y=\"50%\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n            })}\n            x=\"39%\"\n            y=\"60%\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/build/modern/chunk-5IVINNV2.js

@@ -1,11 +0,0 @@
-// src/components/Portal.tsx
-import { createPortal } from "react-dom";
-function Portal(props) {
-  const container = props.container || document.body;
-  return createPortal(props.children, container, props.key);
-}
-
-export {
-  Portal
-};
-//# sourceMappingURL=chunk-5IVINNV2.js.map

package/build/modern/chunk-5IVINNV2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  /**\n   * The root container to render the children into.\n   * @default document.body\n   */\n  container?: Element | DocumentFragment\n  /**\n   * An optional key to use for the Portal component.\n   */\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AAGA,SAAS,oBAAoB;AAwBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { Positions } from '../types'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n  /**\n   * The position of the tooltip relative to the icon button.\n   * @example 'top' | 'right' | 'bottom' | 'left'\n   * @default 'top'\n   */\n  tooltipPosition?: Positions\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AA8BH;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}