linkedunion-design-kit 1.9.1 → 1.9.2

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

@@ -0,0 +1,69 @@
+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 BasicExample: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AllSizes: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            source: {
+                code: null;
+            };
+        };
+    };
+};
+export declare const IconPaddedAndDefault: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllShadows: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            source: {
+                code: null;
+            };
+        };
+    };
+};
+export declare const AllColors: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            source: {
+                code: null;
+            };
+        };
+    };
+};
+export declare const WithoutIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const SingleActionButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const RealWorldUseCases: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            source: {
+                code: null;
+            };
+        };
+    };
+};
+export declare const ButtonVariants: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const CustomizeAlert: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Alerts/AlertDialog/alert-dialog.stories.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../../Button/Button/Button";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, colorOptions, sizeOptions, shadowOptions, variantOptions, getButtonColor, getIconForColor, getContentForColor, sizeExamples, shadowExamples, realWorldExamples, } from "./index";
+import LUIcon from "../../Icons/LUIcon";
+export default {
+    title: "Components/Alert/AlertDialog",
+    component: AlertDialog,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "A modal dialog that interrupts the user with important content and expects a response. Built with Radix UI primitives.",
+            },
+        },
+    },
+};
+// Component with eye icon to show code
+var ColorVariantWithEyeIcon = function (_a) {
+    var color = _a.color, content = _a.content;
+    var _b = useState(false), showCode = _b[0], setShowCode = _b[1];
+    var triggerText = color.charAt(0).toUpperCase() + color.slice(1).replace("-", " ");
+    var alertDialogCode = "<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"outline\" color=\"".concat(getButtonColor(color), "\">\n      ").concat(triggerText, "\n    </Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent color=\"").concat(color, "\">\n    <AlertDialogHeader>\n      <LUIcon icon=\"").concat(getIconForColor(color), "\" variant=\"padded\" />\n      <AlertDialogTitle>").concat(content.title, "</AlertDialogTitle>\n      <AlertDialogDescription>\n        ").concat(content.description, "\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\n      <AlertDialogAction>").concat(content.button, "</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>");
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(AlertDialogExample, { triggerText: triggerText, triggerColor: getButtonColor(color), color: color, icon: getIconForColor(color), title: content.title, description: content.description, cancelText: "Cancel", actionText: content.button, className: "w-full" }) }), _jsx(Button, { onClick: function () { return setShowCode(!showCode); }, variant: "ghost", size: "sm", title: showCode ? "Hide Code" : "Show Code", className: "text-gray-600 hover:text-gray-800 hover:bg-gray-100", children: _jsx(LUIcon, { icon: showCode ? "eye-slash" : "eye" }) })] }), showCode && (_jsxs("div", { className: "p-3 bg-gray-50 border rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs(Body, { variant: "body-sm", className: "font-semibold text-gray-700", children: [triggerText, " - AlertDialog Code"] }), _jsx(Button, { onClick: function () { return navigator.clipboard.writeText(alertDialogCode); }, variant: "ghost", size: "sm", title: "Copy code to clipboard", className: "text-xs text-blue-700 hover:bg-blue-200 bg-blue-100", children: "Copy Code" })] }), _jsx("pre", { className: "text-xs bg-white p-3 rounded border overflow-x-auto", children: _jsx("code", { className: "text-gray-800", children: alertDialogCode }) })] }))] }));
+};
+// Component with eye icon to show size code
+var SizeVariantWithEyeIcon = function (_a) {
+    var sizeExample = _a.sizeExample;
+    var _b = useState(false), showCode = _b[0], setShowCode = _b[1];
+    var alertDialogCode = "<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"outline\" color=\"blue\">\n      ".concat(sizeExample.triggerText, "\n    </Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent size=\"").concat(sizeExample.size, "\" color=\"blue\">\n    <AlertDialogHeader>\n      <LUIcon icon=\"").concat(sizeExample.icon, "\" variant=\"padded\" />\n      <AlertDialogTitle>").concat(sizeExample.title, "</AlertDialogTitle>\n      <AlertDialogDescription>\n        ").concat(sizeExample.description, "\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>").concat(sizeExample.cancelText, "</AlertDialogCancel>\n      <AlertDialogAction>").concat(sizeExample.actionText, "</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>");
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(AlertDialogExample, { triggerText: sizeExample.triggerText, triggerColor: "blue", size: sizeExample.size, color: "blue", icon: sizeExample.icon, title: sizeExample.title, description: sizeExample.description, cancelText: sizeExample.cancelText, actionText: sizeExample.actionText }) }), _jsx(Button, { onClick: function () { return setShowCode(!showCode); }, variant: "ghost", size: "sm", title: showCode ? "Hide Code" : "Show Code", className: "text-gray-600 hover:text-gray-800 hover:bg-gray-100", children: _jsx(LUIcon, { icon: showCode ? "eye-slash" : "eye" }) })] }), showCode && (_jsxs("div", { className: "p-3 bg-gray-50 border rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs(Body, { variant: "body-sm", className: "font-semibold text-gray-700", children: [sizeExample.size.toUpperCase(), " Size - AlertDialog Code"] }), _jsx(Button, { onClick: function () { return navigator.clipboard.writeText(alertDialogCode); }, variant: "ghost", size: "sm", title: "Copy code to clipboard", className: "text-xs text-blue-700 hover:bg-blue-200 bg-blue-100", children: "Copy Code" })] }), _jsx("pre", { className: "text-xs bg-white p-3 rounded border overflow-x-auto", children: _jsx("code", { className: "text-gray-800", children: alertDialogCode }) })] }))] }));
+};
+// Component with eye icon to show shadow code
+var ShadowVariantWithEyeIcon = function (_a) {
+    var shadowExample = _a.shadowExample;
+    var _b = useState(false), showCode = _b[0], setShowCode = _b[1];
+    var alertDialogCode = "<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"outline\" color=\"blue\">\n      ".concat(shadowExample.triggerText, "\n    </Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent shadow=\"").concat(shadowExample.shadow, "\" color=\"blue\">\n    <AlertDialogHeader>\n      <LUIcon icon=\"").concat(shadowExample.icon, "\" variant=\"padded\" />\n      <AlertDialogTitle>").concat(shadowExample.title, "</AlertDialogTitle>\n      <AlertDialogDescription>\n        ").concat(shadowExample.description, "\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>").concat(shadowExample.cancelText, "</AlertDialogCancel>\n      <AlertDialogAction>").concat(shadowExample.actionText, "</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>");
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(AlertDialogExample, { triggerText: shadowExample.triggerText, triggerColor: "blue", shadow: shadowExample.shadow, color: "blue", icon: shadowExample.icon, title: shadowExample.title, description: shadowExample.description, cancelText: shadowExample.cancelText, actionText: shadowExample.actionText }) }), _jsx(Button, { onClick: function () { return setShowCode(!showCode); }, variant: "ghost", size: "sm", title: showCode ? "Hide Code" : "Show Code", className: "text-gray-600 hover:text-gray-800 hover:bg-gray-100", children: _jsx(LUIcon, { icon: showCode ? "eye-slash" : "eye" }) })] }), showCode && (_jsxs("div", { className: "p-3 bg-gray-50 border rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs(Body, { variant: "body-sm", className: "font-semibold text-gray-700", children: [shadowExample.shadow === "none" ? "No Shadow" : "Large Shadow", " - AlertDialog Code"] }), _jsx(Button, { onClick: function () { return navigator.clipboard.writeText(alertDialogCode); }, variant: "ghost", size: "sm", title: "Copy code to clipboard", className: "text-xs text-blue-700 hover:bg-blue-200 bg-blue-100", children: "Copy Code" })] }), _jsx("pre", { className: "text-xs bg-white p-3 rounded border overflow-x-auto", children: _jsx("code", { className: "text-gray-800", children: alertDialogCode }) })] }))] }));
+};
+// Reusable AlertDialog component
+var AlertDialogExample = function (_a) {
+    var triggerText = _a.triggerText, triggerColor = _a.triggerColor, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.shadow, shadow = _c === void 0 ? "none" : _c, color = _a.color, variant = _a.variant, icon = _a.icon, title = _a.title, description = _a.description, cancelText = _a.cancelText, actionText = _a.actionText, _d = _a.showCancel, showCancel = _d === void 0 ? true : _d, _e = _a.showAction, showAction = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f;
+    return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { size: size, variant: "outline", color: triggerColor ? triggerColor : getButtonColor(color), className: className, children: triggerText }) }), _jsxs(AlertDialogContent, { size: size, shadow: shadow, color: color, variant: variant, children: [_jsxs(AlertDialogHeader, { children: [icon && _jsx(LUIcon, { icon: icon, variant: "padded" }), _jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), (showCancel || showAction) && (_jsxs(AlertDialogFooter, { children: [showCancel && (_jsx(AlertDialogCancel, { children: cancelText || "Cancel" })), showAction && (_jsx(AlertDialogAction, { children: actionText || "OK" }))] }))] })] }));
+};
+// Template for stories with args - Using actual AlertDialog components
+var Template = function (args) { return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Show Alert Dialog" }) }), _jsxs(AlertDialogContent, { size: args.size, shadow: args.shadow, color: args.color, variant: args.variant, children: [_jsxs(AlertDialogHeader, { children: [args.Icon && _jsx(LUIcon, { icon: args.Icon, variant: "padded" }), _jsx(AlertDialogTitle, { children: args.title }), _jsx(AlertDialogDescription, { children: args.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: args.cancelText }), _jsx(AlertDialogAction, { 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",
+};
+Default.argTypes = {
+    size: {
+        control: { type: "select" },
+        options: sizeOptions,
+        description: "Size variant for AlertDialogContent",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    shadow: {
+        control: { type: "select" },
+        options: shadowOptions,
+        description: "Shadow variant for AlertDialogContent",
+        table: {
+            defaultValue: { summary: "none" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    color: {
+        control: { type: "select" },
+        options: colorOptions,
+        description: "Color theme for AlertDialogContent",
+        table: {
+            defaultValue: { summary: "blue" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    variant: {
+        control: { type: "select" },
+        options: variantOptions,
+        description: "Variant for AlertDialogContent (outline | fill)",
+        table: {
+            defaultValue: { summary: "outline" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    Icon: {
+        control: { type: "text" },
+        description: "Icon to display in AlertDialogHeader (LUIcon name)",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogHeader",
+        },
+    },
+    title: {
+        control: { type: "text" },
+        description: "Title text for AlertDialogTitle",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogTitle",
+        },
+    },
+    description: {
+        control: { type: "text" },
+        description: "Description text for AlertDialogDescription",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogDescription",
+        },
+    },
+    cancelText: {
+        control: { type: "text" },
+        description: "Text for AlertDialogCancel button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogCancel",
+        },
+    },
+    actionText: {
+        control: { type: "text" },
+        description: "Text for AlertDialogAction button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogAction",
+        },
+    },
+};
+// Simple Example showing the exact code structure
+export var Example = function () { return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Show Alert Dialog" }) }), _jsxs(AlertDialogContent, { color: "blue", size: "md", shadow: "none", children: [_jsxs(AlertDialogHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "padded" }), _jsx(AlertDialogTitle, { children: "Update Available" }), _jsx(AlertDialogDescription, { children: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Later" }), _jsx(AlertDialogAction, { children: "Update Now" })] })] })] })); };
+Example.parameters = {
+    docs: {
+        description: {
+            story: "This example shows the exact code structure you should use to implement the AlertDialog component.",
+        },
+    },
+};
+// Basic Example - Shows the actual component code
+export var BasicExample = function () { return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Show Basic Alert" }) }), _jsxs(AlertDialogContent, { color: "blue", size: "md", shadow: "none", children: [_jsxs(AlertDialogHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "padded" }), _jsx(AlertDialogTitle, { children: "Update Available" }), _jsx(AlertDialogDescription, { children: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Later" }), _jsx(AlertDialogAction, { children: "Update Now" })] })] })] })); };
+BasicExample.parameters = {
+    docs: {
+        description: {
+            story: "Basic AlertDialog example showing the actual component structure.",
+        },
+    },
+};
+export var AllSizes = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "All Size Variants" }), _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Click the eye icon (\uD83D\uDC41\uFE0F) to view the code for each size variant" }), _jsx("div", { className: "space-y-6", children: sizeExamples.map(function (example, index) { return (_jsx(SizeVariantWithEyeIcon, { sizeExample: example }, index)); }) })] })); };
+AllSizes.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Story showing both padded and default icon variants side-by-side
+export var IconPaddedAndDefault = function () { return (_jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:items-start md:gap-4", children: [_jsx("div", { className: "flex-1", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Padded Icon" }) }), _jsxs(AlertDialogContent, { color: "blue", size: "md", children: [_jsxs(AlertDialogHeader, { children: [_jsx(LUIcon, { icon: "info", color: "light-blue", variant: "padded" }), _jsx(AlertDialogTitle, { children: "Padded Icon" }), _jsx(AlertDialogDescription, { children: "This AlertDialog uses a padded icon (icon with background). The icon size remains fixed." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Close" }), _jsx(AlertDialogAction, { children: "OK" })] })] })] }) }), _jsx("div", { className: "flex-1", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Default Icon" }) }), _jsxs(AlertDialogContent, { color: "blue", size: "md", children: [_jsxs(AlertDialogHeader, { children: [_jsx(LUIcon, { icon: "info", variant: "default" }), _jsx(AlertDialogTitle, { children: "Default Icon" }), _jsx(AlertDialogDescription, { children: "This AlertDialog uses the default (non-padded) icon." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Close" }), _jsx(AlertDialogAction, { children: "OK" })] })] })] }) })] })); };
+export var AllShadows = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "All Shadow Variants" }), _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Click the eye icon (\uD83D\uDC41\uFE0F) to view the code for each shadow variant" }), _jsx("div", { className: "space-y-6", children: shadowExamples.map(function (example, index) { return (_jsx(ShadowVariantWithEyeIcon, { shadowExample: example }, index)); }) })] })); };
+AllShadows.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+export var AllColors = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "All Color Variants" }), _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Click the eye icon (\uD83D\uDC41\uFE0F) to view the code for each color variant" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: colorOptions.map(function (color) {
+                var content = getContentForColor(color);
+                return (_jsx(ColorVariantWithEyeIcon, { color: color, content: content }, color));
+            }) })] })); };
+AllColors.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Essential Layout Variants
+export var WithoutIcon = function () { return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Show Alert Dialog" }) }), _jsxs(AlertDialogContent, { color: "blue", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Save Draft" }), _jsx(AlertDialogDescription, { children: "You have unsaved changes in your document. Would you like to save them as a draft before leaving?" })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Discard Changes" }), _jsx(AlertDialogAction, { children: "Save Draft" })] })] })] })); };
+export var SingleActionButton = function () { return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "green", children: "Show Success Message" }) }), _jsxs(AlertDialogContent, { color: "green", children: [_jsxs(AlertDialogHeader, { children: [_jsx(LUIcon, { icon: "check", variant: "padded" }), _jsx(AlertDialogTitle, { children: "Success!" }), _jsx(AlertDialogDescription, { children: "Your message has been sent successfully." })] }), _jsx(AlertDialogFooter, { children: _jsx(AlertDialogAction, { children: "Close" }) })] })] })); };
+export var RealWorldUseCases = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "Real-world Use Cases" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: realWorldExamples.map(function (example, index) { return (_jsx(AlertDialogExample, { triggerText: example.triggerText, triggerColor: example.triggerColor, size: example.size, shadow: example.shadow, color: example.color, icon: example.icon, title: example.title, description: example.description, cancelText: example.cancelText, actionText: example.actionText, className: "w-full" }, index)); }) })] })); };
+RealWorldUseCases.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Button Configuration Variants - Comprehensive Examples
+var ButtonVariantsTemplate = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "Button Configuration Variants" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Heading, { variant: "h4", className: "font-medium text-gray-700", children: "Single Button (Action Only)" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(AlertDialogExample, { triggerText: "Success Message", triggerColor: "light-green", size: "md", color: "green", icon: "check", title: "Message Sent", description: "Your message has been delivered successfully to all recipients.", showCancel: false, actionText: "Close" }), _jsx(AlertDialogExample, { triggerText: "Error Alert", triggerColor: "light-red", size: "md", shadow: "lg", color: "red", icon: "circle-exclamation", title: "Connection Failed", description: "Unable to connect to the server. Please check your internet connection and try again.", showCancel: false, actionText: "Retry" }), _jsx(AlertDialogExample, { triggerText: "Installation Complete", triggerColor: "blue", size: "md", color: "green", icon: "check", title: "Installation Complete", description: "The application has been successfully installed on your device. You can now start using all the features.", showCancel: false, actionText: "Start Using App" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Heading, { variant: "h4", className: "font-medium text-gray-700", children: "Both Buttons (Cancel + Action)" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(AlertDialogExample, { triggerText: "Confirm Action", triggerColor: "blue", size: "md", color: "blue", icon: "info", title: "Confirm Your Action", description: "Do you want to proceed with this action? This will update your settings and preferences.", cancelText: "No, Cancel", actionText: "Yes, Proceed" }), _jsx(AlertDialogExample, { triggerText: "Delete Confirmation", triggerColor: "light-red", size: "md", color: "red", icon: "circle-exclamation", title: "Confirm Deletion", description: "Are you sure you want to delete this item? This action cannot be undone.", cancelText: "Cancel", actionText: "Delete" }), _jsx(AlertDialogExample, { triggerText: "Save Changes", triggerColor: "blue", size: "md", color: "blue", title: "Save Draft", description: "You have unsaved changes in your document. Would you like to save them as a draft before leaving?", cancelText: "Discard Changes", actionText: "Save Draft" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Heading, { variant: "h4", className: "font-medium text-gray-700", children: "No Buttons (Information Only)" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(AlertDialogExample, { triggerText: "Loading State", triggerColor: "blue", size: "sm", color: "blue", icon: "clock", title: "Syncing...", description: "Synchronizing your data with the cloud. Please wait.", showCancel: false, showAction: false }), _jsx(AlertDialogExample, { triggerText: "System Info", triggerColor: "yellow", size: "md", color: "yellow", icon: "info", title: "System Information", description: "Server maintenance is currently in progress. Some features may be temporarily unavailable. We apologize for any inconvenience.", showCancel: false, showAction: false }), _jsx(AlertDialogExample, { triggerText: "Processing", triggerColor: "yellow", size: "md", color: "yellow", icon: "clock", title: "Processing Your Request", description: "Please wait while we process your request. This may take a few moments. Do not close this window.", showCancel: false, showAction: false })] })] })] })); };
+export var ButtonVariants = ButtonVariantsTemplate.bind({});
+ButtonVariants.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Story showing both padded and default icon variants side-by-side
+export var CustomizeAlert = function () { return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Customize Alert" }) }), _jsxs(AlertDialogContent, { color: "red", size: "md", children: [_jsxs(AlertDialogHeader, { children: [_jsx(LUIcon, { icon: "info", size: "9xl", color: "light-red", variant: "padded" }), _jsx(AlertDialogTitle, { children: _jsx(Heading, { variant: "h1-700", children: " Customize Alert Title" }) }), _jsx(AlertDialogDescription, { children: _jsx(Body, { variant: "body-xs", children: "This AlertDialog uses a Customize Alert Icon." }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { variant: "fill", color: "indigo", children: "Close" }), _jsx(AlertDialogAction, { variant: "outline", color: "light-green", children: "OK" })] })] })] })); };

package/dist/src/components/Alerts/AlertDialog/index.d.ts

@@ -0,0 +1,44 @@
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, alertDialogVariants, } from "./alert-dialog";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "../Alert/alert";
+import { alertDialogVariants } from "./alert-dialog";
+export declare const colorOptions: Array<keyof typeof alertDialogVariants.color>;
+export declare const sizeOptions: Array<keyof typeof alertDialogVariants.size>;
+export declare const shadowOptions: Array<keyof typeof alertDialogVariants.shadow>;
+export declare const variantOptions: Array<keyof typeof alertDialogVariants.variant>;
+export declare const getButtonColor: (color: string) => string;
+export declare const getIconForColor: (color: string) => "info" | "check" | "circle-exclamation" | "star";
+export declare const getContentForColor: (color: string) => {
+    title: string;
+    description: string;
+    button: string;
+};
+export declare const sizeExamples: Array<{
+    size: keyof typeof alertDialogVariants.size;
+    triggerText: string;
+    title: string;
+    description: string;
+    icon: string;
+    cancelText: string;
+    actionText: string;
+}>;
+export declare const shadowExamples: Array<{
+    shadow: keyof typeof alertDialogVariants.shadow;
+    triggerText: string;
+    title: string;
+    description: string;
+    icon: string;
+    cancelText: string;
+    actionText: string;
+}>;
+export declare const realWorldExamples: Array<{
+    triggerText: string;
+    triggerColor: string;
+    size?: keyof typeof alertDialogVariants.size;
+    shadow?: keyof typeof alertDialogVariants.shadow;
+    color: keyof typeof alertDialogVariants.color;
+    icon: string;
+    title: string;
+    description: string;
+    cancelText: string;
+    actionText: string;
+}>;

