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

package/dist/utils/RenderRecursively.d.ts

@@ -82,17 +82,46 @@ export interface RenderRecursivelyProps<Item = Record<string, unknown>, Data = u
  *
  * @example
  * ```tsx
+ * "use client";
+ *
+ * import { Box } from "@react-md/core/box/Box";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Divider } from "@react-md/core/divider/Divider";
+ * import { List } from "@react-md/core/list/List";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
  * import {
- *   buildTree,
- *   List,
- *   ListItem,
- *   ListItemLink,
- *   RenderRecursively,
- *   TreeData,
  *   type DefaultTreeItemNode,
+ *   type TreeData,
+ * } from "@react-md/core/tree/types";
+ * import { type UseStateSetter } from "@react-md/core/types";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import {
  *   type RenderRecursiveItemsProps,
- * } from "@react-md/core";
- * import { type ReactElement } from "react";
+ *   RenderRecursively,
+ * } from "@react-md/core/utils/RenderRecursively";
+ * import { type ReactElement, useState } from "react";
+ *
+ * interface Data {
+ *   activeId: string;
+ *   setActiveId: UseStateSetter<string>;
+ * }
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   const [activeId, setActiveId] = useState("/");
+ *   return (
+ *     <Box fullWidth disableWrap>
+ *       <Box stacked align="stretch">
+ *         <RenderRecursively
+ *           // this is optional and can be any sort of info
+ *           data={{ activeId, setActiveId }}
+ *           items={Object.values(navItems)}
+ *           render={Render}
+ *         />
+ *       </Box>
+ *       <div>Active route: {activeId}</div>
+ *     </Box>
+ *   );
+ * }
  *
  * const navItems = {
  *   "/": {
@@ -118,50 +147,77 @@ export interface RenderRecursivelyProps<Item = Record<string, unknown>, Data = u
  *   },
  *   "/divider-1": {
  *     itemId: "/divider-1",
- *     parentId: null
+ *     parentId: null,
  *   },
  *   "/route-2": {
- *     itemId: "/route-2"
+ *     itemId: "/route-2",
  *     parentId: null,
  *     children: "Route 2",
  *   },
  * } satisfies TreeData;
  *
- * function NestedNavigation(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents, children } = props;
- *   const { toggle, toggled: collapsed } = useToggle(false);
- *   const { elementProps } = useCollapseTransition({
- *     transitionIn: !collapsed,
- *   });
- *
- *   return (
- *     <li>
- *       <Button onClick={toggle}>{item.children}</Button>
- *       <List {...elementProps}>{children}</List>
- *     </li>
- *   ):
- * }
- *
- *
- * function Render(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents } = props;
+ * function Render(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data,
+ *     // this _might_ be defined based on the implementation. it's set to any
+ *     // renderable element
+ *     children: _children,
+ *   } = props;
  *   if (item.itemId.includes("divider")) {
  *     return <Divider />;
  *   }
  *
  *   if (item.items) {
- *     return <NestedNavigation {...props} />
+ *     return <NestedNavigation {...props} />;
  *   }
  *
  *   const prefix = parents.map((parent) => parent.itemId).join("/");
+ *   const currentId = `${prefix}${item.itemId}`;
+ *   // I haven't figured out how to manage the type safety of this yet
+ *   const active = data?.activeId === currentId;
+ *   // this would normally be a link, but to keep the demo simple, it's a button
  *   return (
- *     <Link href={`${prefix}${item.itemId}`}>
+ *     <Button
+ *       theme={active ? "primary" : "clear"}
+ *       themeType={active ? "contained" : "flat"}
+ *       onClick={() => {
+ *         data?.setActiveId(currentId);
+ *       }}
+ *       style={{ justifyContent: "flex-start" }}
+ *     >
  *       {item.children}
- *     </Link>
+ *     </Button>
  *   );
  * }
- * ```
  *
+ * function NestedNavigation(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents: _parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data: _data,
+ *     children,
+ *   } = props;
+ *   const { toggle, toggled: collapsed } = useToggle(false);
+ *   const { elementProps } = useCollapseTransition({
+ *     transitionIn: !collapsed,
+ *   });
+ *
+ *   return (
+ *     <li>
+ *       <Button onClick={toggle}>{item.children}</Button>
+ *       <List {...elementProps}>{children}</List>
+ *     </li>
+ *   );
+ * }
+ * ```
  *
  * @since 6.0.0
  */

package/dist/utils/RenderRecursively.js

@@ -19,17 +19,46 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  *
  * @example
  * ```tsx
+ * "use client";
+ *
+ * import { Box } from "@react-md/core/box/Box";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Divider } from "@react-md/core/divider/Divider";
+ * import { List } from "@react-md/core/list/List";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
  * import {
- *   buildTree,
- *   List,
- *   ListItem,
- *   ListItemLink,
- *   RenderRecursively,
- *   TreeData,
  *   type DefaultTreeItemNode,
+ *   type TreeData,
+ * } from "@react-md/core/tree/types";
+ * import { type UseStateSetter } from "@react-md/core/types";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import {
  *   type RenderRecursiveItemsProps,
- * } from "@react-md/core";
- * import { type ReactElement } from "react";
+ *   RenderRecursively,
+ * } from "@react-md/core/utils/RenderRecursively";
+ * import { type ReactElement, useState } from "react";
+ *
+ * interface Data {
+ *   activeId: string;
+ *   setActiveId: UseStateSetter<string>;
+ * }
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   const [activeId, setActiveId] = useState("/");
+ *   return (
+ *     <Box fullWidth disableWrap>
+ *       <Box stacked align="stretch">
+ *         <RenderRecursively
+ *           // this is optional and can be any sort of info
+ *           data={{ activeId, setActiveId }}
+ *           items={Object.values(navItems)}
+ *           render={Render}
+ *         />
+ *       </Box>
+ *       <div>Active route: {activeId}</div>
+ *     </Box>
+ *   );
+ * }
  *
  * const navItems = {
  *   "/": {
@@ -55,50 +84,77 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  *   },
  *   "/divider-1": {
  *     itemId: "/divider-1",
- *     parentId: null
+ *     parentId: null,
  *   },
  *   "/route-2": {
- *     itemId: "/route-2"
+ *     itemId: "/route-2",
  *     parentId: null,
  *     children: "Route 2",
  *   },
  * } satisfies TreeData;
  *
- * function NestedNavigation(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents, children } = props;
- *   const { toggle, toggled: collapsed } = useToggle(false);
- *   const { elementProps } = useCollapseTransition({
- *     transitionIn: !collapsed,
- *   });
- *
- *   return (
- *     <li>
- *       <Button onClick={toggle}>{item.children}</Button>
- *       <List {...elementProps}>{children}</List>
- *     </li>
- *   ):
- * }
- *
- *
- * function Render(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents } = props;
+ * function Render(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data,
+ *     // this _might_ be defined based on the implementation. it's set to any
+ *     // renderable element
+ *     children: _children,
+ *   } = props;
  *   if (item.itemId.includes("divider")) {
  *     return <Divider />;
  *   }
  *
  *   if (item.items) {
- *     return <NestedNavigation {...props} />
+ *     return <NestedNavigation {...props} />;
  *   }
  *
  *   const prefix = parents.map((parent) => parent.itemId).join("/");
