@postenbring/hedwig-react 0.0.76 → 0.0.77

package/dist/chunk-3EFAPJ3H.mjs

@@ -0,0 +1,44 @@
+import {
+  AccordionItemContext
+} from "./chunk-V3PAFMK5.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/accordion/accordion-header.tsx
+import { forwardRef, useContext } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { jsx } from "react/jsx-runtime";
+var AccordionHeader = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, onClick } = _b, rest = __objRest(_b, ["children", "className", "onClick"]);
+    const context = useContext(AccordionItemContext);
+    if (context === null) {
+      return null;
+    }
+    const expandOrCollapse = (e) => {
+      context.setOpen(!context.open);
+      onClick == null ? void 0 : onClick(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({}, rest), {
+        "aria-expanded": context.open,
+        "data-state": context.open ? "open" : "closed",
+        className: clsx("hds-accordion-item-header", className),
+        onClick: expandOrCollapse,
+        ref,
+        type: "button",
+        children: /* @__PURE__ */ jsx("span", { children })
+      })
+    );
+  }
+);
+AccordionHeader.displayName = "Accordion.Header";
+
+export {
+  AccordionHeader
+};
+//# sourceMappingURL=chunk-3EFAPJ3H.mjs.map

package/dist/chunk-3EFAPJ3H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/accordion-header.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(\n  ({ children, className, onClick, ...rest }, ref) => {\n    const context = useContext(AccordionItemContext);\n    if (context === null) {\n      return null;\n    }\n    const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {\n      context.setOpen(!context.open);\n      onClick?.(e);\n    };\n    return (\n      <button\n        {...rest}\n        aria-expanded={context.open}\n        data-state={context.open ? \"open\" : \"closed\"}\n        className={clsx(\"hds-accordion-item-header\", className as undefined)}\n        onClick={expandOrCollapse}\n        ref={ref}\n        type=\"button\"\n      >\n        <span>{children}</span>\n      </button>\n    );\n  },\n);\n\nAccordionHeader.displayName = \"Accordion.Header\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,kBAAkB;AACvC,SAAS,YAAY;AA2Bb;AApBD,IAAM,kBAAkB;AAAA,EAC7B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QAV1B,IAUG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,UAAU,WAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,UAAM,mBAAmB,CAAC,MAAqC;AAC7D,cAAQ,QAAQ,CAAC,QAAQ,IAAI;AAC7B,yCAAU;AAAA,IACZ;AACA,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,iBAAe,QAAQ;AAAA,QACvB,cAAY,QAAQ,OAAO,SAAS;AAAA,QACpC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,UAAM,UAAS;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/{chunk-XVFQWVHO.mjs → chunk-3MQKXNZ6.mjs}

@@ -10,11 +10,13 @@ import {
 // src/tabs/tabs.tsx
 import { forwardRef, useState } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 var Tabs = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
+    var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
     const [activeTabId, setActiveTabId] = useState(defaultTab);
+    const Component = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ className: clsx("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
@@ -23,4 +25,4 @@ Tabs.displayName = "Tabs";
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-XVFQWVHO.mjs.map
+//# sourceMappingURL=chunk-3MQKXNZ6.mjs.map

package/dist/chunk-3MQKXNZ6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,gBAAgB;AACrC,SAAS,YAAY;AACrB,SAAS,YAAY;AA2Bb;AAND,IAAM,OAAO;AAAA,EAClB,CAAC,IAA4C,QAAQ;AAApD,iBAAE,WAAS,YAAY,SAzB1B,IAyBG,IAAoC,iBAApC,IAAoC,CAAlC,WAAS,cAAY;AACtB,UAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,UAAU;AACjE,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,WAAW,KAAK,UAAU,GAAG,OAAc,OAArD,EACC,8BAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,mBAAmB,eAAe,GAC3E,UACH,IACF;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}

package/dist/{chunk-NMMFIRLZ.mjs → chunk-3NL3TOZF.mjs}

@@ -1,7 +1,7 @@
 import {
   Box,
   BoxCloseButton
-} from "./chunk-EGXM575K.mjs";
+} from "./chunk-ENKVTAJB.mjs";
 
 // src/box/index.tsx
 var BoxComponent = Box;
@@ -10,4 +10,4 @@ BoxComponent.CloseButton = BoxCloseButton;
 export {
   BoxComponent
 };
-//# sourceMappingURL=chunk-NMMFIRLZ.mjs.map
+//# sourceMappingURL=chunk-3NL3TOZF.mjs.map

package/dist/{chunk-DM4PJFLG.mjs → chunk-6N4TGRZB.mjs}

@@ -1,6 +1,6 @@
 import {
   ErrorMessage
-} from "./chunk-IL7576PP.mjs";
+} from "./chunk-DFU2THGC.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -64,4 +64,4 @@ export {
   useFieldsetContext,
   Fieldset
 };
-//# sourceMappingURL=chunk-DM4PJFLG.mjs.map
+//# sourceMappingURL=chunk-6N4TGRZB.mjs.map

package/dist/{chunk-JDXYRFLJ.mjs → chunk-722MZPXO.mjs}

@@ -1,7 +1,7 @@
 import {
   Grid,
   GridItem
-} from "./chunk-25R7DBK6.mjs";
+} from "./chunk-ES6ISHOV.mjs";
 
 // src/layout/grid/index.tsx
 var GridComponent = Grid;
@@ -10,4 +10,4 @@ GridComponent.Item = GridItem;
 export {
   GridComponent
 };
-//# sourceMappingURL=chunk-JDXYRFLJ.mjs.map
+//# sourceMappingURL=chunk-722MZPXO.mjs.map

package/dist/chunk-7JDEN3T6.mjs

@@ -0,0 +1,109 @@
+import {
+  useTabsContext
+} from "./chunk-KQITCS3U.mjs";
+import {
+  useHydrated,
+  useResize
+} from "./chunk-DEX36MFK.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/tabs/tabs-list.tsx
+import { forwardRef, useEffect, useRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { jsx } from "react/jsx-runtime";
+var TabsList = forwardRef(
+  (_a) => {
+    var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
+    const { activeTabId } = useTabsContext();
+    const tabsListRef = useRef(null);
+    const { width: tabsWidth } = useResize(tabsListRef);
+    const isClientSide = useHydrated();
+    const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
+    const wideEnough = innerWidth >= tabsWidth;
+    const previousTabId = useRef(activeTabId);
+    useEffect(() => {
+      const tabList = tabsListRef.current;
+      const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
+      if (!activeTab || !tabList)
+        return;
+      const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;
+      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab;
+      const height = offsetHeight / containerHeight;
+      const width = offsetWidth / containerWidth;
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-height", String(height));
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-width", String(width));
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-top", `${offsetTop}px`);
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-left", `${offsetLeft}px`);
+      if (previousTabId.current !== activeTabId) {
+        tabsListRef.current.style.setProperty(
+          "--_hds-tabs-marker-animated-color",
+          "var(--_hds-tabs-marker-color)"
+        );
+        tabsListRef.current.style.setProperty(
+          "--_hds-tabs-marker-border-fallback-color",
+          "transparent"
+        );
+      }
+      previousTabId.current = activeTabId;
+    }, [activeTabId, innerWidth]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        className: clsx(
+          "hds-tabs__list",
+          direction === "horizontal" ? {
+            "hds-tabs__list--horizontal": wideEnough,
+            "hds-tabs__list--vertical": !wideEnough
+          } : {
+            "hds-tabs__list--vertical": true
+          },
+          className
+        ),
+        ref: tabsListRef,
+        role: "tablist"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+TabsList.displayName = "Tabs.List";
+var TabsTab = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
+    const context = useTabsContext();
+    const toggleTab = (e) => {
+      e.preventDefault();
+      context.toggleActiveTabId(tabId);
+      onClick == null ? void 0 : onClick(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({
+        className: clsx(
+          "hds-tabs__tab",
+          { "hds-tabs__tab--active": context.activeTabId === tabId },
+          className
+        ),
+        "data-tabid": tabId,
+        onClick: toggleTab,
+        ref,
+        type: "button",
+        role: "tab"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+TabsTab.displayName = "Tabs.Tab";
+
+export {
+  TabsList,
+  TabsTab
+};
+//# sourceMappingURL=chunk-7JDEN3T6.mjs.map

package/dist/chunk-7JDEN3T6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/tabs-list.tsx"],"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 } 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 }) => {\n    const { activeTabId } = useTabsContext();\n    const tabsListRef = useRef<HTMLDivElement>(null);\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={tabsListRef}\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"],"mappings":";;;;;;;;;;;;;;AACA,SAAS,YAAY,WAAW,cAAc;AAC9C,SAAS,YAAY;AAgEf;AAhDC,IAAM,WAAW;AAAA,EACtB,CAAC,OAA+D;AAA/D,iBAAE,YAAU,YAAY,cAAc,UAnBzC,IAmBG,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AACrC,UAAM,EAAE,YAAY,IAAI,eAAe;AACvC,UAAM,cAAc,OAAuB,IAAI;AAC/C,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,gBAAgB,OAAO,WAAW;AAGxC,cAAU,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,WAAW;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,UAAU;AAAA,EACrB,CAAC,IAAkD,QAAQ;AAA1D,iBAAE,YAAU,OAAO,WAAW,QApGjC,IAoGG,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,WAAW;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;","names":[]}

package/dist/{chunk-HMB4TY2F.mjs → chunk-7W4HONVO.mjs}

@@ -1,9 +1,9 @@
 import {
   useRadioGroupContext
-} from "./chunk-6NGF7FFY.mjs";
+} from "./chunk-RYM3LM7K.mjs";
 import {
   useFieldsetContext
-} from "./chunk-DM4PJFLG.mjs";
+} from "./chunk-6N4TGRZB.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -89,4 +89,4 @@ Radiobutton.displayName = "Radiobutton";
 export {
   Radiobutton
 };
-//# sourceMappingURL=chunk-HMB4TY2F.mjs.map
+//# sourceMappingURL=chunk-7W4HONVO.mjs.map

package/dist/{chunk-62F4I3MQ.mjs → chunk-A2H2LAII.mjs}

@@ -13,21 +13,7 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { jsx } from "react/jsx-runtime";
 var AccordionItem = forwardRef(
   (_a, ref) => {
-    var _b = _a, {
-      as: Component = "div",
-      children,
-      defaultOpen,
-      open: outerOpen,
-      onOpenChange,
-      className
-    } = _b, rest = __objRest(_b, [
-      "as",
-      "children",
-      "defaultOpen",
-      "open",
-      "onOpenChange",
-      "className"
-    ]);
+    var _b = _a, { children, defaultOpen, open: outerOpen, onOpenChange, className } = _b, rest = __objRest(_b, ["children", "defaultOpen", "open", "onOpenChange", "className"]);
     const [innerOpen, setInnerOpen] = useState(defaultOpen != null ? defaultOpen : false);
     const open = outerOpen != null ? outerOpen : innerOpen;
     const handleOpen = () => {
@@ -38,7 +24,7 @@ var AccordionItem = forwardRef(
       }
     };
     return /* @__PURE__ */ jsx(
-      Component,
+      "div",
       __spreadProps(__spreadValues({}, rest), {
         "data-state": open ? "open" : "closed",
         className: clsx("hds-accordion-item", className),
@@ -53,4 +39,4 @@ AccordionItem.displayName = "Accordion.Item";
 export {
   AccordionItem
 };
-//# sourceMappingURL=chunk-62F4I3MQ.mjs.map
+//# sourceMappingURL=chunk-A2H2LAII.mjs.map

package/dist/chunk-A2H2LAII.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/accordion-item.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\nimport type { AccordionHeaderProps } from \"./accordion-header\";\nimport type { AccordionContentProps } from \"./accordion-content\";\n\nexport type AccordionItemChildrenType =\n  | ReactElement<AccordionHeaderProps>\n  | ReactElement<AccordionContentProps>;\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Control the open state of the accordion manually\n   */\n  open?: boolean;\n\n  /**\n   * Use with open to control the open state of the accordion manually\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * If the accordion should be open by default\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Accepts type of Accordion.Content and Accordion.Header\n   */\n  children: AccordionItemChildrenType[];\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n  ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {\n    const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);\n    const open = outerOpen ?? innerOpen;\n\n    const handleOpen = () => {\n      if (outerOpen !== undefined) {\n        onOpenChange && onOpenChange(!open);\n      } else {\n        setInnerOpen(!open);\n      }\n    };\n\n    return (\n      <div\n        {...rest}\n        data-state={open ? \"open\" : \"closed\"}\n        className={clsx(\"hds-accordion-item\", className as undefined)}\n        ref={ref}\n      >\n        <AccordionItemContext.Provider value={{ open, setOpen: handleOpen }}>\n          {children}\n        </AccordionItemContext.Provider>\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = \"Accordion.Item\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,gBAAgB;AACrC,SAAS,YAAY;AAmDb;AApBD,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAA8E,QAAQ;AAAtF,iBAAE,YAAU,aAAa,MAAM,WAAW,cAAc,UAlC3D,IAkCG,IAAsE,iBAAtE,IAAsE,CAApE,YAAU,eAAa,QAAiB,gBAAc;AACvD,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,oCAAe,KAAK;AAC/D,UAAM,OAAO,gCAAa;AAE1B,UAAM,aAAa,MAAM;AACvB,UAAI,cAAc,QAAW;AAC3B,wBAAgB,aAAa,CAAC,IAAI;AAAA,MACpC,OAAO;AACL,qBAAa,CAAC,IAAI;AAAA,MACpB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,cAAY,OAAO,SAAS;AAAA,QAC5B,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,QAEA,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,MAAM,SAAS,WAAW,GAC/D,UACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}

package/dist/{chunk-YC7MT6SO.mjs → chunk-A4ME3VXV.mjs}

@@ -1,6 +1,6 @@
 import {
   InputGroup
-} from "./chunk-TNU64NUN.mjs";
+} from "./chunk-P6WIBHQH.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -34,4 +34,4 @@ Input.displayName = "Input";
 export {
   Input
 };
-//# sourceMappingURL=chunk-YC7MT6SO.mjs.map
+//# sourceMappingURL=chunk-A4ME3VXV.mjs.map

package/dist/chunk-ACEYO4LN.mjs

@@ -0,0 +1,33 @@
+import {
+  Navbar,
+  NavbarButtonItem,
+  NavbarItem,
+  NavbarItemIcon,
+  NavbarLinkItem,
+  NavbarLogo,
+  NavbarLogoAndServiceText,
+  NavbarNavigation
+} from "./chunk-GSJPTZT3.mjs";
+import {
+  NavbarExpandableMenu,
+  NavbarExpandableMenuContent,
+  NavbarExpandableMenuTrigger
+} from "./chunk-FCPQXZQV.mjs";
+
+// src/navbar/index.tsx
+var NavbarComponent = Navbar;
+NavbarComponent.Logo = NavbarLogo;
+NavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;
+NavbarComponent.ExpandableMenu = NavbarExpandableMenu;
+NavbarComponent.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;
+NavbarComponent.ExpandableMenuContent = NavbarExpandableMenuContent;
+NavbarComponent.Item = NavbarItem;
+NavbarComponent.ButtonItem = NavbarButtonItem;
+NavbarComponent.LinkItem = NavbarLinkItem;
+NavbarComponent.ItemIcon = NavbarItemIcon;
+NavbarComponent.Navigation = NavbarNavigation;
+
+export {
+  NavbarComponent
+};
+//# sourceMappingURL=chunk-ACEYO4LN.mjs.map

package/dist/chunk-ACEYO4LN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/index.tsx"],"sourcesContent":["import {\n  Navbar,\n  NavbarLogo,\n  NavbarItem,\n  NavbarButtonItem,\n  NavbarLinkItem,\n  NavbarItemIcon,\n  NavbarNavigation,\n  NavbarLogoAndServiceText,\n} from \"./navbar\";\nimport {\n  useNavbarExpendableMenuContext,\n  NavbarExpandableMenu,\n  NavbarExpandableMenuTrigger,\n  NavbarExpandableMenuContent,\n} from \"./navbar-expandable-menu\";\n\nconst NavbarComponent = Navbar as typeof Navbar & {\n  Logo: typeof NavbarLogo;\n  LogoAndServiceText: typeof NavbarLogoAndServiceText;\n  ExpandableMenu: typeof NavbarExpandableMenu;\n  ExpandableMenuTrigger: typeof NavbarExpandableMenuTrigger;\n  ExpandableMenuContent: typeof NavbarExpandableMenuContent;\n  Item: typeof NavbarItem;\n  ButtonItem: typeof NavbarButtonItem;\n  LinkItem: typeof NavbarLinkItem;\n  ItemIcon: typeof NavbarItemIcon;\n  Navigation: typeof NavbarNavigation;\n};\nNavbarComponent.Logo = NavbarLogo;\nNavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbarComponent.ExpandableMenu = NavbarExpandableMenu;\nNavbarComponent.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;\nNavbarComponent.ExpandableMenuContent = NavbarExpandableMenuContent;\nNavbarComponent.Item = NavbarItem;\nNavbarComponent.ButtonItem = NavbarButtonItem;\nNavbarComponent.LinkItem = NavbarLinkItem;\nNavbarComponent.ItemIcon = NavbarItemIcon;\nNavbarComponent.Navigation = NavbarNavigation;\n\nexport {\n  NavbarComponent as Navbar,\n  NavbarLogo,\n  NavbarItem,\n  NavbarButtonItem,\n  NavbarLinkItem,\n  NavbarItemIcon,\n  NavbarNavigation,\n  NavbarLogoAndServiceText,\n  useNavbarExpendableMenuContext,\n  NavbarExpandableMenu,\n  NavbarExpandableMenuTrigger,\n  NavbarExpandableMenuContent,\n};\nexport type * from \"./navbar\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,IAAM,kBAAkB;AAYxB,gBAAgB,OAAO;AACvB,gBAAgB,qBAAqB;AACrC,gBAAgB,iBAAiB;AACjC,gBAAgB,wBAAwB;AACxC,gBAAgB,wBAAwB;AACxC,gBAAgB,OAAO;AACvB,gBAAgB,aAAa;AAC7B,gBAAgB,WAAW;AAC3B,gBAAgB,WAAW;AAC3B,gBAAgB,aAAa;","names":[]}

package/dist/{chunk-VVPJOVFP.mjs → chunk-AXKJB47E.mjs}

@@ -72,4 +72,4 @@ export {
   HStack,
   VStack
 };
-//# sourceMappingURL=chunk-VVPJOVFP.mjs.map
+//# sourceMappingURL=chunk-AXKJB47E.mjs.map

package/dist/chunk-AXKJB47E.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/stack/stack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Space between items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    {\n      children,\n      asChild,\n      className,\n      style: _style,\n      gap,\n      gapX,\n      gapY,\n      direction,\n      wrap,\n      align,\n      justify,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-gap-y\", gapY, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAuFf;AA9BC,IAAM,QAAQ;AAAA,EACnB,CACE,IAcA,QACG;AAfH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAzEN,IA8DI,IAYK,iBAZL,IAYK;AAAA,MAXH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,QAA8B,4HAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,SAAS,WAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,oBAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,SAAS,WAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,oBAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/{chunk-UWTGHSWT.mjs → chunk-CCVZAHYA.mjs}

@@ -10,16 +10,21 @@ import {
 // src/tabs/tabs-content.tsx
 import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
-function TabsContents(_a) {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: clsx("hds-tabs__contents") }, rest), { children }));
-}
+var TabsContents = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ ref, className: clsx("hds-tabs__contents") }, rest), { children }));
+  }
+);
 TabsContents.displayName = "Tabs.Contents";
 var TabsContent = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
