linkedunion-design-kit 1.9.0 → 1.9.2

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { default as LUIcon } from "./src/components/Icons/LUIcon";
 export { default as Card } from "./src/components/Card/card";
 export { default as LuImage } from "./src/components/Images/LuImage";
-export { default as Avatar } from "./src/components/Avatar/Avatar/Avatar";
 export { default as Title } from "./src/components/Title/Title";
 export { IconButton } from "./src/components/Button/IconButton/IconButton";
 export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
@@ -22,3 +21,6 @@ export { Slider } from "./src/components/Slider/slider";
 export { RadioGroup, RadioGroupItem, } from "./src/components/RadioGroup/radio-group";
 export { AppIcon } from "./src/components/AppIcons";
 export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
+export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";

package/dist/index.js

@@ -1,7 +1,6 @@
 export { default as LUIcon } from "./src/components/Icons/LUIcon";
 export { default as Card } from "./src/components/Card/card";
 export { default as LuImage } from "./src/components/Images/LuImage";
-export { default as Avatar } from "./src/components/Avatar/Avatar/Avatar";
 export { default as Title } from "./src/components/Title/Title";
 export { IconButton } from "./src/components/Button/IconButton/IconButton";
 export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
@@ -22,3 +21,6 @@ export { Slider } from "./src/components/Slider/slider";
 export { RadioGroup, RadioGroupItem, } from "./src/components/RadioGroup/radio-group";
 export { AppIcon } from "./src/components/AppIcons";
 export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
+export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";

package/dist/src/components/Accordion/accordion.js

@@ -55,7 +55,7 @@ function AccordionTrigger(_a) {
         }
         return function () { return observer.disconnect(); };
     }, []);
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ ref: ref, "data-slot": "accordion-trigger", className: cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow m-0", className) }, props, { children: [_jsx(LUIcon, { color: "dark-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ ref: ref, "data-slot": "accordion-trigger", className: cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow m-0", className) }, props, { children: [_jsx(LUIcon, { color: "light-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
 }
 function AccordionContent(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);

package/dist/src/components/Alerts/Alert/alert.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "../../Button/Button/Button";
+declare const alertVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shadow?: "lg" | "none" | null | undefined;
+    color?: "blue" | "green" | "yellow" | "red" | "indigo" | "gray" | null | undefined;
+    variant?: "fill" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof alertVariants> {
+}
+export declare function Alert({ className, size, shadow, color, variant, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const AlertAction: ({ className, color: colorProp, ...props }: React.ComponentProps<typeof Button>) => import("react/jsx-runtime").JSX.Element;
+export declare const AlertCancel: ({ className, color: colorProp, ...props }: React.ComponentProps<typeof Button>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Alerts/Alert/alert.js

@@ -0,0 +1,156 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, Children, isValidElement, cloneElement, } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+import LUIcon from "../../Icons/LUIcon";
+import { Button } from "../../Button/Button/Button";
+var alertVariants = cva("grid w-full gap-4 rounded-lg border-l-4 p-4", {
+    variants: {
+        size: {
+            lg: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-9 gap-4 [&_h2[data-slot='alert-dialog-title']]:text-2xl [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-lg [&_p[data-slot='alert-dialog-description']]:font-normal",
+            md: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-8 gap-3 [&_h2[data-slot='alert-dialog-title']]:text-xl [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-base [&_p[data-slot='alert-dialog-description']]:font-normal",
+            sm: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-7 gap-2 [&_h2[data-slot='alert-dialog-title']]:text-lg [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-sm [&_p[data-slot='alert-dialog-description']]:font-normal",
+        },
+        shadow: {
+            none: "",
+            lg: "shadow-lg",
+        },
+        color: {
+            blue: "bg-gray-50 text-blue-900 border-blue-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-blue-600 [&_h2[data-slot='alert-dialog-title']]:text-blue-600",
+            red: "bg-gray-50 text-red-900 border-red-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-red-600 [&_h2[data-slot='alert-dialog-title']]:text-red-600",
+            indigo: "bg-gray-50 text-indigo-900 border-indigo-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-indigo-600 [&_h2[data-slot='alert-dialog-title']]:text-indigo-600",
+            yellow: "bg-gray-50 text-yellow-900 border-yellow-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-yellow-600 [&_h2[data-slot='alert-dialog-title']]:text-yellow-600",
+            green: "bg-gray-50 text-green-900 border-green-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-green-600 [&_h2[data-slot='alert-dialog-title']]:text-green-600",
+            gray: "bg-gray-50 text-gray-900 border-gray-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-gray-600 [&_h2[data-slot='alert-dialog-title']]:text-gray-600",
+        },
+        variant: {
+            outline: "",
+            fill: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        shadow: "none",
+        color: "blue",
+        variant: "outline",
+    },
+    compoundVariants: [
+        {
+            color: "blue",
+            variant: "fill",
+            class: "bg-blue-100 text-blue-900 border-blue-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-blue-600 [&_h2[data-slot='alert-dialog-title']]:text-blue-600",
+        },
+        {
+            color: "red",
+            variant: "fill",
+            class: "bg-red-100 text-red-900 border-red-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-red-600 [&_h2[data-slot='alert-dialog-title']]:text-red-600",
+        },
+        {
+            color: "indigo",
+            variant: "fill",
+            class: "bg-indigo-100 text-indigo-900 border-indigo-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-indigo-600 [&_h2[data-slot='alert-dialog-title']]:text-indigo-600",
+        },
+        {
+            color: "yellow",
+            variant: "fill",
+            class: "bg-yellow-100 text-yellow-900 border-yellow-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-yellow-600 [&_h2[data-slot='alert-dialog-title']]:text-yellow-600",
+        },
+        {
+            color: "green",
+            variant: "fill",
+            class: "bg-green-100 text-green-900 border-green-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-green-600 [&_h2[data-slot='alert-dialog-title']]:text-green-600",
+        },
+        {
+            color: "gray",
+            variant: "fill",
+            class: "bg-gray-100 text-gray-900 border-gray-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-gray-600 [&_h2[data-slot='alert-dialog-title']]:text-gray-600",
+        },
+    ],
+});
+// Create context for Alert color
+var AlertContext = createContext({});
+var useAlertContext = function () { return useContext(AlertContext); };
+export function Alert(_a) {
+    var className = _a.className, size = _a.size, shadow = _a.shadow, color = _a.color, variant = _a.variant, props = __rest(_a, ["className", "size", "shadow", "color", "variant"]);
+    return (_jsx(AlertContext.Provider, { value: { color: color || undefined }, children: _jsx("div", __assign({ "data-slot": "inline-alert", className: cn(alertVariants({
+                size: size,
+                shadow: shadow,
+                color: color,
+                variant: variant,
+            }), className) }, props)) }));
+}
+export function AlertHeader(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    // Check if children contains LUIcon
+    var childrenArray = Children.toArray(children);
+    var hasIcon = childrenArray.some(function (child) { return isValidElement(child) && child.type === LUIcon; });
+    if (hasIcon) {
+        var iconWithClass_1 = null;
+        var otherChildren_1 = [];
+        childrenArray.forEach(function (child) {
+            if (isValidElement(child) && child.type === LUIcon) {
+                var iconElement = child;
+                // If LUIcon has a size prop, add .lu-icon-custom-size to className
+                var hasSizeProp = !!iconElement.props.size;
+                // If LUIcon has a color prop, add .lu-icon-custom-color to className
+                var hasColorProp = !!iconElement.props.color;
+                iconWithClass_1 = cloneElement(iconElement, {
+                    className: cn(iconElement.props.className, hasSizeProp && "lu-icon-custom-size", hasColorProp && "lu-icon-custom-color"),
+                });
+            }
+            else {
+                otherChildren_1.push(child);
+            }
+        });
+        return (_jsxs("div", __assign({ "data-slot": "alert-dialog-header", className: cn("flex flex-row gap-3 items-start text-left", className) }, props, { children: [iconWithClass_1, _jsx("div", { children: otherChildren_1 })] })));
+    }
+    return (_jsx("div", __assign({ "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className) }, props, { children: children })));
+}
+export function AlertTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("h2", __assign({ "data-slot": "alert-dialog-title", className: cn("text-lg font-semibold", className) }, props)));
+}
+export function AlertDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("p", __assign({ "data-slot": "alert-dialog-description", className: cn("text-black text-sm", className) }, props)));
+}
+export function AlertFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", __assign({ "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
+}
+// Also create a simple button component that matches the style of AlertDialogAction
+export var AlertAction = function (_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var contextColor = useAlertContext().color;
+    var color = colorProp || contextColor || undefined;
+    return (_jsx(Button, __assign({ variant: "link", color: color, "data-slot": "alert-dialog-action", className: cn("h-auto p-0", className) }, props)));
+};
+// And a cancel button that matches AlertDialogCancel
+export var AlertCancel = function (_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var contextColor = useAlertContext().color;
+    var color = colorProp || contextColor || undefined;
+    return (_jsx(Button, __assign({ variant: "link", color: color, "data-slot": "alert-dialog-cancel", className: cn("h-auto p-0", className) }, props)));
+};

package/dist/src/components/Alerts/Alert/alert.stories.d.ts

@@ -0,0 +1,30 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const Example: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AllColors: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllSizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComparisonWithAlertDialog: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoButtons: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithShadow: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomizeAlert: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/src/components/Alerts/Alert/alert.stories.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, colorOptions, sizeOptions, shadowOptions, variantOptions, getIconForColor, getContentForColor, } from "../AlertDialog/index";
+import LUIcon from "../../Icons/LUIcon";
+import { Button } from "../../Button/Button/Button";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+export default {
+    title: "Components/Alert/Alert",
+    component: Alert,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "A non-modal alert component that uses the same styling as AlertDialog but renders directly in the page flow without requiring a dialog context.",
+            },
+        },
+    },
+};
+// Template for stories with args
+var Template = function (args) { return (_jsxs(Alert, { size: args.size, shadow: args.shadow, color: args.color, variant: args.variant, children: [_jsxs(AlertHeader, { children: [args.Icon && _jsx(LUIcon, { icon: args.Icon, variant: "padded" }), _jsx(AlertTitle, { children: args.title }), _jsx(AlertDescription, { children: args.description })] }), _jsxs(AlertFooter, { children: [args.showCancel && (_jsx(AlertCancel, { onClick: function () { return alert("Cancel clicked"); }, className: "text-blue-600 hover:text-blue-700 hover:underline", children: args.cancelText })), args.showAction && (_jsx(AlertAction, { onClick: function () { return alert("Action clicked"); }, className: "text-blue-600 hover:text-blue-700 hover:underline", children: args.actionText }))] })] })); };
+// Default story with all controls
+export var Default = Template.bind({});
+Default.args = {
+    size: "md",
+    shadow: "none",
+    color: "blue",
+    variant: "outline",
+    Icon: "info",
+    title: "Update Available",
+    description: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements.",
+    cancelText: "Later",
+    actionText: "Update Now",
+    showCancel: true,
+    showAction: true,
+};
+Default.argTypes = {
+    size: {
+        control: { type: "select" },
+        options: sizeOptions,
+        description: "Size variant for Alert",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    shadow: {
+        control: { type: "select" },
+        options: shadowOptions,
+        description: "Shadow variant for Alert",
+        table: {
+            defaultValue: { summary: "none" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    color: {
+        control: { type: "select" },
+        options: colorOptions,
+        description: "Color theme for Alert",
+        table: {
+            defaultValue: { summary: "blue" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    variant: {
+        control: { type: "select" },
+        options: variantOptions,
+        description: "Variant for Alert (outline | fill)",
+        table: {
+            defaultValue: { summary: "outline" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    Icon: {
+        control: { type: "text" },
+        description: "Icon to display in AlertHeader (LUIcon name)",
+        table: {
+            type: { summary: "string" },
+            category: "AlertHeader",
+        },
+    },
+    title: {
+        control: { type: "text" },
+        description: "Title text for AlertTitle",
+        table: {
+            type: { summary: "string" },
+            category: "AlertTitle",
+        },
+    },
+    description: {
+        control: { type: "text" },
+        description: "Description text for AlertDescription",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDescription",
+        },
+    },
+    cancelText: {
+        control: { type: "text" },
+        description: "Text for AlertCancel button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertCancel",
+        },
+    },
+    actionText: {
+        control: { type: "text" },
+        description: "Text for AlertAction button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertAction",
+        },
+    },
+    showCancel: {
+        control: { type: "boolean" },
+        description: "Whether to show the cancel button",
+        table: {
+            type: { summary: "boolean" },
+            category: "Alert",
+        },
+    },
+    showAction: {
+        control: { type: "boolean" },
+        description: "Whether to show the action button",
+        table: {
+            type: { summary: "boolean" },
+            category: "Alert",
+        },
+    },
+};
+// Simple Example showing the exact code structure
+export var Example = function () { return (_jsxs(Alert, { color: "blue", size: "md", shadow: "none", children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "padded" }), _jsx(AlertTitle, { children: "Update Available" }), _jsx(AlertDescription, { children: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements." })] }), _jsxs(AlertFooter, { children: [_jsx(AlertCancel, { className: "text-blue-600 hover:text-blue-700 hover:underline", onClick: function () { return console.log("Later clicked"); }, children: "Later" }), _jsx(AlertAction, { className: "text-blue-600 hover:text-blue-700 hover:underline", onClick: function () { return console.log("Update Now clicked"); }, children: "Update Now" })] })] })); };
+Example.parameters = {
+    docs: {
+        description: {
+            story: "This example shows the exact code structure you should use to implement the Alert component.",
+        },
+    },
+};
+// All Colors Example
+export var AllColors = function () { return (_jsx("div", { className: "flex flex-col gap-4", children: colorOptions.map(function (color) {
+        var content = getContentForColor(color);
+        return (_jsxs(Alert, { color: color, children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: getIconForColor(color), variant: "padded" }), _jsx(AlertTitle, { children: content.title }), _jsx(AlertDescription, { children: content.description })] }), _jsxs(AlertFooter, { children: [_jsx(AlertCancel, { className: "text-".concat(color, "-600 hover:text-").concat(color, "-700 hover:underline"), children: "Cancel" }), _jsx(AlertAction, { className: "text-".concat(color, "-600 hover:text-").concat(color, "-700 hover:underline"), children: content.button })] })] }, color));
+    }) })); };
+// All Sizes Example
+export var AllSizes = function () { return (_jsx("div", { className: "flex flex-col gap-4", children: sizeOptions.map(function (size) { return (_jsxs(Alert, { size: size, color: "blue", children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "info", color: "blue", variant: "padded" }), _jsxs(AlertTitle, { children: ["Size: ", size.toUpperCase()] }), _jsxs(AlertDescription, { children: ["This is an example of the Alert component with size ", size, "."] })] }), _jsxs(AlertFooter, { children: [_jsx(AlertCancel, { className: "text-blue-600 hover:text-blue-700 hover:underline", children: "Cancel" }), _jsx(AlertAction, { className: "text-blue-600 hover:text-blue-700 hover:underline", children: "Action" })] })] }, size)); }) })); };
+// Variants Example
+export var Variants = function () { return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Alert, { variant: "outline", color: "blue", children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "padded" }), _jsx(AlertTitle, { children: "Outline Variant" }), _jsx(AlertDescription, { children: "This is an example of the Alert component with the outline variant." })] }), _jsxs(AlertFooter, { children: [_jsx(AlertCancel, { className: "text-blue-600 hover:text-blue-700 hover:underline", children: "Cancel" }), _jsx(AlertAction, { className: "text-blue-600 hover:text-blue-700 hover:underline", children: "Action" })] })] }), _jsxs(Alert, { variant: "fill", color: "blue", children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "padded" }), _jsx(AlertTitle, { children: "Fill Variant" }), _jsx(AlertDescription, { children: "This is an example of the Alert component with the fill variant." })] }), _jsxs(AlertFooter, { children: [_jsx(AlertCancel, { className: "text-blue-600 hover:text-blue-700 hover:underline", children: "Cancel" }), _jsx(AlertAction, { className: "text-blue-600 hover:text-blue-700 hover:underline", children: "Action" })] })] })] })); };
+// Comparison with regular AlertDialog
+export var ComparisonWithAlertDialog = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Alert (Non-Modal)" }), _jsx("p", { className: "text-sm text-gray-600 mb-4", children: "This version renders directly in the page flow and does not create a modal overlay." }), _jsxs(Alert, { color: "green", children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "check", variant: "padded" }), _jsx(AlertTitle, { children: "Success!" }), _jsx(AlertDescription, { children: "Your changes have been saved successfully." })] }), _jsx(AlertFooter, { children: _jsx(AlertAction, { className: "text-green-600 hover:text-green-700 hover:underline", children: "Close" }) })] })] }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "AlertDialog Button (Modal - Click to Open)" }), _jsx("p", { className: "text-sm text-gray-600 mb-4", children: "This is the regular AlertDialog component that creates a modal overlay." }), _jsx(Button, { color: "light-green", onClick: function () { }, children: "Open Modal AlertDialog (See in Stories)" })] })] })); };
+// No Buttons Example
+export var NoButtons = function () { return (_jsx(Alert, { color: "yellow", children: _jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "padded" }), _jsx(AlertTitle, { children: "Maintenance Notice" }), _jsx(AlertDescription, { children: "System maintenance is scheduled for tonight at 10:00 PM. The system will be unavailable for approximately 30 minutes." })] }) })); };
+// With Shadow Example
+export var WithShadow = function () { return (_jsxs(Alert, { color: "blue", shadow: "lg", children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "padded" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "This alert has a large shadow applied to it." })] }), _jsx(AlertFooter, { children: _jsx(AlertAction, { className: "text-blue-600 hover:text-blue-700 hover:underline", children: "Got it" }) })] })); };
+// CustomizeAlert Example - showing how to customize with Typography components
+export var CustomizeAlert = function () { return (_jsxs(Alert, { color: "red", size: "md", variant: "fill", children: [_jsxs(AlertHeader, { children: [_jsx(LUIcon, { icon: "info", size: "9xl", color: "light-red", variant: "padded" }), _jsx(AlertTitle, { children: _jsx(Heading, { variant: "h1-700", children: "Customize Alert Title" }) }), _jsx(AlertDescription, { children: _jsx(Body, { variant: "body-xs", children: "This Alert uses a customized icon size, custom typography variants, and different button colors to demonstrate full customization capabilities." }) })] }), _jsxs(AlertFooter, { children: [_jsx(AlertCancel, { variant: "fill", color: "indigo", children: "Close" }), _jsx(AlertAction, { variant: "outline", color: "light-green", children: "OK" })] })] })); };
+CustomizeAlert.parameters = {
+    docs: {
+        description: {
+            story: "This example demonstrates how to customize the Alert component with different typography variants, icon sizes, colors, and button styles. The alert uses a fill variant with red color, custom typography components, a 9xl icon size, and mixed button variants with different colors.",
+        },
+    },
+};

package/dist/src/components/Alerts/AlertDialog/alert-dialog.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "../../Button/Button/Button";
+export declare const alertDialogVariants: {
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    shadow: {
+        none: string;
+        lg: string;
+    };
+    color: {
+        blue: string;
+        red: string;
+        indigo: string;
+        yellow: string;
+        green: string;
+        gray: string;
+    };
+    variant: {
+        outline: string;
+        fill: string;
+    };
+};
+declare const alertDialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shadow?: "lg" | "none" | null | undefined;
+    color?: "blue" | "green" | "yellow" | "red" | "indigo" | "gray" | null | undefined;
+    variant?: "fill" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, size, shadow, color, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & VariantProps<typeof alertDialogContentVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, color: colorProp, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, color: colorProp, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };