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

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 * \"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"}
+{"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 * @see {@link https://next.react-md.dev/components/render-recursively | RenderRecursively Demos}\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJC,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/applyRef.d.ts

@@ -6,7 +6,7 @@ import type { Ref } from "react";
  * @example Simple Example
  * ```tsx
  * import { HTMLAttributes, forwardRef } from "react";
- * import { applyRef } from "@react-md/core";
+ * import { applyRef } from "@react-md/core/utils/applyRef";
  *
  * export type ExampleProps = HTMLAttributes<HTMLDivElement>;
  *

package/dist/utils/applyRef.js

@@ -5,7 +5,7 @@
  * @example Simple Example
  * ```tsx
  * import { HTMLAttributes, forwardRef } from "react";
- * import { applyRef } from "@react-md/core";
+ * import { applyRef } from "@react-md/core/utils/applyRef";
  *
  * export type ExampleProps = HTMLAttributes<HTMLDivElement>;
  *

package/dist/utils/applyRef.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/applyRef.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\n/**\n * A small utility function that allows me to apply a passed in ref along with\n * my own custom ref logic.\n *\n * @example Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { applyRef } from \"@react-md/core\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const refHandler = useCallback((instance: HTMLDivElement | null) => {\n *     applyRef(instance, ref);\n *     if (!instance) {\n *       return;\n *     }\n *\n *     // do something with instance\n *   });\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @param instance - The DOM Node instance\n * @param ref - The prop ref\n * @internal\n */\nexport function applyRef<E>(instance: E | null, ref: Ref<E> | undefined): void {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === \"function\") {\n    ref(instance);\n  } else if (typeof ref === \"object\") {\n    (ref as MutableRefObject<E | null>).current = instance;\n  }\n}\n"],"names":["applyRef","instance","ref","current"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASA,SAAYC,QAAkB,EAAEC,GAAuB;IACrE,IAAI,CAACA,KAAK;QACR;IACF;IAEA,IAAI,OAAOA,QAAQ,YAAY;QAC7BA,IAAID;IACN,OAAO,IAAI,OAAOC,QAAQ,UAAU;QACjCA,IAAmCC,OAAO,GAAGF;IAChD;AACF"}
+{"version":3,"sources":["../../src/utils/applyRef.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\n/**\n * A small utility function that allows me to apply a passed in ref along with\n * my own custom ref logic.\n *\n * @example Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { applyRef } from \"@react-md/core/utils/applyRef\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const refHandler = useCallback((instance: HTMLDivElement | null) => {\n *     applyRef(instance, ref);\n *     if (!instance) {\n *       return;\n *     }\n *\n *     // do something with instance\n *   });\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @param instance - The DOM Node instance\n * @param ref - The prop ref\n * @internal\n */\nexport function applyRef<E>(instance: E | null, ref: Ref<E> | undefined): void {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === \"function\") {\n    ref(instance);\n  } else if (typeof ref === \"object\") {\n    (ref as MutableRefObject<E | null>).current = instance;\n  }\n}\n"],"names":["applyRef","instance","ref","current"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASA,SAAYC,QAAkB,EAAEC,GAAuB;IACrE,IAAI,CAACA,KAAK;QACR;IACF;IAEA,IAAI,OAAOA,QAAQ,YAAY;QAC7BA,IAAID;IACN,OAAO,IAAI,OAAOC,QAAQ,UAAU;QACjCA,IAAmCC,OAAO,GAAGF;IAChD;AACF"}

package/dist/window-splitter/WindowSplitter.d.ts

@@ -1,5 +1,15 @@
 import { type ButtonHTMLAttributes } from "react";
 import { type LabelRequiredForA11y } from "../types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-window-splitter-top"?: number | string;
+        "--rmd-window-splitter-right"?: number | string;
+        "--rmd-window-splitter-bottom"?: number | string;
+        "--rmd-window-splitter-left"?: number | string;
+        "--rmd-window-splitter-opacity"?: number | string;
+        "--rmd-window-splitter-position"?: number | string;
+    }
+}
 /**
  * @since 6.0.0
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}
@@ -70,6 +80,7 @@ export type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/window-splitter | WindowSplitter Demos}
  * @since 6.0.0
  */
 export declare const WindowSplitter: import("react").ForwardRefExoticComponent<WindowSplitterProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/window-splitter/WindowSplitter.js

@@ -42,6 +42,7 @@ import { windowSplitter } from "./styles.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/window-splitter | WindowSplitter Demos}
  * @since 6.0.0
  */ export const WindowSplitter = /*#__PURE__*/ forwardRef(function WindowSplitter(props, ref) {
     const { role = "separator", className, dragging, reversed, disableFixed = false, ...remaining } = props;

package/dist/window-splitter/WindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { windowSplitter } from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n */\nexport interface BaseWindowSplitterProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  \"aria-controls\": string;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  dragging: boolean;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  reversed: boolean;\n\n  /**\n   * Set this to `true` if the window splitter should use `position: absolute`\n   * instead of `position: fixed`.\n   *\n   * @defaultValue `false`\n   */\n  disableFixed?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const WindowSplitter = forwardRef<\n  HTMLButtonElement,\n  WindowSplitterProps\n>(function WindowSplitter(props, ref) {\n  const {\n    role = \"separator\",\n    className,\n    dragging,\n    reversed,\n    disableFixed = false,\n    ...remaining\n  } = props;\n  const vertical = props[\"aria-orientation\"] === \"vertical\";\n\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      role={role}\n      className={windowSplitter({\n        className,\n        reversed,\n        dragging,\n        vertical,\n        disableFixed,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","remaining","vertical","button","type"],"mappings":";AAAA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAASC,cAAc,QAAQ,cAAc;AAuC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,KAAK,EACpB,GAAGC,WACJ,GAAGP;IACJ,MAAMQ,WAAWR,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACS;QACE,GAAGF,SAAS;QACbN,KAAKA;QACLS,MAAK;QACLR,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAI;YACAF;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { windowSplitter } from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\n\n/**\n * @since 6.0.0\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n */\nexport interface BaseWindowSplitterProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  \"aria-controls\": string;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  dragging: boolean;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  reversed: boolean;\n\n  /**\n   * Set this to `true` if the window splitter should use `position: absolute`\n   * instead of `position: fixed`.\n   *\n   * @defaultValue `false`\n   */\n  disableFixed?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/window-splitter | WindowSplitter Demos}\n * @since 6.0.0\n */\nexport const WindowSplitter = forwardRef<\n  HTMLButtonElement,\n  WindowSplitterProps\n>(function WindowSplitter(props, ref) {\n  const {\n    role = \"separator\",\n    className,\n    dragging,\n    reversed,\n    disableFixed = false,\n    ...remaining\n  } = props;\n  const vertical = props[\"aria-orientation\"] === \"vertical\";\n\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      role={role}\n      className={windowSplitter({\n        className,\n        reversed,\n        dragging,\n        vertical,\n        disableFixed,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","remaining","vertical","button","type"],"mappings":";AAAA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAASC,cAAc,QAAQ,cAAc;AAkD7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,KAAK,EACpB,GAAGC,WACJ,GAAGP;IACJ,MAAMQ,WAAWR,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACS;QACE,GAAGF,SAAS;QACbN,KAAKA;QACLS,MAAK;QACLR,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAI;YACAF;QACF;;AAGN,GAAG"}

package/dist/window-splitter/_window-splitter.scss

@@ -1,21 +1,56 @@
+////
+/// @group window-splitter
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../interaction/interaction";
 @use "../transition/transition";
 
+/// Set to `true` to disable generating any styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the horizontal `WindowSplitter` styles.
+/// @type Boolean
 $disable-horizontal: false !default;
+
+/// Set to `true` to disable the vertical `WindowSplitter` styles.
+/// @type Boolean
 $disable-vertical: false !default;
+
+/// Set to `true` to disable the reversed `WindowSplitter` styles.
+/// @type Boolean
 $disable-reversed: false !default;
+
+/// Set to `true` to disable the `position: absolute` styles
+/// @type Boolean
 $disable-absolute-position: false !default;
 
+/// The default `WindowSplitter` draggable area.
+/// @type Number
 $size: 1rem !default;
+
+/// The default `WindowSplitter` visible size (`background-color`).
+/// @type Number
 $background-size: 0.25rem !default;
+
+/// The default `background-color` for the `WindowSplitter`.
+/// @type Color
 $background-color: interaction.get-var(focus-color) !default;
+
+/// The default `z-index` for the `WindowSplitter`.
+/// @type Number
 $z-index: 30 !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (top, right, bottom, left, opacity, position);
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "window-splitter");
   // window-splitter variables don't make much sense to set globally
