linkedunion-design-kit 1.9.6-beta.0 → 1.9.6-beta.1

package/dist/src/components/VerticalTabs/VerticalTabs.test.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { Tabs, TabsList, TabsTrigger, TabsContent, TabsHeading, tabSizes, } from "./VerticalTabs";
+var Dummy_label = "Account";
+describe("VerticalTabs Component", function () {
+    it("renders Tabs with TabsHeading", function () {
+        render(_jsxs(Tabs, { defaultValue: "account", children: [_jsx(TabsHeading, { children: "Test Heading" }), _jsx(TabsList, { children: _jsx(TabsTrigger, { value: "account", children: Dummy_label }) }), _jsx(TabsContent, { value: "account", children: "Account Settings" })] }));
+        expect(screen.getByText("Test Heading")).toBeInTheDocument();
+    });
+    it("renders TabsHeading with children", function () {
+        render(_jsx(TabsHeading, { children: "Custom Heading" }));
+        expect(screen.getByText("Custom Heading")).toBeInTheDocument();
+    });
+    it("renders Tabs with different sizes", function () {
+        Object.keys(tabSizes).forEach(function (size) {
+            render(_jsxs(Tabs, { defaultValue: "account", size: size, children: [_jsxs(TabsHeading, { children: [size, " Tabs"] }), _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "account", children: "Account" }), _jsx(TabsTrigger, { value: "password", children: "Password" })] }), _jsx(TabsContent, { value: "account", children: "Account Settings" }), _jsx(TabsContent, { value: "password", children: "Change Password" })] }));
+            expect(screen.getByText("".concat(size, " Tabs"))).toBeInTheDocument();
+        });
+    });
+    it("renders TabsList and TabsTrigger", function () {
+        render(_jsxs(Tabs, { defaultValue: "account", children: [_jsx(TabsList, { children: _jsx(TabsTrigger, { value: "account", children: Dummy_label }) }), _jsx(TabsContent, { value: "account", children: "Account Settings" })] }));
+        expect(screen.getByText(Dummy_label)).toBeInTheDocument();
+    });
+    it("renders TabsContent when trigger is active", function () {
+        render(_jsxs(Tabs, { defaultValue: "account", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "account", children: Dummy_label }), _jsx(TabsTrigger, { value: "password", children: "Password" })] }), _jsx(TabsContent, { value: "account", children: "Account Settings" }), _jsx(TabsContent, { value: "password", children: "Change Password" })] }));
+        expect(screen.getByText("Account Settings")).toBeInTheDocument();
+        expect(screen.queryByText("Change Password")).not.toBeInTheDocument();
+    });
+    it("renders without heading prop", function () {
+        render(_jsxs(Tabs, { defaultValue: "account", children: [_jsx(TabsList, { children: _jsx(TabsTrigger, { value: "account", children: Dummy_label }) }), _jsx(TabsContent, { value: "account", children: "Account Settings" })] }));
+        expect(screen.queryByText("Test Heading")).not.toBeInTheDocument();
+    });
+    it("renders only active tab content", function () {
+        render(_jsxs(Tabs, { defaultValue: "account", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "account", children: "Account" }), _jsx(TabsTrigger, { value: "password", children: "Password" })] }), _jsx(TabsContent, { value: "account", children: "Account Settings" }), _jsx(TabsContent, { value: "password", children: "Change Password" })] }));
+        expect(screen.getByText("Account Settings")).toBeInTheDocument();
+        expect(screen.queryByText("Change Password")).not.toBeInTheDocument();
+    });
+    it("applies additional className to TabsTrigger", function () {
+        render(_jsxs(Tabs, { defaultValue: "account", children: [_jsx(TabsList, { children: _jsx(TabsTrigger, { value: "account", className: "custom-class", children: Dummy_label }) }), _jsx(TabsContent, { value: "account", children: "Account Settings" })] }));
+        var trigger = screen.getByText(Dummy_label);
+        expect(trigger).toHaveClass("custom-class");
+    });
+    it("renders correctly without a className prop", function () {
+        render(_jsxs(Tabs, { defaultValue: "account", children: [_jsx(TabsList, { children: _jsx(TabsTrigger, { value: "account", children: Dummy_label }) }), _jsx(TabsContent, { value: "account", children: "Account Settings" })] }));
+        var trigger = screen.getByText(Dummy_label);
+        expect(trigger.className).not.toMatch(/custom-class/);
+    });
+});

package/dist/styles/global.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -51,6 +51,8 @@
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -189,6 +191,9 @@
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -219,7 +224,7 @@
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border-width: 0;
   }
@@ -394,6 +399,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -451,6 +459,9 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -505,9 +516,15 @@
   .aspect-16\/10 {
     aspect-ratio: 16/10;
   }
