npm - linkedunion-design-kit - Versions diffs - 1.11.2 → 1.11.3 - Mend

linkedunion-design-kit 1.11.2 → 1.11.3

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 (241) 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.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/dist/app/page.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Home() {
+    return (_jsx("div", { className: "text-center flex flex-col items-center justify-center min-h-screen p-24 gap-5", children: _jsx("h1", { children: " Welcome to Linkedunion Design kit" }) }));
+}

package/dist/index.d.ts CHANGED Viewed

@@ -35,4 +35,4 @@ 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/Alerts/Alert/alert";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";

package/dist/index.js CHANGED Viewed

@@ -35,4 +35,4 @@ 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/Alerts/Alert/alert";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";

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

@@ -0,0 +1,32 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 (_jsx(Accordion, __assign({ type: "single", collapsible: true, defaultValue: "menus" }, args))); };
+export var _Accordion = Template.bind({});
+_Accordion.args = {
+    children: (_jsxs(_Fragment, { children: [_jsxs(AccordionItem, { value: "menus", children: [_jsx(AccordionTrigger, { children: "Menus" }), _jsx(AccordionContent, { children: _jsx(ColorPicker, { value: "#000000", onChange: function () { return console.log("color"); } }) })] }), _jsxs(AccordionItem, { value: "second", children: [_jsx(AccordionTrigger, { children: "Menus" }), _jsx(AccordionContent, { children: _jsx(ColorPicker, { value: "#000000", onChange: function () { return console.log("color"); } }) })] })] })),
+};
+_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>): 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;
+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;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -1,3 +1,14 @@
+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)
@@ -9,17 +20,18 @@ 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 <AccordionPrimitive.Root data-slot="accordion" {...props}/>;
+    return _jsx(AccordionPrimitive.Root, __assign({ "data-slot": "accordion" }, props));
 }
 function AccordionItem(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<AccordionPrimitive.Item data-slot="accordion-item" className={cn("!py-5 !border-b last:!border-b !border-gray-100", className)} {...props}/>);
+    return (_jsx(AccordionPrimitive.Item, __assign({ "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"]);
@@ -43,17 +55,10 @@ function AccordionTrigger(_a) {
         }
         return function () { return observer.disconnect(); };
     }, []);
-    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>);
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ ref: ref, "data-slot": "accordion-trigger", className: cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow m-0", className) }, props, { children: [_jsx(LUIcon, { color: "light-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
 }
 function AccordionContent(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    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>);
+    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 }) })));
 }
 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): 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;
+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;

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

@@ -1,4 +1,15 @@
 "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)
@@ -10,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, Children, isValidElement, cloneElement, } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
@@ -84,14 +95,12 @@ 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 (<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>);
+    return (_jsx(AlertContext.Provider, { value: { color: color || undefined }, children: _jsx("div", __assign({ "data-slot": "inline-alert", className: cn(alertVariants({
+                size: size,
+                shadow: shadow,
+                color: color,
+                variant: variant,
+            }), className) }, props)) }));
 }
 export function AlertHeader(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
@@ -116,38 +125,33 @@ export function AlertHeader(_a) {
                 otherChildren_1.push(child);
             }
         });
-        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 (_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-col gap-2 text-center sm:text-left", className)} {...props}>
-      {children}
-    </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 })));
 }
 export function AlertTitle(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<h2 data-slot="alert-dialog-title" className={cn("text-lg font-semibold", className)} {...props}/>);
+    return (_jsx("h2", __assign({ "data-slot": "alert-dialog-title", className: cn("text-lg font-semibold", className) }, props)));
 }
 export function AlertDescription(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<p data-slot="alert-dialog-description" className={cn("text-black text-sm", className)} {...props}/>);
+    return (_jsx("p", __assign({ "data-slot": "alert-dialog-description", className: cn("text-black text-sm", className) }, props)));
 }
 export function AlertFooter(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div data-slot="alert-dialog-footer" className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}/>);