+    var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
     const context = useTabsContext();
+    const Component = asChild ? Slot : "div";
     if (context.activeTabId === forTabId) {
       return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
@@ -32,4 +37,4 @@ export {
   TabsContents,
   TabsContent
 };
-//# sourceMappingURL=chunk-UWTGHSWT.mjs.map
+//# sourceMappingURL=chunk-CCVZAHYA.mjs.map

package/dist/chunk-CCVZAHYA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/tabs-content.tsx"],"sourcesContent":["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":";;;;;;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAkBf;AAJC,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAgC,QAAQ;AAAxC,iBAAE,WAAS,SAlBd,IAkBG,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,KAAU,WAAW,KAAK,oBAAoB,KAAO,OAA/D,EACE,WACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAkBpB,IAAM,cAAc;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,OAAO;AAEnC,QAAI,QAAQ,gBAAgB,UAAU;AACpC,aACE,oBAAC,4CAAc,OAAd,EAAoB,KAClB,WACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACF;AAEA,YAAY,cAAc;","names":[]}

package/dist/chunk-CIHZDFSQ.mjs

@@ -0,0 +1,148 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/card/card.tsx
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Card = forwardRef((_a, ref) => {
+  var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
+  const Component = asChild ? Slot : Tag;
+  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, rest), { className: clsx("hds-card", className), ref, children }));
+});
+Card.displayName = "Card";
+var CardMedia = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, rest), { className: clsx("hds-card__media", className), ref, children }));
+  }
+);
+CardMedia.displayName = "Card.Media";
+var CardMediaImg = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? Slot : "img";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: clsx("hds-card__media__img", className),
+        ref
+      })
+    );
+  }
+);
+CardMediaImg.displayName = "Card.MediaImg";
+var CardBody = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, rest), { className: clsx("hds-card__body", className), ref, children }));
+  }
+);
+CardBody.displayName = "Card.Body";
+var CardBodyHeader = forwardRef((_a, ref) => {
+  var _b = _a, { as: Tag, asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
+  const Component = asChild ? Slot : Tag;
+  return /* @__PURE__ */ jsx(
+    Component,
+    __spreadProps(__spreadValues({}, rest), {
+      className: clsx("hds-card__body-header", className),
+      ref,
+      children
+    })
+  );
+});
+CardBodyHeader.displayName = "Card.BodyHeader";
+var CardBodyHeaderOverline = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: clsx("hds-card__body-header-overline", className),
+        ref,
+        children
+      })
+    );
+  }
+);
+CardBodyHeaderOverline.displayName = "Card.BodyHeaderOverline";
+var CardBodyHeaderTitle = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: clsx("hds-card__body-header-title", className),
+        ref,
+        children
+      })
+    );
+  }
+);
+CardBodyHeaderTitle.displayName = "Card.BodyHeaderTitle";
+var CardBodyDescription = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? Slot : "p";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: clsx("hds-card__body-description", className),
+        ref,
+        children
+      })
+    );
+  }
+);
+CardBodyDescription.displayName = "Card.BodyDescription";
+var CardBodyAction = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: clsx("hds-card__body-action", className),
+        ref,
+        children
+      })
+    );
+  }
+);
+CardBodyAction.displayName = "Card.BodyAction";
+var CardBodyActionArrow = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: clsx("hds-card__body-action-arrow", className),
+        ref
+      })
+    );
+  }
+);
+CardBodyActionArrow.displayName = "Card.BodyActionArrow";
+
+export {
+  Card,
+  CardMedia,
+  CardMediaImg,
+  CardBody,
+  CardBodyHeader,
+  CardBodyHeaderOverline,
+  CardBodyHeaderTitle,
+  CardBodyDescription,
+  CardBodyAction,
+  CardBodyActionArrow
+};
+//# sourceMappingURL=chunk-CIHZDFSQ.mjs.map