+ *   const currentId = `${prefix}${item.itemId}`;
+ *   // I haven't figured out how to manage the type safety of this yet
+ *   const active = data?.activeId === currentId;
+ *   // this would normally be a link, but to keep the demo simple, it's a button
  *   return (
- *     <Link href={`${prefix}${item.itemId}`}>
+ *     <Button
+ *       theme={active ? "primary" : "clear"}
+ *       themeType={active ? "contained" : "flat"}
+ *       onClick={() => {
+ *         data?.setActiveId(currentId);
+ *       }}
+ *       style={{ justifyContent: "flex-start" }}
+ *     >
  *       {item.children}
- *     </Link>
+ *     </Button>
  *   );
  * }
- * ```
  *
+ * function NestedNavigation(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents: _parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data: _data,
+ *     children,
+ *   } = props;
+ *   const { toggle, toggled: collapsed } = useToggle(false);
+ *   const { elementProps } = useCollapseTransition({
+ *     transitionIn: !collapsed,
+ *   });
+ *
+ *   return (
+ *     <li>
+ *       <Button onClick={toggle}>{item.children}</Button>
+ *       <List {...elementProps}>{children}</List>
+ *     </li>
+ *   );
+ * }
+ * ```
  *
  * @since 6.0.0
  */ export function RenderRecursively(props) {

package/dist/utils/RenderRecursively.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/RenderRecursively.tsx"],"sourcesContent":["// TODO: Figure out how to strictly enforce the data\nimport { type ComponentType, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport type RecursiveItem<T = Record<string, unknown>> = T & {\n  items?: readonly RecursiveItem<T>[];\n};\n\n/**\n * @since 6.0.0\n */\nexport interface RecursiveItemKeyOptions<Item = Record<string, unknown>> {\n  item: RecursiveItem<Item>;\n  depth: number;\n  index: number;\n}\n\n/**\n * This is the default implementation for {@link RenderRecursivelyProps.getItemKey}.\n *\n * ```ts\n * return `${options.depth}-${options.index}`\n * ```\n *\n * @since 6.0.0\n */\nexport function getRecursiveItemKey<Item = Record<string, unknown>>(\n  options: RecursiveItemKeyOptions<Item>\n): string {\n  const { depth, index } = options;\n\n  return `${depth}-${index}`;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RenderRecursiveItemsProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n\n  /**\n   * The current item to render.\n   */\n  item: RecursiveItem<Item>;\n\n  /**\n   * The list of parent items which can be used to determine the depth or \"share\n   * props\" if the items contained props.\n   */\n  parents: readonly RecursiveItem<Item>[];\n\n  /**\n   * This will be provided if the {@link item} had child items and will be the\n   * rendered content.\n   */\n  children?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RenderRecursivelyProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /**\n   * The renderer for each item.\n   */\n  render: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /**\n   * This should not be used for external users. This is used to build the\n   * {@link RenderRecursiveItemsProps.parents} list.\n   *\n   * @internal\n   * @defaultValue `[]`\n   */\n  parents?: readonly RecursiveItem<Item>[];\n\n  /**\n   * Gets a React `key` for a specific item. This should be provided if the\n   * items can be moved around to improve performance.\n   *\n   * @example\n   * ```ts\n   * getItemKey={({ item }) => item.id}\n   * ```\n   *\n   * @see {@link getRecursiveItemKey}\n   * @defaultValue `` ({ index, depth }) => `${depth}-${index}` ``\n   */\n  getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;\n}\n\n/**\n * Helper component for recursively rendering specific data structures (mostly\n * trees). The main use-case is for rendering site navigation and the `Tree`\n * component.\n *\n * @example\n * ```tsx\n * import {\n *   buildTree,\n *   List,\n *   ListItem,\n *   ListItemLink,\n *   RenderRecursively,\n *   TreeData,\n *   type DefaultTreeItemNode,\n *   type RenderRecursiveItemsProps,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * const navItems = {\n *   \"/\": {\n *     href: \"/\",\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Collapsible\",\n *   },\n *   \"/nested-route-1\": {\n *     itemId: \"/nested-route-1\",\n *     parentId: \"/route-1\",\n *     children: \"Child 1\",\n *   },\n *   \"/nested-route-2\": {\n *     itemId: \"/nested-route-2\",\n *     parentId: \"/route-2\",\n *     children: \"Child 2\",\n *   },\n *   \"/divider-1\": {\n *     itemId: \"/divider-1\",\n *     parentId: null\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\"\n *     parentId: null,\n *     children: \"Route 2\",\n *   },\n * } satisfies TreeData;\n *\n * function NestedNavigation(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {\n *   const { item, parents, children } = props;\n *   const { toggle, toggled: collapsed } = useToggle(false);\n *   const { elementProps } = useCollapseTransition({\n *     transitionIn: !collapsed,\n *   });\n *\n *   return (\n *     <li>\n *       <Button onClick={toggle}>{item.children}</Button>\n *       <List {...elementProps}>{children}</List>\n *     </li>\n *   ):\n * }\n *\n *\n * function Render(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {\n *   const { item, parents } = props;\n *   if (item.itemId.includes(\"divider\")) {\n *     return <Divider />;\n *   }\n *\n *   if (item.items) {\n *     return <NestedNavigation {...props} />\n *   }\n *\n *   const prefix = parents.map((parent) => parent.itemId).join(\"/\");\n *   return (\n *     <Link href={`${prefix}${item.itemId}`}>\n *       {item.children}\n *     </Link>\n *   );\n * }\n * ```\n *\n *\n * @since 6.0.0\n */\nexport function RenderRecursively<Item, Data>(\n  props: RenderRecursivelyProps<Item, Data>\n): ReactElement {\n  const {\n    data,\n    items,\n    render: Render,\n    getItemKey = getRecursiveItemKey,\n    parents = [],\n  } = props;\n\n  return (\n    <>\n      {items.map((item, index) => {\n        let children: ReactNode;\n        const depth = parents.length;\n        if (item.items?.length) {\n          children = (\n            <RenderRecursively\n              data={data}\n              items={item.items}\n              render={Render}\n              getItemKey={getItemKey}\n              parents={[...parents, item]}\n            />\n          );\n        }\n\n        return (\n          <Render\n            key={getItemKey({ item, depth, index })}\n            // typecast since it should be undefined in renderer as well?\n            data={data}\n            item={item}\n            parents={parents}\n          >\n            {children}\n          </Render>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["getRecursiveItemKey","options","depth","index","RenderRecursively","props","data","items","render","Render","getItemKey","parents","map","item","children","length"],"mappings":"AAAA,oDAAoD;;AAmBpD;;;;;;;;CAQC,GACD,OAAO,SAASA,oBACdC,OAAsC;IAEtC,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGF;IAEzB,OAAO,GAAGC,MAAM,CAAC,EAAEC,OAAO;AAC5B;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFC,GACD,OAAO,SAASC,kBACdC,KAAyC;IAEzC,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,QAAQC,MAAM,EACdC,aAAaV,mBAAmB,EAChCW,UAAU,EAAE,EACb,GAAGN;IAEJ,qBACE;kBACGE,MAAMK,GAAG,CAAC,CAACC,MAAMV;YAChB,IAAIW;YACJ,MAAMZ,QAAQS,QAAQI,MAAM;YAC5B,IAAIF,KAAKN,KAAK,EAAEQ,QAAQ;gBACtBD,yBACE,KAACV;oBACCE,MAAMA;oBACNC,OAAOM,KAAKN,KAAK;oBACjBC,QAAQC;oBACRC,YAAYA;oBACZC,SAAS;2BAAIA;wBAASE;qBAAK;;YAGjC;YAEA,qBACE,KAACJ;gBAEC,6DAA6D;gBAC7DH,MAAMA;gBACNO,MAAMA;gBACNF,SAASA;0BAERG;eANIJ,WAAW;gBAAEG;gBAAMX;gBAAOC;YAAM;QAS3C;;AAGN"}
+{"version":3,"sources":["../../src/utils/RenderRecursively.tsx"],"sourcesContent":["// TODO: Figure out how to strictly enforce the data\nimport { type ComponentType, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport type RecursiveItem<T = Record<string, unknown>> = T & {\n  items?: readonly RecursiveItem<T>[];\n};\n\n/**\n * @since 6.0.0\n */\nexport interface RecursiveItemKeyOptions<Item = Record<string, unknown>> {\n  item: RecursiveItem<Item>;\n  depth: number;\n  index: number;\n}\n\n/**\n * This is the default implementation for {@link RenderRecursivelyProps.getItemKey}.\n *\n * ```ts\n * return `${options.depth}-${options.index}`\n * ```\n *\n * @since 6.0.0\n */\nexport function getRecursiveItemKey<Item = Record<string, unknown>>(\n  options: RecursiveItemKeyOptions<Item>\n): string {\n  const { depth, index } = options;\n\n  return `${depth}-${index}`;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RenderRecursiveItemsProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n\n  /**\n   * The current item to render.\n   */\n  item: RecursiveItem<Item>;\n\n  /**\n   * The list of parent items which can be used to determine the depth or \"share\n   * props\" if the items contained props.\n   */\n  parents: readonly RecursiveItem<Item>[];\n\n  /**\n   * This will be provided if the {@link item} had child items and will be the\n   * rendered content.\n   */\n  children?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RenderRecursivelyProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /**\n   * The renderer for each item.\n   */\n  render: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /**\n   * This should not be used for external users. This is used to build the\n   * {@link RenderRecursiveItemsProps.parents} list.\n   *\n   * @internal\n   * @defaultValue `[]`\n   */\n  parents?: readonly RecursiveItem<Item>[];\n\n  /**\n   * Gets a React `key` for a specific item. This should be provided if the\n   * items can be moved around to improve performance.\n   *\n   * @example\n   * ```ts\n   * getItemKey={({ item }) => item.id}\n   * ```\n   *\n   * @see {@link getRecursiveItemKey}\n   * @defaultValue `` ({ index, depth }) => `${depth}-${index}` ``\n   */\n  getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;\n}\n\n/**\n * Helper component for recursively rendering specific data structures (mostly\n * trees). The main use-case is for rendering site navigation and the `Tree`\n * component.\n *\n * @example\n * ```tsx\n * \"use client\";\n *\n * import { Box } from \"@react-md/core/box/Box\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Divider } from \"@react-md/core/divider/Divider\";\n * import { List } from \"@react-md/core/list/List\";\n * import { useCollapseTransition } from \"@react-md/core/transition/useCollapseTransition\";\n * import {\n *   type DefaultTreeItemNode,\n *   type TreeData,\n * } from \"@react-md/core/tree/types\";\n * import { type UseStateSetter } from \"@react-md/core/types\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import {\n *   type RenderRecursiveItemsProps,\n *   RenderRecursively,\n * } from \"@react-md/core/utils/RenderRecursively\";\n * import { type ReactElement, useState } from \"react\";\n *\n * interface Data {\n *   activeId: string;\n *   setActiveId: UseStateSetter<string>;\n * }\n *\n * export default function SimpleExample(): ReactElement {\n *   const [activeId, setActiveId] = useState(\"/\");\n *   return (\n *     <Box fullWidth disableWrap>\n *       <Box stacked align=\"stretch\">\n *         <RenderRecursively\n *           // this is optional and can be any sort of info\n *           data={{ activeId, setActiveId }}\n *           items={Object.values(navItems)}\n *           render={Render}\n *         />\n *       </Box>\n *       <div>Active route: {activeId}</div>\n *     </Box>\n *   );\n * }\n *\n * const navItems = {\n *   \"/\": {\n *     href: \"/\",\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Collapsible\",\n *   },\n *   \"/nested-route-1\": {\n *     itemId: \"/nested-route-1\",\n *     parentId: \"/route-1\",\n *     children: \"Child 1\",\n *   },\n *   \"/nested-route-2\": {\n *     itemId: \"/nested-route-2\",\n *     parentId: \"/route-2\",\n *     children: \"Child 2\",\n *   },\n *   \"/divider-1\": {\n *     itemId: \"/divider-1\",\n *     parentId: null,\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *   },\n * } satisfies TreeData;\n *\n * function Render(\n *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>\n * ): ReactElement {\n *   const {\n *     item,\n *     parents,\n *     // this is passed down from the root `RenderRecursively`\n *     data,\n *     // this _might_ be defined based on the implementation. it's set to any\n *     // renderable element\n *     children: _children,\n *   } = props;\n *   if (item.itemId.includes(\"divider\")) {\n *     return <Divider />;\n *   }\n *\n *   if (item.items) {\n *     return <NestedNavigation {...props} />;\n *   }\n *\n *   const prefix = parents.map((parent) => parent.itemId).join(\"/\");\n *   const currentId = `${prefix}${item.itemId}`;\n *   // I haven't figured out how to manage the type safety of this yet\n *   const active = data?.activeId === currentId;\n *   // this would normally be a link, but to keep the demo simple, it's a button\n *   return (\n *     <Button\n *       theme={active ? \"primary\" : \"clear\"}\n *       themeType={active ? \"contained\" : \"flat\"}\n *       onClick={() => {\n *         data?.setActiveId(currentId);\n *       }}\n *       style={{ justifyContent: \"flex-start\" }}\n *     >\n *       {item.children}\n *     </Button>\n *   );\n * }\n *\n * function NestedNavigation(\n *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>\n * ): ReactElement {\n *   const {\n *     item,\n *     parents: _parents,\n *     // this is passed down from the root `RenderRecursively`\n *     data: _data,\n *     children,\n *   } = props;\n *   const { toggle, toggled: collapsed } = useToggle(false);\n *   const { elementProps } = useCollapseTransition({\n *     transitionIn: !collapsed,\n *   });\n *\n *   return (\n *     <li>\n *       <Button onClick={toggle}>{item.children}</Button>\n *       <List {...elementProps}>{children}</List>\n *     </li>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function RenderRecursively<Item, Data>(\n  props: RenderRecursivelyProps<Item, Data>\n): ReactElement {\n  const {\n    data,\n    items,\n    render: Render,\n    getItemKey = getRecursiveItemKey,\n    parents = [],\n  } = props;\n\n  return (\n    <>\n      {items.map((item, index) => {\n        let children: ReactNode;\n        const depth = parents.length;\n        if (item.items?.length) {\n          children = (\n            <RenderRecursively\n              data={data}\n              items={item.items}\n              render={Render}\n              getItemKey={getItemKey}\n              parents={[...parents, item]}\n            />\n          );\n        }\n\n        return (\n          <Render\n            key={getItemKey({ item, depth, index })}\n            // typecast since it should be undefined in renderer as well?\n            data={data}\n            item={item}\n            parents={parents}\n          >\n            {children}\n          </Render>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["getRecursiveItemKey","options","depth","index","RenderRecursively","props","data","items","render","Render","getItemKey","parents","map","item","children","length"],"mappings":"AAAA,oDAAoD;;AAmBpD;;;;;;;;CAQC,GACD,OAAO,SAASA,oBACdC,OAAsC;IAEtC,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGF;IAEzB,OAAO,GAAGC,MAAM,CAAC,EAAEC,OAAO;AAC5B;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJC,GACD,OAAO,SAASC,kBACdC,KAAyC;IAEzC,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,QAAQC,MAAM,EACdC,aAAaV,mBAAmB,EAChCW,UAAU,EAAE,EACb,GAAGN;IAEJ,qBACE;kBACGE,MAAMK,GAAG,CAAC,CAACC,MAAMV;YAChB,IAAIW;YACJ,MAAMZ,QAAQS,QAAQI,MAAM;YAC5B,IAAIF,KAAKN,KAAK,EAAEQ,QAAQ;gBACtBD,yBACE,KAACV;oBACCE,MAAMA;oBACNC,OAAOM,KAAKN,KAAK;oBACjBC,QAAQC;oBACRC,YAAYA;oBACZC,SAAS;2BAAIA;wBAASE;qBAAK;;YAGjC;YAEA,qBACE,KAACJ;gBAEC,6DAA6D;gBAC7DH,MAAMA;gBACNO,MAAMA;gBACNF,SAASA;0BAERG;eANIJ,WAAW;gBAAEG;gBAAMX;gBAAOC;YAAM;QAS3C;;AAGN"}

package/dist/utils/alphaNumericSort.d.ts

@@ -1,4 +1,9 @@
 import { type TextExtractor } from "../types.js";
+/** @since 6.0.0 */
+export declare const DEFAULT_COLLATOR_OPTIONS: {
+    readonly numeric: true;
+    readonly caseFirst: "upper";
+};
 /**
  * The default `Intl.Collator` that should be used for sorting large lists.
  *

package/dist/utils/alphaNumericSort.js

@@ -1,13 +1,14 @@
 import { defaultExtractor } from "../searching/utils.js";
+/** @since 6.0.0 */ export const DEFAULT_COLLATOR_OPTIONS = {
+    numeric: true,
+    caseFirst: "upper"
+};
 /**
  * The default `Intl.Collator` that should be used for sorting large lists.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance
  * @since 6.0.0
- */ export const DEFAULT_COLLATOR = new Intl.Collator("en-US", {
-    numeric: true,
-    caseFirst: "upper"
-});
+ */ export const DEFAULT_COLLATOR = new Intl.Collator("en-US", DEFAULT_COLLATOR_OPTIONS);
 export function alphaNumericSort(list, options = {}) {
     const { compare = DEFAULT_COLLATOR.compare, extractor = defaultExtractor("alphaNumericSort"), descending = false } = options;
     const sorted = list.slice();

package/dist/utils/alphaNumericSort.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import { defaultExtractor } from \"../searching/utils.js\";\nimport { type TextExtractor } from \"../types.js\";\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\"en-US\", {\n  numeric: true,\n  caseFirst: \"upper\",\n});\n\n/** @since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example Simple Example\n   * ```ts\n   * interface Item {\n   *   name: string;\n   * }\n   *\n   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n   *\n   * alphaNumericSort(items, {\n   *   extractor: (item) => item.name,\n   * });\n   * ```\n   *\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?: (a: string, b: string) => number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends string>(\n  list: readonly T[],\n  options?: Omit<AlphaNumericSortOptions<T>, \"extractor\">\n): readonly T[];\n/**\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: \"World\" }, { name: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: (item) => item.name,\n * });\n * // sorted == [{ name: \"Hello\" }, { name: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = defaultExtractor(\"alphaNumericSort\"),\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["defaultExtractor","DEFAULT_COLLATOR","Intl","Collator","numeric","caseFirst","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,wBAAwB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAAC,SAAS;IACzDC,SAAS;IACTC,WAAW;AACb,GAAG;AAiGH,OAAO,SAASC,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUR,iBAAiBQ,OAAO,EAClCC,YAAYV,iBAAiB,mBAAmB,EAChDW,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import { defaultExtractor } from \"../searching/utils.js\";\nimport { type TextExtractor } from \"../types.js\";\n\n/** @since 6.0.0 */\nexport const DEFAULT_COLLATOR_OPTIONS = {\n  numeric: true,\n  caseFirst: \"upper\",\n} as const satisfies Intl.CollatorOptions;\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\n  \"en-US\",\n  DEFAULT_COLLATOR_OPTIONS\n);\n\n/** @since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example Simple Example\n   * ```ts\n   * interface Item {\n   *   name: string;\n   * }\n   *\n   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n   *\n   * alphaNumericSort(items, {\n   *   extractor: (item) => item.name,\n   * });\n   * ```\n   *\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?: (a: string, b: string) => number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends string>(\n  list: readonly T[],\n  options?: Omit<AlphaNumericSortOptions<T>, \"extractor\">\n): readonly T[];\n/**\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: \"World\" }, { name: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: (item) => item.name,\n * });\n * // sorted == [{ name: \"Hello\" }, { name: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = defaultExtractor(\"alphaNumericSort\"),\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["defaultExtractor","DEFAULT_COLLATOR_OPTIONS","numeric","caseFirst","DEFAULT_COLLATOR","Intl","Collator","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,wBAAwB;AAGzD,iBAAiB,GACjB,OAAO,MAAMC,2BAA2B;IACtCC,SAAS;IACTC,WAAW;AACb,EAA0C;AAE1C;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAC/C,SACAL,0BACA;AAiGF,OAAO,SAASM,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUN,iBAAiBM,OAAO,EAClCC,YAAYX,iBAAiB,mBAAmB,EAChDY,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}

package/dist/utils/bem.d.ts

@@ -1,13 +1,56 @@
-export type Block = string;
-export type Element = string;
-export type Modifier = Record<string, unknown>;
-export type BEMResult = (elementOrModifier?: Element | Modifier, modifier?: Modifier) => string;
+export type BEMModifier = Record<string, unknown>;
+/**
+ * Creates the full class name from the base block name. This can be called
+ * without any arguments which will just return the base block name (kind of
+ * worthless), or you can provide a child element name and modifiers.
+ *
+ * @since 6.0.0 Converted to an interface that supports the `base` attribute.
+ */
+export interface BEMResult {
+    /**
+     * @example Simple Example
+     * ```ts
+     * const styles = bem("root");
+     *
+     * styles("child"); // "root__child"
+     * styles("child", {
+     *   modifier1: true,
+     *   modifier2: false,
+     * }); // "root__child root__child--modifier-1"
+     * ```
+     * @param element - The child element to be prefixed before any modifiers.
+     * @param modifier - Any optional modifiers to apply to the block and optional
+     * element.
+     * @returns the full class name
+     */
+    (element: string, modifier?: BEMModifier): string;
+    /**
+     * @example Simple Example
+     * ```ts
+     * const styles = bem("root");
+     *
+     * styles() // "root"
+     * styles({
+     *   modifier1: true,
+     *   modifier2: false,
+     * }); // "root--modifier-1"
+     * ```
+     * @param modifier - Any optional modifiers to apply to the block and optional
+     * element.
+     * @returns the full class name
+     */
+    (modifier?: BEMModifier): string;
+    /**
+     * The base class name
+     */
+    base: string;
+}
 /**
  * Applies the BEM styled class name to an element.
  *
  * @example Simple Example
  * ```tsx
- * import { bem } from "@react-md/core":
+ * import { bem } from "@react-md/core/utils/bem":
  *
  * const styles = bem("my-component"):
  *
@@ -42,4 +85,4 @@ export type BEMResult = (elementOrModifier?: Element | Modifier, modifier?: Modi
  * @param base - The base class to use
  * @returns a function to call that generates the full class name
  */
-export declare function bem(base: Block): BEMResult;
+export declare function bem(base: string): BEMResult;

package/dist/utils/bem.js

@@ -15,7 +15,7 @@ function modify(base, modifier) {
  *
  * @example Simple Example
  * ```tsx
- * import { bem } from "@react-md/core":
+ * import { bem } from "@react-md/core/utils/bem":
  *
  * const styles = bem("my-component"):
  *
@@ -55,18 +55,7 @@ function modify(base, modifier) {
             throw new Error("bem requires a base block class but none were provided.");
         }
     }
-    /**
-   * Creates the full class name from the base block name. This can be called
-   * without any arguments which will just return the base block name (kind of
-   * worthless), or you can provide a child element name and modifiers.
-   *
-   * @param elementOrModifier - This is either the child element name or an
-   * object of modifiers to apply. This **must** be a string if the second
-   * argument is provided.
-   * @param modifier - Any optional modifiers to apply to the block and optional
-   * element.
-   * @returns the full class name
-   */ return function block(elementOrModifier, modifier) {
+    function block(elementOrModifier, modifier) {
         if (process.env.NODE_ENV !== "production") {
             if (typeof elementOrModifier !== "string" && modifier) {
                 throw new TypeError("bem does not support having two modifier arguments.");
@@ -79,7 +68,9 @@ function modify(base, modifier) {
             return modify(base, elementOrModifier);
         }
         return modify(`${base}__${elementOrModifier}`, modifier);
-    };
+    }
+    block.base = base;
+    return block;
 }
 
 //# sourceMappingURL=bem.js.map

package/dist/utils/bem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/bem.ts"],"sourcesContent":["export type Block = string;\nexport type Element = string;\nexport type Modifier = Record<string, unknown>;\n\nfunction modify(base: string, modifier?: Modifier): string {\n  if (!modifier) {\n    return base;\n  }\n\n  const hasOwn = Object.prototype.hasOwnProperty;\n  return Object.keys(modifier).reduce((s, mod) => {\n    if (hasOwn.call(modifier, mod) && modifier[mod]) {\n      s = `${s} ${base}--${mod}`;\n    }\n\n    return s;\n  }, base);\n}\n\nexport type BEMResult = (\n  elementOrModifier?: Element | Modifier,\n  modifier?: Modifier\n) => string;\n\n/**\n * Applies the BEM styled class name to an element.\n *\n * @example Simple Example\n * ```tsx\n * import { bem } from \"@react-md/core\":\n *\n * const styles = bem(\"my-component\"):\n *\n * export function MyComponent(props) {\n *   const className = styles({\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   }):\n *   const childClassName = styles('child', {\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   });\n *\n *   // With a false-like `props.something`\n *   // className === \"my-component__child my-component__child--always\"\n *   // childClassName === \"my-component my-component--always\"\n *   // With a truthy `props.something`\n *   // className === \"my-component my-component--always my-component--some-condition\"\n *   // childClassName === \"my-component__child my-component__child--always my-component__child--some-condition\"\n *\n *   return (\n *     <div className={className}>\n *       <div className={childClassName} />\n *     </div>\n *   ):\n * }\n * ```\n *\n * @see https://en.bem.info/methodology/css/\n * @param base - The base class to use\n * @returns a function to call that generates the full class name\n */\nexport function bem(base: Block): BEMResult {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!base) {\n      throw new Error(\n        \"bem requires a base block class but none were provided.\"\n      );\n    }\n  }\n\n  /**\n   * Creates the full class name from the base block name. This can be called\n   * without any arguments which will just return the base block name (kind of\n   * worthless), or you can provide a child element name and modifiers.\n   *\n   * @param elementOrModifier - This is either the child element name or an\n   * object of modifiers to apply. This **must** be a string if the second\n   * argument is provided.\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  return function block(\n    elementOrModifier?: Element | Modifier,\n    modifier?: Modifier\n  ): string {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (typeof elementOrModifier !== \"string\" && modifier) {\n        throw new TypeError(\n          \"bem does not support having two modifier arguments.\"\n        );\n      }\n    }\n\n    if (!elementOrModifier) {\n      return base;\n    }\n\n    if (typeof elementOrModifier !== \"string\") {\n      return modify(base, elementOrModifier);\n    }\n\n    return modify(`${base}__${elementOrModifier}`, modifier);\n  };\n}\n"],"names":["modify","base","modifier","hasOwn","Object","prototype","hasOwnProperty","keys","reduce","s","mod","call","bem","process","env","NODE_ENV","Error","block","elementOrModifier","TypeError"],"mappings":"AAIA,SAASA,OAAOC,IAAY,EAAEC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAOD;IACT;IAEA,MAAME,SAASC,OAAOC,SAAS,CAACC,cAAc;IAC9C,OAAOF,OAAOG,IAAI,CAACL,UAAUM,MAAM,CAAC,CAACC,GAAGC;QACtC,IAAIP,OAAOQ,IAAI,CAACT,UAAUQ,QAAQR,QAAQ,CAACQ,IAAI,EAAE;YAC/CD,IAAI,GAAGA,EAAE,CAAC,EAAER,KAAK,EAAE,EAAES,KAAK;QAC5B;QAEA,OAAOD;IACT,GAAGR;AACL;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASW,IAAIX,IAAW;IAC7B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACd,MAAM;YACT,MAAM,IAAIe,MACR;QAEJ;IACF;IAEA;;;;;;;;;;;GAWC,GACD,OAAO,SAASC,MACdC,iBAAsC,EACtChB,QAAmB;QAEnB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOG,sBAAsB,YAAYhB,UAAU;gBACrD,MAAM,IAAIiB,UACR;YAEJ;QACF;QAEA,IAAI,CAACD,mBAAmB;YACtB,OAAOjB;QACT;QAEA,IAAI,OAAOiB,sBAAsB,UAAU;YACzC,OAAOlB,OAAOC,MAAMiB;QACtB;QAEA,OAAOlB,OAAO,GAAGC,KAAK,EAAE,EAAEiB,mBAAmB,EAAEhB;IACjD;AACF"}
+{"version":3,"sources":["../../src/utils/bem.ts"],"sourcesContent":["export type BEMModifier = Record<string, unknown>;\n\nfunction modify(base: string, modifier?: BEMModifier): string {\n  if (!modifier) {\n    return base;\n  }\n\n  const hasOwn = Object.prototype.hasOwnProperty;\n  return Object.keys(modifier).reduce((s, mod) => {\n    if (hasOwn.call(modifier, mod) && modifier[mod]) {\n      s = `${s} ${base}--${mod}`;\n    }\n\n    return s;\n  }, base);\n}\n\n/**\n * Creates the full class name from the base block name. This can be called\n * without any arguments which will just return the base block name (kind of\n * worthless), or you can provide a child element name and modifiers.\n *\n * @since 6.0.0 Converted to an interface that supports the `base` attribute.\n */\nexport interface BEMResult {\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles(\"child\"); // \"root__child\"\n   * styles(\"child\", {\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root__child root__child--modifier-1\"\n   * ```\n   * @param element - The child element to be prefixed before any modifiers.\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (element: string, modifier?: BEMModifier): string;\n\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles() // \"root\"\n   * styles({\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root--modifier-1\"\n   * ```\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (modifier?: BEMModifier): string;\n\n  /**\n   * The base class name\n   */\n  base: string;\n}\n\n/**\n * Applies the BEM styled class name to an element.\n *\n * @example Simple Example\n * ```tsx\n * import { bem } from \"@react-md/core/utils/bem\":\n *\n * const styles = bem(\"my-component\"):\n *\n * export function MyComponent(props) {\n *   const className = styles({\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   }):\n *   const childClassName = styles('child', {\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   });\n *\n *   // With a false-like `props.something`\n *   // className === \"my-component__child my-component__child--always\"\n *   // childClassName === \"my-component my-component--always\"\n *   // With a truthy `props.something`\n *   // className === \"my-component my-component--always my-component--some-condition\"\n *   // childClassName === \"my-component__child my-component__child--always my-component__child--some-condition\"\n *\n *   return (\n *     <div className={className}>\n *       <div className={childClassName} />\n *     </div>\n *   ):\n * }\n * ```\n *\n * @see https://en.bem.info/methodology/css/\n * @param base - The base class to use\n * @returns a function to call that generates the full class name\n */\nexport function bem(base: string): BEMResult {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!base) {\n      throw new Error(\n        \"bem requires a base block class but none were provided.\"\n      );\n    }\n  }\n\n  function block(\n    elementOrModifier?: BEMModifier | string,\n    modifier?: BEMModifier\n  ): string {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (typeof elementOrModifier !== \"string\" && modifier) {\n        throw new TypeError(\n          \"bem does not support having two modifier arguments.\"\n        );\n      }\n    }\n\n    if (!elementOrModifier) {\n      return base;\n    }\n\n    if (typeof elementOrModifier !== \"string\") {\n      return modify(base, elementOrModifier);\n    }\n\n    return modify(`${base}__${elementOrModifier}`, modifier);\n  }\n  block.base = base;\n  return block;\n}\n"],"names":["modify","base","modifier","hasOwn","Object","prototype","hasOwnProperty","keys","reduce","s","mod","call","bem","process","env","NODE_ENV","Error","block","elementOrModifier","TypeError"],"mappings":"AAEA,SAASA,OAAOC,IAAY,EAAEC,QAAsB;IAClD,IAAI,CAACA,UAAU;QACb,OAAOD;IACT;IAEA,MAAME,SAASC,OAAOC,SAAS,CAACC,cAAc;IAC9C,OAAOF,OAAOG,IAAI,CAACL,UAAUM,MAAM,CAAC,CAACC,GAAGC;QACtC,IAAIP,OAAOQ,IAAI,CAACT,UAAUQ,QAAQR,QAAQ,CAACQ,IAAI,EAAE;YAC/CD,IAAI,GAAGA,EAAE,CAAC,EAAER,KAAK,EAAE,EAAES,KAAK;QAC5B;QAEA,OAAOD;IACT,GAAGR;AACL;AAmDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASW,IAAIX,IAAY;IAC9B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACd,MAAM;YACT,MAAM,IAAIe,MACR;QAEJ;IACF;IAEA,SAASC,MACPC,iBAAwC,EACxChB,QAAsB;QAEtB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOG,sBAAsB,YAAYhB,UAAU;gBACrD,MAAM,IAAIiB,UACR;YAEJ;QACF;QAEA,IAAI,CAACD,mBAAmB;YACtB,OAAOjB;QACT;QAEA,IAAI,OAAOiB,sBAAsB,UAAU;YACzC,OAAOlB,OAAOC,MAAMiB;QACtB;QAEA,OAAOlB,OAAO,GAAGC,KAAK,EAAE,EAAEiB,mBAAmB,EAAEhB;IACjD;IACAe,MAAMhB,IAAI,GAAGA;IACb,OAAOgB;AACT"}

package/dist/utils/getRangeDefaultValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getRangeDefaultValue.ts"],"sourcesContent":["import { type UseStateInitializer } from \"../types.js\";\nimport {\n  getMiddleOfRange,\n  type GetMiddleOfRangeOptions,\n} from \"./getMiddleOfRange.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface RangeDefaultValueOptions extends GetMiddleOfRangeOptions {\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function getRangeDefaultValue(\n  options: RangeDefaultValueOptions\n): UseStateInitializer<number> {\n  const { defaultValue } = options;\n  if (typeof defaultValue !== \"undefined\") {\n    return defaultValue;\n  }\n\n  return () => getMiddleOfRange(options);\n}\n"],"names":["getMiddleOfRange","getRangeDefaultValue","options","defaultValue"],"mappings":"AACA,SACEA,gBAAgB,QAEX,wBAAwB;AAU/B;;;CAGC,GACD,OAAO,SAASC,qBACdC,OAAiC;IAEjC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IACzB,IAAI,OAAOC,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,OAAO,IAAMH,iBAAiBE;AAChC"}
+{"version":3,"sources":["../../src/utils/getRangeDefaultValue.ts"],"sourcesContent":["import { type UseStateInitializer } from \"../types.js\";\nimport {\n  type GetMiddleOfRangeOptions,\n  getMiddleOfRange,\n} from \"./getMiddleOfRange.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface RangeDefaultValueOptions extends GetMiddleOfRangeOptions {\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function getRangeDefaultValue(\n  options: RangeDefaultValueOptions\n): UseStateInitializer<number> {\n  const { defaultValue } = options;\n  if (typeof defaultValue !== \"undefined\") {\n    return defaultValue;\n  }\n\n  return () => getMiddleOfRange(options);\n}\n"],"names":["getMiddleOfRange","getRangeDefaultValue","options","defaultValue"],"mappings":"AACA,SAEEA,gBAAgB,QACX,wBAAwB;AAU/B;;;CAGC,GACD,OAAO,SAASC,qBACdC,OAAiC;IAEjC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IACzB,IAAI,OAAOC,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,OAAO,IAAMH,iBAAiBE;AAChC"}

