@la-batcave/ui 3.5.0 → 4.0.0

package/dist/Alert.d.ts

@@ -7,21 +7,31 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
         size?: number;
         className?: string;
     }>;
-    /** Accent color variant controlling the left border and icon color. */
+    /** Accent color variant controlling the icon and optional background tint. */
     variant?: AlertVariant;
     /** Title displayed prominently above the description. */
     title?: React.ReactNode;
+    /**
+     * When true, the entire card background is tinted with the variant color.
+     * When false, the card stays neutral and only the icon gets a colored badge.
+     * @default true
+     */
+    filled?: boolean;
 }
 /**
  * Alert banner for displaying contextual messages with icon, variant, title, and description.
  *
  * @example
- * import { Alert } from '@la-batcave/ui/Alert';
- * import { AlertTriangle } from 'lucide-react';
+ * // Filled (default) — tinted background
+ * <Alert icon={Info} variant="info" title="Information">Message</Alert>
  *
- * <Alert icon={AlertTriangle} variant="warning" title="Attention">
- *   Votre certificat SSL expire dans 43 jours.
- * </Alert>
+ * @example
+ * // Not filled — neutral card, icon badge
+ * <Alert icon={Info} variant="info" title="Information" filled={false}>Message</Alert>
+ *
+ * @example
+ * // No variant — fully neutral
+ * <Alert icon={Shield} title="Note">Message</Alert>
  */
