npm - linkedunion-design-kit - Versions diffs - 1.11.6 → 1.11.8 - Mend

linkedunion-design-kit 1.11.6 → 1.11.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/app/layout.d.ts CHANGED Viewed

@@ -3,4 +3,4 @@ import "@/styles/globals.css";
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/app/{layout.js → layout.jsx} RENAMED Viewed

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Inter } from "next/font/google";
 import "@/styles/globals.css";
 var inter = Inter({ subsets: ["latin"] });
@@ -8,5 +7,7 @@ export var metadata = {
 };
 export default function RootLayout(_a) {
     var children = _a.children;
-    return (_jsx("html", { lang: "en", children: _jsx("body", { className: inter.className, children: children }) }));
+    return (<html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>);
 }

package/dist/app/page.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export default function Home(): import("react~~/jsx-runtime~~").JSX.Element;
1	+ export default function Home(): import("react").JSX.Element;

package/dist/app/page.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+export default function Home() {
+    return (<div className="text-center flex flex-col items-center justify-center min-h-screen p-24 gap-5">
+      <h1> Welcome to Linkedunion Design kit</h1>
+    </div>);
+}

package/dist/index.d.ts CHANGED Viewed

@@ -37,3 +37,6 @@ export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { DateRangePicker } from "./src/components/DateRangePicker/DateRangePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export { SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, } from "./src/components/SweetAlert/SweetAlert";

package/dist/index.js CHANGED Viewed

@@ -36,3 +36,6 @@ export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { DateRangePicker } from "./src/components/DateRangePicker/DateRangePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export { SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, } from "./src/components/SweetAlert/SweetAlert";

package/dist/src/components/Accordion/Accordion.stories.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "../../components/Accordion/accordion";
+import ColorPicker from "../ColorPicker/ColorPicker";
+export default {
+    title: "Components/Accordion",
+    component: Accordion,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (<Accordion type="single" collapsible defaultValue="menus" {...args}></Accordion>); };
+export var _Accordion = Template.bind({});
+_Accordion.args = {
+    children: (<>
+      <AccordionItem value="menus">
+        <AccordionTrigger>Menus</AccordionTrigger>
+        <AccordionContent>
+          <ColorPicker value="#000000" onChange={function () { return console.log("color"); }}/>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="second">
+        <AccordionTrigger>Menus</AccordionTrigger>
+        <AccordionContent>
+          <ColorPicker value="#000000" onChange={function () { return console.log("color"); }}/>
+        </AccordionContent>
+      </AccordionItem>
+    </>),
+};
+_Accordion.argTypes = {
+    children: {
+        description: "Pass `AccordionItem` components as children. Each item includes an `AccordionTrigger` (the clickable label) and `AccordionContent` (collapsible body). You can customize both with any valid React nodes \n\nFor more details and usage examples, refer to the [ShadCN Accordion documentation](https://ui.shadcn.com/docs/components/accordion).",
+        table: {
+            type: { summary: "React.ReactNode" },
+        },
+    },
+};

package/dist/src/components/Accordion/accordion.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/src/components/Accordion/{accordion.js → accordion.jsx} RENAMED Viewed

@@ -1,14 +1,3 @@
-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)
@@ -20,18 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cn } from "../../lib/utils";
 import LUIcon from "../Icons/LUIcon";
 function Accordion(_a) {
     var props = __rest(_a, []);
-    return _jsx(AccordionPrimitive.Root, __assign({ "data-slot": "accordion" }, props));
+    return <AccordionPrimitive.Root data-slot="accordion" {...props}/>;
 }
 function AccordionItem(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AccordionPrimitive.Item, __assign({ "data-slot": "accordion-item", className: cn("!py-5 !border-b last:!border-b !border-gray-100", className) }, props)));
+    return (<AccordionPrimitive.Item data-slot="accordion-item" className={cn("!py-5 !border-b last:!border-b !border-gray-100", className)} {...props}/>);
 }
 function AccordionTrigger(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
@@ -55,10 +43,17 @@ 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: "light-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
+    return (<AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger 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}>
+        <LUIcon color="light-gray" icon={isOpen ? "minus" : "plus"} size="md" className="pointer-events-none shrink-0"/>
+        {children}
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>);
 }
 function AccordionContent(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsx(AccordionPrimitive.Content, __assign({ "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down !overflow-visible !text-sm !py-2" }, props, { children: _jsx("div", { className: cn(className), children: children }) })));
