@postenbring/hedwig-react 0.0.63 → 0.0.65

package/dist/navbar/navbar.js

@@ -52,16 +52,26 @@ __export(navbar_exports, {
   Navbar: () => Navbar,
   NavbarButton: () => NavbarButton,
   NavbarLogo: () => NavbarLogo,
+  NavbarLogoAndServiceText: () => NavbarLogoAndServiceText,
   NavbarNavigation: () => NavbarNavigation
 });
 module.exports = __toCommonJS(navbar_exports);
 var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+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 } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-navbar", className), ref }, rest), { children }));
+    var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "header",
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        ref
+      }, rest), {
+        children
+      })
+    );
   }
 );
 Navbar.displayName = "Navbar";
@@ -72,6 +82,26 @@ var NavbarLogo = (0, import_react.forwardRef)(
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
+var NavbarLogoAndServiceText = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname.clsx)(
+          "hds-navbar__logo-and-service-text",
+          `hds-navbar__logo-and-service-text--${variant}`,
+          className
+        )
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
 var NavbarButton = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, icon, className } = _b, rest = __objRest(_b, ["as", "children", "icon", "className"]);
@@ -99,6 +129,7 @@ NavbarNavigation.displayName = "Navbar.Navigation";
   Navbar,
   NavbarButton,
   NavbarLogo,
+  NavbarLogoAndServiceText,
   NavbarNavigation
 });
 //# sourceMappingURL=navbar.js.map

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 type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <header className={clsx(\"hds-navbar\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </header>\n    );\n  },\n);\nNavbar.displayName = \"Navbar\";\n\n// Navbar logo\ninterface NavbarLogoProps {\n  children?: never;\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\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,mBAAuD;AACvD,6BAAqB;AAYf;AAHC,IAAM,aAAS;AAAA,EACpB,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAXf,IAWG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE,4CAAC,yCAAO,eAAW,6BAAK,cAAc,SAAsB,GAAG,OAAc,OAA5E,EACE,WACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAMd,IAAM,iBAAoE;AAAA,EAC/E,CAAC,IAA+C,QAAQ;AAAvD,iBAAE,MAAI,YAAY,OAAO,UA1B5B,IA0BG,IAAuC,iBAAvC,IAAuC,CAArC,MAAuB;AACxB,WACE,4CAAC,4BAAU,eAAW,6BAAK,oBAAoB,SAAsB,GAAG,OAAc,KAAM;AAAA,EAEhG;AACF;AACA,WAAW,cAAc;AAOlB,IAAM,mBAAqE;AAAA,EAChF,CAAC,IAAkE,QAAQ;AAA1E,iBAAE,MAAI,YAAY,UAAU,UAAU,MAAM,UAxC/C,IAwCG,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,UAtDvC,IAsDc,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 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":[]}

package/dist/navbar/navbar.mjs

@@ -2,13 +2,15 @@ import {
   Navbar,
   NavbarButton,
   NavbarLogo,
+  NavbarLogoAndServiceText,
   NavbarNavigation
-} from "../chunk-JMDXW2ML.mjs";
+} from "../chunk-625SVQEP.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Navbar,
   NavbarButton,
   NavbarLogo,
+  NavbarLogoAndServiceText,
   NavbarNavigation
 };
 //# sourceMappingURL=navbar.mjs.map

package/dist/show-more/index.js

