@react-md/core 1.0.0-next.0 → 1.0.0-next.1

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 { 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 />;\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 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.\n */\nexport const CircularProgress = forwardRef<\n  HTMLSpanElement,\n  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;AAC1C,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  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"}

package/dist/progress/LinearProgress.d.ts

@@ -1,9 +1,10 @@
 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
  */
-export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "id">, ProgressProps {
+export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">, ProgressProps {
     /**
      * An optional style to apply to the progress bar. This will be merged with
      * the current width or height tracking the progress when a `value` is also
@@ -51,7 +52,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <LinearProgress />;
+ *   return <LinearProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -65,10 +66,11 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <LinearProgress value={progress} />;
+ *   return <LinearProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors.
+ * @remarks \@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<LinearProgressProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const LinearProgress: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<LinearProgressProps> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/progress/LinearProgress.js

@@ -16,7 +16,7 @@ const styles = bem("rmd-linear-progress");
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <LinearProgress />;
+ *   return <LinearProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -30,11 +30,12 @@ const styles = bem("rmd-linear-progress");
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <LinearProgress value={progress} />;
+ *   return <LinearProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors.
+ * @remarks \@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;
     const id = useEnsuredId(propId, "linear-progress");

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 { 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<HTMLDivElement>, \"id\">,\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 />;\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 value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Supports rendering as any of the theme colors.\n */\nexport const LinearProgress = forwardRef<HTMLSpanElement, 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\":\n                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);\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;AAC1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMG,+BAAiBP,WAC5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAChC,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,gCACEO,eAAeV,WAAWG;gBAC5B,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GACA"}
+{"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"}

package/dist/segmented-button/_segmented-button.scss

@@ -4,11 +4,13 @@
 @use "../icon/icon";
 @use "../interaction/interaction";
 @use "../typography/typography";
+@use "../transition/transition";
 @use "../theme/a11y";
 @use "../theme/colors";
 @use "../theme/theme";
 
 $disable-everything: false !default;
+$disable-selected-icon: false !default;
 
 $light-theme-color: colors.$black !default;
 $light-theme-outline-color: #79747e !default;
@@ -201,6 +203,9 @@ $var-lookup: (
       }
 
       &--selected {
+        @if not $disable-selected-icon {
+          @include transition.transition-set-var(max-width, icon.get-var(size));
+        }
         @include use-var(background-color, selected-background-color);
         @include use-var(color, selected-color);
       }

package/dist/suspense/CircularProgressSuspense.d.ts

@@ -4,6 +4,10 @@ import { type CircularProgressProps } from "../progress/CircularProgress.js";
  * @remarks \@since 6.0.0
  */
 export interface CircularProgressSuspenseProps extends CircularProgressProps {
+    /**
+     * @defaultValue `"Loading"`
+     */
+    "aria-label"?: string;
     children: ReactNode;
 }
 /**

package/dist/suspense/CircularProgressSuspense.js

@@ -27,9 +27,11 @@ import { CircularProgress } from "../progress/CircularProgress.js";
  *
  * @remarks \@since 6.0.0
  */ export function CircularProgressSuspense(props) {
-    const { children, ...progressProps } = props;
+    const { children, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Loading", ...progressProps } = props;
     return /*#__PURE__*/ _jsx(Suspense, {
         fallback: /*#__PURE__*/ _jsx(CircularProgress, {
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
             ...progressProps
         }),
         children: children

package/dist/suspense/CircularProgressSuspense.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/suspense/CircularProgressSuspense.tsx"],"sourcesContent":["import { Suspense, type ReactElement, type ReactNode } from \"react\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CircularProgressSuspenseProps extends CircularProgressProps {\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is just a convenience component to set the `fallback` to the\n * {@link CircularProgress} component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { CircularProgressSuspense } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { lazy } from \"react\";\n *\n * const Component = lazy(() => import('./Some/Path/To/Component'));\n *\n * function Example(): ReactElement {\n *   return (\n *     <CircularProgressSuspense>\n *       <Component />\n *     </CircularProgressSuspense>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function CircularProgressSuspense(\n  props: CircularProgressSuspenseProps\n): ReactElement {\n  const { children, ...progressProps } = props;\n  return (\n    <Suspense fallback={<CircularProgress {...progressProps} />}>\n      {children}\n    </Suspense>\n  );\n}\n"],"names":["Suspense","CircularProgress","CircularProgressSuspense","props","children","progressProps","fallback"],"mappings":";AAAA,SAASA,QAAQ,QAA2C,QAAQ;AACpE,SACEC,gBAAgB,QAEX,kCAAkC;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,SAASC,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,eAAe,GAAGF;IACvC,qBACE,KAACH;QAASM,wBAAU,KAACL;YAAkB,GAAGI,aAAa;;kBACpDD;;AAGP"}
+{"version":3,"sources":["../../src/suspense/CircularProgressSuspense.tsx"],"sourcesContent":["import { Suspense, type ReactElement, type ReactNode } from \"react\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CircularProgressSuspenseProps extends CircularProgressProps {\n  /**\n   * @defaultValue `\"Loading\"`\n   */\n  \"aria-label\"?: string;\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is just a convenience component to set the `fallback` to the\n * {@link CircularProgress} component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { CircularProgressSuspense } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { lazy } from \"react\";\n *\n * const Component = lazy(() => import('./Some/Path/To/Component'));\n *\n * function Example(): ReactElement {\n *   return (\n *     <CircularProgressSuspense>\n *       <Component />\n *     </CircularProgressSuspense>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function CircularProgressSuspense(\n  props: CircularProgressSuspenseProps\n): ReactElement {\n  const {\n    children,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Loading\",\n    ...progressProps\n  } = props;\n  return (\n    <Suspense\n      fallback={\n        <CircularProgress\n          aria-label={ariaLabel as string}\n          aria-labelledby={ariaLabelledBy}\n          {...progressProps}\n        />\n      }\n    >\n      {children}\n    </Suspense>\n  );\n}\n"],"names":["Suspense","CircularProgress","CircularProgressSuspense","props","children","ariaLabelledBy","ariaLabel","undefined","progressProps","fallback","aria-label","aria-labelledby"],"mappings":";AAAA,SAASA,QAAQ,QAA2C,QAAQ;AACpE,SACEC,gBAAgB,QAEX,kCAAkC;AAazC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,SAASC,yBACdC,KAAoC;IAEpC,MAAM,EACJC,QAAQ,EACR,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,SAAS,EAChE,GAAGC,eACJ,GAAGL;IACJ,qBACE,KAACH;QACCS,wBACE,KAACR;YACCS,cAAYJ;YACZK,mBAAiBN;YAChB,GAAGG,aAAa;;kBAIpBJ;;AAGP"}

package/dist/table/Table.d.ts

@@ -19,18 +19,6 @@ declare module "react" {
         "--rmd-table-sticky-background-color"?: string;
     }
 }
-/** @remarks \@since 6.0.0 */
-export interface TableClassNameOptions {
-    className?: string;
-    /** @defaultValue `false` */
-    dense?: boolean;
-    /** @defaultValue `false` */
-    fullWidth?: boolean;
-}
-/**
- * @remarks \@since 6.0.0
- */
-export declare function table(options?: TableClassNameOptions): string;
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement>, TableConfiguration {
 }
 /**

package/dist/table/Table.js

@@ -1,19 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useMemo } from "react";
-import { bem } from "../utils/bem.js";
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
-const styles = bem("rmd-table");
-/**
- * @remarks \@since 6.0.0
- */ export function table(options = {}) {
-    const { dense = false, fullWidth = false, className } = options;
-    return cnb(styles({
-        dense,
-        "full-width": fullWidth
-    }), className);
-}
+import { table } from "./tableStyles.js";
 /**
  * **Client Component**
  *

package/dist/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/Table.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useMemo, type TableHTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  TableConfigProvider,\n  type TableConfigContext,\n  type TableConfiguration,\n} from \"./TableConfigurationProvider.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-table-background-color\"?: string;\n    \"--rmd-table-border-size\"?: string | number;\n    \"--rmd-table-border-color\"?: string;\n    \"--rmd-table-header-background-color\"?: string;\n    \"--rmd-table-cell-color\"?: string;\n    \"--rmd-table-cell-height\"?: string | number;\n    \"--rmd-table-cell-horizontal-padding\"?: string | number;\n    \"--rmd-table-cell-vertical-padding\"?: string | number;\n    \"--rmd-table-header-cell-height\"?: string | number;\n    \"--rmd-table-hover-color\"?: string;\n    \"--rmd-table-selected-color\"?: string;\n    \"--rmd-table-sticky-cell\"?: string | number;\n    \"--rmd-table-sticky-header\"?: string | number;\n    \"--rmd-table-sticky-footer\"?: string | number;\n    \"--rmd-table-sticky-background-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-table\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function table(options: TableClassNameOptions = {}): string {\n  const { dense = false, fullWidth = false, className } = options;\n\n  return cnb(styles({ dense, \"full-width\": fullWidth }), className);\n}\n\nexport interface TableProps\n  extends TableHTMLAttributes<HTMLTableElement>,\n    TableConfiguration {}\n\n/**\n * **Client Component**\n *\n * @example\n * Responsive Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell>Header 1</TableCell>\n *             <TableCell>Header 2</TableCell>\n *             <TableCell>Header 3</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           <TableRow>\n *             <TableCell>Row 1 Cell 1</TableCell>\n *             <TableCell>Row 1 Cell 2</TableCell>\n *             <TableCell>Row 1 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 2 Cell 1</TableCell>\n *             <TableCell>Row 2 Cell 2</TableCell>\n *             <TableCell>Row 2 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 3 Cell 1</TableCell>\n *             <TableCell>Row 3 Cell 2</TableCell>\n *             <TableCell>Row 3 Cell 3</TableCell>\n *           </TableRow>\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  function Table(props, ref) {\n    const {\n      className,\n      children,\n      dense = false,\n      hAlign = \"left\",\n      vAlign = \"middle\",\n      lineWrap = false,\n      fullWidth = false,\n      disableHover = false,\n      disableBorders = false,\n      ...remaining\n    } = props;\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        dense,\n        header: false,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableHover,\n        disableBorders,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <table\n          {...remaining}\n          ref={ref}\n          className={table({ dense, fullWidth, className })}\n        >\n          {children}\n        </table>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useMemo","bem","TableConfigProvider","styles","table","options","dense","fullWidth","className","Table","props","ref","children","hAlign","vAlign","lineWrap","disableHover","disableBorders","remaining","configuration","header","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,OAAO,QAAkC,QAAQ;AACtE,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,mBAAmB,QAGd,kCAAkC;AAsBzC,MAAMC,SAASF,IAAI;AAanB;;CAEC,GACD,OAAO,SAASG,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAExD,OAAOP,IAAIK,OAAO;QAAEG;QAAO,cAAcC;IAAU,IAAIC;AACzD;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,MAAMC,sBAAQV,WACnB,SAASU,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJH,SAAS,EACTI,QAAQ,EACRN,QAAQ,KAAK,EACbO,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,KAAK,EAChBR,YAAY,KAAK,EACjBS,eAAe,KAAK,EACpBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,gBAAgBnB,QACpB,IAAO,CAAA;YACLM;YACAc,QAAQ;YACRP;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACX;QAAOO;QAAQC;QAAQC;QAAUC;QAAcC;KAAe;IAGjE,qBACE,KAACf;QAAoBmB,OAAOF;kBAC1B,cAAA,KAACf;YACE,GAAGc,SAAS;YACbP,KAAKA;YACLH,WAAWJ,MAAM;gBAAEE;gBAAOC;gBAAWC;YAAU;sBAE9CI;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/table/Table.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo, type TableHTMLAttributes } from \"react\";\nimport {\n  TableConfigProvider,\n  type TableConfigContext,\n  type TableConfiguration,\n} from \"./TableConfigurationProvider.js\";\nimport { table } from \"./tableStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-table-background-color\"?: string;\n    \"--rmd-table-border-size\"?: string | number;\n    \"--rmd-table-border-color\"?: string;\n    \"--rmd-table-header-background-color\"?: string;\n    \"--rmd-table-cell-color\"?: string;\n    \"--rmd-table-cell-height\"?: string | number;\n    \"--rmd-table-cell-horizontal-padding\"?: string | number;\n    \"--rmd-table-cell-vertical-padding\"?: string | number;\n    \"--rmd-table-header-cell-height\"?: string | number;\n    \"--rmd-table-hover-color\"?: string;\n    \"--rmd-table-selected-color\"?: string;\n    \"--rmd-table-sticky-cell\"?: string | number;\n    \"--rmd-table-sticky-header\"?: string | number;\n    \"--rmd-table-sticky-footer\"?: string | number;\n    \"--rmd-table-sticky-background-color\"?: string;\n  }\n}\n\nexport interface TableProps\n  extends TableHTMLAttributes<HTMLTableElement>,\n    TableConfiguration {}\n\n/**\n * **Client Component**\n *\n * @example\n * Responsive Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell>Header 1</TableCell>\n *             <TableCell>Header 2</TableCell>\n *             <TableCell>Header 3</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           <TableRow>\n *             <TableCell>Row 1 Cell 1</TableCell>\n *             <TableCell>Row 1 Cell 2</TableCell>\n *             <TableCell>Row 1 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 2 Cell 1</TableCell>\n *             <TableCell>Row 2 Cell 2</TableCell>\n *             <TableCell>Row 2 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 3 Cell 1</TableCell>\n *             <TableCell>Row 3 Cell 2</TableCell>\n *             <TableCell>Row 3 Cell 3</TableCell>\n *           </TableRow>\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  function Table(props, ref) {\n    const {\n      className,\n      children,\n      dense = false,\n      hAlign = \"left\",\n      vAlign = \"middle\",\n      lineWrap = false,\n      fullWidth = false,\n      disableHover = false,\n      disableBorders = false,\n      ...remaining\n    } = props;\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        dense,\n        header: false,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableHover,\n        disableBorders,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <table\n          {...remaining}\n          ref={ref}\n          className={table({ dense, fullWidth, className })}\n        >\n          {children}\n        </table>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useMemo","TableConfigProvider","table","Table","props","ref","className","children","dense","hAlign","vAlign","lineWrap","fullWidth","disableHover","disableBorders","remaining","configuration","header","value"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAAkC,QAAQ;AACtE,SACEC,mBAAmB,QAGd,kCAAkC;AACzC,SAASC,KAAK,QAAQ,mBAAmB;AA0BzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,MAAMC,sBAAQJ,WACnB,SAASI,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,QAAQ,KAAK,EACbC,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,gBAAgBhB,QACpB,IAAO,CAAA;YACLQ;YACAS,QAAQ;YACRR;YACAC;YACAC;YACAE;YACAC;QACF,CAAA,GACA;QAACN;QAAOC;QAAQC;QAAQC;QAAUE;QAAcC;KAAe;IAGjE,qBACE,KAACb;QAAoBiB,OAAOF;kBAC1B,cAAA,KAACd;YACE,GAAGa,SAAS;YACbV,KAAKA;YACLC,WAAWJ,MAAM;gBAAEM;gBAAOI;gBAAWN;YAAU;sBAE9CC;;;AAIT,GACA"}

package/dist/table/TableCell.d.ts

@@ -1,7 +1,7 @@
 import { type ButtonHTMLAttributes, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
-import { type SortOrder } from "./TableCellContent.js";
-import { type TableCellConfig, type TableCellHorizontalAlignment, type TableCellVerticalAlignment } from "./TableConfigurationProvider.js";
+import { type SortOrder, type TableCellContentsIconRotatorProps } from "./TableCellContent.js";
+import { type TableCellConfig } from "./TableConfigurationProvider.js";
 export type TableCellAttributes = Omit<TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>, "scope">;
 /**
  * @remarks \@since 6.0.0
@@ -36,7 +36,7 @@ export interface TableCellOptions extends TableCellConfig {
      * @internal
      * @defaultValue `false`
      */
-    checkbox?: boolean;
+    inputToggle?: boolean;
 }
 /**
  * @remarks \@since 6.0.0 Removed the `colSpan="100%"` support since `colSpan`
@@ -89,6 +89,13 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
      * @remarks \@since 6.0.0
      */
     contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /**
+     * Any additional props to pass to the `IconRotator` when the `aria-sort` prop
+     * has been provided.
+     *
+     * @remarks \@since 6.0.0
+     */
+    iconRotatorProps?: TableCellContentsIconRotatorProps;
     /**
      * Since providing an `aria-sort` prop will wrap the `children` in an
      * `UnstyledButton`, you can use this prop to render another button within the
@@ -155,38 +162,6 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
      */
     afterChildren?: ReactNode;
 }
