@la-batcave/ui 3.1.2

package/dist/Widget.d.ts

@@ -0,0 +1,133 @@
+import * as React from 'react';
+/** Variant controlling the accent color of the widget. */
+export type WidgetVariant = 'primary' | 'info' | 'success' | 'destructive' | 'warning';
+export interface StatWidgetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Icon displayed in a colored box beside the stat. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Descriptive label displayed above the value. */
+    title: React.ReactNode;
+    /** Primary metric value displayed prominently. */
+    value: React.ReactNode;
+    /** Accent color variant. When omitted, icon is white with no colored border. */
+    variant?: WidgetVariant;
+    /** Show colored top border. Defaults to true when variant is set. @default !!variant */
+    accent?: boolean;
+}
+export interface ListWidgetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Title displayed in the widget header. */
+    title?: React.ReactNode;
+    /** Icon displayed beside the title. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Accent color variant. */
+    variant?: WidgetVariant;
+    /** Show colored top border. Defaults to true when variant is set. @default !!variant */
+    accent?: boolean;
+}
+export interface ListWidgetLineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Icon displayed in a box at the start of the line. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Additional class names applied to the icon container. */
+    iconClassName?: string;
+    /** Image URL that replaces the icon when provided. */
+    imageUrl?: string;
+    /** Variant controlling the icon color. When omitted, icon is muted. */
+    variant?: WidgetVariant;
+    /** Secondary text displayed below the main content. */
+    subtitle?: React.ReactNode;
+    /** Content displayed on the right side of the line (badge, status, value, etc.). */
+    suffix?: React.ReactNode;
+}
+export interface CustomWidgetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Title displayed in the widget header. */
+    title?: React.ReactNode;
+    /** Icon displayed beside the title. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Accent color variant. */
+    variant?: WidgetVariant;
+    /** Show colored top border. Defaults to true when variant is set. @default !!variant */
+    accent?: boolean;
+}
+export interface TextWidgetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Title displayed in the widget header. */
+    title?: React.ReactNode;
+    /** Icon displayed beside the title. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Accent color variant. */
+    variant?: WidgetVariant;
+    /** Show colored top border. Defaults to true when variant is set. @default !!variant */
+    accent?: boolean;
+}
+/**
+ * Compact widget for displaying a single key metric with icon, title, and value.
+ *
+ * @example
+ * import { StatWidget } from '@la-batcave/ui/Widget';
+ * import { Users } from 'lucide-react';
+ *
+ * <StatWidget icon={Users} title="Total Users" value="1,234" variant="success" />
+ */
+declare function StatWidget({ icon: Icon, title, value, variant, accent, className, ...props }: StatWidgetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget displaying a list of items with an optional header (title + icon).
+ * Use ListWidgetLine as children.
+ *
+ * @example
+ * import { ListWidget, ListWidgetLine } from '@la-batcave/ui/Widget';
+ * import { BarChart3, Download, Cpu } from 'lucide-react';
+ *
+ * <ListWidget title="Activite recente" icon={BarChart3} variant="primary">
+ *   <ListWidgetLine icon={Download} subtitle="il y a 5 min">Fichier telecharge</ListWidgetLine>
+ *   <ListWidgetLine icon={Cpu} subtitle="il y a 12 min">Build termine</ListWidgetLine>
+ * </ListWidget>
+ */
+declare function ListWidget({ title, icon: Icon, variant, accent, children, className, ...props }: ListWidgetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A single line inside a ListWidget.
+ *
+ * @example
+ * <ListWidgetLine icon={Download} iconColor="var(--success)" subtitle="il y a 5 min">
+ *   Escape Simulator 2 telecharge
+ * </ListWidgetLine>
+ */
+declare function ListWidgetLine({ icon: Icon, iconClassName, imageUrl, variant, children, subtitle, suffix, className, ...props }: ListWidgetLineProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget with an optional header (title + icon) and free-form children content.
+ * Like ListWidget but without the list structure -- use for custom layouts.
+ *
+ * @example
+ * import { CustomWidget } from '@la-batcave/ui/Widget';
+ * import { Download } from 'lucide-react';
+ *
+ * <CustomWidget title="Telechargement" icon={Download} variant="primary">
+ *   <ProgressBar value={67} />
+ * </CustomWidget>
+ */
+declare function CustomWidget({ title, icon: Icon, variant, accent, children, className, ...props }: CustomWidgetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget with header (title + icon) and text content auto-styled as muted description.
+ *
+ * @example
+ * import { TextWidget } from '@la-batcave/ui/Widget';
+ * import { Shield } from 'lucide-react';
+ *
+ * <TextWidget title="Info systeme" icon={Shield} variant="info">
+ *   Maintenance prevue demain a 3h.
+ * </TextWidget>
+ */
+declare function TextWidget({ title, icon: Icon, variant, accent, children, className, ...props }: TextWidgetProps): import("react/jsx-runtime").JSX.Element;
+export { StatWidget, ListWidget, ListWidgetLine, CustomWidget, TextWidget };

package/dist/Widget.js

@@ -0,0 +1,207 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { Card as m } from "./Card.js";
+import { c as l } from "./_shared/utils-eGXXUFl7.js";
+const a = "p-5 transition-all hover:border-secondary hover:shadow-[0_2px_12px_rgba(0,0,0,0.2)]", x = {
+  primary: "bg-primary/15 text-primary",
+  info: "bg-info/15 text-info",
+  success: "bg-success/15 text-success",
+  destructive: "bg-destructive/15 text-destructive",
+  warning: "bg-warning/15 text-warning"
+}, h = {
+  primary: "text-primary",
+  info: "text-info",
+  success: "text-success",
+  destructive: "text-destructive",
+  warning: "text-warning"
+};
+function b({
+  icon: s,
+  title: r,
+  value: e,
+  variant: c,
+  accent: n = !!c,
+  className: d,
+  ...i
+}) {
+  return /* @__PURE__ */ t(
+    m,
+    {
+      accentSide: n ? "top" : void 0,
+      accentColor: c,
+      className: l(a, d),
+      ...i,
+      children: /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+        s && /* @__PURE__ */ t(
+          "div",
+          {
+            className: l(
+              "w-9 h-9 rounded-md flex items-center justify-center shrink-0",
+              c ? x[c] : "text-foreground"
+            ),
+            children: /* @__PURE__ */ t(s, { size: c ? 18 : 22 })
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+          /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground truncate", children: r }),
+          /* @__PURE__ */ t("span", { className: "text-xl font-bold text-foreground", children: e })
+        ] })
+      ] })
+    }
+  );
+}
+function w({
+  title: s,
+  icon: r,
+  variant: e,
+  accent: c = !!e,
+  children: n,
+  className: d,
+  ...i
+}) {
+  return /* @__PURE__ */ o(
+    m,
+    {
+      accentSide: c ? "top" : void 0,
+      accentColor: e,
+      className: l(a, "flex flex-col", d),
+      ...i,
+      children: [
+        (s || r) && /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+          r && /* @__PURE__ */ t(
+            "div",
+            {
+              className: l(
+                "w-7 h-7 rounded-md flex items-center justify-center shrink-0",
+                e ? x[e] : "text-foreground"
+              ),
+              children: /* @__PURE__ */ t(r, { size: e ? 14 : 18 })
+            }
+          ),
+          s && /* @__PURE__ */ t("span", { className: "text-sm font-semibold text-foreground", children: s })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col -my-2.5", children: n })
+      ]
+    }
+  );
+}
+function y({
+  icon: s,
+  iconClassName: r,
+  imageUrl: e,
+  variant: c,
+  children: n,
+  subtitle: d,
+  suffix: i,
+  className: f,
+  ...u
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: l("flex items-center gap-3 py-2.5 border-b border-border last:border-b-0", f),
+      ...u,
+      children: [
+        (s || e) && /* @__PURE__ */ t(
+          "div",
+          {
+            className: l(
+              "w-8 h-8 rounded-md bg-secondary flex items-center justify-center shrink-0 overflow-hidden",
+              c ? h[c] : "text-muted-foreground",
+              r
+            ),
+            children: e ? /* @__PURE__ */ t(
+              "img",
+              {
+                src: e,
+                alt: "",
+                className: "w-full h-full object-cover"
+              }
+            ) : s ? /* @__PURE__ */ t(s, { size: 14 }) : null
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ t("div", { className: "text-[0.8125rem] font-medium text-foreground", children: n }),
+          d && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground", children: d })
+        ] }),
+        i && /* @__PURE__ */ t("div", { className: "shrink-0 flex items-center", children: i })
+      ]
+    }
+  );
+}
+function v({
+  title: s,
+  icon: r,
+  variant: e,
+  accent: c = !!e,
+  children: n,
+  className: d,
+  ...i
+}) {
+  return /* @__PURE__ */ o(
+    m,
+    {
+      accentSide: c ? "top" : void 0,
+      accentColor: e,
+      className: l(a, "flex flex-col", d),
+      ...i,
+      children: [
+        (s || r) && /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+          r && /* @__PURE__ */ t(
+            "div",
+            {
+              className: l(
+                "w-7 h-7 rounded-md flex items-center justify-center shrink-0",
+                e ? x[e] : "text-foreground"
+              ),
+              children: /* @__PURE__ */ t(r, { size: e ? 14 : 18 })
+            }
+          ),
+          s && /* @__PURE__ */ t("span", { className: "text-sm font-semibold text-foreground", children: s })
+        ] }),
+        n
+      ]
+    }
+  );
+}
+function j({
+  title: s,
+  icon: r,
+  variant: e,
+  accent: c = !!e,
+  children: n,
+  className: d,
+  ...i
+}) {
+  return /* @__PURE__ */ o(
+    m,
+    {
+      accentSide: c ? "top" : void 0,
+      accentColor: e,
+      className: l(a, "flex flex-col gap-3", d),
+      ...i,
+      children: [
+        (s || r) && /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+          r && /* @__PURE__ */ t(
+            "div",
+            {
+              className: l(
+                "w-7 h-7 rounded-md flex items-center justify-center shrink-0",
+                e ? x[e] : "text-foreground"
+              ),
+              children: /* @__PURE__ */ t(r, { size: e ? 14 : 18 })
+            }
+          ),
+          s && /* @__PURE__ */ t("span", { className: "text-sm font-semibold text-foreground", children: s })
+        ] }),
+        n && /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground", children: n })
+      ]
+    }
+  );
+}
+export {
+  v as CustomWidget,
+  w as ListWidget,
+  y as ListWidgetLine,
+  b as StatWidget,
+  j as TextWidget
+};