-declare function Alert({ icon: Icon, variant, title, children, className, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+declare function Alert({ icon: Icon, variant, title, children, className, filled, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
 export { Alert };

package/dist/Alert.js

@@ -1,50 +1,53 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { c as l } from "./_shared/utils-eGXXUFl7.js";
-import { Card as c } from "./Card.js";
-const a = {
-  primary: "border-l-3 border-l-primary",
-  info: "border-l-3 border-l-info",
-  success: "border-l-3 border-l-success",
-  destructive: "border-l-3 border-l-destructive",
-  warning: "border-l-3 border-l-warning"
-}, m = {
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { c as r } from "./_shared/utils-eGXXUFl7.js";
+import { Card as f } from "./Card.js";
+const d = {
   primary: "text-primary",
   info: "text-info",
   success: "text-success",
   destructive: "text-destructive",
   warning: "text-warning"
+}, x = {
+  primary: "bg-primary/15",
+  info: "bg-info/15",
+  success: "bg-success/15",
+  destructive: "bg-destructive/15",
+  warning: "bg-warning/15"
 };
-function b({
+function N({
   icon: t,
-  variant: r,
-  title: s,
+  variant: s,
+  title: c,
   children: i,
-  className: d,
-  ...n
+  className: a,
+  filled: n = !0,
+  ...l
 }) {
+  const o = s && !n, u = c && !i;
   return /* @__PURE__ */ e(
-    c,
+    f,
     {
-      className: l(
-        "!p-4 transition-all",
-        r && a[r],
-        d
+      accent: n ? s : void 0,
+      className: r(
+        "!p-4 !shadow-none",
+        a
       ),
       role: "alert",
-      ...n,
-      children: /* @__PURE__ */ o("div", { className: "flex items-start gap-3", children: [
-        t && /* @__PURE__ */ e(
+      ...l,
+      children: /* @__PURE__ */ m("div", { className: r("flex gap-3", u ? "items-center" : "items-start"), children: [
+        t && o && /* @__PURE__ */ e("div", { className: r("shrink-0 w-8 h-8 rounded-full flex items-center justify-center", x[s]), children: /* @__PURE__ */ e(t, { size: 16, className: d[s] }) }),
+        t && !o && /* @__PURE__ */ e(
           "div",
           {
-            className: l(
+            className: r(
               "shrink-0 h-5 flex items-center",
-              r ? m[r] : "text-muted-foreground"
+              s ? d[s] : "text-muted-foreground"
             ),
             children: /* @__PURE__ */ e(t, { size: 16 })
           }
         ),
-        /* @__PURE__ */ o("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
-          s && /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-foreground", children: s }),
+        /* @__PURE__ */ m("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
+          c && /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-foreground", children: c }),
           i && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: i })
         ] })
       ] })
@@ -52,5 +55,5 @@ function b({
   );
 }
 export {
-  b as Alert
+  N as Alert
 };

package/dist/Button.js

@@ -1,10 +1,10 @@
-import { jsx as n } from "react/jsx-runtime";
-import { S as g } from "./_shared/index-BrLJJgkl.js";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { S as l } from "./_shared/index-BrLJJgkl.js";
 import { c } from "./_shared/index-uPOYJZpG.js";
-import { Loader2 as l } from "lucide-react";
-import { c as d } from "./_shared/utils-eGXXUFl7.js";
-const i = c(
-  "relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium border border-transparent cursor-pointer transition-all select-none outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:not-disabled:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
+import { Loader2 as u } from "lucide-react";
+import { c as o } from "./_shared/utils-eGXXUFl7.js";
+const d = c(
+  "relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium border border-transparent cursor-pointer transition-all select-none outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
   {
     variants: {
       variant: {
@@ -21,7 +21,7 @@ const i = c(
         "ghost-success": "bg-transparent text-success border-transparent hover:not-disabled:bg-success/15",
         "ghost-warning": "bg-transparent text-warning border-transparent hover:not-disabled:bg-warning/15",
         "ghost-info": "bg-transparent text-info border-transparent hover:not-disabled:bg-info/15",
-        semi: "bg-secondary text-muted-foreground border-transparent hover:not-disabled:bg-secondary/80 hover:not-disabled:text-foreground",
+        semi: "bg-foreground/15 text-foreground border-transparent hover:not-disabled:bg-foreground/25",
         "semi-primary": "bg-primary/15 text-primary border-transparent hover:not-disabled:bg-primary/25",
         "semi-destructive": "bg-destructive/15 text-destructive border-transparent hover:not-disabled:bg-destructive/25",
         "semi-success": "bg-success/15 text-success border-transparent hover:not-disabled:bg-success/25",
@@ -30,10 +30,10 @@ const i = c(
         link: "bg-transparent text-primary border-transparent underline-offset-4 hover:not-disabled:underline"
       },
       size: {
-        sm: "text-xs px-3 py-1 rounded-md h-7",
-        md: "text-sm px-4 py-2 rounded-md h-9",
-        lg: "text-base px-6 py-3 rounded-md h-11",
-        icon: "size-9 rounded-md"
+        sm: "text-xs px-3 py-1 rounded-4xl h-7",
+        md: "text-sm px-4 py-2 rounded-4xl h-9",
+        lg: "text-base px-6 py-3 rounded-4xl h-11",
+        icon: "size-9 rounded-4xl"
       }
     },
     defaultVariants: {
@@ -42,31 +42,34 @@ const i = c(
     }
   }
 );
-function h({ className: o, variant: e, size: r, loading: s = !1, asChild: b = !1, children: a, ...t }) {
-  return b ? /* @__PURE__ */ n(
-    g,
+function x({ className: a, variant: e, size: r, loading: n = !1, asChild: b = !1, children: i, ...s }) {
+  return b ? /* @__PURE__ */ t(
+    l,
     {
       "data-slot": "button",
       "data-variant": e,
       "data-size": r,
-      className: d(i({ variant: e, size: r, className: o })),
-      ...t,
-      children: a
+      className: o(d({ variant: e, size: r, className: a })),
+      ...s,
+      children: i
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ g(
     "button",
     {
       "data-slot": "button",
       "data-variant": e,
       "data-size": r,
-      disabled: s || t.disabled,
-      className: d(i({ variant: e, size: r, className: o })),
-      ...t,
-      children: s ? /* @__PURE__ */ n(l, { className: "animate-spin" }) : a
+      disabled: n || s.disabled,
+      className: o(d({ variant: e, size: r, className: a })),
+      ...s,
+      children: [
+        n && /* @__PURE__ */ t("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t(u, { className: "animate-spin" }) }),
+        /* @__PURE__ */ t("span", { className: o("inline-flex items-center justify-center gap-2", n && "invisible"), children: i })
+      ]
     }
   );
 }
 export {
-  h as Button,
-  i as buttonVariants
+  x as Button,
+  d as buttonVariants
 };

package/dist/Card.d.ts

@@ -1,13 +1,9 @@
 import * as React from "react";
 /** Accent color options for Card. */
 export type AccentColor = 'primary' | 'success' | 'info' | 'warning' | 'destructive';
-/** Accent side options for Card. */
-export type AccentSide = 'top' | 'bottom' | 'left' | 'right';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Side of the card to display the accent border. */
-    accentSide?: AccentSide;
-    /** Color of the accent border. */
-    accentColor?: AccentColor;
+    /** Tints the card background with a subtle color. */
+    accent?: AccentColor;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/Card.js

@@ -1,98 +1,75 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { c as t } from "./_shared/utils-eGXXUFl7.js";
-const i = {
-  top: {
-    primary: "border-t-2 !border-t-primary",
-    success: "border-t-2 !border-t-success",
-    info: "border-t-2 !border-t-info",
-    warning: "border-t-2 !border-t-warning",
-    destructive: "border-t-2 !border-t-destructive"
-  },
-  bottom: {
-    primary: "border-b-2 !border-b-primary",
-    success: "border-b-2 !border-b-success",
-    info: "border-b-2 !border-b-info",
-    warning: "border-b-2 !border-b-warning",
-    destructive: "border-b-2 !border-b-destructive"
-  },
-  left: {
-    primary: "border-l-2 !border-l-primary",
-    success: "border-l-2 !border-l-success",
-    info: "border-l-2 !border-l-info",
-    warning: "border-l-2 !border-l-warning",
-    destructive: "border-l-2 !border-l-destructive"
-  },
-  right: {
-    primary: "border-r-2 !border-r-primary",
-    success: "border-r-2 !border-r-success",
-    info: "border-r-2 !border-r-info",
-    warning: "border-r-2 !border-r-warning",
-    destructive: "border-r-2 !border-r-destructive"
-  }
-}, n = s(({ className: d, accentSide: r, accentColor: e, ...a }, b) => /* @__PURE__ */ o(
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { c as s } from "./_shared/utils-eGXXUFl7.js";
+const t = {
+  primary: "bg-primary/20 border-primary/30 dark:bg-primary/10 dark:border-primary/20 backdrop-blur-md",
+  success: "bg-success/20 border-success/30 dark:bg-success/10 dark:border-success/20 backdrop-blur-md",
+  info: "bg-info/20 border-info/30 dark:bg-info/10 dark:border-info/20 backdrop-blur-md",
+  warning: "bg-warning/20 border-warning/30 dark:bg-warning/10 dark:border-warning/20 backdrop-blur-md",
+  destructive: "bg-destructive/20 border-destructive/30 dark:bg-destructive/10 dark:border-destructive/20 backdrop-blur-md"
+}, c = o(({ className: d, accent: r, ...e }, i) => /* @__PURE__ */ a(
   "div",
   {
-    ref: b,
-    className: t(
-      "rounded-lg border border-border blurred-bg shadow-sm flex flex-col gap-5 p-5",
-      r && e && i[r]?.[e],
+    ref: i,
+    className: s(
+      "rounded-4xl border ring-1 ring-foreground/5 dark:ring-foreground/10 shadow-md flex flex-col gap-6 p-5",
+      r ? t[r] : "border-border blurred-bg",
       d
     ),
-    ...a
+    ...e
   }
 ));
-n.displayName = "Card";
-const c = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+c.displayName = "Card";
+const n = o(({ className: d, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
-    className: t("flex flex-col space-y-1.5", d),
+    className: s("flex flex-col space-y-1.5", d),
     ...r
   }
 ));
-c.displayName = "CardHeader";
-const l = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+n.displayName = "CardHeader";
+const b = o(({ className: d, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
-    className: t("text-base font-semibold leading-none tracking-tight", d),
+    className: s("text-base font-semibold leading-none tracking-tight", d),
     ...r
   }
 ));
-l.displayName = "CardTitle";
-const m = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+b.displayName = "CardTitle";
+const m = o(({ className: d, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
-    className: t("text-sm text-muted-foreground", d),
+    className: s("text-sm text-muted-foreground", d),
     ...r
   }
 ));
 m.displayName = "CardDescription";
-const p = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+const l = o(({ className: d, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
-    className: t(d),
+    className: s(d),
     ...r
   }
 ));
-p.displayName = "CardContent";
-const f = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+l.displayName = "CardContent";
+const g = o(({ className: d, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
-    className: t("flex items-center gap-2", d),
+    className: s("flex items-center gap-2", d),
     ...r
   }
 ));
-f.displayName = "CardFooter";
+g.displayName = "CardFooter";
 export {
-  n as Card,
-  p as CardContent,
+  c as Card,
+  l as CardContent,
   m as CardDescription,
-  f as CardFooter,
-  c as CardHeader,
-  l as CardTitle
+  g as CardFooter,
+  n as CardHeader,
+  b as CardTitle
 };

package/dist/CodeBlock.js

@@ -139,11 +139,11 @@ function O({ text: a, className: n }) {
     {
       onClick: p,
       className: y(
-        "inline-flex items-center justify-center rounded-md p-1.5",
+        "inline-flex items-center justify-center rounded-xl p-1.5",
         "text-muted-foreground hover:text-foreground",
         "bg-transparent hover:bg-secondary",
         "transition-all duration-150",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30",
         n
       ),
       "aria-label": r ? "Copied" : "Copy code",

package/dist/Collapse.js

@@ -5,8 +5,8 @@ import { ChevronDown as F } from "lucide-react";
 import { c as b } from "./_shared/utils-eGXXUFl7.js";
 const y = H(null);
 function G({
-  title: p,
-  children: x,
+  title: x,
+  children: p,
   icon: s,
   defaultOpen: r = !1,
   open: n,
@@ -36,7 +36,7 @@ function G({
     "div",
     {
       className: b(
-        "bg-card/85 backdrop-blur-xl border border-border rounded-lg overflow-hidden transition-colors hover:border-secondary",
+        "bg-card/85 backdrop-blur-xl border border-border rounded-2xl overflow-hidden transition-colors hover:border-secondary ring-1 ring-foreground/5 dark:ring-foreground/10",
         g
       ),
       ...l,
@@ -50,7 +50,7 @@ function G({
             className: "flex items-center gap-3 w-full px-4 py-3 text-left text-sm font-medium text-foreground cursor-pointer",
             children: [
               s && /* @__PURE__ */ e("span", { className: "text-muted-foreground shrink-0 inline-flex items-center", children: /* @__PURE__ */ e(s, { size: 16 }) }),
-              /* @__PURE__ */ e("span", { className: "flex-1 min-w-0", children: p }),
+              /* @__PURE__ */ e("span", { className: "flex-1 min-w-0", children: x }),
               /* @__PURE__ */ e(
                 F,
                 {
@@ -70,18 +70,18 @@ function G({
             ref: C,
             style: { height: A },
             className: "overflow-hidden transition-[height] duration-200 ease-in-out",
-            children: /* @__PURE__ */ e("div", { className: "px-4 pb-4 text-sm text-muted-foreground", children: x })
+            children: /* @__PURE__ */ e("div", { className: "px-4 pb-4 text-sm text-muted-foreground", children: p })
           }
         )
       ]
     }
   );
 }
-function P({ children: p, accordion: x = !1, className: s, ...r }) {
+function P({ children: x, accordion: p = !1, className: s, ...r }) {
   const [n, i] = v(null), g = I((c) => {
     i((h) => h === c ? null : c);
-  }, []), l = /* @__PURE__ */ e("div", { className: b("flex flex-col gap-2", s), ...r, children: p });
-  return x ? /* @__PURE__ */ e(y.Provider, { value: { openId: n, toggle: g }, children: l }) : l;
+  }, []), l = /* @__PURE__ */ e("div", { className: b("flex flex-col gap-2", s), ...r, children: x });
+  return p ? /* @__PURE__ */ e(y.Provider, { value: { openId: n, toggle: g }, children: l }) : l;
 }
 export {
   G as Collapse,