@react-md/core 1.0.0-next.14 → 1.0.0-next.15

package/dist/typography/TextContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport {\n  textContainer,\n  type TextContainerClassNameOptions,\n} from \"./textContainerStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n */\nexport interface TextContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TextContainerClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * This component should be used to render text based content with an\n * appropriate max line length to optimize legibility.\n *\n * @example Simple Example\n * ```tsx\n * import { TextContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <TextContainer>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </TextContainer>\n *   );\n * }\n * ```\n *\n * @see {@link textContainer} If you only want to apply this class to an\n * element.\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n */\nexport const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(\n  function TextContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n\n    return (\n      <div {...remaining} ref={ref} className={textContainer({ className })}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","textContainer","TextContainer","props","ref","className","children","remaining","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SACEC,aAAa,QAER,2BAA2B;AAUlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,cAAc;YAAEI;QAAU;kBAChEC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport {\n  textContainer,\n  type TextContainerClassNameOptions,\n} from \"./textContainerStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport interface TextContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TextContainerClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * This component should be used to render text based content with an\n * appropriate max line length to optimize legibility.\n *\n * @example Simple Example\n * ```tsx\n * import { TextContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <TextContainer>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </TextContainer>\n *   );\n * }\n * ```\n *\n * @see {@link textContainer} If you only want to apply this class to an\n * element.\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(\n  function TextContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n\n    return (\n      <div {...remaining} ref={ref} className={textContainer({ className })}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","textContainer","TextContainer","props","ref","className","children","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SACEC,aAAa,QAER,2BAA2B;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,cAAc;YAAEI;QAAU;kBAChEC;;AAGP,GACA"}

package/dist/typography/Typography.d.ts

@@ -12,6 +12,11 @@ export type TypographyHTMLElement = HTMLHeadingElement | HTMLParagraphElement |
 export type CustomTypographyComponent = ElementType<HTMLAttributes<TypographyHTMLElement> & {
     className: string;
 }>;
+/**
+ * @since 6.0.0 Renamed `component` to `as`.
+ * @since 6.0.0 Removed the children render function behavior. Use the
+ * `typography` class name utility instead.
+ */
 export interface TypographyProps extends HTMLAttributes<TypographyHTMLElement>, TypographyClassNameOptions {
     /**
      * The component to render as when the children are not a render function. If
@@ -30,6 +35,8 @@ export interface TypographyProps extends HTMLAttributes<TypographyHTMLElement>,
      * - `"body-2"     -> <p>`
      * - `"caption"    -> <caption>`
      * - `"overline"   -> <span>`
+     *
+     * @since 6.0.0 Renamed from `component`
      */
     as?: CustomTypographyComponent;
 }
@@ -73,5 +80,8 @@ export interface TypographyProps extends HTMLAttributes<TypographyHTMLElement>,
  *   ):
  * }
  * ```
+ *
+ * @since 6.0.0 Removed the children render function behavior . Use the
+ * `typography` class name utility instead.
  */
 export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<TypographyHTMLElement>>;

package/dist/typography/Typography.js

@@ -69,6 +69,9 @@ import { typography } from "./typographyStyles.js";
  *   ):
  * }
  * ```
