@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/action-bar/ActionBar.d.ts

@@ -0,0 +1,153 @@
+import { default as React, ReactNode } from 'react';
+import { ActionBarActionProps } from './parts/ActionBarAction.js';
+export declare const actionBar: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            selectionArea?: import('tailwind-merge').ClassNameValue;
+            actionArea?: import('tailwind-merge').ClassNameValue;
+            selectionCountText?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            selectionArea?: import('tailwind-merge').ClassNameValue;
+            actionArea?: import('tailwind-merge').ClassNameValue;
+            selectionCountText?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    selectionArea: string[];
+    actionArea: string[];
+    selectionCountText: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            selectionArea?: import('tailwind-merge').ClassNameValue;
+            actionArea?: import('tailwind-merge').ClassNameValue;
+            selectionCountText?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    selectionArea: string[];
+    actionArea: string[];
+    selectionCountText: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    selectionArea: string[];
+    actionArea: string[];
+    selectionCountText: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Action item interface for dynamic API
+ * Extends ActionBarActionProps but uses onClick instead of onPress and requires id
+ */
+export interface ActionBarActionItem extends Omit<ActionBarActionProps, 'children'> {
+    /** The unique identifier for the action */
+    id: string;
+    /** The label for the action */
+    label: string;
+}
+interface ActionBarBaseProps {
+    /** Unique identifier for the action bar (required for skip links integration) */
+    id?: string;
+    /** Number of selected items */
+    selectionCount: number;
+    /** Callback when selection is cleared */
+    onClearSelection: () => void;
+    /**
+     * Custom text for selection count (optional)
+     */
+    renderSelectionText?: (count: number) => string;
+    /** ARIA label for the toolbar */
+    'aria-label'?: string;
+    /** ARIA keyshortcuts for the action bar */
+    'aria-keyshortcuts'?: string;
+    /** Callback when the action bar is focused */
+    onFocus?: () => void;
+    /** Callback when the action bar is blurred */
+    onBlur?: () => void;
+}
+interface ActionBarStaticProps extends ActionBarBaseProps {
+    /** Static ActionBarAction components */
+    children?: ReactNode;
+    /** Actions prop is not allowed with static API */
+    actions?: never;
+}
+interface ActionBarDynamicProps extends ActionBarBaseProps {
+    /** Array of action items */
+    actions: ActionBarActionItem[];
+    /** Render function that receives action and index */
+    children: (action: ActionBarActionItem, index: number) => ReactNode;
+}
+/**
+ * Represents the props for an ActionBar component, which can be either static or dynamic.
+ *
+ * This type is a union of `ActionBarStaticProps` and `ActionBarDynamicProps`, allowing
+ * flexibility in specifying the props for the ActionBar depending on its behavior.
+ *
+ * Use `ActionBarStaticProps` when the ActionBar requires fixed, unchanging properties,
+ * and utilize `ActionBarDynamicProps` for scenarios where the properties need to be
+ * dynamic or state-dependent.
+ * @see {@link ActionBarStaticProps} for static API props
+ * @see {@link ActionBarDynamicProps} for dynamic API props
+ */
+export type ActionBarProps = ActionBarStaticProps | ActionBarDynamicProps;
+/**
+ * The ActionBar component provides contextual bulk actions when table rows are selected.
+ * It supports both static (declarative) and dynamic (render prop) APIs for maximum flexibility.
+ * @param {ActionBarProps} props - Props for ActionBar including id, selectionCount and onClearSelection
+ * @example
+ * ```tsx
+ * import { ActionBar, ActionBarAction, ActionBarRoot } from '@payfit/unity-components'
+ *
+ * // Static API with ActionBarAction components
+ * function StaticExample() {
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar id="table-actions" selectionCount={2} onClearSelection={handleClear}>
+ *         <ActionBarAction onPress={handleArchive}>Archive</ActionBarAction>
+ *         <ActionBarAction variant="primary" onPress={handleDelete}>Delete</ActionBarAction>
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ *
+ * // Dynamic API with actions array and render function
+ * function DynamicExample() {
+ *   const actions = [
+ *     { id: 'archive', onPress: handleArchive, label: 'Archive' },
+ *     { id: 'delete', onPress: handleDelete, variant: 'primary', label: 'Delete' }
+ *   ]
+ *
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar id="table-actions" selectionCount={2} onClearSelection={handleClear} actions={actions}>
+ *         {(action, index) => (
+ *           <ActionBarAction key={action.id} {...action}>
+ *             {action.label}
+ *           </ActionBarAction>
+ *         )}
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be wrapped in ActionBarRoot for proper positioning
+ * - Only renders when selectionCount > 0
+ * - Static API: pass ActionBarAction components as children
+ * - Dynamic API: provide actions array and render function as children
+ * - Includes proper ARIA labels and live regions for accessibility
+ * @see {@link ActionBarProps} for all available props
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar)
+ * @see Design specs [Figma](https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library)
+ * @see Design docs in [Payfit.design](https://www.payfit.design/)
+ */
+declare const ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export { ActionBar };

