@postenbring/hedwig-react 0.0.75 → 0.0.77

package/dist/navbar/index.mjs

@@ -1,21 +1,33 @@
 import {
   NavbarComponent
-} from "../chunk-MF2AREPQ.mjs";
+} from "../chunk-ACEYO4LN.mjs";
 import {
-  NavbarButton,
+  NavbarButtonItem,
+  NavbarItem,
+  NavbarItemIcon,
+  NavbarLinkItem,
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarNavigation
-} from "../chunk-625SVQEP.mjs";
+} from "../chunk-GSJPTZT3.mjs";
 import {
+  NavbarExpandableMenu,
+  NavbarExpandableMenuContent,
+  NavbarExpandableMenuTrigger,
   useNavbarExpendableMenuContext
-} from "../chunk-PYR6QEIS.mjs";
-import "../chunk-MGUYIOP2.mjs";
-import "../chunk-JXA3B33M.mjs";
+} from "../chunk-FCPQXZQV.mjs";
+import "../chunk-W2MRIP5P.mjs";
+import "../chunk-DEX36MFK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   NavbarComponent as Navbar,
-  NavbarButton,
+  NavbarButtonItem,
+  NavbarExpandableMenu,
+  NavbarExpandableMenuContent,
+  NavbarExpandableMenuTrigger,
+  NavbarItem,
+  NavbarItemIcon,
+  NavbarLinkItem,
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarNavigation,

package/dist/navbar/navbar-expandable-menu.d.mts

@@ -1,7 +1,7 @@
-export { NavbarExpandableMenu } from '../_tsup-dts-rollup';
+export { NavbarExpandableMenu_alias_3 as NavbarExpandableMenu } from '../_tsup-dts-rollup';
 export { useNavbarExpendableMenuContext_alias_3 as useNavbarExpendableMenuContext } from '../_tsup-dts-rollup';
 export { NavbarExpandableMenuProps } from '../_tsup-dts-rollup';
 export { NavbarExpandableMenuTriggerProps } from '../_tsup-dts-rollup';
-export { NavbarExpandableMenuTrigger } from '../_tsup-dts-rollup';
+export { NavbarExpandableMenuTrigger_alias_3 as NavbarExpandableMenuTrigger } from '../_tsup-dts-rollup';
 export { NavbarExpandableMenuContentProps } from '../_tsup-dts-rollup';
-export { NavbarExpandableMenuContent } from '../_tsup-dts-rollup';
+export { NavbarExpandableMenuContent_alias_3 as NavbarExpandableMenuContent } from '../_tsup-dts-rollup';

package/dist/navbar/navbar-expandable-menu.d.ts

@@ -1,7 +1,7 @@
-export { NavbarExpandableMenu } from '../_tsup-dts-rollup';
+export { NavbarExpandableMenu_alias_3 as NavbarExpandableMenu } from '../_tsup-dts-rollup';
 export { useNavbarExpendableMenuContext_alias_3 as useNavbarExpendableMenuContext } from '../_tsup-dts-rollup';
 export { NavbarExpandableMenuProps } from '../_tsup-dts-rollup';
 export { NavbarExpandableMenuTriggerProps } from '../_tsup-dts-rollup';
-export { NavbarExpandableMenuTrigger } from '../_tsup-dts-rollup';
+export { NavbarExpandableMenuTrigger_alias_3 as NavbarExpandableMenuTrigger } from '../_tsup-dts-rollup';
 export { NavbarExpandableMenuContentProps } from '../_tsup-dts-rollup';
-export { NavbarExpandableMenuContent } from '../_tsup-dts-rollup';
+export { NavbarExpandableMenuContent_alias_3 as NavbarExpandableMenuContent } from '../_tsup-dts-rollup';

package/dist/navbar/navbar-expandable-menu.js

@@ -178,7 +178,7 @@ function RenderButton(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     __spreadProps(__spreadValues({
-      className: (0, import_typed_classname.clsx)("hds-navbar__button", className),
+      className: (0, import_typed_classname.clsx)("hds-navbar__item", className),
       onClick: toggleOpen,
       ref: ref != null ? ref : innerRef,
       style,
@@ -186,7 +186,7 @@ function RenderButton(_a) {
       type: "button"
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-navbar__button-responsive-text"), children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-navbar__item-responsive-text"), children: text }),
         " ",
         icon
       ]
@@ -272,22 +272,22 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
     );
   }
 );
-NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenu.Trigger";
+NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
 var NavbarExpandableMenuContent = (0, import_react2.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "section", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const [open] = useNavbarExpendableMenuContext();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Component,
-    __spreadProps(__spreadValues({}, rest), {
+    "section",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
       className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content", className),
-      "data-state": open ? "open" : "closed",
-      inert: open ? void 0 : "true",
+      "data-state": open ? "open" : "closed"
+    }), { inert: open ? "true" : void 0 }), {
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
-NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenu.Content";
+NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NavbarExpandableMenu,

package/dist/navbar/navbar-expandable-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/utils.ts","../../src/navbar/icons.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap, type OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  function toggleOpen() {\n    setOpen((prev) => !prev);\n  }\n\n  useEffect(() => {\n    if (open) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n      const releaseFocusTrap = focusTrap(\n        document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n      );\n\n      return () => {\n        document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n        releaseFocusTrap();\n      };\n    }\n  }, [open]);\n\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__button\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n  NavbarExpandableMenuContentProps,\n  HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      inert={open ? undefined : \"true\"}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </Component>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\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 */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","function CloseIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nfunction MenuIcon() {\n  return (\n    <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_react","import_jsx_runtime","releaseFocusTrap","_a","_b"]}
+{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/utils.ts","../../src/navbar/icons.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  function toggleOpen() {\n    setOpen((prev) => !prev);\n  }\n\n  useEffect(() => {\n    if (open) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n      const releaseFocusTrap = focusTrap(\n        document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n      );\n\n      return () => {\n        document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n        releaseFocusTrap();\n      };\n    }\n  }, [open]);\n\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__item\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__item-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n  HTMLDivElement,\n  NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <section\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      {...{ inert: open ? \"true\" : undefined }}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </section>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\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 */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","export function CloseIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport function MenuIcon() {\n  return (\n    <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime","releaseFocusTrap","_a","_b"]}

package/dist/navbar/navbar-expandable-menu.mjs

@@ -3,9 +3,9 @@ import {
   NavbarExpandableMenuContent,
   NavbarExpandableMenuTrigger,
   useNavbarExpendableMenuContext
-} from "../chunk-PYR6QEIS.mjs";
-import "../chunk-MGUYIOP2.mjs";
-import "../chunk-JXA3B33M.mjs";
+} from "../chunk-FCPQXZQV.mjs";
+import "../chunk-W2MRIP5P.mjs";
+import "../chunk-DEX36MFK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   NavbarExpandableMenu,

package/dist/navbar/navbar.d.mts

@@ -2,5 +2,8 @@ export { NavbarProps_alias_3 as NavbarProps } from '../_tsup-dts-rollup';
 export { Navbar_alias_3 as Navbar } from '../_tsup-dts-rollup';
 export { NavbarLogo_alias_3 as NavbarLogo } from '../_tsup-dts-rollup';
 export { NavbarLogoAndServiceText_alias_3 as NavbarLogoAndServiceText } from '../_tsup-dts-rollup';
-export { NavbarButton_alias_3 as NavbarButton } from '../_tsup-dts-rollup';
+export { NavbarItemIcon_alias_3 as NavbarItemIcon } from '../_tsup-dts-rollup';
+export { NavbarItem_alias_3 as NavbarItem } from '../_tsup-dts-rollup';
+export { NavbarButtonItem_alias_3 as NavbarButtonItem } from '../_tsup-dts-rollup';
+export { NavbarLinkItem_alias_3 as NavbarLinkItem } from '../_tsup-dts-rollup';
 export { NavbarNavigation_alias_3 as NavbarNavigation } from '../_tsup-dts-rollup';

package/dist/navbar/navbar.d.ts

@@ -2,5 +2,8 @@ export { NavbarProps_alias_3 as NavbarProps } from '../_tsup-dts-rollup';
 export { Navbar_alias_3 as Navbar } from '../_tsup-dts-rollup';
 export { NavbarLogo_alias_3 as NavbarLogo } from '../_tsup-dts-rollup';
 export { NavbarLogoAndServiceText_alias_3 as NavbarLogoAndServiceText } from '../_tsup-dts-rollup';
