@postenbring/hedwig-react 0.0.81 → 0.0.82

package/dist/warning-banner/index.mjs

@@ -1,9 +1,9 @@
 import "../chunk-3D2MWIEX.mjs";
 import {
   WarningBanner
-} from "../chunk-XC3UHH2U.mjs";
-import "../chunk-3NL3TOZF.mjs";
-import "../chunk-ENKVTAJB.mjs";
+} from "../chunk-3WVRY6CC.mjs";
+import "../chunk-BCFV6VOE.mjs";
+import "../chunk-AJWSQEDP.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   WarningBanner

package/dist/warning-banner/warning-banner.d.ts

@@ -1,2 +1,8 @@
-export { WarningBannerProps_alias_3 as WarningBannerProps } from '../_tsup-dts-rollup';
-export { WarningBanner_alias_3 as WarningBanner } from '../_tsup-dts-rollup';
+import type { ReactNode } from "react";
+import React from "react";
+export interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+}
+export declare const WarningBanner: React.ForwardRefExoticComponent<WarningBannerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=warning-banner.d.ts.map

package/dist/warning-banner/warning-banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"warning-banner.d.ts","sourceRoot":"","sources":["../../src/warning-banner/warning-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC7F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,2FAYzB,CAAC"}

package/dist/warning-banner/warning-banner.js

@@ -60,6 +60,20 @@ var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
+var BoxCloseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      __spreadValues({
+        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
+        ref,
+        type: "button"
+      }, rest)
+    );
+  }
+);
+BoxCloseButton.displayName = "Box.CloseButton";
 var Box = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -114,24 +128,7 @@ var Box = (0, import_react.forwardRef)(
   }
 );
 Box.displayName = "Box";
-var BoxCloseButton = (0, import_react.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      __spreadValues({
-        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
-        ref,
-        type: "button"
-      }, rest)
-    );
-  }
-);
-BoxCloseButton.displayName = "Box.CloseButton";
-
-// src/box/index.tsx
-var BoxComponent = Box;
-BoxComponent.CloseButton = BoxCloseButton;
+Box.CloseButton = BoxCloseButton;
 
 // src/warning-banner/warning-banner.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -139,7 +136,7 @@ var WarningBanner = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
     const expandable = !!description;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname2.clsx)("hds-warning-banner", className), ref, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname2.clsx)("hds-warning-banner", className), ref, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
       expandable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WarningBannerDescription, { children: description }) : null
     ] }));

package/dist/warning-banner/warning-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/warning-banner/warning-banner.tsx","../../src/box/box.tsx","../../src/box/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box\";\n\nexport interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description?: ReactNode;\n}\n\nexport const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(\n  ({ title, description, className, ...rest }, ref) => {\n    const expandable = !!description;\n    return (\n      <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n          {title}\n        </WarningBannerTitle>\n        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n      </Box>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ntype WarningBannerTitleProps =\n  | ({ variant: \"expandable\" } & React.ButtonHTMLAttributes<HTMLButtonElement>)\n  | ({ variant: \"default\" } & React.HTMLAttributes<HTMLParagraphElement>);\n\nconst WarningBannerTitle = forwardRef<\n  HTMLButtonElement | HTMLParagraphElement,\n  WarningBannerTitleProps\n>(({ variant, children, className, ...rest }, ref) => {\n  const [open, setOpen] = useState<boolean>(false);\n  if (variant === \"expandable\") {\n    return (\n      <button\n        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        className={clsx(\n          \"hds-warning-banner__title\",\n          \"hds-warning-banner__title-trigger\",\n          { \"hds-warning-banner--closed\": !open },\n          className as undefined,\n        )}\n        onClick={() => {\n          setOpen((prev) => !prev);\n        }}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n      >\n        <span>{children}</span>\n      </button>\n    );\n  }\n  return (\n    <p\n      {...(rest as React.HTMLAttributes<HTMLParagraphElement>)}\n      className={clsx(\"hds-warning-banner__title\", className as undefined)}\n      ref={ref as React.Ref<HTMLParagraphElement>}\n    >\n      {children}\n    </p>\n  );\n});\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\ntype WarningBannerDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\nconst WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <p\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\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 Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box, BoxCloseButton };\n\nexport type * from \"./box\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/warning-banner/warning-banner.tsx","../../src/box/box.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box\";\n\nexport interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description?: ReactNode;\n}\n\nexport const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(\n  ({ title, description, className, ...rest }, ref) => {\n    const expandable = !!description;\n    return (\n      <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n          {title}\n        </WarningBannerTitle>\n        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n      </Box>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ntype WarningBannerTitleProps =\n  | ({ variant: \"expandable\" } & React.ButtonHTMLAttributes<HTMLButtonElement>)\n  | ({ variant: \"default\" } & React.HTMLAttributes<HTMLParagraphElement>);\n\nconst WarningBannerTitle = forwardRef<\n  HTMLButtonElement | HTMLParagraphElement,\n  WarningBannerTitleProps\n>(({ variant, children, className, ...rest }, ref) => {\n  const [open, setOpen] = useState<boolean>(false);\n  if (variant === \"expandable\") {\n    return (\n      <button\n        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        className={clsx(\n          \"hds-warning-banner__title\",\n          \"hds-warning-banner__title-trigger\",\n          { \"hds-warning-banner--closed\": !open },\n          className as undefined,\n        )}\n        onClick={() => {\n          setOpen((prev) => !prev);\n        }}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n      >\n        <span>{children}</span>\n      </button>\n    );\n  }\n  return (\n    <p\n      {...(rest as React.HTMLAttributes<HTMLParagraphElement>)}\n      className={clsx(\"hds-warning-banner__title\", className as undefined)}\n      ref={ref as React.Ref<HTMLParagraphElement>}\n    >\n      {children}\n    </p>\n  );\n});\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\ntype WarningBannerDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\nconst WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <p\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\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 Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}

