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

package/dist/tree/useTreeMovement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useRef } from \"react\";\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport type { NonNullMutableRef } from \"../types.js\";\nimport type { TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport type { TreeData, TreeItemNode } from \"./types.js\";\nimport type { TreeExpansion } from \"./useTreeExpansion.js\";\nimport type { TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n *   closed\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n  item\n    .closest(\"[role='group']\")\n    ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n  container: HTMLElement\n): readonly HTMLElement[] => {\n  const items = [\n    ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n  ];\n\n  return items.filter(\n    (item) =>\n      // do not include items that have a `hidden` parent group\n      item.offsetParent &&\n      // do not include items that are about to become hidden\n      !isParentItemCollapsing(item)\n  );\n};\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n  data: TreeData<T>;\n  onClick: MouseEventHandler<HTMLUListElement> | undefined;\n  onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n  selectedIds: ReadonlySet<string>;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\ninterface TreeMovement\n  extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n  /**\n   * This will be mutated by the `TreeItem` component and used to handle\n   * keyboard movement.\n   */\n  metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n  options: TreeMovementOptions<T>\n): TreeMovement {\n  const {\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  } = options;\n\n  const metadataLookup = useRef<TreeItemMetadataLookup>({\n    expandable: {},\n    disabledItems: {},\n    elementToItem: {},\n    itemToElement: {},\n  });\n  const movement = useKeyboardMovementProvider({\n    onClick,\n    onFocus,\n    onKeyDown,\n    extendKeyDown(movementData) {\n      const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n        movementData;\n      const { expandable, disabledItems, elementToItem, itemToElement } =\n        metadataLookup.current;\n      const itemId = elementToItem[activeDescendantId];\n      const item = data[itemId];\n\n      /* c8 ignore start */\n      if (!item) {\n        return;\n      }\n      /* c8 ignore end */\n\n      const disabled = disabledItems[itemId];\n      const expanded = expandedIds.has(itemId);\n\n      let flagged = false;\n      switch (event.key) {\n        case \"ArrowLeft\":\n          if (expanded && !disabled) {\n            flagged = true;\n            toggleTreeItemExpansion(itemId);\n          } else if (item.parentId) {\n            // do not flag for this case since setFocusIndex already does this\n            const parentId = itemToElement[item.parentId];\n            const focusables = getVisibleTreeItems(event.currentTarget);\n            const index = focusables.findIndex(\n              (element) => element.id === parentId\n            );\n            setFocusIndex(index, focusables);\n          }\n\n          break;\n        case \"ArrowRight\":\n          if (expandable[itemId] && !disabled) {\n            if (!expanded) {\n              flagged = true;\n              toggleTreeItemExpansion(itemId);\n            } else {\n              // do not flag for this case since setFocusIndex already does this\n              const focusables = getVisibleTreeItems(event.currentTarget);\n              const index = getNextFocusableIndex({\n                loopable: false,\n                increment: true,\n                focusables,\n                includeDisabled: true,\n                currentFocusIndex: currentFocusIndex.current,\n              });\n\n              setFocusIndex(index, focusables);\n            }\n          }\n\n          break;\n        case \"*\": {\n          flagged = true;\n          const itemIds = treeItemChildIds.get(item.parentId);\n          if (itemIds) {\n            const expandableIds = [...itemIds].filter(\n              (itemId) => expandable[itemId]\n            );\n            if (expandableIds.length) {\n              expandMultipleTreeItems(\n                (prev) => new Set([...prev, ...expandableIds])\n              );\n              currentFocusIndex.current = -1;\n            }\n          }\n          break;\n        }\n      }\n\n      if (flagged) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    searchable: true,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements: getVisibleTreeItems,\n    getDefaultFocusedIndex(options) {\n      const { focusables } = options;\n      const { elementToItem } = metadataLookup.current;\n\n      return focusables.findIndex((element) =>\n        selectedIds.has(elementToItem[element.id])\n      );\n    },\n  });\n\n  return {\n    metadataLookup,\n    ...movement,\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"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"}
+{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useRef } from \"react\";\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport type { NonNullMutableRef } from \"../types.js\";\nimport type { TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport type { TreeData, TreeItemNode } from \"./types.js\";\nimport type { TreeExpansion } from \"./useTreeExpansion.js\";\nimport type { TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n *   closed\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n  item\n    .closest(\"[role='group']\")\n    ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n  container: HTMLElement\n): readonly HTMLElement[] => {\n  const items = [\n    ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n  ];\n\n  return items.filter(\n    (item) =>\n      // do not include items that have a `hidden` parent group\n      item.offsetParent &&\n      // do not include items that are about to become hidden\n      !isParentItemCollapsing(item)\n  );\n};\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n  data: TreeData<T>;\n  onClick: MouseEventHandler<HTMLUListElement> | undefined;\n  onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n  selectedIds: ReadonlySet<string>;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\ninterface TreeMovement\n  extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n  /**\n   * This will be mutated by the `TreeItem` component and used to handle\n   * keyboard movement.\n   */\n  metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n  options: TreeMovementOptions<T>\n): TreeMovement {\n  const {\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  } = options;\n\n  const metadataLookup = useRef<TreeItemMetadataLookup>({\n    expandable: {},\n    disabledItems: {},\n    elementToItem: {},\n    itemToElement: {},\n  });\n  const movement = useKeyboardMovementProvider({\n    onClick,\n    onFocus,\n    onKeyDown,\n    extendKeyDown(movementData) {\n      const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n        movementData;\n      const { expandable, disabledItems, elementToItem, itemToElement } =\n        metadataLookup.current;\n      const itemId = elementToItem[activeDescendantId];\n      const item = data[itemId];\n\n      /* c8 ignore start */\n      if (!item) {\n        return;\n      }\n      /* c8 ignore stop */\n\n      const disabled = disabledItems[itemId];\n      const expanded = expandedIds.has(itemId);\n\n      let flagged = false;\n      switch (event.key) {\n        case \"ArrowLeft\":\n          if (expanded && !disabled) {\n            flagged = true;\n            toggleTreeItemExpansion(itemId);\n          } else if (item.parentId) {\n            // do not flag for this case since setFocusIndex already does this\n            const parentId = itemToElement[item.parentId];\n            const focusables = getVisibleTreeItems(event.currentTarget);\n            const index = focusables.findIndex(\n              (element) => element.id === parentId\n            );\n            setFocusIndex(index, focusables);\n          }\n\n          break;\n        case \"ArrowRight\":\n          if (expandable[itemId] && !disabled) {\n            if (!expanded) {\n              flagged = true;\n              toggleTreeItemExpansion(itemId);\n            } else {\n              // do not flag for this case since setFocusIndex already does this\n              const focusables = getVisibleTreeItems(event.currentTarget);\n              const index = getNextFocusableIndex({\n                loopable: false,\n                increment: true,\n                focusables,\n                includeDisabled: true,\n                currentFocusIndex: currentFocusIndex.current,\n              });\n\n              setFocusIndex(index, focusables);\n            }\n          }\n\n          break;\n        case \"*\": {\n          flagged = true;\n          const itemIds = treeItemChildIds.get(item.parentId);\n          if (itemIds) {\n            const expandableIds = [...itemIds].filter(\n              (itemId) => expandable[itemId]\n            );\n            if (expandableIds.length) {\n              expandMultipleTreeItems(\n                (prev) => new Set([...prev, ...expandableIds])\n              );\n              currentFocusIndex.current = -1;\n            }\n          }\n          break;\n        }\n      }\n\n      if (flagged) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    searchable: true,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements: getVisibleTreeItems,\n    getDefaultFocusedIndex(options) {\n      const { focusables } = options;\n      const { elementToItem } = metadataLookup.current;\n\n      return focusables.findIndex((element) =>\n        selectedIds.has(elementToItem[element.id])\n      );\n    },\n  });\n\n  return {\n    metadataLookup,\n    ...movement,\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"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"}

