@la-batcave/ui 3.1.2

package/dist/Table.d.ts

@@ -0,0 +1,71 @@
+import * as React from "react";
+/** Column definition for EasyTable. */
+export interface EasyTableColumn<T = Record<string, unknown>> {
+    /** Property key used to access the cell value from each row object. */
+    key: string;
+    /** Header label displayed in the column header. */
+    label: React.ReactNode;
+    /** Optional fixed column width (CSS value, e.g. "200px"). */
+    width?: string;
+    /** Custom render function for cell content. Receives the cell value and the full row. */
+    render?: (value: unknown, row: T) => React.ReactNode;
+}
+export interface EasyTableProps<T = Record<string, unknown>> extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Array of column definitions describing headers and cell rendering. */
+    columns: EasyTableColumn<T>[];
+    /** Array of row data objects. Each object is keyed by column `key`. */
+    data: T[];
+}
+/**
+ * Scrollable table wrapper with rounded border.
+ *
+ * @example
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Status</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Alice</TableCell>
+ *       <TableCell><Badge>Active</Badge></TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ */
+declare function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+/** Container for table header rows. Renders `<thead>`. */
+declare function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+/** Container for table body rows. Renders `<tbody>`. */
+declare function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Table row with hover highlight. Renders `<tr>`.
+ * @description Hover effect uses primary/8 opacity.
+ */
+declare function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Table header cell. Renders `<th>`.
+ * @description Uppercase, muted foreground, bg-muted background.
+ */
+declare function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+/** Table data cell. Renders `<td>`. */
+declare function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+/** Table caption. Renders `<caption>`. */
+declare function TableCaption({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Declarative table with columns + data API. Built on top of the shadcn-style
+ * Table primitives. Supports custom cell renderers and fixed column widths.
+ *
+ * @example
+ * <EasyTable
+ *   columns={[
+ *     { key: "name", label: "Name" },
+ *     { key: "status", label: "Status", render: (v) => <Badge>{v}</Badge> },
+ *   ]}
+ *   data={[{ name: "Alice", status: "Active" }]}
+ * />
+ */
+declare function EasyTable<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, className, ...props }: EasyTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, EasyTable };

package/dist/Table.js