+ *
+ * @since 6.0.0 Removed the children render function behavior . Use the
+ * `typography` class name utility instead.
  */ export const Typography = /*#__PURE__*/ forwardRef(function Typography(props, ref) {
     const { as, type = "body-1", className, margin, fontStyle, fontWeight, textAlign, textColor, textDecoration, textTransform, textOverflow, children, ...remaining } = props;
     const Component = getComponent(as, type);

package/dist/typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport {\n  typography,\n  type TypographyClassNameOptions,\n  type TypographyType,\n} from \"./typographyStyles.js\";\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 * @since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @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 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":["forwardRef","typography","getComponent","as","type","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AACf,SACEC,UAAU,QAGL,wBAAwB;AAuB/B,cAAc,GACd,SAASC,aACPC,EAAyC,EACzCC,IAAoB;IAEpB,IAAID,IAAI;QACN,OAAOA;IACT;IAEA,OAAQC;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,2BAAaL,WACxB,SAASK,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJJ,EAAE,EACFC,OAAO,QAAQ,EACfI,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,YAAYjB,aAAaC,IAAIC;IACnC,qBACE,KAACe;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWP,WAAW;YACpBG;YACAK;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport {\n  typography,\n  type TypographyClassNameOptions,\n  type TypographyType,\n} from \"./typographyStyles.js\";\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 * @since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @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\n/**\n * @since 6.0.0 Renamed `component` to `as`.\n * @since 6.0.0 Removed the children render function behavior. Use the\n * `typography` class name utility instead.\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   * @since 6.0.0 Renamed from `component`\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 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 *\n * @since 6.0.0 Removed the children render function behavior . Use the\n * `typography` class name utility instead.\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":["forwardRef","typography","getComponent","as","type","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AACf,SACEC,UAAU,QAGL,wBAAwB;AAuB/B,cAAc,GACd,SAASC,aACPC,EAAyC,EACzCC,IAAoB;IAEpB,IAAID,IAAI;QACN,OAAOA;IACT;IAEA,OAAQC;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;AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,MAAMC,2BAAaL,WACxB,SAASK,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJJ,EAAE,EACFC,OAAO,QAAQ,EACfI,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,YAAYjB,aAAaC,IAAIC;IACnC,qBACE,KAACe;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWP,WAAW;YACpBG;YACAK;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}

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  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 * @since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @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 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 * @since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @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 * @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 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 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 * @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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;;;;;;;;;;;;;;;;;;;;;CAqBC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EC,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"}
+{"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 * @since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @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 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 * @since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @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 * @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 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 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 * @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;;;;;;;;;;;;;;;;;;;;;CAqBC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EC,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"}

package/dist/typography/textContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/textContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-line-length\"?: string | number;\n    \"--rmd-text-container-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-text-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface TextContainerClassNameOptions {\n  /**\n   * An optional className to merge with typography text container styles.\n   */\n  className?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { textContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <main className={textContainer()}>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </main>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function textContainer(\n  options: TextContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","textContainer","options","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAYnB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASE,cACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}
+{"version":3,"sources":["../../src/typography/textContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-line-length\"?: string | number;\n    \"--rmd-text-container-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-text-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface TextContainerClassNameOptions {\n  /**\n   * An optional className to merge with typography text container styles.\n   */\n  className?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { textContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <main className={textContainer()}>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </main>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function textContainer(\n  options: TextContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","textContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAYnB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASE,cACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}

package/dist/typography/typographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/typographyStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\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 * @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/** @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/** @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 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 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 * @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"],"names":["cnb","cssUtils","typography","options","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOH,IACL,kBACAI,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb"}
+{"version":3,"sources":["../../src/typography/typographyStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\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 * @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/** @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/** @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 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 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 * @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"],"names":["cnb","cssUtils","typography","options","type"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOH,IACL,kBACAI,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb"}

package/dist/useAsyncFunction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useAsyncFunction.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { NonNullRef, UseStateSetter } from \"./types.js\";\nimport { useUnmounted } from \"./useUnmounted.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AsyncFunction<Args extends unknown[]> = (\n  ...args: Args\n) => Promise<void>;\n\n/**\n * @since 6.0.0\n */\nexport type HandleAsyncFunction = <Args extends unknown[]>(\n  action: AsyncFunction<Args>\n) => AsyncFunction<Args>;\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookOptions {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookImplementation {\n  pending: boolean;\n  unmounted: NonNullRef<boolean>;\n  setPending: UseStateSetter<boolean>;\n  handleAsync: HandleAsyncFunction;\n}\n\n/**\n * A simple utility hook for triggering a pending state while an async function\n * is running. This is really only useful if you aren't using something like\n * `react-query`, `@reduxjs/toolkit/query`, `@apollo/client`, etc for API calls\n * which have a built-in pending state for mutations.\n *\n * @example Simple Example (Async Button)\n * ```tsx\n * import type { ButtonProps } from \"@react-md/core\";\n * import { box, Button, CircularProgress, useAsyncFunction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { MouseEvent, ReactElement } from \"react\";\n *\n * import styles from \"./AsyncButton.module.scss\";\n *\n * export interface AsyncButtonProps extends ButtonProps {\n *   onClick(event: MouseEvent<HTMLButtonElement>): Promise<void>;\n * }\n *\n * export function AsyncButton(props: AsyncButtonProps): ReactElement {\n *   const { onClick, children, theme, className, disabled, ...remaining } = props;\n *   const { handleAsync, pending } = useAsyncFunction({ disabled });\n *\n *   return (\n *     <Button\n *       {...remaining}\n *       aria-disabled={pending || undefined}\n *       disabled={disabled}\n *       className={cnb(pending && styles.loading, className)}\n *       theme={pending ? \"disabled\" : theme}\n *       onClick={handleAsync(onClick)}\n *     >\n *       {children}\n *       {pending && (\n *         <span\n *           className={box({\n *             align: \"center\",\n *             disablePadding: true,\n *             className: styles.overlay,\n *           })}\n *         >\n *           <CircularProgress />\n *         </span>\n *       )}\n *     </Button>\n *   );\n * }\n *\n * // `AsyncButton.module.scss`\n * // hide everything in the button except for the overlay containing the circular\n * // progress\n * .loading > *:not(.overlay) {\n *   opacity: 0;\n * }\n *\n * .overlay {\n *   border-radius: inherit;\n *   box-shadow: inherit;\n *   inset: 0;\n *   position: absolute;\n *   z-index: 1;\n * }\n * ```\n *\n * @example Confirmation Dialog with Overlay\n * ```tsx\n * import {\n *   Button,\n *   DialogHeader,\n *   DialogContent,\n *   DialogFooter,\n *   Form,\n *   useAsyncFunction,\n * } from \"@react-md/core\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * interface ExampleProps {\n *   hide(); void;\n *   submit(): Promise<void>\n * }\n *\n * function Example({ hide, submit }: ExampleProps): ReactElement {\n *   const { handleAsync, pending } = useAsyncFunction();\n *   const formId = useId();\n *\n *   return (\n *     <>\n *       <DialogHeader>\n *         <DialogTitle>Some Title</DialogTitle>\n *         <Button aria-label=\"Close\" onClick={hide} disabled={pending}>\n *           <CloseIcon />\n *         </Button>\n *       </DialogHeader>\n *       <DialogContent>\n *         <Form\n *           id={formId}\n *           onReset={hide}\n *           onSubmit={handleAsync(submit)}\n *         >\n *           // pretend content\n *         </Form>\n *       </DialogContent>\n *       <DialogFooter>\n *         <Button\n *           type=\"reset\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Cancel\n *         </Button>\n *         <Button\n *           type=\"submit\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Confirm\n *         </Button>\n *       </DialogFooter>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useAsyncFunction(\n  options: AsyncFunctionHookOptions = {}\n): AsyncFunctionHookImplementation {\n  const { disabled } = options;\n\n  const [pending, setPending] = useState(false);\n  const unmounted = useUnmounted();\n\n  const handleAsync = useCallback<HandleAsyncFunction>(\n    (action) =>\n      async (...args) => {\n        if (pending || disabled) {\n          return;\n        }\n\n        setPending(true);\n        try {\n          await action(...args);\n        } finally {\n          if (!unmounted.current) {\n            setPending(false);\n          }\n        }\n      },\n    [disabled, pending, unmounted]\n  );\n\n  return {\n    pending,\n    unmounted,\n    setPending,\n    handleAsync,\n  };\n}\n"],"names":["useCallback","useState","useUnmounted","useAsyncFunction","options","disabled","pending","setPending","unmounted","handleAsync","action","args","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,YAAY,QAAQ,oBAAoB;AAkCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8HC,GACD,OAAO,SAASC,iBACdC,UAAoC,CAAC,CAAC;IAEtC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,SAASC,WAAW,GAAGN,SAAS;IACvC,MAAMO,YAAYN;IAElB,MAAMO,cAAcT,YAClB,CAACU,SACC,OAAO,GAAGC;YACR,IAAIL,WAAWD,UAAU;gBACvB;YACF;YAEAE,WAAW;YACX,IAAI;gBACF,MAAMG,UAAUC;YAClB,SAAU;gBACR,IAAI,CAACH,UAAUI,OAAO,EAAE;oBACtBL,WAAW;gBACb;YACF;QACF,GACF;QAACF;QAAUC;QAASE;KAAU;IAGhC,OAAO;QACLF;QACAE;QACAD;QACAE;IACF;AACF"}
+{"version":3,"sources":["../src/useAsyncFunction.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { NonNullRef, UseStateSetter } from \"./types.js\";\nimport { useUnmounted } from \"./useUnmounted.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AsyncFunction<Args extends unknown[]> = (\n  ...args: Args\n) => Promise<void>;\n\n/**\n * @since 6.0.0\n */\nexport type HandleAsyncFunction = <Args extends unknown[]>(\n  action: AsyncFunction<Args>\n) => AsyncFunction<Args>;\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookOptions {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookImplementation {\n  pending: boolean;\n  unmounted: NonNullRef<boolean>;\n  setPending: UseStateSetter<boolean>;\n  handleAsync: HandleAsyncFunction;\n}\n\n/**\n * A simple utility hook for triggering a pending state while an async function\n * is running. This is really only useful if you aren't using something like\n * `react-query`, `@reduxjs/toolkit/query`, `@apollo/client`, etc for API calls\n * which have a built-in pending state for mutations.\n *\n * @example Simple Example (Async Button)\n * ```tsx\n * import type { ButtonProps } from \"@react-md/core\";\n * import { box, Button, CircularProgress, useAsyncFunction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { MouseEvent, ReactElement } from \"react\";\n *\n * import styles from \"./AsyncButton.module.scss\";\n *\n * export interface AsyncButtonProps extends ButtonProps {\n *   onClick(event: MouseEvent<HTMLButtonElement>): Promise<void>;\n * }\n *\n * export function AsyncButton(props: AsyncButtonProps): ReactElement {\n *   const { onClick, children, theme, className, disabled, ...remaining } = props;\n *   const { handleAsync, pending } = useAsyncFunction({ disabled });\n *\n *   return (\n *     <Button\n *       {...remaining}\n *       aria-disabled={pending || undefined}\n *       disabled={disabled}\n *       className={cnb(pending && styles.loading, className)}\n *       theme={pending ? \"disabled\" : theme}\n *       onClick={handleAsync(onClick)}\n *     >\n *       {children}\n *       {pending && (\n *         <span\n *           className={box({\n *             align: \"center\",\n *             disablePadding: true,\n *             className: styles.overlay,\n *           })}\n *         >\n *           <CircularProgress />\n *         </span>\n *       )}\n *     </Button>\n *   );\n * }\n *\n * // `AsyncButton.module.scss`\n * // hide everything in the button except for the overlay containing the circular\n * // progress\n * .loading > *:not(.overlay) {\n *   opacity: 0;\n * }\n *\n * .overlay {\n *   border-radius: inherit;\n *   box-shadow: inherit;\n *   inset: 0;\n *   position: absolute;\n *   z-index: 1;\n * }\n * ```\n *\n * @example Confirmation Dialog with Overlay\n * ```tsx\n * import {\n *   Button,\n *   DialogHeader,\n *   DialogContent,\n *   DialogFooter,\n *   Form,\n *   useAsyncFunction,\n * } from \"@react-md/core\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * interface ExampleProps {\n *   hide(); void;\n *   submit(): Promise<void>\n * }\n *\n * function Example({ hide, submit }: ExampleProps): ReactElement {\n *   const { handleAsync, pending } = useAsyncFunction();\n *   const formId = useId();\n *\n *   return (\n *     <>\n *       <DialogHeader>\n *         <DialogTitle>Some Title</DialogTitle>\n *         <Button aria-label=\"Close\" onClick={hide} disabled={pending}>\n *           <CloseIcon />\n *         </Button>\n *       </DialogHeader>\n *       <DialogContent>\n *         <Form\n *           id={formId}\n *           onReset={hide}\n *           onSubmit={handleAsync(submit)}\n *         >\n *           // pretend content\n *         </Form>\n *       </DialogContent>\n *       <DialogFooter>\n *         <Button\n *           type=\"reset\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Cancel\n *         </Button>\n *         <Button\n *           type=\"submit\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Confirm\n *         </Button>\n *       </DialogFooter>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useAsyncFunction(\n  options: AsyncFunctionHookOptions = {}\n): AsyncFunctionHookImplementation {\n  const { disabled } = options;\n\n  const [pending, setPending] = useState(false);\n  const unmounted = useUnmounted();\n\n  const handleAsync = useCallback<HandleAsyncFunction>(\n    (action) =>\n      async (...args) => {\n        if (pending || disabled) {\n          return;\n        }\n\n        setPending(true);\n        try {\n          await action(...args);\n        } finally {\n          if (!unmounted.current) {\n            setPending(false);\n          }\n        }\n      },\n    [disabled, pending, unmounted]\n  );\n\n  return {\n    pending,\n    unmounted,\n    setPending,\n    handleAsync,\n  };\n}\n"],"names":["useCallback","useState","useUnmounted","useAsyncFunction","options","disabled","pending","setPending","unmounted","handleAsync","action","args","current"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,YAAY,QAAQ,oBAAoB;AAkCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8HC,GACD,OAAO,SAASC,iBACdC,UAAoC,CAAC,CAAC;IAEtC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,SAASC,WAAW,GAAGN,SAAS;IACvC,MAAMO,YAAYN;IAElB,MAAMO,cAAcT,YAClB,CAACU,SACC,OAAO,GAAGC;YACR,IAAIL,WAAWD,UAAU;gBACvB;YACF;YAEAE,WAAW;YACX,IAAI;gBACF,MAAMG,UAAUC;YAClB,SAAU;gBACR,IAAI,CAACH,UAAUI,OAAO,EAAE;oBACtBL,WAAW;gBACb;YACF;QACF,GACF;QAACF;QAAUC;QAASE;KAAU;IAGhC,OAAO;QACLF;QACAE;QACAD;QACAE;IACF;AACF"}

package/dist/useDebouncedFunction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDebouncedFunction.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { type CancelableFunction, type AnyFunction } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * Creates a function that will only be called if it has not been called again\n * for X milliseconds.\n *\n * @example Debounced Search API Requests\n * ```tsx\n * import { TextField, useDebouncedFunction, useUnmounted } from \"@react-md/core\";\n * import { useState } from \"react\";\n * import type { ReactElement } from \"react\";\n *\n * interface State {\n *   error?: unknown\n *   loading: boolean;\n *   results?: {\n *     // pretend some search results\n *     id: string;\n *     name: string;\n *   }[];\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     loading: false,\n *   });\n *   // this is only required for async actions\n *   const unmounted = useUnmounted();\n *\n *   // A new search request will be fired once every 500ms as the user types.\n *   // can't use the event here since React uses synthetic events\n *   const search = useDebouncedFunction(async (q: string) => {\n *     setState({\n *       loading: true,\n *       error: undefined,\n *       results: undefined,\n *     });\n *\n *     try {\n *       const response = await fetch('/search', {\n *         method: 'POST',\n *         headers: {\n *           'Content-Type': 'application/json',\n *         },\n *         body: JSON.stringify({ q }),\n *       });\n *       const json = await response.json();\n *\n *       if (!unmounted.current) {\n *         setState({\n *           loading: false,\n *           results: json,\n *         });\n *       }\n *     } catch (error) {\n *       if (!unmounted.current) {\n *         setState({\n *           error,\n *           loading: false,\n *         });\n *       }\n *     }\n *   }, 500);\n *\n *   return (\n *     <TextField\n *       type=\"search\"\n *       label=\"Search\"\n *       onChange={(event) => search(event.currentTarget.value)}\n *     />\n *   );\n * }\n * ```\n *\n * @see `useThrottledFunction` for throttle behavior instead. (Call a\n * function at most once every X milliseconds).\n * @since 6.0.0\n */\nexport function useDebouncedFunction<F extends AnyFunction>(\n  func: F,\n  wait: number\n): DebouncedFunction<F> {\n  const timeout = useRef<number | undefined>();\n  const funcRef = useRef(func);\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const debounced: DebouncedFunction<F> = (...args) => {\n      window.clearTimeout(timeout.current);\n      timeout.current = window.setTimeout(() => {\n        funcRef.current(...args);\n      }, wait);\n    };\n    debounced.cancel = () => window.clearTimeout(timeout.current);\n\n    return debounced;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useDebouncedFunction","func","wait","timeout","funcRef","current","window","clearTimeout","debounced","args","setTimeout","cancel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAS3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,GACD,OAAO,SAASC,qBACdC,IAAO,EACPC,IAAY;IAEZ,MAAMC,UAAUL;IAChB,MAAMM,UAAUN,OAAOG;IACvBF,0BAA0B;QACxBK,QAAQC,OAAO,GAAGJ;IACpB;IAEAL,UAAU;QACR,OAAO;YACLU,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QACrC;IACF,GAAG,EAAE;IAEL,OAAOR,QAAQ;QACb,MAAMW,YAAkC,CAAC,GAAGC;YAC1CH,OAAOC,YAAY,CAACJ,QAAQE,OAAO;YACnCF,QAAQE,OAAO,GAAGC,OAAOI,UAAU,CAAC;gBAClCN,QAAQC,OAAO,IAAII;YACrB,GAAGP;QACL;QACAM,UAAUG,MAAM,GAAG,IAAML,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QAE5D,OAAOG;IACT,GAAG;QAACN;KAAK;AACX"}
+{"version":3,"sources":["../src/useDebouncedFunction.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { type CancelableFunction, type AnyFunction } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * Creates a function that will only be called if it has not been called again\n * for X milliseconds.\n *\n * @example Debounced Search API Requests\n * ```tsx\n * import { TextField, useDebouncedFunction, useUnmounted } from \"@react-md/core\";\n * import { useState } from \"react\";\n * import type { ReactElement } from \"react\";\n *\n * interface State {\n *   error?: unknown\n *   loading: boolean;\n *   results?: {\n *     // pretend some search results\n *     id: string;\n *     name: string;\n *   }[];\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     loading: false,\n *   });\n *   // this is only required for async actions\n *   const unmounted = useUnmounted();\n *\n *   // A new search request will be fired once every 500ms as the user types.\n *   // can't use the event here since React uses synthetic events\n *   const search = useDebouncedFunction(async (q: string) => {\n *     setState({\n *       loading: true,\n *       error: undefined,\n *       results: undefined,\n *     });\n *\n *     try {\n *       const response = await fetch('/search', {\n *         method: 'POST',\n *         headers: {\n *           'Content-Type': 'application/json',\n *         },\n *         body: JSON.stringify({ q }),\n *       });\n *       const json = await response.json();\n *\n *       if (!unmounted.current) {\n *         setState({\n *           loading: false,\n *           results: json,\n *         });\n *       }\n *     } catch (error) {\n *       if (!unmounted.current) {\n *         setState({\n *           error,\n *           loading: false,\n *         });\n *       }\n *     }\n *   }, 500);\n *\n *   return (\n *     <TextField\n *       type=\"search\"\n *       label=\"Search\"\n *       onChange={(event) => search(event.currentTarget.value)}\n *     />\n *   );\n * }\n * ```\n *\n * @see `useThrottledFunction` for throttle behavior instead. (Call a\n * function at most once every X milliseconds).\n * @since 6.0.0\n */\nexport function useDebouncedFunction<F extends AnyFunction>(\n  func: F,\n  wait: number\n): DebouncedFunction<F> {\n  const timeout = useRef<number | undefined>();\n  const funcRef = useRef(func);\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const debounced: DebouncedFunction<F> = (...args) => {\n      window.clearTimeout(timeout.current);\n      timeout.current = window.setTimeout(() => {\n        funcRef.current(...args);\n      }, wait);\n    };\n    debounced.cancel = () => window.clearTimeout(timeout.current);\n\n    return debounced;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useDebouncedFunction","func","wait","timeout","funcRef","current","window","clearTimeout","debounced","args","setTimeout","cancel"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAS3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,GACD,OAAO,SAASC,qBACdC,IAAO,EACPC,IAAY;IAEZ,MAAMC,UAAUL;IAChB,MAAMM,UAAUN,OAAOG;IACvBF,0BAA0B;QACxBK,QAAQC,OAAO,GAAGJ;IACpB;IAEAL,UAAU;QACR,OAAO;YACLU,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QACrC;IACF,GAAG,EAAE;IAEL,OAAOR,QAAQ;QACb,MAAMW,YAAkC,CAAC,GAAGC;YAC1CH,OAAOC,YAAY,CAACJ,QAAQE,OAAO;YACnCF,QAAQE,OAAO,GAAGC,OAAOI,UAAU,CAAC;gBAClCN,QAAQC,OAAO,IAAII;YACrB,GAAGP;QACL;QACAM,UAAUG,MAAM,GAAG,IAAML,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QAE5D,OAAOG;IACT,GAAG;QAACN;KAAK;AACX"}

package/dist/useDropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\nimport type { DragEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 5.1.3\n * @since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragEnter?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragOver?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragLeave?<E extends HTMLElement>(event: DragEvent<E>): void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * Set this to `true` if you do not need to capture drag events from outside\n   * the window. i.e. Dragging files into the dropzone.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneHookReturnValue.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @since 2.9.0\n * @since 6.0.0 Returns an object instead of an ordered array of\n * `[isOver: boolean, dropzoneHandlers: DropzoneHandlers]`. Also returns a new\n * `isDragging` state.\n */\nexport interface DropzoneHookReturnValue {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Dragging Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 2.9.0\n * @since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneHookReturnValue {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const [isDragging, setDragging] = useState(false);\n  const draggingTimeout = useRef<number | undefined>();\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    const startDragging = (): void => {\n      setDragging(true);\n    };\n\n    // Browsers sometimes don't trigger a dragleave event for the entire\n    // document, so we have to work around that by using the `dragover` event\n    // instead. The `dragover` event will continually fire within the window\n    // until the user drops the file or moves the file outside of the window.\n    //\n    // So we can consider the\n    const handler = (): void => {\n      window.clearTimeout(draggingTimeout.current);\n      draggingTimeout.current = window.setTimeout(() => {\n        setDragging(false);\n      }, 100);\n    };\n\n    window.addEventListener(\"dragenter\", startDragging);\n    window.addEventListener(\"dragover\", handler);\n    return () => {\n      window.clearTimeout(draggingTimeout.current);\n      window.removeEventListener(\"dragenter\", startDragging);\n      window.removeEventListener(\"dragover\", handler);\n    };\n  }, [disableDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        setDragging(false);\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","isDragging","setDragging","draggingTimeout","startDragging","handler","window","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAyDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGV,SAAS;IACnC,MAAM,CAACW,YAAYC,YAAY,GAAGZ,SAAS;IAC3C,MAAMa,kBAAkBd;IAExBD,UAAU;QACR,IAAIU,iBAAiB;YACnB;QACF;QAEA,MAAMM,gBAAgB;YACpBF,YAAY;QACd;QAEA,oEAAoE;QACpE,yEAAyE;QACzE,wEAAwE;QACxE,yEAAyE;QACzE,EAAE;QACF,yBAAyB;QACzB,MAAMG,UAAU;YACdC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CL,gBAAgBK,OAAO,GAAGF,OAAOG,UAAU,CAAC;gBAC1CP,YAAY;YACd,GAAG;QACL;QAEAI,OAAOI,gBAAgB,CAAC,aAAaN;QACrCE,OAAOI,gBAAgB,CAAC,YAAYL;QACpC,OAAO;YACLC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CF,OAAOK,mBAAmB,CAAC,aAAaP;YACxCE,OAAOK,mBAAmB,CAAC,YAAYN;QACzC;IACF,GAAG;QAACP;KAAgB;IAEpB,OAAO;QACLC;QACAE;QACAW,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDlB,QAAOmB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cd,OAAOmB;gBACPb,QAAQ;gBACRE,YAAY;YACd;YACAP,YAAWkB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cb,WAAWkB;gBACXb,QAAQ;YACV;YACAJ,aAAYiB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBnB,YAAYiB;gBACZb,QAAQ;YACV;YACAH,aAAYgB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBlB,YAAYgB;gBACZb,QAAQ;YACV;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\nimport type { DragEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 5.1.3\n * @since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragEnter?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragOver?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragLeave?<E extends HTMLElement>(event: DragEvent<E>): void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * Set this to `true` if you do not need to capture drag events from outside\n   * the window. i.e. Dragging files into the dropzone.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneHookReturnValue.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @since 2.9.0\n * @since 6.0.0 Returns an object instead of an ordered array of\n * `[isOver: boolean, dropzoneHandlers: DropzoneHandlers]`. Also returns a new\n * `isDragging` state.\n */\nexport interface DropzoneHookReturnValue {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Dragging Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 2.9.0\n * @since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneHookReturnValue {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const [isDragging, setDragging] = useState(false);\n  const draggingTimeout = useRef<number | undefined>();\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    const startDragging = (): void => {\n      setDragging(true);\n    };\n\n    // Browsers sometimes don't trigger a dragleave event for the entire\n    // document, so we have to work around that by using the `dragover` event\n    // instead. The `dragover` event will continually fire within the window\n    // until the user drops the file or moves the file outside of the window.\n    //\n    // So we can consider the\n    const handler = (): void => {\n      window.clearTimeout(draggingTimeout.current);\n      draggingTimeout.current = window.setTimeout(() => {\n        setDragging(false);\n      }, 100);\n    };\n\n    window.addEventListener(\"dragenter\", startDragging);\n    window.addEventListener(\"dragover\", handler);\n    return () => {\n      window.clearTimeout(draggingTimeout.current);\n      window.removeEventListener(\"dragenter\", startDragging);\n      window.removeEventListener(\"dragover\", handler);\n    };\n  }, [disableDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        setDragging(false);\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","isDragging","setDragging","draggingTimeout","startDragging","handler","window","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAyDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGV,SAAS;IACnC,MAAM,CAACW,YAAYC,YAAY,GAAGZ,SAAS;IAC3C,MAAMa,kBAAkBd;IAExBD,UAAU;QACR,IAAIU,iBAAiB;YACnB;QACF;QAEA,MAAMM,gBAAgB;YACpBF,YAAY;QACd;QAEA,oEAAoE;QACpE,yEAAyE;QACzE,wEAAwE;QACxE,yEAAyE;QACzE,EAAE;QACF,yBAAyB;QACzB,MAAMG,UAAU;YACdC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CL,gBAAgBK,OAAO,GAAGF,OAAOG,UAAU,CAAC;gBAC1CP,YAAY;YACd,GAAG;QACL;QAEAI,OAAOI,gBAAgB,CAAC,aAAaN;QACrCE,OAAOI,gBAAgB,CAAC,YAAYL;QACpC,OAAO;YACLC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CF,OAAOK,mBAAmB,CAAC,aAAaP;YACxCE,OAAOK,mBAAmB,CAAC,YAAYN;QACzC;IACF,GAAG;QAACP;KAAgB;IAEpB,OAAO;QACLC;QACAE;QACAW,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDlB,QAAOmB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cd,OAAOmB;gBACPb,QAAQ;gBACRE,YAAY;YACd;YACAP,YAAWkB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cb,WAAWkB;gBACXb,QAAQ;YACV;YACAJ,aAAYiB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBnB,YAAYiB;gBACZb,QAAQ;YACV;YACAH,aAAYgB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBlB,YAAYgB;gBACZb,QAAQ;YACV;QACF;IACF;AACF"}

package/dist/useElementSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useElementSize.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState, type RefCallback } from \"react\";\nimport { type ElementSize, type UseStateInitializer } from \"./types.js\";\nimport {\n  useResizeObserver,\n  type ResizeObserverHookOptions,\n} from \"./useResizeObserver.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSizeOptions<E extends HTMLElement>\n  extends Omit<ResizeObserverHookOptions<E>, \"onUpdate\"> {\n  /** @defaultValue `{ height: 0, width: 0 }` */\n  defaultValue?: UseStateInitializer<ElementSize>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSizeImplementation<E extends HTMLElement>\n  extends ElementSize {\n  elementRef: RefCallback<E>;\n\n  /**\n   * This will be `true` once the resize observer's callback is triggered at\n   * least once.\n   *\n   * This was added so that generating custom properties that have a reasonable\n   * default value set in css don't cause major layout shifts when a default\n   * value cannot be provided.\n   *\n   * @example\n   * ```tsx\n   * const { height, width, observedOnce }` = useElementSize();\n   * useCSSVariables(useMemo(() => {\n   *   if (!observedOnce) {\n   *     return []\n   *   }\n   *\n   *   // something that uses the element's height, width, or both\n   *   return [{ var: \"--something\", value: height / width * 0.5 }];\n   * }, [height, width, observedOnce]))\n   * ```\n   */\n  observedOnce: boolean;\n}\n\n/**\n * A small wrapper around the {@link useResizeObserver} hook to calculate the\n * element's size.\n *\n * @example Simple Example\n * ```tsx\n * import { useElementSize } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width, elementRef } = useElementSize();\n *\n *   return (\n *     <div ref={elementRef}>\n *       {`height: ${height}, width: ${width}`}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useElementSize<E extends HTMLElement>(\n  options: ElementSizeOptions<E> = {}\n): ElementSizeImplementation<E> {\n  const { defaultValue } = options;\n\n  const observedOnce = useRef(false);\n  const [size, setSize] = useState<ElementSize>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return (\n      defaultValue ?? {\n        height: 0,\n        width: 0,\n      }\n    );\n  });\n\n  const elementRef = useResizeObserver({\n    ...options,\n    onUpdate: useCallback((entry) => {\n      observedOnce.current = true;\n      const size = entry.borderBoxSize[0];\n\n      setSize({\n        height: size.blockSize,\n        width: size.inlineSize,\n      });\n    }, []),\n  });\n\n  return {\n    ...size,\n    elementRef,\n    observedOnce: observedOnce.current,\n  };\n}\n"],"names":["useCallback","useRef","useState","useResizeObserver","useElementSize","options","defaultValue","observedOnce","size","setSize","height","width","elementRef","onUpdate","entry","current","borderBoxSize","blockSize","inlineSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAA0B,QAAQ;AAExE,SACEC,iBAAiB,QAEZ,yBAAyB;AA0ChC;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASC,eACdC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IAEzB,MAAME,eAAeN,OAAO;IAC5B,MAAM,CAACO,MAAMC,QAAQ,GAAGP,SAAsB;QAC5C,IAAI,OAAOI,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OACEA,gBAAgB;YACdI,QAAQ;YACRC,OAAO;QACT;IAEJ;IAEA,MAAMC,aAAaT,kBAAkB;QACnC,GAAGE,OAAO;QACVQ,UAAUb,YAAY,CAACc;YACrBP,aAAaQ,OAAO,GAAG;YACvB,MAAMP,OAAOM,MAAME,aAAa,CAAC,EAAE;YAEnCP,QAAQ;gBACNC,QAAQF,KAAKS,SAAS;gBACtBN,OAAOH,KAAKU,UAAU;YACxB;QACF,GAAG,EAAE;IACP;IAEA,OAAO;QACL,GAAGV,IAAI;QACPI;QACAL,cAAcA,aAAaQ,OAAO;IACpC;AACF"}
+{"version":3,"sources":["../src/useElementSize.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState, type RefCallback } from \"react\";\nimport { type ElementSize, type UseStateInitializer } from \"./types.js\";\nimport {\n  useResizeObserver,\n  type ResizeObserverHookOptions,\n} from \"./useResizeObserver.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSizeOptions<E extends HTMLElement>\n  extends Omit<ResizeObserverHookOptions<E>, \"onUpdate\"> {\n  /** @defaultValue `{ height: 0, width: 0 }` */\n  defaultValue?: UseStateInitializer<ElementSize>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSizeImplementation<E extends HTMLElement>\n  extends ElementSize {\n  elementRef: RefCallback<E>;\n\n  /**\n   * This will be `true` once the resize observer's callback is triggered at\n   * least once.\n   *\n   * This was added so that generating custom properties that have a reasonable\n   * default value set in css don't cause major layout shifts when a default\n   * value cannot be provided.\n   *\n   * @example\n   * ```tsx\n   * const { height, width, observedOnce }` = useElementSize();\n   * useCSSVariables(useMemo(() => {\n   *   if (!observedOnce) {\n   *     return []\n   *   }\n   *\n   *   // something that uses the element's height, width, or both\n   *   return [{ var: \"--something\", value: height / width * 0.5 }];\n   * }, [height, width, observedOnce]))\n   * ```\n   */\n  observedOnce: boolean;\n}\n\n/**\n * A small wrapper around the {@link useResizeObserver} hook to calculate the\n * element's size.\n *\n * @example Simple Example\n * ```tsx\n * import { useElementSize } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width, elementRef } = useElementSize();\n *\n *   return (\n *     <div ref={elementRef}>\n *       {`height: ${height}, width: ${width}`}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useElementSize<E extends HTMLElement>(\n  options: ElementSizeOptions<E> = {}\n): ElementSizeImplementation<E> {\n  const { defaultValue } = options;\n\n  const observedOnce = useRef(false);\n  const [size, setSize] = useState<ElementSize>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return (\n      defaultValue ?? {\n        height: 0,\n        width: 0,\n      }\n    );\n  });\n\n  const elementRef = useResizeObserver({\n    ...options,\n    onUpdate: useCallback((entry) => {\n      observedOnce.current = true;\n      const size = entry.borderBoxSize[0];\n\n      setSize({\n        height: size.blockSize,\n        width: size.inlineSize,\n      });\n    }, []),\n  });\n\n  return {\n    ...size,\n    elementRef,\n    observedOnce: observedOnce.current,\n  };\n}\n"],"names":["useCallback","useRef","useState","useResizeObserver","useElementSize","options","defaultValue","observedOnce","size","setSize","height","width","elementRef","onUpdate","entry","current","borderBoxSize","blockSize","inlineSize"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAA0B,QAAQ;AAExE,SACEC,iBAAiB,QAEZ,yBAAyB;AA0ChC;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASC,eACdC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IAEzB,MAAME,eAAeN,OAAO;IAC5B,MAAM,CAACO,MAAMC,QAAQ,GAAGP,SAAsB;QAC5C,IAAI,OAAOI,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OACEA,gBAAgB;YACdI,QAAQ;YACRC,OAAO;QACT;IAEJ;IAEA,MAAMC,aAAaT,kBAAkB;QACnC,GAAGE,OAAO;QACVQ,UAAUb,YAAY,CAACc;YACrBP,aAAaQ,OAAO,GAAG;YACvB,MAAMP,OAAOM,MAAME,aAAa,CAAC,EAAE;YAEnCP,QAAQ;gBACNC,QAAQF,KAAKS,SAAS;gBACtBN,OAAOH,KAAKU,UAAU;YACxB;QACF,GAAG,EAAE;IACP;IAEA,OAAO;QACL,GAAGV,IAAI;QACPI;QACAL,cAAcA,aAAaQ,OAAO;IACpC;AACF"}

package/dist/useEnsuredId.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredId.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/**\n * This hook is used to ensure that an `id` has been provided to a component\n * either through props or use the `useId` hook.\n *\n * @example Simple Example\n * ```tsx\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import { useEnsuredId } from \"@react-md/core\";\n *\n * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const id = useEnsuredId(props.id, \"component-name\");\n *\n *   return <div {...props} id={id} />;\n * }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport function useEnsuredId(\n  propId: string | undefined,\n  prefix: string\n): string {\n  const id = useId();\n\n  return propId ?? `${prefix}-${id}`;\n}\n"],"names":["useId","useEnsuredId","propId","prefix","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAE9B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,aACdC,MAA0B,EAC1BC,MAAc;IAEd,MAAMC,KAAKJ;IAEX,OAAOE,UAAU,CAAC,EAAEC,OAAO,CAAC,EAAEC,GAAG,CAAC;AACpC"}
+{"version":3,"sources":["../src/useEnsuredId.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/**\n * This hook is used to ensure that an `id` has been provided to a component\n * either through props or use the `useId` hook.\n *\n * @example Simple Example\n * ```tsx\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import { useEnsuredId } from \"@react-md/core\";\n *\n * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const id = useEnsuredId(props.id, \"component-name\");\n *\n *   return <div {...props} id={id} />;\n * }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport function useEnsuredId(\n  propId: string | undefined,\n  prefix: string\n): string {\n  const id = useId();\n\n  return propId ?? `${prefix}-${id}`;\n}\n"],"names":["useId","useEnsuredId","propId","prefix","id"],"mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAE9B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,aACdC,MAA0B,EAC1BC,MAAc;IAEd,MAAMC,KAAKJ;IAEX,OAAOE,UAAU,CAAC,EAAEC,OAAO,CAAC,EAAEC,GAAG,CAAC;AACpC"}

package/dist/useEnsuredRef.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredRef.ts"],"sourcesContent":["\"use client\";\nimport type { MutableRefObject, Ref, RefCallback } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { applyRef } from \"./utils/applyRef.js\";\n\n/**\n * @since 2.3.0\n * @internal\n */\nexport type EnsuredRefs<E extends HTMLElement> = readonly [\n  MutableRefObject<E | null>,\n  RefCallback<E | null>,\n];\n\n/**\n * This is mostly an internal hook that allows for an optional ref (normally\n * from props or hook options) to be merged with a hook's required `ref`. This\n * will return a MutableRefObject used for DOM manipulation in a custom hook\n * followed by a ref callback function that should be passed to the DOM node\n * that will ensure that both the optional `propRef` and hook ref are updated.\n *\n * @example Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { useEnsuredRef } from \"@react-md/core\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * export const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const [nodeRef, refHandler] = useEnsuredRef(ref);\n *   useEffect(() => {\n *     // do something with nodeRef.current\n *   }, [nodeRef])\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @since 2.3.0\n * @internal\n */\nexport function useEnsuredRef<E extends HTMLElement>(\n  propRef?: Ref<E | null>\n): EnsuredRefs<E> {\n  const ref = useRef<E | null>(null);\n  const refHandler = useCallback(\n    (instance: E | null) => {\n      applyRef(instance, propRef);\n      ref.current = instance;\n    },\n    [propRef]\n  );\n\n  return [ref, refHandler];\n}\n"],"names":["useCallback","useRef","applyRef","useEnsuredRef","propRef","ref","refHandler","instance","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAW/C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,cACdC,OAAuB;IAEvB,MAAMC,MAAMJ,OAAiB;IAC7B,MAAMK,aAAaN,YACjB,CAACO;QACCL,SAASK,UAAUH;QACnBC,IAAIG,OAAO,GAAGD;IAChB,GACA;QAACH;KAAQ;IAGX,OAAO;QAACC;QAAKC;KAAW;AAC1B"}
+{"version":3,"sources":["../src/useEnsuredRef.ts"],"sourcesContent":["\"use client\";\nimport type { MutableRefObject, Ref, RefCallback } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { applyRef } from \"./utils/applyRef.js\";\n\n/**\n * @since 2.3.0\n * @internal\n */\nexport type EnsuredRefs<E extends HTMLElement> = readonly [\n  MutableRefObject<E | null>,\n  RefCallback<E | null>,\n];\n\n/**\n * This is mostly an internal hook that allows for an optional ref (normally\n * from props or hook options) to be merged with a hook's required `ref`. This\n * will return a MutableRefObject used for DOM manipulation in a custom hook\n * followed by a ref callback function that should be passed to the DOM node\n * that will ensure that both the optional `propRef` and hook ref are updated.\n *\n * @example Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { useEnsuredRef } from \"@react-md/core\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * export const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const [nodeRef, refHandler] = useEnsuredRef(ref);\n *   useEffect(() => {\n *     // do something with nodeRef.current\n *   }, [nodeRef])\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @since 2.3.0\n * @internal\n */\nexport function useEnsuredRef<E extends HTMLElement>(\n  propRef?: Ref<E | null>\n): EnsuredRefs<E> {\n  const ref = useRef<E | null>(null);\n  const refHandler = useCallback(\n    (instance: E | null) => {\n      applyRef(instance, propRef);\n      ref.current = instance;\n    },\n    [propRef]\n  );\n\n  return [ref, refHandler];\n}\n"],"names":["useCallback","useRef","applyRef","useEnsuredRef","propRef","ref","refHandler","instance","current"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAW/C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,cACdC,OAAuB;IAEvB,MAAMC,MAAMJ,OAAiB;IAC7B,MAAMK,aAAaN,YACjB,CAACO;QACCL,SAASK,UAAUH;QACnBC,IAAIG,OAAO,GAAGD;IAChB,GACA;QAACH;KAAQ;IAGX,OAAO;QAACC;QAAKC;KAAW;AAC1B"}

package/dist/useEnsuredState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}
+{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}

package/dist/useHtmlClassName.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useHtmlClassName.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport function useHtmlClassName(className: string): void {\n  useEffect(() => {\n    if (!className) {\n      return;\n    }\n\n    const html = document.documentElement;\n    html.classList.add(className);\n    return () => {\n      html.classList.remove(className);\n    };\n  }, [className]);\n}\n"],"names":["useEffect","useHtmlClassName","className","html","document","documentElement","classList","add","remove"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAElC;;CAEC,GACD,OAAO,SAASC,iBAAiBC,SAAiB;IAChDF,UAAU;QACR,IAAI,CAACE,WAAW;YACd;QACF;QAEA,MAAMC,OAAOC,SAASC,eAAe;QACrCF,KAAKG,SAAS,CAACC,GAAG,CAACL;QACnB,OAAO;YACLC,KAAKG,SAAS,CAACE,MAAM,CAACN;QACxB;IACF,GAAG;QAACA;KAAU;AAChB"}
+{"version":3,"sources":["../src/useHtmlClassName.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport function useHtmlClassName(className: string): void {\n  useEffect(() => {\n    if (!className) {\n      return;\n    }\n\n    const html = document.documentElement;\n    html.classList.add(className);\n    return () => {\n      html.classList.remove(className);\n    };\n  }, [className]);\n}\n"],"names":["useEffect","useHtmlClassName","className","html","document","documentElement","classList","add","remove"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAElC;;CAEC,GACD,OAAO,SAASC,iBAAiBC,SAAiB;IAChDF,UAAU;QACR,IAAI,CAACE,WAAW;YACd;QACF;QAEA,MAAMC,OAAOC,SAASC,eAAe;QACrCF,KAAKG,SAAS,CAACC,GAAG,CAACL;QACnB,OAAO;YACLC,KAAKG,SAAS,CAACE,MAAM,CAACN;QACxB;IACF,GAAG;QAACA;KAAU;AAChB"}

package/dist/useIntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useIntersectionObserver.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback, RefObject } from \"react\";\nimport { useEffect } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/** @since 6.0.0 */\nexport type IntersectionObserverRoot = IntersectionObserverInit[\"root\"];\n/** @since 6.0.0 */\nexport type IntersectionObserverThreshold =\n  IntersectionObserverInit[\"threshold\"];\n/** @since 6.0.0 */\nexport type IntersectionObserverRootMargin =\n  IntersectionObserverInit[\"rootMargin\"];\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @since 6.0.0\n */\nexport interface BaseIntersectionObserverHookOptions {\n  /**\n   * This is the same as the normal `root` for an IntersectionObserverInit, but\n   * also supports refs.\n   */\n  root?: RefObject<IntersectionObserverRoot> | IntersectionObserverRoot;\n\n  /**\n   * Set this to `true` if the intersection observer behavior should be\n   * disabled.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * **When using a list of thresholds, they must either be defined outside of\n   * the component or wrapped in a `useMemo` to prevent the IntersectionObserver\n   * from being re-created each render.**\n   *\n   * @example Moving Out of Render\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example() {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   })\n   * }\n   * ```\n   *\n   * @example Wrapping in useMemo\n   * ```tsx\n   * interface ExampleProps {\n   *   min: number;\n   *   max: number;\n   * }\n   *\n   * function Example({ min, max }: ExampleProps): ReactElement {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold: useMemo(() => [min, max], [min, max]),\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   });\n   * }\n   * ```\n   *\n   * @see {@link getThreshold}\n   */\n  threshold?: IntersectionObserverThreshold;\n\n  /** @see {@link getRootMargin} */\n  rootMargin?: IntersectionObserverRootMargin;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link threshold} which is\n   * generally useful if you need access to the DOM or do some expensive\n   * computation.\n   *\n   * @example Simple Example\n   * ```tsx\n   * const targetRef = useIntersectionObserver({\n   *   getThreshold: useCallback(() => {\n   *     // pretend some expensive computation\n   *     return [0, 0.25, 0.5, 0.75, 1];\n   *   }, []),\n   *   OnUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * If this option is provided, {@link threshold}'s value will be ignored.\n   */\n  getThreshold?(): IntersectionObserverThreshold;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link rootMargin} which is\n   * generally useful if you need access to the DOM.\n   *\n   * @example Simple Example\n   * ```tsx\n   * const nodeRef = useRef<HTMLElement>();\n   * const targetRef = useIntersectionObserver({\n   *   getRootMargin: useCallback(() => {\n   *     return `-${nodeRef.current.offsetHeight - 1}px 0px 0px`;\n   *   }, []),\n   *   onUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * Note: If this option is provided, {@link rootMargin} will be ignored.\n   */\n  getRootMargin?(): IntersectionObserverRootMargin;\n}\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @since 6.0.0\n */\nexport interface IntersectionObserverHookOptions<E extends HTMLElement>\n  extends BaseIntersectionObserverHookOptions {\n  /**\n   * An optional ref to merge with the ref returned by this hook.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * @example Simple Example\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example(): ReactElement {\n   *   const [intersecting, setIntersecting] = useState(false);\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) {\n   *       setIntersecting(entry.isIntersecting);\n   *     }, []),\n   *   });\n   *\n   *   // implementation\n   * }\n   * ```\n   */\n  onUpdate(entries: readonly IntersectionObserverEntry[]): void;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * If this is defined, the {@link ref} will be ignored along with the returned\n   * ref.\n   *\n   * @example Watching Queried Elements\n   * ```tsx\n   * function Example(): ReactElement {\n   *   useIntersectionObserver({\n   *     onUpdate: useCallback((entries) => {\n   *       entries.forEach((entry) => {\n   *         // do stuff\n   *       });\n   *\n   *       setIntersectingIds(intersecting);\n   *     }, []),\n   *     getTargets: useCallback(() => {\n   *       return document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n   *     }, []),\n   *   }),\n   *\n   *   return <div {...props} />;\n   * }\n   * ```\n   */\n  getTargets?(): readonly Element[];\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example\n *\n * import { useIntersectionObserver } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * import styles from \"./Example.module.scss\";\n *\n * const numSteps = 20;\n * const thresholds = Array.from({ length: numSteps }, (_, i) => i / numSteps);\n * thresholds.push(0);\n *\n * const INCREASING = \"rgba(40, 40, 190, ratio)\";\n * const DECREASING = \"rgba(190, 40, 40, ratio)\";\n *\n * export default function Example(): ReactElement {\n *   const [{ ratio, increasing }, setState] = useState({\n *     ratio: 0.0,\n *     increasing: true,\n *   });\n *\n *   const targetRef = useIntersectionObserver({\n *     threshold: thresholds,\n *     rootMargin: \"0px\",\n *     onUpdate: useCallback(([entry]) => {\n *       const { intersectionRatio } = entry;\n *       setState((prevState) => {\n *         return {\n *           ratio: intersectionRatio,\n *           increasing: intersectionRatio > prevState.ratio,\n *         };\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <div\n *       ref={targetRef}\n *       className={styles.box}\n *       style={{\n *         backgroundColor: (increasing ? INCREASING : DECREASING).replace(\n *           \"ratio\",\n *           `${ratio}`\n *         ),\n *       }}\n *     >\n *       <div className={styles.vertical}>\n *         Welcome to <strong>The Box!</strong>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n */\nexport function useIntersectionObserver<E extends HTMLElement>(\n  options: IntersectionObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    root,\n    disabled = false,\n    onUpdate,\n    threshold,\n    rootMargin,\n    getTargets,\n    getThreshold,\n    getRootMargin,\n  } = options;\n\n  const [targetNodeRef, targetRef] = useEnsuredRef(ref);\n\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    let targets: readonly Element[] = [];\n    if (getTargets) {\n      targets = getTargets();\n    } else if (element) {\n      targets = [element];\n    }\n\n    if (disabled || !targets.length) {\n      return;\n    }\n\n    let resolvedRoot: IntersectionObserverRoot;\n    if (root && \"current\" in root) {\n      resolvedRoot = root.current;\n    } else {\n      resolvedRoot = root;\n    }\n\n    const options: IntersectionObserverInit = {\n      root: resolvedRoot,\n      threshold: (getThreshold || (() => threshold))(),\n      rootMargin: (getRootMargin || (() => rootMargin))(),\n    };\n\n    // Just like the ResizeObserver, you can see performance improvements by\n    // sharing a single intersection observer but I don't think it's worth the\n    // effort to implement here since I'd need to:\n    // - check if there is an observer with the same options\n    //   - if there is, add the callback to that existing observer\n    //   - if there isn't, create a new observer\n    // - when cleaning up, check if there are any other existing callbacks\n    //   - disconnect and remove the observer if there are none left\n    const observer = new IntersectionObserver(onUpdate, options);\n    targets.forEach((target) => {\n      observer.observe(target);\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    disabled,\n    getRootMargin,\n    getTargets,\n    getThreshold,\n    onUpdate,\n    root,\n    rootMargin,\n    targetNodeRef,\n    threshold,\n  ]);\n\n  return targetRef;\n}\n"],"names":["useEffect","useEnsuredRef","useIntersectionObserver","options","ref","root","disabled","onUpdate","threshold","rootMargin","getTargets","getThreshold","getRootMargin","targetNodeRef","targetRef","element","current","targets","length","resolvedRoot","observer","IntersectionObserver","forEach","target","observe","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AA2LnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,SAASC,wBACdC,OAA2C;IAE3C,MAAM,EACJC,GAAG,EACHC,IAAI,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,YAAY,EACZC,aAAa,EACd,GAAGT;IAEJ,MAAM,CAACU,eAAeC,UAAU,GAAGb,cAAcG;IAEjDJ,UAAU;QACR,MAAMe,UAAUF,cAAcG,OAAO;QACrC,IAAIC,UAA8B,EAAE;QACpC,IAAIP,YAAY;YACdO,UAAUP;QACZ,OAAO,IAAIK,SAAS;YAClBE,UAAU;gBAACF;aAAQ;QACrB;QAEA,IAAIT,YAAY,CAACW,QAAQC,MAAM,EAAE;YAC/B;QACF;QAEA,IAAIC;QACJ,IAAId,QAAQ,aAAaA,MAAM;YAC7Bc,eAAed,KAAKW,OAAO;QAC7B,OAAO;YACLG,eAAed;QACjB;QAEA,MAAMF,UAAoC;YACxCE,MAAMc;YACNX,WAAW,AAACG,CAAAA,gBAAiB,CAAA,IAAMH,SAAQ,CAAC;YAC5CC,YAAY,AAACG,CAAAA,iBAAkB,CAAA,IAAMH,UAAS,CAAC;QACjD;QAEA,wEAAwE;QACxE,0EAA0E;QAC1E,8CAA8C;QAC9C,wDAAwD;QACxD,8DAA8D;QAC9D,4CAA4C;QAC5C,sEAAsE;QACtE,gEAAgE;QAChE,MAAMW,WAAW,IAAIC,qBAAqBd,UAAUJ;QACpDc,QAAQK,OAAO,CAAC,CAACC;YACfH,SAASI,OAAO,CAACD;QACnB;QAEA,OAAO;YACLH,SAASK,UAAU;QACrB;IACF,GAAG;QACDnB;QACAM;QACAF;QACAC;QACAJ;QACAF;QACAI;QACAI;QACAL;KACD;IAED,OAAOM;AACT"}
+{"version":3,"sources":["../src/useIntersectionObserver.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback, RefObject } from \"react\";\nimport { useEffect } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/** @since 6.0.0 */\nexport type IntersectionObserverRoot = IntersectionObserverInit[\"root\"];\n/** @since 6.0.0 */\nexport type IntersectionObserverThreshold =\n  IntersectionObserverInit[\"threshold\"];\n/** @since 6.0.0 */\nexport type IntersectionObserverRootMargin =\n  IntersectionObserverInit[\"rootMargin\"];\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @since 6.0.0\n */\nexport interface BaseIntersectionObserverHookOptions {\n  /**\n   * This is the same as the normal `root` for an IntersectionObserverInit, but\n   * also supports refs.\n   */\n  root?: RefObject<IntersectionObserverRoot> | IntersectionObserverRoot;\n\n  /**\n   * Set this to `true` if the intersection observer behavior should be\n   * disabled.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * **When using a list of thresholds, they must either be defined outside of\n   * the component or wrapped in a `useMemo` to prevent the IntersectionObserver\n   * from being re-created each render.**\n   *\n   * @example Moving Out of Render\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example() {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   })\n   * }\n   * ```\n   *\n   * @example Wrapping in useMemo\n   * ```tsx\n   * interface ExampleProps {\n   *   min: number;\n   *   max: number;\n   * }\n   *\n   * function Example({ min, max }: ExampleProps): ReactElement {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold: useMemo(() => [min, max], [min, max]),\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   });\n   * }\n   * ```\n   *\n   * @see {@link getThreshold}\n   */\n  threshold?: IntersectionObserverThreshold;\n\n  /** @see {@link getRootMargin} */\n  rootMargin?: IntersectionObserverRootMargin;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link threshold} which is\n   * generally useful if you need access to the DOM or do some expensive\n   * computation.\n   *\n   * @example Simple Example\n   * ```tsx\n   * const targetRef = useIntersectionObserver({\n   *   getThreshold: useCallback(() => {\n   *     // pretend some expensive computation\n   *     return [0, 0.25, 0.5, 0.75, 1];\n   *   }, []),\n   *   OnUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * If this option is provided, {@link threshold}'s value will be ignored.\n   */\n  getThreshold?(): IntersectionObserverThreshold;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link rootMargin} which is\n   * generally useful if you need access to the DOM.\n   *\n   * @example Simple Example\n   * ```tsx\n   * const nodeRef = useRef<HTMLElement>();\n   * const targetRef = useIntersectionObserver({\n   *   getRootMargin: useCallback(() => {\n   *     return `-${nodeRef.current.offsetHeight - 1}px 0px 0px`;\n   *   }, []),\n   *   onUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * Note: If this option is provided, {@link rootMargin} will be ignored.\n   */\n  getRootMargin?(): IntersectionObserverRootMargin;\n}\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @since 6.0.0\n */\nexport interface IntersectionObserverHookOptions<E extends HTMLElement>\n  extends BaseIntersectionObserverHookOptions {\n  /**\n   * An optional ref to merge with the ref returned by this hook.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * @example Simple Example\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example(): ReactElement {\n   *   const [intersecting, setIntersecting] = useState(false);\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) {\n   *       setIntersecting(entry.isIntersecting);\n   *     }, []),\n   *   });\n   *\n   *   // implementation\n   * }\n   * ```\n   */\n  onUpdate(entries: readonly IntersectionObserverEntry[]): void;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * If this is defined, the {@link ref} will be ignored along with the returned\n   * ref.\n   *\n   * @example Watching Queried Elements\n   * ```tsx\n   * function Example(): ReactElement {\n   *   useIntersectionObserver({\n   *     onUpdate: useCallback((entries) => {\n   *       entries.forEach((entry) => {\n   *         // do stuff\n   *       });\n   *\n   *       setIntersectingIds(intersecting);\n   *     }, []),\n   *     getTargets: useCallback(() => {\n   *       return document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n   *     }, []),\n   *   }),\n   *\n   *   return <div {...props} />;\n   * }\n   * ```\n   */\n  getTargets?(): readonly Element[];\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example\n *\n * import { useIntersectionObserver } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * import styles from \"./Example.module.scss\";\n *\n * const numSteps = 20;\n * const thresholds = Array.from({ length: numSteps }, (_, i) => i / numSteps);\n * thresholds.push(0);\n *\n * const INCREASING = \"rgba(40, 40, 190, ratio)\";\n * const DECREASING = \"rgba(190, 40, 40, ratio)\";\n *\n * export default function Example(): ReactElement {\n *   const [{ ratio, increasing }, setState] = useState({\n *     ratio: 0.0,\n *     increasing: true,\n *   });\n *\n *   const targetRef = useIntersectionObserver({\n *     threshold: thresholds,\n *     rootMargin: \"0px\",\n *     onUpdate: useCallback(([entry]) => {\n *       const { intersectionRatio } = entry;\n *       setState((prevState) => {\n *         return {\n *           ratio: intersectionRatio,\n *           increasing: intersectionRatio > prevState.ratio,\n *         };\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <div\n *       ref={targetRef}\n *       className={styles.box}\n *       style={{\n *         backgroundColor: (increasing ? INCREASING : DECREASING).replace(\n *           \"ratio\",\n *           `${ratio}`\n *         ),\n *       }}\n *     >\n *       <div className={styles.vertical}>\n *         Welcome to <strong>The Box!</strong>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n */\nexport function useIntersectionObserver<E extends HTMLElement>(\n  options: IntersectionObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    root,\n    disabled = false,\n    onUpdate,\n    threshold,\n    rootMargin,\n    getTargets,\n    getThreshold,\n    getRootMargin,\n  } = options;\n\n  const [targetNodeRef, targetRef] = useEnsuredRef(ref);\n\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    let targets: readonly Element[] = [];\n    if (getTargets) {\n      targets = getTargets();\n    } else if (element) {\n      targets = [element];\n    }\n\n    if (disabled || !targets.length) {\n      return;\n    }\n\n    let resolvedRoot: IntersectionObserverRoot;\n    if (root && \"current\" in root) {\n      resolvedRoot = root.current;\n    } else {\n      resolvedRoot = root;\n    }\n\n    const options: IntersectionObserverInit = {\n      root: resolvedRoot,\n      threshold: (getThreshold || (() => threshold))(),\n      rootMargin: (getRootMargin || (() => rootMargin))(),\n    };\n\n    // Just like the ResizeObserver, you can see performance improvements by\n    // sharing a single intersection observer but I don't think it's worth the\n    // effort to implement here since I'd need to:\n    // - check if there is an observer with the same options\n    //   - if there is, add the callback to that existing observer\n    //   - if there isn't, create a new observer\n    // - when cleaning up, check if there are any other existing callbacks\n    //   - disconnect and remove the observer if there are none left\n    const observer = new IntersectionObserver(onUpdate, options);\n    targets.forEach((target) => {\n      observer.observe(target);\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    disabled,\n    getRootMargin,\n    getTargets,\n    getThreshold,\n    onUpdate,\n    root,\n    rootMargin,\n    targetNodeRef,\n    threshold,\n  ]);\n\n  return targetRef;\n}\n"],"names":["useEffect","useEnsuredRef","useIntersectionObserver","options","ref","root","disabled","onUpdate","threshold","rootMargin","getTargets","getThreshold","getRootMargin","targetNodeRef","targetRef","element","current","targets","length","resolvedRoot","observer","IntersectionObserver","forEach","target","observe","disconnect"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AA2LnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,SAASC,wBACdC,OAA2C;IAE3C,MAAM,EACJC,GAAG,EACHC,IAAI,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,YAAY,EACZC,aAAa,EACd,GAAGT;IAEJ,MAAM,CAACU,eAAeC,UAAU,GAAGb,cAAcG;IAEjDJ,UAAU;QACR,MAAMe,UAAUF,cAAcG,OAAO;QACrC,IAAIC,UAA8B,EAAE;QACpC,IAAIP,YAAY;YACdO,UAAUP;QACZ,OAAO,IAAIK,SAAS;YAClBE,UAAU;gBAACF;aAAQ;QACrB;QAEA,IAAIT,YAAY,CAACW,QAAQC,MAAM,EAAE;YAC/B;QACF;QAEA,IAAIC;QACJ,IAAId,QAAQ,aAAaA,MAAM;YAC7Bc,eAAed,KAAKW,OAAO;QAC7B,OAAO;YACLG,eAAed;QACjB;QAEA,MAAMF,UAAoC;YACxCE,MAAMc;YACNX,WAAW,AAACG,CAAAA,gBAAiB,CAAA,IAAMH,SAAQ,CAAC;YAC5CC,YAAY,AAACG,CAAAA,iBAAkB,CAAA,IAAMH,UAAS,CAAC;QACjD;QAEA,wEAAwE;QACxE,0EAA0E;QAC1E,8CAA8C;QAC9C,wDAAwD;QACxD,8DAA8D;QAC9D,4CAA4C;QAC5C,sEAAsE;QACtE,gEAAgE;QAChE,MAAMW,WAAW,IAAIC,qBAAqBd,UAAUJ;QACpDc,QAAQK,OAAO,CAAC,CAACC;YACfH,SAASI,OAAO,CAACD;QACnB;QAEA,OAAO;YACLH,SAASK,UAAU;QACrB;IACF,GAAG;QACDnB;QACAM;QACAF;QACAC;QACAJ;QACAF;QACAI;QACAI;QACAL;KACD;IAED,OAAOM;AACT"}

package/dist/useIsomorphicLayoutEffect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * This is copy/pasted from react-redux which has some more information about\n * this and how to fix \"invalid\" warnings while running tests.\n *\n * @see {@link https://github.com/reduxjs/react-redux/blob/4c907c0870c6b9a136dd69be294c17d1dc63c8f5/src/utils/useIsomorphicLayoutEffect.js}\n */\nexport const useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" &&\n  typeof window.document !== \"undefined\" &&\n  typeof window.document.createElement !== \"undefined\"\n    ? useLayoutEffect\n    : useEffect;\n"],"names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","window","document","createElement"],"rangeMappings":";;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,eAAe,QAAQ,QAAQ;AAEnD;;;;;CAKC,GACD,OAAO,MAAMC,4BACX,OAAOC,WAAW,eAClB,OAAOA,OAAOC,QAAQ,KAAK,eAC3B,OAAOD,OAAOC,QAAQ,CAACC,aAAa,KAAK,cACrCJ,kBACAD,UAAU"}
+{"version":3,"sources":["../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * This is copy/pasted from react-redux which has some more information about\n * this and how to fix \"invalid\" warnings while running tests.\n *\n * @see {@link https://github.com/reduxjs/react-redux/blob/4c907c0870c6b9a136dd69be294c17d1dc63c8f5/src/utils/useIsomorphicLayoutEffect.js}\n */\nexport const useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" &&\n  typeof window.document !== \"undefined\" &&\n  typeof window.document.createElement !== \"undefined\"\n    ? useLayoutEffect\n    : useEffect;\n"],"names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","window","document","createElement"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,eAAe,QAAQ,QAAQ;AAEnD;;;;;CAKC,GACD,OAAO,MAAMC,4BACX,OAAOC,WAAW,eAClB,OAAOA,OAAOC,QAAQ,KAAK,eAC3B,OAAOD,OAAOC,QAAQ,CAACC,aAAa,KAAK,cACrCJ,kBACAD,UAAU"}

package/dist/useLocalStorage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useLocalStorage.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\nimport { identity } from \"./utils/identity.js\";\n\n/** @since 6.0.0 */\nexport type LocalStorageSerializer<T> = (value: T) => string;\n/** @since 6.0.0 */\nexport type LocalStorageDeserializer<T> = (item: string) => T;\n\n/** @since 6.0.0 */\nexport interface LocalStorageHookOptions<T> {\n  /**\n   * The local storage key name to use.\n   *\n   * This can be set to an empty string for internal usage of conditionally\n   * saving items to local storage.\n   */\n  key: string;\n\n  /**\n   * The default value to use if an item does not exist in local storage.\n   */\n  defaultValue: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if the `value` should not persist to local storage\n   * immediately whenever it changes. You will manually need to call\n   * {@link LocalStorageHookReturnValue.persist} instead.\n   *\n   * @see {@link LocalStorageHookReturnValue.persist} for an example.\n   * @defaultValue `false`\n   */\n  manual?: boolean;\n\n  /**\n   * Set this to `true` to update:\n   *\n   * - the default {@link serializer} to be:\n   * ```\n   * typeof value === \"string\" ? value : `${value}`\n   * ```\n   * - the default {@link deserializer} to not call `JSON.parse` if the\n   *   {@link defaultValue} is a string.\n   *\n   * @defaultValue `typeof defaultValue === 'string'`\n   */\n  raw?: boolean;\n\n  /**\n   * An optional function to serialize the `value` before storing it in local\n   * storage.\n   *\n   * @defaultValue `JSON.stringify`\n   */\n  serializer?: LocalStorageSerializer<T>;\n\n  /**\n   * An optional function to deserialize the `value` if the item existed in\n   * local storage.\n   *\n   * @defaultValue `JSON.parse`\n   */\n  deserializer?: LocalStorageDeserializer<T>;\n}\n\n/**\n * @since 6.0.0\n */\nexport const defaultLocalStorageSerializer = <T>(value: T): string =>\n  typeof value === \"string\" ? value : `${value}`;\n\n/** @since 6.0.0 */\nexport interface GetItemFromStorageOptions<T> {\n  /**\n   * The storage key to use\n   */\n  key: string;\n\n  /**\n   * A value to use when the {@link key} does not exist in storage or there is\n   * an error deserializing the value.\n   */\n  fallback: T;\n\n  /** @see {@link LocalStorageHookOptions.deserializer} */\n  deserializer?: LocalStorageDeserializer<T>;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * const item1 = getItemFromStorage({\n *   key: \"testKey\",\n *   fallback: values[0],\n *   deserializer(item) {\n *     if (!values.includes(item)) {\n *       return values[0]\n *     }\n *\n *     return item;\n *   },\n * });\n *\n * const item2 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n * });\n *\n * const item3 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const getItemFromStorage = <T>(\n  options: GetItemFromStorageOptions<T>\n): T => {\n  const {\n    key,\n    fallback,\n    storage = localStorage,\n    deserializer = JSON.parse,\n  } = options;\n  if (!key) {\n    return fallback;\n  }\n\n  try {\n    const value = storage.getItem(key);\n    return !value ? fallback : deserializer(value);\n  } catch (e) {\n    return fallback;\n  }\n};\n\n/** @since 6.0.0 */\nexport interface SetItemInStorageOptions<T> {\n  key: string;\n  value: T;\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n\n  /** @see {@link LocalStorageHookOptions.serializer} */\n  serializer?: LocalStorageSerializer<T>;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { identity, getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * setItemInStorage({\n *   key: \"testKey\",\n *   value: values[0],\n *   // store string value as-is\n *   serializer: identity,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const setItemInStorage = <T>(\n  options: SetItemInStorageOptions<T>\n): void => {\n  const {\n    key,\n    value,\n    storage = localStorage,\n    serializer = JSON.stringify,\n  } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.setItem(key, serializer(value));\n  } catch {\n    //\n  }\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface RemoveItemFromStorageOptions {\n  key: string;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const removeItemFromStorage = (\n  options: RemoveItemFromStorageOptions\n): void => {\n  const { key, storage = localStorage } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.removeItem(key);\n  } catch {\n    // do nothing\n  }\n};\n\n/** @since 6.0.0 */\nexport interface LocalStorageHookReturnValue<T> {\n  value: T;\n\n  /**\n   * Updates the {@link value} in state. When the\n   * {@link LocalStorageHookOptions.manual} option is `false`, the value will\n   * also be updated in local storage immediately.\n   */\n  setValue: UseStateSetter<T>;\n\n  /**\n   * Remove the item from local storage.\n   */\n  remove(): void;\n\n  /**\n   * Manually persist the current {@link value} into local storage. This is only\n   * useful if the {@link LocalStorageHookOptions.manual} option is `true`.\n   *\n   * @example Manual Persisting\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { value, setValue, persist } = useLocalStorage({\n   *     key: \"someKey\",\n   *     manual: true,\n   *     defaultValue: \"\",\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button onClick={closeDialog}>\n   *         Cancel\n   *       </Button>\n   *       <Button\n   *         onClick={async () => {\n   *           await saveToDatabase(value);\n   *           persist();\n   *           closeDialog();\n   *         }}\n   *       >\n   *         Confirm\n   *       </Button>\n   *     </>\n   *   );\n   * }\n   * ```\n   */\n  persist(): void;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage({\n *     key: \"savedSearch\",\n *     defaultValue: \"\",\n *   });\n *\n *   return (\n *     <TextField\n *       label=\"Search\"\n *       placeholder=\"Search...\"\n *       type=\"search\"\n *       value={value}\n *       onChange={(event) => {\n *         setValue(event.currentTarget.value)\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @example Type-safe Objects\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useLocalStorage } from \"@react-md/core\";\n *\n * interface ExpectedSchema {\n *   label: string;\n *   value: string;\n *   // others\n * }\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage<ExpectedSchema | null>({\n *     key: \"someKey\",\n *     defaultValue: null,\n *\n *     // this is optional: you can create a custom deserializer to validate\n *     // the stored value to prevent people manually updating local storage in\n *     // the dev tools\n *     deserializer(item) {\n *       const parsed = JSON.parse(item):\n *       const { label, value } = parsed;\n *       if (typeof label !== 'string' || typeof value !== 'string') {\n *         return null;\n *       }\n *\n *       return { label, value };\n *     }\n *   });\n *\n *   // do something\n *   // value will be `ExpectedSchema | null`\n * }\n * ```\n *\n * @example Manual Persistence\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Button, Checkbox, Form, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     manual: true,\n *     defaultValue: false,\n *   });\n *\n *   return (\n *     <Form\n *       onSubmit={() => {\n *         // current value will be saved into local storage\n *         persist();\n *       }}\n *       onReset={() => {\n *         // \"someKey\" will be removed from local storage\n *         remove();\n *       }}\n *     >\n *       <Checkbox\n *         label=\"Allow cookies\"\n *         checked={value}\n *         onChange={(event) =>\n *           setValue(event.currentTarget.checked);\n *         }\n *       />\n *       <Button type=\"reset\">Decline</Button>\n *       <Button type=\"submit\">Save</Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * Note: Using the same local storage key in multiple parts in your app will not\n * update all instances with that value. The value will only be updated if it\n * was updated in a separate tab with the `\"storage\"` event. You must setup your\n * own context to share values or another state manager solution.\n *\n * @example Shared Value\n * ```tsx\n * const context = createContext(null);\n * const { Provider } = context;\n *\n * export function useSomeValue(): string {\n *   const value = useContext(context);\n *   if (!value) {\n *     throw new Error()\n *   }\n *\n *   return value;\n * }\n *\n * function Example({ children }: { children: ReactNode }) {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     defaultValue: \"\",\n *\n *     // optional\n *     manual: true,\n *   });\n *\n *   return (\n *     <Provider\n *       value={useMemo(() => ({\n *         value,\n *         setValue,\n *\n *         // remove and persist are optional\n *         remove,\n *         persist,\n *       }), [value, setValue, remove, persist])}\n *     >\n *       {children}\n *     </Provider>\n *   );\n * }\n *\n * function SomeChildComponent() {\n *   const { value, setValue } = useSomeValue();\n *   // do stuff\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useLocalStorage<T>(\n  options: LocalStorageHookOptions<T>\n): LocalStorageHookReturnValue<T> {\n  const { key, defaultValue, manual = false } = options;\n\n  const [initialValue] = useState(defaultValue);\n  // this allows for strings to automatically be stored as-is instead of adding\n  // additional quotes around then with JSON.stringify\n  const raw = options.raw ?? typeof initialValue === \"string\";\n  const serializer =\n    options.serializer ??\n    (raw ? defaultLocalStorageSerializer : JSON.stringify);\n  const deserializer =\n    options.deserializer ??\n    (raw && typeof initialValue === \"string\" ? identity : JSON.parse);\n\n  const ssr = useSsr();\n  const [value, setStoredValue] = useState<T>(() => {\n    if (ssr) {\n      return initialValue;\n    }\n\n    const value = getItemFromStorage({\n      key,\n      fallback: initialValue,\n      deserializer,\n    });\n    if (!manual) {\n      setItemInStorage({\n        key,\n        value,\n        serializer,\n      });\n    }\n\n    return value;\n  });\n  const config = useRef({\n    key,\n    value,\n    manual,\n    serializer,\n    deserializer,\n    defaultValue: initialValue,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    config.current = {\n      key,\n      value,\n      manual,\n      serializer,\n      deserializer,\n      defaultValue: initialValue,\n    };\n  });\n\n  const setValue = useCallback<UseStateSetter<T>>((valueOrDispatcher) => {\n    const { key, manual, serializer } = config.current;\n    setStoredValue((prevValue) => {\n      const nextValue =\n        valueOrDispatcher instanceof Function\n          ? valueOrDispatcher(prevValue)\n          : valueOrDispatcher;\n\n      if (!manual) {\n        setItemInStorage({\n          key,\n          value: nextValue,\n          serializer,\n        });\n      }\n\n      return nextValue;\n    });\n  }, []);\n\n  const remove = useCallback(() => {\n    removeItemFromStorage({\n      key: config.current.key,\n    });\n  }, []);\n\n  const persist = useCallback(() => {\n    const { key, value, serializer } = config.current;\n    setItemInStorage({\n      key,\n      value,\n      serializer,\n    });\n  }, []);\n\n  useEffect(() => {\n    const { defaultValue, deserializer, manual } = config.current;\n    if (manual || !ssr) {\n      return;\n    }\n\n    setValue(\n      getItemFromStorage({\n        key,\n        fallback: defaultValue,\n        deserializer,\n      })\n    );\n  }, [key, ssr, setValue]);\n\n  // update the value if another tab changed the local storage value\n  useEffect(() => {\n    if (!key) {\n      return;\n    }\n\n    const callback = (event: StorageEvent): void => {\n      const { defaultValue, deserializer } = config.current;\n      if (event.key === key) {\n        setStoredValue(\n          getItemFromStorage({\n            key,\n            fallback: defaultValue,\n            deserializer,\n          })\n        );\n      }\n    };\n\n    window.addEventListener(\"storage\", callback);\n    return () => {\n      window.removeEventListener(\"storage\", callback);\n    };\n  }, [key]);\n\n  return {\n    value,\n    setValue,\n    remove,\n    persist,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useSsr","useIsomorphicLayoutEffect","identity","defaultLocalStorageSerializer","value","getItemFromStorage","options","key","fallback","storage","localStorage","deserializer","JSON","parse","getItem","e","setItemInStorage","serializer","stringify","setItem","removeItemFromStorage","removeItem","useLocalStorage","defaultValue","manual","initialValue","raw","ssr","setStoredValue","config","current","setValue","valueOrDispatcher","prevValue","nextValue","Function","remove","persist","callback","event","window","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SAASC,yBAAyB,QAAQ,iCAAiC;AAC3E,SAASC,QAAQ,QAAQ,sBAAsB;AA+D/C;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAAIC,QAC/C,OAAOA,UAAU,WAAWA,QAAQ,CAAC,EAAEA,MAAM,CAAC,CAAC;AAsBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,qBAAqB,CAChCC;IAEA,MAAM,EACJC,GAAG,EACHC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,eAAeC,KAAKC,KAAK,EAC1B,GAAGP;IACJ,IAAI,CAACC,KAAK;QACR,OAAOC;IACT;IAEA,IAAI;QACF,MAAMJ,QAAQK,QAAQK,OAAO,CAACP;QAC9B,OAAO,CAACH,QAAQI,WAAWG,aAAaP;IAC1C,EAAE,OAAOW,GAAG;QACV,OAAOP;IACT;AACF,EAAE;AAaF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMQ,mBAAmB,CAC9BV;IAEA,MAAM,EACJC,GAAG,EACHH,KAAK,EACLK,UAAUC,YAAY,EACtBO,aAAaL,KAAKM,SAAS,EAC5B,GAAGZ;IACJ,IAAI,CAACC,KAAK;QACR;IACF;IAEA,IAAI;QACFE,QAAQU,OAAO,CAACZ,KAAKU,WAAWb;IAClC,EAAE,OAAM;IACN,EAAE;IACJ;AACF,EAAE;AAaF;;;CAGC,GACD,OAAO,MAAMgB,wBAAwB,CACnCd;IAEA,MAAM,EAAEC,GAAG,EAAEE,UAAUC,YAAY,EAAE,GAAGJ;IACxC,IAAI,CAACC,KAAK;QACR;IACF;IAEA,IAAI;QACFE,QAAQY,UAAU,CAACd;IACrB,EAAE,OAAM;IACN,aAAa;IACf;AACF,EAAE;AAuDF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJC,GACD,OAAO,SAASe,gBACdhB,OAAmC;IAEnC,MAAM,EAAEC,GAAG,EAAEgB,YAAY,EAAEC,SAAS,KAAK,EAAE,GAAGlB;IAE9C,MAAM,CAACmB,aAAa,GAAG1B,SAASwB;IAChC,6EAA6E;IAC7E,oDAAoD;IACpD,MAAMG,MAAMpB,QAAQoB,GAAG,IAAI,OAAOD,iBAAiB;IACnD,MAAMR,aACJX,QAAQW,UAAU,IACjBS,CAAAA,MAAMvB,gCAAgCS,KAAKM,SAAS,AAAD;IACtD,MAAMP,eACJL,QAAQK,YAAY,IACnBe,CAAAA,OAAO,OAAOD,iBAAiB,WAAWvB,WAAWU,KAAKC,KAAK,AAAD;IAEjE,MAAMc,MAAM3B;IACZ,MAAM,CAACI,OAAOwB,eAAe,GAAG7B,SAAY;QAC1C,IAAI4B,KAAK;YACP,OAAOF;QACT;QAEA,MAAMrB,QAAQC,mBAAmB;YAC/BE;YACAC,UAAUiB;YACVd;QACF;QACA,IAAI,CAACa,QAAQ;YACXR,iBAAiB;gBACfT;gBACAH;gBACAa;YACF;QACF;QAEA,OAAOb;IACT;IACA,MAAMyB,SAAS/B,OAAO;QACpBS;QACAH;QACAoB;QACAP;QACAN;QACAY,cAAcE;IAChB;IACAxB,0BAA0B;QACxB4B,OAAOC,OAAO,GAAG;YACfvB;YACAH;YACAoB;YACAP;YACAN;YACAY,cAAcE;QAChB;IACF;IAEA,MAAMM,WAAWnC,YAA+B,CAACoC;QAC/C,MAAM,EAAEzB,GAAG,EAAEiB,MAAM,EAAEP,UAAU,EAAE,GAAGY,OAAOC,OAAO;QAClDF,eAAe,CAACK;YACd,MAAMC,YACJF,6BAA6BG,WACzBH,kBAAkBC,aAClBD;YAEN,IAAI,CAACR,QAAQ;gBACXR,iBAAiB;oBACfT;oBACAH,OAAO8B;oBACPjB;gBACF;YACF;YAEA,OAAOiB;QACT;IACF,GAAG,EAAE;IAEL,MAAME,SAASxC,YAAY;QACzBwB,sBAAsB;YACpBb,KAAKsB,OAAOC,OAAO,CAACvB,GAAG;QACzB;IACF,GAAG,EAAE;IAEL,MAAM8B,UAAUzC,YAAY;QAC1B,MAAM,EAAEW,GAAG,EAAEH,KAAK,EAAEa,UAAU,EAAE,GAAGY,OAAOC,OAAO;QACjDd,iBAAiB;YACfT;YACAH;YACAa;QACF;IACF,GAAG,EAAE;IAELpB,UAAU;QACR,MAAM,EAAE0B,YAAY,EAAEZ,YAAY,EAAEa,MAAM,EAAE,GAAGK,OAAOC,OAAO;QAC7D,IAAIN,UAAU,CAACG,KAAK;YAClB;QACF;QAEAI,SACE1B,mBAAmB;YACjBE;YACAC,UAAUe;YACVZ;QACF;IAEJ,GAAG;QAACJ;QAAKoB;QAAKI;KAAS;IAEvB,kEAAkE;IAClElC,UAAU;QACR,IAAI,CAACU,KAAK;YACR;QACF;QAEA,MAAM+B,WAAW,CAACC;YAChB,MAAM,EAAEhB,YAAY,EAAEZ,YAAY,EAAE,GAAGkB,OAAOC,OAAO;YACrD,IAAIS,MAAMhC,GAAG,KAAKA,KAAK;gBACrBqB,eACEvB,mBAAmB;oBACjBE;oBACAC,UAAUe;oBACVZ;gBACF;YAEJ;QACF;QAEA6B,OAAOC,gBAAgB,CAAC,WAAWH;QACnC,OAAO;YACLE,OAAOE,mBAAmB,CAAC,WAAWJ;QACxC;IACF,GAAG;QAAC/B;KAAI;IAER,OAAO;QACLH;QACA2B;QACAK;QACAC;IACF;AACF"}
+{"version":3,"sources":["../src/useLocalStorage.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\nimport { identity } from \"./utils/identity.js\";\n\n/** @since 6.0.0 */\nexport type LocalStorageSerializer<T> = (value: T) => string;\n/** @since 6.0.0 */\nexport type LocalStorageDeserializer<T> = (item: string) => T;\n\n/** @since 6.0.0 */\nexport interface LocalStorageHookOptions<T> {\n  /**\n   * The local storage key name to use.\n   *\n   * This can be set to an empty string for internal usage of conditionally\n   * saving items to local storage.\n   */\n  key: string;\n\n  /**\n   * The default value to use if an item does not exist in local storage.\n   */\n  defaultValue: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if the `value` should not persist to local storage\n   * immediately whenever it changes. You will manually need to call\n   * {@link LocalStorageHookReturnValue.persist} instead.\n   *\n   * @see {@link LocalStorageHookReturnValue.persist} for an example.\n   * @defaultValue `false`\n   */\n  manual?: boolean;\n\n  /**\n   * Set this to `true` to update:\n   *\n   * - the default {@link serializer} to be:\n   * ```\n   * typeof value === \"string\" ? value : `${value}`\n   * ```\n   * - the default {@link deserializer} to not call `JSON.parse` if the\n   *   {@link defaultValue} is a string.\n   *\n   * @defaultValue `typeof defaultValue === 'string'`\n   */\n  raw?: boolean;\n\n  /**\n   * An optional function to serialize the `value` before storing it in local\n   * storage.\n   *\n   * @defaultValue `JSON.stringify`\n   */\n  serializer?: LocalStorageSerializer<T>;\n\n  /**\n   * An optional function to deserialize the `value` if the item existed in\n   * local storage.\n   *\n   * @defaultValue `JSON.parse`\n   */\n  deserializer?: LocalStorageDeserializer<T>;\n}\n\n/**\n * @since 6.0.0\n */\nexport const defaultLocalStorageSerializer = <T>(value: T): string =>\n  typeof value === \"string\" ? value : `${value}`;\n\n/** @since 6.0.0 */\nexport interface GetItemFromStorageOptions<T> {\n  /**\n   * The storage key to use\n   */\n  key: string;\n\n  /**\n   * A value to use when the {@link key} does not exist in storage or there is\n   * an error deserializing the value.\n   */\n  fallback: T;\n\n  /** @see {@link LocalStorageHookOptions.deserializer} */\n  deserializer?: LocalStorageDeserializer<T>;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * const item1 = getItemFromStorage({\n *   key: \"testKey\",\n *   fallback: values[0],\n *   deserializer(item) {\n *     if (!values.includes(item)) {\n *       return values[0]\n *     }\n *\n *     return item;\n *   },\n * });\n *\n * const item2 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n * });\n *\n * const item3 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const getItemFromStorage = <T>(\n  options: GetItemFromStorageOptions<T>\n): T => {\n  const {\n    key,\n    fallback,\n    storage = localStorage,\n    deserializer = JSON.parse,\n  } = options;\n  if (!key) {\n    return fallback;\n  }\n\n  try {\n    const value = storage.getItem(key);\n    return !value ? fallback : deserializer(value);\n  } catch (e) {\n    return fallback;\n  }\n};\n\n/** @since 6.0.0 */\nexport interface SetItemInStorageOptions<T> {\n  key: string;\n  value: T;\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n\n  /** @see {@link LocalStorageHookOptions.serializer} */\n  serializer?: LocalStorageSerializer<T>;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { identity, getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * setItemInStorage({\n *   key: \"testKey\",\n *   value: values[0],\n *   // store string value as-is\n *   serializer: identity,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const setItemInStorage = <T>(\n  options: SetItemInStorageOptions<T>\n): void => {\n  const {\n    key,\n    value,\n    storage = localStorage,\n    serializer = JSON.stringify,\n  } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.setItem(key, serializer(value));\n  } catch {\n    //\n  }\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface RemoveItemFromStorageOptions {\n  key: string;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const removeItemFromStorage = (\n  options: RemoveItemFromStorageOptions\n): void => {\n  const { key, storage = localStorage } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.removeItem(key);\n  } catch {\n    // do nothing\n  }\n};\n\n/** @since 6.0.0 */\nexport interface LocalStorageHookReturnValue<T> {\n  value: T;\n\n  /**\n   * Updates the {@link value} in state. When the\n   * {@link LocalStorageHookOptions.manual} option is `false`, the value will\n   * also be updated in local storage immediately.\n   */\n  setValue: UseStateSetter<T>;\n\n  /**\n   * Remove the item from local storage.\n   */\n  remove(): void;\n\n  /**\n   * Manually persist the current {@link value} into local storage. This is only\n   * useful if the {@link LocalStorageHookOptions.manual} option is `true`.\n   *\n   * @example Manual Persisting\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { value, setValue, persist } = useLocalStorage({\n   *     key: \"someKey\",\n   *     manual: true,\n   *     defaultValue: \"\",\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button onClick={closeDialog}>\n   *         Cancel\n   *       </Button>\n   *       <Button\n   *         onClick={async () => {\n   *           await saveToDatabase(value);\n   *           persist();\n   *           closeDialog();\n   *         }}\n   *       >\n   *         Confirm\n   *       </Button>\n   *     </>\n   *   );\n   * }\n   * ```\n   */\n  persist(): void;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage({\n *     key: \"savedSearch\",\n *     defaultValue: \"\",\n *   });\n *\n *   return (\n *     <TextField\n *       label=\"Search\"\n *       placeholder=\"Search...\"\n *       type=\"search\"\n *       value={value}\n *       onChange={(event) => {\n *         setValue(event.currentTarget.value)\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @example Type-safe Objects\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useLocalStorage } from \"@react-md/core\";\n *\n * interface ExpectedSchema {\n *   label: string;\n *   value: string;\n *   // others\n * }\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage<ExpectedSchema | null>({\n *     key: \"someKey\",\n *     defaultValue: null,\n *\n *     // this is optional: you can create a custom deserializer to validate\n *     // the stored value to prevent people manually updating local storage in\n *     // the dev tools\n *     deserializer(item) {\n *       const parsed = JSON.parse(item):\n *       const { label, value } = parsed;\n *       if (typeof label !== 'string' || typeof value !== 'string') {\n *         return null;\n *       }\n *\n *       return { label, value };\n *     }\n *   });\n *\n *   // do something\n *   // value will be `ExpectedSchema | null`\n * }\n * ```\n *\n * @example Manual Persistence\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Button, Checkbox, Form, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     manual: true,\n *     defaultValue: false,\n *   });\n *\n *   return (\n *     <Form\n *       onSubmit={() => {\n *         // current value will be saved into local storage\n *         persist();\n *       }}\n *       onReset={() => {\n *         // \"someKey\" will be removed from local storage\n *         remove();\n *       }}\n *     >\n *       <Checkbox\n *         label=\"Allow cookies\"\n *         checked={value}\n *         onChange={(event) =>\n *           setValue(event.currentTarget.checked);\n *         }\n *       />\n *       <Button type=\"reset\">Decline</Button>\n *       <Button type=\"submit\">Save</Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * Note: Using the same local storage key in multiple parts in your app will not\n * update all instances with that value. The value will only be updated if it\n * was updated in a separate tab with the `\"storage\"` event. You must setup your\n * own context to share values or another state manager solution.\n *\n * @example Shared Value\n * ```tsx\n * const context = createContext(null);\n * const { Provider } = context;\n *\n * export function useSomeValue(): string {\n *   const value = useContext(context);\n *   if (!value) {\n *     throw new Error()\n *   }\n *\n *   return value;\n * }\n *\n * function Example({ children }: { children: ReactNode }) {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     defaultValue: \"\",\n *\n *     // optional\n *     manual: true,\n *   });\n *\n *   return (\n *     <Provider\n *       value={useMemo(() => ({\n *         value,\n *         setValue,\n *\n *         // remove and persist are optional\n *         remove,\n *         persist,\n *       }), [value, setValue, remove, persist])}\n *     >\n *       {children}\n *     </Provider>\n *   );\n * }\n *\n * function SomeChildComponent() {\n *   const { value, setValue } = useSomeValue();\n *   // do stuff\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useLocalStorage<T>(\n  options: LocalStorageHookOptions<T>\n): LocalStorageHookReturnValue<T> {\n  const { key, defaultValue, manual = false } = options;\n\n  const [initialValue] = useState(defaultValue);\n  // this allows for strings to automatically be stored as-is instead of adding\n  // additional quotes around then with JSON.stringify\n  const raw = options.raw ?? typeof initialValue === \"string\";\n  const serializer =\n    options.serializer ??\n    (raw ? defaultLocalStorageSerializer : JSON.stringify);\n  const deserializer =\n    options.deserializer ??\n    (raw && typeof initialValue === \"string\" ? identity : JSON.parse);\n\n  const ssr = useSsr();\n  const [value, setStoredValue] = useState<T>(() => {\n    if (ssr) {\n      return initialValue;\n    }\n\n    const value = getItemFromStorage({\n      key,\n      fallback: initialValue,\n      deserializer,\n    });\n    if (!manual) {\n      setItemInStorage({\n        key,\n        value,\n        serializer,\n      });\n    }\n\n    return value;\n  });\n  const config = useRef({\n    key,\n    value,\n    manual,\n    serializer,\n    deserializer,\n    defaultValue: initialValue,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    config.current = {\n      key,\n      value,\n      manual,\n      serializer,\n      deserializer,\n      defaultValue: initialValue,\n    };\n  });\n\n  const setValue = useCallback<UseStateSetter<T>>((valueOrDispatcher) => {\n    const { key, manual, serializer } = config.current;\n    setStoredValue((prevValue) => {\n      const nextValue =\n        valueOrDispatcher instanceof Function\n          ? valueOrDispatcher(prevValue)\n          : valueOrDispatcher;\n\n      if (!manual) {\n        setItemInStorage({\n          key,\n          value: nextValue,\n          serializer,\n        });\n      }\n\n      return nextValue;\n    });\n  }, []);\n\n  const remove = useCallback(() => {\n    removeItemFromStorage({\n      key: config.current.key,\n    });\n  }, []);\n\n  const persist = useCallback(() => {\n    const { key, value, serializer } = config.current;\n    setItemInStorage({\n      key,\n      value,\n      serializer,\n    });\n  }, []);\n\n  useEffect(() => {\n    const { defaultValue, deserializer, manual } = config.current;\n    if (manual || !ssr) {\n      return;\n    }\n\n    setValue(\n      getItemFromStorage({\n        key,\n        fallback: defaultValue,\n        deserializer,\n      })\n    );\n  }, [key, ssr, setValue]);\n\n  // update the value if another tab changed the local storage value\n  useEffect(() => {\n    if (!key) {\n      return;\n    }\n\n    const callback = (event: StorageEvent): void => {\n      const { defaultValue, deserializer } = config.current;\n      if (event.key === key) {\n        setStoredValue(\n          getItemFromStorage({\n            key,\n            fallback: defaultValue,\n            deserializer,\n          })\n        );\n      }\n    };\n\n    window.addEventListener(\"storage\", callback);\n    return () => {\n      window.removeEventListener(\"storage\", callback);\n    };\n  }, [key]);\n\n  return {\n    value,\n    setValue,\n    remove,\n    persist,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useSsr","useIsomorphicLayoutEffect","identity","defaultLocalStorageSerializer","value","getItemFromStorage","options","key","fallback","storage","localStorage","deserializer","JSON","parse","getItem","e","setItemInStorage","serializer","stringify","setItem","removeItemFromStorage","removeItem","useLocalStorage","defaultValue","manual","initialValue","raw","ssr","setStoredValue","config","current","setValue","valueOrDispatcher","prevValue","nextValue","Function","remove","persist","callback","event","window","addEventListener","removeEventListener"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SAASC,yBAAyB,QAAQ,iCAAiC;AAC3E,SAASC,QAAQ,QAAQ,sBAAsB;AA+D/C;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAAIC,QAC/C,OAAOA,UAAU,WAAWA,QAAQ,CAAC,EAAEA,MAAM,CAAC,CAAC;AAsBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,qBAAqB,CAChCC;IAEA,MAAM,EACJC,GAAG,EACHC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,eAAeC,KAAKC,KAAK,EAC1B,GAAGP;IACJ,IAAI,CAACC,KAAK;QACR,OAAOC;IACT;IAEA,IAAI;QACF,MAAMJ,QAAQK,QAAQK,OAAO,CAACP;QAC9B,OAAO,CAACH,QAAQI,WAAWG,aAAaP;IAC1C,EAAE,OAAOW,GAAG;QACV,OAAOP;IACT;AACF,EAAE;AAaF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMQ,mBAAmB,CAC9BV;IAEA,MAAM,EACJC,GAAG,EACHH,KAAK,EACLK,UAAUC,YAAY,EACtBO,aAAaL,KAAKM,SAAS,EAC5B,GAAGZ;IACJ,IAAI,CAACC,KAAK;QACR;IACF;IAEA,IAAI;QACFE,QAAQU,OAAO,CAACZ,KAAKU,WAAWb;IAClC,EAAE,OAAM;IACN,EAAE;IACJ;AACF,EAAE;AAaF;;;CAGC,GACD,OAAO,MAAMgB,wBAAwB,CACnCd;IAEA,MAAM,EAAEC,GAAG,EAAEE,UAAUC,YAAY,EAAE,GAAGJ;IACxC,IAAI,CAACC,KAAK;QACR;IACF;IAEA,IAAI;QACFE,QAAQY,UAAU,CAACd;IACrB,EAAE,OAAM;IACN,aAAa;IACf;AACF,EAAE;AAuDF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJC,GACD,OAAO,SAASe,gBACdhB,OAAmC;IAEnC,MAAM,EAAEC,GAAG,EAAEgB,YAAY,EAAEC,SAAS,KAAK,EAAE,GAAGlB;IAE9C,MAAM,CAACmB,aAAa,GAAG1B,SAASwB;IAChC,6EAA6E;IAC7E,oDAAoD;IACpD,MAAMG,MAAMpB,QAAQoB,GAAG,IAAI,OAAOD,iBAAiB;IACnD,MAAMR,aACJX,QAAQW,UAAU,IACjBS,CAAAA,MAAMvB,gCAAgCS,KAAKM,SAAS,AAAD;IACtD,MAAMP,eACJL,QAAQK,YAAY,IACnBe,CAAAA,OAAO,OAAOD,iBAAiB,WAAWvB,WAAWU,KAAKC,KAAK,AAAD;IAEjE,MAAMc,MAAM3B;IACZ,MAAM,CAACI,OAAOwB,eAAe,GAAG7B,SAAY;QAC1C,IAAI4B,KAAK;YACP,OAAOF;QACT;QAEA,MAAMrB,QAAQC,mBAAmB;YAC/BE;YACAC,UAAUiB;YACVd;QACF;QACA,IAAI,CAACa,QAAQ;YACXR,iBAAiB;gBACfT;gBACAH;gBACAa;YACF;QACF;QAEA,OAAOb;IACT;IACA,MAAMyB,SAAS/B,OAAO;QACpBS;QACAH;QACAoB;QACAP;QACAN;QACAY,cAAcE;IAChB;IACAxB,0BAA0B;QACxB4B,OAAOC,OAAO,GAAG;YACfvB;YACAH;YACAoB;YACAP;YACAN;YACAY,cAAcE;QAChB;IACF;IAEA,MAAMM,WAAWnC,YAA+B,CAACoC;QAC/C,MAAM,EAAEzB,GAAG,EAAEiB,MAAM,EAAEP,UAAU,EAAE,GAAGY,OAAOC,OAAO;QAClDF,eAAe,CAACK;YACd,MAAMC,YACJF,6BAA6BG,WACzBH,kBAAkBC,aAClBD;YAEN,IAAI,CAACR,QAAQ;gBACXR,iBAAiB;oBACfT;oBACAH,OAAO8B;oBACPjB;gBACF;YACF;YAEA,OAAOiB;QACT;IACF,GAAG,EAAE;IAEL,MAAME,SAASxC,YAAY;QACzBwB,sBAAsB;YACpBb,KAAKsB,OAAOC,OAAO,CAACvB,GAAG;QACzB;IACF,GAAG,EAAE;IAEL,MAAM8B,UAAUzC,YAAY;QAC1B,MAAM,EAAEW,GAAG,EAAEH,KAAK,EAAEa,UAAU,EAAE,GAAGY,OAAOC,OAAO;QACjDd,iBAAiB;YACfT;YACAH;YACAa;QACF;IACF,GAAG,EAAE;IAELpB,UAAU;QACR,MAAM,EAAE0B,YAAY,EAAEZ,YAAY,EAAEa,MAAM,EAAE,GAAGK,OAAOC,OAAO;QAC7D,IAAIN,UAAU,CAACG,KAAK;YAClB;QACF;QAEAI,SACE1B,mBAAmB;YACjBE;YACAC,UAAUe;YACVZ;QACF;IAEJ,GAAG;QAACJ;QAAKoB;QAAKI;KAAS;IAEvB,kEAAkE;IAClElC,UAAU;QACR,IAAI,CAACU,KAAK;YACR;QACF;QAEA,MAAM+B,WAAW,CAACC;YAChB,MAAM,EAAEhB,YAAY,EAAEZ,YAAY,EAAE,GAAGkB,OAAOC,OAAO;YACrD,IAAIS,MAAMhC,GAAG,KAAKA,KAAK;gBACrBqB,eACEvB,mBAAmB;oBACjBE;oBACAC,UAAUe;oBACVZ;gBACF;YAEJ;QACF;QAEA6B,OAAOC,gBAAgB,CAAC,WAAWH;QACnC,OAAO;YACLE,OAAOE,mBAAmB,CAAC,WAAWJ;QACxC;IACF,GAAG;QAAC/B;KAAI;IAER,OAAO;QACLH;QACA2B;QACAK;QACAC;IACF;AACF"}

package/dist/useMutationObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useMutationObserver.ts"],"sourcesContent":["import { useEffect, type RefCallback, type Ref } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MutationObserverHookOptions<E extends HTMLElement>\n  extends MutationObserverInit {\n  ref?: Ref<E>;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#options\n   * @defaultValue `!childList && !attributes && !characterData`\n   */\n  disabled?: boolean;\n\n  onObserved(mutation: MutationRecord): void;\n}\n\n/**\n * The mutation observer is used to track the changes made to the DOM tree.\n *\n * @example Simple Example\n * ```tsx\n * import { useMutationObserver } from \"@react-md/core\";\n * import { useCallback, type HTMLAttributes, type ReactElement } from \"react\";\n *\n * function Example(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const { children, ...remaining } = props;\n *\n *   const targetRef = useMutationObserver({\n *     subtree: true,\n *     attributes: true,\n *     childList: true,\n *     onUpdate: useCallback((mutation) => {\n *       switch (mutation.type) {\n *         case \"childList\":\n *           console.log(\"A child node has been added or removed\");\n *           break;\n *         case \"attributes\":\n *           console.log(`The ${mutation.attributeName} attribute was modified`);\n *           break\n *       }\n *\n *     }, []),\n *   });\n *\n *   return (\n *     <div {...remaining} ref={targetRef}>\n *       {children}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useMutationObserver<E extends HTMLElement>(\n  options: MutationObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    onObserved,\n    attributes,\n    attributeFilter,\n    attributeOldValue,\n    subtree,\n    childList,\n    characterData,\n    characterDataOldValue,\n    disabled = !childList && !attributes && !characterData,\n  } = options;\n\n  const [targetNodeRef, refCallback] = useEnsuredRef(ref);\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const observerTarget = targetNodeRef.current;\n    if (!observerTarget) {\n      return;\n    }\n\n    const observer = new MutationObserver((records) => {\n      const [entry] = records;\n      if (entry) {\n        onObserved(entry);\n      }\n    });\n\n    observer.observe(observerTarget, {\n      attributes,\n      attributeFilter,\n      attributeOldValue,\n      subtree,\n      childList,\n      characterData,\n      characterDataOldValue,\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    attributeFilter,\n    attributeOldValue,\n    attributes,\n    characterData,\n    characterDataOldValue,\n    childList,\n    disabled,\n    onObserved,\n    subtree,\n    targetNodeRef,\n  ]);\n\n  return refCallback;\n}\n"],"names":["useEffect","useEnsuredRef","useMutationObserver","options","ref","onObserved","attributes","attributeFilter","attributeOldValue","subtree","childList","characterData","characterDataOldValue","disabled","targetNodeRef","refCallback","observerTarget","current","observer","MutationObserver","records","entry","observe","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,SAAS,QAAoC,QAAQ;AAC9D,SAASC,aAAa,QAAQ,qBAAqB;AAkBnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,GACD,OAAO,SAASC,oBACdC,OAAuC;IAEvC,MAAM,EACJC,GAAG,EACHC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,iBAAiB,EACjBC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,qBAAqB,EACrBC,WAAW,CAACH,aAAa,CAACJ,cAAc,CAACK,aAAa,EACvD,GAAGR;IAEJ,MAAM,CAACW,eAAeC,YAAY,GAAGd,cAAcG;IACnDJ,UAAU;QACR,IAAIa,UAAU;YACZ;QACF;QAEA,MAAMG,iBAAiBF,cAAcG,OAAO;QAC5C,IAAI,CAACD,gBAAgB;YACnB;QACF;QAEA,MAAME,WAAW,IAAIC,iBAAiB,CAACC;YACrC,MAAM,CAACC,MAAM,GAAGD;YAChB,IAAIC,OAAO;gBACThB,WAAWgB;YACb;QACF;QAEAH,SAASI,OAAO,CAACN,gBAAgB;YAC/BV;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACA,OAAO;YACLM,SAASK,UAAU;QACrB;IACF,GAAG;QACDhB;QACAC;QACAF;QACAK;QACAC;QACAF;QACAG;QACAR;QACAI;QACAK;KACD;IAED,OAAOC;AACT"}
+{"version":3,"sources":["../src/useMutationObserver.ts"],"sourcesContent":["import { useEffect, type RefCallback, type Ref } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MutationObserverHookOptions<E extends HTMLElement>\n  extends MutationObserverInit {\n  ref?: Ref<E>;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#options\n   * @defaultValue `!childList && !attributes && !characterData`\n   */\n  disabled?: boolean;\n\n  onObserved(mutation: MutationRecord): void;\n}\n\n/**\n * The mutation observer is used to track the changes made to the DOM tree.\n *\n * @example Simple Example\n * ```tsx\n * import { useMutationObserver } from \"@react-md/core\";\n * import { useCallback, type HTMLAttributes, type ReactElement } from \"react\";\n *\n * function Example(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const { children, ...remaining } = props;\n *\n *   const targetRef = useMutationObserver({\n *     subtree: true,\n *     attributes: true,\n *     childList: true,\n *     onUpdate: useCallback((mutation) => {\n *       switch (mutation.type) {\n *         case \"childList\":\n *           console.log(\"A child node has been added or removed\");\n *           break;\n *         case \"attributes\":\n *           console.log(`The ${mutation.attributeName} attribute was modified`);\n *           break\n *       }\n *\n *     }, []),\n *   });\n *\n *   return (\n *     <div {...remaining} ref={targetRef}>\n *       {children}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useMutationObserver<E extends HTMLElement>(\n  options: MutationObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    onObserved,\n    attributes,\n    attributeFilter,\n    attributeOldValue,\n    subtree,\n    childList,\n    characterData,\n    characterDataOldValue,\n    disabled = !childList && !attributes && !characterData,\n  } = options;\n\n  const [targetNodeRef, refCallback] = useEnsuredRef(ref);\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const observerTarget = targetNodeRef.current;\n    if (!observerTarget) {\n      return;\n    }\n\n    const observer = new MutationObserver((records) => {\n      const [entry] = records;\n      if (entry) {\n        onObserved(entry);\n      }\n    });\n\n    observer.observe(observerTarget, {\n      attributes,\n      attributeFilter,\n      attributeOldValue,\n      subtree,\n      childList,\n      characterData,\n      characterDataOldValue,\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    attributeFilter,\n    attributeOldValue,\n    attributes,\n    characterData,\n    characterDataOldValue,\n    childList,\n    disabled,\n    onObserved,\n    subtree,\n    targetNodeRef,\n  ]);\n\n  return refCallback;\n}\n"],"names":["useEffect","useEnsuredRef","useMutationObserver","options","ref","onObserved","attributes","attributeFilter","attributeOldValue","subtree","childList","characterData","characterDataOldValue","disabled","targetNodeRef","refCallback","observerTarget","current","observer","MutationObserver","records","entry","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAoC,QAAQ;AAC9D,SAASC,aAAa,QAAQ,qBAAqB;AAkBnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,GACD,OAAO,SAASC,oBACdC,OAAuC;IAEvC,MAAM,EACJC,GAAG,EACHC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,iBAAiB,EACjBC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,qBAAqB,EACrBC,WAAW,CAACH,aAAa,CAACJ,cAAc,CAACK,aAAa,EACvD,GAAGR;IAEJ,MAAM,CAACW,eAAeC,YAAY,GAAGd,cAAcG;IACnDJ,UAAU;QACR,IAAIa,UAAU;YACZ;QACF;QAEA,MAAMG,iBAAiBF,cAAcG,OAAO;QAC5C,IAAI,CAACD,gBAAgB;YACnB;QACF;QAEA,MAAME,WAAW,IAAIC,iBAAiB,CAACC;YACrC,MAAM,CAACC,MAAM,GAAGD;YAChB,IAAIC,OAAO;gBACThB,WAAWgB;YACb;QACF;QAEAH,SAASI,OAAO,CAACN,gBAAgB;YAC/BV;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACA,OAAO;YACLM,SAASK,UAAU;QACrB;IACF,GAAG;QACDhB;QACAC;QACAF;QACAK;QACAC;QACAF;QACAG;QACAR;QACAI;QACAK;KACD;IAED,OAAOC;AACT"}

package/dist/useOrientation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOrientation.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * An extremely simple \"polyfill\" for the `window.screen.orientation` just for\n * the `type` value that is required for the `useOrientation` hook.\n *\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the orientation type either from the `window.screen.orientation` or\n * by comparing the `availHeight` and `availWidth` on the `window.screen`\n * @internal\n */\nexport const getOrientationType = (): OrientationType => {\n  if (typeof window === \"undefined\") {\n    return \"landscape-primary\";\n  }\n\n  // Note: at the time of writing this, it looks like only Safari does not\n  // support it from my list of browsers\n  const screenOrientation = window.screen.orientation?.type;\n  if (typeof screenOrientation === \"string\") {\n    return screenOrientation;\n  }\n\n  const { availHeight, availWidth } = window.screen;\n\n  return availHeight > availWidth ? \"portrait-primary\" : \"landscape-primary\";\n};\n\n/**\n * This hook uses the {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation} API\n * to determine if the screen is landscape or portrait. For browsers that do not\n * support this API yet, it will polyfill that behavior using a resize handler\n * instead.\n *\n * @internal\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the current orientation type\n */\nexport function useOrientation(): OrientationType {\n  const [orientation, setOrientation] = useState(getOrientationType);\n  useEffect(() => {\n    const handler = (): void => setOrientation(getOrientationType());\n\n    const { orientation } = window.screen;\n    if (orientation) {\n      orientation.addEventListener(\"change\", handler);\n    } else {\n      window.addEventListener(\"resize\", handler);\n    }\n\n    return () => {\n      if (orientation) {\n        orientation.removeEventListener(\"change\", handler);\n      } else {\n        window.removeEventListener(\"resize\", handler);\n      }\n    };\n  }, []);\n\n  return orientation;\n}\n"],"names":["useEffect","useState","getOrientationType","window","screenOrientation","screen","orientation","type","availHeight","availWidth","useOrientation","setOrientation","handler","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB;IAChC,IAAI,OAAOC,WAAW,aAAa;QACjC,OAAO;IACT;IAEA,wEAAwE;IACxE,sCAAsC;IACtC,MAAMC,oBAAoBD,OAAOE,MAAM,CAACC,WAAW,EAAEC;IACrD,IAAI,OAAOH,sBAAsB,UAAU;QACzC,OAAOA;IACT;IAEA,MAAM,EAAEI,WAAW,EAAEC,UAAU,EAAE,GAAGN,OAAOE,MAAM;IAEjD,OAAOG,cAAcC,aAAa,qBAAqB;AACzD,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,SAASC;IACd,MAAM,CAACJ,aAAaK,eAAe,GAAGV,SAASC;IAC/CF,UAAU;QACR,MAAMY,UAAU,IAAYD,eAAeT;QAE3C,MAAM,EAAEI,WAAW,EAAE,GAAGH,OAAOE,MAAM;QACrC,IAAIC,aAAa;YACfA,YAAYO,gBAAgB,CAAC,UAAUD;QACzC,OAAO;YACLT,OAAOU,gBAAgB,CAAC,UAAUD;QACpC;QAEA,OAAO;YACL,IAAIN,aAAa;gBACfA,YAAYQ,mBAAmB,CAAC,UAAUF;YAC5C,OAAO;gBACLT,OAAOW,mBAAmB,CAAC,UAAUF;YACvC;QACF;IACF,GAAG,EAAE;IAEL,OAAON;AACT"}
+{"version":3,"sources":["../src/useOrientation.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * An extremely simple \"polyfill\" for the `window.screen.orientation` just for\n * the `type` value that is required for the `useOrientation` hook.\n *\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the orientation type either from the `window.screen.orientation` or\n * by comparing the `availHeight` and `availWidth` on the `window.screen`\n * @internal\n */\nexport const getOrientationType = (): OrientationType => {\n  if (typeof window === \"undefined\") {\n    return \"landscape-primary\";\n  }\n\n  // Note: at the time of writing this, it looks like only Safari does not\n  // support it from my list of browsers\n  const screenOrientation = window.screen.orientation?.type;\n  if (typeof screenOrientation === \"string\") {\n    return screenOrientation;\n  }\n\n  const { availHeight, availWidth } = window.screen;\n\n  return availHeight > availWidth ? \"portrait-primary\" : \"landscape-primary\";\n};\n\n/**\n * This hook uses the {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation} API\n * to determine if the screen is landscape or portrait. For browsers that do not\n * support this API yet, it will polyfill that behavior using a resize handler\n * instead.\n *\n * @internal\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the current orientation type\n */\nexport function useOrientation(): OrientationType {\n  const [orientation, setOrientation] = useState(getOrientationType);\n  useEffect(() => {\n    const handler = (): void => setOrientation(getOrientationType());\n\n    const { orientation } = window.screen;\n    if (orientation) {\n      orientation.addEventListener(\"change\", handler);\n    } else {\n      window.addEventListener(\"resize\", handler);\n    }\n\n    return () => {\n      if (orientation) {\n        orientation.removeEventListener(\"change\", handler);\n      } else {\n        window.removeEventListener(\"resize\", handler);\n      }\n    };\n  }, []);\n\n  return orientation;\n}\n"],"names":["useEffect","useState","getOrientationType","window","screenOrientation","screen","orientation","type","availHeight","availWidth","useOrientation","setOrientation","handler","addEventListener","removeEventListener"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB;IAChC,IAAI,OAAOC,WAAW,aAAa;QACjC,OAAO;IACT;IAEA,wEAAwE;IACxE,sCAAsC;IACtC,MAAMC,oBAAoBD,OAAOE,MAAM,CAACC,WAAW,EAAEC;IACrD,IAAI,OAAOH,sBAAsB,UAAU;QACzC,OAAOA;IACT;IAEA,MAAM,EAAEI,WAAW,EAAEC,UAAU,EAAE,GAAGN,OAAOE,MAAM;IAEjD,OAAOG,cAAcC,aAAa,qBAAqB;AACzD,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,SAASC;IACd,MAAM,CAACJ,aAAaK,eAAe,GAAGV,SAASC;IAC/CF,UAAU;QACR,MAAMY,UAAU,IAAYD,eAAeT;QAE3C,MAAM,EAAEI,WAAW,EAAE,GAAGH,OAAOE,MAAM;QACrC,IAAIC,aAAa;YACfA,YAAYO,gBAAgB,CAAC,UAAUD;QACzC,OAAO;YACLT,OAAOU,gBAAgB,CAAC,UAAUD;QACpC;QAEA,OAAO;YACL,IAAIN,aAAa;gBACfA,YAAYQ,mBAAmB,CAAC,UAAUF;YAC5C,OAAO;gBACLT,OAAOW,mBAAmB,CAAC,UAAUF;YACvC;QACF;IACF,GAAG,EAAE;IAEL,OAAON;AACT"}