+    return (_jsx("div", __assign({ "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
 }
 // Also create a simple button component that matches the style of AlertDialogAction
 export var AlertAction = function (_a) {
     var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
     var contextColor = useAlertContext().color;
     var color = colorProp || contextColor || undefined;
-    return (<Button variant="link" color={color} data-slot="alert-dialog-action" className={cn("h-auto p-0", className)} {...props}/>);
+    return (_jsx(Button, __assign({ variant: "link", color: color, "data-slot": "alert-dialog-action", className: cn("h-auto p-0", className) }, props)));
 };
 // And a cancel button that matches AlertDialogCancel
 export var AlertCancel = function (_a) {
     var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
     var contextColor = useAlertContext().color;
     var color = colorProp || contextColor || undefined;
-    return (<Button variant="link" color={color} data-slot="alert-dialog-cancel" className={cn("h-auto p-0", className)} {...props}/>);
+    return (_jsx(Button, __assign({ variant: "link", color: color, "data-slot": "alert-dialog-cancel", className: cn("h-auto p-0", className) }, props)));
 };

package/dist/src/components/Alerts/Alert/alert.stories.d.ts 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.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -12,14 +12,14 @@ export declare const Example: {
         };
     };
 };
-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 AllColors: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllSizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComparisonWithAlertDialog: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoButtons: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithShadow: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomizeAlert: {
-    (): import("react").JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         docs: {
             description: {

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

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

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

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

package/dist/src/components/Alerts/AlertDialog/{alert-dialog.jsx → alert-dialog.js} RENAMED Viewed

@@ -1,3 +1,14 @@
+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)
@@ -9,6 +20,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 * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cva } from "class-variance-authority";
@@ -84,28 +96,23 @@ var alertDialogContentVariants = cva("data-[state=open]:animate-in data-[state=c
 });
 function AlertDialog(_a) {
     var props = __rest(_a, []);
-    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props}/>;
+    return _jsx(AlertDialogPrimitive.Root, __assign({ "data-slot": "alert-dialog" }, props));
 }
 function AlertDialogTrigger(_a) {
     var props = __rest(_a, []);
-    return (<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props}/>);
+    return (_jsx(AlertDialogPrimitive.Trigger, __assign({ "data-slot": "alert-dialog-trigger" }, props)));
 }
 function AlertDialogPortal(_a) {
     var props = __rest(_a, []);
-    return (<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props}/>);
+    return (_jsx(AlertDialogPrimitive.Portal, __assign({ "data-slot": "alert-dialog-portal" }, props)));
 }
 function AlertDialogOverlay(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<AlertDialogPrimitive.Overlay data-slot="alert-dialog-overlay" className={cn("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", className)} {...props}/>);
+    return (_jsx(AlertDialogPrimitive.Overlay, __assign({ "data-slot": "alert-dialog-overlay", className: cn("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", className) }, props)));
 }
 function AlertDialogContent(_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 (<AlertDialogContext.Provider value={{ color: color || undefined }}>
-      <AlertDialogPortal>
-        <AlertDialogOverlay />
-        <AlertDialogPrimitive.Content data-slot="alert-dialog-content" className={cn(alertDialogContentVariants({ size: size, shadow: shadow, color: color, variant: variant }), className)} {...props}/>
-      </AlertDialogPortal>
-    </AlertDialogContext.Provider>);
+    return (_jsx(AlertDialogContext.Provider, { value: { color: color || undefined }, children: _jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, __assign({ "data-slot": "alert-dialog-content", className: cn(alertDialogContentVariants({ size: size, shadow: shadow, color: color, variant: variant }), className) }, props))] }) }));
 }
 function AlertDialogHeader(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
@@ -130,41 +137,32 @@ function AlertDialogHeader(_a) {
                 otherChildren_1.push(child);
             }
         });
-        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 (_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-col gap-2 text-center sm:text-left", className)} {...props}>
-      {children}
-    </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 })));
 }
 function AlertDialogFooter(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div data-slot="alert-dialog-footer" className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}/>);
+    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)));
 }
 function AlertDialogTitle(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={cn("text-lg font-semibold", className)} {...props}/>);
+    return (_jsx(AlertDialogPrimitive.Title, __assign({ "data-slot": "alert-dialog-title", className: cn("text-lg font-semibold", className) }, props)));
 }
 function AlertDialogDescription(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (<AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={cn("text-black text-sm", className)} {...props}/>);
+    return (_jsx(AlertDialogPrimitive.Description, __assign({ "data-slot": "alert-dialog-description", className: cn("text-black text-sm", className) }, props)));
 }
 function AlertDialogAction(_a) {
     var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
     var contextColor = useAlertDialogContext().color;
     var color = colorProp || contextColor || undefined;
-    return (<AlertDialogPrimitive.Action asChild>
-      <Button variant="link" color={color} data-slot="alert-dialog-action" className={cn("h-auto p-0", className)} {...props}/>
-    </AlertDialogPrimitive.Action>);
+    return (_jsx(AlertDialogPrimitive.Action, { asChild: true, children: _jsx(Button, __assign({ variant: "link", color: color, "data-slot": "alert-dialog-action", className: cn("h-auto p-0", className) }, props)) }));
 }
 function AlertDialogCancel(_a) {
     var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
     var contextColor = useAlertDialogContext().color;
     var color = colorProp || contextColor || undefined;
-    return (<AlertDialogPrimitive.Cancel asChild>
-      <Button variant="link" color={color} data-slot="alert-dialog-cancel" className={cn("h-auto p-0", className)} {...props}/>
-    </AlertDialogPrimitive.Cancel>);
+    return (_jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: _jsx(Button, __assign({ variant: "link", color: color, "data-slot": "alert-dialog-cancel", className: cn("h-auto p-0", className) }, props)) }));
 }
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };