@postenbring/hedwig-react 0.0.81 → 0.0.83

package/dist/tabs/index.js

@@ -59,7 +59,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tabs/index.tsx
 var tabs_exports = {};
 __export(tabs_exports, {
-  Tabs: () => TabsComponent,
+  Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsContents: () => TabsContents,
   TabsList: () => TabsList,
@@ -68,9 +68,9 @@ __export(tabs_exports, {
 module.exports = __toCommonJS(tabs_exports);
 
 // src/tabs/tabs.tsx
-var import_react2 = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot = require("@radix-ui/react-slot");
+var import_react5 = require("react");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot2 = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
 var import_react = require("react");
@@ -85,23 +85,37 @@ function useTabsContext() {
   return context;
 }
 
-// src/tabs/tabs.tsx
+// src/tabs/tabs-content.tsx
+var import_react2 = 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 Tabs = (0, import_react2.forwardRef)(
+var TabsContents = (0, import_react2.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react2.useState)(defaultTab);
+    var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
     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-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname.clsx)("hds-tabs__contents") }, rest), { children }));
   }
 );
-Tabs.displayName = "Tabs";
+TabsContents.displayName = "Tabs.Contents";
+var TabsContent = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
+    const context = useTabsContext();
+    const Component = asChild ? import_react_slot.Slot : "div";
+    if (context.activeTabId === forTabId) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
+    }
+    return null;
+  }
+);
+TabsContent.displayName = "Tabs.Content";
 
 // src/tabs/tabs-list.tsx
 var import_react4 = require("react");
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
 
