@postenbring/hedwig-react 0.0.80 → 0.0.82

package/dist/show-more/show-more.d.ts

@@ -1,2 +1,42 @@
-export { ShowMoreProps_alias_3 as ShowMoreProps } from '../_tsup-dts-rollup';
-export { ShowMoreButton_alias_3 as ShowMoreButton } from '../_tsup-dts-rollup';
+/// <reference types="react" />
+type Variant = {
+    variant?: "show-more";
+    expanded?: never;
+} | {
+    variant: "show-more-show-less";
+    expanded: boolean;
+};
+export type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {
+    text: React.ReactNode;
+} & Variant;
+/**
+ * Simple button for triggering more content.
+ *
+ * You have to add the logic for what happens when the button is clicked yourself.
+ *
+ * @example
+ * ```tsx
+ * function Content() {
+ *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();
+ *   function onShowMoreItems() {
+ *     fetchMoreItems();
+ *   }
+ *   return (
+ *     <>
+ *       <ul>
+ *         {items.map((item) => (
+ *          <li key={item.id}>{item.text}</li>
+ *         ))}
+ *       </ul>
+ *       {moreItemsAvailable ?
+ *         <ShowMoreButton className="mt-8" onClick={onShowMoreItems} lang="en" /> :
+ *         null
+ *       }
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export declare const ShowMoreButton: import("react").ForwardRefExoticComponent<ShowMoreProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=show-more.d.ts.map

package/dist/show-more/show-more.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-more.d.ts","sourceRoot":"","sources":["../../src/show-more/show-more.tsx"],"names":[],"mappings":";AAGA,KAAK,OAAO,GACR;IACE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACE,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEN,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACpE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,GAAG,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,cAAc,6GAmB1B,CAAC"}

package/dist/skeleton/index.d.ts

@@ -1,2 +1,3 @@
-export { Skeleton_alias_2 as Skeleton } from '../_tsup-dts-rollup';
-export { SkeletonProps_alias_2 as SkeletonProps } from '../_tsup-dts-rollup';
+export { Skeleton } from "./skeleton";
+export type * from "./skeleton";
+//# sourceMappingURL=index.d.ts.map

package/dist/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,mBAAmB,YAAY,CAAC"}

package/dist/skeleton/skeleton.d.ts

@@ -1,2 +1,67 @@
-export { SkeletonProps_alias_3 as SkeletonProps } from '../_tsup-dts-rollup';
-export { Skeleton_alias_3 as Skeleton } from '../_tsup-dts-rollup';
+/// <reference types="react" />
+interface DimensionsFromWidthAndHeight {
+    height?: number | string;
+    width?: number | string;
+}
+interface SkeletonPropsInner extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The visual style of the Skeleton
+     */
+    variant?: "text" | "circle" | "rectangle" | "rounded";
+    /**
+     * Whether to show animation or not
+     * In the future the animation effect might become configurable
+     *
+     * default true
+     */
+    animation?: boolean;
+    children?: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Convienence prop to change the rendered element.
+     *
+     * Use {@link SkeletonProps.asChild} if you need more control of the rendered element.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
+}
+export type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;
+/**
+ * Make skeleton loading states as placeholders for your content while waiting for data to load.
+ *
+ * **Note**
+ *
+ * Consider if this is really needed. The best experience is to avoid loading states altogether.
+ * If your loading takes under 1 second, it better to not show anything at all.
+ *
+ * - Make your backend faster
+ * - Preload/prefetch data
+ * - Avoid data loading waterfalls
+ * - Use optimistic ui when doing mutations
+ *
+ * **Usage**
+ *
+ * ```tsx
+ * <Skeleton variant="circle" width="2rem" height="2rem" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="text" width="80%" />
+ * <Skeleton variant="text">Uses content to determine width</Skeleton>
+ * <Skeleton variant="rectangle" width="300px" height="400px" />
+ * ```
+ *
+ * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.
+ *
+ * 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
+ *
+ * **References**
+ * - https://aksel.nav.no/komponenter/core/skeleton
+ * - https://chakra-ui.com/docs/components/skeleton
+ * - https://mui.com/material-ui/react-skeleton/
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonPropsInner & DimensionsFromWidthAndHeight & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/skeleton/skeleton.tsx"],"names":[],"mappings":";AAOA,UAAU,4BAA4B;IACpC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;IAEtD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,GAAG,CAAC;CAC/E;AAED,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG,4BAA4B,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,QAAQ,8IAmCpB,CAAC"}

package/dist/step-indicator/index.d.ts

@@ -1 +1,3 @@
-export { StepIndicator_alias_2 as StepIndicator } from '../_tsup-dts-rollup';
+export { StepIndicator } from "./step-indicator";
+export type * from "./step-indicator";
+//# sourceMappingURL=index.d.ts.map

package/dist/step-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/step-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,mBAAmB,kBAAkB,CAAC"}

package/dist/step-indicator/step-indicator.d.ts

@@ -1 +1,36 @@
-export { StepIndicator_alias_3 as StepIndicator } from '../_tsup-dts-rollup';
+/// <reference types="react" />
+type TitleProps = {
+    /**
+     * Optional title of the active step to be shown underneath the step indicator
+     *
+     * Use `titleAs` to set the correct heading level
+     */
+    title: React.ReactNode;
+    titleAs: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} | {
+    title?: undefined;
+    titleAs?: undefined;
+};
+interface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    activeStep: number;
+    /**
+     * 1-indexed number of steps
+     */
+    totalSteps: number;
+    /**
+     * Label on the left side above the steps
+     */
+    label: React.ReactNode;
+    /**
+     * Language for the "step x of y" label, default is "en"
+     */
+    lang?: "no" | "en" | "da" | "sv";
+}
+/**
+ * Indicate a step in a process.
+ *
+ * It does not handle step content or navigation, only the visual indication of the active step.
+ */
+export declare const StepIndicator: import("react").ForwardRefExoticComponent<(StepIndicatorProps & TitleProps) & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=step-indicator.d.ts.map