package/dist/chunk-CIHZDFSQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Card = forwardRef<\n  HTMLDivElement,\n  CardBaseProps & {\n    /**\n     * A Card should in most cases appear as a big link,\n     * but the actual link should just be the header title.\n     * To make life better for those with screen readers we should not make\n     * the entire card a link, as that would cause the entire card to be read\n     * as a link to the user. That would be perceived as information overload.\n     */\n    as?: \"section\" | \"div\" | \"article\" | \"aside\";\n  }\n>(({ as: Tag = \"section\", asChild, className, children, ...rest }, ref) => {\n  const Component = asChild ? Slot : Tag;\n  return (\n    <Component {...rest} className={clsx(\"hds-card\", className as undefined)} ref={ref}>\n      {children}\n    </Component>\n  );\n});\nCard.displayName = \"Card\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n        {children}\n      </Component>\n    );\n  },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"img\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__media__img\", className as undefined)}\n        ref={ref}\n      />\n    );\n  },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n        {children}\n      </Component>\n    );\n  },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n  HTMLHeadingElement,\n  CardBaseProps &\n    (\n      | {\n          /**\n           * Heading level of the card heading\n           */\n          as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n          asChild?: never;\n        }\n      | {\n          asChild: true;\n          as?: never;\n        }\n    )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n  const Component = asChild ? Slot : Tag;\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-card__body-header\", className as undefined)}\n      ref={ref}\n    >\n      {children}\n    </Component>\n  );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"span\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-header-title\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"p\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-description\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-action\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"span\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-action-arrow\", className as undefined)}\n        ref={ref}\n      />\n    );\n  },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n"],"mappings":"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","names":[]}

