@react-md/core 1.0.0-next.2 → 1.0.0-next.20

package/dist/positioning/utils.d.ts

@@ -1,4 +1,4 @@
-import type { PositionAnchor } from "./types.js";
+import { type PositionAnchor } from "./types.js";
 /** @internal */
 export interface XCoordConfig {
     xMargin: number;
@@ -106,7 +106,7 @@ export declare function getBottomCoord({ yMargin, initialY, elHeight, containerR
  */
 export declare function getBelowCoord({ yMargin, initialY, containerRect, }: YCoordConfig): Top;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface TransformOriginOptions extends PositionAnchor {
@@ -152,7 +152,7 @@ export declare function findSizingContainer(el: HTMLElement | null): HTMLElement
  */
 export declare function getElementRect(element: HTMLElement): DOMRect;
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  * @internal
  */
 interface IsWithinViewportOptions {
@@ -160,7 +160,7 @@ interface IsWithinViewportOptions {
     fixedToElement: HTMLElement;
 }
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  * @internal
  */
 export declare function isWithinViewport(options: IsWithinViewportOptions): boolean;

package/dist/positioning/utils.js

@@ -227,7 +227,7 @@
     return rect;
 }
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  * @internal
  */ export function isWithinViewport(options) {
     const { fixedElement, fixedToElement } = options;

package/dist/positioning/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import type { PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n  xMargin: number;\n  elWidth: number;\n  initialX?: number;\n  containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n  yMargin: number;\n  elHeight: number;\n  initialY?: number;\n  containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  const containerCenter = containerRect.width / 2;\n  const elementCenter = elWidth / 2;\n  return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (\n    (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n  );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n  yMargin,\n  elHeight,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  const containerCenter = containerRect.height / 2;\n  const elementCenter = elHeight / 2;\n  return (\n    (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (\n    (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n  transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n  const { transformOriginY: yPosition } = options;\n\n  let x = \"0\";\n  switch (options.x) {\n    case \"right\":\n    case \"inner-left\":\n      x = \"0\";\n      break;\n    case \"center\":\n      x = \"50%\";\n      break;\n    case \"left\":\n    case \"inner-right\":\n      x = \"100%\";\n      break;\n    default:\n      x = \"0\";\n  }\n\n  let y = \"0\";\n  if (typeof yPosition === \"number\") {\n    y = `${yPosition}px`;\n  } else {\n    switch (options.y) {\n      case \"above\":\n      case \"bottom\":\n        y = \"100%\";\n        break;\n      case \"center\":\n        y = \"50%\";\n        break;\n      case \"below\":\n      case \"top\":\n        y = \"0\";\n        break;\n      default:\n        y = \"0\";\n    }\n  }\n\n  return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n *   selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n  el: HTMLElement | null\n): HTMLElement | null {\n  if (!el) {\n    return null;\n  }\n\n  if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n    const content = el.querySelector(\n      \".rmd-tree-item__content, .rmd-item-text\"\n    ) as HTMLElement;\n    if (content) {\n      return content;\n    }\n  } else if (el.getAttribute(\"type\") === \"file\") {\n    const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n    if (label) {\n      return label;\n    }\n  }\n\n  const data = el.getAttribute(\"data-sizing-selector\");\n  if (data) {\n    const content = el.querySelector(data) as HTMLElement;\n    if (content) {\n      return content;\n    }\n\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Unable to find a child element using the `data-sizing-selector`\"\n      );\n    }\n  }\n\n  return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n  const cloned = element.cloneNode(true) as HTMLElement;\n  // remove the id so there won't be two elements with the same id on the page\n  cloned.removeAttribute(\"id\");\n\n  // remove the role just in case the role would alert screen readers once added\n  // to the dom\n  cloned.removeAttribute(\"role\");\n\n  // ensure the cloned node won't shift the page or be visible\n  cloned.style.position = \"fixed\";\n  cloned.style.visibility = \"hidden\";\n\n  // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n  // the height and width if the element is able to line wrap.\n  cloned.style.left = \"\";\n  cloned.style.top = \"\";\n  cloned.style.right = \"\";\n  cloned.style.bottom = \"\";\n\n  // reset transforms so that custom animations don't mess with the sizing\n  cloned.style.transform = \"none\";\n\n  const parent = element.parentElement || document.body;\n  parent.appendChild(cloned);\n\n  const rect = cloned.getBoundingClientRect();\n  parent.removeChild(cloned);\n\n  return rect;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n  fixedElement: HTMLElement;\n  fixedToElement: HTMLElement;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n  const { fixedElement, fixedToElement } = options;\n  const fixedElementRect = fixedElement.getBoundingClientRect();\n  const fixedToElementRect = fixedToElement.getBoundingClientRect();\n  const vh = window.innerHeight;\n  const vw = window.innerWidth;\n  const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n  const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n  const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n  const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n  return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","appendChild","rect","getBoundingClientRect","removeChild","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"mappings":"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"}
+{"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import { type PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n  xMargin: number;\n  elWidth: number;\n  initialX?: number;\n  containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n  yMargin: number;\n  elHeight: number;\n  initialY?: number;\n  containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  const containerCenter = containerRect.width / 2;\n  const elementCenter = elWidth / 2;\n  return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (\n    (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n  );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n  yMargin,\n  elHeight,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  const containerCenter = containerRect.height / 2;\n  const elementCenter = elHeight / 2;\n  return (\n    (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (\n    (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n  transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n  const { transformOriginY: yPosition } = options;\n\n  let x = \"0\";\n  switch (options.x) {\n    case \"right\":\n    case \"inner-left\":\n      x = \"0\";\n      break;\n    case \"center\":\n      x = \"50%\";\n      break;\n    case \"left\":\n    case \"inner-right\":\n      x = \"100%\";\n      break;\n    default:\n      x = \"0\";\n  }\n\n  let y = \"0\";\n  if (typeof yPosition === \"number\") {\n    y = `${yPosition}px`;\n  } else {\n    switch (options.y) {\n      case \"above\":\n      case \"bottom\":\n        y = \"100%\";\n        break;\n      case \"center\":\n        y = \"50%\";\n        break;\n      case \"below\":\n      case \"top\":\n        y = \"0\";\n        break;\n      default:\n        y = \"0\";\n    }\n  }\n\n  return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n *   selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n  el: HTMLElement | null\n): HTMLElement | null {\n  if (!el) {\n    return null;\n  }\n\n  if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n    const content = el.querySelector(\n      \".rmd-tree-item__content, .rmd-item-text\"\n    ) as HTMLElement;\n    if (content) {\n      return content;\n    }\n  } else if (el.getAttribute(\"type\") === \"file\") {\n    const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n    if (label) {\n      return label;\n    }\n  }\n\n  const data = el.getAttribute(\"data-sizing-selector\");\n  if (data) {\n    const content = el.querySelector(data) as HTMLElement;\n    if (content) {\n      return content;\n    }\n\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Unable to find a child element using the `data-sizing-selector`\"\n      );\n    }\n  }\n\n  return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n  const cloned = element.cloneNode(true) as HTMLElement;\n  // remove the id so there won't be two elements with the same id on the page\n  cloned.removeAttribute(\"id\");\n\n  // remove the role just in case the role would alert screen readers once added\n  // to the dom\n  cloned.removeAttribute(\"role\");\n\n  // ensure the cloned node won't shift the page or be visible\n  cloned.style.position = \"fixed\";\n  cloned.style.visibility = \"hidden\";\n\n  // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n  // the height and width if the element is able to line wrap.\n  cloned.style.left = \"\";\n  cloned.style.top = \"\";\n  cloned.style.right = \"\";\n  cloned.style.bottom = \"\";\n\n  // reset transforms so that custom animations don't mess with the sizing\n  cloned.style.transform = \"none\";\n\n  const parent = element.parentElement || document.body;\n  parent.appendChild(cloned);\n\n  const rect = cloned.getBoundingClientRect();\n  parent.removeChild(cloned);\n\n  return rect;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n  fixedElement: HTMLElement;\n  fixedToElement: HTMLElement;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n  const { fixedElement, fixedToElement } = options;\n  const fixedElementRect = fixedElement.getBoundingClientRect();\n  const fixedToElementRect = fixedToElement.getBoundingClientRect();\n  const vh = window.innerHeight;\n  const vw = window.innerWidth;\n  const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n  const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n  const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n  const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n  return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","appendChild","rect","getBoundingClientRect","removeChild","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"mappings":"AAqBA;;;;;;;CAOC,GACD,OAAO,SAASA,aAAa,EAC3BC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACA;IACb,OAAO,AAACD,CAAAA,YAAYC,cAAcC,IAAI,AAAD,IAAKH,UAAUD;AACtD;AAEA;;;;;;CAMC,GACD,OAAO,SAASK,kBAAkB,EAChCL,OAAO,EACPE,QAAQ,EACRC,aAAa,EACA;IACb,OAAO,AAACD,CAAAA,YAAYC,cAAcC,IAAI,AAAD,IAAKJ;AAC5C;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASM,gBAAgB,EAC9BL,OAAO,EACPC,QAAQ,EACRC,aAAa,EACA;IACb,MAAMI,kBAAkBJ,cAAcK,KAAK,GAAG;IAC9C,MAAMC,gBAAgBR,UAAU;IAChC,OAAO,AAACC,CAAAA,YAAYC,cAAcC,IAAI,GAAGG,eAAc,IAAKE;AAC9D;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,mBAAmB,EACjCV,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACA;IACb,OACE,AAACD,CAAAA,YAAYC,cAAcC,IAAI,GAAGD,cAAcK,KAAK,AAAD,IAAKP,UAAUD;AAEvE;AAEA;;;;;;;CAOC,GACD,OAAO,SAASW,cAAc,EAC5BX,OAAO,EACPE,QAAQ,EACRC,aAAa,EACA;IACb,OAAO,AAACD,CAAAA,YAAYC,cAAcC,IAAI,GAAGD,cAAcK,KAAK,AAAD,IAAKR;AAClE;AAEA;;;;;;CAMC,GACD,OAAO,SAASY,cAAc,EAC5BC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRZ,aAAa,EACA;IACb,OAAO,AAACW,CAAAA,YAAYX,cAAca,GAAG,AAAD,IAAKD,WAAWF;AACtD;AAEA;;;;;;CAMC,GACD,OAAO,SAASI,YAAY,EAC1BJ,OAAO,EACPC,QAAQ,EACRX,aAAa,EACA;IACb,OAAO,AAACW,CAAAA,YAAYX,cAAca,GAAG,AAAD,IAAKH;AAC3C;AAEA;;;;;;;;;;CAUC,GACD,OAAO,SAASK,gBAAgB,EAC9BL,OAAO,EACPE,QAAQ,EACRD,QAAQ,EACRX,aAAa,EACA;IACb,MAAMI,kBAAkBJ,cAAcgB,MAAM,GAAG;IAC/C,MAAMV,gBAAgBM,WAAW;IACjC,OACE,AAACD,CAAAA,YAAYX,cAAca,GAAG,GAAGT,kBAAkBM,OAAM,IAAKJ;AAElE;AAEA;;;;;;;CAOC,GACD,OAAO,SAASW,eAAe,EAC7BP,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRZ,aAAa,EACA;IACb,OACE,AAACW,CAAAA,YAAYX,cAAca,GAAG,GAAGb,cAAcgB,MAAM,AAAD,IAAKJ,WAAWF;AAExE;AAEA;;;;;;CAMC,GACD,OAAO,SAASQ,cAAc,EAC5BR,OAAO,EACPC,QAAQ,EACRX,aAAa,EACA;IACb,OAAO,AAACW,CAAAA,YAAYX,cAAca,GAAG,GAAGb,cAAcgB,MAAM,AAAD,IAAKN;AAClE;AAUA;;;;;;;;;CASC,GACD,OAAO,SAASS,mBAAmBC,OAA+B;IAChE,MAAM,EAAEC,kBAAkBC,SAAS,EAAE,GAAGF;IAExC,IAAIG,IAAI;IACR,OAAQH,QAAQG,CAAC;QACf,KAAK;QACL,KAAK;YACHA,IAAI;YACJ;QACF,KAAK;YACHA,IAAI;YACJ;QACF,KAAK;QACL,KAAK;YACHA,IAAI;YACJ;QACF;YACEA,IAAI;IACR;IAEA,IAAIC,IAAI;IACR,IAAI,OAAOF,cAAc,UAAU;QACjCE,IAAI,GAAGF,UAAU,EAAE,CAAC;IACtB,OAAO;QACL,OAAQF,QAAQI,CAAC;YACf,KAAK;YACL,KAAK;gBACHA,IAAI;gBACJ;YACF,KAAK;gBACHA,IAAI;gBACJ;YACF,KAAK;YACL,KAAK;gBACHA,IAAI;gBACJ;YACF;gBACEA,IAAI;QACR;IACF;IAEA,OAAO,GAAGD,EAAE,CAAC,EAAEC,GAAG;AACpB;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,SAASC,oBACdC,EAAsB;IAEtB,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,kBAAkBC,IAAI,CAACD,GAAGE,YAAY,CAAC,WAAW,KAAK;QACzD,MAAMC,UAAUH,GAAGI,aAAa,CAC9B;QAEF,IAAID,SAAS;YACX,OAAOA;QACT;IACF,OAAO,IAAIH,GAAGE,YAAY,CAAC,YAAY,QAAQ;QAC7C,MAAMG,QAAQC,SAASF,aAAa,CAAmB,CAAC,MAAM,EAAEJ,GAAGO,EAAE,CAAC,EAAE,CAAC;QACzE,IAAIF,OAAO;YACT,OAAOA;QACT;IACF;IAEA,MAAMG,OAAOR,GAAGE,YAAY,CAAC;IAC7B,IAAIM,MAAM;QACR,MAAML,UAAUH,GAAGI,aAAa,CAACI;QACjC,IAAIL,SAAS;YACX,OAAOA;QACT;QAEA,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;IAEA,OAAOZ;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,SAASa,eAAeC,OAAoB;IACjD,MAAMC,SAASD,QAAQE,SAAS,CAAC;IACjC,4EAA4E;IAC5ED,OAAOE,eAAe,CAAC;IAEvB,8EAA8E;IAC9E,aAAa;IACbF,OAAOE,eAAe,CAAC;IAEvB,4DAA4D;IAC5DF,OAAOG,KAAK,CAACC,QAAQ,GAAG;IACxBJ,OAAOG,KAAK,CAACE,UAAU,GAAG;IAE1B,6EAA6E;IAC7E,4DAA4D;IAC5DL,OAAOG,KAAK,CAAC3C,IAAI,GAAG;IACpBwC,OAAOG,KAAK,CAAC/B,GAAG,GAAG;IACnB4B,OAAOG,KAAK,CAACG,KAAK,GAAG;IACrBN,OAAOG,KAAK,CAACI,MAAM,GAAG;IAEtB,wEAAwE;IACxEP,OAAOG,KAAK,CAACK,SAAS,GAAG;IAEzB,MAAMC,SAASV,QAAQW,aAAa,IAAInB,SAASoB,IAAI;IACrDF,OAAOG,WAAW,CAACZ;IAEnB,MAAMa,OAAOb,OAAOc,qBAAqB;IACzCL,OAAOM,WAAW,CAACf;IAEnB,OAAOa;AACT;AAWA;;;CAGC,GACD,OAAO,SAASG,iBAAiBrC,OAAgC;IAC/D,MAAM,EAAEsC,YAAY,EAAEC,cAAc,EAAE,GAAGvC;IACzC,MAAMwC,mBAAmBF,aAAaH,qBAAqB;IAC3D,MAAMM,qBAAqBF,eAAeJ,qBAAqB;IAC/D,MAAMO,KAAKC,OAAOC,WAAW;IAC7B,MAAMC,KAAKF,OAAOG,UAAU;IAC5B,MAAMrD,MAAMsD,KAAKC,GAAG,CAACR,iBAAiB/C,GAAG,EAAEgD,mBAAmBhD,GAAG;IACjE,MAAMkC,QAAQoB,KAAKE,GAAG,CAACT,iBAAiBb,KAAK,EAAEc,mBAAmBd,KAAK;IACvE,MAAMC,SAASmB,KAAKE,GAAG,CAACT,iBAAiBZ,MAAM,EAAEa,mBAAmBb,MAAM;IAC1E,MAAM/C,OAAOkE,KAAKC,GAAG,CAACR,iBAAiB3D,IAAI,EAAE4D,mBAAmB5D,IAAI;IAEpE,OAAO+C,UAAU,KAAKnC,OAAOiD,MAAMf,SAAS,KAAK9C,QAAQgE;AAC3D"}

package/dist/progress/CircularProgress.d.ts

@@ -2,11 +2,11 @@ import { type CSSProperties, type HTMLAttributes } from "react";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type ProgressProps } from "./types.js";
 /**
- * @remarks \@since 6.0.0
- * Removed the `determinateRotateDegrees` prop since the determinate state no
+ * @since 6.0.0 Added the `disableShrink` prop.
+ * @since 6.0.0 Renamed `small` to `dense`.
+ * @since 6.0.0 Renamed `centered` to `disableCentered`.
+ * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no
  * longer rotates while increasing value.
- * Added the `disableShrink` prop.
- * Renamed the `small` prop to `dense` to match other components.
  */
 export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id">, ProgressProps {
     /**
@@ -67,15 +67,15 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
      * margins.
      *
      * @defaultValue `false`
+     * @since 6.0.0 Renamed from `centered`
      */
     disableCentered?: boolean;
     /**
      * Set to `true` to render as a smaller size.
      *
      * @defaultValue `false`
-     * @remarks
-     * \@since 2.3.0
-     * \@since 6.0.0 Renamed from `small`
+     * @since 2.3.0
+     * @since 6.0.0 Renamed from `small`
      */
     dense?: boolean;
     /**
@@ -84,15 +84,12 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
      * loading spinners are displayed at once on the page.
      *
      * @defaultValue `false`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     disableShrink?: boolean;
 }
 /**
- * **Server Component**
- *
- * @example
- * Indeterminate Example
+ * @example Indeterminate Example
  * ```tsx
  * import { CircularProgress } from "@react-md/core":
  * import { type ReactElement } from "react";
@@ -102,8 +99,7 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
  * }
  * ```
  *
- * @example
- * Determinate Example
+ * @example Determinate Example
  * ```tsx
  * import { CircularProgress } from "@react-md/core":
  * import { useState, type ReactElement } from "react";
@@ -116,7 +112,7 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Updated the determinate circular progress to no longer
+ * @since 6.0.0 Updated the determinate circular progress to no longer
  * rotate while increasing the value and require a label for accessibility.
  */
 export declare const CircularProgress: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<CircularProgressProps> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/progress/CircularProgress.js

@@ -7,10 +7,7 @@ import { bem } from "../utils/bem.js";
 import { getPercentage } from "../utils/getPercentage.js";
 const styles = bem("rmd-circular-progress");
 /**
- * **Server Component**
- *
- * @example
- * Indeterminate Example
+ * @example Indeterminate Example
  * ```tsx
  * import { CircularProgress } from "@react-md/core":
  * import { type ReactElement } from "react";
@@ -20,8 +17,7 @@ const styles = bem("rmd-circular-progress");
  * }
  * ```
  *
- * @example
- * Determinate Example
+ * @example Determinate Example
  * ```tsx
  * import { CircularProgress } from "@react-md/core":
  * import { useState, type ReactElement } from "react";
@@ -34,7 +30,7 @@ const styles = bem("rmd-circular-progress");
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Updated the determinate circular progress to no longer
+ * @since 6.0.0 Updated the determinate circular progress to no longer
  * rotate while increasing the value and require a label for accessibility.
  */ export const CircularProgress = /*#__PURE__*/ forwardRef(function CircularProgress(props, ref) {
     const { id: propId, className, svgStyle, svgClassName, circleStyle: propCircleStyle, circleClassName, value, min = 0, max = 100, radius = 30, center = 33, viewBox = "0 0 66 66", theme = "primary", dense = false, dashoffset = 187, disableShrink = false, disableCentered = false, disableTransition = false, ...remaining } = props;

package/dist/progress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * Removed the `determinateRotateDegrees` prop since the determinate state no\n * longer rotates while increasing value.\n * Added the `disableShrink` prop.\n * Renamed the `small` prop to `dense` to match other components.\n */\nexport interface CircularProgressProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n    ProgressProps {\n  /**\n   * An optional style to apply to the svg within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  svgStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the svg within the circular progress.\n   */\n  svgClassName?: string;\n\n  /**\n   * An optional style to apply to the circle within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  circleStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the circle within the circular progress.\n   */\n  circleClassName?: string;\n\n  /**\n   * The radius for the circle. It is generally recommended to have the radius\n   * be 1/2 of the viewbox and minus a few more pixels so that there is some\n   * surrounding padding. You probably shouldn't really be changing this prop\n   * though.\n   *\n   * @defaultValue `30`\n   */\n  radius?: number;\n\n  /**\n   * The center point for the circle. This should be half of the `viewBox` prop\n   * 99% of the time and probably won't be changed.\n   *\n   * @defaultValue `33`\n   */\n  center?: number;\n\n  /**\n   * The viewbox for the child svg. I wouldn't recommend changing this value as\n   * you will also need to update the `dashoffset` in both Sass and this prop to\n   * get the animation to look nice again.\n   *\n   * @defaultValue `0 0 66 66`\n   */\n  viewBox?: string;\n\n  /**\n   * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n   * be changing this value that much as it should match the\n   * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n   * to help to create the determinate progress animation.\n   *\n   * @defaultValue `187`\n   */\n  dashoffset?: number;\n\n  /**\n   * Boolean if the circular progress should be centered using left and right\n   * margins.\n   *\n   * @defaultValue `false`\n   */\n  disableCentered?: boolean;\n\n  /**\n   * Set to `true` to render as a smaller size.\n   *\n   * @defaultValue `false`\n   * @remarks\n   * \\@since 2.3.0\n   * \\@since 6.0.0 Renamed from `small`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the indeterminate behavior to only rotate\n   * which will increase performance during CPU-intensive tasks or when many\n   * loading spinners are displayed at once on the page.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0\n   */\n  disableShrink?: boolean;\n}\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n  HTMLSpanElement,\n  LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n  const {\n    id: propId,\n    className,\n    svgStyle,\n    svgClassName,\n    circleStyle: propCircleStyle,\n    circleClassName,\n    value,\n    min = 0,\n    max = 100,\n    radius = 30,\n    center = 33,\n    viewBox = \"0 0 66 66\",\n    theme = \"primary\",\n    dense = false,\n    dashoffset = 187,\n    disableShrink = false,\n    disableCentered = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"circular-progress\");\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n\n  const circleStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propCircleStyle;\n    }\n\n    return {\n      ...propCircleStyle,\n      strokeDashoffset: dashoffset - dashoffset * progress,\n    };\n  }, [progress, propCircleStyle, dashoffset]);\n\n  const determinate = typeof progress === \"number\";\n  const indeterminate = !determinate;\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={cnb(\n        styles({ dense, centered: !disableCentered }),\n        theme !== \"current-color\" && cssUtils({ textColor: theme }),\n        className\n      )}\n    >\n      <svg\n        style={svgStyle}\n        className={cnb(\n          styles(\"svg\", {\n            determinate,\n            indeterminate: indeterminate && !disableShrink,\n            \"rotate-only\": indeterminate && disableShrink,\n          }),\n          svgClassName\n        )}\n        viewBox={viewBox}\n      >\n        <circle\n          style={circleStyle}\n          className={cnb(\n            styles(\"circle\", {\n              animate: !disableTransition && determinate,\n              determinate,\n              indeterminate: indeterminate && !disableShrink,\n              \"rotate-only\": indeterminate && disableShrink,\n            }),\n            circleClassName\n          )}\n          r={radius}\n          cx={center}\n          cy={center}\n        />\n      </svg>\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,aAAa,GAAG,EAChBC,gBAAgB,KAAK,EACrBC,kBAAkB,KAAK,EACvBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW1B,cAAc;YAAEc;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGN,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL4B,MAAK;QACLC,iBAAenB;QACfoB,iBAAenB;QACfoB,iBAAetB;QACfN,WAAWb,IACTO,OAAO;YAAEmB;YAAOgB,UAAU,CAACb;QAAgB,IAC3CJ,UAAU,mBAAmBtB,SAAS;YAAEwC,WAAWlB;QAAM,IACzDZ;kBAGF,cAAA,KAAC+B;YACCC,OAAO/B;YACPD,WAAWb,IACTO,OAAO,OAAO;gBACZ4B;gBACAC,eAAeA,iBAAiB,CAACR;gBACjC,eAAeQ,iBAAiBR;YAClC,IACAb;YAEFS,SAASA;sBAET,cAAA,KAACsB;gBACCD,OAAO7B;gBACPH,WAAWb,IACTO,OAAO,UAAU;oBACfwC,SAAS,CAACjB,qBAAqBK;oBAC/BA;oBACAC,eAAeA,iBAAiB,CAACR;oBACjC,eAAeQ,iBAAiBR;gBAClC,IACAV;gBAEF8B,GAAG1B;gBACH2B,IAAI1B;gBACJ2B,IAAI3B;;;;AAKd,GAAG"}
+{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `disableShrink` prop.\n * @since 6.0.0 Renamed `small` to `dense`.\n * @since 6.0.0 Renamed `centered` to `disableCentered`.\n * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no\n * longer rotates while increasing value.\n */\nexport interface CircularProgressProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n    ProgressProps {\n  /**\n   * An optional style to apply to the svg within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  svgStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the svg within the circular progress.\n   */\n  svgClassName?: string;\n\n  /**\n   * An optional style to apply to the circle within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  circleStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the circle within the circular progress.\n   */\n  circleClassName?: string;\n\n  /**\n   * The radius for the circle. It is generally recommended to have the radius\n   * be 1/2 of the viewbox and minus a few more pixels so that there is some\n   * surrounding padding. You probably shouldn't really be changing this prop\n   * though.\n   *\n   * @defaultValue `30`\n   */\n  radius?: number;\n\n  /**\n   * The center point for the circle. This should be half of the `viewBox` prop\n   * 99% of the time and probably won't be changed.\n   *\n   * @defaultValue `33`\n   */\n  center?: number;\n\n  /**\n   * The viewbox for the child svg. I wouldn't recommend changing this value as\n   * you will also need to update the `dashoffset` in both Sass and this prop to\n   * get the animation to look nice again.\n   *\n   * @defaultValue `0 0 66 66`\n   */\n  viewBox?: string;\n\n  /**\n   * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n   * be changing this value that much as it should match the\n   * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n   * to help to create the determinate progress animation.\n   *\n   * @defaultValue `187`\n   */\n  dashoffset?: number;\n\n  /**\n   * Boolean if the circular progress should be centered using left and right\n   * margins.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `centered`\n   */\n  disableCentered?: boolean;\n\n  /**\n   * Set to `true` to render as a smaller size.\n   *\n   * @defaultValue `false`\n   * @since 2.3.0\n   * @since 6.0.0 Renamed from `small`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the indeterminate behavior to only rotate\n   * which will increase performance during CPU-intensive tasks or when many\n   * loading spinners are displayed at once on the page.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disableShrink?: boolean;\n}\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n  HTMLSpanElement,\n  LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n  const {\n    id: propId,\n    className,\n    svgStyle,\n    svgClassName,\n    circleStyle: propCircleStyle,\n    circleClassName,\n    value,\n    min = 0,\n    max = 100,\n    radius = 30,\n    center = 33,\n    viewBox = \"0 0 66 66\",\n    theme = \"primary\",\n    dense = false,\n    dashoffset = 187,\n    disableShrink = false,\n    disableCentered = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"circular-progress\");\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n\n  const circleStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propCircleStyle;\n    }\n\n    return {\n      ...propCircleStyle,\n      strokeDashoffset: dashoffset - dashoffset * progress,\n    };\n  }, [progress, propCircleStyle, dashoffset]);\n\n  const determinate = typeof progress === \"number\";\n  const indeterminate = !determinate;\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={cnb(\n        styles({ dense, centered: !disableCentered }),\n        theme !== \"current-color\" && cssUtils({ textColor: theme }),\n        className\n      )}\n    >\n      <svg\n        style={svgStyle}\n        className={cnb(\n          styles(\"svg\", {\n            determinate,\n            indeterminate: indeterminate && !disableShrink,\n            \"rotate-only\": indeterminate && disableShrink,\n          }),\n          svgClassName\n        )}\n        viewBox={viewBox}\n      >\n        <circle\n          style={circleStyle}\n          className={cnb(\n            styles(\"circle\", {\n              animate: !disableTransition && determinate,\n              determinate,\n              indeterminate: indeterminate && !disableShrink,\n              \"rotate-only\": indeterminate && disableShrink,\n            }),\n            circleClassName\n          )}\n          r={radius}\n          cx={center}\n          cy={center}\n        />\n      </svg>\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMG,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,aAAa,GAAG,EAChBC,gBAAgB,KAAK,EACrBC,kBAAkB,KAAK,EACvBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW1B,cAAc;YAAEc;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGN,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL4B,MAAK;QACLC,iBAAenB;QACfoB,iBAAenB;QACfoB,iBAAetB;QACfN,WAAWb,IACTO,OAAO;YAAEmB;YAAOgB,UAAU,CAACb;QAAgB,IAC3CJ,UAAU,mBAAmBtB,SAAS;YAAEwC,WAAWlB;QAAM,IACzDZ;kBAGF,cAAA,KAAC+B;YACCC,OAAO/B;YACPD,WAAWb,IACTO,OAAO,OAAO;gBACZ4B;gBACAC,eAAeA,iBAAiB,CAACR;gBACjC,eAAeQ,iBAAiBR;YAClC,IACAb;YAEFS,SAASA;sBAET,cAAA,KAACsB;gBACCD,OAAO7B;gBACPH,WAAWb,IACTO,OAAO,UAAU;oBACfwC,SAAS,CAACjB,qBAAqBK;oBAC/BA;oBACAC,eAAeA,iBAAiB,CAACR;oBACjC,eAAeQ,iBAAiBR;gBAClC,IACAV;gBAEF8B,GAAG1B;gBACH2B,IAAI1B;gBACJ2B,IAAI3B;;;;AAKd,GAAG"}

package/dist/progress/LinearProgress.d.ts

@@ -2,7 +2,7 @@ import { type CSSProperties, type HTMLAttributes } from "react";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type ProgressProps } from "./types.js";
 /**
- * @remarks \@since 6.0.0 Added the `theme` prop
+ * @since 6.0.0 Added the `theme` prop
  */
 export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">, ProgressProps {
     /**
@@ -43,10 +43,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
     verticalHeight?: number | null;
 }
 /**
- * **Server Component**
- *
- * @example
- * Indeterminate Example
+ * @example Indeterminate Example
  * ```tsx
  * import { LinearProgress } from "@react-md/core";
  * import { type ReactElement } from "react";
@@ -56,8 +53,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
  * }
  * ```
  *
- * @example
- * Determinate Example
+ * @example Determinate Example
  * ```tsx
  * import { LinearProgress } from "@react-md/core";
  * import { useState, type ReactElement } from "react";
@@ -70,7 +66,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors and
+ * @since 6.0.0 Supports rendering as any of the theme colors and
  * requires a label for accessibility.
  */
 export declare const LinearProgress: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<LinearProgressProps> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/progress/LinearProgress.js

@@ -7,10 +7,7 @@ import { bem } from "../utils/bem.js";
 import { getPercentage } from "../utils/getPercentage.js";
 const styles = bem("rmd-linear-progress");
 /**
- * **Server Component**
- *
- * @example
- * Indeterminate Example
+ * @example Indeterminate Example
  * ```tsx
  * import { LinearProgress } from "@react-md/core";
  * import { type ReactElement } from "react";
@@ -20,8 +17,7 @@ const styles = bem("rmd-linear-progress");
  * }
  * ```
  *
- * @example
- * Determinate Example
+ * @example Determinate Example
  * ```tsx
  * import { LinearProgress } from "@react-md/core";
  * import { useState, type ReactElement } from "react";
@@ -34,7 +30,7 @@ const styles = bem("rmd-linear-progress");
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors and
+ * @since 6.0.0 Supports rendering as any of the theme colors and
  * requires a label for accessibility.
  */ export const LinearProgress = /*#__PURE__*/ forwardRef(function LinearProgress(props, ref) {
     const { id: propId, style: propStyle, className, barStyle: propBarStyle, barClassName, min = 0, max = 100, value, reverse = false, theme = "primary", disableTransition = false, vertical = false, verticalHeight = 240, ...remaining } = props;

package/dist/progress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n    ProgressProps {\n  /**\n   * An optional style to apply to the progress bar. This will be merged with\n   * the current width or height tracking the progress when a `value` is also\n   * provided.\n   */\n  barStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the progress bar.\n   */\n  barClassName?: string;\n\n  /**\n   * Boolean if the progress should be reversed. This will change the progress\n   * direction from `left-to-right` to be `right-to-left`. If the current\n   * language is a rtl language and this prop is enabled, the direction will\n   * still be `left-to-right`.\n   *\n   * @defaultValue `false`\n   */\n  reverse?: boolean;\n\n  /**\n   * Boolean if the progress should be vertical instead of horizontal.  When\n   * this prop is set, you should also set the `verticalHeight` prop to a height\n   * value you want for your progress bar.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * Since there isn't really a good way to have \"auto height\", you'll need to\n   * manually set the progress bar's height with this prop to some pixel value.\n   * If you'd prefer to set the height in Sass/css, set this value to `null`\n   * instead since this value would be passed down as a `height` inline style.\n   *\n   * @defaultValue `240`\n   */\n  verticalHeight?: number | null;\n}\n\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n  HTMLSpanElement,\n  LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n  const {\n    id: propId,\n    style: propStyle,\n    className,\n    barStyle: propBarStyle,\n    barClassName,\n    min = 0,\n    max = 100,\n    value,\n    reverse = false,\n    theme = \"primary\",\n    disableTransition = false,\n    vertical = false,\n    verticalHeight = 240,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"linear-progress\");\n  const style = useMemo(() => {\n    if (!vertical || verticalHeight === null) {\n      return propStyle;\n    }\n\n    return {\n      ...propStyle,\n      height: verticalHeight,\n    };\n  }, [propStyle, vertical, verticalHeight]);\n\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n  const barStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propBarStyle;\n    }\n\n    const key = vertical ? \"height\" : \"width\";\n    return {\n      ...propBarStyle,\n      [key]: `${progress * 100}%`,\n    };\n  }, [progress, propBarStyle, vertical]);\n\n  const determinate = typeof progress === \"number\";\n  const indeterminate = !determinate;\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      style={style}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={cnb(\n        styles({\n          vertical,\n          horizontal: !vertical,\n          determinate,\n          indeterminate,\n        }),\n        theme !== \"current-color\" && cssUtils({ textColor: theme }),\n        className\n      )}\n    >\n      <span\n        style={barStyle}\n        className={cnb(\n          styles(\"bar\", {\n            vertical,\n            \"vertical-reverse\": vertical && reverse,\n            horizontal: !vertical,\n            \"horizontal-reverse\": !vertical && reverse,\n            animate: !disableTransition && determinate,\n            determinate,\n            indeterminate,\n            \"determinate-reverse\": determinate && reverse && !vertical,\n            \"determinate-vertical-reverse\": determinate && reverse && vertical,\n            \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n            \"indeterminate-vertical\": indeterminate && vertical,\n            \"indeterminate-vertical-reverse\":\n              indeterminate && reverse && vertical,\n          }),\n          barClassName\n        )}\n      />\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,oBAAoB,KAAK,EACzBC,WAAW,KAAK,EAChBC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGlB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQX,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOZ;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZc,QAAQF;QACV;IACF,GAAG;QAACZ;QAAWW;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWvB,cAAc;YAAEa;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMd,WAAWd,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOZ;QACT;QAEA,MAAMc,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGR,YAAY;YACf,CAACc,IAAI,EAAE,CAAC,EAAEF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUZ;QAAcQ;KAAS;IAErC,MAAMO,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGP,SAAS;QACbhB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAejB;QACfkB,iBAAejB;QACfkB,iBAAejB;QACfN,WAAWf,IACTO,OAAO;YACLkB;YACAc,YAAY,CAACd;YACbO;YACAC;QACF,IACAV,UAAU,mBAAmBpB,SAAS;YAAEqC,WAAWjB;QAAM,IACzDR;kBAGF,cAAA,KAACmB;YACCrB,OAAOG;YACPD,WAAWf,IACTO,OAAO,OAAO;gBACZkB;gBACA,oBAAoBA,YAAYH;gBAChCiB,YAAY,CAACd;gBACb,sBAAsB,CAACA,YAAYH;gBACnCmB,SAAS,CAACjB,qBAAqBQ;gBAC/BA;gBACAC;gBACA,uBAAuBD,eAAeV,WAAW,CAACG;gBAClD,gCAAgCO,eAAeV,WAAWG;gBAC1D,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GAAG"}
+{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n    ProgressProps {\n  /**\n   * An optional style to apply to the progress bar. This will be merged with\n   * the current width or height tracking the progress when a `value` is also\n   * provided.\n   */\n  barStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the progress bar.\n   */\n  barClassName?: string;\n\n  /**\n   * Boolean if the progress should be reversed. This will change the progress\n   * direction from `left-to-right` to be `right-to-left`. If the current\n   * language is a rtl language and this prop is enabled, the direction will\n   * still be `left-to-right`.\n   *\n   * @defaultValue `false`\n   */\n  reverse?: boolean;\n\n  /**\n   * Boolean if the progress should be vertical instead of horizontal.  When\n   * this prop is set, you should also set the `verticalHeight` prop to a height\n   * value you want for your progress bar.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * Since there isn't really a good way to have \"auto height\", you'll need to\n   * manually set the progress bar's height with this prop to some pixel value.\n   * If you'd prefer to set the height in Sass/css, set this value to `null`\n   * instead since this value would be passed down as a `height` inline style.\n   *\n   * @defaultValue `240`\n   */\n  verticalHeight?: number | null;\n}\n\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n  HTMLSpanElement,\n  LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n  const {\n    id: propId,\n    style: propStyle,\n    className,\n    barStyle: propBarStyle,\n    barClassName,\n    min = 0,\n    max = 100,\n    value,\n    reverse = false,\n    theme = \"primary\",\n    disableTransition = false,\n    vertical = false,\n    verticalHeight = 240,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"linear-progress\");\n  const style = useMemo(() => {\n    if (!vertical || verticalHeight === null) {\n      return propStyle;\n    }\n\n    return {\n      ...propStyle,\n      height: verticalHeight,\n    };\n  }, [propStyle, vertical, verticalHeight]);\n\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n  const barStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propBarStyle;\n    }\n\n    const key = vertical ? \"height\" : \"width\";\n    return {\n      ...propBarStyle,\n      [key]: `${progress * 100}%`,\n    };\n  }, [progress, propBarStyle, vertical]);\n\n  const determinate = typeof progress === \"number\";\n  const indeterminate = !determinate;\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      style={style}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={cnb(\n        styles({\n          vertical,\n          horizontal: !vertical,\n          determinate,\n          indeterminate,\n        }),\n        theme !== \"current-color\" && cssUtils({ textColor: theme }),\n        className\n      )}\n    >\n      <span\n        style={barStyle}\n        className={cnb(\n          styles(\"bar\", {\n            vertical,\n            \"vertical-reverse\": vertical && reverse,\n            horizontal: !vertical,\n            \"horizontal-reverse\": !vertical && reverse,\n            animate: !disableTransition && determinate,\n            determinate,\n            indeterminate,\n            \"determinate-reverse\": determinate && reverse && !vertical,\n            \"determinate-vertical-reverse\": determinate && reverse && vertical,\n            \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n            \"indeterminate-vertical\": indeterminate && vertical,\n            \"indeterminate-vertical-reverse\":\n              indeterminate && reverse && vertical,\n          }),\n          barClassName\n        )}\n      />\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMG,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,oBAAoB,KAAK,EACzBC,WAAW,KAAK,EAChBC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGlB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQX,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOZ;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZc,QAAQF;QACV;IACF,GAAG;QAACZ;QAAWW;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWvB,cAAc;YAAEa;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMd,WAAWd,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOZ;QACT;QAEA,MAAMc,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGR,YAAY;YACf,CAACc,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUZ;QAAcQ;KAAS;IAErC,MAAMO,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGP,SAAS;QACbhB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAejB;QACfkB,iBAAejB;QACfkB,iBAAejB;QACfN,WAAWf,IACTO,OAAO;YACLkB;YACAc,YAAY,CAACd;YACbO;YACAC;QACF,IACAV,UAAU,mBAAmBpB,SAAS;YAAEqC,WAAWjB;QAAM,IACzDR;kBAGF,cAAA,KAACmB;YACCrB,OAAOG;YACPD,WAAWf,IACTO,OAAO,OAAO;gBACZkB;gBACA,oBAAoBA,YAAYH;gBAChCiB,YAAY,CAACd;gBACb,sBAAsB,CAACA,YAAYH;gBACnCmB,SAAS,CAACjB,qBAAqBQ;gBAC/BA;gBACAC;gBACA,uBAAuBD,eAAeV,WAAW,CAACG;gBAClD,gCAAgCO,eAAeV,WAAWG;gBAC1D,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GAAG"}

package/dist/progress/_progress.scss

@@ -350,17 +350,23 @@ $variables: (
 @mixin _linear-progress-bar {
   @if not $disable-linear-horizontal {
     &--horizontal {
-      @include utils.auto-rtl(left, 0);
+      left: 0;
+
+      @include utils.rtl {
+        left: auto;
+        right: 0;
+      }
     }
 
     @if not $disable-linear-reverse {
       &--horizontal-reverse {
-        @include utils.auto-rtl-group(
-          (
-            left: auto,
-            right: 0,
-          )
-        );
+        left: auto;
+        right: 0;
+
+        @include utils.rtl {
+          left: 0;
+          right: auto;
+        }
       }
     }
   }
@@ -400,13 +406,6 @@ $variables: (
     &--indeterminate {
       &::before,
       &::after {
-        @include utils.auto-rtl-group(
-          (
-            left: 0,
-            right: 100%,
-          )
-        );
-
         @include use-var(background-color, color);
         @include use-var(height, linear-size);
 
@@ -414,9 +413,16 @@ $variables: (
         animation-iteration-count: infinite;
         animation-timing-function: transition.$linear-timing-function;
         content: "";
+        left: 0;
         position: absolute;
+        right: 100%;
         will-change: left, right;
         z-index: 0;
+
+        @include utils.rtl {
+          left: 100%;
+          right: 0;
+        }
       }
 
       @if not $disable-linear-horizontal {
@@ -452,6 +458,7 @@ $variables: (
           height: auto;
           left: 0;
           right: 0;
+          will-change: top, bottom;
         }
 
         &::before {
@@ -561,12 +568,17 @@ $variables: (
   }
 }
 
-@mixin styles {
-  @if not $disable-circular {
-    @include _circular-progress;
-  }
+@mixin styles($disable-layer: false) {
+  @include utils.optional-layer(
+    progress,
+    $disable-layer or ($disable-circular and $disable-linear)
+  ) {
+    @if not $disable-circular {
+      @include _circular-progress;
+    }
 
-  @if not $disable-linear {
-    @include _linear-progress;
+    @if not $disable-linear {
+      @include _linear-progress;
+    }
   }
 }

package/dist/progress/types.d.ts

@@ -9,13 +9,13 @@ declare module "react" {
     }
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ProgressTheme = ThemeColor | "current-color";
 /**
  * The base progress props for both the linear and circular progress components.
  *
- * @remarks \@since 6.0.0 Added the `theme` prop.
+ * @since 6.0.0 Added the `theme` prop.
  */
 export interface ProgressProps {
     /**
@@ -26,7 +26,7 @@ export interface ProgressProps {
      * `aria-describedby="THIS_ID"`.
      *
      * @defaultValue `"circular-progress-" useId() || "linear-progress-" + useId()`
-     * @remarks \@since 6.0.0 This prop is now optional.
+     * @since 6.0.0 This prop is now optional.
      */
     id?: string;
     /**
@@ -58,13 +58,13 @@ export interface ProgressProps {
      * progress updates or the updates happen in chunks.
      *
      * @defaultValue `false`
-     * @remarks \@since 6.0.0 This was renamed from `animate` to
+     * @since 6.0.0 This was renamed from `animate` to
      * `disableTransition`.
      */
     disableTransition?: boolean;
     /**
      * @defaultValue `"primary"`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     theme?: ProgressTheme;
 }

package/dist/progress/types.js

@@ -1,7 +1,7 @@
 /**
  * The base progress props for both the linear and circular progress components.
  *
- * @remarks \@since 6.0.0 Added the `theme` prop.
+ * @since 6.0.0 Added the `theme` prop.
  */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/progress/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/types.ts"],"sourcesContent":["import { type ThemeColor } from \"../cssUtils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-progress-background-color\"?: string;\n    \"--rmd-progress-color\"?: string;\n    \"--rmd-progress-circular-size\"?: string | number;\n    \"--rmd-progress-circular-stroke-width\"?: number;\n    \"--rmd-progress-linear-size\"?: string | number;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProgressTheme = ThemeColor | \"current-color\";\n\n/**\n * The base progress props for both the linear and circular progress components.\n *\n * @remarks \\@since 6.0.0 Added the `theme` prop.\n */\nexport interface ProgressProps {\n  /**\n   * The id for the progress component. This is required for accessibility since\n   * the progress will 99% of the time be describing the progress of something\n   * else within the page. The element that is loading or tracking progress\n   * should also be updated to have `aria-busy=\"true\"` and\n   * `aria-describedby=\"THIS_ID\"`.\n   *\n   * @defaultValue `\"circular-progress-\" useId() || \"linear-progress-\" + useId()`\n   * @remarks \\@since 6.0.0 This prop is now optional.\n   */\n  id?: string;\n\n  /**\n   * The min value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * The current value for the progress component. If this prop is omitted, the\n   * progress component will be put in an \"indeterminate\" state which will just\n   * infinitely loop an animation until it is unmounted.\n   *\n   * This value will be passed down as a percentage based on the `min` and `max`\n   * props so that screen readers can be notified of changes.\n   */\n  value?: number;\n\n  /**\n   * Boolean if the determinate progress versions should animate when the value\n   * changes. This should really only be enabled if you aren't getting quick\n   * progress updates or the updates happen in chunks.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 This was renamed from `animate` to\n   * `disableTransition`.\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @remarks \\@since 6.0.0\n   */\n  theme?: ProgressTheme;\n}\n"],"names":[],"mappings":"AAiBA;;;;CAIC,GACD,WAuDC"}
+{"version":3,"sources":["../../src/progress/types.ts"],"sourcesContent":["import { type ThemeColor } from \"../cssUtils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-progress-background-color\"?: string;\n    \"--rmd-progress-color\"?: string;\n    \"--rmd-progress-circular-size\"?: string | number;\n    \"--rmd-progress-circular-stroke-width\"?: number;\n    \"--rmd-progress-linear-size\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type ProgressTheme = ThemeColor | \"current-color\";\n\n/**\n * The base progress props for both the linear and circular progress components.\n *\n * @since 6.0.0 Added the `theme` prop.\n */\nexport interface ProgressProps {\n  /**\n   * The id for the progress component. This is required for accessibility since\n   * the progress will 99% of the time be describing the progress of something\n   * else within the page. The element that is loading or tracking progress\n   * should also be updated to have `aria-busy=\"true\"` and\n   * `aria-describedby=\"THIS_ID\"`.\n   *\n   * @defaultValue `\"circular-progress-\" useId() || \"linear-progress-\" + useId()`\n   * @since 6.0.0 This prop is now optional.\n   */\n  id?: string;\n\n  /**\n   * The min value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * The current value for the progress component. If this prop is omitted, the\n   * progress component will be put in an \"indeterminate\" state which will just\n   * infinitely loop an animation until it is unmounted.\n   *\n   * This value will be passed down as a percentage based on the `min` and `max`\n   * props so that screen readers can be notified of changes.\n   */\n  value?: number;\n\n  /**\n   * Boolean if the determinate progress versions should animate when the value\n   * changes. This should really only be enabled if you aren't getting quick\n   * progress updates or the updates happen in chunks.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 This was renamed from `animate` to\n   * `disableTransition`.\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @since 6.0.0\n   */\n  theme?: ProgressTheme;\n}\n"],"names":[],"mappings":"AAiBA;;;;CAIC,GACD,WAuDC"}

package/dist/responsive-item/ResponsiveItem.d.ts

@@ -0,0 +1,64 @@
+import { type HTMLAttributes } from "react";
+import { type ResponsiveItemClassNameOptions } from "./responsiveItemStyles.js";
+/**
+ * @since 6.0.0 Renamed from `MediaContainerProps` to
+ * `ResponsiveItemProps`
+ * @since 6.0.0 The `height` and `width` props were removed in favor of the
+ * `aspectRatio` props since the latest typescript string interpolation supports
+ * enforcing the correct format.
+ * @since 6.0.0 The `auto` prop was removed in favor of the new
+ * {@link ResponsiveItemProps.responsive} prop.
+ */
+export interface ResponsiveItemProps extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {
+}
+/**
+ * @example Image Example
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem>
+ *       <img alt="" src="/some-image.png" />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example Iframe Example
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem>
+ *       <iframe
+ *         src="https://youtube.com/some-video-url"
+ *         title="Some YouTube video"
+ *         allowFullScreen
+ *       />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example Forced Aspect Ratio
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem aspectRatio="16-9">
+ *       <img alt="" src="/some-image.png" />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0 Renamed from `MediaContainer` to
+ * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
+ */
+export declare const ResponsiveItem: import("react").ForwardRefExoticComponent<ResponsiveItemProps & import("react").RefAttributes<HTMLSpanElement>>;