-// src/utils.ts
+// src/utils/utils.ts
 var React = __toESM(require("react"));
 var import_react3 = require("react");
 function useMergeRefs(refs) {
@@ -245,38 +259,21 @@ var TabsTab = (0, import_react4.forwardRef)(
 );
 TabsTab.displayName = "Tabs.Tab";
 
-// src/tabs/tabs-content.tsx
-var import_react5 = require("react");
-var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot2 = require("@radix-ui/react-slot");
+// src/tabs/tabs.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TabsContents = (0, import_react5.forwardRef)(
+var Tabs = (0, import_react5.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
-    const Component = asChild ? import_react_slot2.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, __spreadProps(__spreadValues({ ref, 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, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
-    const context = useTabsContext();
+    var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
+    const [activeTabId, setActiveTabId] = (0, import_react5.useState)(defaultTab);
     const Component = asChild ? import_react_slot2.Slot : "div";
-    if (context.activeTabId === forTabId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
-    }
-    return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname3.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
-TabsContent.displayName = "Tabs.Content";
-
-// src/tabs/index.tsx
-var TabsComponent = Tabs;
-TabsComponent.List = TabsList;
-TabsComponent.Tab = TabsTab;
-TabsComponent.Contents = TabsContents;
-TabsComponent.Content = TabsContent;
+Tabs.displayName = "Tabs";
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Contents = TabsContents;
+Tabs.Content = TabsContent;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Tabs,

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, TabsTab } from \"./tabs-list\";\nimport { TabsContents, TabsContent } from \"./tabs-content\";\n\nconst TabsComponent = Tabs as typeof Tabs & {\n  List: typeof TabsList;\n  Tab: typeof TabsTab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\nTabsComponent.List = TabsList;\nTabsComponent.Tab = TabsTab;\nTabsComponent.Contents = TabsContents;\nTabsComponent.Content = TabsContent;\n\nexport { TabsComponent as Tabs, TabsList, TabsTab, TabsContents, TabsContent };\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 { Slot } from \"@radix-ui/react-slot\";\nimport { TabsContext } from \"./context\";\nimport type { TabsContentsProps } from \"./tabs-content\";\nimport type { TabsListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsListProps | TabsContentsProps>[] | 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  /**\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 Tabs = forwardRef<HTMLDivElement, TabsProps>(\n  ({ asChild, defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    const Component = asChild ? Slot : \"div\";\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);\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 { useResize, useHydrated, useMergeRefs } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\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   * @default \"horizontal\"\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, direction = \"horizontal\", className, ...rest }, ref) => {\n    const { activeTabId } = useTabsContext();\n    const tabsListRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([tabsListRef, ref]);\n    const { width: tabsWidth } = useResize(tabsListRef);\n\n    const isClientSide = useHydrated();\n    const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\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={mergedRef}\n        role=\"tablist\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  ({ 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?.(e);\n    };\n    return (\n      <button\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        type=\"button\"\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nTabsTab.displayName = \"Tabs.Tab\";\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 type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\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 TabsContents = forwardRef<HTMLDivElement, TabsContentsProps>(\n  ({ asChild, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component ref={ref} className={clsx(\"hds-tabs__contents\")} {...rest}>\n        {children}\n      </Component>\n    );\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  /**\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 TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(\n  ({ asChild, forTabId, children, ...rest }, ref) => {\n    const context = useTabsContext();\n    const Component = asChild ? Slot : \"div\";\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_react_slot","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/tabs/index.tsx","../../src/tabs/tabs.tsx","../../src/tabs/context.ts","../../src/tabs/tabs-content.tsx","../../src/tabs/tabs-list.tsx","../../src/utils/utils.ts"],"sourcesContent":["export { Tabs } from \"./tabs\";\nexport { TabsList, TabsTab } from \"./tabs-list\";\nexport { TabsContents, TabsContent } from \"./tabs-content\";\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 { Slot } from \"@radix-ui/react-slot\";\nimport { TabsContext } from \"./context\";\nimport { TabsContent, TabsContents, type TabsContentsProps } from \"./tabs-content\";\nimport { TabsList, TabsTab, type TabsListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsListProps | TabsContentsProps>[] | 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  /**\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 Tabs = forwardRef<HTMLDivElement, TabsProps>(\n  ({ asChild, defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    const Component = asChild ? Slot : \"div\";\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) as TabsType;\nTabs.displayName = \"Tabs\";\n\ntype TabsType = ReturnType<typeof forwardRef<HTMLDivElement, TabsProps>> & {\n  List: typeof TabsList;\n  Tab: typeof TabsTab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\n\nTabs.List = TabsList;\nTabs.Tab = TabsTab;\nTabs.Contents = TabsContents;\nTabs.Content = TabsContent;\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 } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\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 TabsContents = forwardRef<HTMLDivElement, TabsContentsProps>(\n  ({ asChild, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component ref={ref} className={clsx(\"hds-tabs__contents\")} {...rest}>\n        {children}\n      </Component>\n    );\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  /**\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 TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(\n  ({ asChild, forTabId, children, ...rest }, ref) => {\n    const context = useTabsContext();\n    const Component = asChild ? Slot : \"div\";\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","import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useResize, useHydrated, useMergeRefs } from \"../utils/utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\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   * @default \"horizontal\"\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, direction = \"horizontal\", className, ...rest }, ref) => {\n    const { activeTabId } = useTabsContext();\n    const tabsListRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([tabsListRef, ref]);\n    const { width: tabsWidth } = useResize(tabsListRef);\n\n    const isClientSide = useHydrated();\n    const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\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={mergedRef}\n        role=\"tablist\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  ({ 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?.(e);\n    };\n    return (\n      <button\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        type=\"button\"\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nTabsTab.displayName = \"Tabs.Tab\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_react","import_typed_classname","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/dist/tabs/index.mjs

@@ -1,20 +1,20 @@
+import "../chunk-7YWW46R3.mjs";
 import {
-  TabsComponent
-} from "../chunk-IJAX6APL.mjs";
+  Tabs
+} from "../chunk-QZZIOBF4.mjs";
 import {
   TabsList,
   TabsTab
-} from "../chunk-4WQWU5TL.mjs";
-import "../chunk-3MQKXNZ6.mjs";
+} from "../chunk-AXQCREUJ.mjs";
 import {
   TabsContent,
   TabsContents
 } from "../chunk-CCVZAHYA.mjs";
 import "../chunk-KQITCS3U.mjs";
-import "../chunk-DEX36MFK.mjs";
+import "../chunk-TDXU2IC6.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
-  TabsComponent as Tabs,
+  Tabs,
   TabsContent,
   TabsContents,
   TabsList,

package/dist/tabs/tabs-content.d.ts

@@ -1,4 +1,26 @@
-export { TabsContentsProps_alias_3 as TabsContentsProps } from '../_tsup-dts-rollup';
-export { TabsContents_alias_3 as TabsContents } from '../_tsup-dts-rollup';
-export { TabsContentProps_alias_3 as TabsContentProps } from '../_tsup-dts-rollup';
-export { TabsContent_alias_3 as TabsContent } from '../_tsup-dts-rollup';
+import type { HTMLAttributes, ReactElement } from "react";
+export interface TabsContentsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const TabsContents: import("react").ForwardRefExoticComponent<TabsContentsProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface TabsContentProps extends HTMLAttributes<HTMLElement> {
+    children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;
+    /**
+     * Content for the referenced tabId
+     */
+    forTabId: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const TabsContent: import("react").ForwardRefExoticComponent<TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=tabs-content.d.ts.map

package/dist/tabs/tabs-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-content.d.ts","sourceRoot":"","sources":["../../src/tabs/tabs-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;IAE5E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,8GASxB,CAAC;AAGF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACnE,QAAQ,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC,EAAE,GAAG,MAAM,CAAC;IAE3E;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,6GAcvB,CAAC"}

package/dist/tabs/tabs-list.d.ts

@@ -1,4 +1,21 @@
-export { TabsListProps_alias_3 as TabsListProps } from '../_tsup-dts-rollup';
-export { TabsList_alias_3 as TabsList } from '../_tsup-dts-rollup';
-export { TabsTabProps_alias_3 as TabsTabProps } from '../_tsup-dts-rollup';
-export { TabsTab_alias_3 as TabsTab } from '../_tsup-dts-rollup';
+import type { HTMLAttributes, ReactElement } from "react";
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];
+    /**
+     * Direction of the tabs. Can either be vertical or horizontal.
+     * Horizontal breaks on window width with fallback back to vertical
+     *
+     * @default "horizontal"
+     */
+    direction?: "vertical" | "horizontal";
+}
+export declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactElement<HTMLElement> | string;
+    /**
+     * Identifier for the tab
+     */
+    tabId: string;
+}
+export declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=tabs-list.d.ts.map

