@postenbring/hedwig-react 3.0.6 → 4.0.0

package/dist/index.js

@@ -469,23 +469,47 @@ var import_react8 = require("react");
 var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
+      fill: "currentColor"
+    }
+  ) });
+}
 var BoxCloseButton = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: (0, import_typed_classname5.clsx)("hds-box__close-button", className),
         ref,
         type: "button"
-      }, rest)
+      }, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {})
+      })
     );
   }
 );
 BoxCloseButton.displayName = "Box.CloseButton";
+var convertVariantToColor = (variant) => {
+  switch (variant) {
+    case "lighter":
+      return "";
+    case "white":
+      return "";
+    case "warning":
+      return "warning";
+    default:
+      return "neutral";
+  }
+};
 var Box = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
+      "data-color": color = "",
       asChild,
       variant,
       closeable = false,
@@ -495,6 +519,7 @@ var Box = (0, import_react8.forwardRef)(
       children,
       className
     } = _b, rest = __objRest(_b, [
+      "data-color",
       "asChild",
       "variant",
       "closeable",
@@ -517,12 +542,15 @@ var Box = (0, import_react8.forwardRef)(
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
     const Component = asChild ? import_react_slot.Slot : "div";
+    const resolvedColor = color && color !== "" ? color : convertVariantToColor(variant);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Component,
       __spreadProps(__spreadValues({
+        "data-color": resolvedColor,
         className: (0, import_typed_classname5.clsx)(
           "hds-box",
-          variant && `hds-box--${variant}`,
+          { "hds-box--lighter": variant === "lighter" },
+          { "hds-box--white": variant === "white" },
           { "hds-box--closed": closed },
           className
         ),
@@ -563,17 +591,25 @@ var AlertDescription = (0, import_react9.forwardRef)(
   }
 );
 AlertDescription.displayName = "Alert.Description";
+var allowedColors = ["neutral", "info", "success", "warning", "error", void 0];
+function isValidDataColor(value) {
+  return allowedColors.includes(value);
+}
 var Alert = (0, import_react9.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
+    var _b = _a, { children, className, "data-color": color = void 0, icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "data-color", "icon", "iconClassName"]);
+    const _a2 = rest, { variant } = _a2, boxProps = __objRest(_a2, ["variant"]);
+    const resolvedColor = color != null ? color : variant;
+    const validColor = isValidDataColor(resolvedColor) ? resolvedColor : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       Box,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname6.clsx)(`hds-alert`, `hds-alert--${variant}`, className),
+        "data-color": validColor,
+        className: (0, import_typed_classname6.clsx)(`hds-alert`, className),
         ref
-      }, rest), {
+      }, boxProps), {
         children: [
-          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_typed_classname6.clsx)("hds-alert--neutral__icon", iconClassName), children: icon }),
+          validColor === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_typed_classname6.clsx)("hds-alert--neutral__icon", iconClassName), children: icon }),
           children
         ]
       })
@@ -591,19 +627,36 @@ var import_react10 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Badge = (0, import_react10.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, asChild, variant = "lighter", size = "small", className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "size", "className"]);
+    var _b = _a, {
+      "data-color": color = "",
+      children,
+      asChild,
+      variant = "",
+      size = "small",
+      className
+    } = _b, rest = __objRest(_b, [
+      "data-color",
+      "children",
+      "asChild",
+      "variant",
+      "size",
+      "className"
+    ]);
     const Component = asChild ? import_react_slot3.Slot : "span";
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Component,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, variant === "warning" || variant === "lighter" || variant === "darker" ? { "data-color-scheme": "light" } : {}), {
+        "data-color": color,
         ref,
         className: (0, import_typed_classname7.clsx)(
           "hds-badge",
           `hds-badge--${size}`,
-          `hds-badge--${variant}`,
+          { "hds-badge--lighter": variant === "lighter" },
+          { "hds-badge--darker": variant === "darker" },
+          { "hds-badge--white": variant === "white" },
           className
         )
-      }, rest), {
+      }), rest), {
         children
       })
     );
@@ -865,6 +918,22 @@ var CardBodyActionArrow = (0, import_react15.forwardRef)(
   }
 );
 CardBodyActionArrow.displayName = "Card.BodyActionArrow";