-/** @remarks \@since 6.0.0 */
-export interface TableCellClassNameOptions {
-    className?: string;
-    /**
-     * Set this to `true` if the cell is rendered as a `<th>` so that the correct
-     * sticky styles can be applied.
-     */
-    header: boolean;
-    /**
-     * Set this to true if the cell is rendered in a `<thead>` so that the correct
-     * sticky styles can be applied.
-     */
-    isInTableHeader: boolean;
-    /** @defaultValue `false` */
-    grow?: boolean;
-    /** @defaultValue `false` */
-    sticky?: boolean;
-    /** @defaultValue `false` */
-    checkbox?: boolean;
-    hAlign?: TableCellHorizontalAlignment;
-    vAlign?: TableCellVerticalAlignment;
-    /** @defaultValue `true` */
-    lineWrap?: boolean;
-    /**
-     * @defaultValue `"horizontal"`
-     */
-    padding?: "horizontal" | "vertical" | "none";
-}
-/**
- * @remarks \@since 6.0.0
- */
-export declare function tableCell(options: TableCellClassNameOptions): string;
 /**
  * **Client Component**
  *
@@ -194,9 +169,9 @@ export declare function tableCell(options: TableCellClassNameOptions): string;
  * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a
  * child of the `TableHeader` component.
  *
- * Note: If you have a checkbox column in the `TableHeader` without any labels,
- * you will need to manually set the `header={false}` prop for that cell since
- * it is invalid to have a `<th>` without any readable content for screen
+ * Note: If you have a checkbox/radio column in the `TableHeader` without any
+ * labels, you will need to manually set the `header={false}` prop for that cell
+ * since it is invalid to have a `<th>` without any readable content for screen
  * readers.
  */
 export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/table/TableCell.js

