@la-batcave/ui 3.1.2

package/README.md

@@ -0,0 +1,95 @@
+# @la-batcave/ui
+
+Design system React pour les projets **La Batcave**.
+
+30+ composants shadcn-style + 10 backgrounds animes + tokens CSS + theme dark/light.
+
+**Showcase** : [ui.btcv.fr](https://ui.btcv.fr)
+
+---
+
+## Installation
+
+```bash
+npm install @la-batcave/ui lucide-react
+```
+
+| Package | Role | Requis ? |
+|---|---|---|
+| `@la-batcave/ui` | Composants + styles | Oui |
+| `lucide-react` | Icones (peer dep) | Oui |
+
+### Installer Tailwind CSS v4
+
+```bash
+npm install -D tailwindcss @tailwindcss/vite
+```
+
+Plugin Vite (`vite.config.js`) :
+
+```js
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+```
+
+### Configurer le CSS
+
+Creer un fichier `globals.css` :
+
+```css
+@layer base;
+
+@import "tailwindcss/theme" layer(theme);
+@import "tailwindcss/utilities" layer(utilities);
+
+@import "@la-batcave/ui/styles.css";
+```
+
+> **Attention** : Le `@layer base;` AVANT les imports est obligatoire. Sans ca, le reset CSS ecrase toutes les utilities Tailwind.
+
+### Importer et utiliser
+
+```jsx
+import './globals.css';
+import { Button } from '@la-batcave/ui/Button';
+import { Card, CardHeader, CardBody } from '@la-batcave/ui/Card';
+import { cn } from '@la-batcave/ui';
+```
+
+Chaque composant est un entry point separe. Le seul export du barrel (`@la-batcave/ui`) est `cn()`.
+
+---
+
+## Theme
+
+Dark-first. Le theme sombre est actif par defaut.
+
+| Token | Dark | Light |
+|---|---|---|
+| `--primary` | `#E7BB1D` (gold) | `#E7BB1D` |
+| `--background` | `#1D1917` | `#FAFAF8` |
+| `--foreground` | `#F5F0E8` | `#1A1714` |
+| `--card` | `#252220` | `#FFFFFF` |
+
+Tous les tokens sont utilisables en Tailwind : `bg-primary`, `text-foreground`, `border-border`, etc.
+
+---
+
+## Developpement
+
+```bash
+npm run build    # vite build && tsc && move-types
+```
+
+## Publication
+
+Automatique via GitHub Actions a chaque push sur `main` → publie sur npm.
+
+---
+
+## Licence
+
+MIT

package/dist/Alert.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+/** Variant controlling the accent color of the alert. */
+export type AlertVariant = 'primary' | 'info' | 'success' | 'destructive' | 'warning';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Icon displayed at the start of the alert. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Accent color variant controlling the left border and icon color. */
+    variant?: AlertVariant;
+    /** Title displayed prominently above the description. */
+    title?: React.ReactNode;
+}
+/**
+ * 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';
+ *
+ * <Alert icon={AlertTriangle} variant="warning" title="Attention">
+ *   Votre certificat SSL expire dans 43 jours.
+ * </Alert>
+ */
+declare function Alert({ icon: Icon, variant, title, children, className, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export { Alert };

package/dist/Alert.js

@@ -0,0 +1,56 @@
+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 = {
+  primary: "text-primary",
+  info: "text-info",
+  success: "text-success",
+  destructive: "text-destructive",
+  warning: "text-warning"
+};
+function b({
+  icon: t,
+  variant: r,
+  title: s,
+  children: i,
+  className: d,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    c,
+    {
+      className: l(
+        "!p-4 transition-all",
+        r && a[r],
+        d
+      ),
+      role: "alert",
+      ...n,
+      children: /* @__PURE__ */ o("div", { className: "flex items-start gap-3", children: [
+        t && /* @__PURE__ */ e(
+          "div",
+          {
+            className: l(
+              "shrink-0 h-5 flex items-center",
+              r ? m[r] : "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 }),
+          i && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: i })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  b as Alert
+};

package/dist/Avatar.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Image URL. Falls back to initials if not provided or on error. */
+    src?: string;
+    /** Alt text for the image. */
+    alt?: string;
+    /** Fallback text (e.g. initials) shown when no image. @default "?" */
+    fallback?: string;
+    /** Size of the avatar. @default "md" */
+    size?: "sm" | "md" | "lg" | "xl";
+}
+/**
+ * Avatar with image and fallback initials.
+ *
+ * @example
+ * <Avatar src="/photo.jpg" alt="Tomarok" fallback="TM" />
+ * <Avatar fallback="AB" size="lg" />
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export { Avatar };

package/dist/Avatar.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import * as r from "react";
+import { c as f } from "./_shared/utils-eGXXUFl7.js";
+const u = {
+  sm: "size-7 text-xs",
+  md: "size-9 text-sm",
+  lg: "size-11 text-base",
+  xl: "size-14 text-lg"
+}, x = r.forwardRef(
+  ({ src: t, alt: o, fallback: s = "?", size: i = "md", className: m, ...n }, a) => {
+    const [l, c] = r.useState(!1), d = t && !l;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: a,
+        className: f(
+          "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden",
+          "bg-muted text-muted-foreground font-medium select-none",
+          u[i],
+          m
+        ),
+        ...n,
+        children: d ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: t,
+            alt: o || s,
+            onError: () => c(!0),
+            className: "size-full object-cover"
+          }
+        ) : /* @__PURE__ */ e("span", { children: s })
+      }
+    );
+  }
+);
+x.displayName = "Avatar";
+export {
+  x as Avatar
+};

package/dist/Badge.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+/** Available color variants for Badge. */
+export type BadgeVariant = 'default' | 'success' | 'destructive' | 'warning' | 'info' | 'secondary' | 'outline';
+/** Available size options for Badge. */
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Color variant controlling background, text, and border. @default "default" */
+    variant?: BadgeVariant;
+    /** Badge size controlling font size and padding. @default "md" */
+    size?: BadgeSize;
+    /**
+     * Custom color override (CSS color string). When provided, ignores `variant`
+     * and renders with this color for text/border and a semi-transparent background.
+     * Useful for dynamic colors stored in DB.
+     * @example <Badge color="#8B5CF6">Custom</Badge>
+     */
+    color?: string;
+}
+/** Available status values for StatusDot. */
+export type StatusDotStatus = 'online' | 'offline' | 'loading' | 'idle';
+export interface StatusDotProps {
+    /** Current status controlling the dot color. @default "offline" */
+    status?: StatusDotStatus;
+    /** Optional text label displayed next to the dot. */
+    label?: React.ReactNode;
+    /** Whether the dot should pulse (animate). @default false */
+    pulse?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * CVA variant generator for Badge styles. Returns a Tailwind class string
+ * for the given variant/size combination.
+ *
+ * @example
+ * const cls = badgeVariants({ variant: "success", size: "sm" });
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "success" | "info" | "warning" | "destructive" | "default" | "secondary" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Inline label badge with semantic color variants and multiple sizes.
+ *
+ * @example
+ * <Badge variant="success" size="sm">Active</Badge>
+ */
+declare function Badge({ children, variant, size, color, className, style, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Small colored dot indicator for connection or activity status, with an optional label.
+ *
+ * @example
+ * <StatusDot status="online" label="Connected" pulse />
+ */
+declare function StatusDot({ status, label, pulse, className }: StatusDotProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants, StatusDot };

package/dist/Badge.js

@@ -0,0 +1,74 @@
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import { c as g } from "./_shared/index-uPOYJZpG.js";
+import { c as o } from "./_shared/utils-eGXXUFl7.js";
+const p = g(
+  "inline-flex items-center font-semibold rounded-full transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/15 text-primary border border-primary/20",
+        success: "bg-success/15 text-success border border-success/20",
+        destructive: "bg-destructive/15 text-destructive border border-destructive/20",
+        warning: "bg-warning/15 text-warning border border-warning/20",
+        info: "bg-info/15 text-info border border-info/20",
+        secondary: "bg-muted text-muted-foreground border border-border",
+        outline: "bg-transparent text-foreground border border-border"
+      },
+      size: {
+        sm: "text-[10px] px-1.5 py-0.5 gap-1",
+        md: "text-xs px-2.5 py-0.5 gap-1.5",
+        lg: "text-sm px-3 py-1 gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function c({ children: t, variant: n = "default", size: r = "md", color: e, className: a, style: d, ...i }) {
+  return e ? /* @__PURE__ */ s(
+    "span",
+    {
+      className: o(
+        "inline-flex items-center font-semibold rounded-full border",
+        r === "sm" ? "text-[10px] px-1.5 py-0.5 gap-1" : r === "lg" ? "text-sm px-3 py-1 gap-2" : "text-xs px-2.5 py-0.5 gap-1.5",
+        a
+      ),
+      style: {
+        color: e,
+        borderColor: `${e}33`,
+        backgroundColor: `${e}1A`,
+        ...d
+      },
+      ...i,
+      children: t
+    }
+  ) : /* @__PURE__ */ s("span", { className: o(p({ variant: n, size: r }), a), style: d, ...i, children: t });
+}
+const b = {
+  online: "bg-success",
+  offline: "bg-destructive",
+  loading: "bg-warning",
+  idle: "bg-muted-foreground"
+};
+function m({ status: t = "offline", label: n, pulse: r = !1, className: e }) {
+  return /* @__PURE__ */ u("span", { className: o("inline-flex items-center gap-2 text-sm text-muted-foreground", e), children: [
+    /* @__PURE__ */ s(
+      "span",
+      {
+        className: o(
+          "w-2 h-2 rounded-full shrink-0",
+          b[t],
+          r && "animate-pulse"
+        )
+      }
+    ),
+    n && /* @__PURE__ */ s("span", { children: n })
+  ] });
+}
+export {
+  c as Badge,
+  m as StatusDot,
+  p as badgeVariants
+};

package/dist/Button.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+/** Available visual style variants for Button. */
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info' | 'ghost' | 'ghost-primary' | 'ghost-destructive' | 'ghost-success' | 'ghost-warning' | 'ghost-info' | 'link';
+/** Available size options for Button. */
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant. @default "primary" */
+    variant?: ButtonVariant;
+    /**
+     * Button size controlling height, padding, and font size.
+     * Use `"icon"` for square icon-only buttons (36x36).
+     * @default "md"
+     */
+    size?: ButtonSize;
+    /**
+     * Shows a spinning loader and disables the button.
+     * Children are hidden while loading.
+     * @default false
+     */
+    loading?: boolean;
+    /** Render as a child Slot element instead of a native button. @default false */
+    asChild?: boolean;
+}
+/**
+ * CVA variant generator for Button styles. Returns a Tailwind class string
+ * for the given variant/size combination.
+ *
+ * @example
+ * const cls = buttonVariants({ variant: "outline", size: "lg" });
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "success" | "info" | "warning" | "destructive" | "link" | "secondary" | "outline" | "ghost" | "ghost-primary" | "ghost-destructive" | "ghost-success" | "ghost-warning" | "ghost-info" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Primary action button with multiple visual variants and sizes.
+ * Uses children composition for icons -- place SVG icons directly as children.
+ * Can render as a Radix Slot via `asChild`.
+ *
+ * @description SVG children are automatically sized to 16px via `[&_svg]:size-4`.
+ *
+ * @example
+ * <Button variant="primary" size="md">Save changes</Button>
+ *
+ * @example
+ * import { Plus } from 'lucide-react';
+ * <Button variant="primary"><Plus /> Add Game</Button>
+ *
+ * @example
+ * <Button variant="ghost" size="icon"><Settings /></Button>
+ */
+declare function Button({ className, variant, size, loading, asChild, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/Button.js

@@ -0,0 +1,66 @@
+import { jsx as n } from "react/jsx-runtime";
+import { S as g } from "./_shared/index-BrLJJgkl.js";
+import { c as l } from "./_shared/index-uPOYJZpG.js";
+import { Loader2 as u } from "lucide-react";
+import { c as i } from "./_shared/utils-eGXXUFl7.js";
+const d = l(
+  "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",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground border-primary hover:not-disabled:bg-primary-light hover:not-disabled:border-primary-light hover:not-disabled:shadow-[0_0_20px_rgba(231,187,29,0.15)]",
+        secondary: "bg-secondary text-foreground border-secondary hover:not-disabled:bg-muted hover:not-disabled:border-secondary",
+        outline: "bg-input/30 border-border hover:not-disabled:bg-input/50",
+        destructive: "bg-destructive text-destructive-foreground border-transparent hover:not-disabled:bg-destructive-light",
+        success: "bg-success text-success-foreground border-transparent hover:not-disabled:bg-success-light",
+        warning: "bg-warning text-warning-foreground border-transparent hover:not-disabled:bg-warning-light",
+        info: "bg-info text-info-foreground border-transparent hover:not-disabled:bg-info-light",
+        ghost: "bg-transparent text-muted-foreground border-transparent hover:not-disabled:bg-secondary/50 hover:not-disabled:text-foreground",
+        "ghost-primary": "bg-primary/15 text-primary border-transparent hover:not-disabled:bg-primary/25",
+        "ghost-destructive": "bg-destructive/15 text-destructive border-transparent hover:not-disabled:bg-destructive/25",
+        "ghost-success": "bg-success/15 text-success border-transparent hover:not-disabled:bg-success/25",
+        "ghost-warning": "bg-warning/15 text-warning border-transparent hover:not-disabled:bg-warning/25",
+        "ghost-info": "bg-info/15 text-info border-transparent hover:not-disabled:bg-info/25",
+        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"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function h({ className: o, variant: e, size: r, loading: s = !1, asChild: b = !1, children: a, ...t }) {
+  return b ? /* @__PURE__ */ n(
+    g,
+    {
+      "data-slot": "button",
+      "data-variant": e,
+      "data-size": r,
+      className: i(d({ variant: e, size: r, className: o })),
+      ...t,
+      children: a
+    }
+  ) : /* @__PURE__ */ n(
+    "button",
+    {
+      "data-slot": "button",
+      "data-variant": e,
+      "data-size": r,
+      disabled: s || t.disabled,
+      className: i(d({ variant: e, size: r, className: o })),
+      ...t,
+      children: s ? /* @__PURE__ */ n(u, { className: "animate-spin" }) : a
+    }
+  );
+}
+export {
+  h as Button,
+  d as buttonVariants
+};

package/dist/Card.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/dist/Card.js

@@ -0,0 +1,98 @@
+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(
+  "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],
+      d
+    ),
+    ...a
+  }
+));
+n.displayName = "Card";
+const c = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: e,
+    className: t("flex flex-col space-y-1.5", d),
+    ...r
+  }
+));
+c.displayName = "CardHeader";
+const l = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: e,
+    className: t("text-base font-semibold leading-none tracking-tight", d),
+    ...r
+  }
+));
+l.displayName = "CardTitle";
+const m = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: e,
+    className: t("text-sm text-muted-foreground", d),
+    ...r
+  }
+));
+m.displayName = "CardDescription";
+const p = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: e,
+    className: t(d),
+    ...r
+  }
+));
+p.displayName = "CardContent";
+const f = s(({ className: d, ...r }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: e,
+    className: t("flex items-center gap-2", d),
+    ...r
+  }
+));
+f.displayName = "CardFooter";
+export {
+  n as Card,
+  p as CardContent,
+  m as CardDescription,
+  f as CardFooter,
+  c as CardHeader,
+  l as CardTitle
+};