+    return (<AccordionPrimitive.Content data-slot="accordion-content" className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down !overflow-visible !text-sm !py-2" {...props}>
+      <div className={cn(className)}>{children}</div>
+    </AccordionPrimitive.Content>);
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -9,10 +9,10 @@ export declare const alertVariants: (props?: ({
 } & 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 declare function Alert({ className, size, shadow, color, variant, ...props }: AlertProps): React.JSX.Element;
+export declare function AlertHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+export declare function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+export declare function AlertFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare const AlertAction: ({ className, color: colorProp, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;
+export declare const AlertCancel: ({ className, color: colorProp, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;

package/dist/src/components/Alerts/Alert/{alert.js → alert.jsx} RENAMED Viewed

@@ -1,15 +1,4 @@
 "use client";
-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)
@@ -21,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { createContext, useContext, Children, isValidElement, cloneElement, } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
@@ -95,12 +84,14 @@ 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)) }));
+    return (<AlertContext.Provider value={{ color: color || undefined }}>
+      <div data-slot="inline-alert" className={cn(alertVariants({
+            size: size,
+            shadow: shadow,
+            color: color,
+            variant: variant,
+        }), className)} {...props}/>
+    </AlertContext.Provider>);
 }
 export function AlertHeader(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
@@ -125,33 +116,38 @@ export function AlertHeader(_a) {
                 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 (<div data-slot="alert-dialog-header" className={cn("flex flex-row gap-3 items-start text-left", className)} {...props}>
+        {iconWithClass_1}
+        <div>{otherChildren_1}</div>
+      </div>);
     }
-    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 })));
+    return (<div data-slot="alert-dialog-header" className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props}>
+      {children}
+    </div>);
 }
 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)));
+    return (<h2 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)));
+    return (<p 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)));
+    return (<div 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)));
+    return (<Button 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)));
+    return (<Button 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 CHANGED Viewed

@@ -3,7 +3,7 @@ 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;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -12,14 +12,14 @@ export declare const Example: {
         };
     };
 };
