saha-ui 1.7.0 → 1.8.0

package/README.md

@@ -27,7 +27,7 @@
 
 ## ✨ Features
 
-- 🎨 **45 Modern Components** - Button, ButtonGroup, Alert, Badge, Breadcrumb, Card, Chip, Divider, Drawer, Accordion, Avatar, AvatarGroup, Tooltip, Link, List, Timeline, Tree, Image, Carousel, Steps, Table, Rating, Progress, Popover, PlayButton, FloatingActionButton, Radio, Switch, Checkbox, CheckboxGroup, Select, Dropdown, Tag, TagInput, TextArea, Upload, Modal, Toast, Empty, Autocomplete, Skeleton, Pagination, DatePicker, Tab, Input
+- 🎨 **46 Modern Components** - Button, ButtonGroup, Alert, AspectRatio, Badge, Breadcrumb, Card, Chip, Separator, Drawer, Accordion, Avatar, AvatarGroup, Tooltip, Link, List, Timeline, Tree, Image, Carousel, Steps, Table, Rating, Progress, Popover, PlayButton, FloatingActionButton, Radio, Switch, Checkbox, CheckboxGroup, Select, Dropdown, Tag, TagInput, TextArea, Upload, Dialog, Toast, Empty, Autocomplete, Skeleton, Pagination, DatePicker, Tab, Input
 - 🌓 **Dark Mode** - Seamless theme switching with full dark mode support
 - 🔮 **Glass Morphism** - Beautiful backdrop blur effects across components
 - 🎯 **Type-Safe** - Full TypeScript support with comprehensive prop types
@@ -148,7 +148,7 @@ import { cn } from "saha-ui/lib/utils";
 | **Breadcrumb**           | Navigation trail with 5 variants, 4 separators, and collapsing           | ✅     | ✅  |
 | **Card**                 | Container with 5 variants and sub-components                             | ✅     | ✅  |
 | **Chip**                 | Interactive tags with 5 variants, deletable, and avatars                 | ✅     | ✅  |
-| **Divider**              | Content separator with 5 variants and label support                      | ✅     | ✅  |
+| **Separator**            | Content separator with 5 variants and label support                      | ✅     | ✅  |
 | **Drawer**               | Side panel with 4 positions, 5 sizes, animations, nested support         | ✅     | ✅  |
 | **Accordion**            | Collapsible content with 5 behavior modes                                | ✅     | ✅  |
 | **Avatar**               | User profile images with status indicators                               | ✅     | ✅  |
@@ -177,7 +177,7 @@ import { cn } from "saha-ui/lib/utils";
 | **TagInput**             | Dynamic tag input with validation, Enter/Comma keys, paste support       | ✅     | ✅  |
 | **TextArea**             | Multi-line text input with auto-resize, character count, validation      | ✅     | ✅  |
 | **Upload**               | File upload with drag & drop, preview, progress, validation, 4 types     | ✅     | ✅  |
-| **Modal**                | Dialog with 9 variants, 7 sizes, animations, focus trap, accessibility   | ✅     | ✅  |
+| **Dialog**               | Dialog with 9 variants, 7 sizes, animations, focus trap, accessibility   | ✅     | ✅  |
 | **Toast**                | Notification toasts with 4 variants, 6 positions, 4 animations, actions  | ✅     | ✅  |
 | **Empty**                | Empty states with 4 variants, 4 sizes, 13 preset icons, animations       | ✅     | ✅  |
 | **Autocomplete**         | Search input with filtering, keyboard nav, grouping, async, composable   | ✅     | ✅  |
@@ -307,15 +307,15 @@ import { Chip } from "saha-ui";
 </Chip>
 ```
 
-### Divider
+### Separator
 
 ```tsx
-import { Divider } from "saha-ui";
+import { Separator } from "saha-ui";
 
-<Divider />
-<Divider label="OR" />
-<Divider variant="gradient" thickness="medium" />
-<Divider orientation="vertical" className="h-24" />
+<Separator />
+<Separator label="OR" />
+<Separator variant="gradient" thickness="medium" />
+<Separator orientation="vertical" className="h-24" />
 ```
 
 ### Accordion
@@ -1231,7 +1231,7 @@ import { ButtonGroup, Button } from "saha-ui";
 **Contextual Usage:**
 
 ```tsx