package/dist/src/components/Alerts/AlertDialog/index.js

@@ -0,0 +1,189 @@
+// Export the main AlertDialog components
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, alertDialogVariants, } from "./alert-dialog";
+// Export the Alert components (non-modal version)
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "../Alert/alert";
+// Utility imports
+import { alertDialogVariants } from "./alert-dialog";
+// Extract options dynamically from the component with proper typing
+export var colorOptions = Object.keys(alertDialogVariants.color);
+export var sizeOptions = Object.keys(alertDialogVariants.size);
+export var shadowOptions = Object.keys(alertDialogVariants.shadow);
+// Extract variant options dynamically from the component with proper typing
+export var variantOptions = Object.keys(alertDialogVariants.variant);
+// Utility functions
+export var getButtonColor = function (color) {
+    if (color.includes("-dark")) {
+        var baseColor = color.replace("-dark", "");
+        return "light-".concat(baseColor);
+    }
+    return color;
+};
+export var getIconForColor = function (color) {
+    if (color.includes("red"))
+        return "circle-exclamation";
+    if (color.includes("green"))
+        return "check";
+    if (color.includes("yellow"))
+        return "circle-exclamation";
+    if (color.includes("indigo"))
+        return "star";
+    if (color.includes("gray"))
+        return "info";
+    return "info";
+};
+export var getContentForColor = function (color) {
+    if (color.includes("red"))
+        return {
+            title: "Delete Project",
+            description: "This will permanently delete 'Mobile App Redesign' project and all associated files. This action cannot be undone.",
+            button: "Delete Project",
+        };
+    if (color.includes("green"))
+        return {
+            title: "Deployment Successful",
+            description: "Your application has been successfully deployed to production. It's now live and accessible to users.",
+            button: "View Live Site",
+        };
+    if (color.includes("yellow"))
+        return {
+            title: "Storage Almost Full",
+            description: "Your account storage is 90% full. Consider upgrading your plan or removing unused files to avoid service interruption.",
+            button: "Upgrade Plan",
+        };
+    if (color.includes("indigo"))
+        return {
+            title: "Unlock Premium Features",
+            description: "Upgrade to Pro to access advanced analytics, unlimited projects, and priority support.",
+            button: "Upgrade to Pro",
+        };
+    if (color.includes("gray"))
+        return {
+            title: "Maintenance Scheduled",
+            description: "System maintenance is scheduled for tonight at 2:00 AM. Services will be unavailable for approximately 30 minutes.",
+            button: "Set Reminder",
+        };
+    return {
+        title: "Sync Data",
+        description: "Your local changes will be synchronized with the cloud. This may take a few minutes depending on your connection.",
+        button: "Start Sync",
+    };
+};
+// Size examples data
+export var sizeExamples = [
+    {
+        size: "sm",
+        triggerText: "Small - Quick Action",
+        title: "Email Sent",
+        description: "Your message has been sent successfully.",
+        icon: "check",
+        cancelText: "Close",
+        actionText: "Send Another",
+    },
+    {
+        size: "md",
+        triggerText: "Medium - Standard Dialog",
+        title: "Invite Team Members",
+        description: "You're about to invite 5 new team members to your workspace. They will receive email invitations and gain access to all shared projects.",
+        icon: "users",
+        cancelText: "Cancel",
+        actionText: "Send Invitations",
+    },
+    {
+        size: "lg",
+        triggerText: "Large - Detailed Info",
+        title: "Privacy Settings Update",
+        description: "We've updated our privacy policy and terms of service to better protect your data and provide more transparency about how we collect and use your information. These changes will take effect on January 1st, 2025. Please review the updated policy to understand how these changes may affect you.",
+        icon: "lock",
+        cancelText: "Review Later",
+        actionText: "Read Policy",
+    },
+];
+// Shadow examples data
+export var shadowExamples = [
+    {
+        shadow: "none",
+        triggerText: "Flat Design - No Shadow",
+        title: "Enable Notifications",
+        description: "Stay updated with real-time notifications about your projects, messages, and important updates.",
+        icon: "bell",
+        cancelText: "Not Now",
+        actionText: "Enable",
+    },
+    {
+        shadow: "lg",
+        triggerText: "With Shadow - Elevated",
+        title: "Payment Method Added",
+        description: "Your credit card ending in 4242 has been successfully added to your account. You can now make purchases and upgrade your subscription.",
+        icon: "credit-card",
+        cancelText: "Close",
+        actionText: "View Billing",
+    },
+];
+// Real-world examples data
+export var realWorldExamples = [
+    {
+        triggerText: "Delete Account",
+        triggerColor: "light-red",
+        size: "md",
+        shadow: "lg",
+        color: "red",
+        icon: "trash",
+        title: "Delete Account",
+        description: "This will permanently delete your account, including all projects, files, and settings. Your username will become available for others to use. This action cannot be undone.",
+        cancelText: "Keep Account",
+        actionText: "Delete Forever",
+    },
+    {
+        triggerText: "Payment Success",
+        triggerColor: "light-green",
+        color: "green",
+        icon: "check",
+        title: "Payment Successful",
+        description: "Your payment of $29.99 for Pro Plan has been processed successfully. Your account has been upgraded and new features are now available.",
+        cancelText: "Close",
+        actionText: "Explore Features",
+    },
+    {
+        triggerText: "Low Battery Warning",
+        triggerColor: "yellow",
+        size: "sm",
+        color: "yellow",
+        icon: "circle-exclamation",
+        title: "Low Battery",
+        description: "Your device battery is running low. Please connect your charger to continue using the application.",
+        cancelText: "Dismiss",
+        actionText: "Power Settings",
+    },
+    {
+        triggerText: "File Upload Success",
+        triggerColor: "blue",
+        color: "blue",
+        icon: "upload",
+        title: "File Uploaded Successfully",
+        description: "presentation-final-v2.pptx (4.2 MB) has been uploaded to your Documents folder and is now syncing across all your devices.",
+        cancelText: "Close",
+        actionText: "View File",
+    },
+    {
+        triggerText: "Subscription Expiring",
+        triggerColor: "light-indigo",
+        size: "lg",
+        shadow: "lg",
+        color: "indigo",
+        icon: "clock",
+        title: "Subscription Expiring Soon",
+        description: "Your Pro subscription will expire in 3 days on August 21, 2025. Renew now to continue enjoying unlimited projects, advanced features, and priority support without interruption.",
+        cancelText: "Remind Later",
+        actionText: "Renew Now",
+    },
+    {
+        triggerText: "Connection Lost",
+        triggerColor: "gray",
+        color: "gray",
+        icon: "wifi",
+        title: "Connection Lost",
+        description: "Unable to connect to the server. Please check your internet connection and try again. Your work has been saved locally.",
+        cancelText: "Work Offline",
+        actionText: "Retry Connection",
+    },
+];

