@postenbring/hedwig-react - npm Package Compare versions

Comparing version 0.0.0-refactor-tokens-20231112182039 to 0.0.0-rework-button-C0L88PWY-20231128000200

dist/button/index.d.ts

@@ -1,37 +0,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> {
-    /**
-     * The height, font size and padding of the button
-     */
-    size?: "small" | "medium" | "large";
-    /**
-     * Make the button use 100% width available.
-     * Using the "mobile" it only stretch to full width on smaller screens
-     */
-    fullWidth?: boolean | "mobile";
-    /**
-     * The background of the button.
-     */
-    fill?: "contained" | "outlined";
-    children: React.ReactNode;
-    buttonRef?: React.ForwardedRef<HTMLButtonElement>;
-}
-/**
- * ## TODO
- *
- * - [ ] Handle links that looks like buttons
- * - [ ] Revisit how to handle outline
- * - [ ] Figure out outline-white
- */
-declare function PrimaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace PrimaryButton {
-    var displayName: string;
-}
-declare function SecondaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace SecondaryButton {
-    var displayName: string;
-}
-
-export { PrimaryButton, SecondaryButton };
+export { BaseButton, ButtonProps, PrimaryButton, SecondaryButton } from './button.js';
+import '../utils-BfZsjuFH.js';
+import 'react';

dist/button/index.js

@@ -52,2 +52,3 @@ "use strict";
 __export(button_exports, {
+  BaseButton: () => BaseButton,
   PrimaryButton: () => PrimaryButton,
@@ -57,67 +58,75 @@ SecondaryButton: () => SecondaryButton
 module.exports = __toCommonJS(button_exports);
+var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
 var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_button = require("@postenbring/hedwig-css/dist/button/button.css");
+var import_button = require("@postenbring/hedwig-css/dist/button.css");
 
 // src/button/button.tsx
-var import_clsx = require("clsx");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
+var import_react = require("react");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      as: Component = "button",
+      children,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      fill = "contained",
+      icon,
+      className
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "variant",
+      "size",
+      "fullWidth",
+      "fill",
+      "icon",
+      "className"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-button",
+          `hds-button--${size}`,
+          {
+            [`hds-button--${variant}`]: fill === "contained",
+            [`hds-button--outline-${variant}`]: fill === "outlined",
+            "hds-button--full": fullWidth === true,
+            "hds-button--mobile-full": fullWidth === "mobile",
+            "hds-button--icon-only": icon && !children
+          },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          icon && !children ? icon : null,
+          children
+        ]
+      })
+    );
   }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
+);
+BaseButton.displayName = "BaseButton";
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
   }
-}
-
-// src/button/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function BaseButton(_a) {
-  var _b = _a, {
-    children,
-    variant,
-    size = "medium",
-    fullWidth = false,
-    fill = "contained",
-    buttonRef
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "fullWidth",
-    "fill",
-    "buttonRef"
-  ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)("hds-button", `hds-button--${size}`, {
-        [`hds-button--${variant}`]: fill === "contained",
-        [`hds-button--outline-${variant}`]: fill === "outlined",
-        "hds-button--full": fullWidth,
-        "hds-button--mobile-full": fullWidth === "mobile"
-      }),
-      ref: buttonRef,
-      type: "button"
-    }, rest), {
-      children
-    })
-  );
-}
-BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
-}
+);
 PrimaryButton.displayName = "PrimaryButton";
-function SecondaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "secondary" }));
-}
+var SecondaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+  }
+);
 SecondaryButton.displayName = "SecondaryButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BaseButton,
   PrimaryButton,
   SecondaryButton
 });

dist/index.d.ts

@@ -1,3 +0,15 @@
-export { PrimaryButton, SecondaryButton } from './button/index.js';
+export { BaseButton, ButtonProps, PrimaryButton, SecondaryButton } from './button/button.js';
+export { Link, LinkProps } from './link/link.js';
+export { Badge, BadgeProps, DarkBadge, WarningBadge, WhiteBadge } from './badge/badge.js';
+export { DescriptionDetails, DescriptionDetailsProps, default as DescriptionList, DescriptionListProps, DescriptionTerm, DescriptionTermProps } from './list/description-list.js';
+export { ListProps, OrderedList, UnorderedList } from './list/list.js';
+export { LinkList, LinkListProps } from './list/link-list.js';
+export { Box, BoxCloseButton, BoxCloseButtonProps, BoxProps } from './box/box.js';
+export { Message, MessageProps } from './message/message.js';
+export { Accordion, AccordionProps } from './accordion/accordion.js';
+export { AccordionItem, AccordionItemChildrenType, AccordionItemProps } from './accordion/accordion-item.js';
+export { AccordionTrigger, AccordionTriggerProps } from './accordion/accordion-item-trigger.js';
+export { AccordionContent, AccordionContentProps } from './accordion/accordion-item-content.js';
+import './utils-BfZsjuFH.js';
+import 'react';
 import 'react/jsx-runtime';
-import 'react';

dist/index.js

@@ -52,4 +52,23 @@ "use strict";
 __export(src_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
+  Badge: () => Badge,
+  BaseButton: () => BaseButton,
+  Box: () => Box,
+  BoxCloseButton: () => BoxCloseButton,
+  DarkBadge: () => DarkBadge,
+  DescriptionDetails: () => DescriptionDetails,
+  DescriptionList: () => DescriptionList,
+  DescriptionTerm: () => DescriptionTerm,
+  Link: () => Link,
+  LinkList: () => LinkList,
+  Message: () => Message,
+  OrderedList: () => OrderedList,
   PrimaryButton: () => PrimaryButton,
-  SecondaryButton: () => SecondaryButton
+  SecondaryButton: () => SecondaryButton,
+  UnorderedList: () => UnorderedList,
+  WarningBadge: () => WarningBadge,
+  WhiteBadge: () => WhiteBadge
 });
@@ -59,29 +78,126 @@ module.exports = __toCommonJS(src_exports);
 // src/button/index.tsx
+var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
 var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_button = require("@postenbring/hedwig-css/dist/button/button.css");
+var import_button = require("@postenbring/hedwig-css/dist/button.css");
 
 // src/button/button.tsx
-var import_clsx = require("clsx");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
+var import_react = require("react");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      as: Component = "button",
+      children,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      fill = "contained",
+      icon,
+      className
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "variant",
+      "size",
+      "fullWidth",
+      "fill",
+      "icon",
+      "className"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-button",
+          `hds-button--${size}`,
+          {
+            [`hds-button--${variant}`]: fill === "contained",
+            [`hds-button--outline-${variant}`]: fill === "outlined",
+            "hds-button--full": fullWidth === true,
+            "hds-button--mobile-full": fullWidth === "mobile",
+            "hds-button--icon-only": icon && !children
+          },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          icon && !children ? icon : null,
+          children
+        ]
+      })
+    );
   }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
+);
+BaseButton.displayName = "BaseButton";
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
   }
+);
+PrimaryButton.displayName = "PrimaryButton";
+var SecondaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+  }
+);
+SecondaryButton.displayName = "SecondaryButton";
+
+// src/link/index.tsx
+var import_fonts2 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
+var import_tokens2 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base2 = require("@postenbring/hedwig-css/dist/base.css");
+var import_link = require("@postenbring/hedwig-css/dist/link.css");
+
+// src/link/link.tsx
+var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Link(_a) {
+  var _b = _a, {
+    children,
+    variant = "underline",
+    size = "medium",
+    anchorRef,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "anchorRef",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "a",
+    __spreadProps(__spreadValues({
+      className: (0, import_typed_classname2.clsx)(
+        "hds-link",
+        variant !== "underline" && `hds-link--${variant}`,
+        size !== "medium" && `hds-link--${size}`,
+        className
+      ),
+      ref: anchorRef
+    }, rest), {
+      children
+    })
+  );
 }
+Link.displayName = "Link";
 