-// In modal footer
+// In dialog footer
 <Card>
   <CardHeader>
     <CardTitle>Confirm Action</CardTitle>
@@ -1805,7 +1805,7 @@ const customChipClass = chipVariants({
 
 ---
 
-### Divider
+### Separator
 
 Content separator component with 5 modern variants, optional labels, and decorative elements.
 
@@ -1815,35 +1815,35 @@ Content separator component with 5 modern variants, optional labels, and decorat
 **Spacing:** `none` `xs` `sm` `md` `lg` `xl`
 
 ```tsx
-import { Divider } from "saha-ui";
+import { Separator } from "saha-ui";
 
-// Basic divider
-<Divider />
+// Basic Separator
+<Separator />
 
 // With label
-<Divider label="OR" />
+<Separator label="OR" />
 
 // Gradient variant
-<Divider variant="gradient" thickness="medium" />
+<Separator variant="gradient" thickness="medium" />
 
-// Vertical divider
+// Vertical Separator
 <div className="flex items-center h-24">
   <div>Section 1</div>
-  <Divider orientation="vertical" className="h-full" />
+  <Separator orientation="vertical" className="h-full" />
   <div>Section 2</div>
 </div>
 
 // Decorative with label
-<Divider label="Continue Reading" decorative />
+<Separator label="Continue Reading" decorative />
 
 // Custom positioning
-<Divider label="Section Start" labelPosition="left" variant="dashed" />
+<Separator label="Section Start" labelPosition="left" variant="dashed" />
 
 // Different thickness
-<Divider thickness="thick" variant="solid" />
+<Separator thickness="thick" variant="solid" />
 
 // Custom spacing
-<Divider spacing="xl" variant="gradient" />
+<Separator spacing="xl" variant="gradient" />
 ```
 
 **Features:**
@@ -1870,7 +1870,7 @@ import { Divider } from "saha-ui";
 **Props:**
 
 ```tsx
-interface DividerProps {
+interface SeparatorProps {
   variant?: "solid" | "dashed" | "dotted" | "gradient" | "glass";
   orientation?: "horizontal" | "vertical";
   thickness?: "thin" | "medium" | "thick";
@@ -1892,7 +1892,7 @@ interface DividerProps {
       Sign in with Email
     </Button>
 
-    <Divider label="OR" variant="gradient" spacing="sm" />
+    <Separator label="OR" variant="gradient" spacing="sm" />
 
     <Button variant="outline" className="w-full">
       Continue with GitHub
@@ -1904,7 +1904,7 @@ interface DividerProps {
 <article>
   <p>Introduction paragraph...</p>
 
-  <Divider
+  <Separator
     label="Section 1"
     labelPosition="left"
     variant="dashed"
@@ -1913,7 +1913,7 @@ interface DividerProps {
 
   <p>Main content...</p>
 
-  <Divider
+  <Separator
     label="Conclusion"
     labelPosition="left"
     variant="dashed"
@@ -1922,13 +1922,13 @@ interface DividerProps {
 
   <p>Summary...</p>
 
-  <Divider decorative spacing="lg" variant="gradient" />
+  <Separator decorative spacing="lg" variant="gradient" />
 </article>
 
 // Vertical layout sections
 <div className="flex h-64">
   <div className="flex-1">Left Panel</div>
-  <Divider
+  <Separator
     orientation="vertical"
     variant="gradient"
     className="h-full"
@@ -1939,9 +1939,9 @@ interface DividerProps {
 // Dashboard sections
 <div className="flex gap-4 h-48">
   <Card className="flex-1">Stats 1</Card>
-  <Divider orientation="vertical" variant="glass" className="h-full" />
+  <Separator orientation="vertical" variant="glass" className="h-full" />
   <Card className="flex-1">Stats 2</Card>
-  <Divider orientation="vertical" variant="glass" className="h-full" />
+  <Separator orientation="vertical" variant="glass" className="h-full" />
   <Card className="flex-1">Stats 3</Card>
 </div>
 ```
@@ -1950,24 +1950,24 @@ interface DividerProps {
 
 ```tsx
 import {
-  dividerVariants,
-  dividerLineVariants,
-  dividerLabelVariants,
+  SeparatorVariants,
+  SeparatorLineVariants,
+  SeparatorLabelVariants,
 } from "saha-ui";
 
 // Use exported variants for custom styling
-const customContainerClass = dividerVariants({
+const customContainerClass = SeparatorVariants({
   orientation: "horizontal",
   spacing: "lg",
 });
 
-const customLineClass = dividerLineVariants({
+const customLineClass = SeparatorLineVariants({
   variant: "gradient",
   orientation: "horizontal",
   thickness: "medium",
 });
 
-const customLabelClass = dividerLabelVariants({
+const customLabelClass = SeparatorLabelVariants({
   orientation: "horizontal",
 });
 ```
@@ -2484,7 +2484,7 @@ import { CheckCircle, Star, Zap, Heart } from 'lucide-react';
 
 - **default** - Clean, minimal design with standard list styling
 - **bordered** - Card background with border, shadow, and backdrop blur (20px)
-- **divided** - Items separated by divider lines, subtle hover effects
+- **divided** - Items separated by Separator lines, subtle hover effects
 - **striped** - Alternating background colors for better readability
 - **cards** - Individual card-style items with gradient overlay on hover
 

package/dist/components/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,mBAAmB,CAAC;AAwH3B,eAAO,MAAM,SAAS,uFA2ErB,CAAC;AAIF,eAAO,MAAM,aAAa,2FAsBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,iGA6C3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,8FAsB3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,mBAAmB,CAAC;AA6H3B,eAAO,MAAM,SAAS,uFA6GrB,CAAC;AAIF,eAAO,MAAM,aAAa,2FAsBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,iGA6C3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,8FAsB3B,CAAC"}

package/dist/components/Accordion/index.js

@@ -1,8 +1,9 @@
-import { jsx as n, jsxs as v } from "react/jsx-runtime";
-import p, { createContext as g, useState as V, useCallback as R, useContext as h } from "react";
+import { jsx as d, jsxs as y } from "react/jsx-runtime";
+import p, { createContext as g, useState as I, useEffect as E, useCallback as R, useContext as h } from "react";
 import { cva as u } from "class-variance-authority";
-import { cn as d } from "../../lib/utils.js";
-import { ChevronDown as j } from "lucide-react";
+import { cn as b } from "../../lib/utils.js";
+import { ChevronDown as T } from "lucide-react";
+import { createValidator as j, isValidBoolean as P, commonValidators as _ } from "../../lib/validation.js";
 const w = g(
   void 0
 ), x = () => {
@@ -19,7 +20,7 @@ const w = g(
       "AccordionTrigger and AccordionContent must be used within an AccordionItem component"
     );
   return e;
-}, T = u(
+}, B = u(
   "w-full space-y-0 rounded-2xl overflow-hidden transition-all duration-300 relative isolate hover:shadow-2xl",
   {
     variants: {
@@ -36,7 +37,7 @@ const w = g(
       variant: "default"
     }
   }
-), E = u(
+), D = u(
   "group relative w-full overflow-hidden transition-all duration-300 ease-out border-b border-border/30 last:border-b-0 backdrop-blur-sm shadow-sm hover:shadow-lg transition-shadow isolate before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-primary/5 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
   {
     variants: {
@@ -54,7 +55,7 @@ const w = g(
       disabled: !1
     }
   }
-), P = u(
+), H = u(
   "w-full flex justify-between items-center cursor-pointer transition-all duration-300 px-6 py-4 gap-4 relative isolate hover:scale-[1.01] active:scale-[0.99]",
   {
     variants: {
@@ -67,7 +68,7 @@ const w = g(
       isOpen: !1
     }
   }
-), D = u(
+), S = u(
   "w-full px-6 overflow-hidden transition-all duration-500 ease-in-out bg-card/20",
   {
     variants: {
@@ -80,44 +81,61 @@ const w = g(
       isOpen: !1
     }
   }
-), H = p.forwardRef(
+), U = p.forwardRef(
   ({
     type: e = "single",
-    value: o,
-    defaultValue: a,
-    onValueChange: r,
-    variant: b = "default",
-    className: t,
-    collapsible: i = !1,
+    value: a,
+    defaultValue: i,
+    onValueChange: o,
+    variant: c = "default",
+    className: r,
+    collapsible: n = !1,
     children: s
   }, m) => {
-    const [N, k] = V(() => a !== void 0 ? a : e === "multiple" ? [] : ""), f = o !== void 0 ? o : N, O = R(
-      (l) => {
-        let c;
+    const [k, N] = I(() => i !== void 0 ? i : e === "multiple" ? [] : ""), l = a !== void 0 ? a : k;
+    E(() => {
+      const t = j("Accordion");
+      t.validateEnum("type", e, ["single", "multiple"]), t.validateEnum("variant", c, [
+        "default",
+        "controlled",
+        "allopen",
+        "toggle",
+        "firstopen",
+        "glass"
+      ]), t.validateType(
+        "collapsible",
+        n,
+        "boolean",
+        P
+      ), s || t.warn("Accordion should have AccordionItem children"), _.className(t, r);
+    }, [e, c, n, s, r]);
+    const O = R(
+      (t) => {
+        let f;
         if (e === "multiple") {
-          const y = Array.isArray(f) ? f : [];
-          y.includes(l) ? c = y.filter((I) => I !== l) : c = [...y, l];
+          const v = Array.isArray(l) ? l : [];
+          v.includes(t) ? f = v.filter((V) => V !== t) : f = [...v, t];
         } else
-          i && f === l ? c = "" : c = l;
-        r && r(c), o === void 0 && k(c);
+          n && l === t ? f = "" : f = t;
+        o && o(f), a === void 0 && N(f);
       },
-      [e, f, i, r, o]
+      [e, l, n, o, a]
     );
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ d(
       w.Provider,
       {
         value: {
-          value: f,
+          value: l,
           onValueChange: O,
-          variant: b,
+          variant: c,
           type: e,
-          collapsible: i
+          collapsible: n
         },
-        children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ d(
           "div",
           {
             ref: m,
-            className: d(T({ variant: b }), t),
+            className: b(B({ variant: c }), r),
             children: s
           }
         )
@@ -125,51 +143,51 @@ const w = g(
     );
   }
 );
-H.displayName = "Accordion";
-const S = p.forwardRef(({ value: e, className: o, disabled: a = !1, children: r }, b) => {
-  const { value: t, type: i } = x(), s = i === "multiple" ? Array.isArray(t) && t.includes(e) : t === e;
-  return /* @__PURE__ */ n(A.Provider, { value: { isOpen: s, disabled: a, value: e }, children: /* @__PURE__ */ n(
+U.displayName = "Accordion";
+const q = p.forwardRef(({ value: e, className: a, disabled: i = !1, children: o }, c) => {
+  const { value: r, type: n } = x(), s = n === "multiple" ? Array.isArray(r) && r.includes(e) : r === e;
+  return /* @__PURE__ */ d(A.Provider, { value: { isOpen: s, disabled: i, value: e }, children: /* @__PURE__ */ d(
     "div",
     {
-      ref: b,
-      className: d(E({ isOpen: s, disabled: a }), o),
+      ref: c,
+      className: b(D({ isOpen: s, disabled: i }), a),
       "data-state": s ? "open" : "closed",
-      children: r
+      children: o
     }
   ) });
 });
-S.displayName = "AccordionItem";
-const U = p.forwardRef(({ children: e, className: o, icon: a }, r) => {
-  const { onValueChange: b } = x(), { isOpen: t, disabled: i, value: s } = C(), m = () => {
-    i || b(s);
+q.displayName = "AccordionItem";
+const z = p.forwardRef(({ children: e, className: a, icon: i }, o) => {
+  const { onValueChange: c } = x(), { isOpen: r, disabled: n, value: s } = C(), m = () => {
+    n || c(s);
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ y(
     "button",
     {
-      ref: r,
+      ref: o,
       type: "button",
-      className: d(P({ isOpen: t }), o),
+      className: b(H({ isOpen: r }), a),
       onClick: m,
-      "aria-expanded": t,
-      disabled: i,
+      "aria-expanded": r,
+      disabled: n,
       children: [
-        /* @__PURE__ */ n("h3", { className: "text-base font-semibold text-foreground tracking-wide flex-1 text-left", children: e }),
-        /* @__PURE__ */ v("div", { className: "relative", children: [
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ d("h3", { className: "text-base font-semibold text-foreground tracking-wide flex-1 text-left", children: e }),
+        /* @__PURE__ */ y("div", { className: "relative", children: [
+          /* @__PURE__ */ d(
             "div",
             {
-              className: d(
+              className: b(
                 "absolute -inset-2 bg-gradient-to-r from-primary/20 via-secondary/20 to-accent/20 rounded-full blur-md opacity-0 transition-opacity duration-300",
-                t && "opacity-100"
+                r && "opacity-100"
               )
             }
           ),
-          a || /* @__PURE__ */ n(
-            j,
+          i || /* @__PURE__ */ d(
+            T,
             {
-              className: d(
+              className: b(
                 "relative h-5 w-5 transition-all duration-500 ease-out",
-                t ? "rotate-180 text-primary" : "rotate-0 text-muted-foreground group-hover:text-foreground"
+                r ? "rotate-180 text-primary" : "rotate-0 text-muted-foreground group-hover:text-foreground"
               )
             }
           )
@@ -178,21 +196,21 @@ const U = p.forwardRef(({ children: e, className: o, icon: a }, r) => {
     }
   );
 });
-U.displayName = "AccordionTrigger";
-const q = p.forwardRef(({ children: e, className: o }, a) => {
-  const { isOpen: r } = C();
-  return /* @__PURE__ */ n(
+z.displayName = "AccordionTrigger";
+const F = p.forwardRef(({ children: e, className: a }, i) => {
+  const { isOpen: o } = C();
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: a,
-      className: d(D({ isOpen: r }), o),
-      "data-state": r ? "open" : "closed",
-      children: /* @__PURE__ */ n(
+      ref: i,
+      className: b(S({ isOpen: o }), a),
+      "data-state": o ? "open" : "closed",
+      children: /* @__PURE__ */ d(
         "div",
         {
-          className: d(
+          className: b(
             "text-muted-foreground leading-relaxed transition-all duration-300",
-            r ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0"
+            o ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0"
           ),
           children: e
         }
@@ -200,10 +218,10 @@ const q = p.forwardRef(({ children: e, className: o }, a) => {
     }
   );
 });
-q.displayName = "AccordionContent";
+F.displayName = "AccordionContent";
 export {
-  H as Accordion,
-  q as AccordionContent,
-  S as AccordionItem,
-  U as AccordionTrigger
+  U as Accordion,
+  F as AccordionContent,
+  q as AccordionItem,
+  z as AccordionTrigger
 };

package/dist/components/Alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAuP3C,QAAA,MAAM,KAAK,mFAsFV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAuP3C,QAAA,MAAM,KAAK,mFA2HV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/index.js

@@ -1,8 +1,9 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import v, { useState as m } from "react";
-import { cva as w } from "class-variance-authority";
-import { cn as p } from "../../lib/utils.js";
-const x = w(
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import m, { useState as w, useEffect as p } from "react";
+import { cva as x } from "class-variance-authority";
+import { cn as N } from "../../lib/utils.js";
+import { createValidator as k, isValidBoolean as u, commonValidators as y } from "../../lib/validation.js";
+const L = x(
   "relative w-full p-4 transition-all duration-300 ease-out overflow-hidden isolate group hover:scale-[1.01] hover:shadow-2xl",
   {
     variants: {
@@ -159,12 +160,12 @@ const x = w(
       rounded: !0
     }
   }
-), N = ({ status: t }) => {
-  const r = "w-6 h-6 flex-shrink-0";
-  return t === "success" ? /* @__PURE__ */ e(
+), C = ({ status: a }) => {
+  const t = "w-6 h-6 flex-shrink-0";
+  return a === "success" ? /* @__PURE__ */ e(
     "svg",
     {
-      className: r,
+      className: t,
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -178,10 +179,10 @@ const x = w(
         }
       )
     }
-  ) : t === "warning" ? /* @__PURE__ */ e(
+  ) : a === "warning" ? /* @__PURE__ */ e(
     "svg",
     {
-      className: r,
+      className: t,
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -195,10 +196,10 @@ const x = w(
         }
       )
     }
-  ) : t === "danger" ? /* @__PURE__ */ e(
+  ) : a === "danger" ? /* @__PURE__ */ e(
     "svg",
     {
-      className: r,
+      className: t,
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -215,7 +216,7 @@ const x = w(
   ) : /* @__PURE__ */ e(
     "svg",
     {
-      className: r,
+      className: t,
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -230,49 +231,66 @@ const x = w(
       )
     }
   );
-}, k = v.forwardRef(
+}, M = m.forwardRef(
   ({
-    variant: t = "solid",
-    message: r = "",
+    variant: a = "solid",
+    message: t = "",
     title: s,
     status: o = "info",
-    rounded: c = !0,
-    closeable: d = !1,
-    className: l,
-    ...u
-  }, f) => {
-    const [b, g] = m(!0);
-    if (!b) return null;
-    const h = r.split(/(https?:\/\/[^\s]+)/).map(
-      (a, n) => a.match(/(https?:\/\/[^\s]+)/) ? /* @__PURE__ */ e(
+    rounded: n = !0,
+    closeable: i = !1,
+    className: c,
+    ...f
+  }, b) => {
+    const [g, h] = w(!0);
+    if (p(() => {
+      const r = k("Alert");
+      r.validateEnum("variant", a, [
+        "solid",
+        "subtle",
+        "left-accent",
+        "top-accent",
+        "outline",
+        "glass"
+      ]), r.validateEnum("status", o, [
+        "info",
+        "success",
+        "warning",
+        "danger"
+      ]), r.validateType("rounded", n, "boolean", u), r.validateType("closeable", i, "boolean", u), !t && !s && r.warn(
+        "Alert should have either a message or title for accessibility"
+      ), y.className(r, c);
+    }, [a, o, n, i, t, s, c]), !g) return null;
+    const v = t.split(/(https?:\/\/[^\s]+)/).map(
+      (r, d) => r.match(/(https?:\/\/[^\s]+)/) ? /* @__PURE__ */ e(
         "a",
         {
           className: "underline hover:opacity-80 transition-opacity font-medium",
-          href: a,
+          href: r,
           target: "_blank",
           rel: "noopener noreferrer",
-          children: a
+          children: r
         },
-        n
-      ) : /* @__PURE__ */ e("span", { children: a }, n)
+        d
+      ) : /* @__PURE__ */ e("span", { children: r }, d)
     );
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: f,
-        className: p(x({ variant: t, status: o, rounded: c }), l),
+        ref: b,
+        className: N(L({ variant: a, status: o, rounded: n }), c),
         role: "alert",
-        ...u,
-        children: /* @__PURE__ */ i("div", { className: "relative z-10 flex items-start gap-3", children: [
-          /* @__PURE__ */ e(N, { status: o }),
-          /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+        ...f,
+        children: /* @__PURE__ */ l("div", { className: "relative z-10 flex items-start gap-3", children: [
+          /* @__PURE__ */ e(C, { status: o }),
+          /* @__PURE__ */ l("div", { className: "flex-1 min-w-0", children: [
             s && /* @__PURE__ */ e("h4", { className: "font-semibold text-base mb-1 tracking-tight", children: s }),
-            /* @__PURE__ */ e("div", { className: "text-sm leading-relaxed opacity-95", children: h })
+            /* @__PURE__ */ e("div", { className: "text-sm leading-relaxed opacity-95", children: v })
           ] }),
-          d && /* @__PURE__ */ e(
+          i && /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => g(!1),
+              onClick: () => h(!1),
               className: "flex-shrink-0 p-1 rounded-lg hover:bg-black/10 dark:hover:bg-white/10 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-current/30",
               "aria-label": "Close alert",
               children: /* @__PURE__ */ e(
@@ -300,7 +318,7 @@ const x = w(
     );
   }
 );
-k.displayName = "Alert";
+M.displayName = "Alert";
 export {
-  k as default
+  M as default
 };