package/dist/step-indicator/step-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../src/step-indicator/step-indicator.tsx"],"names":[],"mappings":";AAGA,KAAK,UAAU,GACX;IACE;;;;OAIG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClD,GACD;IACE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEN,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAIvE,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,8HA0CzB,CAAC"}

package/dist/styled-html/index.d.ts

@@ -1,2 +1,3 @@
-export { StyledHtml_alias_2 as StyledHtml } from '../_tsup-dts-rollup';
-export { StyledHtmlProps_alias_2 as StyledHtmlProps } from '../_tsup-dts-rollup';
+export { StyledHtml } from "./styled-html";
+export type * from "./styled-html";
+//# sourceMappingURL=index.d.ts.map

package/dist/styled-html/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styled-html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,mBAAmB,eAAe,CAAC"}

package/dist/styled-html/styled-html.d.ts

@@ -1,2 +1,36 @@
-export { StyledHtmlProps_alias_3 as StyledHtmlProps } from '../_tsup-dts-rollup';
-export { StyledHtml_alias_3 as StyledHtml } from '../_tsup-dts-rollup';
+/// <reference types="react" />
+export interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    size?: "default" | "small";
+    darkmode?: boolean;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+/**
+ * A component for displaying dynamic content that you want to apply hedwig styling to.
+ * the styling depends on the semantic html elements you use inside the component.
+ *
+ * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.
+ *
+ * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.
+ *
+ * @example
+ * ```tsx
+ * <StyledHtml>
+ *   <h1>Heading 1</h1>
+ *   <h2>Heading 2</h2>
+ *   <a href="https://www.postenbring.no">Postenbring</a>
+ *   <ul>
+ *    <li>Hei</li>
+ *    <li>Hallo</li>
+ *    <li>Hello</li>
+ *   </ul>
+ * </StyledHtml>
+ * ```
+ */
+export declare const StyledHtml: import("react").ForwardRefExoticComponent<StyledHtmlProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=styled-html.d.ts.map

package/dist/styled-html/styled-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-html.d.ts","sourceRoot":"","sources":["../../src/styled-html/styled-html.tsx"],"names":[],"mappings":";AAIA,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,UAAU,4GAkBtB,CAAC"}

package/dist/table/index.d.ts

@@ -1 +1,3 @@
-export { Table_alias_2 as Table } from '../_tsup-dts-rollup';
+export { Table } from "./table";
+export type * from "./table";
+//# sourceMappingURL=index.d.ts.map

package/dist/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,mBAAmB,SAAS,CAAC"}

package/dist/table/table.d.ts