package/dist/src/components/Avatar/Avatar/Avatar.d.ts

@@ -1,3 +1,12 @@
-import { AvatarProps } from "./type";
-declare const Avatar: ({ image, icon, shape, size, className, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
-export default Avatar;
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { avatarSize, avatarShape } from ".";
+import { statusIndicator } from "../StatusIndicator";
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    size?: keyof typeof avatarSize;
+    shape?: keyof typeof avatarShape;
+    status?: keyof typeof statusIndicator;
+} & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/src/components/Avatar/Avatar/Avatar.js

@@ -1,12 +1,50 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import Image from "next/image";
-import { avatarPadding, avatarSize, avatarShape } from ".";
-import LUIcon from "../../../components/Icons/LUIcon";
-var Avatar = function (_a) {
-    var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, _c = _a.shape, shape = _c === void 0 ? "square" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className;
-    var sizeClasses = avatarSize[size];
-    var paddingClass = avatarPadding[size];
-    return (_jsx(_Fragment, { children: image ? (_jsx("div", { className: "relative overflow-hidden bg-blue-200 ".concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses), "data-testid": "lu-avatar", children: _jsx(Image, { src: image, alt: "avatar", className: "object-cover w-full h-full", width: 0, height: 0, sizes: "100%" //Image takes 100% of the parent container
-             }) })) : (_jsx("div", { className: "bg-gray-100 ".concat(paddingClass, " ").concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses), "data-testid": "lu-icon", children: _jsx(LUIcon, { "data-testid": "lu-icon", size: size, icon: icon, className: "text-gray-950 w-full h-full" }) })) }));
+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);
 };