package/dist/warning-banner/warning-banner.mjs

@@ -1,8 +1,8 @@
 import {
   WarningBanner
-} from "../chunk-XC3UHH2U.mjs";
-import "../chunk-3NL3TOZF.mjs";
-import "../chunk-ENKVTAJB.mjs";
+} from "../chunk-3WVRY6CC.mjs";
+import "../chunk-BCFV6VOE.mjs";
+import "../chunk-AJWSQEDP.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   WarningBanner

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -9,10 +9,10 @@
   ],
   "license": "MIT",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src/**"
   ],
   "devDependencies": {
-    "@microsoft/api-extractor": "7.43.2",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
@@ -48,8 +48,12 @@
     "react"
   ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "pnpm run --sequential /^build:.*/",
+    "build:bundle": "tsup",
+    "build:types": "tsc -p tsconfig.types.json",
+    "dev": "pnpm run --parallel /^dev:.*/",
+    "dev:bundle": "tsup --watch",
+    "dev:types": "tsc -p tsconfig.types.json --watch",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf .turbo node_modules dist"

package/src/accordion/accordion-content.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { forwardRef, useContext } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { AccordionItemContext } from "./context";
+
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
+  ({ children, className, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+    if (context === null) {
+      return null;
+    }
+    return (
+      <div
+        aria-hidden={!context.open}
+        data-state={context.open ? "open" : "closed"}
+        {...{ inert: context.open ? undefined : "true" }}
+        className={clsx("hds-accordion-item-content", className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        <div className={clsx("hds-accordion-item-content-inner")}>{children}</div>
+      </div>
+    );
+  },
+);
+
+AccordionContent.displayName = "Accordion.Content";

package/src/accordion/accordion-header.tsx

@@ -0,0 +1,36 @@
+import type { MouseEvent, ReactNode } from "react";
+import { forwardRef, useContext } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { AccordionItemContext } from "./context";
+
+export interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
+  ({ children, className, onClick, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+    if (context === null) {
+      return null;
+    }
+    const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {
+      context.setOpen(!context.open);
+      onClick?.(e);
+    };
+    return (
+      <button
+        {...rest}
+        aria-expanded={context.open}
+        data-state={context.open ? "open" : "closed"}
+        className={clsx("hds-accordion-item-header", className as undefined)}
+        onClick={expandOrCollapse}
+        ref={ref}
+        type="button"
+      >
+        <span>{children}</span>
+      </button>
+    );
+  },
+);
+
+AccordionHeader.displayName = "Accordion.Header";

package/src/accordion/accordion-item.tsx

@@ -0,0 +1,62 @@
+import type { ReactElement } from "react";
+import { forwardRef, useState } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { AccordionItemContext } from "./context";
+import type { AccordionHeaderProps } from "./accordion-header";
+import type { AccordionContentProps } from "./accordion-content";
+
+export type AccordionItemChildrenType =
+  | ReactElement<AccordionHeaderProps>
+  | ReactElement<AccordionContentProps>;
+
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Control the open state of the accordion manually
+   */
+  open?: boolean;
+
+  /**
+   * Use with open to control the open state of the accordion manually
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * If the accordion should be open by default
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Accepts type of Accordion.Content and Accordion.Header
+   */
+  children: AccordionItemChildrenType[];
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {
+    const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);
+    const open = outerOpen ?? innerOpen;
+
+    const handleOpen = () => {
+      if (outerOpen !== undefined) {
+        onOpenChange && onOpenChange(!open);
+      } else {
+        setInnerOpen(!open);
+      }
+    };
+
+    return (
+      <div
+        {...rest}
+        data-state={open ? "open" : "closed"}
+        className={clsx("hds-accordion-item", className as undefined)}
+        ref={ref}
+      >
+        <AccordionItemContext.Provider value={{ open, setOpen: handleOpen }}>
+          {children}
+        </AccordionItemContext.Provider>
+      </div>
+    );
+  },
+);
+
+AccordionItem.displayName = "Accordion.Item";

package/src/accordion/accordion.stories.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Link } from "../link";
+import { UnorderedList } from "../list";
+import { Accordion } from ".";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Accordion",
+  component: Accordion,
+  args: {
+    children: (
+      <>
+        <Accordion.Item>
+          <Accordion.Header>Professional accordion title</Accordion.Header>
+          <Accordion.Content>
+            This is the simplest form of accordion body. Can be extensive.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>Yet another POAT with &laquo;advanced&raquo; content</Accordion.Header>
+          <Accordion.Content>
+            <h4>Hello</h4>
+            <div>
+              <p>
+                This is some really, really exciting stuff with{" "}
+                <Link href="https://www.posten.no">a link</Link> and all sorts of things like a
+                list, even!
+              </p>
+              <UnorderedList>
+                <li>Unordered</li>
+                <li>Like</li>
+                <li>You have</li>
+                <li>Never seen</li>
+              </UnorderedList>
+            </div>
+          </Accordion.Content>
+        </Accordion.Item>
+      </>
+    ),
+  },
+};
+
+type Story = StoryObj<typeof Accordion>;
+
+export const MultipleItems: Story = {
+  name: "Multiple items",
+};
+
+export const JustOneItem: Story = {
+  name: "Just one item",
+  args: {
+    children: (
+      <Accordion.Item>
+        <Accordion.Header>Professional accordion title</Accordion.Header>
+        <Accordion.Content>
+          This is the simplest form of accordion body. Can be extensive.
+        </Accordion.Content>
+      </Accordion.Item>
+    ),
+  },
+};
+
+export const NoIndent: Story = {
+  args: {
+    indent: false,
+    children: (
+      <Accordion.Item>
+        <Accordion.Header>Professional accordion title</Accordion.Header>
+        <Accordion.Content>
+          This is the simplest form of accordion body. Can be extensive.
+        </Accordion.Content>
+      </Accordion.Item>
+    ),
+  },
+};
+
+export const DefaultOpen: Story = {
+  args: {
+    children: (
+      <>
+        <Accordion.Item defaultOpen>
+          <Accordion.Header>Professional accordion title</Accordion.Header>
+          <Accordion.Content>
+            This is the simplest form of accordion body. Can be extensive.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>Professional accordion title</Accordion.Header>
+          <Accordion.Content>
+            This is the simplest form of accordion body. Can be extensive.
+          </Accordion.Content>
+        </Accordion.Item>
+      </>
+    ),
+  },
+};
+
+export const SingleAccordion: Story = {
+  name: "Only one open at the same time",
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- it's ok
+    const [state, setState] = useState({ one: false, two: false, three: false });
+    function toggle(key: keyof typeof state) {
+      setState((prev) => {
+        return {
+          one: key === "one" ? !prev.one : false,
+          two: key === "two" ? !prev.two : false,
+          three: key === "three" ? !prev.three : false,
+        };
+      });
+    }
+
+    return (
+      <Accordion>
+        <Accordion.Item
+          onOpenChange={() => {
+            toggle("one");
+          }}
+          open={state.one}
+        >
+          <Accordion.Header>One</Accordion.Header>
+          <Accordion.Content>
+            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item
+          onOpenChange={() => {
+            toggle("two");
+          }}
+          open={state.two}
+        >
+          <Accordion.Header>Two</Accordion.Header>
+          <Accordion.Content>
+            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item
+          onOpenChange={() => {
+            toggle("three");
+          }}
+          open={state.three}
+        >
+          <Accordion.Header>Three</Accordion.Header>
+          <Accordion.Content>
+            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    );
+  },
+};
+
+export default meta;

package/src/accordion/accordion.tsx

@@ -0,0 +1,68 @@
+import type { ReactElement } from "react";
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { AccordionItem, type AccordionItemProps } from "./accordion-item";
+import { AccordionHeader } from "./accordion-header";
+import { AccordionContent } from "./accordion-content";
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Accepts type of <AccordionItem/>
+   */
+  children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];
+
+  /**
+   * Adds padding to the left of the accordion
+   */
+  indent?: boolean;
+}
+
+/**
+ * Displays collapsible content sections
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <Accordion.Item defaultOpen>
+ *     <Accordion.Header>Item one</Accordion.Header>
+ *     <Accordion.Content>
+ *       Some content
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Item two</Accordion.Header>
+ *     <Accordion.Content>
+ *       Some more content
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  ({ children, className, indent = true, ...rest }, ref) => {
+    return (
+      <div
+        {...rest}
+        className={clsx(
+          "hds-accordion",
+          !indent && "hds-accordion--no-indent",
+          className as undefined,
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+) as AccordionType;
+Accordion.displayName = "Accordion";
+
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+
+type AccordionType = ReturnType<typeof forwardRef<HTMLDivElement, AccordionProps>> & {
+  Item: typeof AccordionItem;
+  Header: typeof AccordionHeader;
+  Content: typeof AccordionContent;
+};

package/src/accordion/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export interface AccordionItemContextProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);

package/src/accordion/index.tsx

@@ -0,0 +1,9 @@
+export { Accordion } from "./accordion";
+export { AccordionItem } from "./accordion-item";
+export { AccordionHeader } from "./accordion-header";
+export { AccordionContent } from "./accordion-content";
+
+export type * from "./accordion";
+export type * from "./accordion-item";
+export type * from "./accordion-header";
+export type * from "./accordion-content";

package/src/badge/badge.stories.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../box";
+import { Badge, DarkBadge, WhiteBadge, WarningBadge } from ".";
+
+const meta: Meta<typeof Badge> = {
+  title: "Badge",
+  component: Badge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Lighter: Story = {
+  args: {
+    children: "Default badge",
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    children: "Dark badge",
+  },
+  render: (props) => <DarkBadge {...props} />,
+};
+
+export const White: Story = {
+  args: {
+    children: "White badge",
+  },
+  render: (props) => (
+    <Box>
+      <WhiteBadge {...props} />
+    </Box>
+  ),
+};
+
+export const Warning: Story = {
+  args: {
+    children: "Warning badge",
+  },
+  render: (props) => <WarningBadge {...props} />,
+};

package/src/badge/badge.tsx

@@ -0,0 +1,63 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+
+  /**
+   * Font size of the badge
+   *
+   * @default "small"
+   */
+  size?: "small" | "smaller";
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+const Badge = forwardRef<
+  HTMLSpanElement,
+  BadgeProps & { variant: "lighter" | "dark" | "white" | "warning" }
+>(({ children, asChild, variant, size = "small", className, ...rest }, ref) => {
+  const Component = asChild ? Slot : "span";
+  return (
+    <Component
+      ref={ref}
+      className={clsx(
+        "hds-badge",
+        `hds-badge--${size}`,
+        `hds-badge--${variant}`,
+        className as undefined,
+      )}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+});
+Badge.displayName = "Badge";
+
+export const LighterBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="lighter" />;
+});
+LighterBadge.displayName = "LighterBadge";
+
+export const DarkBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="dark" />;
+});
+DarkBadge.displayName = "DarkBadge";
+
+export const WhiteBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="white" />;
+});
+WhiteBadge.displayName = "WhiteBadge";
+
+export const WarningBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="warning" />;
+});
+WarningBadge.displayName = "WarningBadge";

package/src/badge/index.tsx

@@ -0,0 +1,3 @@
+export { LighterBadge as Badge, DarkBadge, WarningBadge, WhiteBadge } from "./badge";
+
+export type * from "./badge";