package/dist/types.d.ts

@@ -148,3 +148,16 @@ export type CssPosition = "fixed" | "sticky" | "static";
  * @remarks \@since 6.0.0
  */
 export type AnyFunction = (...args: any[]) => any | void;
+/**
+ * @remarks \@since 6.0.0
+ */
+export type CancelableFunction<F extends AnyFunction> = F & {
+    cancel(): void;
+};
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSize {
+    height: number;
+    width: number;
+}

package/dist/types.js

@@ -1,6 +1,5 @@
 /**
  * @remarks \@since 6.0.0
- */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export { };
+ */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { Dispatch, ReactElement, Ref, SetStateAction } from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n */\nexport type PropsWithRef<\n  Props extends {},\n  Element extends HTMLElement,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = {}> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example\n * Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @remarks \\@since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @remarks \\@since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any | void;\n"],"names":[],"mappings":"AA2KA;;CAEC,GACD,8DAA8D;AAC9D,WAAyD"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { Dispatch, ReactElement, Ref, SetStateAction } from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n */\nexport type PropsWithRef<\n  Props extends {},\n  Element extends HTMLElement,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = {}> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example\n * Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @remarks \\@since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @remarks \\@since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any | void;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & { cancel(): void };\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n"],"names":[],"mappings":"AAsLA;;CAEC,GACD,WAGC"}