@@ -27,16 +62,27 @@ $variables: (top, right, bottom, left, opacity, position);
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "window-splitter")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(window-splitter, $disable-layer) {

package/dist/window-splitter/useWindowSplitter.d.ts

@@ -1,15 +1,5 @@
 import { type Ref, type RefCallback } from "react";
 import { type BaseDraggableOptions, type DraggableImplementation, type DraggableKeyboardEventHandlers, type DraggableMouseEventHandlers, type DraggableStateOptions, type DraggableTouchEventHandlers } from "../draggable/useDraggable.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-window-splitter-top"?: number | string;
-        "--rmd-window-splitter-right"?: number | string;
-        "--rmd-window-splitter-bottom"?: number | string;
-        "--rmd-window-splitter-left"?: number | string;
-        "--rmd-window-splitter-opacity"?: number | string;
-        "--rmd-window-splitter-position"?: number | string;
-    }
-}
 /**
  * @since 6.0.0
  */

package/dist/window-splitter/useWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback } from \"react\";\n\nimport {\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n  useDraggable,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<E extends HTMLElement>\n  extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * Used to control the state for the `WindowSplitter` component.\n *\n * @example Custom Implementation\n * ```tsx\n * import {\n *   useWindowSplitter,\n *   type WindowSplitterImplementation\n * } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const { id: propId, reversed = false, vertical } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    dragging,\n    percentage,\n    draggableRef,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","useWindowSplitter","options","id","propId","reversed","vertical","draggableImplementation","dragging","percentage","draggableRef","mouseEventHandlers","keyboardEventHandlers","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAIA,SAOEA,YAAY,QACP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAiElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAMC,KAAKH,aAAaI,QAAQ;IAChC,MAAMG,0BAA0BR,aAAaG;IAC7C,MAAM,EACJM,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAO;QACL,GAAGA,uBAAuB;QAC1BM,eAAe;YACb,oBAAoBP,WAAW,aAAaQ;YAC5C,iBAAiBC,KAAKC,IAAI,CAACP,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBN;YACAc,KAAKP;YACLQ,MAAM;YACNV;YACAH;YACA,GAAGM,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}
+{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback } from \"react\";\n\nimport {\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n  useDraggable,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<E extends HTMLElement>\n  extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * Used to control the state for the `WindowSplitter` component.\n *\n * @example Custom Implementation\n * ```tsx\n * import {\n *   useWindowSplitter,\n *   type WindowSplitterImplementation\n * } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const { id: propId, reversed = false, vertical } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    dragging,\n    percentage,\n    draggableRef,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","useWindowSplitter","options","id","propId","reversed","vertical","draggableImplementation","dragging","percentage","draggableRef","mouseEventHandlers","keyboardEventHandlers","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAIA,SAOEA,YAAY,QACP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAsDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAMC,KAAKH,aAAaI,QAAQ;IAChC,MAAMG,0BAA0BR,aAAaG;IAC7C,MAAM,EACJM,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAO;QACL,GAAGA,uBAAuB;QAC1BM,eAAe;YACb,oBAAoBP,WAAW,aAAaQ;YAC5C,iBAAiBC,KAAKC,IAAI,CAACP,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBN;YACAc,KAAKP;YACLQ,MAAM;YACNV;YACAH;YACA,GAAGM,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.20",
+  "version": "1.0.0-next.21",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
   "exports": {
+    "./a11y": {
+      "sass": "./dist/_a11y.scss"
+    },
     ".": {
       "sass": "./dist/_core.scss"
     },
@@ -23,6 +26,27 @@
       "sass": "./dist/_colors.scss",
       "default": "./dist/theme/colors.js"
     },
