@fuf-stack/pixels 0.31.4 → 0.32.0

package/dist/Accordion/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkZXGEK67Fcjs = require('../chunk-ZXGEK67F.cjs');
+var _chunkXTR4NKDPcjs = require('../chunk-XTR4NKDP.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
 
-exports.Accordion = _chunkZXGEK67Fcjs.Accordion_default; exports.accordionVariants = _chunkZXGEK67Fcjs.accordionVariants; exports.default = _chunkZXGEK67Fcjs.Accordion_default2;
+exports.Accordion = _chunkXTR4NKDPcjs.Accordion_default; exports.accordionVariants = _chunkXTR4NKDPcjs.accordionVariants; exports.default = _chunkXTR4NKDPcjs.Accordion_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Accordion/index.d.cts

@@ -1,10 +1,10 @@
-import { A as Accordion } from '../Accordion-CZ0Fqk-P.cjs';
-export { c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from '../Accordion-CZ0Fqk-P.cjs';
+import { A as Accordion } from '../Accordion-rA715N0Z.cjs';
+export { c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from '../Accordion-rA715N0Z.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config.js';
 import '@fuf-stack/pixel-utils';
-import '@nextui-org/divider';
+import '@heroui/divider';
 import 'react';
 
 

package/dist/Accordion/index.d.ts

@@ -1,10 +1,10 @@
-import { A as Accordion } from '../Accordion-CZ0Fqk-P.js';
-export { c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from '../Accordion-CZ0Fqk-P.js';
+import { A as Accordion } from '../Accordion-rA715N0Z.js';
+export { c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from '../Accordion-rA715N0Z.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config.js';
 import '@fuf-stack/pixel-utils';
-import '@nextui-org/divider';
+import '@heroui/divider';
 import 'react';
 
 

package/dist/Accordion/index.js

@@ -2,7 +2,7 @@ import {
   Accordion_default,
   Accordion_default2,
   accordionVariants
-} from "../chunk-33DBA7U2.js";
+} from "../chunk-GA54AM2W.js";
 import "../chunk-J7N2552D.js";
 export {
   Accordion_default as Accordion,

package/dist/{Accordion-CZ0Fqk-P.d.cts → Accordion-rA715N0Z.d.cts}

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as tailwind_variants from 'tailwind-variants';
 import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
-import { DividerProps } from '@nextui-org/divider';
+import { DividerProps } from '@heroui/divider';
 import { ReactNode } from 'react';
 
 declare const accordionVariants: tailwind_variants.TVReturnType<{
@@ -206,7 +206,7 @@ interface AccordionProps extends VariantProps {
     variant?: 'light' | 'shadow' | 'bordered' | 'splitted';
 }
 /**
- * Accordion component based on [NextUI Accordion](https://nextui.org/docs/components/accordion)
+ * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)
  */
 declare const Accordion: ({ accordionItems, className: _className, defaultSelectedKeys, disabled, disabledKeys, disallowEmptySelection, dividerProps, indicatorLeft, onSelectionChange, selectedKeys, selectionMode, showDivider, variant, }: AccordionProps) => react_jsx_runtime.JSX.Element;
 

package/dist/{Accordion-CZ0Fqk-P.d.ts → Accordion-rA715N0Z.d.ts}

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as tailwind_variants from 'tailwind-variants';
 import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
-import { DividerProps } from '@nextui-org/divider';
+import { DividerProps } from '@heroui/divider';
 import { ReactNode } from 'react';
 
 declare const accordionVariants: tailwind_variants.TVReturnType<{
@@ -206,7 +206,7 @@ interface AccordionProps extends VariantProps {
     variant?: 'light' | 'shadow' | 'bordered' | 'splitted';
 }
 /**
- * Accordion component based on [NextUI Accordion](https://nextui.org/docs/components/accordion)
+ * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)
  */
 declare const Accordion: ({ accordionItems, className: _className, defaultSelectedKeys, disabled, disabledKeys, disallowEmptySelection, dividerProps, indicatorLeft, onSelectionChange, selectedKeys, selectionMode, showDivider, variant, }: AccordionProps) => react_jsx_runtime.JSX.Element;
 

package/dist/Alert/index.cjs

@@ -0,0 +1,121 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkD4TLDLEXcjs = require('../chunk-D4TLDLEX.cjs');
+
+// src/Alert/Alert.tsx
+var _alert = require('@heroui/alert');
+var _theme = require('@heroui/theme');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var alertVariants = _pixelutils.tv.call(void 0, {
+  slots: {
+    base: "",
+    title: "",
+    description: "",
+    mainWrapper: "",
+    closeButton: "",
+    iconWrapper: "",
+    alertIcon: ""
+  },
+  variants: {
+    // See: https://github.comnextui-orgnextui/blob/canary/packages/core/theme/src/components/alert.ts
+    color: _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {
+      info: {
+        mainWrapper: "text-inherit",
+        title: "text-inherit",
+        description: "text-inherit"
+      }
+    }, _theme.alert.variants.color),
+    variant: _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {}, _theme.alert.variants.variant)
+  },
+  compoundVariants: [
+    ..._theme.alert.compoundVariants,
+    {
+      color: "info",
+      variant: "solid",
+      className: {
+        base: "bg-info text-info-foreground",
+        alertIcon: "text-info-foreground",
+        closeButton: "text-inherit"
+      }
+    },
+    {
+      color: "info",
+      variant: "flat",
+      className: {
+        alertIcon: "fill-current",
+        base: "dark:bg-info-50/50 bg-info-50 text-info-600",
+        closeButton: "text-info-500 data-[hover]:bg-info-200",
+        iconWrapper: "border-info-100 bg-info-50 dark:bg-info-100"
+      }
+    },
+    {
+      color: "info",
+      variant: "faded",
+      className: {
+        alertIcon: "fill-current",
+        base: "dark:bg-info-50/50 border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100",
+        closeButton: "text-info-500 data-[hover]:bg-info-200",
+        iconWrapper: "border-info-100 bg-info-50 dark:bg-info-100"
+      }
+    },
+    {
+      color: "info",
+      variant: "bordered",
+      className: {
+        alertIcon: "fill-current",
+        base: "border-small border-info text-info",
+        closeButton: "text-info-500 data-[hover]:bg-info-200",
+        iconWrapper: "bg-info-100 dark:bg-info-50"
+      }
+    }
+  ]
+});
+var Alert = ({
+  children = void 0,
+  className = void 0,
+  color = "primary",
+  endContent = void 0,
+  icon = void 0,
+  isClosable = false,
+  onClose = void 0,
+  showIcon = true,
+  testId = void 0,
+  title = void 0,
+  variant = "solid"
+}) => {
+  const variants = alertVariants({
+    color,
+    variant
+  });
+  const isHeroUIColor = Object.keys(_theme.alert.variants.color).includes(
+    color
+  );
+  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _alert.Alert,
+    {
+      classNames,
+      color: isHeroUIColor ? color : void 0,
+      "data-testid": testId,
+      description: title ? children : void 0,
+      endContent,
+      hideIcon: !showIcon,
+      icon,
+      isClosable,
+      onClose,
+      title: title || children,
+      variant
+    }
+  );
+};
+var Alert_default = Alert;
+
+// src/Alert/index.ts
+var Alert_default2 = Alert_default;
+
+
+
+
+exports.Alert = Alert_default; exports.alertVariants = alertVariants; exports.default = Alert_default2;
+//# sourceMappingURL=index.cjs.map

package/dist/Alert/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Alert/index.cjs","../../src/Alert/Alert.tsx","../../src/Alert/index.ts"],"names":["Alert_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Alert/index.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as NextAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as NextAlert } from '@heroui/alert';\nimport { alert as nextAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n  slots: {\n    base: '',\n    title: '',\n    description: '',\n    mainWrapper: '',\n    closeButton: '',\n    iconWrapper: '',\n    alertIcon: '',\n  },\n  variants: {\n    // See: https://github.comnextui-orgnextui/blob/canary/packages/core/theme/src/components/alert.ts\n    color: {\n      info: {\n        mainWrapper: 'text-inherit',\n        title: 'text-inherit',\n        description: 'text-inherit',\n      },\n      ...nextAlertVariants.variants.color,\n    },\n    variant: {\n      ...nextAlertVariants.variants.variant,\n    },\n  },\n  compoundVariants: [\n    ...nextAlertVariants.compoundVariants,\n    {\n      color: 'info',\n      variant: 'solid',\n      className: {\n        base: 'bg-info text-info-foreground',\n        alertIcon: 'text-info-foreground',\n        closeButton: 'text-inherit',\n      },\n    },\n    {\n      color: 'info',\n      variant: 'flat',\n      className: {\n        alertIcon: 'fill-current',\n        base: 'dark:bg-info-50/50 bg-info-50 text-info-600',\n        closeButton: 'text-info-500 data-[hover]:bg-info-200',\n        iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n      },\n    },\n    {\n      color: 'info',\n      variant: 'faded',\n      className: {\n        alertIcon: 'fill-current',\n        base: 'dark:bg-info-50/50 border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100',\n        closeButton: 'text-info-500 data-[hover]:bg-info-200',\n        iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n      },\n    },\n    {\n      color: 'info',\n      variant: 'bordered',\n      className: {\n        alertIcon: 'fill-current',\n        base: 'border-small border-info text-info',\n        closeButton: 'text-info-500 data-[hover]:bg-info-200',\n        iconWrapper: 'bg-info-100 dark:bg-info-50',\n      },\n    },\n  ],\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\nexport interface AlertProps extends VariantProps {\n  /** Content displayed inside the Alert if no description is given! */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Color scheme of the Alert */\n  color?: VariantProps['color'];\n  /** Content displayed at the end of the Alert */\n  endContent?: ReactNode;\n  /** Icon displayed at the start of the Alert */\n  icon?: ReactNode;\n  /** Whether the Alert can be closed */\n  isClosable?: boolean;\n  /** Callback fired when the close button is clicked */\n  onClose?: () => void | undefined;\n  /** Whether to show the icon at the start */\n  showIcon?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Title displayed in the Alert above the content */\n  title?: ReactNode;\n  /** Style variant of the Alert */\n  variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n  children = undefined,\n  className = undefined,\n  color = 'primary',\n  endContent = undefined,\n  icon = undefined,\n  isClosable = false,\n  onClose = undefined,\n  showIcon = true,\n  testId = undefined,\n  title = undefined,\n  variant = 'solid',\n}: AlertProps) => {\n  const variants = alertVariants({\n    color,\n    variant,\n  });\n  const isHeroUIColor = Object.keys(nextAlertVariants.variants.color).includes(\n    color,\n  );\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <NextAlert\n      classNames={classNames}\n      color={isHeroUIColor ? (color as NextAlertProps['color']) : undefined}\n      data-testid={testId}\n      description={title ? children : undefined}\n      endContent={endContent}\n      hideIcon={!showIcon}\n      icon={icon}\n      isClosable={isClosable}\n      onClose={onClose}\n      title={(title || children) as string}\n      variant={variant}\n    />\n  );\n};\n\nexport default Alert;\n","import Alert, { alertVariants } from './Alert';\n\nexport type { AlertProps } from './Alert';\n\nexport { Alert, alertVariants };\n\nexport default Alert;\n"]}

package/dist/Alert/index.d.cts

@@ -0,0 +1,231 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
+import { ReactNode } from 'react';
+
+declare const alertVariants: tailwind_variants.TVReturnType<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    description: string;
+    mainWrapper: string;
+    closeButton: string;
+    iconWrapper: string;
+    alertIcon: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}>, {
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    description: string;
+    mainWrapper: string;
+    closeButton: string;
+    iconWrapper: string;
+    alertIcon: string;
+}, tailwind_variants.TVReturnType<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    description: string;
+    mainWrapper: string;
+    closeButton: string;
+    iconWrapper: string;
+    alertIcon: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof alertVariants>;
+type ClassName = TVClassName<typeof alertVariants>;
+interface AlertProps extends VariantProps {
+    /** Content displayed inside the Alert if no description is given! */
+    children?: ReactNode;
+    /** CSS class name */
+    className?: ClassName;
+    /** Color scheme of the Alert */
+    color?: VariantProps['color'];
+    /** Content displayed at the end of the Alert */
+    endContent?: ReactNode;
+    /** Icon displayed at the start of the Alert */
+    icon?: ReactNode;
+    /** Whether the Alert can be closed */
+    isClosable?: boolean;
+    /** Callback fired when the close button is clicked */
+    onClose?: () => void | undefined;
+    /** Whether to show the icon at the start */
+    showIcon?: boolean;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
+    /** Title displayed in the Alert above the content */
+    title?: ReactNode;
+    /** Style variant of the Alert */
+    variant?: VariantProps['variant'];
+}
+/**
+ * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
+ */
+declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, alertVariants, Alert as default };

package/dist/Alert/index.d.ts

@@ -0,0 +1,231 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
+import { ReactNode } from 'react';
+
+declare const alertVariants: tailwind_variants.TVReturnType<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    description: string;
+    mainWrapper: string;
+    closeButton: string;
+    iconWrapper: string;
+    alertIcon: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}>, {
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    description: string;
+    mainWrapper: string;
+    closeButton: string;
+    iconWrapper: string;
+    alertIcon: string;
+}, tailwind_variants.TVReturnType<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    description: string;
+    mainWrapper: string;
+    closeButton: string;
+    iconWrapper: string;
+    alertIcon: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}, {
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {
+            mainWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {};
+        flat: {};
+        faded: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof alertVariants>;
+type ClassName = TVClassName<typeof alertVariants>;
+interface AlertProps extends VariantProps {
+    /** Content displayed inside the Alert if no description is given! */
+    children?: ReactNode;
+    /** CSS class name */
+    className?: ClassName;
+    /** Color scheme of the Alert */
+    color?: VariantProps['color'];
+    /** Content displayed at the end of the Alert */
+    endContent?: ReactNode;
+    /** Icon displayed at the start of the Alert */
+    icon?: ReactNode;
+    /** Whether the Alert can be closed */
+    isClosable?: boolean;
+    /** Callback fired when the close button is clicked */
+    onClose?: () => void | undefined;
+    /** Whether to show the icon at the start */
+    showIcon?: boolean;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
+    /** Title displayed in the Alert above the content */
+    title?: ReactNode;
+    /** Style variant of the Alert */
+    variant?: VariantProps['variant'];
+}
+/**
+ * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
+ */
+declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, alertVariants, Alert as default };