+var convertDeprecatedColor = (color) => {
+  switch (color) {
+    case "lighter-brand":
+      return { theme: "default" };
+    case "light-grey-fill":
+      return { theme: "base", dataColor: "neutral" };
+    case "white":
+      return { theme: "default", dataColor: "neutral" };
+    case "dark":
+      return { theme: "base" };
+    case "darker":
+      return { theme: "tinted", dataColorScheme: "dark" };
+    default:
+      return {};
+  }
+};
 var Card = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -873,6 +942,8 @@ var Card = (0, import_react15.forwardRef)(
       className,
       children,
       variant = "slim",
+      "data-color": dataColorAttr,
+      theme = "default",
       color,
       imagePosition
     } = _b, rest = __objRest(_b, [
@@ -881,24 +952,30 @@ var Card = (0, import_react15.forwardRef)(
       "className",
       "children",
       "variant",
+      "data-color",
+      "theme",
       "color",
       "imagePosition"
     ]);
     const Component = asChild ? import_react_slot6.Slot : Tag;
-    const effectiveColor = variant === "focus" && !color ? "darker" : color;
+    const {
+      theme: themeFromDeprecated,
+      dataColor: dataColorFromDeprecated,
+      dataColorScheme: dataColorSchemeFromDeprecated
+    } = convertDeprecatedColor(color != null ? color : variant === "focus" ? "darker" : void 0);
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
-      __spreadProps(__spreadValues({}, rest), {
+      __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, rest), dataColorAttr ? { "data-color": dataColorAttr } : {}), dataColorFromDeprecated ? { "data-color": dataColorFromDeprecated } : {}), dataColorSchemeFromDeprecated ? { "data-color-scheme": dataColorSchemeFromDeprecated } : {}), {
         className: (0, import_typed_classname12.clsx)(
           "hds-card",
           { "hds-card--full-width": variant === "full-width" },
           { "hds-card--miniature": variant === "miniature" },
           { "hds-card--focus": variant === "focus" },
+          // @deprecated
           { "hds-card--slim": variant === "slim" },
-          { "hds-card--color-white": effectiveColor === "white" },
-          { "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
-          { "hds-card--color-dark": effectiveColor === "dark" },
-          { "hds-card--color-darker": effectiveColor === "darker" },
+          { "hds-card--theme-default": (themeFromDeprecated != null ? themeFromDeprecated : theme) === "default" },
+          { "hds-card--theme-tinted": (themeFromDeprecated != null ? themeFromDeprecated : theme) === "tinted" },
+          { "hds-card--theme-base": (themeFromDeprecated != null ? themeFromDeprecated : theme) === "base" },
           { "hds-card--image-position-right": imagePosition === "right" },
           className
         ),
@@ -1429,17 +1506,7 @@ var ErrorSummaryItem = (0, import_react26.forwardRef)(
         e.preventDefault();
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname23.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      Link,
-      __spreadProps(__spreadValues({
-        size: "small",
-        href,
-        variant: "inverted-no-underline"
-      }, linkProps), {
-        onClick,
-        children
-      })
-    ) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname23.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
   }
 );
 ErrorSummaryItem.displayName = "ErrorSummary.Item";
@@ -1635,7 +1702,7 @@ var FooterButtonLink = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot10.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { asChild: true, variant: "inverted", className: (0, import_typed_classname28.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { asChild: true, variant: "secondary", className: (0, import_typed_classname28.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
 FooterButtonLink.displayName = "FooterButton";
@@ -1686,6 +1753,7 @@ var Footer = (0, import_react32.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadProps(__spreadValues({
+        "data-color-scheme": "dark",
         className: (0, import_typed_classname28.clsx)(
           `hds-footer`,
           variant === "slim" && "hds-footer--slim",
@@ -1928,10 +1996,10 @@ var Message = (0, import_react37.forwardRef)(
     var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       Box,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, variant === "warning" ? { "data-color-scheme": "light" } : {}), {
         className: (0, import_typed_classname33.clsx)(`hds-message`, `hds-message--${variant}`, className),
         ref
-      }, rest), {
+      }), rest), {
         children: [
           variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: (0, import_typed_classname33.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
           children
@@ -2066,7 +2134,7 @@ var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname"
 
 // src/navbar/icons.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-function CloseIcon() {
+function CloseIcon2() {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "path",
     {
@@ -2156,7 +2224,7 @@ var NavbarExpandableMenuTrigger = (0, import_react39.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": !open, className: (0, import_typed_classname35.clsx)("hds-navbar__item-whenopentext"), children: whenOpenText }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": open, className: (0, import_typed_classname35.clsx)("hds-navbar__item-whenclosedtext"), children: whenClosedText })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuIcon, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuIcon, {}) })
         ]
       })
     );
@@ -2469,7 +2537,7 @@ var import_react_slot18 = require("@radix-ui/react-slot");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var StyledHtml = (0, import_react45.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { asChild, children, size, unstable_darkmode: darkmode = false, className } = _b, rest = __objRest(_b, ["asChild", "children", "size", "unstable_darkmode", "className"]);
+    var _b = _a, { asChild, children, size, className } = _b, rest = __objRest(_b, ["asChild", "children", "size", "className"]);
     const Component = asChild ? import_react_slot18.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Component,
@@ -2477,7 +2545,6 @@ var StyledHtml = (0, import_react45.forwardRef)(
         className: (0, import_typed_classname41.clsx)(
           `hds-styled-html`,
           size === "small" && "hds-styled-html--small",
-          darkmode && "hds-styled-html--darkmode",
           className
         ),
         ref