@@ -1,19 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { getIcon } from "../icon/iconConfig.js";
 import { TableCellContent } from "./TableCellContent.js";
 import { useTableConfig } from "./TableConfigurationProvider.js";
-/**
- * @remarks \@since 6.0.0
- */ export function tableCell(options) {
-    const { grow, sticky, header, checkbox, hAlign, vAlign, lineWrap = true, padding = "horizontal", isInTableHeader, className } = options;
-    // using `&&` instead of `bem` since the latest version of typescript does not
-    // support setting the same object key (empty string)
-    const p = "rmd-table-cell--";
-    return cnb("rmd-table-cell", grow && `${p}grow`, header && `${p}header`, sticky && `${p}sticky`, checkbox && `${p}checkbox`, sticky && (!isInTableHeader || checkbox) && `${p}sticky-cell`, sticky && isInTableHeader && `${p}sticky-header`, sticky && isInTableHeader && checkbox && `${p}header-cell`, hAlign && hAlign !== "left" && `${p}${hAlign}`, vAlign && vAlign !== "middle" && `${p}${vAlign}`, !lineWrap && `${p}no-wrap`, padding === "vertical" && `${p}v-padding`, padding === "none" && `${p}no-padding`, className);
-}
+import { tableCell } from "./tableCellStyles.js";
 /**
  * **Client Component**
  *
@@ -21,12 +12,12 @@ import { useTableConfig } from "./TableConfigurationProvider.js";
  * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a
  * child of the `TableHeader` component.
  *
- * Note: If you have a checkbox column in the `TableHeader` without any labels,
- * you will need to manually set the `header={false}` prop for that cell since
- * it is invalid to have a `<th>` without any readable content for screen
+ * Note: If you have a checkbox/radio column in the `TableHeader` without any
+ * labels, you will need to manually set the `header={false}` prop for that cell
+ * since it is invalid to have a `<th>` without any readable content for screen
  * readers.
  */ export const TableCell = /*#__PURE__*/ forwardRef(function TableCell(props, ref) {
-    const { "aria-sort": sortOrder, className, grow = false, scope: propScope, hAlign: propHAlign, vAlign: propVAlign, header: propHeader, lineWrap: propDisableLineWrap, checkbox, children, beforeChildren, afterChildren, sticky, sortIcon: propSortIcon, sortIconAfter = false, sortIconRotated, padding = "horizontal", contentProps, ...remaining } = props;
+    const { "aria-sort": sortOrder, className, grow = false, scope: propScope, hAlign: propHAlign, vAlign: propVAlign, header: propHeader, lineWrap: propDisableLineWrap, inputToggle, children, beforeChildren, afterChildren, sticky, sortIcon: propSortIcon, sortIconAfter = false, sortIconRotated, iconRotatorProps, padding = "horizontal", contentProps, ...remaining } = props;
     const sortIcon = getIcon("sort", propSortIcon);
     // Note: unlike the other usages of `useTableConfig`, the `propHeader`
     // is not provided. This is so that `TableCheckbox` components can still
@@ -52,7 +43,7 @@ import { useTableConfig } from "./TableConfigurationProvider.js";
             grow,
             header,
             sticky,
-            checkbox,
+            inputToggle,
             hAlign,
             vAlign,
             lineWrap: !sortOrder && lineWrap,
@@ -66,6 +57,7 @@ import { useTableConfig } from "./TableConfigurationProvider.js";
                 ...contentProps,
                 icon: sortIcon,
                 iconAfter: sortIconAfter,
+                iconRotatorProps: iconRotatorProps,
                 sortOrder: sortOrder,
                 hAlign: hAlign,
                 rotated: sortIconRotated,

package/dist/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCellContent, type SortOrder } from \"./TableCellContent.js\";\nimport {\n  useTableConfig,\n  type TableCellConfig,\n  type TableCellHorizontalAlignment,\n  type TableCellVerticalAlignment,\n} from \"./TableConfigurationProvider.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  checkbox?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  contentProps?: PropsWithRef<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @remarks \\@since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import type { SortOrder } from \"@react-md/core\";\n   * import { Button, Dialog, TableCell } from \"@react-md/core\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableCellClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the cell is rendered as a `<th>` so that the correct\n   * sticky styles can be applied.\n   */\n  header: boolean;\n\n  /**\n   * Set this to true if the cell is rendered in a `<thead>` so that the correct\n   * sticky styles can be applied.\n   */\n  isInTableHeader: boolean;\n\n  /** @defaultValue `false` */\n  grow?: boolean;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /** @defaultValue `false` */\n  checkbox?: boolean;\n\n  hAlign?: TableCellHorizontalAlignment;\n  vAlign?: TableCellVerticalAlignment;\n\n  /** @defaultValue `true` */\n  lineWrap?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tableCell(options: TableCellClassNameOptions): string {\n  const {\n    grow,\n    sticky,\n    header,\n    checkbox,\n    hAlign,\n    vAlign,\n    lineWrap = true,\n    padding = \"horizontal\",\n    isInTableHeader,\n    className,\n  } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  const p = \"rmd-table-cell--\";\n  return cnb(\n    \"rmd-table-cell\",\n    grow && `${p}grow`,\n    header && `${p}header`,\n    sticky && `${p}sticky`,\n    checkbox && `${p}checkbox`,\n    sticky && (!isInTableHeader || checkbox) && `${p}sticky-cell`,\n    sticky && isInTableHeader && `${p}sticky-header`,\n    sticky && isInTableHeader && checkbox && `${p}header-cell`,\n    hAlign && hAlign !== \"left\" && `${p}${hAlign}`,\n    vAlign && vAlign !== \"middle\" && `${p}${vAlign}`,\n    !lineWrap && `${p}no-wrap`,\n    padding === \"vertical\" && `${p}v-padding`,\n    padding === \"none\" && `${p}no-padding`,\n    className\n  );\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox column in the `TableHeader` without any labels,\n * you will need to manually set the `header={false}` prop for that cell since\n * it is invalid to have a `<th>` without any readable content for screen\n * readers.\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      checkbox,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          checkbox,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","options","grow","sticky","header","checkbox","hAlign","vAlign","lineWrap","padding","isInTableHeader","className","p","TableCell","props","ref","sortOrder","scope","propScope","propHAlign","propVAlign","propHeader","propDisableLineWrap","children","beforeChildren","afterChildren","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","icon","iconAfter","rotated"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,gBAAgB,QAAwB,wBAAwB;AACzE,SACEC,cAAc,QAIT,kCAAkC;AAoNzC;;CAEC,GACD,OAAO,SAASC,UAAUC,OAAkC;IAC1D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,WAAW,IAAI,EACfC,UAAU,YAAY,EACtBC,eAAe,EACfC,SAAS,EACV,GAAGV;IAEJ,8EAA8E;IAC9E,qDAAqD;IACrD,MAAMW,IAAI;IACV,OAAOjB,IACL,kBACAO,QAAQ,CAAC,EAAEU,EAAE,IAAI,CAAC,EAClBR,UAAU,CAAC,EAAEQ,EAAE,MAAM,CAAC,EACtBT,UAAU,CAAC,EAAES,EAAE,MAAM,CAAC,EACtBP,YAAY,CAAC,EAAEO,EAAE,QAAQ,CAAC,EAC1BT,UAAW,CAAA,CAACO,mBAAmBL,QAAO,KAAM,CAAC,EAAEO,EAAE,WAAW,CAAC,EAC7DT,UAAUO,mBAAmB,CAAC,EAAEE,EAAE,aAAa,CAAC,EAChDT,UAAUO,mBAAmBL,YAAY,CAAC,EAAEO,EAAE,WAAW,CAAC,EAC1DN,UAAUA,WAAW,UAAU,CAAC,EAAEM,EAAE,EAAEN,OAAO,CAAC,EAC9CC,UAAUA,WAAW,YAAY,CAAC,EAAEK,EAAE,EAAEL,OAAO,CAAC,EAChD,CAACC,YAAY,CAAC,EAAEI,EAAE,OAAO,CAAC,EAC1BH,YAAY,cAAc,CAAC,EAAEG,EAAE,SAAS,CAAC,EACzCH,YAAY,UAAU,CAAC,EAAEG,EAAE,UAAU,CAAC,EACtCD;AAEJ;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAME,0BAAYjB,WACvB,SAASiB,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJ,aAAaC,SAAS,EACtBL,SAAS,EACTT,OAAO,KAAK,EACZe,OAAOC,SAAS,EAChBZ,QAAQa,UAAU,EAClBZ,QAAQa,UAAU,EAClBhB,QAAQiB,UAAU,EAClBb,UAAUc,mBAAmB,EAC7BjB,QAAQ,EACRkB,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbtB,MAAM,EACNuB,UAAUC,YAAY,EACtBC,gBAAgB,KAAK,EACrBC,eAAe,EACfpB,UAAU,YAAY,EACtBqB,YAAY,EACZ,GAAGC,WACJ,GAAGjB;IAEJ,MAAMY,WAAW7B,QAAQ,QAAQ8B;IAEjC,sEAAsE;IACtE,wEAAwE;IACxE,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,EACJvB,QAAQ4B,eAAe,EACvB1B,MAAM,EACNC,MAAM,EACNC,QAAQ,EACT,GAAGT,eAAe;QACjBO,QAAQa;QACRZ,QAAQa;QACRZ,UAAUc;IACZ;IACA,MAAMlB,SAASiB,cAAcW;IAE7B,IAAIf,QAAQC;IACZ,IAAI,CAACD,SAASb,QAAQ;QACpBa,QAAQ,CAACe,mBAAmBX,aAAa,QAAQ;IACnD;IAEA,MAAMY,YAAY7B,SAAS,OAAO;IAClC,qBACE,MAAC6B;QACE,GAAGF,SAAS;QACbhB,KAAKA;QACLmB,aAAWlB,cAAc,SAASmB,YAAYnB;QAC9CL,WAAWX,UAAU;YACnBW;YACAT;YACAE;YACAD;YACAE;YACAC;YACAC;YACAC,UAAU,CAACQ,aAAaR;YACxBC,SAASiB,YAAYV,YAAY,SAASP;YAC1CC,iBAAiBsB;QACnB;QACAf,OAAOA;;YAENO;0BACD,KAAC1B;gBACE,GAAGgC,YAAY;gBAChBM,MAAMV;gBACNW,WAAWT;gBACXZ,WAAWA;gBACXV,QAAQA;gBACRgC,SAAST;0BAERN;;YAEFE;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type SortOrder,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport {\n  useTableConfig,\n  type TableCellConfig,\n} from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  inputToggle?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  contentProps?: PropsWithRef<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @remarks \\@since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import type { SortOrder } from \"@react-md/core\";\n   * import { Button, Dialog, TableCell } from \"@react-md/core\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox/radio column in the `TableHeader` without any\n * labels, you will need to manually set the `header={false}` prop for that cell\n * since it is invalid to have a `<th>` without any readable content for screen\n * readers.\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      inputToggle,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      iconRotatorProps,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          inputToggle,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          iconRotatorProps={iconRotatorProps}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","TableCell","props","ref","sortOrder","className","grow","scope","propScope","hAlign","propHAlign","vAlign","propVAlign","header","propHeader","lineWrap","propDisableLineWrap","inputToggle","children","beforeChildren","afterChildren","sticky","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","iconRotatorProps","padding","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","isInTableHeader","icon","iconAfter","rotated"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SACEC,gBAAgB,QAGX,wBAAwB;AAC/B,SACEC,cAAc,QAET,kCAAkC;AACzC,SAASC,SAAS,QAAQ,uBAAuB;AAuLjD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJ,aAAaC,SAAS,EACtBC,SAAS,EACTC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,mBAAmB,EAC7BC,WAAW,EACXC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,MAAM,EACNC,UAAUC,YAAY,EACtBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,gBAAgB,EAChBC,UAAU,YAAY,EACtBC,YAAY,EACZ,GAAGC,WACJ,GAAG3B;IAEJ,MAAMoB,WAAWzB,QAAQ,QAAQ0B;IAEjC,sEAAsE;IACtE,wEAAwE;IACxE,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,EACJV,QAAQiB,eAAe,EACvBrB,MAAM,EACNE,MAAM,EACNI,QAAQ,EACT,GAAGhB,eAAe;QACjBU,QAAQC;QACRC,QAAQC;QACRG,UAAUC;IACZ;IACA,MAAMH,SAASC,cAAcgB;IAE7B,IAAIvB,QAAQC;IACZ,IAAI,CAACD,SAASM,QAAQ;QACpBN,QAAQ,CAACuB,mBAAmBhB,aAAa,QAAQ;IACnD;IAEA,MAAMiB,YAAYlB,SAAS,OAAO;IAClC,qBACE,MAACkB;QACE,GAAGF,SAAS;QACb1B,KAAKA;QACL6B,aAAW5B,cAAc,SAAS6B,YAAY7B;QAC9CC,WAAWL,UAAU;YACnBK;YACAC;YACAO;YACAQ;YACAJ;YACAR;YACAE;YACAI,UAAU,CAACX,aAAaW;YACxBY,SAASL,YAAYlB,YAAY,SAASuB;YAC1CO,iBAAiBJ;QACnB;QACAvB,OAAOA;;YAENY;0BACD,KAACrB;gBACE,GAAG8B,YAAY;gBAChBO,MAAMb;gBACNc,WAAWZ;gBACXE,kBAAkBA;gBAClBtB,WAAWA;gBACXK,QAAQA;gBACR4B,SAASZ;0BAERP;;YAEFE;;;AAGP,GACA"}

package/dist/table/TableCellContent.d.ts

@@ -1,6 +1,11 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type IconRotatorProps } from "../icon/IconRotator.js";
 import { type TableCellHorizontalAlignment } from "./TableConfigurationProvider.js";
 export type SortOrder = "ascending" | "descending" | "none" | "other";
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableCellContentsIconRotatorProps = Omit<IconRotatorProps, "children" | "rotated">;
 /**
  * @remarks \@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props
  * can be passed to the `ButtonUnstyled`
@@ -22,6 +27,10 @@ export interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonEl
      * Boolean if the icon should be rotated.
      */
     rotated?: boolean;