package/dist/CodeBlock.d.ts

@@ -0,0 +1,45 @@
+export interface CodeBlockProps {
+    /** Source code string to display. Trailing newline is stripped automatically. */
+    children: string;
+    /** Filename shown in the header bar. Takes precedence over language label. */
+    filename?: string;
+    /** Language identifier for syntax highlighting (e.g. "js", "python", "css", "bash", "json"). */
+    language?: string;
+    /** Whether to display line numbers. @default true */
+    lineNumbers?: boolean;
+    /** Array of 1-based line numbers to visually highlight. @default [] */
+    highlightLines?: number[];
+    /** Whether to show the copy-to-clipboard button in the header. @default true */
+    showCopyButton?: boolean;
+    /** Additional CSS classes for the outer container. */
+    className?: string;
+    /** Accessible label for the code region. Defaults to filename or "Code block". */
+    'aria-label'?: string;
+}
+export interface CopyButtonProps {
+    /** Text content to copy to the clipboard. */
+    text: string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Small icon button that copies text to the clipboard and shows a check icon on success.
+ *
+ * @example
+ * <CopyButton text="npm install @la-batcave/ui" />
+ */
+declare function CopyButton({ text, className }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Syntax-highlighted code block with line numbers, copy button, diff markers,
+ * and line highlighting. Supports JS/TS, CSS, HTML, JSON, Bash, and Python.
+ * Automatically detects diff mode when lines start with `+` or `-`.
+ *
+ * @example
+ * <CodeBlock language="js" filename="index.js" highlightLines={[3]}>
+ * {`const x = 1;
+ * const y = 2;
+ * const sum = x + y;`}
+ * </CodeBlock>
+ */
+declare function CodeBlock({ children, filename, language, lineNumbers, highlightLines, showCopyButton, className, "aria-label": ariaLabel, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export { CodeBlock, CopyButton };