package/dist/typography/SrOnly.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { type CustomTypographyComponent, type TypographyHTMLElement, type TypographyProps } from "./Typography.js";
-export interface SrOnlyProps extends TypographyProps {
+import { type HTMLAttributes } from "react";
+import { type CustomTypographyComponent, type TypographyHTMLElement } from "./Typography.js";
+export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
     /** @defaultValue `"span"` */
     as?: CustomTypographyComponent;
     /**

package/dist/typography/SrOnly.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Typography } from "./Typography.js";
 import { cssUtils } from "../cssUtils.js";
 /**
  * **Server Component**
@@ -25,10 +24,11 @@ import { cssUtils } from "../cssUtils.js";
  * }
  * ```
  */ export const SrOnly = /*#__PURE__*/ forwardRef(function SrOnly(props, ref) {
-    const { as = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
-    return /*#__PURE__*/ _jsx(Typography, {
+    const { as: AsComponent = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
+    // do some type-casting so ref works
+    const Component = AsComponent;
+    return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
-        as: as,
         ref: ref,
         tabIndex: tabIndex ?? (focusable ? 0 : undefined),
         className: cssUtils({

package/dist/typography/SrOnly.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  Typography,\n  type CustomTypographyComponent,\n  type TypographyHTMLElement,\n  type TypographyProps,\n} from \"./Typography.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nexport interface SrOnlyProps extends TypographyProps {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /**\n   * Set this to `true` if the content should only be screen reader only text on\n   * phones. This is useful for only displaying an icon on phones when there is\n   * limited space and then displaying an icon and text on larger devices.\n   *\n   * @defaultValue `false`\n   */\n  phoneOnly?: boolean;\n\n  /**\n   * Set this to `true` if the element should be keyboard focusable.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { SrOnly } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <SrOnly>\n *         I am only visible to screen readers.\n *       </SrOnly>\n *       <SrOnly focusable>\n *         I am only visible to screen readers but can be focused.\n *       </SrOnly>\n *     </>\n *   );\n * }\n * ```\n */\nexport const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(\n  function SrOnly(props, ref) {\n    const {\n      as = \"span\",\n      className,\n      phoneOnly,\n      focusable,\n      children,\n      tabIndex,\n      ...remaining\n    } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as={as}\n        ref={ref}\n        tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n        className={cssUtils({\n          srOnly: focusable ? \"focusable\" : phoneOnly ? \"phone\" : true,\n          className,\n        })}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","cssUtils","SrOnly","props","ref","as","className","phoneOnly","focusable","children","tabIndex","remaining","undefined","srOnly"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,UAAU,QAIL,kBAAkB;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAuB1C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,KAAK,MAAM,EACXC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACH;QACE,GAAGW,SAAS;QACbN,IAAIA;QACJD,KAAKA;QACLM,UAAUA,YAAaF,CAAAA,YAAY,IAAII,SAAQ;QAC/CN,WAAWL,SAAS;YAClBY,QAAQL,YAAY,cAAcD,YAAY,UAAU;YACxDD;QACF;kBAECG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport {\n  type CustomTypographyComponent,\n  type TypographyHTMLElement,\n} from \"./Typography.js\";\n\nexport interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /**\n   * Set this to `true` if the content should only be screen reader only text on\n   * phones. This is useful for only displaying an icon on phones when there is\n   * limited space and then displaying an icon and text on larger devices.\n   *\n   * @defaultValue `false`\n   */\n  phoneOnly?: boolean;\n\n  /**\n   * Set this to `true` if the element should be keyboard focusable.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { SrOnly } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <SrOnly>\n *         I am only visible to screen readers.\n *       </SrOnly>\n *       <SrOnly focusable>\n *         I am only visible to screen readers but can be focused.\n *       </SrOnly>\n *     </>\n *   );\n * }\n * ```\n */\nexport const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(\n  function SrOnly(props, ref) {\n    const {\n      as: AsComponent = \"span\",\n      className,\n      phoneOnly,\n      focusable,\n      children,\n      tabIndex,\n      ...remaining\n    } = props;\n\n    // do some type-casting so ref works\n    const Component = AsComponent as ElementType;\n\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n        className={cssUtils({\n          srOnly: focusable ? \"focusable\" : phoneOnly ? \"phone\" : true,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","cssUtils","SrOnly","props","ref","as","AsComponent","className","phoneOnly","focusable","children","tabIndex","remaining","Component","undefined","srOnly"],"mappings":";AAAA,SAASA,UAAU,QAA+C,QAAQ;AAC1E,SAASC,QAAQ,QAAQ,iBAAiB;AA2B1C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,cAAc,MAAM,EACxBC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJ,oCAAoC;IACpC,MAAMU,YAAYP;IAElB,qBACE,KAACO;QACE,GAAGD,SAAS;QACbR,KAAKA;QACLO,UAAUA,YAAaF,CAAAA,YAAY,IAAIK,SAAQ;QAC/CP,WAAWN,SAAS;YAClBc,QAAQN,YAAY,cAAcD,YAAY,UAAU;YACxDD;QACF;kBAECG;;AAGP,GACA"}

package/dist/typography/Typography.d.ts

@@ -36,24 +36,24 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -62,14 +62,14 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -77,7 +77,7 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -85,7 +85,7 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -93,7 +93,7 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/dist/typography/Typography.js

@@ -10,24 +10,24 @@ import { cssUtils } from "../cssUtils.js";
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -36,14 +36,14 @@ import { cssUtils } from "../cssUtils.js";
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -51,7 +51,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -59,7 +59,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -67,7 +67,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/dist/typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example\n * Simple Example\n * ```ts\n * import { getTypographyClassName } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={getTypographyClassName({ type: \"headline-1\" })} />\n *       <h2 className={getTypographyClassName({ type: \"headline-2\" })} />\n *       <h3 className={getTypographyClassName({ type: \"headline-3\" })} />\n *       <h4 className={getTypographyClassName({ type: \"headline-4\" })} />\n *       <h5 className={getTypographyClassName({ type: \"headline-5\" })} />\n *       <h6 className={getTypographyClassName({ type: \"headline-6\" })} />\n *       <h5 className={getTypographyClassName({ type: \"subtitle-1\" })} />\n *       <h6 className={getTypographyClassName({ type: \"subtitle-2\" })} />\n *       <p className={getTypographyClassName()} />\n *       <p className={getTypographyClassName({ type \"body-1\" })} />\n *       <p className={getTypographyClassName({ type \"body-1\" })} />\n *       <caption className={getTypographyClassName({ type: \"caption\" })} />\n *       <span className={getTypographyClassName({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Applying Additional Styles\n * ```ts\n * import { getTypography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={getTypographyClassName({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={getTypographyClassName({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={getTypographyClassName({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={getTypographyClassName({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @remarks \\@since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>,\n    TypographyClassNameOptions {\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * **Server Component**\n *\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example\n * All Example\n * ```tsx\n * import { Typography } from \"@react-md/core\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n  function Typography(props, ref): ReactElement {\n    const {\n      as,\n      type = \"body-1\",\n      className,\n      margin,\n      fontStyle,\n      fontWeight,\n      textAlign,\n      textColor,\n      textDecoration,\n      textTransform,\n      textOverflow,\n      children,\n      ...remaining\n    } = props;\n\n    const Component = getComponent(as, type);\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        className={typography({\n          type,\n          margin,\n          fontStyle,\n          fontWeight,\n          textAlign,\n          textColor,\n          textDecoration,\n          textTransform,\n          textOverflow,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","typography","options","type","getComponent","as","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOJ,IACL,kBACAK,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb;AAuBA,cAAc,GACd,SAASE,aACPC,EAAyC,EACzCF,IAAoB;IAEpB,IAAIE,IAAI;QACN,OAAOA;IACT;IAEA,OAAQF;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMG,2BAAaP,WACxB,SAASO,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJH,EAAE,EACFF,OAAO,QAAQ,EACfM,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYhB,aAAaC,IAAIF;IACnC,qBACE,KAACiB;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWR,WAAW;YACpBE;YACAO;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example\n * Simple Example\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={typography({ type: \"headline-1\" })} />\n *       <h2 className={typography({ type: \"headline-2\" })} />\n *       <h3 className={typography({ type: \"headline-3\" })} />\n *       <h4 className={typography({ type: \"headline-4\" })} />\n *       <h5 className={typography({ type: \"headline-5\" })} />\n *       <h6 className={typography({ type: \"headline-6\" })} />\n *       <h5 className={typography({ type: \"subtitle-1\" })} />\n *       <h6 className={typography({ type: \"subtitle-2\" })} />\n *       <p className={typography()} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <caption className={typography({ type: \"caption\" })} />\n *       <span className={typography({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Applying Additional Styles\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={typography({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={typography({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={typography({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={typography({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @remarks \\@since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>,\n    TypographyClassNameOptions {\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * **Server Component**\n *\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example\n * All Example\n * ```tsx\n * import { Typography } from \"@react-md/core\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n  function Typography(props, ref): ReactElement {\n    const {\n      as,\n      type = \"body-1\",\n      className,\n      margin,\n      fontStyle,\n      fontWeight,\n      textAlign,\n      textColor,\n      textDecoration,\n      textTransform,\n      textOverflow,\n      children,\n      ...remaining\n    } = props;\n\n    const Component = getComponent(as, type);\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        className={typography({\n          type,\n          margin,\n          fontStyle,\n          fontWeight,\n          textAlign,\n          textColor,\n          textDecoration,\n          textTransform,\n          textOverflow,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","typography","options","type","getComponent","as","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOJ,IACL,kBACAK,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb;AAuBA,cAAc,GACd,SAASE,aACPC,EAAyC,EACzCF,IAAoB;IAEpB,IAAIE,IAAI;QACN,OAAOA;IACT;IAEA,OAAQF;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMG,2BAAaP,WACxB,SAASO,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJH,EAAE,EACFF,OAAO,QAAQ,EACfM,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYhB,aAAaC,IAAIF;IACnC,qBACE,KAACiB;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWR,WAAW;YACpBE;YACAO;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}

package/dist/typography/WritingDirectionProvider.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { type UseStateInitializer } from "../types.js";
 /**
  * Note: unlike the `dir` DOM attribute, the `"auto"` value is not supported.
@@ -52,7 +52,7 @@ export interface WritingDirectionProviderProps {
      */
     children: ReactElement<{
         dir?: Dir;
-    }>;
+    }> | ReactNode;
     /**
      * The default writing direction for your app or a subtree. To change the
      * current writing direction, use the `useDir` hook to get access to the

package/dist/typography/WritingDirectionProvider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
 const context = /*#__PURE__*/ createContext({
     root: true,
     dir: "ltr",
@@ -157,7 +157,7 @@ const { Provider } = context;
         toggleDir
     ]);
     let child = Children.only(children);
-    if (!root) {
+    if (!root && /*#__PURE__*/ isValidElement(child)) {
         child = /*#__PURE__*/ cloneElement(child, {
             dir
         });

package/dist/typography/WritingDirectionProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n} from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\n\n/**\n * Note: unlike the `dir` DOM attribute, the `\"auto\"` value is not supported.\n *\n * @remarks \\@since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @remarks \\@since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @remarks \\@since 2.3.0 */\nexport interface WritingDirectionContext {\n  /**\n   * The current writing direction that is being inherited.\n   */\n  dir: Dir;\n\n  /**\n   * Toggles the current writing direction for the first parent `Dir` component.\n   */\n  toggleDir(): void;\n}\n\n/** @internal */\ninterface InheritableContext extends WritingDirectionContext {\n  root: boolean;\n}\n\nconst context = createContext<InheritableContext>({\n  root: true,\n  dir: \"ltr\",\n  toggleDir: () => {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Tried to toggle the current writing direction without initializing the `Dir` component.\"\n      );\n    }\n  },\n});\ncontext.displayName = \"WritingDirection\";\nconst { Provider } = context;\n\n/**\n * Gets the writing direction context which provides access to the current `dir`\n * and a `toggleDir` function.\n *\n * @example\n * Manually Changing the Writing Direction\n * ```tsx\n * import { useDir } from \"@react-md/core\";\n *\n * function Example() {\n *   const { dir, toggleDir } = useDir();\n *\n *   return (\n *     <>\n *       <p>{`The current dir is: \"${dir}\"`}</p>\n *       <button type=\"button\" onClick={toggleDir}>Toggle</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface WritingDirectionProviderProps {\n  /**\n   * A single ReactElement child. If the `WritingDirection` has a parent\n   * `WritingDirection`, the child will have the `dir` prop cloned into this\n   * element.\n   */\n  children: ReactElement<{ dir?: Dir }>;\n\n  /**\n   * The default writing direction for your app or a subtree. To change the\n   * current writing direction, use the `useDir` hook to get access to the\n   * current `dir` and the `toggleDir` function.\n   *\n   * @defaultValue `\"ltr\"`\n   * @see {@link DEFAULT_WRITING_DIRECTION}\n   */\n  defaultDir?: DefaultDir;\n}\n\n/**\n * In the browser, this will default to the `<html>`'s `dir` value if one\n * exists. If the `dir` attribute does not exist, it will default to `\"ltr\"`.\n *\n * In node environments, this will default to `\"ltr\"`.\n *\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_WRITING_DIRECTION = (): Dir => {\n  let dir: Dir = \"ltr\";\n  if (typeof document !== \"undefined\") {\n    const rootDir = document.documentElement.getAttribute(\"dir\");\n    dir = rootDir === \"rtl\" ? \"rtl\" : \"ltr\";\n  }\n\n  return dir;\n};\n\n/**\n * **Client Component**\n *\n * The `WritingDirection` component is used to handle the current writing\n * direction within your app as well as conditionally updating the writing\n * direction for small sections in your app. When this component is used for the\n * first time near the root of your React component tree, the current direction\n * will be applied to the root `<html>` element. Otherwise the current dir will\n * be cloned into the child element so it can be passed as a prop.\n *\n * Note: Since the `dir` is cloned into the child element, you need to make sure\n * that the child is either a DOM element or the `dir` prop is passed from your\n * custom component.\n *\n * @example\n * Root Setup\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <WritingDirection>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @example\n * Supporting RTL Languages\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import type { Dir } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * // see https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\n * const SUPPORTED_RTL_LANGUAGES = [\n *   \"ar\",\n *   \"arc\",\n *   \"ckb\",\n *   \"dv\",\n *   \"fa\",\n *   \"ha\",\n *   \"he\",\n *   \"khw\",\n *   \"ks\",\n *   \"ps\",\n *   \"sd\",\n *   \"ur\",\n *   \"uz_AF\",\n *   \"ti\",\n * ];\n *\n * const defaultDir = (): Dir => {\n *   if (SUPPORTED_RTL_LANGUAGES.includes(navigator.language)) {\n *     return \"rtl\"\n *   }\n *\n *   return \"ltr\";\n * }\n *\n * root.render(\n *   <WritingDirection defaultDir={defaultDir}>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function WritingDirectionProvider(\n  props: WritingDirectionProviderProps\n): ReactElement {\n  const { children, defaultDir = DEFAULT_WRITING_DIRECTION } = props;\n  const { root } = useContext(context);\n  const [dir, setDir] = useState(defaultDir);\n  useEffect(() => {\n    if (!root || typeof document === \"undefined\") {\n      return;\n    }\n\n    document.documentElement.setAttribute(\"dir\", dir);\n\n    return () => {\n      document.documentElement.removeAttribute(\"dir\");\n    };\n  }, [dir, root]);\n\n  const toggleDir = useCallback(() => {\n    setDir((prevDir) => (prevDir === \"ltr\" ? \"rtl\" : \"ltr\"));\n  }, []);\n\n  const value = useMemo<InheritableContext>(\n    () => ({ root: false, dir, toggleDir }),\n    [dir, toggleDir]\n  );\n  let child = Children.only(children);\n  if (!root) {\n    child = cloneElement(child, { dir });\n  }\n\n  return <Provider value={value}>{child}</Provider>;\n}\n"],"names":["Children","cloneElement","createContext","useCallback","useContext","useEffect","useMemo","useState","context","root","dir","toggleDir","process","env","NODE_ENV","Error","displayName","Provider","useDir","_root","current","DEFAULT_WRITING_DIRECTION","document","rootDir","documentElement","getAttribute","WritingDirectionProvider","props","children","defaultDir","setDir","setAttribute","removeAttribute","prevDir","value","child","only"],"mappings":"AAAA;;AACA,SACEA,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AA+Bf,MAAMC,wBAAUN,cAAkC;IAChDO,MAAM;IACNC,KAAK;IACLC,WAAW;QACT,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;AAErB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASU;IACd,MAAM,EAAET,MAAMU,KAAK,EAAE,GAAGC,SAAS,GAAGhB,WAAWI;IAC/C,OAAOY;AACT;AAsBA;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAA4B;IACvC,IAAIX,MAAW;IACf,IAAI,OAAOY,aAAa,aAAa;QACnC,MAAMC,UAAUD,SAASE,eAAe,CAACC,YAAY,CAAC;QACtDf,MAAMa,YAAY,QAAQ,QAAQ;IACpC;IAEA,OAAOb;AACT,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EC,GACD,OAAO,SAASgB,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,aAAaR,yBAAyB,EAAE,GAAGM;IAC7D,MAAM,EAAElB,IAAI,EAAE,GAAGL,WAAWI;IAC5B,MAAM,CAACE,KAAKoB,OAAO,GAAGvB,SAASsB;IAC/BxB,UAAU;QACR,IAAI,CAACI,QAAQ,OAAOa,aAAa,aAAa;YAC5C;QACF;QAEAA,SAASE,eAAe,CAACO,YAAY,CAAC,OAAOrB;QAE7C,OAAO;YACLY,SAASE,eAAe,CAACQ,eAAe,CAAC;QAC3C;IACF,GAAG;QAACtB;QAAKD;KAAK;IAEd,MAAME,YAAYR,YAAY;QAC5B2B,OAAO,CAACG,UAAaA,YAAY,QAAQ,QAAQ;IACnD,GAAG,EAAE;IAEL,MAAMC,QAAQ5B,QACZ,IAAO,CAAA;YAAEG,MAAM;YAAOC;YAAKC;QAAU,CAAA,GACrC;QAACD;QAAKC;KAAU;IAElB,IAAIwB,QAAQnC,SAASoC,IAAI,CAACR;IAC1B,IAAI,CAACnB,MAAM;QACT0B,sBAAQlC,aAAakC,OAAO;YAAEzB;QAAI;IACpC;IAEA,qBAAO,KAACO;QAASiB,OAAOA;kBAAQC;;AAClC"}
+{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\n\n/**\n * Note: unlike the `dir` DOM attribute, the `\"auto\"` value is not supported.\n *\n * @remarks \\@since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @remarks \\@since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @remarks \\@since 2.3.0 */\nexport interface WritingDirectionContext {\n  /**\n   * The current writing direction that is being inherited.\n   */\n  dir: Dir;\n\n  /**\n   * Toggles the current writing direction for the first parent `Dir` component.\n   */\n  toggleDir(): void;\n}\n\n/** @internal */\ninterface InheritableContext extends WritingDirectionContext {\n  root: boolean;\n}\n\nconst context = createContext<InheritableContext>({\n  root: true,\n  dir: \"ltr\",\n  toggleDir: () => {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Tried to toggle the current writing direction without initializing the `Dir` component.\"\n      );\n    }\n  },\n});\ncontext.displayName = \"WritingDirection\";\nconst { Provider } = context;\n\n/**\n * Gets the writing direction context which provides access to the current `dir`\n * and a `toggleDir` function.\n *\n * @example\n * Manually Changing the Writing Direction\n * ```tsx\n * import { useDir } from \"@react-md/core\";\n *\n * function Example() {\n *   const { dir, toggleDir } = useDir();\n *\n *   return (\n *     <>\n *       <p>{`The current dir is: \"${dir}\"`}</p>\n *       <button type=\"button\" onClick={toggleDir}>Toggle</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface WritingDirectionProviderProps {\n  /**\n   * A single ReactElement child. If the `WritingDirection` has a parent\n   * `WritingDirection`, the child will have the `dir` prop cloned into this\n   * element.\n   */\n  children: ReactElement<{ dir?: Dir }> | ReactNode;\n\n  /**\n   * The default writing direction for your app or a subtree. To change the\n   * current writing direction, use the `useDir` hook to get access to the\n   * current `dir` and the `toggleDir` function.\n   *\n   * @defaultValue `\"ltr\"`\n   * @see {@link DEFAULT_WRITING_DIRECTION}\n   */\n  defaultDir?: DefaultDir;\n}\n\n/**\n * In the browser, this will default to the `<html>`'s `dir` value if one\n * exists. If the `dir` attribute does not exist, it will default to `\"ltr\"`.\n *\n * In node environments, this will default to `\"ltr\"`.\n *\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_WRITING_DIRECTION = (): Dir => {\n  let dir: Dir = \"ltr\";\n  if (typeof document !== \"undefined\") {\n    const rootDir = document.documentElement.getAttribute(\"dir\");\n    dir = rootDir === \"rtl\" ? \"rtl\" : \"ltr\";\n  }\n\n  return dir;\n};\n\n/**\n * **Client Component**\n *\n * The `WritingDirection` component is used to handle the current writing\n * direction within your app as well as conditionally updating the writing\n * direction for small sections in your app. When this component is used for the\n * first time near the root of your React component tree, the current direction\n * will be applied to the root `<html>` element. Otherwise the current dir will\n * be cloned into the child element so it can be passed as a prop.\n *\n * Note: Since the `dir` is cloned into the child element, you need to make sure\n * that the child is either a DOM element or the `dir` prop is passed from your\n * custom component.\n *\n * @example\n * Root Setup\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <WritingDirection>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @example\n * Supporting RTL Languages\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import type { Dir } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * // see https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\n * const SUPPORTED_RTL_LANGUAGES = [\n *   \"ar\",\n *   \"arc\",\n *   \"ckb\",\n *   \"dv\",\n *   \"fa\",\n *   \"ha\",\n *   \"he\",\n *   \"khw\",\n *   \"ks\",\n *   \"ps\",\n *   \"sd\",\n *   \"ur\",\n *   \"uz_AF\",\n *   \"ti\",\n * ];\n *\n * const defaultDir = (): Dir => {\n *   if (SUPPORTED_RTL_LANGUAGES.includes(navigator.language)) {\n *     return \"rtl\"\n *   }\n *\n *   return \"ltr\";\n * }\n *\n * root.render(\n *   <WritingDirection defaultDir={defaultDir}>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function WritingDirectionProvider(\n  props: WritingDirectionProviderProps\n): ReactElement {\n  const { children, defaultDir = DEFAULT_WRITING_DIRECTION } = props;\n  const { root } = useContext(context);\n  const [dir, setDir] = useState(defaultDir);\n  useEffect(() => {\n    if (!root || typeof document === \"undefined\") {\n      return;\n    }\n\n    document.documentElement.setAttribute(\"dir\", dir);\n\n    return () => {\n      document.documentElement.removeAttribute(\"dir\");\n    };\n  }, [dir, root]);\n\n  const toggleDir = useCallback(() => {\n    setDir((prevDir) => (prevDir === \"ltr\" ? \"rtl\" : \"ltr\"));\n  }, []);\n\n  const value = useMemo<InheritableContext>(\n    () => ({ root: false, dir, toggleDir }),\n    [dir, toggleDir]\n  );\n  let child = Children.only(children);\n  if (!root && isValidElement<{ dir: Dir }>(child)) {\n    child = cloneElement(child, { dir });\n  }\n\n  return <Provider value={value}>{child}</Provider>;\n}\n"],"names":["Children","cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","context","root","dir","toggleDir","process","env","NODE_ENV","Error","displayName","Provider","useDir","_root","current","DEFAULT_WRITING_DIRECTION","document","rootDir","documentElement","getAttribute","WritingDirectionProvider","props","children","defaultDir","setDir","setAttribute","removeAttribute","prevDir","value","child","only"],"mappings":"AAAA;;AACA,SACEA,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAGH,QAAQ;AA+Bf,MAAMC,wBAAUP,cAAkC;IAChDQ,MAAM;IACNC,KAAK;IACLC,WAAW;QACT,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;AAErB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASU;IACd,MAAM,EAAET,MAAMU,KAAK,EAAE,GAAGC,SAAS,GAAGhB,WAAWI;IAC/C,OAAOY;AACT;AAsBA;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAA4B;IACvC,IAAIX,MAAW;IACf,IAAI,OAAOY,aAAa,aAAa;QACnC,MAAMC,UAAUD,SAASE,eAAe,CAACC,YAAY,CAAC;QACtDf,MAAMa,YAAY,QAAQ,QAAQ;IACpC;IAEA,OAAOb;AACT,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EC,GACD,OAAO,SAASgB,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,aAAaR,yBAAyB,EAAE,GAAGM;IAC7D,MAAM,EAAElB,IAAI,EAAE,GAAGL,WAAWI;IAC5B,MAAM,CAACE,KAAKoB,OAAO,GAAGvB,SAASsB;IAC/BxB,UAAU;QACR,IAAI,CAACI,QAAQ,OAAOa,aAAa,aAAa;YAC5C;QACF;QAEAA,SAASE,eAAe,CAACO,YAAY,CAAC,OAAOrB;QAE7C,OAAO;YACLY,SAASE,eAAe,CAACQ,eAAe,CAAC;QAC3C;IACF,GAAG;QAACtB;QAAKD;KAAK;IAEd,MAAME,YAAYR,YAAY;QAC5B2B,OAAO,CAACG,UAAaA,YAAY,QAAQ,QAAQ;IACnD,GAAG,EAAE;IAEL,MAAMC,QAAQ5B,QACZ,IAAO,CAAA;YAAEG,MAAM;YAAOC;YAAKC;QAAU,CAAA,GACrC;QAACD;QAAKC;KAAU;IAElB,IAAIwB,QAAQpC,SAASqC,IAAI,CAACR;IAC1B,IAAI,CAACnB,sBAAQP,eAA6BiC,QAAQ;QAChDA,sBAAQnC,aAAamC,OAAO;YAAEzB;QAAI;IACpC;IAEA,qBAAO,KAACO;QAASiB,OAAOA;kBAAQC;;AAClC"}