+    /**
+     * Any additional props to pass to the `IconRotator`.
+     */
+    iconRotatorProps?: TableCellContentsIconRotatorProps;
     /**
      * @remarks \@since 4.0.3
      * @see {@link TableCellHorizontalAlignment}

package/dist/table/TableCellContent.js

@@ -16,7 +16,7 @@ const styles = bem("rmd-table-cell");
  *
  * @internal
  */ export const TableCellContent = /*#__PURE__*/ forwardRef(function TableCellContent(props, ref) {
-    const { icon: propIcon, style, className, sortOrder, children, rotated: propRotated, hAlign = "left", iconAfter, ...remaining } = props;
+    const { icon: propIcon, style, className, sortOrder, children, rotated: propRotated, hAlign = "left", iconAfter, iconRotatorProps, ...remaining } = props;
     if (!sortOrder || propIcon === null) {
         return /*#__PURE__*/ _jsx(_Fragment, {
             children: children
@@ -26,6 +26,7 @@ const styles = bem("rmd-table-cell");
     if (sortOrder !== "none") {
         const rotated = propRotated ?? sortOrder === "descending";
         icon = /*#__PURE__*/ _jsx(IconRotator, {
+            ...iconRotatorProps,
             rotated: rotated,
             children: propIcon
         });

package/dist/table/TableCellContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type TableCellHorizontalAlignment } from \"./TableConfigurationProvider.js\";\n\nexport type SortOrder = \"ascending\" | \"descending\" | \"none\" | \"other\";\n\n/**\n * @remarks \\@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * @remarks \\@since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = <IconRotator rotated={rotated}>{propIcon}</IconRotator>;\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,GAAG,QAAQ,kBAAkB;AAsCtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACT,GAAGC,WACJ,GAAGZ;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBAAO,KAACN;YAAYY,SAASA;sBAAUL;;IACzC;IAEA,qBACE,MAACR;QACE,GAAGiB,SAAS;QACbX,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}
+{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type TableCellHorizontalAlignment } from \"./TableConfigurationProvider.js\";\n\nexport type SortOrder = \"ascending\" | \"descending\" | \"none\" | \"other\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * Any additional props to pass to the `IconRotator`.\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * @remarks \\@since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    iconRotatorProps,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = (\n      <IconRotator {...iconRotatorProps} rotated={rotated}>\n        {propIcon}\n      </IconRotator>\n    );\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","iconRotatorProps","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAmDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACJ,GAAGb;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBACE,KAACN;YAAa,GAAGgB,gBAAgB;YAAEJ,SAASA;sBACzCL;;IAGP;IAEA,qBACE,MAACR;QACE,GAAGkB,SAAS;QACbZ,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}

package/dist/table/TableCheckbox.d.ts

@@ -50,7 +50,6 @@ export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, Table
  * @example
  * Simple Example
  * ```tsx
- * import { useCheckboxGroup } from "@react-md/core";
  * import {
  *   Table,
  *   TableBody,
@@ -59,8 +58,9 @@ export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, Table
  *   TableContainer,
  *   TableHeader,
  *   TableRow,
+ *   useCheckboxGroup
  * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * const rows = [
  *   { name: "Frozen Yogurt", type: "Ice Cream" },

package/dist/table/TableCheckbox.js

@@ -12,7 +12,6 @@ const noop = ()=>{
  * @example
  * Simple Example
  * ```tsx
- * import { useCheckboxGroup } from "@react-md/core";
  * import {
  *   Table,
  *   TableBody,
@@ -21,8 +20,9 @@ const noop = ()=>{
  *   TableContainer,
  *   TableHeader,
  *   TableRow,
+ *   useCheckboxGroup
  * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * const rows = [
  *   { name: "Frozen Yogurt", type: "Ice Cream" },
@@ -84,7 +84,7 @@ const noop = ()=>{
         ...remaining,
         ref: ref,
         header: false,
-        checkbox: true,
+        inputToggle: true,
         onClick: (event)=>{
             event.stopPropagation();
             onClick(event);