-export { NavbarButton_alias_3 as NavbarButton } from '../_tsup-dts-rollup';
+export { NavbarItemIcon_alias_3 as NavbarItemIcon } from '../_tsup-dts-rollup';
+export { NavbarItem_alias_3 as NavbarItem } from '../_tsup-dts-rollup';
+export { NavbarButtonItem_alias_3 as NavbarButtonItem } from '../_tsup-dts-rollup';
+export { NavbarLinkItem_alias_3 as NavbarLinkItem } from '../_tsup-dts-rollup';
 export { NavbarNavigation_alias_3 as NavbarNavigation } from '../_tsup-dts-rollup';

package/dist/navbar/navbar.js

@@ -50,7 +50,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var navbar_exports = {};
 __export(navbar_exports, {
   Navbar: () => Navbar,
-  NavbarButton: () => NavbarButton,
+  NavbarButtonItem: () => NavbarButtonItem,
+  NavbarItem: () => NavbarItem,
+  NavbarItemIcon: () => NavbarItemIcon,
+  NavbarLinkItem: () => NavbarLinkItem,
   NavbarLogo: () => NavbarLogo,
   NavbarLogoAndServiceText: () => NavbarLogoAndServiceText,
   NavbarNavigation: () => NavbarNavigation
@@ -62,9 +65,10 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Navbar = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
+    const Component = asChild ? import_react_slot.Slot : "header";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "header",
+      Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
         ref
@@ -77,8 +81,9 @@ var Navbar = (0, import_react.forwardRef)(
 Navbar.displayName = "Navbar";
 var NavbarLogo = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadValues({ className: (0, import_typed_classname.clsx)("hds-navbar__logo", className), ref }, rest));
+    var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
@@ -102,32 +107,67 @@ var NavbarLogoAndServiceText = (0, import_react.forwardRef)(
   }
 );
 NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
-var NavbarButton = (0, import_react.forwardRef)(
+var NavbarItemIcon = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "button", children, icon, className } = _b, rest = __objRest(_b, ["as", "children", "icon", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-navbar__button", className), ref }, rest), { children: [
-      children,
-      " ",
-      icon
-    ] }));
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
+  }
+);
+NavbarItemIcon.displayName = "Navbar.ItemIcon";
+var NavbarItem = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarItem.displayName = "Navbar.Item";
+var NavbarButtonItem = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)("hds-navbar__item", className),
+        ref,
+        type: "button"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarButtonItem.displayName = "Navbar.ButtonItem";
+var NavbarLinkItem = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? import_react_slot.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarLinkItem.displayName = "Navbar.LinkItem";
+var NavbarNavigation = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname.clsx)("hds-navbar__navigation", className),
+        ref
+      }, rest)
+    );
   }
 );
-NavbarButton.displayName = "Navbar.Button";
-var NavbarNavigation = (0, import_react.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Component,
-    __spreadValues({
-      className: (0, import_typed_classname.clsx)("hds-navbar__navigation", className),
-      ref
-    }, rest)
-  );
-});
 NavbarNavigation.displayName = "Navbar.Navigation";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Navbar,
-  NavbarButton,
+  NavbarButtonItem,
+  NavbarItem,
+  NavbarItemIcon,
+  NavbarLinkItem,
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarNavigation

package/dist/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navbar/navbar.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Navbar variant\n   *\n   * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n   *\n   * For internal services or flagship services use the `service` should be used\n   */\n  variant?: \"default\" | \"service\";\n  children: React.ReactNode;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n  ({ children, className, variant, ...rest }, ref) => {\n    return (\n      <header\n        className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </header>\n    );\n  },\n);\nNavbar.displayName = \"Navbar\";\n\ninterface NavbarLogoProps {\n  children?: never;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component className={clsx(\"hds-navbar__logo\", className as undefined)} ref={ref} {...rest} />\n    );\n  },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The text display next to the logo\n   */\n  children: React.ReactNode;\n\n  /**\n   * The text variant\n   *\n   * Use `service` for internal applications\n   * Use `flagship` for public facing applications\n   */\n  variant: \"service\" | \"flagship\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n/**\n * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n  ({ children, asChild, variant, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          \"hds-navbar__logo-and-service-text\",\n          `hds-navbar__logo-and-service-text--${variant}`,\n          className as undefined,\n        )}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\n// Navbar button\ninterface NavbarButtonProps {\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\nexport const NavbarButton: OverridableComponent<NavbarButtonProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"button\", children, icon, className, ...rest }, ref) => {\n    return (\n      <Component className={clsx(\"hds-navbar__button\", className as undefined)} ref={ref} {...rest}>\n        {children} {icon}\n      </Component>\n    );\n  },\n);\nNavbarButton.displayName = \"Navbar.Button\";\n\ninterface NavbarNavigationProps {\n  children: React.ReactNode;\n}\nexport const NavbarNavigation: OverridableComponent<NavbarNavigationProps, HTMLElement> =\n  forwardRef(({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-navbar__navigation\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  });\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,6BAAqB;AACrB,wBAAqB;AAqBf;AAHC,IAAM,aAAS;AAAA,EACpB,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QArB1B,IAqBG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,cAAc,WAAW,eAAe,OAAO,IAAI,SAAsB;AAAA,QACzF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAWd,IAAM,iBAAoE;AAAA,EAC/E,CAAC,IAA+C,QAAQ;AAAvD,iBAAE,MAAI,YAAY,OAAO,UA7C5B,IA6CG,IAAuC,iBAAvC,IAAuC,CAArC,MAAuB;AACxB,WACE,4CAAC,4BAAU,eAAW,6BAAK,oBAAoB,SAAsB,GAAG,OAAc,KAAM;AAAA,EAEhG;AACF;AACA,WAAW,cAAc;AA0BlB,IAAM,+BAA2B;AAAA,EACtC,CAAC,IAAoD,QAAQ;AAA5D,iBAAE,YAAU,SAAS,SAAS,UA9EjC,IA8EG,IAA4C,iBAA5C,IAA4C,CAA1C,YAAU,WAAS,WAAS;AAC7B,UAAM,YAAY,UAAU,yBAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,sCAAsC,OAAO;AAAA,UAC7C;AAAA,QACF;AAAA,SACI,OAPL;AAAA,QASE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;AAOhC,IAAM,mBAAqE;AAAA,EAChF,CAAC,IAAkE,QAAQ;AAA1E,iBAAE,MAAI,YAAY,UAAU,UAAU,MAAM,UAvG/C,IAuGG,IAA0D,iBAA1D,IAA0D,CAAxD,MAA0B,YAAU,QAAM;AAC3C,WACE,6CAAC,0CAAU,eAAW,6BAAK,sBAAsB,SAAsB,GAAG,OAAc,OAAvF,EACE;AAAA;AAAA,MAAS;AAAA,MAAE;AAAA,QACd;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAKpB,IAAM,uBACX,yBAAW,CAAC,IAA+C,QAAQ;AAAvD,eAAE,MAAI,YAAY,OAAO,UArHvC,IAqHc,IAAuC,iBAAvC,IAAuC,CAArC,MAAuB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,6BAAK,0BAA0B,SAAsB;AAAA,MAChE;AAAA,OACI;AAAA,EACN;AAEJ,CAAC;AACH,iBAAiB,cAAc;","names":[]}
+{"version":3,"sources":["../../src/navbar/navbar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Navbar variant\n   *\n   * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n   *\n   * For internal services or flagship services use the `service` should be used\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"service\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n  ({ asChild, children, className, variant, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"header\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbar.displayName = \"Navbar\";\n\ninterface NavbarLogoProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo = forwardRef<HTMLDivElement, NavbarLogoProps>(\n  ({ children, className, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(`hds-navbar__logo`, className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The text display next to the logo\n   */\n  children: React.ReactNode;\n\n  /**\n   * The text variant\n   *\n   * Use `service` for internal applications\n   *\n   * Use `flagship` for public facing applications\n   */\n  variant: \"service\" | \"flagship\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n  ({ children, asChild, variant, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          \"hds-navbar__logo-and-service-text\",\n          `hds-navbar__logo-and-service-text--${variant}`,\n          className as undefined,\n        )}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\ninterface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n/**\n * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`\n */\nexport const NavbarItemIcon = forwardRef<HTMLDivElement, NavbarItemIconProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <Slot className={clsx(\"hds-navbar__item-icon\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Slot>\n    );\n  },\n);\nNavbarItemIcon.displayName = \"Navbar.ItemIcon\";\n\ninterface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * Generic Navbar item\n *\n * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons\n */\nexport const NavbarItem = forwardRef<HTMLDivElement, NavbarItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarItem.displayName = \"Navbar.Item\";\n\ninterface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const NavbarButtonItem = forwardRef<HTMLButtonElement, NavbarButtonItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"button\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar__item\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarButtonItem.displayName = \"Navbar.ButtonItem\";\n\ninterface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const NavbarLinkItem = forwardRef<HTMLAnchorElement, NavbarLinkItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"a\";\n    return (\n      <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLinkItem.displayName = \"Navbar.LinkItem\";\n\ninterface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const NavbarNavigation = forwardRef<HTMLDivElement, NavbarNavigationProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar__navigation\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n"],"mappings":"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","names":[]}

package/dist/navbar/navbar.mjs

@@ -1,14 +1,20 @@
 import {
   Navbar,
-  NavbarButton,
+  NavbarButtonItem,
+  NavbarItem,
+  NavbarItemIcon,
+  NavbarLinkItem,
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarNavigation
-} from "../chunk-625SVQEP.mjs";
+} from "../chunk-GSJPTZT3.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Navbar,
-  NavbarButton,
+  NavbarButtonItem,
+  NavbarItem,
+  NavbarItemIcon,
+  NavbarLinkItem,
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarNavigation

package/dist/show-more/index.js

@@ -92,14 +92,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var AutoAnimateHeight = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
       children,
       style,
       animationDuration = "quick",
       animationEasing = "normal",
       onTransitionEnd
     } = _b, rest = __objRest(_b, [
-      "as",
       "children",
       "style",
       "animationDuration",
@@ -156,7 +154,7 @@ var AutoAnimateHeight = (0, import_react2.forwardRef)(
       };
     }, [children]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      Component,
+      "div",
       __spreadProps(__spreadValues({
         ref: mergedRef,
         onTransitionEnd,

package/dist/show-more/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/show-more/index.ts","../../src/utilities/auto-animate-height.tsx","../../src/utils.ts","../../src/show-more/show-more.tsx"],"sourcesContent":["export { AutoAnimateHeight } from \"../utilities/auto-animate-height\";\nexport type * from \"../utilities/auto-animate-height\";\n\nexport { ShowMoreButton } from \"./show-more\";\nexport type * from \"./show-more\";\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useMergeRefs, type OverridableComponent } from \"../utils\";\n\nexport interface AutoAnimateHeightProps {\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: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        as: Component = \"div\",\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        <Component\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            }}\n          >\n            {children}\n          </div>\n          {clonedChildren}\n        </Component>\n      );\n    },\n  );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\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 */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n  | {\n      variant?: \"show-more\";\n      expanded?: never;\n    }\n  | {\n      variant: \"show-more-show-less\";\n      expanded: boolean;\n    };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n  text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * **Example**\n *\n * ```tsx\n * function Content() {\n *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n *   function onShowMoreItems() {\n *     fetchMoreItems();\n *   }\n *   return (\n *     <>\n *       <ul>\n *         {items.map((item) => (\n *          <li key={item.id}>{item.text}</li>\n *         ))}\n *       </ul>\n *       {moreItemsAvailable ?\n *         <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n *         null\n *       }\n *     </>\n *   )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n  ({ text, variant, expanded, className, ...rest }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          \"hds-show-more\",\n          variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n          className as undefined,\n        )}\n        data-state={expanded ? \"expanded\" : undefined}\n        type=\"button\"\n        {...rest}\n      >\n        {text}\n        <span className={clsx(\"hds-show-more__icon\")} />\n      </button>\n    );\n  },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":"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","names":["import_react","_a","_b","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/show-more/index.ts","../../src/utilities/auto-animate-height.tsx","../../src/utils.ts","../../src/show-more/show-more.tsx"],"sourcesContent":["export { AutoAnimateHeight } from \"../utilities/auto-animate-height\";\nexport type * from \"../utilities/auto-animate-height\";\n\nexport { ShowMoreButton } from \"./show-more\";\nexport type * from \"./show-more\";\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          }}\n        >\n          {children}\n        </div>\n        {clonedChildren}\n      </div>\n    );\n  },\n);\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\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 */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n  | {\n      variant?: \"show-more\";\n      expanded?: never;\n    }\n  | {\n      variant: \"show-more-show-less\";\n      expanded: boolean;\n    };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n  text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * @example\n * ```tsx\n * function Content() {\n *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n *   function onShowMoreItems() {\n *     fetchMoreItems();\n *   }\n *   return (\n *     <>\n *       <ul>\n *         {items.map((item) => (\n *          <li key={item.id}>{item.text}</li>\n *         ))}\n *       </ul>\n *       {moreItemsAvailable ?\n *         <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n *         null\n *       }\n *     </>\n *   )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n  ({ text, variant, expanded, className, ...rest }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          \"hds-show-more\",\n          variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n          className as undefined,\n        )}\n        data-state={expanded ? \"expanded\" : undefined}\n        type=\"button\"\n        {...rest}\n      >\n        {text}\n        <span className={clsx(\"hds-show-more__icon\")} />\n      </button>\n    );\n  },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAsE;;;ACAtE,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;;;AD6BmB;AAnBZ,IAAM,wBAAoB;AAAA,EAC/B,CACE,IAQA,QACG;AATH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB;AAAA,IA3CN,IAsCI,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AA3CN,QAAAC,KAAAC;AAgDI,UAAM,cAAU,sBAAuB,IAAI;AAC3C,UAAM,YAAY,aAAa,CAAC,SAAS,GAAG,CAAC;AAC7C,UAAM,qBAAiB,sBAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,QAAI;AAAA,MAC1B;AAAA,IACF;AACA,UAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,MAA0B,UACpE,4BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AAEA,iCAAU,MAAM;AA1DpB,UAAAD;AA2DM,UAAI,CAAC,QAAQ;AAAS;AACtB,UAAI,CAAC,eAAe;AAAS;AAC7B,UAAI,SAAS,KAAK,iBAAiB;AAAG;AACtC,YAAM,qBAAqB,eAAe;AAC1C,YAAM,EAAE,QAAQ,UAAU,IAAI,mBAAmB,sBAAsB;AAKvE,UAAI,2BAA2B;AAC/B,YAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAM,EAAE,QAAQ,cAAc,IAAI,mBAAmB,sBAAsB;AAC3E,YAAI,kBAAkB;AAA0B;AAChD,mCAA2B;AAC3B,kBAAU,EAAE,QAAQ,eAAe,eAAe,MAAM,CAAC;AAAA,MAC3D,CAAC;AACD,qBAAe,QAAQ,kBAAkB;AAGzC,gBAAU,EAAE,QAAQ,WAAW,eAAe,KAAK,CAAC;AAGpD,YAAM,yBAAqB,4BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAG3D,UAAI,eAAcA,MAAA,iCAAQ,WAAR,OAAAA,MAAkB,IAAI;AACtC,0BAAkB,kBAAkB;AACpC,eAAO,MAAM;AACX,yBAAe,WAAW;AAAA,QAC5B;AAAA,MACF;AAGA,YAAM,cAAc,QAAQ;AAC5B,eAAS,uBAAuB,GAAoB;AAClD,YAAI,EAAE,iBAAiB;AAAU;AACjC,0BAAkB,kBAAkB;AAAA,MACtC;AACA,kBAAY,iBAAiB,iBAAiB,sBAAsB;AACpE,aAAO,MAAM;AACX,uBAAe,WAAW;AAC1B,oBAAY,oBAAoB,iBAAiB,sBAAsB;AAAA,MACzE;AAAA,IAGF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV,SAAQC,MAAA,iCAAQ,WAAR,OAAAA,OAAkBD,MAAA,eAAe,YAAf,gBAAAA,IAAwB,wBAAwB;AAAA,UAC1E,qBAAoB,iCAAQ,iBAAgB,WAAW;AAAA,UACvD,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,UAC7E,YAAY;AAAA,WACT;AAAA,SAED,OAbL;AAAA,QAeC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;;;AEzIhC,6BAAqB;AACrB,IAAAE,gBAA2B;AA+CrB,IAAAC,sBAAA;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA9C9B,IA8CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,6CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":["import_react","_a","_b","import_react","import_jsx_runtime"]}

package/dist/show-more/index.mjs

@@ -1,11 +1,11 @@
 import "../chunk-MSFHJVHD.mjs";
 import {
   ShowMoreButton
-} from "../chunk-ZDPU3N54.mjs";
+} from "../chunk-UB2R7TCG.mjs";
 import {
   AutoAnimateHeight
-} from "../chunk-UXJIK76H.mjs";
-import "../chunk-JXA3B33M.mjs";
+} from "../chunk-K3CBNVXC.mjs";
+import "../chunk-DEX36MFK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   AutoAnimateHeight,

package/dist/show-more/show-more.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n  | {\n      variant?: \"show-more\";\n      expanded?: never;\n    }\n  | {\n      variant: \"show-more-show-less\";\n      expanded: boolean;\n    };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n  text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * **Example**\n *\n * ```tsx\n * function Content() {\n *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n *   function onShowMoreItems() {\n *     fetchMoreItems();\n *   }\n *   return (\n *     <>\n *       <ul>\n *         {items.map((item) => (\n *          <li key={item.id}>{item.text}</li>\n *         ))}\n *       </ul>\n *       {moreItemsAvailable ?\n *         <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n *         null\n *       }\n *     </>\n *   )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n  ({ text, variant, expanded, className, ...rest }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          \"hds-show-more\",\n          variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n          className as undefined,\n        )}\n        data-state={expanded ? \"expanded\" : undefined}\n        type=\"button\"\n        {...rest}\n      >\n        {text}\n        <span className={clsx(\"hds-show-more__icon\")} />\n      </button>\n    );\n  },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,mBAA2B;AAgDrB;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA/C9B,IA+CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,4CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}
+{"version":3,"sources":["../../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n  | {\n      variant?: \"show-more\";\n      expanded?: never;\n    }\n  | {\n      variant: \"show-more-show-less\";\n      expanded: boolean;\n    };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n  text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * @example\n * ```tsx\n * function Content() {\n *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n *   function onShowMoreItems() {\n *     fetchMoreItems();\n *   }\n *   return (\n *     <>\n *       <ul>\n *         {items.map((item) => (\n *          <li key={item.id}>{item.text}</li>\n *         ))}\n *       </ul>\n *       {moreItemsAvailable ?\n *         <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n *         null\n *       }\n *     </>\n *   )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n  ({ text, variant, expanded, className, ...rest }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          \"hds-show-more\",\n          variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n          className as undefined,\n        )}\n        data-state={expanded ? \"expanded\" : undefined}\n        type=\"button\"\n        {...rest}\n      >\n        {text}\n        <span className={clsx(\"hds-show-more__icon\")} />\n      </button>\n    );\n  },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,mBAA2B;AA+CrB;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA9C9B,IA8CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,4CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}

package/dist/show-more/show-more.mjs

@@ -1,6 +1,6 @@
 import {
   ShowMoreButton
-} from "../chunk-ZDPU3N54.mjs";
+} from "../chunk-UB2R7TCG.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   ShowMoreButton

package/dist/skeleton/index.js

@@ -54,14 +54,15 @@ __export(skeleton_exports, {
 module.exports = __toCommonJS(skeleton_exports);
 
 // src/skeleton/skeleton.tsx
-var React = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Skeleton = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
+      as: Tag = "div",
+      asChild,
       children,
       animation = true,
       variant = "text",
@@ -71,6 +72,7 @@ var Skeleton = (0, import_react.forwardRef)(
       style
     } = _b, rest = __objRest(_b, [
       "as",
+      "asChild",
       "children",
       "animation",
       "variant",
@@ -79,9 +81,10 @@ var Skeleton = (0, import_react.forwardRef)(
       "className",
       "style"
     ]);
+    const Component = asChild ? import_react_slot.Slot : Tag;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         className: (0, import_typed_classname.clsx)(
           "hds-skeleton",
           `hds-skeleton--${variant}`,
@@ -89,9 +92,10 @@ var Skeleton = (0, import_react.forwardRef)(
           className
         ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
-        ref,
         "aria-hidden": true
-      }, rest), {
+      }, { inert: "true" }), {
+        ref
+      }), rest), {
         children
       })
     );