+  .aspect-\[3\/4\] {
+    aspect-ratio: 3/4;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
   .\!size-3 {
     width: calc(var(--spacing) * 3) !important;
     height: calc(var(--spacing) * 3) !important;
@@ -597,12 +614,18 @@
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
+  .h-1\/3 {
+    height: calc(1/3 * 100%);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
   .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
   .h-3\.5 {
     height: calc(var(--spacing) * 3.5);
   }
@@ -618,6 +641,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -651,6 +677,15 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+  .h-\[1\.125rem\] {
+    height: 1.125rem;
+  }
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
@@ -723,6 +758,9 @@
   .w-3\.5 {
     width: calc(var(--spacing) * 3.5);
   }
+  .w-3\/4 {
+    width: calc(3/4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -759,6 +797,12 @@
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -780,6 +824,12 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+  .w-96 {
+    width: calc(var(--spacing) * 96);
+  }
   .w-\[52px\] {
     width: 52px;
   }
@@ -795,9 +845,6 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
-  .max-w-48 {
-    max-width: calc(var(--spacing) * 48);
-  }
   .max-w-\[17ch\] {
     max-width: 17ch;
   }
@@ -900,6 +947,9 @@
   .animate-in {
     animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
   }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
   .cursor-default {
     cursor: default;
   }
@@ -966,6 +1016,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .\!gap-1 {
     gap: calc(var(--spacing) * 1) !important;
   }
@@ -1030,6 +1083,13 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .-space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1132,6 +1192,10 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
   .\!border {
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
@@ -1857,6 +1921,12 @@
   .\!text-black {
     color: #030404 !important;
   }
+  .\!text-gray-50 {
+    color: #fafafa !important;
+  }
+  .\!text-gray-950 {
+    color: #18191A !important;
+  }
   .\!text-primary-foreground {
     color: var(--primary-foreground) !important;
   }
@@ -2169,7 +2239,7 @@
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -3488,6 +3558,12 @@
       background-color: #fffdf5;
     }
   }
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus-visible\:ring-4 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3530,6 +3606,11 @@
       --tw-ring-color: #e0061b;
     }
   }
+  .focus-visible\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+  }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
       --tw-ring-color: var(--ring);
@@ -3543,6 +3624,12 @@
       --tw-ring-color: #ffd333;
     }
   }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus-visible\:outline-hidden {
     &:focus-visible {
       --tw-outline-style: none;
@@ -3915,6 +4002,16 @@
       background-color: #276ab3;
     }
   }
+  .data-\[state\=active\]\:bg-gray-950 {
+    &[data-state="active"] {
+      background-color: #18191A;
+    }
+  }
+  .data-\[state\=active\]\:\!text-gray-50 {
+    &[data-state="active"] {
+      color: #fafafa !important;
+    }
+  }
   .data-\[state\=active\]\:text-blue-50 {
     &[data-state="active"] {
       color: #fbfcfe;
@@ -4059,6 +4156,11 @@
       width: 100%;
     }
   }
+  .max-sm\:flex-col {
+    @media (width < 40rem) {
+      flex-direction: column;
+    }
+  }
   .sm\:col-span-2 {
     @media (width >= 40rem) {
       grid-column: span 2 / span 2;
@@ -4074,6 +4176,11 @@
       max-height: 320px;
     }
   }
+  .sm\:max-w-48 {
+    @media (width >= 40rem) {
+      max-width: calc(var(--spacing) * 48);
+    }
+  }
   .sm\:max-w-lg {
     @media (width >= 40rem) {
       max-width: var(--container-lg);
@@ -4913,6 +5020,11 @@
   syntax: "*";
   inherits: false;
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity,1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.9.6-beta.0",
+  "version": "1.9.6-beta.1",
   "private": false,
   "files": [
     "dist",
@@ -53,7 +53,7 @@
     "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.1.4",
-    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.3",
     "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/cli": "^4.1.3",

package/dist/app/layout.jsx

@@ -1,13 +0,0 @@
-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 (<html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>);
-}

package/dist/app/page.jsx

@@ -1,5 +0,0 @@
-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/src/components/Accordion/Accordion.stories.jsx

@@ -1,33 +0,0 @@
-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.jsx

@@ -1,59 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from "react";
-import * as 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}/>;
-}
-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}/>);
-}
-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 (<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 (<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.jsx

@@ -1,152 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from "react";
-import { 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";
-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 (<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"]);
-    // 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 (<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 (<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 (<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 (<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 (<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 (<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 (<Button variant="link" color={color} data-slot="alert-dialog-cancel" className={cn("h-auto p-0", className)} {...props}/>);
-};