package/dist/tabs/tabs-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../src/tabs/tabs-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAc,MAAM,OAAO,CAAC;AAMtE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IAEpE;;;;;OAKG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,0GAsEpB,CAAC;AAGF,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IACrE,QAAQ,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAE7C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO,4GA2BnB,CAAC"}

package/dist/tabs/tabs-list.js

@@ -66,7 +66,7 @@ module.exports = __toCommonJS(tabs_list_exports);
 var import_react3 = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 
-// src/utils.ts
+// src/utils/utils.ts
 var React = __toESM(require("react"));
 var import_react = require("react");
 function useMergeRefs(refs) {

package/dist/tabs/tabs-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useResize, useHydrated, useMergeRefs } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\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   * @default \"horizontal\"\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, direction = \"horizontal\", className, ...rest }, ref) => {\n    const { activeTabId } = useTabsContext();\n    const tabsListRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([tabsListRef, ref]);\n    const { width: tabsWidth } = useResize(tabsListRef);\n\n    const isClientSide = useHydrated();\n    const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\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={mergedRef}\n        role=\"tablist\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  ({ 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?.(e);\n    };\n    return (\n      <button\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        type=\"button\"\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nTabsTab.displayName = \"Tabs.Tab\";\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 { 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":"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","names":["import_react","import_react"]}
+{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useResize, useHydrated, useMergeRefs } from \"../utils/utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\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   * @default \"horizontal\"\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, direction = \"horizontal\", className, ...rest }, ref) => {\n    const { activeTabId } = useTabsContext();\n    const tabsListRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([tabsListRef, ref]);\n    const { width: tabsWidth } = useResize(tabsListRef);\n\n    const isClientSide = useHydrated();\n    const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\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={mergedRef}\n        role=\"tablist\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  ({ 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?.(e);\n    };\n    return (\n      <button\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        type=\"button\"\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nTabsTab.displayName = \"Tabs.Tab\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","import { 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":"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","names":["import_react","import_react"]}

package/dist/tabs/tabs-list.mjs

@@ -1,9 +1,9 @@
 import {
   TabsList,
   TabsTab
-} from "../chunk-4WQWU5TL.mjs";
+} from "../chunk-AXQCREUJ.mjs";
 import "../chunk-KQITCS3U.mjs";
-import "../chunk-DEX36MFK.mjs";
+import "../chunk-TDXU2IC6.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   TabsList,

package/dist/tabs/tabs.d.ts

@@ -1,2 +1,26 @@
-export { TabsProps_alias_3 as TabsProps } from '../_tsup-dts-rollup';
-export { Tabs_alias_3 as Tabs } from '../_tsup-dts-rollup';
+import type { HTMLAttributes, ReactElement } from "react";
+import { forwardRef } from "react";
+import { TabsContent, TabsContents, type TabsContentsProps } from "./tabs-content";
+import { TabsList, TabsTab, type TabsListProps } from "./tabs-list";
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement<TabsListProps | TabsContentsProps>[] | ReactElement;
+    /**
+     * Define which tab to use as default. Must be one of the <Tab/>s identifier.
+     */
+    defaultTab: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const Tabs: TabsType;
+type TabsType = ReturnType<typeof forwardRef<HTMLDivElement, TabsProps>> & {
+    List: typeof TabsList;
+    Tab: typeof TabsTab;
+    Contents: typeof TabsContents;
+    Content: typeof TabsContent;
+};
+export {};
+//# sourceMappingURL=tabs.d.ts.map

package/dist/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,YAAY,CAAC,aAAa,GAAG,iBAAiB,CAAC,EAAE,GAAG,YAAY,CAAC;IAE3E;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,UAYJ,CAAC;AAGd,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG;IACzE,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,GAAG,EAAE,OAAO,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,OAAO,EAAE,OAAO,WAAW,CAAC;CAC7B,CAAC"}