+    "./autocomplete/AutocompleteListboxChildren": null,
+    "./autocomplete/utils": null,
+    "./draggable/utils": null,
+    "./error-boundary/context": null,
+    "./form/InputToggleIcon": null,
+    "./form/ResizingTextAreaWrapper": null,
+    "./form/SliderTrack": null,
+    "./form/selectUtils": null,
+    "./form/sliderUtils": null,
+    "./form/useResizingTextArea": null,
+    "./form/useSliderDraggable": null,
+    "./interaction/utils": null,
+    "./menu/MenuWidgetKeyboardProvider": null,
+    "./menu/utils": null,
+    "./positioning/createHorizontalPosition": null,
+    "./positioning/createVerticalPosition": null,
+    "./storage/internalUtils": null,
+    "./tabs/useTabList": null,
+    "./tooltip/useTooltipPosition": null,
+    "./transition/utils": null,
+    "./tree/useTreeMovement": null,
     "./*": "./dist/*.js",
     "./package.json": "./package.json"
   },
@@ -51,27 +75,28 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.9"
+    "nanoid": "^5.1.5",
+    "remove-accents": "^0.5.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@microsoft/api-extractor": "^7.49.2",
-    "@mlaursen/eslint-config": "^6.0.0",
+    "@microsoft/api-extractor": "^7.52.2",
+    "@mlaursen/eslint-config": "^7.0.0",
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.10.15",
+    "@swc/core": "^1.11.16",
     "@swc/jest": "^0.2.37",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/lodash": "^4.17.15",
