@la-batcave/ui 3.5.0 → 4.0.0

package/dist/Sidebar.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsxs as f, jsx as r, Fragment as S } from "react/jsx-runtime";
+import { jsxs as u, jsx as e, Fragment as k } from "react/jsx-runtime";
 import * as m from "react";
-import { S as k, a as N } from "./_shared/index-BrLJJgkl.js";
-import { X as y, Menu as C } from "lucide-react";
+import { S as y, a as N } from "./_shared/index-BrLJJgkl.js";
+import { X as S, Menu as C } from "lucide-react";
 import { c as i } from "./_shared/utils-eGXXUFl7.js";
 const v = m.createContext({
   open: !1,
@@ -13,13 +13,13 @@ function x() {
   return m.useContext(v);
 }
 function P({
-  navbarHeight: e = 56,
+  navbarHeight: r = 56,
   className: n,
   children: a,
   ...o
 }) {
   const [s, c] = m.useState(!1);
-  return /* @__PURE__ */ r(v.Provider, { value: { open: s, setOpen: c }, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(v.Provider, { value: { open: s, setOpen: c }, children: /* @__PURE__ */ e(
     "div",
     {
       className: i("relative flex min-h-screen", n),
@@ -28,35 +28,35 @@ function P({
     }
   ) });
 }
-function R({ className: e, ...n }) {
+function R({ className: r, ...n }) {
   const { open: a, setOpen: o } = x();
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       className: i(
-        "inline-flex items-center justify-center w-8 h-8 rounded-md",
+        "inline-flex items-center justify-center w-8 h-8 rounded-2xl",
         "text-muted-foreground hover:text-foreground hover:bg-muted",
         "transition-colors cursor-pointer md:hidden",
-        e
+        r
       ),
       onClick: () => o((s) => !s),
       ...n,
-      children: a ? /* @__PURE__ */ r(y, { size: 18 }) : /* @__PURE__ */ r(C, { size: 18 })
+      children: a ? /* @__PURE__ */ e(S, { size: 18 }) : /* @__PURE__ */ e(C, { size: 18 })
     }
   );
 }
-function w({ navbarHeight: e = 56, className: n, children: a, ...o }) {
+function w({ navbarHeight: r = 56, className: n, children: a, ...o }) {
   const { open: s, setOpen: c } = x();
-  return /* @__PURE__ */ f(S, { children: [
-    s && /* @__PURE__ */ r(
+  return /* @__PURE__ */ u(k, { children: [
+    s && /* @__PURE__ */ e(
       "div",
       {
-        className: "fixed inset-0 z-30 bg-black/50 md:hidden",
+        className: "fixed inset-0 z-30 bg-black/30 md:hidden",
         onClick: () => c(!1)
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       "div",
       {
         className: i(
@@ -65,10 +65,10 @@ function w({ navbarHeight: e = 56, className: n, children: a, ...o }) {
           s ? "translate-x-0" : "-translate-x-full"
         ),
         style: {
-          top: e,
-          height: `calc(100vh - ${e}px)`
+          top: r,
+          height: `calc(100vh - ${r}px)`
         },
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ e(
           "aside",
           {
             className: i(
@@ -83,108 +83,108 @@ function w({ navbarHeight: e = 56, className: n, children: a, ...o }) {
     )
   ] });
 }
-function X({ navbarHeight: e = 56, className: n, children: a, ...o }) {
-  return /* @__PURE__ */ r(
+function X({ navbarHeight: r = 56, className: n, children: a, ...o }) {
+  return /* @__PURE__ */ e(
     "main",
     {
       className: i("flex-1 min-w-0", n),
-      style: { paddingTop: e },
+      style: { paddingTop: r },
       ...o,
       children: a
     }
   );
 }
-function z({ className: e, ...n }) {
-  return /* @__PURE__ */ r(
+function z({ className: r, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: i("px-3 py-3 shrink-0", e),
+      className: i("px-3 py-3 shrink-0", r),
       ...n
     }
   );
 }
-function O({ className: e, ...n }) {
-  return /* @__PURE__ */ r(
+function j({ className: r, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: i("flex-1 overflow-y-auto py-1 px-2 flex flex-col gap-2", e),
+      className: i("flex-1 overflow-y-auto py-1 px-2 flex flex-col gap-2", r),
       ...n
     }
   );
 }
-function j({ className: e, ...n }) {
-  return /* @__PURE__ */ r(
+function O({ className: r, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: i("px-2 py-2 shrink-0 border-t border-border", e),
+      className: i("px-2 py-2 shrink-0 border-t border-border", r),
       ...n
     }
   );
 }
-function E({ label: e, className: n, children: a, ...o }) {
-  return /* @__PURE__ */ f("div", { className: i("flex flex-col gap-0.5", n), ...o, children: [
-    e && /* @__PURE__ */ r("span", { className: "px-3 py-1.5 text-[0.6875rem] font-semibold uppercase tracking-wider text-muted-foreground", children: e }),
+function E({ label: r, className: n, children: a, ...o }) {
+  return /* @__PURE__ */ u("div", { className: i("flex flex-col gap-0.5", n), ...o, children: [
+    r && /* @__PURE__ */ e("span", { className: "px-3 py-1.5 text-[0.6875rem] font-semibold uppercase tracking-wider text-muted-foreground", children: r }),
     a
   ] });
 }
-function $({ className: e, ...n }) {
-  return /* @__PURE__ */ r(
+function I({ className: r, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: i("mx-2 my-2 h-px bg-border", e),
+      className: i("mx-2 my-2 h-px bg-border", r),
       ...n
     }
   );
 }
 function b({
-  icon: e,
+  icon: r,
   active: n,
   badge: a,
   asChild: o,
   className: s,
   children: c,
-  ...d
+  ...l
 }) {
-  const p = o ? k : "button", { setOpen: u } = x(), h = (t) => {
-    u(!1), d.onClick && d.onClick(t);
+  const p = o ? y : "button", { setOpen: f } = x(), h = (t) => {
+    f(!1), l.onClick && l.onClick(t);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ u(
     p,
     {
       "data-active": n || void 0,
       className: i(
-        "flex items-center gap-2.5 w-full px-3 py-2 text-[0.8125rem] font-medium rounded-md transition-all duration-150 cursor-pointer",
+        "flex items-center gap-2.5 w-full px-3 py-2 text-[0.8125rem] font-medium rounded-2xl transition-all duration-150 cursor-pointer",
         "border-none bg-transparent text-left",
         n ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground",
         s
       ),
-      ...d,
+      ...l,
       onClick: h,
       children: [
-        e && /* @__PURE__ */ r(e, { size: 16, className: "shrink-0" }),
-        o ? /* @__PURE__ */ r(N, { children: c }) : /* @__PURE__ */ r("span", { className: "flex-1 truncate", children: c }),
-        a && /* @__PURE__ */ r("span", { className: "shrink-0", children: a })
+        r && /* @__PURE__ */ e(r, { size: 16, className: "shrink-0" }),
+        o ? /* @__PURE__ */ e(N, { children: c }) : /* @__PURE__ */ e("span", { className: "flex-1 truncate", children: c }),
+        a && /* @__PURE__ */ e("span", { className: "shrink-0", children: a })
       ]
     }
   );
 }
-function F(e) {
-  return typeof e == "object" && "items" in e;
+function $(r) {
+  return typeof r == "object" && "items" in r;
 }
-function G(e) {
-  return e === "separator";
+function F(r) {
+  return r === "separator";
 }
 function q({
-  items: e,
+  items: r,
   header: n,
   footer: a,
   renderLink: o,
   onNavigate: s,
   navbarHeight: c = 56,
-  className: d,
+  className: l,
   ...p
 }) {
-  const u = (t) => o ? /* @__PURE__ */ r(
+  const f = (t) => o ? /* @__PURE__ */ e(
     b,
     {
       icon: t.icon,
@@ -194,17 +194,17 @@ function q({
       children: o(t)
     },
     t.key
-  ) : t.href ? /* @__PURE__ */ r(
+  ) : t.href ? /* @__PURE__ */ e(
     b,
     {
       icon: t.icon,
       active: t.active,
       badge: t.badge,
       asChild: !0,
-      children: /* @__PURE__ */ r("a", { href: t.href, children: t.label })
+      children: /* @__PURE__ */ e("a", { href: t.href, children: t.label })
     },
     t.key
-  ) : /* @__PURE__ */ r(
+  ) : /* @__PURE__ */ e(
     b,
     {
       icon: t.icon,
@@ -215,23 +215,61 @@ function q({
     },
     t.key
   );
-  return /* @__PURE__ */ f(w, { navbarHeight: c, className: d, ...p, children: [
-    n && /* @__PURE__ */ r(z, { children: n }),
-    /* @__PURE__ */ r(O, { children: ((t) => t.map((l, g) => G(l) ? /* @__PURE__ */ r($, {}, `sep-${g}`) : F(l) ? /* @__PURE__ */ r(E, { label: l.label, children: l.items.map(u) }, l.label || `group-${g}`) : u(l)))(e) }),
-    a && /* @__PURE__ */ r(j, { children: a })
+  return /* @__PURE__ */ u(w, { navbarHeight: c, className: l, ...p, children: [
+    n && /* @__PURE__ */ e(z, { children: n }),
+    /* @__PURE__ */ e(j, { children: ((t) => t.map((d, g) => F(d) ? /* @__PURE__ */ e(I, {}, `sep-${g}`) : $(d) ? /* @__PURE__ */ e(E, { label: d.label, children: d.items.map(f) }, d.label || `group-${g}`) : f(d)))(r) }),
+    a && /* @__PURE__ */ e(O, { children: a })
   ] });
 }
+function A({
+  items: r,
+  onNavigate: n,
+  header: a,
+  footer: o,
+  className: s,
+  ...c
+}) {
+  return /* @__PURE__ */ u(
+    "aside",
+    {
+      className: i(
+        "w-12 shrink-0 bg-card border-r border-border flex flex-col items-center py-3 gap-1",
+        s
+      ),
+      ...c,
+      children: [
+        a && /* @__PURE__ */ e("div", { className: "mb-2", children: a }),
+        /* @__PURE__ */ e("nav", { className: "flex flex-col items-center gap-1 flex-1", children: r.map((l) => /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            title: l.label,
+            onClick: () => n?.(l.key),
+            className: i(
+              "h-8 w-8 flex items-center justify-center rounded-xl border-none cursor-pointer transition-colors",
+              l.active ? "bg-primary/15 text-primary" : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ e(l.icon, { size: 16 })
+          },
+          l.key
+        )) }),
+        o && /* @__PURE__ */ e("div", { className: "mt-2", children: o })
+      ]
+    }
+  );
+}
 export {
   q as EasySidebar,
+  A as IconSidebar,
   w as Sidebar,
-  O as SidebarContent,
-  j as SidebarFooter,
+  j as SidebarContent,
+  O as SidebarFooter,
   E as SidebarGroup,
   z as SidebarHeader,
   X as SidebarInset,
   b as SidebarItem,
   P as SidebarLayout,
-  $ as SidebarSeparator,
+  I as SidebarSeparator,
   R as SidebarTrigger,
   x as useSidebar
 };

package/dist/Skeleton.js

@@ -4,29 +4,29 @@ function m({ className: e, ...r }) {
   return /* @__PURE__ */ t(
     "div",
     {
-      className: n("animate-pulse rounded-md bg-muted", e),
+      className: n("animate-pulse rounded-xl bg-muted", e),
       ...r
     }
   );
 }
-function s({
+function d({
   lines: e = 3,
   gap: r,
-  className: a,
+  className: l,
   ...o
 }) {
-  return /* @__PURE__ */ t("div", { className: n("flex flex-col", r || "gap-2", a), ...o, children: Array.from({ length: e }, (u, l) => /* @__PURE__ */ t(
+  return /* @__PURE__ */ t("div", { className: n("flex flex-col", r || "gap-2", l), ...o, children: Array.from({ length: e }, (u, a) => /* @__PURE__ */ t(
     m,
     {
-      className: n("h-3.5", l === e - 1 && e > 1 && "w-3/4")
+      className: n("h-3.5", a === e - 1 && e > 1 && "w-3/4")
     },
-    l
+    a
   )) });
 }
 function i({
   size: e,
   className: r,
-  ...a
+  ...l
 }) {
   return /* @__PURE__ */ t(
     "div",
@@ -36,12 +36,12 @@ function i({
         e || "size-10",
         r
       ),
-      ...a
+      ...l
     }
   );
 }
 export {
   m as Skeleton,
   i as SkeletonCircle,
-  s as SkeletonText
+  d as SkeletonText
 };

package/dist/Table.js

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

package/dist/Tabs.d.ts

@@ -18,24 +18,28 @@ export interface TabsProps {
     active: string;
     /** Callback fired when a tab is selected, receives the tab key. */
     onChange: (key: string) => void;
+    /**
+     * Visual style variant.
+     * - `"line"` — underline indicator (default)
+     * - `"pill"` — pill-shaped triggers inside a muted container
+     * @default "line"
+     */
+    variant?: "line" | "pill";
     /** 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.
+ * Tab navigation built on Radix UI Tabs with two visual variants.
  *
  * @example
- * <Tabs
- *   tabs={[
- *     { key: "overview", label: "Overview", icon: LayoutDashboard },
- *     { key: "settings", label: "Settings", icon: Settings },
- *   ]}
- *   active={tab}
- *   onChange={setTab}
- * />
+ * // Underline tabs (default)
+ * <Tabs tabs={tabs} active={tab} onChange={setTab} />
+ *
+ * @example
+ * // Pill tabs
+ * <Tabs tabs={tabs} active={tab} onChange={setTab} variant="pill" />
  */
-declare function Tabs({ tabs, active, onChange, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function Tabs({ tabs, active, onChange, variant, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
 /** Definition for a single navigation pill item. */
 export interface NavPillItem {
     /** Unique identifier for the pill. */