boreal-ui 0.0.76 → 0.0.78

package/dist/next/PopOver.css

@@ -0,0 +1,417 @@
+@charset "UTF-8";
+/**
+ * ---------------------------------------------------------------------
+ * theme.scss
+ * ---------------------------------------------------------------------
+ * Global design tokens and theme configuration for the Boreal UI system.
+ * This file defines SCSS variables, maps, and constants for:
+ * - Colors (brand, background, feedback, text)
+ * - Fonts (families, sizes, weights)
+ * - Spacing
+ * - Border radii
+ * - Shadows
+ * - Transitions
+ * - Z-index layers
+ * - Thematic color maps
+ * - UI states (success, error, warning)
+ * - Rounding and shadow presets
+ * 
+ * All variables support the `!default` flag to allow overrides via user-defined themes.
+ * ---------------------------------------------------------------------
+ *
+ * == Color Palette ==
+ * $primary-color           – Brand primary color
+ * $secondary-color         – Secondary accent color
+ * $tertiary-color          – Alternate accent color
+ * $quaternary-color        – Alternate accent color
+ * $background-color        – Main background color (dark)
+ * $background-color-surface – Surface layer background (cards, modals)
+ * $error-color, $success-color, $warning-color – Feedback states
+ * $link-color              – Link default color
+ * $link-hover-color        – Link hover state
+ * $text-color, $text-color-light, $text-color-primary, $text-color-secondary – Text coloring
+ *
+ * == Typography ==
+ * $font-family-primary / secondary – Primary typefaces
+ * $font-size-xxs to $font-size-xxl – Font size scale
+ * $font-weight-light to bolder     – Font weights
+ *
+ * == Spacing ==
+ * $spacing-xxs to $spacing-xl – Margin/padding utility scale
+ *
+ * == Border Radius ==
+ * $border-radius-xs to full  – Border rounding presets
+ *
+ * == Shadows ==
+ * $box-shadow-light to intense – Shadow elevation levels
+ * $inverted-shadows            – Shadows used on dark surfaces (e.g. modals)
+ *
+ * == Transitions ==
+ * $transition-fast / default / slow – Standard easing transitions
+ *
+ * == Z-Index Layers ==
+ * $z-index-drawer   – For slide-out panels
+ * $z-index-modal    – For modals and overlays
+ * $z-index-tooltip  – Highest layer for tooltips and floating labels
+ *
+ * == Theme Map ==
+ * $themes: map of theme names (e.g. "primary", "secondary") to their visual styles
+ *  - Each theme includes: bg, hover, text, border, text-hover
+ *
+ * == State Map ==
+ * $states: visual styles for UI feedback states (success, error, warning)
+ *
+ * == Rounding / Shadow Maps ==
+ * $rounding: key-value pairs for component rounding levels
+ * $shadow: key-value pairs for shadow levels
+ */
+/**
+ * -----------------------------------------------------
+ * _breakpoints.scss
+ * -----------------------------------------------------
+ * These constants define the standard device-width breakpoints
+ * used in responsive media queries throughout the theme.
+ *
+ * - $breakpoint-xs: 320px  (Extra small, portrait phones)
+ * - $breakpoint-sm: 480px  (Small devices, larger phones)
+ * - $breakpoint-md: 768px  (Medium devices, tablets)
+ * - $breakpoint-lg: 1024px (Large devices, desktops)
+ * - $breakpoint-xl: 1280px (Extra large desktops)
+ * - $breakpoint-xxl: 1536px (Widescreens, large monitors)
+ *
+ * $breakpoints map:
+ *  Use this map to loop over breakpoints or access named values.
+ */
+/**
+ * -----------------------------------------------------
+ * _animations.scss
+ * -----------------------------------------------------
+ * This file contains reusable keyframe animations
+ * used across the component library for transitions,
+ * loaders, and visual enhancements.
+ *
+ * List of Animations:
+ *
+ * 1. fade-in
+ *    - Smoothly fades in an element by transitioning opacity from 0 to 1.
+ *
+ * 2. slide-up
+ *    - Slides an element upward into view from below while fading in.
+ *
+ * 3. spin-3d
+ *    - Rotates an element in 3D space along both X and Y axes (360°).
+ *
+ * 4. spin
+ *    - Continuously rotates an element clockwise in 2D space.
+ *
+ * 5. pulse
+ *    - Gently scales an element up and down to create a pulsing effect.
+ *
+ * 6. fade-in-up
+ *    - Combines a fade-in with a slight upward motion (used for tooltips, popups).
+ *
+ * 7. progress-grow
+ *    - Expands the width of a progress bar from 0% to 100%.
+ *
+ * 8. indeterminate-move
+ *    - Moves an element from left to right in a loop, used in indeterminate loaders.
+ *
+ * 9. skeleton-loading
+ *    - Creates a sweeping shimmer effect for skeleton loaders.
+ */
+@keyframes _fade-in_4farb_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes _slide-up_4farb_1 {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes _spin-3d_4farb_1 {
+  0% {
+    transform: rotateX(0deg) rotateY(0deg);
+  }
+  100% {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+@keyframes _spin_4farb_1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes _pulse_4farb_1 {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes _fade-in-up_4farb_1 {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes _progress-grow_4farb_1 {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+@keyframes _indeterminate-move_4farb_1 {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes _skeleton-loading_4farb_1 {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+._container_4farb_204 {
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+}
+
+._trigger_4farb_210 {
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  font-family: var(--font-family-ui);
+}
+._trigger_4farb_210:focus-visible {
+  outline: 2px solid var(--focus-outline-color, var(--primary-color));
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+._popover_4farb_224 {
+  position: absolute;
+  z-index: 1000;
+  max-width: 90vw;
+  min-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  background-color: var(--background-color-light);
+  color: var(--text-color-secondary);
+  border: 1px solid var(--text-color-secondary);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+  animation: _fade-in_4farb_1 0.25s ease-in-out forwards;
+}
+@media (width <= 479.98px) {
+  ._popover_4farb_224 {
+    max-width: 96vw;
+    min-width: 75%;
+  }
+}
+@media (min-width: 1024px) {
+  ._popover_4farb_224 {
+    max-width: 520px;
+  }
+}
+._popover_4farb_224:focus-visible {
+  outline: 2px solid var(--focus-outline-color, var(--primary-color));
+  outline-offset: 3px;
+  border-radius: 6px;
+}
+@media (min-width: 480px) {
+  ._popover_4farb_224[data-overflow-right=true] {
+    left: auto !important;
+    right: 0 !important;
+    transform: translateY(10px);
+  }
+  ._popover_4farb_224[data-overflow-left=true] {
+    right: auto !important;
+    left: 0 !important;
+    transform: translateY(10px);
+  }
+}
+._popover_4farb_224._primary_4farb_271 {
+  background-color: var(--primary-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--primary-color);
+}
+._popover_4farb_224._secondary_4farb_276 {
+  background-color: var(--secondary-color);
+  color: var(--text-color-secondary);
+  border: 1px solid var(--secondary-color);
+}
+._popover_4farb_224._tertiary_4farb_281 {
+  background-color: var(--tertiary-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--tertiary-color);
+}
+._popover_4farb_224._quaternary_4farb_286 {
+  background-color: var(--quaternary-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--quaternary-color);
+}
+._popover_4farb_224._clear_4farb_291 {
+  background-color: transparent;
+  color: var(--text-color-primary);
+  border: 1px solid var(--text-color-primary);
+}
+._popover_4farb_224._success_4farb_296 {
+  background-color: var(--success-color);
+  color: var(--text-color-primary);
+  box-shadow: 0px 4px 8px rgba(86, 101, 116, 0.2);
+  border: 1px solid var(--success-color);
+}
+._popover_4farb_224._error_4farb_302 {
+  background-color: var(--error-color);
+  color: var(--text-color-primary);
+  box-shadow: 0px 4px 8px rgba(86, 101, 116, 0.2);
+  border: 1px solid var(--error-color);
+}
+._popover_4farb_224._warning_4farb_308 {
+  background-color: var(--warning-color);
+  color: var(--text-color-primary);
+  box-shadow: 0px 4px 8px rgba(86, 101, 116, 0.2);
+  border: 1px solid var(--warning-color);
+}
+._popover_4farb_224._clear_4farb_291 {
+  border: 1px solid var(--text-color-primary);
+}
+._popover_4farb_224::after {
+  content: none !important;
+  display: none !important;
+}
+
+._top_4farb_322 {
+  bottom: 95%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-10px);
+}
+
+._bottom_4farb_328 {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(10px);
+}
+
+._left_4farb_334 {
+  right: 100%;
+  top: 50%;
+  transform: translateX(-8px) translateY(-50%);
+}
+
+._right_4farb_340 {
+  left: 100%;
+  top: 50%;
+  transform: translateX(8px) translateY(-50%);
+}
+
+@media (width <= 319.98px) {
+  ._top_4farb_322,
+  ._bottom_4farb_328 {
+    left: 50%;
+    transform: translateX(-50%) translateY(8px);
+  }
+  ._left_4farb_334,
+  ._right_4farb_340 {
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+}
+._roundNone_4farb_358 {
+  border-radius: var(--border-radius-none);
+}
+
+._roundSmall_4farb_362 {
+  border-radius: var(--border-radius-sm);
+}
+
+._roundMedium_4farb_366 {
+  border-radius: var(--border-radius-md);
+}
+
+._roundLarge_4farb_370 {
+  border-radius: var(--border-radius-lg);
+}
+
+._roundFull_4farb_374 {
+  border-radius: var(--border-radius-full);
+}
+
+._shadowNone_4farb_378 {
+  box-shadow: var(--box-shadow-none);
+}
+
+._shadowLight_4farb_382 {
+  box-shadow: var(--box-shadow-light);
+}
+
+._shadowMedium_4farb_386 {
+  box-shadow: var(--box-shadow-medium);
+}
+
+._shadowStrong_4farb_390 {
+  box-shadow: var(--box-shadow-heavy);
+}
+
+._shadowIntense_4farb_394 {
+  box-shadow: var(--box-shadow-intense);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._popover_4farb_224,
+  ._popover_4farb_224 * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+@media (hover: none) {
+  ._popover_4farb_224 {
+    animation: none;
+  }
+}
+@media (forced-colors: active) {
+  ._popover_4farb_224 {
+    background: Canvas;
+    color: CanvasText;
+    border: 1px solid ButtonText;
+    outline-color: Highlight;
+  }
+}

package/dist/next/PopOver.js

@@ -1,4 +1,4 @@
-import { P } from "./PopOver-CUON_Abe.js";
+import { P } from "./PopOver-Dmf41W2o.js";
 export {
   P as default
 };

package/dist/next/{ProgressBar-CMYDs8uL.js → ProgressBar-BgCHpDo8.js}

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
 import { d as getDefaultTheme, c as getDefaultSize, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
-const BaseProgressBar = ({
+import './ProgressBar.css';const BaseProgressBar = ({
   value = 0,
   theme = getDefaultTheme(),
   state = "",
@@ -100,52 +100,42 @@ const BaseProgressBar = ({
   ] });
 };
 BaseProgressBar.displayName = "BaseProgressBar";
-const noScroll = "_noScroll_1a6ky_109";
-const errorMessage = "_errorMessage_1a6ky_110";
-const loadingContainer = "_loadingContainer_1a6ky_111";
-const hideScrollbar = "_hideScrollbar_1a6ky_103";
-const sr_only = "_sr_only_1a6ky_112";
-const container = "_container_1a6ky_637";
-const xs = "_xs_1a6ky_660";
-const small = "_small_1a6ky_673";
-const medium = "_medium_1a6ky_686";
-const large = "_large_1a6ky_699";
-const xl = "_xl_1a6ky_712";
-const clear = "_clear_1a6ky_725";
-const layout = "_layout_1a6ky_729";
-const label = "_label_1a6ky_736";
-const labelTop = "_labelTop_1a6ky_745";
-const labelBottom = "_labelBottom_1a6ky_750";
-const labelLeft = "_labelLeft_1a6ky_755";
-const labelRight = "_labelRight_1a6ky_756";
-const bar = "_bar_1a6ky_772";
-const primary = "_primary_1a6ky_779";
-const secondary = "_secondary_1a6ky_782";
-const tertiary = "_tertiary_1a6ky_785";
-const quaternary = "_quaternary_1a6ky_788";
-const success = "_success_1a6ky_794";
-const error = "_error_1a6ky_110";
-const warning = "_warning_1a6ky_800";
-const animated = "_animated_1a6ky_807";
-const indeterminate = "_indeterminate_1a6ky_811";
-const roundNone = "_roundNone_1a6ky_816";
-const roundSmall = "_roundSmall_1a6ky_820";
-const roundMedium = "_roundMedium_1a6ky_824";
-const roundLarge = "_roundLarge_1a6ky_828";
-const roundFull = "_roundFull_1a6ky_832";
-const shadowNone = "_shadowNone_1a6ky_836";
-const shadowLight = "_shadowLight_1a6ky_840";
-const shadowMedium = "_shadowMedium_1a6ky_844";
-const shadowStrong = "_shadowStrong_1a6ky_848";
-const shadowIntense = "_shadowIntense_1a6ky_852";
-const spin = "_spin_1a6ky_1";
-const pulse = "_pulse_1a6ky_1";
+const container = "_container_fzkik_204";
+const xs = "_xs_fzkik_227";
+const small = "_small_fzkik_240";
+const medium = "_medium_fzkik_253";
+const large = "_large_fzkik_266";
+const xl = "_xl_fzkik_279";
+const clear = "_clear_fzkik_292";
+const layout = "_layout_fzkik_296";
+const label = "_label_fzkik_303";
+const labelTop = "_labelTop_fzkik_312";
+const labelBottom = "_labelBottom_fzkik_317";
+const labelLeft = "_labelLeft_fzkik_322";
+const labelRight = "_labelRight_fzkik_323";
+const bar = "_bar_fzkik_339";
+const primary = "_primary_fzkik_346";
+const secondary = "_secondary_fzkik_349";
+const tertiary = "_tertiary_fzkik_352";
+const quaternary = "_quaternary_fzkik_355";
+const success = "_success_fzkik_361";
+const error = "_error_fzkik_364";
+const warning = "_warning_fzkik_367";
+const animated = "_animated_fzkik_374";
+const indeterminate = "_indeterminate_fzkik_378";
+const roundNone = "_roundNone_fzkik_383";
+const roundSmall = "_roundSmall_fzkik_387";
+const roundMedium = "_roundMedium_fzkik_391";
+const roundLarge = "_roundLarge_fzkik_395";
+const roundFull = "_roundFull_fzkik_399";
+const shadowNone = "_shadowNone_fzkik_403";
+const shadowLight = "_shadowLight_fzkik_407";
+const shadowMedium = "_shadowMedium_fzkik_411";
+const shadowStrong = "_shadowStrong_fzkik_415";
+const shadowIntense = "_shadowIntense_fzkik_419";
+const spin = "_spin_fzkik_1";
+const pulse = "_pulse_fzkik_1";
 const styles = {
-  noScroll,
-  errorMessage,
-  loadingContainer,
-  hideScrollbar,
-  sr_only,
   container,
   xs,
   small,
@@ -168,9 +158,9 @@ const styles = {
   error,
   warning,
   animated,
-  "progress-grow": "_progress-grow_1a6ky_1",
+  "progress-grow": "_progress-grow_fzkik_1",
   indeterminate,
-  "indeterminate-move": "_indeterminate-move_1a6ky_1",
+  "indeterminate-move": "_indeterminate-move_fzkik_1",
   roundNone,
   roundSmall,
   roundMedium,
@@ -181,13 +171,13 @@ const styles = {
   shadowMedium,
   shadowStrong,
   shadowIntense,
-  "fade-in": "_fade-in_1a6ky_1",
-  "slide-up": "_slide-up_1a6ky_1",
-  "spin-3d": "_spin-3d_1a6ky_1",
+  "fade-in": "_fade-in_fzkik_1",
+  "slide-up": "_slide-up_fzkik_1",
+  "spin-3d": "_spin-3d_fzkik_1",
   spin,
   pulse,
-  "fade-in-up": "_fade-in-up_1a6ky_1",
-  "skeleton-loading": "_skeleton-loading_1a6ky_1"
+  "fade-in-up": "_fade-in-up_fzkik_1",
+  "skeleton-loading": "_skeleton-loading_fzkik_1"
 };
 const ProgressBar = (props) => {
   return /* @__PURE__ */ jsx(BaseProgressBar, { ...props, classMap: styles });
@@ -196,4 +186,4 @@ ProgressBar.displayName = "ProgressBar";
 export {
   ProgressBar as P
 };
-//# sourceMappingURL=ProgressBar-CMYDs8uL.js.map
+//# sourceMappingURL=ProgressBar-BgCHpDo8.js.map

package/dist/next/{ProgressBar-CMYDs8uL.js.map → ProgressBar-BgCHpDo8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar-CMYDs8uL.js","sources":["../../src/components/ProgressBar/ProgressBarBase.tsx","../../src/components/ProgressBar/next/ProgressBar.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\nimport { BaseProgressBarProps } from \"./ProgressBar.types\";\r\n\r\nconst BaseProgressBar: React.FC<BaseProgressBarProps> = ({\r\n  value = 0,\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  animated = true,\r\n  indeterminate = false,\r\n  className = \"\",\r\n  \"aria-label\": ariaLabel = \"Progress\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-valuetext\": ariaValueText,\r\n  label,\r\n  labelPosition = \"top\",\r\n  labelId,\r\n  description,\r\n  descriptionId,\r\n  \"data-testid\": testId = \"progressbar\",\r\n  classMap,\r\n}) => {\r\n  const numeric = Number(value);\r\n  const clamped = Number.isFinite(numeric)\r\n    ? Math.min(100, Math.max(0, numeric))\r\n    : 0;\r\n  const progressValue = Math.round(clamped);\r\n\r\n  const resolvedLabelId = label ? labelId || `${testId}-label` : undefined;\r\n  const resolvedDescriptionId = description\r\n    ? descriptionId || `${testId}-description`\r\n    : undefined;\r\n\r\n  const computedAriaLabel =\r\n    !ariaLabelledBy && !resolvedLabelId ? ariaLabel : undefined;\r\n\r\n  const computedAriaLabelledBy = ariaLabelledBy || resolvedLabelId;\r\n  const computedAriaDescribedBy = ariaDescribedBy || resolvedDescriptionId;\r\n\r\n  const computedAriaValueText =\r\n    ariaValueText || (indeterminate ? \"Loading\" : `${progressValue}% complete`);\r\n\r\n  const layoutClass = useMemo(() => {\r\n    const posClass = classMap[`label${capitalize(labelPosition)}`];\r\n    return combineClassNames(classMap.layout, Boolean(label) && posClass);\r\n  }, [classMap, label, labelPosition]);\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className,\r\n      ),\r\n    [classMap, size, shadow, rounding, className],\r\n  );\r\n\r\n  const barClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.bar,\r\n        classMap[theme],\r\n        classMap[state],\r\n        animated && classMap.animated,\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        indeterminate && classMap.indeterminate,\r\n      ),\r\n    [classMap, theme, state, rounding, indeterminate, animated],\r\n  );\r\n\r\n  const labelNode = label ? (\r\n    <div\r\n      id={resolvedLabelId}\r\n      className={classMap.label}\r\n      data-testid={`${testId}-label`}\r\n    >\r\n      {label}\r\n    </div>\r\n  ) : null;\r\n\r\n  const descriptionNode = description ? (\r\n    <div id={resolvedDescriptionId} data-testid={`${testId}-description`}>\r\n      {description}\r\n    </div>\r\n  ) : null;\r\n\r\n  return (\r\n    <div className={layoutClass}>\r\n      {(labelPosition === \"top\" || labelPosition === \"left\") && labelNode}\r\n\r\n      <div\r\n        className={wrapperClass}\r\n        role=\"progressbar\"\r\n        aria-label={computedAriaLabel}\r\n        aria-labelledby={computedAriaLabelledBy}\r\n        aria-describedby={computedAriaDescribedBy}\r\n        aria-valuemin={0}\r\n        aria-valuemax={100}\r\n        aria-valuenow={indeterminate ? undefined : progressValue}\r\n        aria-valuetext={computedAriaValueText}\r\n        aria-busy={indeterminate || undefined}\r\n        data-testid={testId}\r\n      >\r\n        <div\r\n          className={barClass}\r\n          style={{ width: indeterminate ? undefined : `${progressValue}%` }}\r\n          data-testid={`${testId}-bar`}\r\n        />\r\n      </div>\r\n\r\n      {(labelPosition === \"bottom\" || labelPosition === \"right\") && labelNode}\r\n      {descriptionNode}\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseProgressBar.displayName = \"BaseProgressBar\";\r\nexport default BaseProgressBar;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseProgressBar from \"../ProgressBarBase\";\r\nimport styles from \"./ProgressBar.module.scss\";\r\nimport { ProgressBarProps } from \"../ProgressBar.types\";\r\n\r\nconst ProgressBar: React.FC<ProgressBarProps> = (props) => {\r\n  return <BaseProgressBar {...props} classMap={styles} />;\r\n};\r\nProgressBar.displayName = \"ProgressBar\";\r\nexport default ProgressBar;\r\n"],"names":["animated","indeterminate","label"],"mappings":"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"}
+{"version":3,"file":"ProgressBar-BgCHpDo8.js","sources":["../../src/components/ProgressBar/ProgressBarBase.tsx","../../src/components/ProgressBar/next/ProgressBar.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\nimport { BaseProgressBarProps } from \"./ProgressBar.types\";\r\n\r\nconst BaseProgressBar: React.FC<BaseProgressBarProps> = ({\r\n  value = 0,\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  animated = true,\r\n  indeterminate = false,\r\n  className = \"\",\r\n  \"aria-label\": ariaLabel = \"Progress\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-valuetext\": ariaValueText,\r\n  label,\r\n  labelPosition = \"top\",\r\n  labelId,\r\n  description,\r\n  descriptionId,\r\n  \"data-testid\": testId = \"progressbar\",\r\n  classMap,\r\n}) => {\r\n  const numeric = Number(value);\r\n  const clamped = Number.isFinite(numeric)\r\n    ? Math.min(100, Math.max(0, numeric))\r\n    : 0;\r\n  const progressValue = Math.round(clamped);\r\n\r\n  const resolvedLabelId = label ? labelId || `${testId}-label` : undefined;\r\n  const resolvedDescriptionId = description\r\n    ? descriptionId || `${testId}-description`\r\n    : undefined;\r\n\r\n  const computedAriaLabel =\r\n    !ariaLabelledBy && !resolvedLabelId ? ariaLabel : undefined;\r\n\r\n  const computedAriaLabelledBy = ariaLabelledBy || resolvedLabelId;\r\n  const computedAriaDescribedBy = ariaDescribedBy || resolvedDescriptionId;\r\n\r\n  const computedAriaValueText =\r\n    ariaValueText || (indeterminate ? \"Loading\" : `${progressValue}% complete`);\r\n\r\n  const layoutClass = useMemo(() => {\r\n    const posClass = classMap[`label${capitalize(labelPosition)}`];\r\n    return combineClassNames(classMap.layout, Boolean(label) && posClass);\r\n  }, [classMap, label, labelPosition]);\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className,\r\n      ),\r\n    [classMap, size, shadow, rounding, className],\r\n  );\r\n\r\n  const barClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.bar,\r\n        classMap[theme],\r\n        classMap[state],\r\n        animated && classMap.animated,\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        indeterminate && classMap.indeterminate,\r\n      ),\r\n    [classMap, theme, state, rounding, indeterminate, animated],\r\n  );\r\n\r\n  const labelNode = label ? (\r\n    <div\r\n      id={resolvedLabelId}\r\n      className={classMap.label}\r\n      data-testid={`${testId}-label`}\r\n    >\r\n      {label}\r\n    </div>\r\n  ) : null;\r\n\r\n  const descriptionNode = description ? (\r\n    <div id={resolvedDescriptionId} data-testid={`${testId}-description`}>\r\n      {description}\r\n    </div>\r\n  ) : null;\r\n\r\n  return (\r\n    <div className={layoutClass}>\r\n      {(labelPosition === \"top\" || labelPosition === \"left\") && labelNode}\r\n\r\n      <div\r\n        className={wrapperClass}\r\n        role=\"progressbar\"\r\n        aria-label={computedAriaLabel}\r\n        aria-labelledby={computedAriaLabelledBy}\r\n        aria-describedby={computedAriaDescribedBy}\r\n        aria-valuemin={0}\r\n        aria-valuemax={100}\r\n        aria-valuenow={indeterminate ? undefined : progressValue}\r\n        aria-valuetext={computedAriaValueText}\r\n        aria-busy={indeterminate || undefined}\r\n        data-testid={testId}\r\n      >\r\n        <div\r\n          className={barClass}\r\n          style={{ width: indeterminate ? undefined : `${progressValue}%` }}\r\n          data-testid={`${testId}-bar`}\r\n        />\r\n      </div>\r\n\r\n      {(labelPosition === \"bottom\" || labelPosition === \"right\") && labelNode}\r\n      {descriptionNode}\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseProgressBar.displayName = \"BaseProgressBar\";\r\nexport default BaseProgressBar;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseProgressBar from \"../ProgressBarBase\";\r\nimport styles from \"./ProgressBar.module.scss\";\r\nimport { ProgressBarProps } from \"../ProgressBar.types\";\r\n\r\nconst ProgressBar: React.FC<ProgressBarProps> = (props) => {\r\n  return <BaseProgressBar {...props} classMap={styles} />;\r\n};\r\nProgressBar.displayName = \"ProgressBar\";\r\nexport default ProgressBar;\r\n"],"names":["animated","indeterminate","label"],"mappings":"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"}