@@ -0,0 +1,94 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { c as d } from "./_shared/utils-eGXXUFl7.js";
+function c({ className: e, ...t }) {
+  return /* @__PURE__ */ r("div", { className: "overflow-x-auto rounded-lg border border-border blurred-bg", children: /* @__PURE__ */ r(
+    "table",
+    {
+      "data-slot": "table",
+      className: d("w-full border-collapse text-sm", e),
+      ...t
+    }
+  ) });
+}
+function u({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: d("border-b border-border", e),
+      ...t
+    }
+  );
+}
+function m({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: d("[&_tr:last-child]:border-0", e),
+      ...t
+    }
+  );
+}
+function o({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: d(
+        "border-b border-border transition-colors hover:bg-primary/8",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function f({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: d(
+        "text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground px-4 py-3 bg-muted",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function h({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: d("px-4 py-3 text-foreground", e),
+      ...t
+    }
+  );
+}
+function y({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: d("mt-4 text-sm text-muted-foreground", e),
+      ...t
+    }
+  );
+}
+function g({ columns: e, data: t, className: n, ...b }) {
+  return /* @__PURE__ */ i(c, { className: n, ...b, children: [
+    /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(o, { children: e.map((a) => /* @__PURE__ */ r(f, { style: a.width ? { width: a.width } : void 0, children: a.label }, a.key)) }) }),
+    /* @__PURE__ */ r(m, { children: t.map((a, s) => /* @__PURE__ */ r(o, { children: e.map((l) => /* @__PURE__ */ r(h, { children: l.render ? l.render(a[l.key], a) : a[l.key] }, l.key)) }, s)) })
+  ] });
+}
+export {
+  g as EasyTable,
+  c as Table,
+  m as TableBody,
+  y as TableCaption,
+  h as TableCell,
+  f as TableHead,
+  u as TableHeader,
+  o as TableRow
+};

package/dist/Tabs.d.ts

@@ -0,0 +1,76 @@
+import * as React from "react";
+/** Definition for a single tab item. */
+export interface TabItem {
+    /** Unique identifier used as the tab value. */
+    key: string;
+    /** Display label for the tab. */
+    label: React.ReactNode;
+    /** Optional icon rendered before the label. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+}
+export interface TabsProps {
+    /** Array of tab definitions. */
+    tabs: TabItem[];
+    /** Key of the currently active tab. */
+    active: string;
+    /** Callback fired when a tab is selected, receives the tab key. */
+    onChange: (key: string) => void;
+    /** Additional CSS classes for the tab list container. */
+    className?: string;
+}
+/**
+ * Underline-style tab navigation built on Radix UI Tabs.
+ * The active tab is highlighted with a primary-colored bottom border.
+ *
+ * @example
+ * <Tabs
+ *   tabs={[
+ *     { key: "overview", label: "Overview", icon: LayoutDashboard },
+ *     { key: "settings", label: "Settings", icon: Settings },
+ *   ]}
+ *   active={tab}
+ *   onChange={setTab}
+ * />
+ */
+declare function Tabs({ tabs, active, onChange, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+/** Definition for a single navigation pill item. */
+export interface NavPillItem {
+    /** Unique identifier for the pill. */
+    key: string;
+    /** Display label for the pill. */
+    label: React.ReactNode;
+    /** Optional icon rendered before the label. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+}
+export interface NavPillsProps {
+    /** Array of pill item definitions. */
+    items: NavPillItem[];
+    /** Key of the currently active pill. */
+    active: string;
+    /** Callback fired when a pill is clicked, receives the item key. */
+    onChange: (key: string) => void;
+    /** Additional CSS classes for the nav container. */
+    className?: string;
+}
+/**
+ * Pill-style navigation with rounded active indicator. Alternative to Tabs
+ * for horizontal navigation where a softer visual style is preferred.
+ *
+ * @example
+ * <NavPills
+ *   items={[
+ *     { key: "all", label: "All" },
+ *     { key: "active", label: "Active" },
+ *   ]}
+ *   active={filter}
+ *   onChange={setFilter}
+ * />
+ */
+declare function NavPills({ items, active, onChange, className }: NavPillsProps): import("react/jsx-runtime").JSX.Element;
+export { Tabs, NavPills };

package/dist/Tabs.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import * as f from "react";
+import { u as k, c as T, a as E, P as F } from "./_shared/index-CXeb1OMI.js";
+import { u as w, R as V, I as D, c as y } from "./_shared/index-C0gNQvxa.js";
+import { P as p } from "./_shared/index-V-Ajw7Ac.js";
+import { u as G } from "./_shared/index-BC7vfx-u.js";
+import { c as m } from "./_shared/utils-eGXXUFl7.js";
+var g = "Tabs", [$] = E(g, [
+  y
+]), C = y(), [L, h] = $(g), I = f.forwardRef(
+  (t, o) => {
+    const {
+      __scopeTabs: n,
+      value: r,
+      onValueChange: e,
+      defaultValue: l,
+      orientation: a = "horizontal",
+      dir: u,
+      activationMode: v = "automatic",
+      ...b
+    } = t, c = w(u), [s, d] = k({
+      prop: r,
+      onChange: e,
+      defaultProp: l ?? "",
+      caller: g
+    });
+    return /* @__PURE__ */ i(
+      L,
+      {
+        scope: n,
+        baseId: G(),
+        value: s,
+        onValueChange: d,
+        orientation: a,
+        dir: c,
+        activationMode: v,
+        children: /* @__PURE__ */ i(
+          p.div,
+          {
+            dir: c,
+            "data-orientation": a,
+            ...b,
+            ref: o
+          }
+        )
+      }
+    );
+  }
+);
+I.displayName = g;
+var N = "TabsList", R = f.forwardRef(
+  (t, o) => {
+    const { __scopeTabs: n, loop: r = !0, ...e } = t, l = h(N, n), a = C(n);
+    return /* @__PURE__ */ i(
+      V,
+      {
+        asChild: !0,
+        ...a,
+        orientation: l.orientation,
+        dir: l.dir,
+        loop: r,
+        children: /* @__PURE__ */ i(
+          p.div,
+          {
+            role: "tablist",
+            "aria-orientation": l.orientation,
+            ...e,
+            ref: o
+          }
+        )
+      }
+    );
+  }
+);
+R.displayName = N;
+var P = "TabsTrigger", _ = f.forwardRef(
+  (t, o) => {
+    const { __scopeTabs: n, value: r, disabled: e = !1, ...l } = t, a = h(P, n), u = C(n), v = M(a.baseId, r), b = S(a.baseId, r), c = r === a.value;
+    return /* @__PURE__ */ i(
+      D,
+      {
+        asChild: !0,
+        ...u,
+        focusable: !e,
+        active: c,
+        children: /* @__PURE__ */ i(
+          p.button,
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": c,
+            "aria-controls": b,
+            "data-state": c ? "active" : "inactive",
+            "data-disabled": e ? "" : void 0,
+            disabled: e,
+            id: v,
+            ...l,
+            ref: o,
+            onMouseDown: T(t.onMouseDown, (s) => {
+              !e && s.button === 0 && s.ctrlKey === !1 ? a.onValueChange(r) : s.preventDefault();
+            }),
+            onKeyDown: T(t.onKeyDown, (s) => {
+              [" ", "Enter"].includes(s.key) && a.onValueChange(r);
+            }),
+            onFocus: T(t.onFocus, () => {
+              const s = a.activationMode !== "manual";
+              !c && !e && s && a.onValueChange(r);
+            })
+          }
+        )
+      }
+    );
+  }
+);
+_.displayName = P;
+var A = "TabsContent", z = f.forwardRef(
+  (t, o) => {
+    const { __scopeTabs: n, value: r, forceMount: e, children: l, ...a } = t, u = h(A, n), v = M(u.baseId, r), b = S(u.baseId, r), c = r === u.value, s = f.useRef(c);
+    return f.useEffect(() => {
+      const d = requestAnimationFrame(() => s.current = !1);
+      return () => cancelAnimationFrame(d);
+    }, []), /* @__PURE__ */ i(F, { present: e || c, children: ({ present: d }) => /* @__PURE__ */ i(
+      p.div,
+      {
+        "data-state": c ? "active" : "inactive",
+        "data-orientation": u.orientation,
+        role: "tabpanel",
+        "aria-labelledby": v,
+        hidden: !d,
+        id: b,
+        tabIndex: 0,
+        ...a,
+        ref: o,
+        style: {
+          ...t.style,
+          animationDuration: s.current ? "0s" : void 0
+        },
+        children: d && l
+      }
+    ) });
+  }
+);
+z.displayName = A;
+function M(t, o) {
+  return `${t}-trigger-${o}`;
+}
+function S(t, o) {
+  return `${t}-content-${o}`;
+}
+var K = I, j = R, B = _;
+function W({ tabs: t, active: o, onChange: n, className: r }) {
+  return /* @__PURE__ */ i(K, { value: o, onValueChange: n, children: /* @__PURE__ */ i(
+    j,
+    {
+      className: m(
+        "inline-flex items-center gap-1 border-b border-border",
+        r
+      ),
+      children: t.map((e) => /* @__PURE__ */ x(
+        B,
+        {
+          value: e.key,
+          className: m(
+            "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium transition-all outline-none cursor-pointer",
+            "text-muted-foreground border-b-2 border-transparent -mb-px",
+            "hover:text-foreground",
+            "data-[state=active]:text-primary data-[state=active]:border-b-primary",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"
+          ),
+          children: [
+            e.icon && /* @__PURE__ */ i(e.icon, { size: 15 }),
+            e.label
+          ]
+        },
+        e.key
+      ))
+    }
+  ) });
+}
+function X({ items: t, active: o, onChange: n, className: r }) {
+  return /* @__PURE__ */ i("nav", { className: m("flex items-center gap-2", r), children: t.map((e) => /* @__PURE__ */ x(
+    "button",
+    {
+      onClick: () => n(e.key),
+      className: m(
+        "flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-full border border-transparent transition-all outline-none cursor-pointer",
+        o === e.key ? "bg-accent text-accent-foreground border-primary/40" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        "focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      children: [
+        e.icon && /* @__PURE__ */ i(e.icon, { size: 15 }),
+        e.label
+      ]
+    },
+    e.key
+  )) });
+}
+export {
+  X as NavPills,
+  W as Tabs
+};

package/dist/Toast.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+export interface ToastProviderProps {
+    /** Screen position for toast notifications. @default "bottom-right" */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+    /** Additional CSS classes. */
+    className?: string;
+}
+export interface ToastOptions {
+    /** Toast body text. Required when using object form. */
+    message: React.ReactNode;
+    /** Optional bold title displayed above the message. */
+    title?: React.ReactNode;
+    /** Override the default variant icon. */
+    icon?: React.ReactNode;
+    /** Auto-dismiss delay in milliseconds. @default 4000 */
+    duration?: number;
+}
+export type ToastInput = React.ReactNode | ToastOptions;
+/**
+ * Toast notification container built on Sonner. Mount once at the app root
+ * to enable toast notifications via `btcvToast`.
+ *
+ * @example
+ * // In your app root:
+ * <ToastProvider position="bottom-right" />
+ */
+declare function ToastProvider({ position, className, ...props }: ToastProviderProps & Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pre-styled toast trigger functions. Each method shows a toast with the
+ * appropriate icon and left border color (success, error, warning, info).
+ *
+ * Accepts a simple string or an options object with `message`, `title`, and `icon`.
+ *
+ * @example
+ * import { toast } from '@la-batcave/ui/Toast';
+ *
+ * // Simple string
+ * toast.success("Changes saved");
+ * toast.error("Something went wrong");
+ *
+ * // Object with title
+ * toast.success({ title: "Build #42", message: "Completed in 1m32s" });
+ *
+ * // Object with custom icon
+ * toast.info({ message: "Syncing...", icon: <Loader2 className="animate-spin" /> });
+ */
+declare const btcvToast: {
+    success: (msgOrOptions: ToastInput) => string | number;
+    error: (msgOrOptions: ToastInput) => string | number;
+    warning: (msgOrOptions: ToastInput) => string | number;
+    info: (msgOrOptions: ToastInput) => string | number;
+};
+/** @deprecated Use `toast` instead. */
+export { ToastProvider, btcvToast as toast, btcvToast };