@@ -110,6 +110,7 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
       __spreadProps(__spreadValues({
         ref,
         style: __spreadValues({
+          position: "relative",
           overflow: "hidden",
           height,
           transitionProperty: "height",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/show-more/index.ts","../../src/utilities/auto-animate-height.tsx","../../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 { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n  quick: 100,\n  normal: 300,\n  slow: 700,\n};\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   * 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        ...rest\n      },\n      ref,\n    ) => {\n      const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<number | undefined>(undefined);\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n      useEffect(() => {\n        if (measurementRef.current) {\n          const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          if (newHeight < (height ?? 0)) {\n            // If the children are shrinking, hold off on replacing until the animation is done\n            // This way we don't get a sudden flash of empty content\n            setTimeout(() => {\n              flushSync(() => {\n                setHeight(newHeight);\n              });\n              timeoutRef.current = setTimeout(() => {\n                setClonedChildren(cloneElement(<>{children}</>, {}));\n              }, animationDurationToValue[animationDuration]);\n            });\n          } else {\n            setHeight(newHeight);\n            setClonedChildren(cloneElement(<>{children}</>, {}));\n          }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={ref}\n          style={{\n            overflow: \"hidden\",\n            height,\n            transitionProperty: \"height\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\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 { 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;;;ACAA,mBAAsE;AACtE,uBAA0B;AAoDL;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,wBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAa,qBAA8B,IAAI;AACrD,UAAM,qBAAiB,qBAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,MAA0B,UACpE,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,gCAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,4CAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,oCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,gCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;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;AACF,kBAAkB,cAAc;;;AC7GhC,6BAAqB;AACrB,IAAAA,gBAA2B;AAgDrB,IAAAC,sBAAA;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,6CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/show-more/index.ts","../../src/utilities/auto-animate-height.tsx","../../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 { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n  quick: 100,\n  normal: 300,\n  slow: 700,\n};\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   * 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        ...rest\n      },\n      ref,\n    ) => {\n      const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<number | undefined>(undefined);\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n      useEffect(() => {\n        if (measurementRef.current) {\n          const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          if (newHeight < (height ?? 0)) {\n            // If the children are shrinking, hold off on replacing until the animation is done\n            // This way we don't get a sudden flash of empty content\n            setTimeout(() => {\n              flushSync(() => {\n                setHeight(newHeight);\n              });\n              timeoutRef.current = setTimeout(() => {\n                setClonedChildren(cloneElement(<>{children}</>, {}));\n              }, animationDurationToValue[animationDuration]);\n            });\n          } else {\n            setHeight(newHeight);\n            setClonedChildren(cloneElement(<>{children}</>, {}));\n          }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={ref}\n          style={{\n            position: \"relative\",\n            overflow: \"hidden\",\n            height,\n            transitionProperty: \"height\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\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 { 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;;;ACAA,mBAAsE;AACtE,uBAA0B;AAoDL;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,wBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAa,qBAA8B,IAAI;AACrD,UAAM,qBAAiB,qBAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,MAA0B,UACpE,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,gCAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,4CAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,oCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,gCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAXL;AAAA,QAaC;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;AACF,kBAAkB,cAAc;;;AC9GhC,6BAAqB;AACrB,IAAAA,gBAA2B;AAgDrB,IAAAC,sBAAA;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,6CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":["import_react","import_jsx_runtime"]}

package/dist/show-more/index.mjs

@@ -4,7 +4,7 @@ import {
 } from "../chunk-ZDPU3N54.mjs";
 import {
   AutoAnimateHeight
-} from "../chunk-Q6REETZD.mjs";
+} from "../chunk-AKYK3XFN.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   AutoAnimateHeight,

package/dist/skeleton/index.js

@@ -60,11 +60,34 @@ 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", children, variant = "text", width, height, className, style } = _b, rest = __objRest(_b, ["as", "children", "variant", "width", "height", "className", "style"]);
+    var _b = _a, {
+      as: Component = "div",
+      children,
+      animation = true,
+      variant = "text",
+      width,
+      height,
+      className,
+      style
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "animation",
+      "variant",
+      "width",
+      "height",
+      "className",
+      "style"
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname.clsx)("hds-skeleton", `hds-skeleton--${variant}`, className),
+        className: (0, import_typed_classname.clsx)(
+          "hds-skeleton",
+          `hds-skeleton--${variant}`,
+          !animation && `hds-skeleton--no-animation`,
+          className
+        ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
         ref,
         "aria-hidden": true

package/dist/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/skeleton/index.ts","../../src/skeleton/skeleton.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\";\nexport type * from \"./skeleton\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    { as: Component = \"div\", children, variant = \"text\", width, height, className, style, ...rest },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\"hds-skeleton\", `hds-skeleton--${variant}`, className as undefined)}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAyDrB;AANC,IAAM,eAAgE;AAAA,EAC3E,CACE,IACA,QACG;AAFH,iBAAE,MAAI,YAAY,OAAO,UAAU,UAAU,QAAQ,OAAO,QAAQ,WAAW,MAvDnF,IAuDI,IAAyF,iBAAzF,IAAyF,CAAvF,MAAuB,YAAU,WAAkB,SAAO,UAAQ,aAAW;AAG/E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,gBAAgB,iBAAiB,OAAO,IAAI,SAAsB;AAAA,QAClF,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../../src/skeleton/index.ts","../../src/skeleton/skeleton.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\";\nexport type * from \"./skeleton\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  /**\n   * Whether to show animation or not\n   * In the future the animation effect might become configurable\n   *\n   * default true\n   */\n  animation?: boolean;\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      children,\n      animation = true,\n      variant = \"text\",\n      width,\n      height,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\n          \"hds-skeleton\",\n          `hds-skeleton--${variant}`,\n          !animation && `hds-skeleton--no-animation`,\n          className as undefined,\n        )}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AA2ErB;AAhBC,IAAM,eAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAvEN,IA+DI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/skeleton/index.mjs

@@ -1,7 +1,7 @@
 import "../chunk-JTZPQHKD.mjs";
 import {
   Skeleton
-} from "../chunk-OYJQ5MAS.mjs";
+} from "../chunk-A47QULAK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Skeleton

package/dist/skeleton/skeleton.js

@@ -58,11 +58,34 @@ 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", children, variant = "text", width, height, className, style } = _b, rest = __objRest(_b, ["as", "children", "variant", "width", "height", "className", "style"]);
+    var _b = _a, {
+      as: Component = "div",
+      children,
+      animation = true,
+      variant = "text",
+      width,
+      height,
+      className,
+      style
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "animation",
+      "variant",
+      "width",
+      "height",
+      "className",
+      "style"
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname.clsx)("hds-skeleton", `hds-skeleton--${variant}`, className),
+        className: (0, import_typed_classname.clsx)(
+          "hds-skeleton",
+          `hds-skeleton--${variant}`,
+          !animation && `hds-skeleton--no-animation`,
+          className
+        ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
         ref,
         "aria-hidden": true

package/dist/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    { as: Component = \"div\", children, variant = \"text\", width, height, className, style, ...rest },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\"hds-skeleton\", `hds-skeleton--${variant}`, className as undefined)}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAyDrB;AANC,IAAM,eAAgE;AAAA,EAC3E,CACE,IACA,QACG;AAFH,iBAAE,MAAI,YAAY,OAAO,UAAU,UAAU,QAAQ,OAAO,QAAQ,WAAW,MAvDnF,IAuDI,IAAyF,iBAAzF,IAAyF,CAAvF,MAAuB,YAAU,WAAkB,SAAO,UAAQ,aAAW;AAG/E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,gBAAgB,iBAAiB,OAAO,IAAI,SAAsB;AAAA,QAClF,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  /**\n   * Whether to show animation or not\n   * In the future the animation effect might become configurable\n   *\n   * default true\n   */\n  animation?: boolean;\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      children,\n      animation = true,\n      variant = \"text\",\n      width,\n      height,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\n          \"hds-skeleton\",\n          `hds-skeleton--${variant}`,\n          !animation && `hds-skeleton--no-animation`,\n          className as undefined,\n        )}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AA2ErB;AAhBC,IAAM,eAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAvEN,IA+DI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/skeleton/skeleton.mjs

@@ -1,6 +1,6 @@
 import {
   Skeleton
-} from "../chunk-OYJQ5MAS.mjs";
+} from "../chunk-A47QULAK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Skeleton

package/dist/tabs/context.d.mts

@@ -1,2 +1,3 @@
+export { useTabsContext } from '../_tsup-dts-rollup';
 export { TabsContextProps } from '../_tsup-dts-rollup';
 export { TabsContext } from '../_tsup-dts-rollup';

package/dist/tabs/context.d.ts

@@ -1,2 +1,3 @@
+export { useTabsContext } from '../_tsup-dts-rollup';
 export { TabsContextProps } from '../_tsup-dts-rollup';
 export { TabsContext } from '../_tsup-dts-rollup';

package/dist/tabs/context.js

@@ -20,19 +20,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tabs/context.ts
 var context_exports = {};
 __export(context_exports, {
-  TabsContext: () => TabsContext
+  TabsContext: () => TabsContext,
+  useTabsContext: () => useTabsContext
 });
 module.exports = __toCommonJS(context_exports);
 var import_react = require("react");
-var TabsContext = (0, import_react.createContext)({
-  mounted: false,
-  activeTabId: void 0,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
-  toggleActiveTabId: (tabId) => {
+var TabsContext = (0, import_react.createContext)(null);
+function useTabsContext() {
+  const context = (0, import_react.useContext)(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
+    );
   }
-});
+  return context;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  TabsContext
+  TabsContext,
+  useTabsContext
 });
 //# sourceMappingURL=context.js.map

package/dist/tabs/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAQvB,IAAM,kBAAc,4BAAgC;AAAA,EACzD,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,mBAAmB,CAAC,UAAkB;AAAA,EAEtC;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../src/tabs/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAOnC,IAAM,kBAAc,4BAAuC,IAAI;AAE/D,SAAS,iBAAiB;AAC/B,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/dist/tabs/context.mjs

@@ -1,8 +1,10 @@
 import {
-  TabsContext
-} from "../chunk-33JD5XDW.mjs";
+  TabsContext,
+  useTabsContext
+} from "../chunk-KQITCS3U.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
-  TabsContext
+  TabsContext,
+  useTabsContext
 };
 //# sourceMappingURL=context.mjs.map

package/dist/tabs/index.js

@@ -69,13 +69,16 @@ var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
 var import_react = require("react");
-var TabsContext = (0, import_react.createContext)({
-  mounted: false,
-  activeTabId: void 0,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
-  toggleActiveTabId: (tabId) => {
+var TabsContext = (0, import_react.createContext)(null);
+function useTabsContext() {
+  const context = (0, import_react.useContext)(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
+    );
   }
-});
+  return context;
+}
 
 // src/tabs/tabs.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -83,13 +86,7 @@ var Tabs = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
     const [activeTabId, setActiveTabId] = (0, import_react2.useState)(defaultTab);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      TabsContext.Provider,
-      {
-        value: { activeTabId, toggleActiveTabId: setActiveTabId, mounted: true },
-        children
-      }
-    ) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
@@ -129,20 +126,47 @@ function useResize(ref) {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function TabsList(_a) {
   var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
+  const { activeTabId } = useTabsContext();
   const tabsListRef = (0, import_react4.useRef)(null);
   const { width: tabsWidth } = useResize(tabsListRef);
   const { innerWidth } = window;
   const wideEnough = innerWidth >= tabsWidth;
+  const previousTabId = (0, import_react4.useRef)(activeTabId);
+  (0, import_react4.useEffect)(() => {
+    const tabList = tabsListRef.current;
+    const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
+    if (!activeTab || !tabList)
+      return;
+    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;
+    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab;
+    const height = offsetHeight / containerHeight;
+    const width = offsetWidth / containerWidth;
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-height", String(height));
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-width", String(width));
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-top", `${offsetTop}px`);
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-left", `${offsetLeft}px`);
+    if (previousTabId.current !== activeTabId) {
+      tabsListRef.current.style.setProperty(
+        "--_hds-tabs-marker-animated-color",
+        "var(--_hds-tabs-marker-color)"
+      );
+      tabsListRef.current.style.setProperty(
+        "--_hds-tabs-marker-border-fallback-color",
+        "transparent"
+      );
+    }
+    previousTabId.current = activeTabId;
+  }, [activeTabId, innerWidth]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadProps(__spreadValues({
       className: (0, import_typed_classname2.clsx)(
-        "hds-tabs--list",
+        "hds-tabs__list",
         direction === "horizontal" ? {
-          [`hds-tabs--list-horizontal`]: wideEnough,
-          "hds-tabs--list-vertical": !wideEnough
+          "hds-tabs__list--horizontal": wideEnough,
+          "hds-tabs__list--vertical": !wideEnough
         } : {
-          "hds-tabs--list-vertical": true
+          "hds-tabs__list--vertical": true
         },
         className
       ),
@@ -157,10 +181,7 @@ TabsList.displayName = "Tabs.List";
 var Tab = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
-    const context = (0, import_react4.useContext)(TabsContext);
-    if (!context.mounted) {
-      throw new Error("Context required. Did you use <TabContent/> outside of <Tabs/>?");
-    }
+    const context = useTabsContext();
     const toggleTab = (e) => {
       e.preventDefault();
       context.toggleActiveTabId(tabId);
@@ -170,8 +191,8 @@ var Tab = (0, import_react4.forwardRef)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname2.clsx)(
-          "hds-tabs--tab",
-          { "hds-tabs--tab-active": context.activeTabId === tabId },
+          "hds-tabs__tab",
+          { "hds-tabs__tab--active": context.activeTabId === tabId },
           className
         ),
         "data-tabid": tabId,
@@ -192,16 +213,13 @@ var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname")
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function TabsContents(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname3.clsx)("hds-tabs--contents") }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname3.clsx)("hds-tabs__contents") }, rest), { children }));
 }
 TabsContents.displayName = "Tabs.Contents";
 var TabsContent = (0, import_react5.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
-    const context = (0, import_react5.useContext)(TabsContext);
-    if (!context.mounted) {
-      throw new Error("Context required. Did you use <Tabs.Content /> outside of <Tabs/>?");
-    }
+    const context = useTabsContext();
     if (context.activeTabId === forTabId) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/index.tsx","../../src/tabs/tabs.tsx","../../src/tabs/context.ts","../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs } from \"./tabs\";\nimport { TabsList, Tab } from \"./tabs-list\";\nimport { TabsContents, TabsContent } from \"./tabs-content\";\n\nconst TabsComponent = Tabs as typeof Tabs & {\n  List: typeof TabsList;\n  Tab: typeof Tab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\nTabsComponent.List = TabsList;\nTabsComponent.Tab = Tab;\nTabsComponent.Contents = TabsContents;\nTabsComponent.Content = TabsContent;\n\nexport { TabsComponent as Tabs };\n\nexport type * from \"./tabs\";\nexport type * from \"./tabs-list\";\nexport type * from \"./tabs-content\";\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider\n          value={{ activeTabId, toggleActiveTabId: setActiveTabId, mounted: true }}\n        >\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n","import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useContext, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabProps> | ReactElement<TabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs--list\",\n        direction === \"horizontal\"\n          ? {\n              [`hds-tabs--list-horizontal`]: wideEnough,\n              \"hds-tabs--list-vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs--list-vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const Tab: OverridableComponent<TabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <TabContent/> outside of <Tabs/>?\");\n    }\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs--tab\",\n          { \"hds-tabs--tab-active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTab.displayName = \"Tabs.Tab\";\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","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs--contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <Tabs.Content /> outside of <Tabs/>?\");\n    }\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n"],"mappings":"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","names":["import_react","import_react","import_typed_classname","import_react","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/tabs/index.tsx","../../src/tabs/tabs.tsx","../../src/tabs/context.ts","../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs } from \"./tabs\";\nimport { TabsList, Tab } from \"./tabs-list\";\nimport { TabsContents, TabsContent } from \"./tabs-content\";\n\nconst TabsComponent = Tabs as typeof Tabs & {\n  List: typeof TabsList;\n  Tab: typeof Tab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\nTabsComponent.List = TabsList;\nTabsComponent.Tab = Tab;\nTabsComponent.Contents = TabsContents;\nTabsComponent.Content = TabsContent;\n\nexport { TabsComponent as Tabs };\n\nexport type * from \"./tabs\";\nexport type * from \"./tabs-list\";\nexport type * from \"./tabs-content\";\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider value={{ activeTabId, toggleActiveTabId: setActiveTabId }}>\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n","import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabProps> | ReactElement<TabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const { activeTabId } = useTabsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n\n  const previousTabId = useRef(activeTabId);\n\n  // Marker animation\n  useEffect(() => {\n    const tabList = tabsListRef.current;\n    const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n    if (!activeTab || !tabList) return;\n\n    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n    // Calculate the height and width of the marker relative to the container\n    const height = offsetHeight / containerHeight;\n    const width = offsetWidth / containerWidth;\n\n    // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n    // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n    // Start with border fallback, then switch to the animated marker when the user changes tabs\n    // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n    if (previousTabId.current !== activeTabId) {\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-animated-color\",\n        \"var(--_hds-tabs-marker-color)\",\n      );\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-border-fallback-color\",\n        \"transparent\",\n      );\n    }\n    previousTabId.current = activeTabId;\n  }, [activeTabId, innerWidth]);\n\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs__list\",\n        direction === \"horizontal\"\n          ? {\n              \"hds-tabs__list--horizontal\": wideEnough,\n              \"hds-tabs__list--vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs__list--vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const Tab: OverridableComponent<TabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTab.displayName = \"Tabs.Tab\";\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","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs__contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n"],"mappings":"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","names":["import_react","import_react","import_typed_classname","import_react","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime"]}

package/dist/tabs/index.mjs

@@ -1,11 +1,11 @@
 import {
   TabsComponent
-} from "../chunk-5MDJP43L.mjs";
-import "../chunk-XVZ44NGD.mjs";
-import "../chunk-MBBFU4IR.mjs";
-import "../chunk-EJADADIY.mjs";
+} from "../chunk-VFFIUNR6.mjs";
+import "../chunk-UWTGHSWT.mjs";
+import "../chunk-MUVJAMFN.mjs";
+import "../chunk-XVFQWVHO.mjs";
 import "../chunk-WCA2WPFS.mjs";
-import "../chunk-33JD5XDW.mjs";
+import "../chunk-KQITCS3U.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   TabsComponent as Tabs