package/dist/chunk-COEZA7WA.mjs

@@ -0,0 +1,30 @@
+import {
+  UnorderedList
+} from "./chunk-WHMIHTPC.mjs";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/list/link-list.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var LinkList = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      UnorderedList,
+      __spreadValues({
+        ref,
+        className: clsx("hds-list--link-list", className)
+      }, rest)
+    );
+  }
+);
+LinkList.displayName = "LinkList";
+
+export {
+  LinkList
+};
+//# sourceMappingURL=chunk-COEZA7WA.mjs.map

package/dist/chunk-COEZA7WA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list/link-list.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { ListProps } from \"./list\";\nimport { UnorderedList } from \"./list\";\n\nexport interface LinkListProps extends Omit<ListProps, \"listStyle\"> {\n  children?: React.ReactElement<HTMLLIElement> | React.ReactElement<HTMLLIElement>[];\n}\n\n/**\n * Show a list of links\n *\n * For other list types use `UnorderedList` and `OrderedList`, or use your own list component using the semantic `ul` and `ol` tags.\n */\nexport const LinkList = forwardRef<HTMLUListElement, LinkListProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <UnorderedList\n        ref={ref}\n        className={clsx(\"hds-list--link-list\", className as undefined)}\n        {...rest}\n      />\n    );\n  },\n);\nLinkList.displayName = \"LinkList\";\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAgBrB;AAHC,IAAM,WAAW;AAAA,EACtB,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAfL,IAeG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,uBAAuB,SAAsB;AAAA,SACzD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/chunk-CSXSUQ2M.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-CSXSUQ2M.mjs.map