@navikt/ds-react 7.33.5 → 7.35.0

package/esm/util/i18n/locales/nn.d.ts

@@ -5,14 +5,11 @@ declare const _default: {
         showLess: string;
         readOnly: string;
         close: string;
-    };
-    Alert: {
-        closeAlert: string;
-        closeMessage: string;
         error: string;
         info: string;
         success: string;
         warning: string;
+        announcement: string;
     };
     Chips: {
         Removable: {
@@ -21,6 +18,7 @@ declare const _default: {
     };
     Combobox: {
         addOption: string;
+        noMatches: string;
         loading: string;
         maxSelected: string;
     };

package/esm/util/i18n/locales/nn.js

@@ -6,14 +6,11 @@ export default {
         showLess: "Vis mindre",
         readOnly: "Skrivebeskytta",
         close: "Lukk",
-    },
-    Alert: {
-        closeAlert: "Lukk varsel",
-        closeMessage: "Lukk melding",
         error: "Feil",
         info: "Informasjon",
         success: "Suksess",
         warning: "Åtvaring",
+        announcement: "Kunngjering",
     },
     Chips: {
         Removable: {
@@ -22,6 +19,7 @@ export default {
     },
     Combobox: {
         addOption: "Legg til",
+        noMatches: "Ingen søketreff",
         loading: "Søker…",
         maxSelected: "{selected} av maks {limit} er valt.",
     },

package/esm/util/i18n/locales/nn.js.map

@@ -1 +1 @@
-{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrC,eAAe;IACb,MAAM,EAAE;QACN,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,gBAAgB;QAC1B,KAAK,EAAE,MAAM;KACd;IAED,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,OAAO;SACrB;KACF;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,UAAU;QACrB,OAAO,EAAE,QAAQ;QACjB,WAAW,EAAE,qCAAqC;KACnD;IACD,UAAU,EAAE;QACV,KAAK,EAAE,QAAQ;QACf,UAAU,EAAE,UAAU;KACvB;IACD,UAAU,EAAE;QACV,UAAU,EAAE,UAAU;QACtB,WAAW,EAAE,YAAY;QACzB,eAAe,EAAE,yBAAyB;QAC1C,WAAW,EAAE,WAAW;QACxB,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,aAAa;QACzB,gBAAgB,EAAE,iBAAiB;QACnC,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,oBAAoB;QACnC,iBAAiB,EAAE,oBAAoB;QACvC,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,iBAAiB;QAC/B,gBAAgB,EAAE,iBAAiB;QACnC,cAAc,EAAE,iBAAiB;QACjC,eAAe,EAAE,mBAAmB;QACpC,eAAe,EAAE,iBAAiB;QAClC,gBAAgB,EAAE,mBAAmB;KACtC;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gDAAgD;KAC1D;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,cAAc,EAAE,WAAW;YAC3B,WAAW,EAAE,uBAAuB;YACpC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,qCAAqC;SACzD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,+BAA+B;YACjD,iBAAiB,EAAE,YAAY;YAC/B,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,WAAW,EAAE;QACX,UAAU,EAAE,YAAY;KACzB;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,2BAA2B;KAC/C;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,kBAAkB;KAC1B;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE,OAAO;KACd;IACD,OAAO,EAAE;QACP,MAAM,EAAE,OAAO;KAChB;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,8CAA8C;QACzD,YAAY,EAAE,yBAAyB;QACvC,SAAS,EAAE,qBAAqB;KACjC;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,YAAY;QACxB,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,QAAQ;QACrB,UAAU,EAAE,MAAM;QAClB,GAAG,EAAE;YACH,SAAS,EAAE,gBAAgB;YAC3B,MAAM,EAAE,mBAAmB;SAC5B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,UAAU;YACnB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,gCAAgC;SACzC;QACD,GAAG,EAAE;YACH,GAAG,EAAE,aAAa;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,iCAAiC;YACvC,KAAK,EAAE,6BAA6B;SACrC;KACF;CACqB,CAAC"}
+{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.33.5",
+  "version": "7.35.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -30,7 +30,8 @@
     "/esm",
     "/src",
     "!**/*.tsbuildinfo",
-    "!**/*.stories.*"
+    "!**/*.stories.*",
+    "!**/renderStoriesForChromatic.tsx"
   ],
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -628,6 +629,46 @@
         "default": "./cjs/form/form-progress/index.js"
       }
     },
+    "./InlineMessage": {
+      "import": {
+        "types": "./esm/inline-message/index.d.ts",
+        "default": "./esm/inline-message/index.js"
+      },
+      "require": {
+        "types": "./cjs/inline-message/index.d.ts",
+        "default": "./cjs/inline-message/index.js"
+      }
+    },
+    "./GlobalAlert": {
+      "import": {
+        "types": "./esm/alert/global-alert/index.d.ts",
+        "default": "./esm/alert/global-alert/index.js"
+      },
+      "require": {
+        "types": "./cjs/alert/global-alert/index.d.ts",
+        "default": "./cjs/alert/global-alert/index.js"
+      }
+    },
+    "./InfoCard": {
+      "import": {
+        "types": "./esm/alert/info-card/index.d.ts",
+        "default": "./esm/alert/info-card/index.js"
+      },
+      "require": {
+        "types": "./cjs/alert/info-card/index.d.ts",
+        "default": "./cjs/alert/info-card/index.js"
+      }
+    },
+    "./LocalAlert": {
+      "import": {
+        "types": "./esm/alert/local-alert/index.d.ts",
+        "default": "./esm/alert/local-alert/index.js"
+      },
+      "require": {
+        "types": "./cjs/alert/local-alert/index.d.ts",
+        "default": "./cjs/alert/local-alert/index.js"
+      }
+    },
     "./package.json": "./package.json",
     "./Theme": {
       "import": {
@@ -654,8 +695,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^7.33.5",
-    "@navikt/ds-tokens": "^7.33.5",
+    "@navikt/aksel-icons": "^7.35.0",
+    "@navikt/ds-tokens": "^7.35.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"

package/src/alert/Alert.tsx

@@ -93,7 +93,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
     ref,
   ) => {
     const { cn } = useRenameCSS();
-    const translate = useI18n("Alert");
+    const translate = useI18n("global");
     const Icon = IconMap[variant];
     return (
       <div
@@ -132,15 +132,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
               variant="tertiary-neutral"
               onClick={onClose}
               type="button"
-              icon={
-                <XMarkIcon
-                  title={
-                    ["error", "warning"].includes(variant)
-                      ? translate("closeAlert")
-                      : translate("closeMessage")
-                  }
-                />
-              }
+              icon={<XMarkIcon title={translate("close")} />}
             />
           </div>
         )}

package/src/alert/base-alert/close-button/BaseAlertCloseButton.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { useRenameCSS } from "../../../theme/Theme";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
+
+type BaseAlertCloseButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+/**
+ * @see 🏷️ {@link BaseAlertCloseButtonProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header>
+ *      <BaseAlert.Title>Info title</BaseAlert.Title>
+ *      <BaseAlert.CloseButton onClick={...} />
+ *    </BaseAlert.Header>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertCloseButton = forwardRef<
+  HTMLButtonElement,
+  BaseAlertCloseButtonProps
+>(({ className, ...restProps }: BaseAlertCloseButtonProps, forwardedRef) => {
+  const { cn } = useRenameCSS();
+  const translate = useI18n("global");
+
+  return (
+    <Button
+      ref={forwardedRef}
+      type="button"
+      {...restProps}
+      data-color="neutral"
+      variant="tertiary-neutral"
+      className={cn(className, "navds-base-alert__close-button")}
+      size="small"
+      title={translate("close")}
+      icon={<XMarkIcon aria-hidden />}
+    />
+  );
+});
+
+export { BaseAlertCloseButton };
+export type { BaseAlertCloseButtonProps };

package/src/alert/base-alert/content/BaseAlertContent.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
+
+interface BaseAlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link BaseAlertContentProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header>
+ *      <BaseAlert.Title>Info title</BaseAlert.Title>
+ *    </BaseAlert.Header>
+ *
+ *    <BaseAlert.Content>Content</BaseAlert.Content>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertContent = forwardRef<HTMLDivElement, BaseAlertContentProps>(
+  (
+    { children, className, ...restProps }: BaseAlertContentProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const themeContext = useThemeInternal(false);
+
+    return (
+      <div
+        ref={forwardedRef}
+        data-color={themeContext?.color}
+        {...restProps}
+        className={cn(className, "navds-base-alert__content")}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export { BaseAlertContent };
+export type { BaseAlertContentProps };

package/src/alert/base-alert/header/BaseAlertHeader.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
+import { BodyShort } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
+import { useBaseAlert } from "../root/BaseAlertRoot.context";
+import { BaseAlertStatusIcon } from "../root/BaseAlertRoot.utils";
+
+interface BaseAlertHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Icon to display in the header.
+   */
+  icon?: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link BaseAlertHeaderProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header icon={<InformationSquareIcon aria-hidden />}>
+ *      <BaseAlert.Title>Info title</BaseAlert.Title>
+ *    </BaseAlert.Header>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertHeader = forwardRef<HTMLDivElement, BaseAlertHeaderProps>(
+  (
+    { children, className, icon, ...restProps }: BaseAlertHeaderProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const { status, color, statusId } = useBaseAlert();
+    const translate = useI18n("global");
+
+    const headerIcon =
+      icon ?? (status ? <BaseAlertStatusIcon status={status} /> : null);
+
+    return (
+      <div
+        ref={forwardedRef}
+        {...restProps}
+        data-color={color}
+        className={cn(className, "navds-base-alert__header")}
+      >
+        {headerIcon && (
+          <div className={cn("navds-base-alert__icon")}>{headerIcon}</div>
+        )}
+        {status && (
+          <BodyShort id={statusId} aria-hidden visuallyHidden>
+            {`${translate(status)}: `}
+          </BodyShort>
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+export { BaseAlertHeader };
+export type { BaseAlertHeaderProps };

package/src/alert/base-alert/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export * as BaseAlert from "./namespace";

package/src/alert/base-alert/namespace.ts

@@ -0,0 +1,11 @@
+export { BaseAlertCloseButton as CloseButton } from "./close-button/BaseAlertCloseButton";
+export { BaseAlertContent as Content } from "./content/BaseAlertContent";
+export { BaseAlertTitle as Title } from "./title/BaseAlertTitle";
+export { BaseAlertHeader as Header } from "./header/BaseAlertHeader";
+export { BaseAlert as Root } from "./root/BaseAlertRoot";
+
+export type { BaseAlertCloseButtonProps as CloseButtonProps } from "./close-button/BaseAlertCloseButton";
+export type { BaseAlertContentProps as ContentProps } from "./content/BaseAlertContent";
+export type { BaseAlertTitleProps as TitleProps } from "./title/BaseAlertTitle";
+export type { BaseAlertHeaderProps as HeaderProps } from "./header/BaseAlertHeader";
+export type { BaseAlertProps as RootProps } from "./root/BaseAlertRoot";

package/src/alert/base-alert/root/BaseAlertRoot.context.tsx

@@ -0,0 +1,17 @@
+import { AkselColor } from "../../../types";
+import { createContext } from "../../../util/create-context";
+
+type BaseAlertContextProps = {
+  size: "medium" | "small";
+  status?: "announcement" | "success" | "warning" | "error";
+  color: AkselColor | undefined;
+  statusId: string;
+};
+
+const [BaseAlertProvider, useBaseAlert] = createContext<BaseAlertContextProps>({
+  name: "BaseAlert",
+  errorMessage: "useBaseAlert must be used within a BaseAlertProvider",
+});
+
+export { BaseAlertProvider, useBaseAlert };
+export type { BaseAlertContextProps };

package/src/alert/base-alert/root/BaseAlertRoot.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
+import { AkselColor } from "../../../types";
+import { useId } from "../../../util";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
+import {
+  type BaseAlertContextProps,
+  BaseAlertProvider,
+} from "./BaseAlertRoot.context";
+import { baseAlertStatusToDataColor } from "./BaseAlertRoot.utils";
+
+interface BaseAlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content.
+   */
+  children: React.ReactNode;
+  /**
+   * Changes the size.
+   * @default "medium"
+   */
+  size?: BaseAlertContextProps["size"];
+  /**
+   * Overrides color
+   */
+  "data-color"?: AkselColor;
+  /**
+   * Intensity of the alert
+   */
+  type: "moderate" | "strong";
+  /**
+   * Centers content and removes border-radius
+   * @default false
+   */
+  global?: boolean;
+  /**
+   * Type of alert
+   */
+  status?: BaseAlertContextProps["status"];
+  /**
+   * Changes the HTML element used for the root element.
+   *
+   * **Testing**: When using `axe-core` for accessibility testing, `section` might warn about unique landmarks if you have multiple Alerts on page with the same status.
+   * In those cases, consider using `div` as the root element, or adding unique `aria-label` or `aria-labelledby` props.
+   * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
+   * @default "section"
+   */
+  as?: "section" | "div";
+}
+
+const BaseAlert = forwardRef<HTMLDivElement, BaseAlertProps>(
+  (
+    {
+      children,
+      className,
+      size = "medium",
+      "data-color": dataColor,
+      type,
+      global = false,
+      status,
+      as: Component = "section",
+      "aria-label": ariaLabel,
+      role,
+      ...restProps
+    }: BaseAlertProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    const statusId = useId();
+    const translate = useI18n("global");
+
+    const alertColor = status ? baseAlertStatusToDataColor(status) : dataColor;
+
+    return (
+      <BaseAlertProvider
+        size={size}
+        status={status}
+        color={alertColor}
+        statusId={statusId}
+      >
+        <Component
+          aria-label={
+            ariaLabel ??
+            (!status || Component === "div" ? undefined : translate(status))
+          }
+          ref={forwardedRef}
+          {...restProps}
+          className={cn(className, "navds-base-alert")}
+          data-size={size}
+          data-color={alertColor}
+          data-variant={type}
+          data-global={global}
+        >
+          <div role={role}>{children}</div>
+        </Component>
+      </BaseAlertProvider>
+    );
+  },
+);
+
+export { BaseAlert };
+export type { BaseAlertProps };

package/src/alert/base-alert/root/BaseAlertRoot.utils.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  CheckmarkCircleFillIcon,
+  CheckmarkCircleIcon,
+  ExclamationmarkTriangleFillIcon,
+  ExclamationmarkTriangleIcon,
+  MegaphoneSpeakingFillIcon,
+  MegaphoneSpeakingIcon,
+  XMarkOctagonFillIcon,
+  XMarkOctagonIcon,
+} from "@navikt/aksel-icons";
+import type { AkselColor } from "../../../types";
+import type { BaseAlertContextProps } from "../root/BaseAlertRoot.context";
+
+function baseAlertStatusToDataColor(
+  status: BaseAlertContextProps["status"],
+): AkselColor {
+  switch (status) {
+    case "announcement":
+      return "neutral";
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "error":
+      return "danger";
+  }
+
+  return "neutral";
+}
+
+const STATUS_ICONS = {
+  announcement: {
+    fill: MegaphoneSpeakingFillIcon,
+    outline: MegaphoneSpeakingIcon,
+  },
+  success: {
+    fill: CheckmarkCircleFillIcon,
+    outline: CheckmarkCircleIcon,
+  },
+  warning: {
+    fill: ExclamationmarkTriangleFillIcon,
+    outline: ExclamationmarkTriangleIcon,
+  },
+  error: {
+    fill: XMarkOctagonFillIcon,
+    outline: XMarkOctagonIcon,
+  },
+} as const;
+
+function BaseAlertStatusIcon({
+  status,
+  fill = true,
+}: {
+  status: BaseAlertContextProps["status"];
+  fill?: boolean;
+}) {
+  if (!status) {
+    return null;
+  }
+
+  const Icon = fill ? STATUS_ICONS[status].fill : STATUS_ICONS[status].outline;
+
+  return <Icon aria-hidden />;
+}
+
+export { BaseAlertStatusIcon, baseAlertStatusToDataColor };

package/src/alert/base-alert/title/BaseAlertTitle.tsx

@@ -0,0 +1,63 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
+import { BodyShort } from "../../../typography";
+import { useId } from "../../../util";
+import { useBaseAlert } from "../root/BaseAlertRoot.context";
+
+interface BaseAlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+  /**
+   * Changes the HTML element used for the title.
+   * @default "h2"
+   */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+}
+
+/**
+ * Title component for BaseAlert. Remember to use correct heading-level with the `as` prop.
+ * @see 🏷️ {@link BaseAlertTitleProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header>
+ *      <BaseAlert.Title as="h2">Info title</BaseAlert.Title>
+ *    </BaseAlert.Header>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertTitle = forwardRef<HTMLHeadingElement, BaseAlertTitleProps>(
+  (
+    {
+      children,
+      className,
+      as = "h2",
+      id: idProp,
+      ...restProps
+    }: BaseAlertTitleProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const { size, statusId } = useBaseAlert();
+
+    const titleId = useId(idProp);
+
+    return (
+      <BodyShort
+        ref={forwardedRef}
+        {...restProps}
+        as={as}
+        size={size === "medium" ? "large" : "medium"}
+        weight="semibold"
+        className={cn(className, "navds-base-alert__title")}
+        id={titleId}
+        aria-labelledby={cl(statusId, titleId)}
+      >
+        {children}
+      </BodyShort>
+    );
+  },
+);
+
+export { BaseAlertTitle };
+export type { BaseAlertTitleProps };

package/src/alert/global-alert/close-button/GlobalAlertCloseButton.tsx

@@ -0,0 +1,20 @@
+import { BaseAlert } from "../../base-alert";
+
+type GlobalAlertCloseButtonProps = BaseAlert.CloseButtonProps;
+
+/**
+ * @see 🏷️ {@link GlobalAlertCloseButtonProps}
+ * @example
+ * ```jsx
+ *  <GlobalAlert>
+ *    <GlobalAlert.Header>
+ *      <GlobalAlert.Title>Info title</GlobalAlert.Title>
+ *     <GlobalAlert.CloseButton onClick={() => alert("Closed!")} />
+ *    </GlobalAlert.Header>
+ *  </GlobalAlert>
+ * ```
+ */
+const GlobalAlertCloseButton = BaseAlert.CloseButton;
+
+export { GlobalAlertCloseButton };
+export type { GlobalAlertCloseButtonProps };

package/src/alert/global-alert/content/GlobalAlertContent.tsx

@@ -0,0 +1,21 @@
+import { BaseAlert } from "../../base-alert";
+
+type GlobalAlertContentProps = BaseAlert.ContentProps;
+
+/**
+ * @see 🏷️ {@link GlobalAlertContentProps}
+ * @example
+ * ```jsx
+ *  <GlobalAlert>
+ *    <GlobalAlert.Header>
+ *      <GlobalAlert.Title>Info title</GlobalAlert.Title>
+ *    </GlobalAlert.Header>
+ *
+ *    <GlobalAlert.Content>Content</GlobalAlert.Content>
+ *  </GlobalAlert>
+ * ```
+ */
+const GlobalAlertContent = BaseAlert.Content;
+
+export { GlobalAlertContent };
+export type { GlobalAlertContentProps };

package/src/alert/global-alert/header/GlobalAlertHeader.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import { BaseAlert } from "../../base-alert";
+
+type GlobalAlertHeaderProps = Omit<BaseAlert.HeaderProps, "icon">;
+
+/**
+ * @see 🏷️ {@link GlobalAlertHeaderProps}
+ * @example
+ * ```jsx
+ *  <GlobalAlert status="success">
+ *    <GlobalAlert.Header>
+ *      <GlobalAlert.Title>Info title</GlobalAlert.Title>
+ *    </GlobalAlert.Header>
+ *  </GlobalAlert>
+ * ```
+ */
+const GlobalAlertHeader = forwardRef<HTMLDivElement, GlobalAlertHeaderProps>(
+  (props, forwardedRef) => {
+    return <BaseAlert.Header ref={forwardedRef} {...props} />;
+  },
+);
+
+export { GlobalAlertHeader };
+export type { GlobalAlertHeaderProps };

package/src/alert/global-alert/index.ts

@@ -0,0 +1,16 @@
+"use client";
+export {
+  GlobalAlert,
+  GlobalAlertHeader,
+  GlobalAlertTitle,
+  GlobalAlertContent,
+  GlobalAlertCloseButton,
+} from "./root/GlobalAlertRoot";
+
+export type {
+  GlobalAlertProps,
+  GlobalAlertHeaderProps,
+  GlobalAlertTitleProps,
+  GlobalAlertContentProps,
+  GlobalAlertCloseButtonProps,
+} from "./root/GlobalAlertRoot";