@postenbring/hedwig-react 0.0.82 → 0.0.84

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

@@ -52,108 +52,41 @@ __export(warning_banner_exports, {
   WarningBanner: () => WarningBanner
 });
 module.exports = __toCommonJS(warning_banner_exports);
-var import_react2 = require("react");
-var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
-
-// src/box/box.tsx
 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, {
-      asChild,
-      variant,
-      closeable = false,
-      onClose: onCloseProp,
-      closed: closedProp,
-      closeButtonProps,
-      children,
-      className
-    } = _b, rest = __objRest(_b, [
-      "asChild",
-      "variant",
-      "closeable",
-      "onClose",
-      "closed",
-      "closeButtonProps",
-      "children",
-      "className"
-    ]);
-    const [closedState, setClosedState] = (0, import_react.useState)(false);
-    const onClose = (0, import_react.useCallback)(() => {
-      if (onCloseProp) {
-        const result = onCloseProp();
-        if (result === true) {
-          setClosedState(true);
-        }
-      } else {
-        setClosedState(true);
-      }
-    }, []);
-    const closed = closedProp != null ? closedProp : closedState;
-    const Component = asChild ? import_react_slot.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      Component,
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname.clsx)(
-          "hds-box",
-          variant && `hds-box--${variant}`,
-          { "hds-box--closed": closed },
-          className
-        ),
-        ref
-      }, rest), {
-        children: [
-          closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children })
-        ]
-      })
-    );
-  }
-);
-Box.displayName = "Box";
-Box.CloseButton = BoxCloseButton;
-
-// src/warning-banner/warning-banner.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react2.forwardRef)(
+var WarningBanner = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
+    const descriptionId = (0, import_react.useId)();
     const expandable = !!description;
