@box/blueprint-web 12.139.0 → 13.1.0

package/dist/lib-esm/index.css

@@ -8863,6 +8863,38 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
 .bp_base_text_input_module_textInputContainerOuter--78f05 .bp_base_text_input_module_inlineError--78f05,.bp_base_text_input_module_textInputContainerOuter--78f05 .bp_base_text_input_module_subtext--78f05{
   margin-block-start:var(--text-input-inline-error-subtext-block-margin);
 }
+
+.bp_progress_bar_module_reactAriaProgressBar--23af7{
+  display:grid;
+  grid-template-areas:"label value" "bar bar";
+  grid-template-columns:1fr auto;
+}
+.bp_progress_bar_module_reactAriaProgressBar--23af7 .bp_progress_bar_module_bar--23af7{
+  background:var(--progress-bar-track-bg);
+  border-radius:var(--progress-bar-border-radius);
+  forced-color-adjust:none;
+  grid-area:bar;
+  height:.375rem;
+  overflow:hidden;
+  will-change:transform;
+}
+.bp_progress_bar_module_reactAriaProgressBar--23af7 .bp_progress_bar_module_fill--23af7{
+  background:var(--progress-bar-fill-bg);
+  border-radius:var(--progress-bar-border-radius);
+  height:100%;
+}
+.bp_progress_bar_module_reactAriaProgressBar--23af7[data-modern=false]{
+  --progress-bar-border-radius:var(--radius-1);
+  --progress-bar-track-bg:var(--surface-progress-bar-surface-brand-background);
+  --progress-bar-fill-bg:var(--surface-nav-surface-brand-foreground);
+  gap:var(--space-1);
+}
+.bp_progress_bar_module_reactAriaProgressBar--23af7[data-modern=true]{
+  --progress-bar-border-radius:var(--bp-radius-02);
+  --progress-bar-track-bg:var(--bp-surface-progress-bar-surface-brand-background);
+  --progress-bar-fill-bg:var(--bp-surface-nav-surface-brand-foreground);
+  gap:var(--bp-space-010);
+}
 .bp_chip_module_chip--15eb7[data-modern=false]{
   --chip-gap:var(--space-2);
   --chip-height:var(--size-8);

package/dist/lib-esm/index.d.ts

@@ -43,6 +43,7 @@ export * from './navigation-menu';
 export * from './page';
 export * from './page-section';
 export * from './password-input';
+export * from './progress-bar';
 export * from './primitives/base-text-input';
 export * from './primitives/calendar';
 export * from './primitives/chips/filter-chip';

package/dist/lib-esm/index.js

@@ -52,6 +52,7 @@ export { NavigationMenu } from './navigation-menu/index.js';
 export { Page } from './page/index.js';
 export { PageSection } from './page-section/index.js';
 export { PasswordInput } from './password-input/password-input.js';
+export { ProgressBar } from './progress-bar/progress-bar.js';
 export { BaseTextInput } from './primitives/base-text-input/base-text-input.js';
 export { Calendar } from './primitives/calendar/calendar.js';
 export { CalendarDate, CalendarDateTime, DateFormatter, Time, ZonedDateTime } from './primitives/calendar/classes.util.js';

package/dist/lib-esm/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './progress-bar';
+export type { ProgressBarProps } from './types';

package/dist/lib-esm/progress-bar/progress-bar.d.ts

@@ -0,0 +1,3 @@
+import { type ProgressBarProps } from './types';
+declare function ProgressBar({ ariaLabel, label, className, labelId, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressBar };

package/dist/lib-esm/progress-bar/progress-bar.js

@@ -0,0 +1,48 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { ProgressBar as ProgressBar$1 } from 'react-aria-components';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './progress-bar.module.js';
+
+function ProgressBar({
+  ariaLabel,
+  label,
+  className,
+  labelId,
+  ...rest
+}) {
+  const resolvedLabelId = useUniqueId('progress-bar-label-', !labelId) || labelId;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  return jsxs(Fragment, {
+    children: [label && jsx("div", {
+      className: "label",
+      id: resolvedLabelId,
+      children: label
+    }), jsx(ProgressBar$1, {
+      ...rest,
+      "aria-label": ariaLabel,
+      "aria-labelledby": label ? resolvedLabelId : undefined,
+      className: clsx(styles.reactAriaProgressBar, className),
+      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      children: ({
+        percentage
+      }) => {
+        return jsx("div", {
+          className: styles.bar,
+          children: jsx("div", {
+            className: styles.fill,
+            "data-testid": "progress-bar-fill",
+            style: {
+              width: `${percentage}%`
+            }
+          })
+        });
+      }
+    })]
+  });
+}
+
+export { ProgressBar };

package/dist/lib-esm/progress-bar/progress-bar.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"reactAriaProgressBar":"bp_progress_bar_module_reactAriaProgressBar--23af7","bar":"bp_progress_bar_module_bar--23af7","fill":"bp_progress_bar_module_fill--23af7"};
+
+export { styles as default };

package/dist/lib-esm/progress-bar/types.d.ts

@@ -0,0 +1,20 @@
+import { type ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
+import { type ReactNode } from 'react';
+type ProgressBarBaseProps = AriaProgressBarProps & {
+    /** Additional CSS class name(s) applied to the root element. */
+    className?: string;
+    /** Custom ID for the label element. When omitted, a unique ID is generated automatically. */
+    labelId?: string;
+};
+type ProgressBarWithAriaLabel = ProgressBarBaseProps & {
+    /** Accessible label for screen readers when no visible label is provided. */
+    ariaLabel: string;
+    label?: never;
+};
+type ProgressBarWithLabel = ProgressBarBaseProps & {
+    ariaLabel?: never;
+    /** Visible label element rendered above the progress bar. */
+    label: ReactNode;
+};
+export type ProgressBarProps = ProgressBarWithAriaLabel | ProgressBarWithLabel;
+export {};

package/dist/lib-esm/text-input/text-input.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.139.0",
+    "version": "13.1.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.101.8",
+        "@box/blueprint-web-assets": "^4.101.10",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.16.45",
+        "@box/storybook-utils": "^0.16.47",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",