@@ -1 +1,25 @@
-export { Table_alias_3 as Table } from '../_tsup-dts-rollup';
+/// <reference types="react" />
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    className?: string;
+    /**
+     * Size of the table
+     *
+     * Use `compressed` for a more compact table, or `mobile-compressed` for a compact table on mobile screens only.
+     */
+    size?: "default" | "compressed" | "mobile-compressed";
+    /**
+     * The table caption
+     *
+     * You can also set this by passing `<caption>` as a first child of the table
+     */
+    caption?: React.ReactNode;
+    /**
+     * Optional description of the table displayed underneath the table
+     *
+     * Ensures the `aria-describedby` attribute is set on the table, making it accessible for screen readers.
+     */
+    description?: React.ReactNode;
+}
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+export {};
+//# sourceMappingURL=table.d.ts.map

package/dist/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/table/table.tsx"],"names":[],"mappings":";AAGA,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,mBAAmB,CAAC;IAEtD;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,KAAK,yGA6BjB,CAAC"}

package/dist/tabs/context.d.ts

@@ -1,3 +1,8 @@
-export { useTabsContext } from '../_tsup-dts-rollup';
-export { TabsContextProps } from '../_tsup-dts-rollup';
-export { TabsContext } from '../_tsup-dts-rollup';
+/// <reference types="react" />
+export interface TabsContextProps {
+    activeTabId: string;
+    toggleActiveTabId: (tabId: string) => void;
+}
+export declare const TabsContext: import("react").Context<TabsContextProps | null>;
+export declare function useTabsContext(): TabsContextProps;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/tabs/context.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAExE,wBAAgB,cAAc,qBAQ7B"}

package/dist/tabs/index.d.ts

@@ -1,10 +1,7 @@
-export { Tabs_alias_2 as Tabs } from '../_tsup-dts-rollup';
-export { TabsList_alias_2 as TabsList } from '../_tsup-dts-rollup';
-export { TabsTab_alias_2 as TabsTab } from '../_tsup-dts-rollup';
-export { TabsContents_alias_2 as TabsContents } from '../_tsup-dts-rollup';
-export { TabsContent_alias_2 as TabsContent } from '../_tsup-dts-rollup';
-export { TabsProps_alias_2 as TabsProps } from '../_tsup-dts-rollup';
-export { TabsListProps_alias_2 as TabsListProps } from '../_tsup-dts-rollup';
-export { TabsTabProps_alias_2 as TabsTabProps } from '../_tsup-dts-rollup';
-export { TabsContentsProps_alias_2 as TabsContentsProps } from '../_tsup-dts-rollup';
-export { TabsContentProps_alias_2 as TabsContentProps } from '../_tsup-dts-rollup';
+export { Tabs } from "./tabs";
+export { TabsList, TabsTab } from "./tabs-list";
+export { TabsContents, TabsContent } from "./tabs-content";
+export type * from "./tabs";
+export type * from "./tabs-list";
+export type * from "./tabs-content";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE3D,mBAAmB,QAAQ,CAAC;AAC5B,mBAAmB,aAAa,CAAC;AACjC,mBAAmB,gBAAgB,CAAC"}

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,17 +85,31 @@ 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");
@@ -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.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\";\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAAqC;AACrC,IAAAC,0BAAqB;AACrB,IAAAC,qBAAqB;;;ACHrB,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;;;AChBA,IAAAC,gBAA2B;AAC3B,6BAAqB;AACrB,wBAAqB;AAkBf;AAJC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAgC,QAAQ;AAAxC,iBAAE,WAAS,SAlBd,IAkBG,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACV,UAAM,YAAY,UAAU,yBAAO;AACnC,WACE,4CAAC,0CAAU,KAAU,eAAW,6BAAK,oBAAoB,KAAO,OAA/D,EACE,WACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAkBpB,IAAM,kBAAc;AAAA,EACzB,CAAC,IAA0C,QAAQ;AAAlD,iBAAE,WAAS,UAAU,SA9CxB,IA8CG,IAAkC,iBAAlC,IAAkC,CAAhC,WAAS,YAAU;AACpB,UAAM,UAAU,eAAe;AAC/B,UAAM,YAAY,UAAU,yBAAO;AAEnC,QAAI,QAAQ,gBAAgB,UAAU;AACpC,aACE,4CAAC,4CAAc,OAAd,EAAoB,KAClB,WACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACF;AAEA,YAAY,cAAc;;;AC5D1B,IAAAC,gBAA8C;AAC9C,IAAAC,0BAAqB;;;ACFrB,YAAuB;AACvB,IAAAC,gBAAiD;AAM1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAiB,CAAC;AAC9C,QAAM,mBAAe,2BAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,+BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,+BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;;;ADEM,IAAAC,sBAAA;AAjDC,IAAM,eAAW;AAAA,EACtB,CAAC,IAA4D,QAAQ;AAApE,iBAAE,YAAU,YAAY,cAAc,UAnBzC,IAmBG,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AACrC,UAAM,EAAE,YAAY,IAAI,eAAe;AACvC,UAAM,kBAAc,sBAAuB,IAAI;AAC/C,UAAM,YAAY,aAAa,CAAC,aAAa,GAAG,CAAC;AACjD,UAAM,EAAE,OAAO,UAAU,IAAI,UAAU,WAAW;AAElD,UAAM,eAAe,YAAY;AACjC,UAAM,EAAE,WAAW,IAAI,eAAe,SAAS,EAAE,YAAY,IAAK;AAClE,UAAM,aAAa,cAAc;AAEjC,UAAM,oBAAgB,sBAAO,WAAW;AAGxC,iCAAU,MAAM;AACd,YAAM,UAAU,YAAY;AAC5B,YAAM,YAAY,mCAAS,cAAc,gBAAgB,WAAW;AACpE,UAAI,CAAC,aAAa,CAAC;AAAS;AAE5B,YAAM,EAAE,cAAc,iBAAiB,aAAa,eAAe,IAAI;AACvE,YAAM,EAAE,cAAc,aAAa,WAAW,WAAW,IAAI;AAG7D,YAAM,SAAS,eAAe;AAC9B,YAAM,QAAQ,cAAc;AAI5B,kBAAY,QAAQ,MAAM,YAAY,6BAA6B,OAAO,MAAM,CAAC;AACjF,kBAAY,QAAQ,MAAM,YAAY,4BAA4B,OAAO,KAAK,CAAC;AAC/E,kBAAY,QAAQ,MAAM,YAAY,0BAA0B,GAAG,SAAS,IAAI;AAChF,kBAAY,QAAQ,MAAM,YAAY,2BAA2B,GAAG,UAAU,IAAI;AAIlF,UAAI,cAAc,YAAY,aAAa;AACzC,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AACA,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,oBAAc,UAAU;AAAA,IAC1B,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,cAAc,eACV;AAAA,YACE,8BAA8B;AAAA,YAC9B,4BAA4B,CAAC;AAAA,UAC/B,IACA;AAAA,YACE,4BAA4B;AAAA,UAC9B;AAAA,UACJ;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,SACD,OAfL;AAAA,QAiBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAWhB,IAAM,cAAU;AAAA,EACrB,CAAC,IAAkD,QAAQ;AAA1D,iBAAE,YAAU,OAAO,WAAW,QArGjC,IAqGG,IAA0C,iBAA1C,IAA0C,CAAxC,YAAU,SAAO,aAAW;AAC7B,UAAM,UAAU,eAAe;AAE/B,UAAM,YAAY,CAAC,MAAqC;AACtD,QAAE,eAAe;AACjB,cAAQ,kBAAkB,KAAK;AAC/B,yCAAU;AAAA,IACZ;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,EAAE,yBAAyB,QAAQ,gBAAgB,MAAM;AAAA,UACzD;AAAA,QACF;AAAA,QACA,cAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QACL,MAAK;AAAA,SACD,OAXL;AAAA,QAaE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;;;AHlGd,IAAAC,sBAAA;AAND,IAAM,WAAO;AAAA,EAClB,CAAC,IAA4C,QAAQ;AAApD,iBAAE,WAAS,YAAY,SAzB1B,IAyBG,IAAoC,iBAApC,IAAoC,CAAlC,WAAS,cAAY;AACtB,UAAM,CAAC,aAAa,cAAc,QAAI,wBAAiB,UAAU;AACjE,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE,6CAAC,0CAAU,eAAW,8BAAK,UAAU,GAAG,OAAc,OAArD,EACC,uDAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,mBAAmB,eAAe,GAC3E,UACH,IACF;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AASnB,KAAK,OAAO;AACZ,KAAK,MAAM;AACX,KAAK,WAAW;AAChB,KAAK,UAAU;","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,11 +1,11 @@
+import "../chunk-7YWW46R3.mjs";
 import {
-  TabsComponent
-} from "../chunk-IJAX6APL.mjs";
+  Tabs
+} from "../chunk-7UD72WOC.mjs";
 import {
   TabsList,
   TabsTab
 } from "../chunk-4WQWU5TL.mjs";
-import "../chunk-3MQKXNZ6.mjs";
 import {
   TabsContent,
   TabsContents
@@ -14,7 +14,7 @@ import "../chunk-KQITCS3U.mjs";
 import "../chunk-DEX36MFK.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"}