-// src/button/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function BaseButton(_a) {
+// src/badge/index.tsx
+var import_fonts3 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
+var import_tokens3 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base3 = require("@postenbring/hedwig-css/dist/base.css");
+var import_badge = require("@postenbring/hedwig-css/dist/badge.css");
+
+// src/badge/badge.tsx
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function BaseBadge(_a) {
   var _b = _a, {
     children,
     variant,
-    size = "medium",
-    fullWidth = false,
-    fill = "contained",
-    buttonRef
+    size = "small",
+    className
   } = _b, rest = __objRest(_b, [
@@ -91,18 +207,13 @@ "children",
     "size",
-    "fullWidth",
-    "fill",
-    "buttonRef"
+    "className"
   ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)("hds-button", `hds-button--${size}`, {
-        [`hds-button--${variant}`]: fill === "contained",
-        [`hds-button--outline-${variant}`]: fill === "outlined",
-        "hds-button--full": fullWidth,
-        "hds-button--mobile-full": fullWidth === "mobile"
-      }),
-      ref: buttonRef,
-      type: "button"
+      className: (0, import_typed_classname3.clsx)(
+        "hds-badge",
+        `hds-badge--${size}`,
+        `hds-badge--${variant}`,
+        className
+      )
     }, rest), {
@@ -113,15 +224,394 @@ children
 }
-BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
+BaseBadge.displayName = "BaseBadge";
+function Badge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
 }
-PrimaryButton.displayName = "PrimaryButton";
-function SecondaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "secondary" }));
+Badge.displayName = "Badge";
+function DarkBadge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "dark" }));
 }
-SecondaryButton.displayName = "SecondaryButton";
+DarkBadge.displayName = "DarkBadge";
+function WhiteBadge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "white" }));
+}
+WhiteBadge.displayName = "WhiteBadge";
+function WarningBadge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "warning" }));
+}
+WarningBadge.displayName = "WarningBadge";
+
+// src/list/index.tsx
+var import_fonts4 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
+var import_tokens4 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base4 = require("@postenbring/hedwig-css/dist/base.css");
+var import_description_list = require("@postenbring/hedwig-css/dist/description-list.css");
+var import_list2 = require("@postenbring/hedwig-css/dist/list.css");
+
+// src/list/description-list.tsx
+var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DescriptionDetails(_a) {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", __spreadProps(__spreadValues({}, rest), { children }));
+}
+function DescriptionTerm(_a) {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", __spreadProps(__spreadValues({}, rest), { children }));
+}
+function DescriptionList(_a) {
+  var _b = _a, {
+    variant = "vertical",
+    className
+  } = _b, rest = __objRest(_b, [
+    "variant",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "dl",
+    __spreadValues({
+      className: (0, import_typed_classname4.clsx)(
+        "hds-description-list",
+        {
+          "hds-description-list--horizontal": variant === "horizontal"
+        },
+        className
+      )
+    }, rest)
+  );
+}
+DescriptionList.displayName = "DescriptionList";
+DescriptionTerm.displayName = "DescriptionTerm";
+DescriptionDetails.displayName = "DescriptionDetails";
+
+// src/list/list.tsx
+var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function BaseList(_a) {
+  var _b = _a, {
+    as: ListTag = "ul",
+    children,
+    listStyle = "inherit",
+    size = "medium",
+    className
+  } = _b, rest = __objRest(_b, [
+    "as",
+    "children",
+    "listStyle",
+    "size",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ListTag,
+    __spreadProps(__spreadValues({
+      className: (0, import_typed_classname5.clsx)(
+        "hds-list",
+        `hds-list--${size}`,
+        {
+          "hds-list--style-hidden": listStyle === "no-bullets"
+        },
+        className
+      )
+    }, rest), {
+      children
+    })
+  );
+}
+function UnorderedList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
+}
+function OrderedList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ol" }, props), { children: props.children }));
+}
+BaseList.displayName = "BaseList";
+OrderedList.displayName = "UnorderedList";
+UnorderedList.displayName = "UnorderedList";
+
+// src/list/link-list.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LinkList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(UnorderedList, __spreadProps(__spreadValues({ listStyle: "no-bullets" }, props), { children: props.children }));
+}
+LinkList.displayName = "LinkList";
+
+// src/box/index.tsx
+var import_fonts5 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
+var import_tokens5 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base5 = require("@postenbring/hedwig-css/dist/base.css");
+var import_box = require("@postenbring/hedwig-css/dist/box.css");
+
+// src/box/box.tsx
+var import_react2 = require("react");
+var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Box = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      as: Component = "div",
+      variant = "light-grey",
+      hideCloseButton,
+      onClose: onCloseProp,
+      closed: closedProp,
+      closeButtonProps,
+      children,
+      className
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "variant",
+      "hideCloseButton",
+      "onClose",
+      "closed",
+      "closeButtonProps",
+      "children",
+      "className"
+    ]);
+    const [closedState, setClosedState] = (0, import_react2.useState)(false);
+    const onClose = (0, import_react2.useCallback)(() => {
+      if (onCloseProp) {
+        const result = onCloseProp();
+        if (result === true) {
+          setClosedState(true);
+        }
+      } else {
+        setClosedState(true);
+      }
+    }, []);
+    const closed = closedProp != null ? closedProp : closedState;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname6.clsx)(
+          "hds-box",
+          `hds-box--${variant}`,
+          { "hds-box--closed": closed },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)),
+          children
+        ]
+      })
+    );
+  }
+);
+Box.displayName = "Box";
+var BoxCloseButton = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      __spreadValues({
+        className: (0, import_typed_classname6.clsx)("hds-box__close-button", className),
+        ref,
+        type: "button"
+      }, rest)
+    );
+  }
+);
+BoxCloseButton.displayName = "BoxCloseButton";
+
+// src/message/index.tsx
+var import_fonts6 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
+var import_tokens6 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base6 = require("@postenbring/hedwig-css/dist/base.css");
+var import_box3 = require("@postenbring/hedwig-css/dist/box.css");
+var import_message = require("@postenbring/hedwig-css/dist/message.css");
+
+// src/message/message.tsx
+var import_react3 = require("react");
+var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Message = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      Box,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname7.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        ref
+      }, rest), {
+        children: [
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_typed_classname7.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
+          children
+        ]
+      })
+    );
+  }
+);
+Message.displayName = "Message";
+
+// src/accordion/index.tsx
+var import_fonts7 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
+var import_tokens7 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base7 = require("@postenbring/hedwig-css/dist/base.css");
+var import_accordion = require("@postenbring/hedwig-css/dist/accordion.css");
+
+// src/accordion/accordion.tsx
+var import_react5 = require("react");
+var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+
+// src/accordion/context.ts
+var import_react4 = require("react");
+var AccordionContext = (0, import_react4.createContext)({
+  variant: "multiple",
+  mounted: false,
+  openItems: [],
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
+  toggleOpenItem: (id) => {
+  }
+});
+var AccordionItemContext = (0, import_react4.createContext)(null);
+
+// src/accordion/accordion.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Accordion = (0, import_react5.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "div", children, className, variant = "multiple" } = _b, rest = __objRest(_b, ["as", "children", "className", "variant"]);
+    const [openItems, setOpenItems] = (0, import_react5.useState)([]);
+    const toggleOpenItem = (itemId) => {
+      if (variant === "single") {
+        setOpenItems([itemId]);
+      } else {
+        setOpenItems(
+          openItems.includes(itemId) ? openItems.filter((id) => id !== itemId) : [...openItems, itemId]
+        );
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AccordionContext.Provider, { value: { variant, openItems, toggleOpenItem, mounted: true }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname8.clsx)("hds-accordion", className), ref, children })) });
+  }
+);
+Accordion.displayName = "Accordion";
+
+// src/accordion/accordion-item.tsx
+var import_react6 = require("react");
+var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var AccordionItem = (0, import_react6.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "div", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
+    const context = (0, import_react6.useContext)(AccordionContext);
+    const [open, setOpen] = (0, import_react6.useState)(false);
+    const accordionItemId = (0, import_react6.useId)();
+    const handleOpen = () => {
+      setOpen(!open);
+      if (context.variant === "single") {
+        context.toggleOpenItem(accordionItemId);
+      }
+    };
+    if (!context.mounted) {
+      throw new Error("Context required. Did you use <AccordionItem/> outside of <Accordion/>?");
+    }
+    (0, import_react6.useEffect)(() => {
+      if (context.variant === "multiple") {
+        return;
+      }
+      if (open && !context.openItems.includes(accordionItemId)) {
+        setOpen(false);
+      }
+    }, [context.openItems]);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_typed_classname9.clsx)(
+          "hds-accordion-item",
+          {
+            "hds-accordion-item__expanded": open
+          },
+          className
+        ),
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
+      })
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+
+// src/accordion/accordion-item-trigger.tsx
+var import_react7 = require("react");
+var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function FaArrowDownButNotReally() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "v " });
+}
+function FaArrowUpButNotReally() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "^ " });
+}
+var AccordionTrigger = (0, import_react7.forwardRef)((_a, ref) => {
+  var _b = _a, { as: Component = "button", children, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "onClick"]);
+  const itemContext = (0, import_react7.useContext)(AccordionItemContext);
+  if (itemContext === null) {
+    return null;
+  }
+  const expandOrCollapse = (e) => {
+    itemContext.setOpen(!itemContext.open);
+    onClick && onClick(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Component,
+    __spreadProps(__spreadValues({}, rest), {
+      "aria-expanded": itemContext.open,
+      className: (0, import_typed_classname10.clsx)("hds-accordion-item-trigger", className),
+      onClick: expandOrCollapse,
+      ref,
+      type: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_typed_classname10.clsx)("hds-accordion-item-trigger--icon"), children: itemContext.open ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaArrowUpButNotReally, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaArrowDownButNotReally, {}) }),
+        children
+      ] })
+    })
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+// src/accordion/accordion-item-content.tsx
+var import_react8 = require("react");
+var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AccordionContent = (0, import_react8.forwardRef)((_a, ref) => {
+  var _b = _a, { as: Component = "div", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
+  const context = (0, import_react8.useContext)(AccordionItemContext);
+  if (context === null) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Component,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_typed_classname11.clsx)(
+        "hds-accordion-item-content",
+        {
+          "hds-accordion-item-content--closed": !context.open
+        },
+        className
+      ),
+      ref,
+      children
+    })
+  );
+});
+AccordionContent.displayName = "AccordionContent";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Badge,
+  BaseButton,
+  Box,
+  BoxCloseButton,
+  DarkBadge,
+  DescriptionDetails,
+  DescriptionList,
+  DescriptionTerm,
+  Link,
+  LinkList,
+  Message,
+  OrderedList,
   PrimaryButton,
-  SecondaryButton
+  SecondaryButton,
+  UnorderedList,
+  WarningBadge,
+  WhiteBadge
 });

package.json

 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.0-refactor-tokens-20231112182039",
+  "version": "0.0.0-rework-button-C0L88PWY-20231128000200",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": true,
   "license": "MIT",
@@ -12,26 +12,25 @@ "files": [
   ],
-  "scripts": {
-    "build": "tsup --format esm,cjs --dts --external react",
-    "dev": "tsup --format esm,cjs --watch --dts --external react",
-    "lint": "eslint src/",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
-  },
   "devDependencies": {
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "eslint-config-custom": "*",
-    "hedwig-tsconfig": "*",
     "react": "^18.2.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2"
+    "tsup": "^8.0.1",
+    "typescript": "^5.2.2",
+    "eslint-config-custom": "0.0.1",
+    "hedwig-tsconfig": "0.0.0"
   },
   "dependencies": {
-    "@postenbring/hedwig-css": "0.0.0-refactor-tokens-20231112182039",
-    "@postenbring/hedwig-tokens": "0.0.0-refactor-tokens-20231112182039",
-    "clsx": "2.0.0"
+    "@postenbring/hedwig-css": "0.0.0-rework-button-C0L88PWY-20231128000200",
+    "@postenbring/hedwig-tokens": "0.0.3"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --format esm,cjs --dts --external react",
+    "dev": "tsup --format esm,cjs --watch --dts --external react",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   }
-}
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

165559

increased by986.99%

Dependency count

2

decreased by-33.33%

Number of package files

108

increased by980%

Lines of code

4311

increased by1025.59%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@postenbring/hedwig-css@0.0.0-rework-button-C0L88PWY-20231128000200(transitive)

• + Added@postenbring/hedwig-tokens@0.0.3(transitive)

• + Addedclsx@2.1.1(transitive)

• - Removedclsx@2.0.0

• - Removed@postenbring/hedwig-css@0.0.0-refactor-tokens-20231112182039(transitive)

• - Removed@postenbring/hedwig-tokens@0.0.0-refactor-tokens-20231112182039(transitive)

• - Removedclsx@2.0.0(transitive)

• Updated@postenbring/hedwig-css@0.0.0-rework-button-C0L88PWY-20231128000200

• Updated@postenbring/hedwig-tokens@0.0.3