-export default Avatar;
+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 * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../lib/utils";
+import { avatarSize, avatarShape, statusIndicatorSize, statusIndicatorOffset, roundedStatusIndicatorOffset, } from ".";
+import { StatusIndicator } from "../StatusIndicator/StatusIndicator";
+var AvatarContext = React.createContext({ size: "md", shape: "rounded" });
+var Avatar = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.shape, shape = _d === void 0 ? "rounded" : _d, status = _a.status, children = _a.children, props = __rest(_a, ["className", "size", "shape", "status", "children"]);
+    return (_jsx(AvatarPrimitive.Root, __assign({ ref: ref, className: cn("relative flex shrink-0", className, avatarSize[size], typeof avatarShape[shape] === "string"
+            ? avatarShape[shape]
+            : (_b = avatarShape[shape]) === null || _b === void 0 ? void 0 : _b[size]), "data-size": size, "data-shape": shape }, props, { children: _jsxs(AvatarContext.Provider, { value: { size: size, shape: shape }, children: [children, status && (_jsx(StatusIndicator, { status: status, size: statusIndicatorSize[size], className: cn("absolute", shape === "rounded"
+                        ? roundedStatusIndicatorOffset[size]
+                        : statusIndicatorOffset[size]) }))] }) })));
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(AvatarPrimitive.Image, __assign({ ref: ref, className: cn("aspect-square h-full w-full bg-blue-100 rounded-[inherit]", className) }, props)));
+});
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (_jsx(AvatarPrimitive.Fallback, __assign({ ref: ref, className: cn("flex h-full w-full items-center justify-center bg-blue-100 font-medium leading-normal rounded-[inherit]", className) }, props, { children: children })));
+});
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback };