@cerberus-design/react 0.8.0-next-7efbb36 → 0.8.0-next-29d0773

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

@@ -91,6 +91,7 @@ import { PointerSensorOptions } from '@dnd-kit/core';
 import { PointerSensorProps } from '@dnd-kit/core';
 import { pointerWithin } from '@dnd-kit/core';
 import type { Pretty } from '@cerberus/styled-system/types';
+import { ProgressBarVariantProps } from '@cerberus/styled-system/recipes';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
@@ -509,6 +510,13 @@ export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
 export declare type IconType = CarbonIconType | ElementType;
 
+declare type IndeterminateProgressBarProps = {
+    indeterminate: true;
+    now?: never;
+};
+export { IndeterminateProgressBarProps }
+export { IndeterminateProgressBarProps as IndeterminateProgressBarProps_alias_1 }
+
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
@@ -785,6 +793,13 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+declare type NonIndeterminateProgressBarProps = {
+    indeterminate?: never;
+    now: number;
+};
+export { NonIndeterminateProgressBarProps }
+export { NonIndeterminateProgressBarProps as NonIndeterminateProgressBarProps_alias_1 }
+
 /**
  * The info notification component.
  * @param props - The component props.
@@ -942,6 +957,33 @@ declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+/**
+ * The ProgressBar component is used to display the progress of a task.
+ * @param props - HTML div element attributes
+ * @param props.now - The current value of the progress bar
+ * @param props.indeterminate - Whether the progress bar is indeterminate
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} />
+ * ```
+ */
+declare function ProgressBar(props: ProgressBarProps): JSX_2.Element;
+export { ProgressBar }
+export { ProgressBar as ProgressBar_alias_1 }
+
+/**
+ * This module contains the ProgressBar component.
+ * @module
+ */
+declare interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {
+}
+export { ProgressBarBaseProps }
+export { ProgressBarBaseProps as ProgressBarBaseProps_alias_1 }
+
+declare type ProgressBarProps = ProgressBarBaseProps & ProgressBarVariantProps & (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps);
+export { ProgressBarProps }
+export { ProgressBarProps as ProgressBarProps_alias_1 }
+
 /**
  * Provides a prompt modal to the app.
  * @example

package/build/legacy/chunk-TYTEREKZ.js

@@ -0,0 +1,39 @@
+// src/components/ProgressBar.tsx
+import { cx } from "@cerberus/styled-system/css";
+import {
+  progressBar
+} from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function ProgressBar(props) {
+  const { indeterminate, size, usage, now, ...nativeProps } = props;
+  const styles = progressBar({ size, usage });
+  const nowClamped = Math.min(100, Math.max(0, now || 0));
+  const width = {
+    width: indeterminate ? "50%" : `${nowClamped}%`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": indeterminate ? 0 : nowClamped,
+      className: cx(nativeProps.className, styles.root),
+      role: "meter",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...indeterminate && { "data-indeterminate": true },
+          "data-complete": nowClamped === 100,
+          className: styles.bar,
+          style: width
+        }
+      )
+    }
+  );
+}
+
+export {
+  ProgressBar
+};
+//# sourceMappingURL=chunk-TYTEREKZ.js.map

package/build/legacy/chunk-TYTEREKZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  progressBar,\n  type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n  indeterminate?: never\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  indeterminate: true\n  now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n  ProgressBarVariantProps &\n  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @param props - HTML div element attributes\n * @param props.now - The current value of the progress bar\n * @param props.indeterminate - Whether the progress bar is indeterminate\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, ...nativeProps } = props\n  const styles = progressBar({ size, usage })\n  const nowClamped = Math.min(100, Math.max(0, now || 0))\n  const width = {\n    width: indeterminate ? '50%' : `${nowClamped}%`,\n  }\n\n  return (\n    <div\n      {...nativeProps}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? 0 : nowClamped}\n      className={cx(nativeProps.className, styles.root)}\n      role=\"meter\"\n    >\n      <div\n        {...(indeterminate && { 'data-indeterminate': true })}\n        data-complete={nowClamped === 100}\n        className={styles.bar}\n        style={width}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgDD;AAjBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,GAAG,YAAY,IAAI;AAC5D,QAAM,SAAS,YAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,WAAW,GAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/ProgressBar.js

@@ -0,0 +1,7 @@
+import {
+  ProgressBar
+} from "../chunk-TYTEREKZ.js";
+export {
+  ProgressBar
+};
+//# sourceMappingURL=ProgressBar.js.map

package/build/legacy/components/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/index.js

@@ -6,6 +6,9 @@ import {
   PromptModal,
   usePromptModal
 } from "./chunk-6CNSWNE2.js";
+import {
+  Td
+} from "./chunk-XREC5IJE.js";
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
@@ -22,6 +25,10 @@ import {
   ConfirmModal,
   useConfirmModal
 } from "./chunk-ITND4I7J.js";
+import {
+  Option,
+  Select
+} from "./chunk-MINQJYGV.js";
 import {
   Tab
 } from "./chunk-NE5NHILF.js";
@@ -41,9 +48,6 @@ import {
 import {
   Tbody
 } from "./chunk-PJ3744I6.js";
-import {
-  Td
-} from "./chunk-XREC5IJE.js";
 import {
   NavMenuList,
   getPosition
@@ -67,13 +71,12 @@ import {
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  ProgressBar
+} from "./chunk-TYTEREKZ.js";
 import {
   Radio
 } from "./chunk-PH64POOB.js";
-import {
-  Option,
-  Select
-} from "./chunk-MINQJYGV.js";
 import {
   Input
 } from "./chunk-URKYD3YB.js";
@@ -192,6 +195,7 @@ export {
   NotificationHeading,
   Option,
   Portal,
+  ProgressBar,
   PromptModal,
   Radio,
   Select,

package/build/legacy/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/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\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/ModalIcon'\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/Radio'\nexport * from './components/Select'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,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/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\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/ModalIcon'\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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,cAAc;","names":[]}

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

@@ -91,6 +91,7 @@ import { PointerSensorOptions } from '@dnd-kit/core';
 import { PointerSensorProps } from '@dnd-kit/core';
 import { pointerWithin } from '@dnd-kit/core';
 import type { Pretty } from '@cerberus/styled-system/types';
+import { ProgressBarVariantProps } from '@cerberus/styled-system/recipes';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
@@ -509,6 +510,13 @@ export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
 export declare type IconType = CarbonIconType | ElementType;
 
+declare type IndeterminateProgressBarProps = {
+    indeterminate: true;
+    now?: never;
+};
+export { IndeterminateProgressBarProps }
+export { IndeterminateProgressBarProps as IndeterminateProgressBarProps_alias_1 }
+
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
@@ -785,6 +793,13 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+declare type NonIndeterminateProgressBarProps = {
+    indeterminate?: never;
+    now: number;
+};
+export { NonIndeterminateProgressBarProps }
+export { NonIndeterminateProgressBarProps as NonIndeterminateProgressBarProps_alias_1 }
+
 /**
  * The info notification component.
  * @param props - The component props.
@@ -942,6 +957,33 @@ declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+/**
+ * The ProgressBar component is used to display the progress of a task.
+ * @param props - HTML div element attributes
+ * @param props.now - The current value of the progress bar
+ * @param props.indeterminate - Whether the progress bar is indeterminate
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} />
+ * ```
+ */
+declare function ProgressBar(props: ProgressBarProps): JSX_2.Element;
+export { ProgressBar }
+export { ProgressBar as ProgressBar_alias_1 }
+
+/**
+ * This module contains the ProgressBar component.
+ * @module
+ */
+declare interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {
+}
+export { ProgressBarBaseProps }
+export { ProgressBarBaseProps as ProgressBarBaseProps_alias_1 }
+
+declare type ProgressBarProps = ProgressBarBaseProps & ProgressBarVariantProps & (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps);
+export { ProgressBarProps }
+export { ProgressBarProps as ProgressBarProps_alias_1 }
+
 /**
  * Provides a prompt modal to the app.
  * @example

package/build/modern/chunk-TYTEREKZ.js

@@ -0,0 +1,39 @@
+// src/components/ProgressBar.tsx
+import { cx } from "@cerberus/styled-system/css";
+import {
+  progressBar
+} from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function ProgressBar(props) {
+  const { indeterminate, size, usage, now, ...nativeProps } = props;
+  const styles = progressBar({ size, usage });
+  const nowClamped = Math.min(100, Math.max(0, now || 0));
+  const width = {
+    width: indeterminate ? "50%" : `${nowClamped}%`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": indeterminate ? 0 : nowClamped,
+      className: cx(nativeProps.className, styles.root),
+      role: "meter",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...indeterminate && { "data-indeterminate": true },
+          "data-complete": nowClamped === 100,
+          className: styles.bar,
+          style: width
+        }
+      )
+    }
+  );
+}
+
+export {
+  ProgressBar
+};
+//# sourceMappingURL=chunk-TYTEREKZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  progressBar,\n  type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n  indeterminate?: never\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  indeterminate: true\n  now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n  ProgressBarVariantProps &\n  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @param props - HTML div element attributes\n * @param props.now - The current value of the progress bar\n * @param props.indeterminate - Whether the progress bar is indeterminate\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, ...nativeProps } = props\n  const styles = progressBar({ size, usage })\n  const nowClamped = Math.min(100, Math.max(0, now || 0))\n  const width = {\n    width: indeterminate ? '50%' : `${nowClamped}%`,\n  }\n\n  return (\n    <div\n      {...nativeProps}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? 0 : nowClamped}\n      className={cx(nativeProps.className, styles.root)}\n      role=\"meter\"\n    >\n      <div\n        {...(indeterminate && { 'data-indeterminate': true })}\n        data-complete={nowClamped === 100}\n        className={styles.bar}\n        style={width}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgDD;AAjBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,GAAG,YAAY,IAAI;AAC5D,QAAM,SAAS,YAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,WAAW,GAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/ProgressBar.js

@@ -0,0 +1,7 @@
+import {
+  ProgressBar
+} from "../chunk-TYTEREKZ.js";
+export {
+  ProgressBar
+};
+//# sourceMappingURL=ProgressBar.js.map

package/build/modern/components/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/index.js

@@ -6,6 +6,9 @@ import {
   PromptModal,
   usePromptModal
 } from "./chunk-QRTCZO2W.js";
+import {
+  Td
+} from "./chunk-XREC5IJE.js";
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
@@ -22,6 +25,10 @@ import {
   ConfirmModal,
   useConfirmModal
 } from "./chunk-GM3AUVXL.js";
+import {
+  Option,
+  Select
+} from "./chunk-MINQJYGV.js";
 import {
   Tab
 } from "./chunk-SONHHNYQ.js";
@@ -41,9 +48,6 @@ import {
 import {
   Tbody
 } from "./chunk-PJ3744I6.js";
-import {
-  Td
-} from "./chunk-XREC5IJE.js";
 import {
   NavMenuList,
   getPosition
@@ -67,13 +71,12 @@ import {
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  ProgressBar
+} from "./chunk-TYTEREKZ.js";
 import {
   Radio
 } from "./chunk-PH64POOB.js";
-import {
-  Option,
-  Select
-} from "./chunk-MINQJYGV.js";
 import {
   Input
 } from "./chunk-URKYD3YB.js";
@@ -192,6 +195,7 @@ export {
   NotificationHeading,
   Option,
   Portal,
+  ProgressBar,
   PromptModal,
   Radio,
   Select,

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/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\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/ModalIcon'\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/Radio'\nexport * from './components/Select'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,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/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\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/ModalIcon'\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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,cAAc;","names":[]}

package/package.json

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

package/src/components/ProgressBar.tsx

@@ -0,0 +1,61 @@
+import { cx } from '@cerberus/styled-system/css'
+import {
+  progressBar,
+  type ProgressBarVariantProps,
+} from '@cerberus/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+/**
+ * This module contains the ProgressBar component.
+ * @module
+ */
+
+export interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}
+export type NonIndeterminateProgressBarProps = {
+  indeterminate?: never
+  now: number
+}
+export type IndeterminateProgressBarProps = {
+  indeterminate: true
+  now?: never
+}
+export type ProgressBarProps = ProgressBarBaseProps &
+  ProgressBarVariantProps &
+  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)
+
+/**
+ * The ProgressBar component is used to display the progress of a task.
+ * @param props - HTML div element attributes
+ * @param props.now - The current value of the progress bar
+ * @param props.indeterminate - Whether the progress bar is indeterminate
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} />
+ * ```
+ */
+export function ProgressBar(props: ProgressBarProps) {
+  const { indeterminate, size, usage, now, ...nativeProps } = props
+  const styles = progressBar({ size, usage })
+  const nowClamped = Math.min(100, Math.max(0, now || 0))
+  const width = {
+    width: indeterminate ? '50%' : `${nowClamped}%`,
+  }
+
+  return (
+    <div
+      {...nativeProps}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={indeterminate ? 0 : nowClamped}
+      className={cx(nativeProps.className, styles.root)}
+      role="meter"
+    >
+      <div
+        {...(indeterminate && { 'data-indeterminate': true })}
+        data-complete={nowClamped === 100}
+        className={styles.bar}
+        style={width}
+      />
+    </div>
+  )
+}

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './components/Notification'
 export * from './components/NotificationHeading'
 export * from './components/NotificationDescription'
 export * from './components/Portal'
+export * from './components/ProgressBar'
 export * from './components/Radio'
 export * from './components/Select'
 export * from './components/Tab'