-    "@types/node": "^22.13.1",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.14.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "chokidar": "^4.0.3",
-    "eslint": "^9.20.0",
+    "eslint": "^9.23.0",
     "filesize": "^10.1.6",
     "glob": "11.0.1",
     "jest": "^29.7.0",
@@ -80,19 +105,19 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.3",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.5.0",
-    "stylelint": "^16.14.1",
+    "prettier": "^3.5.3",
+    "stylelint": "^16.17.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.11.0",
+    "stylelint-scss": "^6.11.1",
     "ts-morph": "^25.0.1",
     "ts-node": "^10.9.2",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.5"
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2",
+    "vitest": "^3.1.1"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",
@@ -139,11 +164,12 @@
   },
   "volta": {
     "node": "22.13.1",
-    "pnpm": "10.2.1"
+    "pnpm": "10.7.1"
   },
   "scripts": {
     "run-script": "tsx --tsconfig scripts/tsconfig.json",
     "export-map": "pnpm run run-script scripts/getExportMap.ts",
+    "create-index-file": "pnpm run run-script scripts/createIndexFile.ts",
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
     "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",

package/src/CoreProviders.tsx

@@ -87,6 +87,7 @@ export interface CoreProvidersProps extends ReactMDCoreConfiguration {
  * - {@link Snackbar} - This isn't a provider but this is how you can display
  *   alerts in your app
  *
+ * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}
  * @since 6.0.0
  */
 export function CoreProviders(props: CoreProvidersProps): ReactElement {

package/src/NoSsr.tsx

@@ -17,7 +17,9 @@ export interface NoSsrProps {
  *
  * @example Simple Example
  * ```tsx
- * import { CoreProviders, NoSsr, Typography } from "@react-md/core";
+ * import { NoSsr } from "@react-md/core/NoSsr";
+ * import { CoreProviders } from "@react-md/core/CoreProviders"
+ * import { Typography } from "@react-md/core/typography/Typography"
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {

package/src/RootHtml.tsx

@@ -51,7 +51,7 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
  * @example Simple Example
  * ```tsx
  * // src/app/layout.tsx
- * import { RootHtml } from "@react-md/core";
+ * import { RootHtml } from "@react-md/core/RootHtml";
  * import { type ReactElement, type PropsWithChildren } from "react";
  * import { Roboto_Flex } from "next/font/google";
  *

package/src/SsrProvider.tsx

@@ -31,6 +31,7 @@ export interface SsrProviderProps {
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/ssr-provider | SsrProvider Demos}
  * @since 6.0.0
  */
 export function SsrProvider(props: SsrProviderProps): ReactElement {

package/src/app-bar/AppBar.tsx

@@ -36,7 +36,9 @@ export interface AppBarProps
 /**
  * @example Simple Example
  * ```tsx
- * import { AppBar, AppBarTitle, Button } from "@react-md/core";
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
+ * import { Button } from "@react-md/core/button/Button";
  * import MenuIcon from "@react-md/material-icons/MenuIcon";
  * import MoreVertIcon from "@react-md/material-icons/MoreVertIcon";
  * import type { ReactElement } from "react";

package/src/app-bar/AppBarTitle.tsx

@@ -27,7 +27,8 @@ export interface AppBarTitleProps
 /**
  * @example Updating the Keyline
  * ```tsx
- * import { AppBar, AppBarTitle } from "@react-md/core";
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {

package/src/autocomplete/Autocomplete.tsx

@@ -29,22 +29,102 @@ import { useAutocomplete } from "./useAutocomplete.js";
 const noop = (): undefined => undefined;
 
 /**
- * This is the single select autocomplete implementation.
+ * An `Autocomplete` is a component that allows for real-time suggestions from
+ * a pre-determined list as the user types by filtering data based on the
+ * current value. It can also be used to interact with an API that handles the
+ * sorting, filtering, matching, etc as well.
  *
+ * An `Autocomplete` always requires the following props:
+ *
+ * - `options` - a list of available options that can be a list of strings,
+ *   a list of objects with a `{ label: string }`, or any list of objects
+ *   - if the list of objects do not have a `label`, the
+ *     {@link AutocompleteProps.getOptionLabel} **must** be provided to allow
+ *     filtering
+ * - `label` or `aria-label` to describe the textbox for accessibility
+ * - `listboxLabel` or `listboxLabelledBy` for an accessible label describing the options
+ *
+ * @example Simple Example
+ * ```tsx
+ * "use client";
+ *
+ * import { Autocomplete } from "@react-md/core/autocomplete/Autocomplete";
+ * import { type ReactElement } from "react";
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   return (
+ *     <Autocomplete
+ *       label="Fruit"
+ *       placeholder="Apple"
+ *       listboxLabel="Fruits"
+ *       options={[
+ *         "Apple",
+ *         "Apricot",
+ *         "Banana",
+ *         "Blueberry",
+ *         "Cranberry",
+ *         "Kiwi",
+ *         "Mango",
+ *         "Orange",
+ *         "Peach",
+ *         "Plum",
+ *         "Strawberry",
+ *       ]}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export function Autocomplete<Option extends AutocompleteOption>(
   props: AutocompleteSingleSelectProps<Option>
 ): ReactElement;
 /**
- * This is the multiselect autocomplete implementation.
+ * To create an `Autocomplete` that can have multiple values selected at once,
+ * either provide an array `value` or `defaultValue`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * "use client";
+ *
+ * import { Autocomplete } from "@react-md/core/autocomplete/Autocomplete";
+ * import { type ReactElement, useState } from "react";
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   const [value, setValue] = useState<readonly Dessert[]>([]);
+ *   return (
+ *     <Autocomplete
+ *       label="Fruit"
+ *       placeholder="Apple"
+ *       listboxLabel="Fruits"
+ *       options={[
+ *         "Apple",
+ *         "Apricot",
+ *         "Banana",
+ *         "Blueberry",
+ *         "Cranberry",
+ *         "Kiwi",
+ *         "Mango",
+ *         "Orange",
+ *         "Peach",
+ *         "Plum",
+ *         "Strawberry",
+ *       ]}
+ *     />
+ *   );
+ * }
+ * ```
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export function Autocomplete<Option extends AutocompleteOption>(
   props: AutocompleteMultiSelectProps<Option>
 ): ReactElement;
 /**
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  * @internal
  */
@@ -92,6 +172,7 @@ export function Autocomplete<Option extends AutocompleteOption>(
     disableDropdownButton,
     clearButtonProps,
     disableClearButton,
+    clearButtonVisibility = "query",
     noOptionsChildren = <ListSubheader>No Options</ListSubheader>,
     leftAddon: propLeftAddon,
     disableLeftAddonStyles: propDisableLeftAddonStyles,
@@ -235,9 +316,10 @@ export function Autocomplete<Option extends AutocompleteOption>(
           <>
             {rightAddon}
             {loading && <AutocompleteCircularProgress {...loadingProps} />}
-            {!disableClearButton && !!currentQuery && (
+            {!disableClearButton && (
               <AutocompleteClearButton
                 {...clearButtonProps}
+                visibility={clearButtonVisibility}
                 {...getClearButtonProps(clearButtonProps)}
               />
             )}

package/src/autocomplete/AutocompleteChip.tsx

@@ -9,6 +9,7 @@ import { type AutocompleteChipProps } from "./types.js";
  * A small wrapper around the `Chip` that defaults the `rightAddon` to the
  * remove icon and adds a default `aria-description`.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export const AutocompleteChip = forwardRef<

package/src/autocomplete/AutocompleteCircularProgress.tsx

@@ -7,6 +7,7 @@ import { type AutocompleteCircularProgressProps } from "./types.js";
  * An internal component used to handle the styling and minimal accessibility
  * for the `CircularProgress` within the `Autocomplete`
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @internal
  * @since 6.0.0
  */

package/src/autocomplete/AutocompleteClearButton.tsx

@@ -11,6 +11,7 @@ import { type AutocompleteClearButtonProps } from "./types.js";
 /**
  * An internal component used for to clear the value from the `Autocomplete`.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @internal
  * @since 6.0.0
  */
@@ -26,6 +27,7 @@ export function AutocompleteClearButton(
     "aria-label": ariaLabel = buttonType === "text" || ariaLabelledBy
       ? undefined
       : "Clear",
+    visibility,
     ...remaining
   } = props;
   const id = useEnsuredId(propId, "autocomplete-clear");
@@ -36,7 +38,7 @@ export function AutocompleteClearButton(
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       id={id}
-      className={autocompleteClearButton({ className })}
+      className={autocompleteClearButton({ className, visibility })}
       tabIndex={-1}
       buttonType={buttonType}
     >

package/src/autocomplete/AutocompleteDropdownButton.tsx

@@ -14,6 +14,7 @@ import { type AutocompleteDropdownButtonProps } from "./types.js";
  * This is a simple `Button` wrapper to be used as a dropdown button within the
  * `Autocomplete`.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export function AutocompleteDropdownButton(

package/src/autocomplete/AutocompleteListboxChildren.tsx

@@ -16,11 +16,10 @@ import {
  */
 export interface AutocompleteListboxChildrenProps<
   Option extends AutocompleteOption,
-> {
+> extends Required<AutocompleteGetOptionProps<Option>>,
+    Required<AutocompleteGetOptionLabel<Option>> {
   query: string;
   options: readonly Option[];
-  getOptionLabel: AutocompleteGetOptionLabel<Option>;
-  getOptionProps: AutocompleteGetOptionProps<Option>;
   children: ReactNode;
   noOptionsChildren: ReactNode;
 }