@postenbring/hedwig-react 0.0.86 → 0.0.88

package/dist/utils/index.js

@@ -122,20 +122,15 @@ function useHydrated() {
 }
 function focusTrap(element) {
   var _a, _b;
-  if (element === document.body)
-    return () => {
-    };
+  if (element === document.body) return () => {
+  };
   let inertElements = [];
   for (let el = element; el; el = el.parentElement) {
-    if (el === document.body)
-      break;
+    if (el === document.body) break;
     for (const sibling of (_b = (_a = el.parentElement) == null ? void 0 : _a.children) != null ? _b : []) {
-      if (sibling === el)
-        continue;
-      if (!(sibling instanceof HTMLElement))
-        continue;
-      if (sibling.hasAttribute("inert"))
-        continue;
+      if (sibling === el) continue;
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.hasAttribute("inert")) continue;
       sibling.setAttribute("inert", "true");
       inertElements.push(sibling);
     }
@@ -181,19 +176,15 @@ var AutoAnimateHeight = (0, import_react2.forwardRef)(
     );
     (0, import_react2.useEffect)(() => {
       var _a3;
-      if (!rootRef.current)
-        return;
-      if (!measurementRef.current)
-        return;
-      if (document.body.scrollHeight === 0)
-        return;
+      if (!rootRef.current) return;
+      if (!measurementRef.current) return;
+      if (document.body.scrollHeight === 0) return;
       const currentMeasurement = measurementRef.current;
       const { height: newHeight } = currentMeasurement.getBoundingClientRect();
       let previouslyObservedHeight = newHeight;
       const resizeObserver = new ResizeObserver(() => {
         const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
-        if (resizedHeight === previouslyObservedHeight)
-          return;
+        if (resizedHeight === previouslyObservedHeight) return;
         previouslyObservedHeight = resizedHeight;
         setHeight({ height: resizedHeight, shouldAnimate: false });
       });
@@ -208,8 +199,7 @@ var AutoAnimateHeight = (0, import_react2.forwardRef)(
       }
       const currentRoot = rootRef.current;
       function onTransitionEndHandler(e) {
-        if (e.propertyName !== "height")
-          return;
+        if (e.propertyName !== "height") return;
         setClonedChildren(nextClonedChildren);
       }
       currentRoot.addEventListener("transitionend", onTransitionEndHandler);

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/utils.ts","../../src/utils/auto-animate-height.tsx"],"sourcesContent":["export * from \"./utils\";\n\nexport { AutoAnimateHeight } from \"./auto-animate-height\";\nexport type * from \"./auto-animate-height\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"./utils\";\n\nexport interface AutoAnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Time of the animation, using the hedwig animation tokens\n   * quick: 0.1s\n   * normal: 0.3s\n   * slow: 0.7s\n   *\n   * default is \"quick\"\n   */\n  animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n  /**\n   * Callback fired when animiation transition ends\n   * Use this to do effects after resizing is done, e.g. scrolling to the element\n   * using `element.scrollIntoView()`\n   */\n  onTransitionEnd?: () => void;\n\n  /**\n   * Which hedwig easing function to use, default is \"normal\"\n   */\n  animationEasing?: \"in\" | \"out\" | \"normal\";\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight = forwardRef<HTMLDivElement, AutoAnimateHeightProps>(\n  (\n    {\n      children,\n      style,\n      animationDuration = \"quick\",\n      animationEasing = \"normal\",\n      onTransitionEnd,\n      ...rest\n    },\n    ref,\n  ) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([rootRef, ref]);\n    const measurementRef = useRef<HTMLDivElement>(null);\n    const [height, setHeight] = useState<{ height: number; shouldAnimate: boolean } | undefined>(\n      undefined,\n    );\n    const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n      cloneElement(<>{children}</>, {}),\n    );\n\n    useEffect(() => {\n      if (!rootRef.current) return;\n      if (!measurementRef.current) return;\n      if (document.body.scrollHeight === 0) return;\n      const currentMeasurement = measurementRef.current;\n      const { height: newHeight } = currentMeasurement.getBoundingClientRect();\n\n      // Listen for resize events on the measurement element\n      // Keep the children in sync with the height\n      // But don't animate it.\n      let previouslyObservedHeight = newHeight;\n      const resizeObserver = new ResizeObserver(() => {\n        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();\n        if (resizedHeight === previouslyObservedHeight) return;\n        previouslyObservedHeight = resizedHeight;\n        setHeight({ height: resizedHeight, shouldAnimate: false });\n      });\n      resizeObserver.observe(currentMeasurement); // This is cleaned up down below in the return functions\n\n      // Set the new height when children changes\n      setHeight({ height: newHeight, shouldAnimate: true });\n\n      // Update children\n      const nextClonedChildren = cloneElement(<>{children}</>, {});\n\n      // When increasing in height update immediately so the new content is shown during the animation\n      if (newHeight >= (height?.height ?? 0)) {\n        setClonedChildren(nextClonedChildren);\n        return () => {\n          resizeObserver.disconnect();\n        };\n      }\n\n      // When decreasing in height, wait until the animation is done so that we don't get a sudden flash of empty content\n      const currentRoot = rootRef.current;\n      function onTransitionEndHandler(e: TransitionEvent) {\n        if (e.propertyName !== \"height\") return;\n        setClonedChildren(nextClonedChildren);\n      }\n      currentRoot.addEventListener(\"transitionend\", onTransitionEndHandler);\n      return () => {\n        resizeObserver.disconnect();\n        currentRoot.removeEventListener(\"transitionend\", onTransitionEndHandler);\n      };\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, [children]);\n\n    return (\n      <div\n        ref={mergedRef}\n        onTransitionEnd={onTransitionEnd}\n        style={{\n          position: \"relative\",\n          overflow: \"hidden\",\n          height: height?.height ?? measurementRef.current?.getBoundingClientRect().height,\n          transitionProperty: height?.shouldAnimate ? \"height\" : \"none\",\n          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n          willChange: \"height\",\n          ...style,\n        }}\n        {...rest}\n      >\n        <div\n          aria-hidden\n          ref={measurementRef}\n          style={{\n            position: \"absolute\",\n            visibility: \"hidden\",\n            pointerEvents: \"none\",\n          }}\n        >\n          {children}\n        </div>\n        {clonedChildren}\n      </div>\n    );\n  },\n);\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":"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","names":["import_react","_a","_b"]}
+{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/utils.ts","../../src/utils/auto-animate-height.tsx"],"sourcesContent":["export * from \"./utils\";\n\nexport { AutoAnimateHeight } from \"./auto-animate-height\";\nexport type * from \"./auto-animate-height\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"./utils\";\n\nexport interface AutoAnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Time of the animation, using the hedwig animation tokens\n   * quick: 0.1s\n   * normal: 0.3s\n   * slow: 0.7s\n   *\n   * default is \"quick\"\n   */\n  animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n  /**\n   * Callback fired when animiation transition ends\n   * Use this to do effects after resizing is done, e.g. scrolling to the element\n   * using `element.scrollIntoView()`\n   */\n  onTransitionEnd?: () => void;\n\n  /**\n   * Which hedwig easing function to use, default is \"normal\"\n   */\n  animationEasing?: \"in\" | \"out\" | \"normal\";\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight = forwardRef<HTMLDivElement, AutoAnimateHeightProps>(\n  (\n    {\n      children,\n      style,\n      animationDuration = \"quick\",\n      animationEasing = \"normal\",\n      onTransitionEnd,\n      ...rest\n    },\n    ref,\n  ) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([rootRef, ref]);\n    const measurementRef = useRef<HTMLDivElement>(null);\n    const [height, setHeight] = useState<{ height: number; shouldAnimate: boolean } | undefined>(\n      undefined,\n    );\n    const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n      cloneElement(<>{children}</>, {}),\n    );\n\n    useEffect(() => {\n      if (!rootRef.current) return;\n      if (!measurementRef.current) return;\n      if (document.body.scrollHeight === 0) return;\n      const currentMeasurement = measurementRef.current;\n      const { height: newHeight } = currentMeasurement.getBoundingClientRect();\n\n      // Listen for resize events on the measurement element\n      // Keep the children in sync with the height\n      // But don't animate it.\n      let previouslyObservedHeight = newHeight;\n      const resizeObserver = new ResizeObserver(() => {\n        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();\n        if (resizedHeight === previouslyObservedHeight) return;\n        previouslyObservedHeight = resizedHeight;\n        setHeight({ height: resizedHeight, shouldAnimate: false });\n      });\n      resizeObserver.observe(currentMeasurement); // This is cleaned up down below in the return functions\n\n      // Set the new height when children changes\n      setHeight({ height: newHeight, shouldAnimate: true });\n\n      // Update children\n      const nextClonedChildren = cloneElement(<>{children}</>, {});\n\n      // When increasing in height update immediately so the new content is shown during the animation\n      if (newHeight >= (height?.height ?? 0)) {\n        setClonedChildren(nextClonedChildren);\n        return () => {\n          resizeObserver.disconnect();\n        };\n      }\n\n      // When decreasing in height, wait until the animation is done so that we don't get a sudden flash of empty content\n      const currentRoot = rootRef.current;\n      function onTransitionEndHandler(e: TransitionEvent) {\n        if (e.propertyName !== \"height\") return;\n        setClonedChildren(nextClonedChildren);\n      }\n      currentRoot.addEventListener(\"transitionend\", onTransitionEndHandler);\n      return () => {\n        resizeObserver.disconnect();\n        currentRoot.removeEventListener(\"transitionend\", onTransitionEndHandler);\n      };\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, [children]);\n\n    return (\n      <div\n        ref={mergedRef}\n        onTransitionEnd={onTransitionEnd}\n        style={{\n          position: \"relative\",\n          overflow: \"hidden\",\n          height: height?.height ?? measurementRef.current?.getBoundingClientRect().height,\n          transitionProperty: height?.shouldAnimate ? \"height\" : \"none\",\n          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n          willChange: \"height\",\n          ...style,\n        }}\n        {...rest}\n      >\n        <div\n          aria-hidden\n          ref={measurementRef}\n          style={{\n            position: \"absolute\",\n            visibility: \"hidden\",\n            pointerEvents: \"none\",\n          }}\n        >\n          {children}\n        </div>\n        {clonedChildren}\n      </div>\n    );\n  },\n);\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":"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","names":["import_react","_a","_b"]}

package/dist/utils/index.mjs

@@ -1,14 +1,14 @@
 import "../chunk-CYDWEPFL.mjs";
 import {
   AutoAnimateHeight
-} from "../chunk-6FBPKLWB.mjs";
+} from "../chunk-KCEWKQ4W.mjs";
 import {
   focusTrap,
   useHydrated,
   useMergeRefs,
   useResize
-} from "../chunk-TDXU2IC6.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-ILFK3VKS.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   AutoAnimateHeight,
   focusTrap,

package/dist/utils/utils.js

@@ -90,20 +90,15 @@ function useHydrated() {
 }
 function focusTrap(element) {
   var _a, _b;
-  if (element === document.body)
-    return () => {
-    };
+  if (element === document.body) return () => {
+  };
   let inertElements = [];
   for (let el = element; el; el = el.parentElement) {
-    if (el === document.body)
-      break;
+    if (el === document.body) break;
     for (const sibling of (_b = (_a = el.parentElement) == null ? void 0 : _a.children) != null ? _b : []) {
-      if (sibling === el)
-        continue;
-      if (!(sibling instanceof HTMLElement))
-        continue;
-      if (sibling.hasAttribute("inert"))
-        continue;
+      if (sibling === el) continue;
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.hasAttribute("inert")) continue;
       sibling.setAttribute("inert", "true");
       inertElements.push(sibling);
     }

package/dist/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAiD;AAM1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,mBAAe,0BAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,8BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAaO,SAAS,UAAU,SAAsB;AA9EhD;AAgFE,MAAI,YAAY,SAAS;AAAM,WAAO,MAAM;AAAA,IAAC;AAE7C,MAAI,gBAA+B,CAAC;AACpC,WAAS,KAAyB,SAAS,IAAI,KAAK,GAAG,eAAe;AACpE,QAAI,OAAO,SAAS;AAAM;AAE1B,eAAW,YAAW,cAAG,kBAAH,mBAAkB,aAAlB,YAA8B,CAAC,GAAG;AACtD,UAAI,YAAY;AAAI;AACpB,UAAI,EAAE,mBAAmB;AAAc;AACvC,UAAI,QAAQ,aAAa,OAAO;AAAG;AAEnC,cAAQ,aAAa,SAAS,MAAM;AACpC,oBAAc,KAAK,OAAO;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO,MAAM;AACX,qBAAiB,aAAa;AAC9B,oBAAgB,CAAC;AAAA,EACnB;AACF;AAKA,SAAS,iBAAiB,eAAsC;AAC9D,aAAW,MAAM,eAAe;AAC9B,OAAG,gBAAgB,OAAO;AAAA,EAC5B;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAiD;AAM1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,mBAAe,0BAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,8BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAaO,SAAS,UAAU,SAAsB;AA9EhD;AAgFE,MAAI,YAAY,SAAS,KAAM,QAAO,MAAM;AAAA,EAAC;AAE7C,MAAI,gBAA+B,CAAC;AACpC,WAAS,KAAyB,SAAS,IAAI,KAAK,GAAG,eAAe;AACpE,QAAI,OAAO,SAAS,KAAM;AAE1B,eAAW,YAAW,cAAG,kBAAH,mBAAkB,aAAlB,YAA8B,CAAC,GAAG;AACtD,UAAI,YAAY,GAAI;AACpB,UAAI,EAAE,mBAAmB,aAAc;AACvC,UAAI,QAAQ,aAAa,OAAO,EAAG;AAEnC,cAAQ,aAAa,SAAS,MAAM;AACpC,oBAAc,KAAK,OAAO;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO,MAAM;AACX,qBAAiB,aAAa;AAC9B,oBAAgB,CAAC;AAAA,EACnB;AACF;AAKA,SAAS,iBAAiB,eAAsC;AAC9D,aAAW,MAAM,eAAe;AAC9B,OAAG,gBAAgB,OAAO;AAAA,EAC5B;AACF;","names":[]}

package/dist/utils/utils.mjs

@@ -3,8 +3,8 @@ import {
   useHydrated,
   useMergeRefs,
   useResize
-} from "../chunk-TDXU2IC6.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-ILFK3VKS.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   focusTrap,
   useHydrated,

package/dist/warning-banner/index.mjs

@@ -1,8 +1,8 @@
 import "../chunk-3D2MWIEX.mjs";
 import {
   WarningBanner
-} from "../chunk-L4YBHIS3.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-EMQB6JIS.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   WarningBanner
 };

package/dist/warning-banner/warning-banner.mjs

@@ -1,7 +1,7 @@
 import {
   WarningBanner
-} from "../chunk-L4YBHIS3.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-EMQB6JIS.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   WarningBanner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "18.3.1",
-    "tsup": "^8.0.1",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5",
     "eslint-config-custom": "0.0.1",
     "hedwig-tsconfig": "0.0.0"
@@ -31,7 +31,7 @@
   "dependencies": {
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
-    "@postenbring/hedwig-css": "0.0.71"
+    "@postenbring/hedwig-css": "0.0.73"
   },
   "publishConfig": {
     "access": "public"

package/src/accordion/accordion.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
 import { Link } from "../link";
 import { UnorderedList } from "../list";
 import { Accordion } from ".";
@@ -8,6 +7,13 @@ import { Accordion } from ".";
 const meta: Meta<typeof Accordion> = {
   title: "Accordion",
   component: Accordion,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Preview: Story = {
   args: {
     children: (
       <>
@@ -40,115 +46,3 @@ const meta: Meta<typeof Accordion> = {
     ),
   },
 };
-
-type Story = StoryObj<typeof Accordion>;
-
-export const MultipleItems: Story = {
-  name: "Multiple items",
-};
-
-export const JustOneItem: Story = {
-  name: "Just one item",
-  args: {
-    children: (
-      <Accordion.Item>
-        <Accordion.Header>Professional accordion title</Accordion.Header>
-        <Accordion.Content>
-          This is the simplest form of accordion body. Can be extensive.
-        </Accordion.Content>
-      </Accordion.Item>
-    ),
-  },
-};
-
-export const NoIndent: Story = {
-  args: {
-    indent: false,
-    children: (
-      <Accordion.Item>
-        <Accordion.Header>Professional accordion title</Accordion.Header>
-        <Accordion.Content>
-          This is the simplest form of accordion body. Can be extensive.
-        </Accordion.Content>
-      </Accordion.Item>
-    ),
-  },
-};
-
-export const DefaultOpen: Story = {
-  args: {
-    children: (
-      <>
-        <Accordion.Item defaultOpen>
-          <Accordion.Header>Professional accordion title</Accordion.Header>
-          <Accordion.Content>
-            This is the simplest form of accordion body. Can be extensive.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>Professional accordion title</Accordion.Header>
-          <Accordion.Content>
-            This is the simplest form of accordion body. Can be extensive.
-          </Accordion.Content>
-        </Accordion.Item>
-      </>
-    ),
-  },
-};
-
-export const SingleAccordion: Story = {
-  name: "Only one open at the same time",
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- it's ok
-    const [state, setState] = useState({ one: false, two: false, three: false });
-    function toggle(key: keyof typeof state) {
-      setState((prev) => {
-        return {
-          one: key === "one" ? !prev.one : false,
-          two: key === "two" ? !prev.two : false,
-          three: key === "three" ? !prev.three : false,
-        };
-      });
-    }
-
-    return (
-      <Accordion>
-        <Accordion.Item
-          onOpenChange={() => {
-            toggle("one");
-          }}
-          open={state.one}
-        >
-          <Accordion.Header>One</Accordion.Header>
-          <Accordion.Content>
-            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item
-          onOpenChange={() => {
-            toggle("two");
-          }}
-          open={state.two}
-        >
-          <Accordion.Header>Two</Accordion.Header>
-          <Accordion.Content>
-            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item
-          onOpenChange={() => {
-            toggle("three");
-          }}
-          open={state.three}
-        >
-          <Accordion.Header>Three</Accordion.Header>
-          <Accordion.Content>
-            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-    );
-  },
-};
-
-export default meta;

package/src/badge/badge.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { Box } from "../box";
 import { Badge } from ".";
 
 const meta: Meta<typeof Badge> = {
@@ -10,37 +9,9 @@ const meta: Meta<typeof Badge> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Badge>;
-
-export const Lighter: Story = {
+export const Preview: StoryObj<typeof Badge> = {
   args: {
     variant: "lighter",
     children: "Default badge",
   },
 };
-
-export const Dark: Story = {
-  args: {
-    variant: "dark",
-    children: "Dark badge",
-  },
-};
-
-export const White: Story = {
-  args: {
-    variant: "white",
-    children: "White badge",
-  },
-  render: (props) => (
-    <Box>
-      <Badge {...props} />
-    </Box>
-  ),
-};
-
-export const Warning: Story = {
-  args: {
-    variant: "warning",
-    children: "Warning badge",
-  },
-};

package/src/badge/badge.tsx

@@ -2,7 +2,7 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { forwardRef } from "react";
 
-export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
 
   /**
@@ -10,7 +10,7 @@ export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement>
    *
    * @default "lighter"
    */
-  variant?: "lighter" | "dark" | "white" | "warning";
+  variant?: "lighter" | "darker" | "white" | "warning";
 
   /**
    * Font size of the badge
@@ -31,7 +31,11 @@ export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement>
  * Badges are used to label, categorize or organize items using keywords to describe them.
  *
  * @example
- * <Badge variant="dark">Dark</Badge>
+ *
+ * ```tsx
+ * <Badge variant="darker">Darker</Badge>
+ * ```
+ *
  */
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
   ({ children, asChild, variant = "lighter", size = "small", className, ...rest }, ref) => {

package/src/blockquote/blockquote.stories.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Blockquote } from ".";
+
+const meta: Meta<typeof Blockquote> = {
+  title: "Blockquote",
+  component: Blockquote,
+};
+
+export default meta;
+
+export const Preview: StoryObj<typeof Blockquote> = {
+  args: {
+    children: (
+      <>
+        <p>... but they&rsquo;ll never take our freedom!</p>
+        <footer>William Wallace</footer>
+      </>
+    ),
+  },
+};

package/src/blockquote/blockquote.tsx

@@ -0,0 +1,52 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+export interface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement> {
+  children?: React.ReactNode;
+
+  /**
+   * The quote style
+   *
+   * @default "default"
+   */
+  variant?: "default" | "norwegian";
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * @example
+ *
+ * ```tsx
+ * <Blockquote>
+ *   <p>... but they&rsquo;ll never take our freedom!</p>
+ *   <footer>William Wallace</footer>
+ * </Blockquote>
+ * ```
+ *
+ */
+export const Blockquote = forwardRef<HTMLQuoteElement, BlockquoteProps>(
+  ({ children, asChild, className, variant, ...rest }, ref) => {
+    const Component = asChild ? Slot : "blockquote";
+    return (
+      <Component
+        ref={ref}
+        className={clsx(
+          "hds-blockquote",
+          variant === "norwegian" && `hds-blockquote--norwegian`,
+          className as undefined,
+        )}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+Blockquote.displayName = "Blockquote";

package/src/blockquote/index.tsx

@@ -0,0 +1,3 @@
+export { Blockquote } from "./blockquote";
+
+export type * from "./blockquote";