package/dist/utils/isElementVisible.d.ts

@@ -15,7 +15,7 @@ export declare const DISPLAY_NONE_CLASS = "rmd-display-none";
  * const subTreeItem = screen.getByRole("treeitem", { Name: "Sub Tree Item" });
  *
  * expect(isElementVisible(treeItem)).toBe(true);
- * expect(isElementVisible(subTreeItem)).toBe(false):
+ * expect(isElementVisible(subTreeItem)).toBe(false);
  *
  * await user.click(treeItem);
  * expect(isElementVisible(treeItem)).toBe(true);

package/dist/utils/isElementVisible.js

@@ -14,7 +14,7 @@
  * const subTreeItem = screen.getByRole("treeitem", { Name: "Sub Tree Item" });
  *
  * expect(isElementVisible(treeItem)).toBe(true);
- * expect(isElementVisible(subTreeItem)).toBe(false):
+ * expect(isElementVisible(subTreeItem)).toBe(false);
  *
  * await user.click(treeItem);
  * expect(isElementVisible(treeItem)).toBe(true);

package/dist/utils/isElementVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/isElementVisible.ts"],"sourcesContent":["/**\n * Note: requires the `$disable-display-none-class` variable to remain `false`.\n *\n * @since 6.0.0\n */\nexport const DISPLAY_NONE_CLASS = \"rmd-display-none\";\n\n/**\n * This is a small util to check if an element within react-md is visible by\n * checking the element and all parents to see if they contain the\n * {@link DISPLAY_NONE_CLASS}.\n *\n * @example Simple Example\n * ```tsx\n * const treeItem = screen.getByRole(\"treeitem\", { name: \"Tree Item\" });\n * const subTreeItem = screen.getByRole(\"treeitem\", { Name: \"Sub Tree Item\" });\n *\n * expect(isElementVisible(treeItem)).toBe(true);\n * expect(isElementVisible(subTreeItem)).toBe(false):\n *\n * await user.click(treeItem);\n * expect(isElementVisible(treeItem)).toBe(true);\n * expect(isElementVisible(subTreeItem)).toBe(true);\n * ```\n * @since 6.0.0\n */\nexport function isElementVisible(element: HTMLElement | null): boolean {\n  if (!element) {\n    return false;\n  }\n\n  let currentElement: HTMLElement | null = element;\n  while (currentElement) {\n    if (currentElement.classList.contains(DISPLAY_NONE_CLASS)) {\n      return false;\n    }\n\n    currentElement = currentElement.parentElement;\n  }\n\n  return true;\n}\n"],"names":["DISPLAY_NONE_CLASS","isElementVisible","element","currentElement","classList","contains","parentElement"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,MAAMA,qBAAqB,mBAAmB;AAErD;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,iBAAiBC,OAA2B;IAC1D,IAAI,CAACA,SAAS;QACZ,OAAO;IACT;IAEA,IAAIC,iBAAqCD;IACzC,MAAOC,eAAgB;QACrB,IAAIA,eAAeC,SAAS,CAACC,QAAQ,CAACL,qBAAqB;YACzD,OAAO;QACT;QAEAG,iBAAiBA,eAAeG,aAAa;IAC/C;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../../src/utils/isElementVisible.ts"],"sourcesContent":["/**\n * Note: requires the `$disable-display-none-class` variable to remain `false`.\n *\n * @since 6.0.0\n */\nexport const DISPLAY_NONE_CLASS = \"rmd-display-none\";\n\n/**\n * This is a small util to check if an element within react-md is visible by\n * checking the element and all parents to see if they contain the\n * {@link DISPLAY_NONE_CLASS}.\n *\n * @example Simple Example\n * ```tsx\n * const treeItem = screen.getByRole(\"treeitem\", { name: \"Tree Item\" });\n * const subTreeItem = screen.getByRole(\"treeitem\", { Name: \"Sub Tree Item\" });\n *\n * expect(isElementVisible(treeItem)).toBe(true);\n * expect(isElementVisible(subTreeItem)).toBe(false);\n *\n * await user.click(treeItem);\n * expect(isElementVisible(treeItem)).toBe(true);\n * expect(isElementVisible(subTreeItem)).toBe(true);\n * ```\n * @since 6.0.0\n */\nexport function isElementVisible(element: HTMLElement | null): boolean {\n  if (!element) {\n    return false;\n  }\n\n  let currentElement: HTMLElement | null = element;\n  while (currentElement) {\n    if (currentElement.classList.contains(DISPLAY_NONE_CLASS)) {\n      return false;\n    }\n\n    currentElement = currentElement.parentElement;\n  }\n\n  return true;\n}\n"],"names":["DISPLAY_NONE_CLASS","isElementVisible","element","currentElement","classList","contains","parentElement"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,MAAMA,qBAAqB,mBAAmB;AAErD;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,iBAAiBC,OAA2B;IAC1D,IAAI,CAACA,SAAS;QACZ,OAAO;IACT;IAEA,IAAIC,iBAAqCD;IACzC,MAAOC,eAAgB;QACrB,IAAIA,eAAeC,SAAS,CAACC,QAAQ,CAACL,qBAAqB;YACzD,OAAO;QACT;QAEAG,iBAAiBA,eAAeG,aAAa;IAC/C;IAEA,OAAO;AACT"}

package/dist/utils/loop.d.ts

@@ -25,6 +25,8 @@ export interface LoopOptions {
      * Boolean if the looping should be ignored and only the `min`/`max` options
      * should be respected. In other words, the looping  behavior will be disabled
      * and the `value` must be: `min >= value <= max`
+     *
+     * @defaultValue `false`
      */
     minmax?: boolean;
 }

package/dist/utils/loop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/loop.ts"],"sourcesContent":["/**\n * @since 2.7.0\n * @internal\n */\nexport interface LoopOptions {\n  /**\n   * The current value that should be modified.\n   */\n  value: number;\n\n  /**\n   * An optional `min` value that can be used before looping to the `max` value.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max number that can be used before looping to the `min` value.\n   */\n  max: number;\n\n  /**\n   * Boolean if the `value` should be incremented or decremented by `1`.\n   */\n  increment: boolean;\n\n  /**\n   * Boolean if the looping should be ignored and only the `min`/`max` options\n   * should be respected. In other words, the looping  behavior will be disabled\n   * and the `value` must be: `min >= value <= max`\n   */\n  minmax?: boolean;\n}\n\n/**\n * A small util that is used to increment or decrement a number until it reaches\n * the max value or -1. When that happens, it will loop around to 0 or the max\n * value respectively. This does not work for different increment numbers or any\n * values below 0 for now.\n *\n * @internal\n * @param options - {@link LoopOptions}\n * @since 2.7.0 The `min` option was added and the arguments changed to an\n * object\n */\nexport function loop(options: LoopOptions): number {\n  const { value, min = 0, max, increment, minmax = false } = options;\n  let next = value + (increment ? 1 : -1);\n  if (minmax) {\n    next = Math.min(max, Math.max(min, next));\n  } else if (next > max) {\n    next = min;\n  } else if (next < min) {\n    next = max;\n  }\n\n  return next;\n}\n"],"names":["loop","options","value","min","max","increment","minmax","next","Math"],"mappings":"AAAA;;;CAGC,GAgCD;;;;;;;;;;CAUC,GACD,OAAO,SAASA,KAAKC,OAAoB;IACvC,MAAM,EAAEC,KAAK,EAAEC,MAAM,CAAC,EAAEC,GAAG,EAAEC,SAAS,EAAEC,SAAS,KAAK,EAAE,GAAGL;IAC3D,IAAIM,OAAOL,QAASG,CAAAA,YAAY,IAAI,CAAC,CAAA;IACrC,IAAIC,QAAQ;QACVC,OAAOC,KAAKL,GAAG,CAACC,KAAKI,KAAKJ,GAAG,CAACD,KAAKI;IACrC,OAAO,IAAIA,OAAOH,KAAK;QACrBG,OAAOJ;IACT,OAAO,IAAII,OAAOJ,KAAK;QACrBI,OAAOH;IACT;IAEA,OAAOG;AACT"}
+{"version":3,"sources":["../../src/utils/loop.ts"],"sourcesContent":["/**\n * @since 2.7.0\n * @internal\n */\nexport interface LoopOptions {\n  /**\n   * The current value that should be modified.\n   */\n  value: number;\n\n  /**\n   * An optional `min` value that can be used before looping to the `max` value.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max number that can be used before looping to the `min` value.\n   */\n  max: number;\n\n  /**\n   * Boolean if the `value` should be incremented or decremented by `1`.\n   */\n  increment: boolean;\n\n  /**\n   * Boolean if the looping should be ignored and only the `min`/`max` options\n   * should be respected. In other words, the looping  behavior will be disabled\n   * and the `value` must be: `min >= value <= max`\n   *\n   * @defaultValue `false`\n   */\n  minmax?: boolean;\n}\n\n/**\n * A small util that is used to increment or decrement a number until it reaches\n * the max value or -1. When that happens, it will loop around to 0 or the max\n * value respectively. This does not work for different increment numbers or any\n * values below 0 for now.\n *\n * @internal\n * @param options - {@link LoopOptions}\n * @since 2.7.0 The `min` option was added and the arguments changed to an\n * object\n */\nexport function loop(options: LoopOptions): number {\n  const { value, min = 0, max, increment, minmax = false } = options;\n  let next = value + (increment ? 1 : -1);\n  if (minmax) {\n    next = Math.min(max, Math.max(min, next));\n  } else if (next > max) {\n    next = min;\n  } else if (next < min) {\n    next = max;\n  }\n\n  return next;\n}\n"],"names":["loop","options","value","min","max","increment","minmax","next","Math"],"mappings":"AAAA;;;CAGC,GAkCD;;;;;;;;;;CAUC,GACD,OAAO,SAASA,KAAKC,OAAoB;IACvC,MAAM,EAAEC,KAAK,EAAEC,MAAM,CAAC,EAAEC,GAAG,EAAEC,SAAS,EAAEC,SAAS,KAAK,EAAE,GAAGL;IAC3D,IAAIM,OAAOL,QAASG,CAAAA,YAAY,IAAI,CAAC,CAAA;IACrC,IAAIC,QAAQ;QACVC,OAAOC,KAAKL,GAAG,CAACC,KAAKI,KAAKJ,GAAG,CAACD,KAAKI;IACrC,OAAO,IAAIA,OAAOH,KAAK;QACrBG,OAAOJ;IACT,OAAO,IAAII,OAAOJ,KAAK;QACrBI,OAAOH;IACT;IAEA,OAAOG;AACT"}

package/dist/utils/parseCssLengthUnit.d.ts

@@ -1,7 +1,7 @@
 /** @internal */
 export interface ParseCssLengthUnitOptions {
     /**
-     *
+     * The css unit to convert to a numeric value.
      */
     value: number | string;
     /**

package/dist/utils/parseCssLengthUnit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/parseCssLengthUnit.ts"],"sourcesContent":["/** @internal */\nexport interface ParseCssLengthUnitOptions {\n  /**\n   *\n   */\n  value: number | string;\n\n  /**\n   * @defaultValue `16`\n   */\n  fallbackFontSize?: number;\n\n  /**\n   * @defaultValue `document.documentElement`\n   */\n  container?: Element | null;\n}\n\n/**\n * This is used to convert CSS length units into a number. At this time, it really only supports\n * - `px`\n * - `rem`\n * - `em` (if {@link ParseCssLengthUnitOptions.container} is provided)\n *\n * @example Simple Example\n * ```ts\n * parseCssLengthUnit({ value: \"24px\" }) // 24\n * parseCssLengthUnit({ value: \"3.5rem\" }) // 56\n * parseCssLengthUnit({\n *   value: \"3em\",\n *   container: document.querySelector(SOME_QUERY),\n * }); // container's computed fontSize * 3\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths}\n * @internal\n * @since 6.0.0 This was renamed from `unitToNumber`\n */\nexport function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {\n  const { value, container, fallbackFontSize = 16 } = options;\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  const parsed = parseFloat(value);\n  if (/px$/i.test(value)) {\n    return parsed;\n  }\n\n  if (typeof window === \"undefined\") {\n    return parsed * fallbackFontSize;\n  }\n\n  const styleContainer =\n    !container || /rem$/i.test(value) ? document.documentElement : container;\n\n  const fontSize = parseFloat(\n    window.getComputedStyle(styleContainer).fontSize || `${fallbackFontSize}px`\n  );\n\n  return parsed * fontSize;\n}\n"],"names":["parseCssLengthUnit","options","value","container","fallbackFontSize","parsed","parseFloat","test","window","styleContainer","document","documentElement","fontSize","getComputedStyle"],"mappings":"AAAA,cAAc,GAkBd;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,mBAAmB,EAAE,EAAE,GAAGH;IAEpD,IAAI,OAAOC,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,MAAMG,SAASC,WAAWJ;IAC1B,IAAI,OAAOK,IAAI,CAACL,QAAQ;QACtB,OAAOG;IACT;IAEA,IAAI,OAAOG,WAAW,aAAa;QACjC,OAAOH,SAASD;IAClB;IAEA,MAAMK,iBACJ,CAACN,aAAa,QAAQI,IAAI,CAACL,SAASQ,SAASC,eAAe,GAAGR;IAEjE,MAAMS,WAAWN,WACfE,OAAOK,gBAAgB,CAACJ,gBAAgBG,QAAQ,IAAI,GAAGR,iBAAiB,EAAE,CAAC;IAG7E,OAAOC,SAASO;AAClB"}
+{"version":3,"sources":["../../src/utils/parseCssLengthUnit.ts"],"sourcesContent":["/** @internal */\nexport interface ParseCssLengthUnitOptions {\n  /**\n   * The css unit to convert to a numeric value.\n   */\n  value: number | string;\n\n  /**\n   * @defaultValue `16`\n   */\n  fallbackFontSize?: number;\n\n  /**\n   * @defaultValue `document.documentElement`\n   */\n  container?: Element | null;\n}\n\n/**\n * This is used to convert CSS length units into a number. At this time, it really only supports\n * - `px`\n * - `rem`\n * - `em` (if {@link ParseCssLengthUnitOptions.container} is provided)\n *\n * @example Simple Example\n * ```ts\n * parseCssLengthUnit({ value: \"24px\" }) // 24\n * parseCssLengthUnit({ value: \"3.5rem\" }) // 56\n * parseCssLengthUnit({\n *   value: \"3em\",\n *   container: document.querySelector(SOME_QUERY),\n * }); // container's computed fontSize * 3\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths}\n * @internal\n * @since 6.0.0 This was renamed from `unitToNumber`\n */\nexport function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {\n  const { value, container, fallbackFontSize = 16 } = options;\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  const parsed = parseFloat(value);\n  if (/px$/i.test(value)) {\n    return parsed;\n  }\n\n  if (typeof window === \"undefined\") {\n    return parsed * fallbackFontSize;\n  }\n\n  const styleContainer =\n    !container || /rem$/i.test(value) ? document.documentElement : container;\n\n  const fontSize = parseFloat(\n    window.getComputedStyle(styleContainer).fontSize || `${fallbackFontSize}px`\n  );\n\n  return parsed * fontSize;\n}\n"],"names":["parseCssLengthUnit","options","value","container","fallbackFontSize","parsed","parseFloat","test","window","styleContainer","document","documentElement","fontSize","getComputedStyle"],"mappings":"AAAA,cAAc,GAkBd;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,mBAAmB,EAAE,EAAE,GAAGH;IAEpD,IAAI,OAAOC,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,MAAMG,SAASC,WAAWJ;IAC1B,IAAI,OAAOK,IAAI,CAACL,QAAQ;QACtB,OAAOG;IACT;IAEA,IAAI,OAAOG,WAAW,aAAa;QACjC,OAAOH,SAASD;IAClB;IAEA,MAAMK,iBACJ,CAACN,aAAa,QAAQI,IAAI,CAACL,SAASQ,SAASC,eAAe,GAAGR;IAEjE,MAAMS,WAAWN,WACfE,OAAOK,gBAAgB,CAACJ,gBAAgBG,QAAQ,IAAI,GAAGR,iBAAiB,EAAE,CAAC;IAG7E,OAAOC,SAASO;AAClB"}