linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/SweetAlert/SweetAlert.jsx

@@ -0,0 +1,147 @@
+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 * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Button } from "../Button/Button/Button";
+import LUIcon from "../Icons/LUIcon";
+// Create context for SweetAlert color and variant
+var SweetAlertContext = React.createContext({});
+// Hook to access SweetAlert context values
+var useAlertContext = function () { return React.useContext(SweetAlertContext); };
+export var sweetAlertVariants = {
+    shadow: {
+        none: "shadow-2xl",
+        lg: "shadow-lg",
+    },
+    variant: {
+        outline: "",
+        fill: "",
+        light: "",
+    },
+    color: {
+        blue: "",
+        red: "",
+        green: "",
+        yellow: "",
+        indigo: "",
+        gray: "",
+    },
+};
+var sweetAlertContentVariants = cva("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 w-full max-w-md translate-x-[-50%] translate-y-[-50%] duration-200 rounded-lg border-0 p-8 text-center", {
+    variants: sweetAlertVariants,
+    defaultVariants: {
+        shadow: "none",
+        variant: "outline",
+        color: "blue",
+    },
+    compoundVariants: [
+        // Outline variants (white background)
+        { variant: "outline", class: "bg-white text-gray-950" },
+        // Fill variants (colored background with light text)
+        { color: "blue", variant: "fill", class: "bg-blue-600 text-blue-50" },
+        { color: "red", variant: "fill", class: "bg-red-600 text-red-50" },
+        { color: "green", variant: "fill", class: "bg-green-600 text-green-50" },
+        {
+            color: "yellow",
+            variant: "fill",
+            class: "bg-yellow-500 text-yellow-50",
+        },
+        {
+            color: "indigo",
+            variant: "fill",
+            class: "bg-indigo-600 text-indigo-50",
+        },
+        { color: "gray", variant: "fill", class: "bg-gray-600 text-gray-50" },
+        // Light variants (light colored background with dark text)
+        { color: "blue", variant: "light", class: "bg-blue-100 text-gray-950" },
+        { color: "red", variant: "light", class: "bg-red-100 text-gray-950" },
+        { color: "green", variant: "light", class: "bg-green-100 text-gray-950" },
+        {
+            color: "yellow",
+            variant: "light",
+            class: "bg-yellow-100 text-gray-950",
+        },
+        {
+            color: "indigo",
+            variant: "light",
+            class: "bg-indigo-100 text-gray-950",
+        },
+        { color: "gray", variant: "light", class: "bg-gray-100 text-gray-950" },
+    ],
+});
+function SweetAlertRoot(_a) {
+    var props = __rest(_a, []);
+    return <AlertDialogPrimitive.Root data-slot="sweet-alert" {...props}/>;
+}
+function SweetAlertTrigger(_a) {
+    var props = __rest(_a, []);
+    return (<AlertDialogPrimitive.Trigger data-slot="sweet-alert-trigger" {...props}/>);
+}
+function SweetAlertContent(_a) {
+    var className = _a.className, shadow = _a.shadow, color = _a.color, variant = _a.variant, props = __rest(_a, ["className", "shadow", "color", "variant"]);
+    // Provide color and variant to child components through context
+    var contextValue = React.useMemo(function () { return ({
+        color: color || undefined,
+        variant: variant || undefined,
+    }); }, [color, variant]);
+    return (<SweetAlertContext.Provider value={contextValue}>
+      <AlertDialogPrimitive.Portal>
+        <AlertDialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"/>
+        <AlertDialogPrimitive.Content data-slot="sweet-alert-content" className={cn(sweetAlertContentVariants({ shadow: shadow, color: color, variant: variant }), "flex flex-col items-center gap-4 text-center", className)} {...props}/>
+      </AlertDialogPrimitive.Portal>
+    </SweetAlertContext.Provider>);
+}
+function SweetAlertFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div data-slot="sweet-alert-footer" className={cn("flex flex-row justify-center text-lg gap-3 mt-6", className)} {...props}/>);
+}
+function SweetAlertTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<AlertDialogPrimitive.Title data-slot="sweet-alert-title" className={cn("font-semibold text-2xl", className)} {...props}/>);
+}
+function SweetAlertDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<AlertDialogPrimitive.Description data-slot="sweet-alert-description" className={cn("text-lg", className)} {...props}/>);
+}
+// Helper function to get color based on context and variant
+function getColorWithVariant(colorProp, contextColor, contextVariant) {
+    var color = colorProp || contextColor;
+    if (!color)
+        return undefined;
+    return contextVariant === "fill" ? "light-".concat(color) : color;
+}
+function SweetAlertAction(_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var _b = useAlertContext(), contextColor = _b.color, contextVariant = _b.variant;
+    var color = getColorWithVariant(colorProp, contextColor, contextVariant);
+    return (<AlertDialogPrimitive.Action asChild>
+      <Button variant="fill" color={color} data-slot="sweet-alert-action" className={cn(className)} {...props}/>
+    </AlertDialogPrimitive.Action>);
+}
+function SweetAlertCancel(_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var _b = useAlertContext(), contextColor = _b.color, contextVariant = _b.variant;
+    var color = getColorWithVariant(colorProp, contextColor, contextVariant);
+    return (<AlertDialogPrimitive.Cancel asChild>
+      <Button variant="outline" color={color} data-slot="sweet-alert-cancel" className={cn(className)} {...props}/>
+    </AlertDialogPrimitive.Cancel>);
+}
+function SweetAlertIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "12xl" : _b, _c = _a.variant, variant = _c === void 0 ? "padded" : _c, colorProp = _a.color, _d = _a.shape, shape = _d === void 0 ? "rounded" : _d, props = __rest(_a, ["size", "variant", "color", "shape"]);
+    var _e = useAlertContext(), contextColor = _e.color, contextVariant = _e.variant;
+    var color = getColorWithVariant(colorProp, contextColor, contextVariant);
+    return (<LUIcon size={size} variant={variant} color={color} shape={shape} {...props}/>);
+}
+export { SweetAlertRoot as SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, };
+export default SweetAlertRoot;

package/dist/src/components/SweetAlert/SweetAlert.stories.jsx

@@ -0,0 +1,505 @@
+import { useState } from "react";
+import { SweetAlert, SweetAlertAction, SweetAlertCancel, SweetAlertContent, SweetAlertDescription, SweetAlertTitle, SweetAlertTrigger, SweetAlertFooter, SweetAlertIcon, sweetAlertVariants, } from "./SweetAlert";
+import { Button } from "../Button/Button/Button";
+import { Heading } from "../Typography/Heading/heading";
+import { Body } from "../Typography/Body/body";
+import LUIcon from "../Icons/LUIcon";
+// Constants for stories
+var colorOptions = Object.keys(sweetAlertVariants.color);
+var variantOptions = Object.keys(sweetAlertVariants.variant);
+var shadowOptions = Object.keys(sweetAlertVariants.shadow);
+// Helper functions for stories
+var getIconForColor = function (color) {
+    switch (color) {
+        case "blue":
+            return "info";
+        case "red":
+            return "star";
+        case "green":
+            return "check";
+        case "yellow":
+            return "star";
+        case "indigo":
+            return "bell";
+        case "gray":
+            return "info";
+        default:
+            return "info";
+    }
+};
+var getContentForColor = function (color) {
+    switch (color) {
+        case "blue":
+            return {
+                title: "Information",
+                description: "This is an informational message about your account status.",
+                button: "Got it",
+            };
+        case "red":
+            return {
+                title: "Warning",
+                description: "This action cannot be undone. Please proceed with caution.",
+                button: "Delete",
+            };
+        case "green":
+            return {
+                title: "Success",
+                description: "Your changes have been successfully saved.",
+                button: "Continue",
+            };
+        case "yellow":
+            return {
+                title: "Alert",
+                description: "Please review your information before submitting.",
+                button: "Review",
+            };
+        case "indigo":
+            return {
+                title: "Notification",
+                description: "You have new messages waiting in your inbox.",
+                button: "View",
+            };
+        case "gray":
+            return {
+                title: "Notice",
+                description: "System maintenance is scheduled for tomorrow.",
+                button: "Acknowledge",
+            };
+        default:
+            return {
+                title: "Information",
+                description: "This is an informational alert.",
+                button: "OK",
+            };
+    }
+};
+// Example configurations for stories
+var realWorldExamples = [
+    {
+        triggerText: "Delete Account",
+        triggerColor: "red",
+        shadow: "lg",
+        color: "red",
+        variant: "fill",
+        icon: "star",
+        title: "Delete Account?",
+        description: "This will permanently delete your account and all associated data. This action cannot be undone.",
+        cancelText: "Keep Account",
+        actionText: "Delete Forever",
+    },
+    {
+        triggerText: "Update Available",
+        triggerColor: "blue",
+        shadow: "none",
+        color: "blue",
+        variant: "outline",
+        icon: "info",
+        title: "Update Available",
+        description: "A new version is available. Would you like to update now?",
+        cancelText: "Later",
+        actionText: "Update Now",
+    },
+    {
+        triggerText: "Payment Success",
+        triggerColor: "green",
+        shadow: "none",
+        color: "green",
+        variant: "light",
+        icon: "check",
+        title: "Payment Successful",
+        description: "Your payment has been processed successfully. Thank you for your purchase!",
+        cancelText: "Close",
+        actionText: "View Receipt",
+    },
+];
+export default {
+    title: "Components/Alert/SweetAlert",
+    component: SweetAlert,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "SweetAlert is a beautiful replacement for JavaScript's alert. It provides a modal dialog with customizable colors, icons, and action buttons. Now supports both wrapper component pattern and individual composable components like AlertDialog. This component is built using Radix UI's Alert Dialog primitives - for more details on the underlying API, please refer to the [Radix UI Alert Dialog documentation](https://www.radix-ui.com/primitives/docs/components/alert-dialog).",
+            },
+        },
+    },
+};
+// Reusable SweetAlert component
+var SweetAlertExample = function (_a) {
+    var triggerText = _a.triggerText, triggerColor = _a.triggerColor, _b = _a.shadow, shadow = _b === void 0 ? "none" : _b, color = _a.color, _c = _a.variant, variant = _c === void 0 ? "outline" : _c, 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 (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color={triggerColor} className={className}>
+        {triggerText}
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent shadow={shadow} color={color} variant={variant}>
+      {icon && <SweetAlertIcon icon={icon}/>}
+      <SweetAlertTitle>{title}</SweetAlertTitle>
+      <SweetAlertDescription>{description}</SweetAlertDescription>
+      <SweetAlertFooter>
+        {showCancel && (<SweetAlertCancel>{cancelText || "Cancel"}</SweetAlertCancel>)}
+        {showAction && (<SweetAlertAction>{actionText || "OK"}</SweetAlertAction>)}
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>);
+};
+// Component with eye icon to show code
+var ColorVariantWithEyeIcon = function (_a) {
+    var color = _a.color, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, content = _a.content;
+    var _c = useState(false), showCode = _c[0], setShowCode = _c[1];
+    var triggerText = color.charAt(0).toUpperCase() + color.slice(1).replace("-", " ");
+    var sweetAlertCode = "<SweetAlert>\n  <SweetAlertTrigger asChild>\n    <Button variant=\"outline\" color=\"".concat(color, "\">\n      ").concat(triggerText, "\n    </Button>\n  </SweetAlertTrigger>\n  <SweetAlertContent color=\"").concat(color, "\" variant=\"").concat(variant, "\">\n    <SweetAlertIcon icon=\"").concat(getIconForColor(color), "\" />\n    <SweetAlertTitle>").concat(content.title, "</SweetAlertTitle>\n    <SweetAlertDescription>\n      ").concat(content.description, "\n    </SweetAlertDescription>\n    <SweetAlertFooter>\n      <SweetAlertCancel>Cancel</SweetAlertCancel>\n      <SweetAlertAction>").concat(content.button, "</SweetAlertAction>\n    </SweetAlertFooter>\n  </SweetAlertContent>\n</SweetAlert>");
+    return (<div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <div className="flex-1">
+          <SweetAlertExample triggerText={triggerText} triggerColor={color} color={color} variant={variant} icon={getIconForColor(color)} title={content.title} description={content.description} cancelText="Cancel" actionText={content.button} className="w-full"/>
+        </div>
+        <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">
+          <LUIcon icon={showCode ? "eye-slash" : "eye"}/>
+        </Button>
+      </div>
+
+      {showCode && (<div className="p-3 bg-gray-50 border rounded-lg">
+          <div className="flex items-center justify-between mb-2">
+            <Body variant="body-sm" className="font-semibold text-gray-700">
+              {triggerText} - SweetAlert Code
+            </Body>
+            <Button onClick={function () { return navigator.clipboard.writeText(sweetAlertCode); }} variant="ghost" size="sm" title="Copy code to clipboard" className="text-xs text-blue-700 hover:bg-blue-200 bg-blue-100">
+              Copy Code
+            </Button>
+          </div>
+          <pre className="text-xs bg-white p-3 rounded border overflow-x-auto">
+            <code className="text-gray-800">{sweetAlertCode}</code>
+          </pre>
+        </div>)}
+    </div>);
+};
+// Component with eye icon to show code for all variants of a color
+var ColorVariantsWithEyeIcon = function (_a) {
+    var color = _a.color;
+    var _b = useState(false), showCode = _b[0], setShowCode = _b[1];
+    var colorName = color.charAt(0).toUpperCase() + color.slice(1);
+    var variants = [
+        "outline",
+        "fill",
+        "light",
+    ];
+    var generateVariantCode = function (variant) { return "<SweetAlert>\n  <SweetAlertTrigger asChild>\n    <Button variant=\"outline\" color=\"".concat(color, "\">\n      ").concat(color, " - ").concat(variant.charAt(0).toUpperCase() + variant.slice(1), "\n    </Button>\n  </SweetAlertTrigger>\n  <SweetAlertContent color=\"").concat(color, "\" variant=\"").concat(variant, "\">\n    <SweetAlertIcon icon=\"").concat(getIconForColor(color), "\" />\n    <SweetAlertTitle>").concat(colorName, " Alert</SweetAlertTitle>\n    <SweetAlertDescription>\n      This is a ").concat(color, " ").concat(variant, " variant alert.\n    </SweetAlertDescription>\n    <SweetAlertFooter>\n      <SweetAlertCancel>Cancel</SweetAlertCancel>\n      <SweetAlertAction>OK</SweetAlertAction>\n    </SweetAlertFooter>\n  </SweetAlertContent>\n</SweetAlert>"); };
+    var allVariantsCode = variants
+        .map(function (variant) { return generateVariantCode(variant); })
+        .join("\n\n");
+    return (<div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Heading variant="h4" className="font-medium text-gray-700">
+          {colorName}
+        </Heading>
+        <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">
+          <LUIcon icon={showCode ? "eye-slash" : "eye"}/>
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {variants.map(function (variant) { return (<SweetAlertExample key={variant} triggerText={"".concat(color, " - ").concat(variant.charAt(0).toUpperCase() + variant.slice(1))} triggerColor={color} color={color} variant={variant} icon={getIconForColor(color)} title={"".concat(colorName, " Alert")} description={"This is a ".concat(color, " ").concat(variant, " variant alert.")} showCancel={true} showAction={true} cancelText="Cancel" actionText="OK"/>); })}
+      </div>
+
+      {showCode && (<div className="p-3 bg-gray-50 border rounded-lg">
+          <div className="flex items-center justify-between mb-2">
+            <Body variant="body-sm" className="font-semibold text-gray-700">
+              {colorName} - All Variants Code
+            </Body>
+            <Button onClick={function () { return navigator.clipboard.writeText(allVariantsCode); }} variant="ghost" size="sm" title="Copy code to clipboard" className="text-xs text-blue-700 hover:bg-blue-200 bg-blue-100">
+              Copy Code
+            </Button>
+          </div>
+          <pre className="text-xs bg-white p-3 rounded border overflow-x-auto">
+            <code className="text-gray-800">{allVariantsCode}</code>
+          </pre>
+        </div>)}
+    </div>);
+};
+// Template for stories with args
+var Template = function (args) { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Sweet Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent shadow={args.shadow} color={args.color} variant={args.variant}>
+      {args.icon && <SweetAlertIcon icon={args.icon}/>}
+      <SweetAlertTitle>{args.title}</SweetAlertTitle>
+      <SweetAlertDescription>{args.description}</SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel>{args.cancelText}</SweetAlertCancel>
+        <SweetAlertAction>{args.actionText}</SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
+// Default story with all controls
+export var Default = Template.bind({});
+Default.args = {
+    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 = {
+    shadow: {
+        control: { type: "select" },
+        options: shadowOptions,
+        description: "Shadow variant for SweetAlertContent",
+        table: {
+            defaultValue: { summary: "none" },
+            type: { summary: "enum" },
+            category: "SweetAlertContent",
+        },
+    },
+    color: {
+        control: { type: "select" },
+        options: colorOptions,
+        description: "Color theme for SweetAlertContent",
+        table: {
+            defaultValue: { summary: "blue" },
+            type: { summary: "enum" },
+            category: "SweetAlertContent",
+        },
+    },
+    variant: {
+        control: { type: "select" },
+        options: variantOptions,
+        description: "Variant for SweetAlertContent (outline | fill | light)",
+        table: {
+            defaultValue: { summary: "outline" },
+            type: { summary: "enum" },
+            category: "SweetAlertContent",
+        },
+    },
+    icon: {
+        control: { type: "text" },
+        description: "Icon to display (LUIcon name)",
+        table: {
+            type: { summary: "string" },
+            category: "SweetAlertIcon",
+        },
+    },
+    title: {
+        control: { type: "text" },
+        description: "Title text for SweetAlertTitle",
+        table: {
+            type: { summary: "string" },
+            category: "SweetAlertTitle",
+        },
+    },
+    description: {
+        control: { type: "text" },
+        description: "Description text for SweetAlertDescription",
+        table: {
+            type: { summary: "string" },
+            category: "SweetAlertDescription",
+        },
+    },
+    cancelText: {
+        control: { type: "text" },
+        description: "Text for SweetAlertCancel button",
+        table: {
+            type: { summary: "string" },
+            category: "SweetAlertCancel",
+        },
+    },
+    actionText: {
+        control: { type: "text" },
+        description: "Text for SweetAlertAction button",
+        table: {
+            type: { summary: "string" },
+            category: "SweetAlertAction",
+        },
+    },
+};
+// Simple Example showing the exact code structure
+export var Example = function () { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Sweet Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent color="blue" shadow="none">
+      <SweetAlertIcon icon="info"/>
+      <SweetAlertTitle>Update Available</SweetAlertTitle>
+      <SweetAlertDescription>
+        A new version of the application is available. Would you like to update
+        now? The update includes bug fixes and performance improvements.
+      </SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel>Later</SweetAlertCancel>
+        <SweetAlertAction>Update Now</SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
+Example.parameters = {
+    docs: {
+        description: {
+            story: "This example shows the exact code structure you should use to implement the SweetAlert component. SweetAlert is built on top of Radix UI Alert Dialog primitives, offering the same accessibility features and API while adding our custom styling and behavior.",
+        },
+    },
+};
+// Basic Example - Shows the actual component code
+export var BasicExample = function () { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Basic Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent color="blue" shadow="none">
+      <SweetAlertIcon icon="info"/>
+      <SweetAlertTitle>Update Available</SweetAlertTitle>
+      <SweetAlertDescription>
+        A new version of the application is available. Would you like to update
+        now? The update includes bug fixes and performance improvements.
+      </SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel>Later</SweetAlertCancel>
+        <SweetAlertAction>Update Now</SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
+BasicExample.parameters = {
+    docs: {
+        description: {
+            story: "Basic SweetAlert example showing the actual component structure.",
+        },
+    },
+};
+export var AllColors = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      All Color Variants
+    </Heading>
+    <Body variant="body-sm" className="text-gray-600">
+      Click the eye icon (👁️) to view the code for each color variant
+    </Body>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {colorOptions.map(function (color) {
+        var content = getContentForColor(color);
+        return (<ColorVariantWithEyeIcon key={color} color={color} content={content}/>);
+    })}
+    </div>
+  </div>); };
+AllColors.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+export var ColorVariants = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      Color Variant Examples
+    </Heading>
+    <Body variant="body-sm" className="text-gray-600">
+      Click the eye icon (👁️) to view the code for each color variant
+    </Body>
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      {colorOptions.map(function (color) { return (<ColorVariantsWithEyeIcon key={color} color={color}/>); })}
+    </div>
+  </div>); };
+ColorVariants.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+export var RealWorldExamples = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      Real-world Use Cases
+    </Heading>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {realWorldExamples.map(function (example, index) { return (<SweetAlertExample key={index} triggerText={example.triggerText} triggerColor={example.triggerColor} shadow={example.shadow} color={example.color} variant={example.variant} icon={example.icon} title={example.title} description={example.description} cancelText={example.cancelText} actionText={example.actionText} className="w-full"/>); })}
+    </div>
+  </div>); };
+RealWorldExamples.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Button Configuration Variants - Comprehensive Examples
+export var ButtonVariants = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      Button Configuration Variants
+    </Heading>
+
+    {/* Single Button Examples */}
+    <div className="space-y-4">
+      <Heading variant="h4" className="font-medium text-gray-700">
+        Single Button (Action Only)
+      </Heading>
+      <div className="flex flex-wrap gap-4">
+        <SweetAlertExample triggerText="Success Message" triggerColor="light-green" color="green" icon="check" title="Message Sent" description="Your message has been delivered successfully to all recipients." showCancel={false} actionText="Close"/>
+
+        <SweetAlertExample triggerText="Error Alert" triggerColor="light-red" shadow="lg" color="red" icon="star" title="Connection Failed" description="Unable to connect to the server. Please check your internet connection and try again." showCancel={false} actionText="Retry"/>
+
+        <SweetAlertExample triggerText="Installation Complete" triggerColor="blue" 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"/>
+      </div>
+    </div>
+
+    {/* Both Buttons Examples */}
+    <div className="space-y-4">
+      <Heading variant="h4" className="font-medium text-gray-700">
+        Both Buttons (Cancel + Action)
+      </Heading>
+      <div className="flex flex-wrap gap-4">
+        <SweetAlertExample triggerText="Confirm Action" triggerColor="blue" 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"/>
+
+        <SweetAlertExample triggerText="Delete Confirmation" triggerColor="light-red" color="red" icon="star" title="Confirm Deletion" description="Are you sure you want to delete this item? This action cannot be undone." cancelText="Cancel" actionText="Delete"/>
+
+        <SweetAlertExample triggerText="Save Changes" triggerColor="blue" 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"/>
+      </div>
+    </div>
+  </div>); };
+ButtonVariants.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Story showing how to customize the SweetAlert
+export var CustomizeAlert = function () { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Customize Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent color="red" shadow="lg" variant="fill">
+      <SweetAlertIcon icon="info"/>
+      <SweetAlertTitle>
+        <Heading variant="h1-700">Customize Alert Title</Heading>
+      </SweetAlertTitle>
+      <SweetAlertDescription>
+        <Body variant="body-xs">
+          This SweetAlert uses customized styling with a red background, large
+          icon, and custom typography.
+        </Body>
+      </SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel variant="fill" color="light-indigo">
+          Close
+        </SweetAlertCancel>
+        <SweetAlertAction variant="outline" color="light-green">
+          OK
+        </SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
+CustomizeAlert.parameters = {
+    docs: {
+        description: {
+            story: "This example shows how to customize the SweetAlert with custom typography and styling.",
+        },
+    },
+};