linkedunion-design-kit 1.11.10 → 1.11.12

package/dist/app/layout.d.ts

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

package/dist/app/layout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Inter } from "next/font/google";
+import "@/styles/globals.css";
+var inter = Inter({ subsets: ["latin"] });
+export var metadata = {
+    title: "Create Next App",
+    description: "Generated by create next app",
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (_jsx("html", { lang: "en", children: _jsx("body", { className: inter.className, children: children }) }));
+}

package/dist/app/page.d.ts

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

package/dist/app/page.js

@@ -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

@@ -0,0 +1,44 @@
+export { default as LUIcon } from "./src/components/Icons/LUIcon";
+export type { IconName } from "./src/components/Icons/type";
+export { default as Card } from "./src/components/Card/card";
+export { default as LuImage } from "./src/components/Images/LuImage";
+export { default as Title } from "./src/components/Title/Title";
+export { IconButton } from "./src/components/Button/IconButton/IconButton";
+export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
+export { Input } from "./src/components/Input/input";
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/Accordion/accordion";
+export { default as ImageUploader } from "./src/components/ImageUploader/imageUploader";
+export { Checkbox } from "./src/components/Checkbox/checkbox";
+export { Switch } from "./src/components/Switch/switch";
+export { Typography } from "./src/components/ui/typography";
+export { Heading } from "./src/components/Typography/Heading/heading";
+export { Body } from "./src/components/Typography/Body/body";
+export { Display } from "./src/components/Typography/Display/display";
+export { Caption } from "./src/components/Typography/Caption/caption";
+export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
+export { Button } from "./src/components/Button/Button/Button";
+export { Label } from "./src/components/Label/Label";
+export { Slider } from "./src/components/Slider/slider";
+export { RadioGroup, RadioGroupItem, } from "./src/components/RadioGroup/radio-group";
+export { AppIcon } from "./src/components/AppIcons";
+export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
+export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";
+export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableButton, TableCellPadded, TableFooter, } from "./src/components/Table/Table";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./src/components/Dropdown/DropdownMenu/DropdownMenu";
+export { Badge } from "./src/components/Badge/Badge";
+export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogAction, DialogClose, } from "./src/components/Modal/Modal";
+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";
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./src/components/Popover/popover";
+export { Spinner } from "./src/components/Spinner/Spinner";

package/dist/index.js

@@ -0,0 +1,43 @@
+export { default as LUIcon } from "./src/components/Icons/LUIcon";
+export { default as Card } from "./src/components/Card/card";
+export { default as LuImage } from "./src/components/Images/LuImage";
+export { default as Title } from "./src/components/Title/Title";
+export { IconButton } from "./src/components/Button/IconButton/IconButton";
+export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
+export { Input } from "./src/components/Input/input";
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/Accordion/accordion";
+export { default as ImageUploader } from "./src/components/ImageUploader/imageUploader";
+export { Checkbox } from "./src/components/Checkbox/checkbox";
+export { Switch } from "./src/components/Switch/switch";
+export { Typography } from "./src/components/ui/typography";
+export { Heading } from "./src/components/Typography/Heading/heading";
+export { Body } from "./src/components/Typography/Body/body";
+export { Display } from "./src/components/Typography/Display/display";
+export { Caption } from "./src/components/Typography/Caption/caption";
+export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
+export { Button } from "./src/components/Button/Button/Button";
+export { Label } from "./src/components/Label/Label";
+export { Slider } from "./src/components/Slider/slider";
+export { RadioGroup, RadioGroupItem, } from "./src/components/RadioGroup/radio-group";
+export { AppIcon } from "./src/components/AppIcons";
+export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
+export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";
+export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableButton, TableCellPadded, TableFooter, } from "./src/components/Table/Table";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./src/components/Dropdown/DropdownMenu/DropdownMenu";
+export { Badge } from "./src/components/Badge/Badge";
+export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogAction, DialogClose, } from "./src/components/Modal/Modal";
+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";
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./src/components/Popover/popover";
+export { Spinner } from "./src/components/Spinner/Spinner";

package/dist/jest.config.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/jest.config.js

@@ -0,0 +1,27 @@
+import nextJest from "next/jest";
+var createJestConfig = nextJest({
+    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+    dir: "./",
+});
+var config = {
+    // Setup files to be run before each test.
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+    testPathIgnorePatterns: ["/node_modules/", "/dist/"], // This prevents tests from running in dist/
+    // Map module paths for cleaner imports.
+    moduleNameMapper: {
+        "^@/src/components/(.*)$": "<rootDir>/src/$1",
+    },
+    // Use V8 for faster code coverage.
+    coverageProvider: "v8",
+    // Use jsdom as the test environment to simulate a browser.
+    testEnvironment: "jsdom",
+    // Specify the files from which to collect code coverage.
+    collectCoverageFrom: [
+        "src/components/**/*.{tsx,ts}",
+        "!**/*.stories.tsx", // Exclude story files.
+        "!src/components/**/index.ts", // Exclude index files.
+        "!src/components/**/type.ts", // Exclude type definition files.
+    ],
+};
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(config);

package/dist/jest.setup.d.ts

@@ -0,0 +1,3 @@
+import "@testing-library/jest-dom";
+import "matchmedia-polyfill";
+import "matchmedia-polyfill/matchMedia.addListener";

package/dist/jest.setup.js

@@ -0,0 +1,26 @@
+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 "@testing-library/jest-dom";
+import "matchmedia-polyfill";
+import "matchmedia-polyfill/matchMedia.addListener";
+console.error = jest.fn();
+console.warn = jest.fn();
+// Mock `next/config`
+jest.mock("next/config", function () {
+    var originalConfig = jest.requireActual("next/config");
+    return function () { return (__assign(__assign({}, originalConfig()), { publicRuntimeConfig: {
+            experimental: {
+                typedRoutes: true,
+                serverActions: true,
+            },
+        } })); };
+});

package/dist/src/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const _Accordion: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    children: React.ReactNode;
+}>;

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

@@ -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

@@ -0,0 +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;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * 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));
+}
+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)));
+}
+function AccordionTrigger(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    var ref = React.useRef(null);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    React.useEffect(function () {
+        var updateOpenState = function () {
+            if (ref.current) {
+                var state = ref.current.getAttribute("data-state");
+                setIsOpen(state === "open");
+            }
+        };
+        updateOpenState();
+        // Create a mutation observer to watch for attribute changes
+        var observer = new MutationObserver(updateOpenState);
+        if (ref.current) {
+            observer.observe(ref.current, {
+                attributes: true,
+                attributeFilter: ["data-state"],
+            });
+        }
+        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] })) }));
+}
+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 }) })));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

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

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

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

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

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