-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 AllColors: () => import("react").JSX.Element;
+export declare const AllSizes: () => import("react").JSX.Element;
+export declare const Variants: () => import("react").JSX.Element;
+export declare const ComparisonWithAlertDialog: () => import("react").JSX.Element;
+export declare const NoButtons: () => import("react").JSX.Element;
+export declare const WithShadow: () => import("react").JSX.Element;
 export declare const CustomizeAlert: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {

package/dist/src/components/Alerts/Alert/alert.stories.jsx ADDED Viewed

@@ -0,0 +1,344 @@
+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 (<Alert size={args.size} shadow={args.shadow} color={args.color} variant={args.variant}>
+    <AlertHeader>
+      {args.Icon && <LUIcon icon={args.Icon} variant="padded"/>}
+      <AlertTitle>{args.title}</AlertTitle>
+      <AlertDescription>{args.description}</AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      {args.showCancel && (<AlertCancel onClick={function () { return alert("Cancel clicked"); }} className="text-blue-600 hover:text-blue-700 hover:underline">
+          {args.cancelText}
+        </AlertCancel>)}
+      {args.showAction && (<AlertAction onClick={function () { return alert("Action clicked"); }} className="text-blue-600 hover:text-blue-700 hover:underline">
+          {args.actionText}
+        </AlertAction>)}
+    </AlertFooter>
+  </Alert>); };
+// 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 (<Alert color="blue" size="md" shadow="none">
+    <AlertHeader>
+      <LUIcon icon="info" variant="padded"/>
+      <AlertTitle>Update Available</AlertTitle>
+      <AlertDescription>
+        A new version of the application is available. Would you like to update
+        now? The update includes bug fixes and performance improvements.
+      </AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline" onClick={function () { return console.log("Later clicked"); }}>
+        Later
+      </AlertCancel>
+      <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline" onClick={function () { return console.log("Update Now clicked"); }}>
+        Update Now
+      </AlertAction>
+    </AlertFooter>
+  </Alert>); };
+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 (<div className="flex flex-col gap-4">
+    {colorOptions.map(function (color) {
+        var content = getContentForColor(color);
+        return (<Alert key={color} color={color}>
+          <AlertHeader>
+            <LUIcon icon={getIconForColor(color)} variant="padded"/>
+            <AlertTitle>{content.title}</AlertTitle>
+            <AlertDescription>{content.description}</AlertDescription>
+          </AlertHeader>
+          <AlertFooter>
+            <AlertCancel className={"text-".concat(color, "-600 hover:text-").concat(color, "-700 hover:underline")}>
+              Cancel
+            </AlertCancel>
+            <AlertAction className={"text-".concat(color, "-600 hover:text-").concat(color, "-700 hover:underline")}>
+              {content.button}
+            </AlertAction>
+          </AlertFooter>
+        </Alert>);
+    })}
+  </div>); };
+// All Sizes Example
+export var AllSizes = function () { return (<div className="flex flex-col gap-4">
+    {sizeOptions.map(function (size) { return (<Alert key={size} size={size} color="blue">
+        <AlertHeader>
+          <LUIcon icon="info" color="blue" variant="padded"/>
+          <AlertTitle>Size: {size.toUpperCase()}</AlertTitle>
+          <AlertDescription>
+            This is an example of the Alert component with size {size}.
+          </AlertDescription>
+        </AlertHeader>
+        <AlertFooter>
+          <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline">
+            Cancel
+          </AlertCancel>
+          <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+            Action
+          </AlertAction>
+        </AlertFooter>
+      </Alert>); })}
+  </div>); };
+// Variants Example
+export var Variants = function () { return (<div className="flex flex-col gap-4">
+    <Alert variant="outline" color="blue">
+      <AlertHeader>
+        <LUIcon icon="info" variant="padded"/>
+        <AlertTitle>Outline Variant</AlertTitle>
+        <AlertDescription>
+          This is an example of the Alert component with the outline variant.
+        </AlertDescription>
+      </AlertHeader>
+      <AlertFooter>
+        <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline">
+          Cancel
+        </AlertCancel>
+        <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+          Action
+        </AlertAction>
+      </AlertFooter>
+    </Alert>
+    <Alert variant="fill" color="blue">
+      <AlertHeader>
+        <LUIcon icon="info" variant="padded"/>
+        <AlertTitle>Fill Variant</AlertTitle>
+        <AlertDescription>
+          This is an example of the Alert component with the fill variant.
+        </AlertDescription>
+      </AlertHeader>
+      <AlertFooter>
+        <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline">
+          Cancel
+        </AlertCancel>
+        <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+          Action
+        </AlertAction>
+      </AlertFooter>
+    </Alert>
+  </div>); };
+// Comparison with regular AlertDialog
+export var ComparisonWithAlertDialog = function () { return (<div className="flex flex-col gap-8">
+    <div>
+      <h2 className="text-lg font-semibold mb-2">Alert (Non-Modal)</h2>
+      <p className="text-sm text-gray-600 mb-4">
+        This version renders directly in the page flow and does not create a
+        modal overlay.
+      </p>
+      <Alert color="green">
+        <AlertHeader>
+          <LUIcon icon="check" variant="padded"/>
+          <AlertTitle>Success!</AlertTitle>
+          <AlertDescription>
+            Your changes have been saved successfully.
+          </AlertDescription>
+        </AlertHeader>
+        <AlertFooter>
+          <AlertAction className="text-green-600 hover:text-green-700 hover:underline">
+            Close
+          </AlertAction>
+        </AlertFooter>
+      </Alert>
+    </div>
+    <div>
+      <h2 className="text-lg font-semibold mb-2">
+        AlertDialog Button (Modal - Click to Open)
+      </h2>
+      <p className="text-sm text-gray-600 mb-4">
+        This is the regular AlertDialog component that creates a modal overlay.
+      </p>
+      <Button color="light-green" onClick={function () { }}>
+        Open Modal AlertDialog (See in Stories)
+      </Button>
+    </div>
+  </div>); };
+// No Buttons Example
+export var NoButtons = function () { return (<Alert color="yellow">
+    <AlertHeader>
+      <LUIcon icon="info" variant="padded"/>
+      <AlertTitle>Maintenance Notice</AlertTitle>
+      <AlertDescription>
+        System maintenance is scheduled for tonight at 10:00 PM. The system will
+        be unavailable for approximately 30 minutes.
+      </AlertDescription>
+    </AlertHeader>
+  </Alert>); };
+// With Shadow Example
+export var WithShadow = function () { return (<Alert color="blue" shadow="lg">
+    <AlertHeader>
+      <LUIcon icon="info" variant="padded"/>
+      <AlertTitle>Information</AlertTitle>
+      <AlertDescription>
+        This alert has a large shadow applied to it.
+      </AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+        Got it
+      </AlertAction>
+    </AlertFooter>
+  </Alert>); };
+// CustomizeAlert Example - showing how to customize with Typography components
+export var CustomizeAlert = function () { return (<Alert color="red" size="md" variant="fill">
+    <AlertHeader>
+      <LUIcon icon="info" size="9xl" color="light-red" variant="padded"/>
+      <AlertTitle>
+        <Heading variant="h1-700">Customize Alert Title</Heading>
+      </AlertTitle>
+      <AlertDescription>
+        <Body variant="body-xs">
+          This Alert uses a customized icon size, custom typography variants,
+          and different button colors to demonstrate full customization
+          capabilities.
+        </Body>
+      </AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      <AlertCancel variant="fill" color="indigo">
+        Close
+      </AlertCancel>
+      <AlertAction variant="outline" color="light-green">
+        OK
+      </AlertAction>
+    </AlertFooter>
+  </Alert>); };
+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.",
+        },
+    },
+};