package/dist/esm/components/action-bar/ActionBar.js

@@ -0,0 +1,173 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import T, { forwardRef as j, useCallback as z, isValidElement as D } from "react";
+import { uyTv as R } from "@payfit/unity-themes";
+import { Toolbar as S, Group as d } from "react-aria-components";
+import { useIntl as _, FormattedMessage as l } from "react-intl";
+import { Button as E } from "../button/Button.js";
+import { IconButton as F } from "../icon-button/IconButton.js";
+import { Icon as G } from "../icon/Icon.js";
+import { Menu as K } from "../menu/Menu.js";
+import { MenuContent as L } from "../menu/parts/MenuContent.js";
+import { MenuItem as O } from "../menu/parts/MenuItem.js";
+import { MenuTrigger as U } from "../menu/parts/MenuTrigger.js";
+import { ActionBarAction as V } from "./parts/ActionBarAction.js";
+const q = R({
+  slots: {
+    base: [
+      "uy:bg-surface-inverted uy:text-content-inverted",
+      "uy:rounded-100 uy:shadow-raising",
+      "uy:flex uy:items-center uy:gap-100 uy:md:gap-200 uy:py-50 uy:pl-50 uy:md:pl-200 uy:pr-50",
+      "uy:transition-all uy:duration-200",
+      "uy:max-w-full uy:min-w-0 uy:w-fit",
+      // Ensure responsive behavior
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    ],
+    selectionArea: ["uy:flex uy:items-center uy:gap-100"],
+    actionArea: ["uy:flex uy:items-center uy:gap-100"],
+    selectionCountText: [
+      "uy:typography-body uy:whitespace-nowrap!",
+      "uy:sr-only",
+      "uy:md:not-sr-only"
+    ]
+  }
+}), H = j(
+  ({
+    id: f,
+    selectionCount: u,
+    onClearSelection: p,
+    children: r,
+    actions: a,
+    renderSelectionText: c,
+    "aria-label": b,
+    onFocus: h,
+    onBlur: v,
+    ...i
+  }, g) => {
+    var y;
+    const { base: x, selectionArea: A, selectionCountText: M, actionArea: k } = q(), m = _(), s = a !== void 0 && typeof r == "function", B = i["aria-keyshortcuts"] !== void 0, I = b ?? m.formatMessage({
+      id: "unity:component:action-bar:toolbar-label",
+      defaultMessage: "Bulk actions toolbar"
+    }), C = z(() => {
+      if (s) {
+        const e = r;
+        return a.map((t, P) => e(t, P));
+      }
+      return r;
+    }, [r, a, s]), w = !!r || "actions" in i && i.actions.length > 0, N = s ? a.filter((e) => e.variant !== "primary") : (y = T.Children.map(r, (e) => {
+      if (!D(e) || e.type !== V)
+        return null;
+      const t = e.props;
+      return t.variant === "primary" ? null : {
+        ...t,
+        id: e.key ?? t.id,
+        onPress: t.onPress,
+        label: t.children,
+        variant: t.variant,
+        prefixIcon: t.prefixIcon
+      };
+    })) == null ? void 0 : y.filter(Boolean);
+    return /* @__PURE__ */ n(
+      S,
+      {
+        ...i,
+        id: f,
+        ref: g,
+        className: x(),
+        "aria-label": I,
+        orientation: "horizontal",
+        tabIndex: -1,
+        onFocus: h,
+        onBlur: v,
+        children: [
+          /* @__PURE__ */ n(
+            d,
+            {
+              className: A(),
+              "aria-label": m.formatMessage({
+                id: "unity:component:action-bar:group:label",
+                defaultMessage: "Selection information"
+              }),
+              children: [
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: M(),
+                    role: "status",
+                    "aria-live": "polite",
+                    "aria-atomic": "true",
+                    children: [
+                      c ? c(u) : /* @__PURE__ */ o(
+                        l,
+                        {
+                          id: "unity:component:action-bar:selection-count-text",
+                          defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
+                          values: { selectionCount: u }
+                        }
+                      ),
+                      B && /* @__PURE__ */ o("span", { className: "uy:sr-only", children: /* @__PURE__ */ o(
+                        l,
+                        {
+                          id: "unity:component:action-bar:key-shortcuts-text",
+                          defaultMessage: "Use {keyShortcuts} to focus the action bar",
+                          values: {
+                            keyShortcuts: i["aria-keyshortcuts"]
+                          }
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o(E, { color: "inverted", variant: "ghost", onPress: p, children: /* @__PURE__ */ o(
+                  l,
+                  {
+                    id: "unity:component:action-bar:clear-selection-button",
+                    defaultMessage: "Clear selection"
+                  }
+                ) })
+              ]
+            }
+          ),
+          w && /* @__PURE__ */ n(
+            d,
+            {
+              className: k(),
+              role: "group",
+              "aria-label": "Available actions",
+              children: [
+                C(),
+                /* @__PURE__ */ o("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(K, { children: [
+                  /* @__PURE__ */ o(U, { asChild: !0, children: /* @__PURE__ */ o(
+                    F,
+                    {
+                      icon: "DotsThreeOutlined",
+                      label: "More actions",
+                      variant: "ghost",
+                      color: "inverted"
+                    }
+                  ) }),
+                  /* @__PURE__ */ o(L, { children: N.map((e) => /* @__PURE__ */ o(
+                    O,
+                    {
+                      onAction: () => {
+                        var t;
+                        (t = e.onPress) == null || t.call(e, {});
+                      },
+                      prefix: e.prefixIcon ? /* @__PURE__ */ o(G, { src: e.prefixIcon, size: 20 }) : void 0,
+                      children: e.label
+                    },
+                    e.id
+                  )) })
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+H.displayName = "ActionBar";
+export {
+  H as ActionBar,
+  q as actionBar
+};

package/dist/esm/components/action-bar/parts/ActionBarAction.d.ts

@@ -0,0 +1,44 @@
+import { ButtonProps } from '../../button/Button.js';
+export type ActionBarActionProps = Omit<ButtonProps, 'variant' | 'size' | 'color'> & {
+    /**
+     * The visual variant of the action.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary';
+};
+/**
+ * The ActionBarAction component represents an individual action within an ActionBar.
+ * It renders as a button with appropriate styling for the inverted ActionBar context.
+ * @param {ActionBarActionProps} props - Props for the action. Identical to the `Button` component props.
+ * @example
+ * ```tsx
+ * import { ActionBarAction } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarAction
+ *       variant="primary"
+ *       onPress={() => console.log('Action clicked')}
+ *       prefixIcon="TrashOutlined"
+ *     >
+ *       Delete Items
+ *     </ActionBarAction>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically uses inverted button variants to work on dark ActionBar background
+ * - Secondary actions use 'ghost-inverted' button variant
+ * - Primary actions use 'inverted-primary' button variant
+ * @see {@link ActionBarActionProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const ActionBarAction: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "variant"> & {
+    /**
+     * The visual variant of the action.
+     * @default 'secondary'
+     */
+    variant?: "primary" | "secondary";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { ActionBarAction };

package/dist/esm/components/action-bar/parts/ActionBarAction.js

@@ -0,0 +1,45 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { Button as m } from "../../button/Button.js";
+const u = d({
+  base: "uy:w-auto",
+  variants: {
+    variant: {
+      primary: "",
+      secondary: "uy:hidden uy:md:block"
+    }
+  },
+  defaultVariants: {
+    variant: "secondary"
+  }
+}), y = e(
+  ({ variant: r = "secondary", children: o, onPress: n, ...i }, c) => {
+    const t = {
+      primary: {
+        variant: "primary",
+        color: "inverted"
+      },
+      secondary: {
+        variant: "ghost",
+        color: "inverted"
+      }
+    }[r], s = u({ variant: r });
+    return /* @__PURE__ */ a("div", { className: s, children: /* @__PURE__ */ a(
+      m,
+      {
+        ref: c,
+        variant: t.variant,
+        color: t.color,
+        onPress: n,
+        size: "default",
+        ...i,
+        children: o
+      }
+    ) });
+  }
+);
+y.displayName = "ActionBarAction";
+export {
+  y as ActionBarAction
+};

package/dist/esm/components/action-bar/parts/ActionBarRoot.d.ts

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react';
+export declare const actionBarRoot: import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface ActionBarRootProps extends PropsWithChildren {
+    /** Offset from the bottom of the table. It uses Unity's standard spacing tokens. */
+    offsetBottom?: '$25' | '$50' | '$75' | '$100' | '$125' | '$200' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000' | number;
+    isVisible?: boolean;
+}
+/**
+ * The ActionBarRoot component provides positioning context for ActionBar components.
+ * It positions the ActionBar absolutely within a table container.
+ * @param {ActionBarRootProps} props - The props for the ActionBarRoot component
+ * @example
+ * ```tsx
+ * import { ActionBarRoot, ActionBar } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar selectionCount={2} onClearSelection={handleClear}>
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @see {@link ActionBarRootProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ */
+declare const ActionBarRoot: import('react').ForwardRefExoticComponent<ActionBarRootProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ActionBarRoot };

package/dist/esm/components/action-bar/parts/ActionBarRoot.js

@@ -0,0 +1,46 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { uyTv as y } from "@payfit/unity-themes";
+const c = y({
+  base: [
+    "uy:absolute uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
+    "uy:duration-200 uy:ease-out",
+    "uy:bottom-[calc(var(--uy-spacing-200)+var(--uy-spacing-offset-bottom))]",
+    "uy:starting:opacity-0"
+  ],
+  variants: {
+    isVisible: {
+      true: ["uy:animate-slide-up-fade-in"],
+      false: [
+        // Use transform instead of changing bottom position
+        "uy:animate-slide-down-fade-out",
+        "uy:pointer-events-none",
+        "uy:opacity-0",
+        "uy:translate-y-10"
+      ]
+    }
+  }
+}), p = i(
+  ({ children: o, offsetBottom: a = 0, isVisible: t = !1, ...n }, u) => {
+    const e = typeof a == "number" ? a : a.replace("$", ""), r = typeof a == "number" ? `calc(var(--uy-spacing)*${e})` : `var(--uy-spacing-${e})`;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: u,
+        className: c({ isVisible: t }),
+        ...n,
+        style: {
+          "--uy-spacing-offset-bottom": r
+        },
+        tabIndex: -1,
+        inert: t ? void 0 : "",
+        children: o
+      }
+    );
+  }
+);
+p.displayName = "ActionBarRoot";
+export {
+  p as ActionBarRoot,
+  c as actionBarRoot
+};

package/dist/esm/components/actionable/Actionable.d.ts

@@ -0,0 +1,14 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+export interface ActionableProps extends AriaButtonProps {
+    /** Additional class names to apply to the actionable */
+    className?: string;
+    /** set to true to remove the Actionable's base styles */
+    isUnstyled?: boolean;
+    /** The HTML element to render the actionable as. */
+    asElement?: 'span' | 'div';
+}
+/**
+ * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
+ */
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Actionable };

package/dist/esm/components/actionable/Actionable.js

@@ -0,0 +1,71 @@
+import { jsx as D } from "react/jsx-runtime";
+import { forwardRef as H, useState as k } from "react";
+import { uyTv as F } from "@payfit/unity-themes";
+import { useFocusVisible as E, useHover as x, useFocus as N } from "@react-aria/interactions";
+import { useObjectRef as S, mergeProps as c } from "@react-aria/utils";
+import { useButton as U } from "react-aria";
+const V = F({
+  base: "uy:group uy:cursor-pointer",
+  variants: {
+    isUnstyled: {
+      true: "",
+      false: "uy:aria-disabled:cursor-not-allowed uy:aria-disabled:text-content-neutral-disabled"
+    }
+  },
+  defaultVariants: {
+    isUnstyled: !1
+  }
+}), j = H((d, s) => {
+  const {
+    asElement: i = "div",
+    isUnstyled: u = !1,
+    className: p,
+    children: o,
+    ...e
+  } = d;
+  s = S(s);
+  const { isFocusVisible: m } = E(), { isHovered: f, hoverProps: n } = x({
+    onHoverStart: e.onHoverStart,
+    onHoverEnd: e.onHoverEnd,
+    onHoverChange: e.onHoverChange,
+    isDisabled: e.isDisabled
+  }), [b, v] = k(!1), { focusProps: r } = N({
+    onFocusChange: v,
+    isDisabled: e.isDisabled
+  }), { buttonProps: a, isPressed: y } = U(
+    {
+      ...e,
+      elementType: i
+    },
+    s
+  ), g = i, P = (t) => {
+    if (e.isDisabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    const l = c(a, n, r);
+    l.onClick && l.onClick(t);
+  }, C = c(a, n, r), { onClick: w, ...h } = C;
+  return /* @__PURE__ */ D(
+    g,
+    {
+      ...h,
+      onClick: P,
+      className: V({ isUnstyled: u, className: p }),
+      ref: s,
+      children: typeof o == "function" ? o({
+        isHovered: f,
+        isPressed: y,
+        isFocused: b,
+        isDisabled: !!e.isDisabled,
+        isFocusVisible: m,
+        isPending: !1,
+        defaultChildren: null
+      }) : o
+    }
+  );
+});
+j.displayName = "Actionable";
+export {
+  j as Actionable
+};

package/dist/esm/components/alert/Alert.d.ts

@@ -0,0 +1,95 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+declare const alert: import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type BaseAlertProps = PropsWithChildren<{
+    /**
+     * The alert's variant, which determines its visual style.
+     */
+    variant: NonNullable<VariantProps<typeof alert>['variant']>;
+}>;
+type DismissableConfig = {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable?: false;
+    onDismiss?: never;
+    dismissButtonLabel?: never;
+} | {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable: true;
+    /**
+     * Callback function to handle the alert's dismissal behavior.
+     */
+    onDismiss: () => void;
+    /**
+     * Label for the close button.
+     */
+    dismissButtonLabel: string;
+};
+export type AlertProps = BaseAlertProps & DismissableConfig;
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app. They can provide feedback, confirmations, warnings, or errors.
+ */
+declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Alert };