-    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
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname.clsx)("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        WarningBannerTitle,
+        {
+          variant: expandable ? "expandable" : "default",
+          descriptionId,
+          children: title
+        }
+      ),
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react2.forwardRef)((_a, ref) => {
-  var _b = _a, { variant, children, className } = _b, rest = __objRest(_b, ["variant", "children", "className"]);
-  const [open, setOpen] = (0, import_react2.useState)(false);
+var WarningBannerTitle = (0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { variant, descriptionId, children, className } = _b, rest = __objRest(_b, ["variant", "descriptionId", "children", "className"]);
+  const [open, setOpen] = (0, import_react.useState)(false);
   if (variant === "expandable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname2.clsx)(
+        "aria-expanded": open,
+        "aria-controls": descriptionId,
+        "data-state": open ? "open" : "closed",
+        className: (0, import_typed_classname.clsx)(
           "hds-warning-banner__title",
           "hds-warning-banner__title-trigger",
-          { "hds-warning-banner--closed": !open },
           className
         ),
         onClick: () => {
@@ -161,27 +94,28 @@ var WarningBannerTitle = (0, import_react2.forwardRef)((_a, ref) => {
         },
         ref,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "p",
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname2.clsx)("hds-warning-banner__title", className),
+      className: (0, import_typed_classname.clsx)("hds-warning-banner__title", className),
       ref,
       children
     })
   );
 });
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react2.forwardRef)(
+var WarningBannerDescription = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    var _b = _a, { className, id } = _b, rest = __objRest(_b, ["className", "id"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "p",
       __spreadValues({
-        className: (0, import_typed_classname2.clsx)("hds-warning-banner__description", className),
+        id,
+        className: (0, import_typed_classname.clsx)("hds-warning-banner__description", className),
         ref
       }, rest)
     );

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

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAA4C;AAC5C,IAAAC,0BAAqB;;;ACFrB,mBAAkD;AAClD,6BAAqB;AACrB,wBAAgC;AAM1B;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YANL,IAMG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAmDtB,IAAM,UAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA9EN,IAsEI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,4CAAC,+BAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAElB,IAAI,cAAc;;;ADvGZ,IAAAC,sBAAA;AAJC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,IAA4C,QAAQ;AAApD,iBAAE,SAAO,aAAa,UAXzB,IAWG,IAAoC,iBAApC,IAAoC,CAAlC,SAAO,eAAa;AACrB,UAAM,aAAa,CAAC,CAAC;AACrB,WACE,8CAAC,sCAAQ,OAAR,EAAc,eAAW,8BAAK,sBAAsB,SAAsB,GAAG,KAC5E;AAAA,mDAAC,sBAAmB,SAAS,aAAa,eAAe,WACtD,iBACH;AAAA,MACC,aAAa,6CAAC,4BAA0B,uBAAY,IAA8B;AAAA,QACrF;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAM5B,IAAM,yBAAqB,0BAGzB,CAAC,IAA2C,QAAQ;AAAnD,eAAE,WAAS,UAAU,UAhCxB,IAgCG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AACtB,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAkB,KAAK;AAC/C,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA,uCACM,OADN;AAAA,QAEC,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,EAAE,8BAA8B,CAAC,KAAK;AAAA,UACtC;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,kBAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL,uDAAC,UAAM,UAAS;AAAA;AAAA,IAClB;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA,qCACM,OADN;AAAA,MAEC,eAAW,8BAAK,6BAA6B,SAAsB;AAAA,MACnE;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,mBAAmB,cAAc;AAGjC,IAAM,+BAA2B;AAAA,EAC/B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YApEL,IAoEG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,mCAAmC,SAAsB;AAAA,QACzE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;","names":["import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/warning-banner/warning-banner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\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 descriptionId = useId();\n    const expandable = !!description;\n    return (\n      <div {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle\n          variant={expandable ? \"expandable\" : \"default\"}\n          descriptionId={descriptionId}\n        >\n          {title}\n        </WarningBannerTitle>\n        {expandable ? (\n          <WarningBannerDescription id={descriptionId}>{description}</WarningBannerDescription>\n        ) : null}\n      </div>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ntype WarningBannerTitleProps =\n  | ({\n      variant: \"expandable\";\n      descriptionId: string;\n    } & React.ButtonHTMLAttributes<HTMLButtonElement>)\n  | ({ variant: \"default\"; descriptionId?: string } & React.HTMLAttributes<HTMLParagraphElement>);\n\nconst WarningBannerTitle = forwardRef<\n  HTMLButtonElement | HTMLParagraphElement,\n  WarningBannerTitleProps\n>(({ variant, descriptionId, 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        aria-expanded={open}\n        aria-controls={descriptionId}\n        data-state={open ? \"open\" : \"closed\"}\n        className={clsx(\n          \"hds-warning-banner__title\",\n          \"hds-warning-banner__title-trigger\",\n          className as undefined,\n        )}\n        onClick={() => {\n          setOpen((prev) => !prev);\n        }}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n      >\n        <div>{children}</div>\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 = { id: string } & React.HTMLAttributes<HTMLParagraphElement>;\nconst WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(\n  ({ className, id, ...rest }, ref) => {\n    return (\n      <p\n        id={id}\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAmD;AACnD,6BAAqB;AAYf;AALC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,IAA4C,QAAQ;AAApD,iBAAE,SAAO,aAAa,UAVzB,IAUG,IAAoC,iBAApC,IAAoC,CAAlC,SAAO,eAAa;AACrB,UAAM,oBAAgB,oBAAM;AAC5B,UAAM,aAAa,CAAC,CAAC;AACrB,WACE,6CAAC,wCAAQ,OAAR,EAAc,eAAW,6BAAK,sBAAsB,SAAsB,GAAG,KAC5E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,aAAa,eAAe;AAAA,UACrC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,aACC,4CAAC,4BAAyB,IAAI,eAAgB,uBAAY,IACxD;AAAA,QACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAS5B,IAAM,yBAAqB,yBAGzB,CAAC,IAA0D,QAAQ;AAAlE,eAAE,WAAS,eAAe,UAAU,UAxCvC,IAwCG,IAAkD,iBAAlD,IAAkD,CAAhD,WAAS,iBAAe,YAAU;AACrC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAkB,KAAK;AAC/C,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA,uCACM,OADN;AAAA,QAEC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,cAAY,OAAO,SAAS;AAAA,QAC5B,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,kBAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL,sDAAC,SAAK,UAAS;AAAA;AAAA,IACjB;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA,qCACM,OADN;AAAA,MAEC,eAAW,6BAAK,6BAA6B,SAAsB;AAAA,MACnE;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,mBAAmB,cAAc;AAGjC,IAAM,+BAA2B;AAAA,EAC/B,CAAC,IAA4B,QAAQ;AAApC,iBAAE,aAAW,GA9EhB,IA8EG,IAAoB,iBAApB,IAAoB,CAAlB,aAAW;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,mCAAmC,SAAsB;AAAA,QACzE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;","names":[]}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,14 +13,14 @@
     "src/**"
   ],
   "devDependencies": {
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "18.3.1",
     "tsup": "^8.0.1",
     "typescript": "^5.4.5",
-    "eslint-config-custom": "0.0.1",
-    "hedwig-tsconfig": "0.0.0"
+    "hedwig-tsconfig": "0.0.0",
+    "eslint-config-custom": "0.0.1"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
-    "@postenbring/hedwig-css": "0.0.69"
+    "@postenbring/hedwig-css": "0.0.70"
   },
   "publishConfig": {
     "access": "public"

package/src/accordion/accordion-content.tsx

@@ -15,6 +15,7 @@ export const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps
     }
     return (
       <div
+        id={context.contentId}
         aria-hidden={!context.open}
         data-state={context.open ? "open" : "closed"}
         {...{ inert: context.open ? undefined : "true" }}

package/src/accordion/accordion-header.tsx

@@ -21,6 +21,7 @@ export const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProp
       <button
         {...rest}
         aria-expanded={context.open}
+        aria-controls={context.contentId}
         data-state={context.open ? "open" : "closed"}
         className={clsx("hds-accordion-item-header", className as undefined)}
         onClick={expandOrCollapse}

package/src/accordion/accordion-item.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { forwardRef, useState } from "react";
+import { forwardRef, useId, useState } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { AccordionItemContext } from "./context";
 import type { AccordionHeaderProps } from "./accordion-header";
@@ -33,6 +33,7 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
 
 export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
   ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {
+    const contentId = useId();
     const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);
     const open = outerOpen ?? innerOpen;
 
@@ -51,7 +52,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
         className={clsx("hds-accordion-item", className as undefined)}
         ref={ref}
       >
-        <AccordionItemContext.Provider value={{ open, setOpen: handleOpen }}>
+        <AccordionItemContext.Provider value={{ contentId, open, setOpen: handleOpen }}>
           {children}
         </AccordionItemContext.Provider>
       </div>

package/src/accordion/context.ts

@@ -3,6 +3,7 @@ import { createContext } from "react";
 export interface AccordionItemContextProps {
   open: boolean;
   setOpen: (open: boolean) => void;
+  contentId: string;
 }
 
 export const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);

package/src/badge/badge.stories.tsx

@@ -1,7 +1,7 @@
 /* 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 ".";
+import { Badge } from ".";
 
 const meta: Meta<typeof Badge> = {
   title: "Badge",
@@ -14,31 +14,33 @@ type Story = StoryObj<typeof Badge>;
 
 export const Lighter: Story = {
   args: {
+    variant: "lighter",
     children: "Default badge",
   },
 };
 
 export const Dark: Story = {
   args: {
+    variant: "dark",
     children: "Dark badge",
   },
-  render: (props) => <DarkBadge {...props} />,
 };
 
 export const White: Story = {
   args: {
+    variant: "white",
     children: "White badge",
   },
   render: (props) => (
     <Box>
-      <WhiteBadge {...props} />
+      <Badge {...props} />
     </Box>
   ),
 };
 
 export const Warning: Story = {
   args: {
+    variant: "warning",
     children: "Warning badge",
   },
-  render: (props) => <WarningBadge {...props} />,
 };

package/src/badge/badge.tsx

@@ -5,6 +5,13 @@ import { forwardRef } from "react";
 export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
 
+  /**
+   * Color of the badge
+   *
+   * @default "lighter"
+   */
+  variant?: "lighter" | "dark" | "white" | "warning";
+
   /**
    * Font size of the badge
    *
@@ -20,44 +27,29 @@ export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement>
   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>
-  );
-});
+/**
+ * Badges are used to label, categorize or organize items using keywords to describe them.
+ *
+ * @example
+ * <Badge variant="dark">Dark</Badge>
+ */
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ children, asChild, variant = "lighter", 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

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

package/src/button/button.stories.tsx

@@ -2,11 +2,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { HStack } from "../layout";
 import type { ButtonProps } from ".";
-import { PrimaryButton, SecondaryButton } from ".";
+import { Button } from ".";
 
-const meta: Meta<typeof PrimaryButton> = {
+const meta: Meta<typeof Button> = {
   title: "Button",
-  component: PrimaryButton,
+  component: Button,
   argTypes: {
     fullWidth: { control: "radio", options: [false, true, "mobile"] },
   },
@@ -14,33 +14,33 @@ const meta: Meta<typeof PrimaryButton> = {
 
 export default meta;
 
-type Story = StoryObj<typeof PrimaryButton>;
+type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
   args: {
+    variant: "primary",
     children: "Primary button",
   },
 };
 
 export const PrimaryOutline: Story = {
   args: {
+    variant: "primary-outline",
     children: "Primary outline button",
-    fill: "outline",
   },
 };
 
 export const Secondary: Story = {
   args: {
+    variant: "secondary",
     children: "Secondary button",
   },
-  render: (props) => <SecondaryButton {...props} />,
 };
 
 export const SecondaryOutline: Story = {
-  render: (props) => <SecondaryButton {...props} />,
   args: {
+    variant: "secondary-outline",
     children: "Secondary outline button",
-    fill: "outline",
   },
 };
 
@@ -48,10 +48,10 @@ export const AsALink: Story = {
   name: "As a link",
   render: (args) => (
     <HStack gap="16" wrap>
-      <PrimaryButton {...args} />
-      <PrimaryButton {...args} fill="outline" />
-      <SecondaryButton {...args} />
-      <SecondaryButton {...args} fill="outline" />
+      <Button {...args} variant="primary" />
+      <Button {...args} variant="primary-outline" />
+      <Button {...args} variant="secondary" />
+      <Button {...args} variant="secondary-outline" />
     </HStack>
   ),
   args: {
@@ -65,7 +65,7 @@ export const AsALink: Story = {
 };
 
 const createIconStory = (
-  Component: typeof PrimaryButton,
+  Component: typeof Button,
   extraArgs: Partial<ButtonProps> = {},
 ): Story => ({
   render: (args) => (
@@ -98,7 +98,9 @@ const createIconStory = (
   },
 });
 
-export const IconPrimary: Story = createIconStory(PrimaryButton);
-export const IconPrimaryOutline: Story = createIconStory(PrimaryButton, { fill: "outline" });
-export const IconSecondary: Story = createIconStory(SecondaryButton);
-export const IconSecondaryOutline: Story = createIconStory(SecondaryButton, { fill: "outline" });
+export const IconPrimary: Story = createIconStory(Button, { variant: "secondary" });
+export const IconPrimaryOutline: Story = createIconStory(Button, { variant: "primary-outline" });
+export const IconSecondary: Story = createIconStory(Button, { variant: "secondary" });
+export const IconSecondaryOutline: Story = createIconStory(Button, {
+  variant: "secondary-outline",
+});

package/src/button/button.tsx

@@ -9,11 +9,11 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   size?: "small" | "medium" | "large";
 
   /**
-   * The background fill of the button
+   * The background and fill of the button
    *
-   * @default "contained"
+   * @default "primary"
    */
-  fill?: "contained" | "outline";
+  variant?: "primary" | "secondary" | "primary-outline" | "secondary-outline";
 
   /**
    * Make the button use 100% width available.
@@ -36,15 +36,27 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   asChild?: boolean;
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: "primary" | "secondary" }>(
+/**
+ * Button component
+ *
+ * @example
+ * <Button variant="primary">Primary</Button>
+ * <Button variant="secondary" size="large">Secondary</Button>
+ * <Button variant="primary-outline">Primary Outline</Button>
+ * <Button variant="secondary-outline" fullWidth="mobile">Secondary Outline</Button>
+ *
+ * @example
+ * // If used for navigation use the `asChild` prop with a anchor element as a child.
+ * <Button asChild><a href="/home">Home</a></Button>
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       asChild,
       children,
-      variant,
+      variant = "primary",
       size = "medium",
       fullWidth = false,
-      fill = "contained",
       icon,
       className,
       ...rest
@@ -57,9 +69,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: "primary"
         className={clsx(
           "hds-button",
           `hds-button--${size}`,
+          `hds-button--${variant}`,
           {
-            [`hds-button--${variant}`]: fill === "contained",
-            [`hds-button--outline-${variant}`]: fill === "outline",
             "hds-button--full": fullWidth === true,
             "hds-button--mobile-full": fullWidth === "mobile",
             "hds-button--icon-only": icon,
@@ -75,13 +86,3 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: "primary"
   },
 );
 Button.displayName = "Button";
-
-export const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  return <Button {...props} ref={ref} variant="primary" />;
-});
-PrimaryButton.displayName = "PrimaryButton";
-
-export const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  return <Button {...props} ref={ref} variant="secondary" />;
-});
-SecondaryButton.displayName = "SecondaryButton";

package/src/button/index.tsx

@@ -1,3 +1,3 @@
-export { PrimaryButton, SecondaryButton } from "./button";
+export { Button } from "./button";
 
 export type * from "./button";

package/src/footer/footer.tsx

@@ -3,7 +3,7 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { Accordion } from "../accordion";
 import { LinkList } from "../list/link-list";
-import { PrimaryButton } from "../button";
+import { Button } from "../button";
 
 interface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -47,11 +47,11 @@ export const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkPr
   ({ children, className, asChild, ...rest }, ref) => {
     const Component = asChild ? Slot : "a";
     return (
-      <PrimaryButton asChild fill="outline" className={clsx(className as undefined)}>
+      <Button asChild variant="primary-outline" className={clsx(className as undefined)}>
         <Component ref={ref} {...rest}>
           {children}
         </Component>
-      </PrimaryButton>
+      </Button>
     );
   },
 );

package/src/form/date-picker/date-picker.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useRef, type InputHTMLAttributes } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { InputGroup, type InputGroupProps } from "../input-group";
-import { useMergeRefs } from "../../utils";
+import { useMergeRefs } from "../../utils/utils";
 
 export type DatePickerProps = Omit<
   InputGroupProps & InputHTMLAttributes<HTMLInputElement>,