@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Table/data-table.js

@@ -0,0 +1,94 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { flexRender as a } from "@tanstack/react-table";
+import { DataTablePagination as x } from "./data-table-pagination.js";
+import { cn as u, Table as b, TableHeader as w, TableRow as t, TableHead as T, TableBody as C, TableCell as m } from "@dsui/ui";
+import { getCommonPinningStyles as f } from "../../utils/data-table.js";
+import { DataTableColumnHeader as y } from "./data-table-column-header.js";
+function P({
+  table: o,
+  actionBar: d,
+  children: g,
+  className: h,
+  pagination: c = !0,
+  sticky: D,
+  bordered: S,
+  loading: i,
+  footer: s,
+  ...p
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: u("flex w-full flex-col gap-2.5 relative", h),
+      ...p,
+      children: [
+        g,
+        i && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-background/50 flex items-center justify-center z-20", children: "Loading..." }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: u("overflow-auto rounded-md border", i && "blur-sm"),
+            children: /* @__PURE__ */ r(b, { children: [
+              /* @__PURE__ */ e(w, { children: o.getHeaderGroups().map((n) => /* @__PURE__ */ e(t, { children: n.headers.map((l) => /* @__PURE__ */ e(
+                T,
+                {
+                  colSpan: l.colSpan,
+                  style: {
+                    ...f({ column: l.column })
+                  },
+                  children: l.isPlaceholder ? null : l.column.columnDef.header ? typeof l.column.columnDef.header == "function" ? a(
+                    l.column.columnDef.header,
+                    l.getContext()
+                  ) : /* @__PURE__ */ e(y, { column: l.column }) : null
+                },
+                l.id
+              )) }, n.id)) }),
+              /* @__PURE__ */ e(C, { children: o.getRowModel().rows?.length ? o.getRowModel().rows.map((n) => /* @__PURE__ */ e(
+                t,
+                {
+                  "data-state": n.getIsSelected() && "selected",
+                  children: n.getVisibleCells().map((l) => /* @__PURE__ */ e(
+                    m,
+                    {
+                      style: {
+                        ...f({ column: l.column })
+                      },
+                      children: a(
+                        l.column.columnDef.cell,
+                        l.getContext()
+                      )
+                    },
+                    l.id
+                  ))
+                },
+                n.id
+              )) : /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(
+                m,
+                {
+                  colSpan: o.getAllColumns().length,
+                  className: "h-24 text-center",
+                  children: "No results."
+                }
+              ) }) }),
+              s && /* @__PURE__ */ e("tfoot", { children: /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(m, { colSpan: o.getAllColumns().length, children: s(o.getRowModel().rows.map((n) => n.original)) }) }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-2.5", children: [
+          c && /* @__PURE__ */ e(
+            x,
+            {
+              table: o,
+              ...c === !0 ? {} : c
+            }
+          ),
+          d && o.getFilteredSelectedRowModel().rows.length > 0 && d
+        ] })
+      ]
+    }
+  );
+}
+export {
+  P as DataTable
+};
+//# sourceMappingURL=data-table.js.map

package/dist/esm/components/Table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sources":["../../../../src/components/Table/data-table.tsx"],"sourcesContent":["import { flexRender, type Table as TanstackTable } from \"@tanstack/react-table\";\nimport type * as React from \"react\";\n\nimport { DataTablePagination } from \"./data-table-pagination\";\nimport {\n  cn,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@dsui/ui\";\nimport { getCommonPinningStyles } from \"@/utils/data-table\";\nimport { DataTableColumnHeader } from \"./data-table-column-header\";\n\ninterface DataTableProps<TData> extends React.ComponentProps<\"div\"> {\n  table: TanstackTable<TData>;\n  actionBar?: React.ReactNode;\n  pagination?:\n    | boolean\n    | Omit<React.ComponentProps<typeof DataTablePagination<TData>>, \"table\">;\n  sticky?: boolean | { offsetHeader?: number; offsetScroll?: number };\n  bordered?: boolean;\n  loading?: boolean;\n  footer?: (currentPageData: TData[]) => React.ReactNode;\n}\n\nexport function DataTable<TData>({\n  table,\n  actionBar,\n  children,\n  className,\n  pagination = true,\n  sticky,\n  bordered,\n  loading,\n  footer,\n  ...props\n}: DataTableProps<TData>) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col gap-2.5 relative\", className)}\n      {...props}\n    >\n      {children}\n      {loading && (\n        <div className=\"absolute inset-0 bg-background/50 flex items-center justify-center z-20\">\n          Loading...\n        </div>\n      )}\n      <div\n        className={cn(\"overflow-auto rounded-md border\", loading && \"blur-sm\")}\n      >\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    style={{\n                      ...getCommonPinningStyles({ column: header.column }),\n                    }}\n                  >\n                    {header.isPlaceholder ? null : header.column.columnDef\n                        .header ? (\n                      typeof header.column.columnDef.header === \"function\" ? (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      ) : (\n                        <DataTableColumnHeader column={header.column} />\n                      )\n                    ) : null}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      key={cell.id}\n                      style={{\n                        ...getCommonPinningStyles({ column: cell.column }),\n                      }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={table.getAllColumns().length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n          {footer && (\n            <tfoot>\n              <TableRow>\n                <TableCell colSpan={table.getAllColumns().length}>\n                  {footer(table.getRowModel().rows.map((row) => row.original))}\n                </TableCell>\n              </TableRow>\n            </tfoot>\n          )}\n        </Table>\n      </div>\n      <div className=\"flex flex-col gap-2.5\">\n        {pagination && (\n          <DataTablePagination\n            table={table}\n            {...(pagination === true ? {} : pagination)}\n          />\n        )}\n        {actionBar &&\n          table.getFilteredSelectedRowModel().rows.length > 0 &&\n          actionBar}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTable","table","actionBar","children","className","pagination","sticky","bordered","loading","footer","props","jsxs","cn","jsx","Table","TableHeader","headerGroup","TableRow","header","TableHead","getCommonPinningStyles","flexRender","DataTableColumnHeader","TableBody","row","cell","TableCell","DataTablePagination"],"mappings":"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"}

package/dist/esm/components/Tabs/Tabs.js

@@ -0,0 +1,540 @@
+import { jsxs as x, jsx as i, Fragment as Ne } from "react/jsx-runtime";
+import h from "react";
+import { Tabs as ze, TabsContent as Re, TabsList as Le, TabsTrigger as Ee } from "@dsui/ui/components/tabs";
+import { motion as Z } from "motion/react";
+import { cn as c } from "@dsui/ui/lib/utils";
+import { ScrollArea as K, ScrollBar as ee } from "../ScrollArea/ScrollArea.js";
+import te from "../Popover/Popover.js";
+import { MoreHorizontal as re } from "lucide-react";
+import { variantClasses as Oe, getColorClasses as He, getListBorderClasses as We, alignmentClasses as oe, positionClasses as se, sizeClasses as Ae, getUnderlinedTriggerClasses as Be, getEnclosedTriggerClasses as Ie, getEnclosedFillTriggerClasses as Ve } from "./classes.js";
+const Me = h.forwardRef((ne, le) => {
+  const {
+    items: d,
+    defaultActiveKey: P,
+    activeKey: H,
+    onChange: ie,
+    tabPosition: p = "top",
+    size: ae = "md",
+    alignment: _ = "start",
+    fullWidth: D = !1,
+    overflowMode: l = "scroll",
+    variant: e = "solid",
+    color: s = "muted",
+    className: ce,
+    tabListClassName: de,
+    tabContentClassName: fe,
+    tabTriggerClassName: ue
+  } = ne, z = h.useRef([]), L = h.useRef(null), R = h.useRef(null), E = h.useRef(null), [v, G] = h.useState({
+    left: 0,
+    width: 0,
+    top: 0,
+    height: 0
+  }), [he, ge] = h.useState(H || P || d[0]?.key), [y, U] = h.useState(!1), [$, be] = h.useState(d.length), [W, A] = h.useState(!1), [pe, J] = h.useState(!1), [me, Q] = h.useState(!1), C = H !== void 0 ? H : he, r = p === "left" || p === "right";
+  h.useLayoutEffect(() => {
+    if (!l || l === "dropdown") return;
+    const t = () => {
+      const n = R.current, g = L.current;
+      if (!n || !g) return;
+      const m = r ? n.clientHeight : n.clientWidth, S = (r ? g.scrollHeight : g.scrollWidth) > m;
+      U(S);
+    };
+    t();
+    const o = new ResizeObserver(t);
+    return R.current && o.observe(R.current), L.current && o.observe(L.current), () => {
+      o.disconnect();
+    };
+  }, [d, l, r]), h.useLayoutEffect(() => {
+    if (l !== "dropdown") return;
+    const t = () => {
+      const n = R.current;
+      if (!n) return;
+      const g = r ? n.clientHeight : n.clientWidth;
+      let m = 0;
+      const k = 48, S = 6, f = e === "enclosed-fill" || e === "bordered" || e === "pills" || e === "pill-stroke" || e === "text" || e === "outline" ? 4 : 0;
+      let a = 0;
+      for (let u = 0; u < z.current.length; u++) {
+        const T = z.current[u];
+        if (!T) break;
+        const N = r ? T.offsetHeight : T.offsetWidth, w = u > 0 ? f : 0, O = u < z.current.length - 1;
+        if (m + N + w + (O ? k : 0) + S <= g)
+          m += N + w, a++;
+        else
+          break;
+      }
+      const b = a < d.length;
+      U(b), be(Math.max(1, a));
+    };
+    t();
+    const o = new ResizeObserver(t);
+    return R.current && o.observe(R.current), z.current.forEach((n) => {
+      n && o.observe(n);
+    }), () => {
+      o.disconnect();
+    };
+  }, [d, l, r, e]), h.useLayoutEffect(() => {
+    const t = d.findIndex((g) => g.key === C), o = z.current[t], n = L.current;
+    if (o && n) {
+      const g = n.getBoundingClientRect(), m = o.getBoundingClientRect(), k = m.left - g.left, S = m.top - g.top;
+      if (G({
+        left: k,
+        width: m.width,
+        top: S,
+        height: m.height
+      }), l === "fade" && E.current) {
+        const f = E.current.querySelector(
+          "[data-radix-scroll-area-viewport]"
+        );
+        if (f) {
+          const a = f.getBoundingClientRect(), b = o.getBoundingClientRect(), u = 96;
+          if (r) {
+            const T = f.scrollTop, N = f.scrollHeight, w = a.height, O = b.top - a.top + T, I = b.height;
+            if (t === 0)
+              f.scrollTo({
+                top: 0,
+                behavior: "smooth"
+              });
+            else if (t === d.length - 1)
+              f.scrollTo({
+                top: N - w,
+                behavior: "smooth"
+              });
+            else {
+              const F = O - w / 2 + I / 2, j = N - w, q = Math.max(
+                u / 2,
+                Math.min(F, j - u / 2)
+              );
+              f.scrollTo({
+                top: q,
+                behavior: "smooth"
+              });
+            }
+          } else {
+            const T = f.scrollLeft, N = f.scrollWidth, w = a.width, O = b.left - a.left + T, I = b.width;
+            if (t === 0)
+              f.scrollTo({
+                left: 0,
+                behavior: "smooth"
+              });
+            else if (t === d.length - 1)
+              f.scrollTo({
+                left: N - w,
+                behavior: "smooth"
+              });
+            else {
+              const F = O - w / 2 + I / 2, j = N - w, q = Math.max(
+                u / 2,
+                Math.min(F, j - u / 2)
+              );
+              f.scrollTo({
+                left: q,
+                behavior: "smooth"
+              });
+            }
+          }
+        }
+      }
+    }
+  }, [C, d, r, l]), h.useEffect(() => {
+    if (l !== "fade" || !E.current) return;
+    const t = E.current.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    );
+    if (!t) return;
+    let o = null;
+    const n = () => {
+      o !== null && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
+        if (r) {
+          const a = t.scrollTop, b = t.scrollHeight, u = t.clientHeight;
+          J(a > 5), Q(a < b - u - 5);
+        } else {
+          const a = t.scrollLeft, b = t.scrollWidth, u = t.clientWidth;
+          J(a > 5), Q(a < b - u - 5);
+        }
+        const k = d.findIndex(
+          (a) => a.key === C
+        ), S = z.current[k], f = L.current;
+        if (S && f) {
+          const a = f.getBoundingClientRect(), b = S.getBoundingClientRect(), u = b.left - a.left, T = b.top - a.top;
+          G({
+            left: u,
+            width: b.width,
+            top: T,
+            height: b.height
+          });
+        }
+        o = null;
+      });
+    };
+    n(), t.addEventListener("scroll", n, {
+      passive: !0
+    });
+    const g = new ResizeObserver(n);
+    return g.observe(t), () => {
+      o !== null && cancelAnimationFrame(o), t.removeEventListener("scroll", n), g.disconnect();
+    };
+  }, [l, r, y, d, C]);
+  const V = (t) => {
+    H === void 0 && ge(t), ie?.(t);
+  }, ve = r ? "vertical" : "horizontal", X = Oe[e], we = X.list[r ? "vertical" : "horizontal"];
+  let B = X.trigger[r ? "vertical" : "horizontal"];
+  e === "underlined" ? B = Be(p) : e === "enclosed" ? B = Ie(p) : e === "enclosed-fill" && (B = Ve(p));
+  const xe = He(e, s), ye = We(e, s, p), Te = l === "dropdown" && y ? d.slice(0, $) : d, M = l === "dropdown" && y ? d.slice($) : l === "fade" && y ? d : [], Ce = l === "dropdown" && y && M.length > 0, Y = l === "dropdown" && y && M.some((t) => t.key === C), ke = (t, o = 0) => /* @__PURE__ */ i(Ne, { children: t.map((n, g) => {
+    const m = o + g;
+    return /* @__PURE__ */ x(
+      Ee,
+      {
+        ref: (k) => {
+          z.current[m] = k;
+        },
+        value: n.key,
+        disabled: n.disabled,
+        className: c(
+          B,
+          // Apply styles based on variant
+          {
+            // For sliding indicator variants, remove default background
+            "relative z-10 bg-transparent data-[state=active]:bg-transparent": e === "solid" || e === "bordered" || e === "pills",
+            // Apply text color for active state with sliding indicator
+            "data-[state=active]:text-primary-foreground": (e === "bordered" || e === "pills") && s === "primary",
+            "data-[state=active]:text-secondary-foreground": (e === "bordered" || e === "pills") && s === "secondary",
+            "data-[state=active]:text-muted-foreground": (e === "bordered" || e === "pills") && s === "muted",
+            "data-[state=active]:text-accent-foreground": (e === "bordered" || e === "pills") && s === "accent",
+            "data-[state=active]:text-destructive-foreground": (e === "bordered" || e === "pills") && s === "destructive",
+            "data-[state=active]:text-white": (e === "bordered" || e === "pills") && (s === "success" || s === "warning"),
+            "flex-1": D && !r,
+            "w-full justify-start": r
+          },
+          // For other variants, apply normal color classes
+          !(e === "solid" || e === "bordered" || e === "pills") && xe,
+          n.className,
+          ue
+        ),
+        children: [
+          n.icon && /* @__PURE__ */ i("span", { className: "mr-2 inline-flex items-center", children: n.icon }),
+          n.label
+        ]
+      },
+      n.key
+    );
+  }) }), Se = () => {
+    const t = /* @__PURE__ */ x(
+      Le,
+      {
+        ref: L,
+        className: c(
+          se[p].list,
+          Ae[ae][r ? "vertical" : "horizontal"],
+          we,
+          ye,
+          de,
+          "relative",
+          {
+            "overflow-hidden": l === "fade" && y,
+            "max-w-full": l === "fade",
+            // Limit width for fade mode
+            // For overflow modes, allow natural width expansion
+            "w-auto": l === "dropdown" || l === "fade"
+          }
+        ),
+        children: [
+          ke(Te),
+          e === "underlined" && v.width > 0 && !Y && /* @__PURE__ */ i(
+            Z.div,
+            {
+              className: c("absolute rounded-full z-10", {
+                // Horizontal positions (top/bottom)
+                "h-0.5 bottom-0": p === "top",
+                "h-0.5 top-0": p === "bottom",
+                // Vertical positions (left/right)
+                "w-0.5 right-0": p === "left",
+                "w-0.5 left-0": p === "right",
+                // Colors
+                "bg-primary": s === "primary",
+                "bg-secondary": s === "secondary",
+                "bg-muted-foreground": s === "muted",
+                "bg-accent": s === "accent",
+                "bg-destructive": s === "destructive",
+                "bg-success": s === "success",
+                "bg-warning": s === "warning"
+              }),
+              animate: r ? {
+                top: v.top,
+                height: v.height
+              } : {
+                left: v.left,
+                width: v.width
+              },
+              transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 30
+              }
+            }
+          ),
+          (e === "solid" || e === "bordered" || e === "pills" || e === "pill-stroke") && v.width > 0 && !Y && /* @__PURE__ */ i(
+            Z.div,
+            {
+              className: c("absolute rounded-md pointer-events-none z-0", {
+                "bg-background shadow-sm": e === "solid",
+                "bg-primary": (e === "bordered" || e === "pills") && s === "primary",
+                "bg-secondary": (e === "bordered" || e === "pills") && s === "secondary",
+                "bg-muted": (e === "bordered" || e === "pills") && s === "muted",
+                "bg-accent": (e === "bordered" || e === "pills") && s === "accent",
+                "bg-destructive": (e === "bordered" || e === "pills") && s === "destructive",
+                "bg-success": (e === "bordered" || e === "pills") && s === "success",
+                "bg-warning": (e === "bordered" || e === "pills") && s === "warning",
+                "border rounded-full border-primary": e === "pill-stroke" && s === "primary",
+                "border rounded-full border-secondary": e === "pill-stroke" && s === "secondary",
+                "rounded-full border-muted": e === "pill-stroke" && s === "muted",
+                "border rounded-full border-accent": e === "pill-stroke" && s === "accent",
+                "border rounded-full border-destructive": e === "pill-stroke" && s === "destructive",
+                "border rounded-full border-success": e === "pill-stroke" && s === "success",
+                "border rounded-full border-warning": e === "pill-stroke" && s === "warning"
+              }),
+              animate: {
+                left: v.left,
+                width: v.width,
+                top: v.top,
+                height: v.height
+              },
+              transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 30
+              }
+            }
+          )
+        ]
+      }
+    );
+    return l === "scroll" ? /* @__PURE__ */ x(
+      K,
+      {
+        ref: E,
+        className: c({
+          "w-full": !r,
+          "pb-2": !r && y,
+          "max-h-[300px] *:data-radix-scroll-area-viewport:h-full *:data-radix-scroll-area-viewport:max-h-[inherit]": r
+        }),
+        children: [
+          t,
+          /* @__PURE__ */ i(ee, { orientation: r ? "vertical" : "horizontal" })
+        ]
+      }
+    ) : l === "dropdown" && Ce ? /* @__PURE__ */ x(
+      "div",
+      {
+        className: c("relative flex items-start gap-1", {
+          "flex-col": r
+        }),
+        children: [
+          t,
+          /* @__PURE__ */ i(
+            te,
+            {
+              open: W,
+              onOpenChange: A,
+              trigger: /* @__PURE__ */ i(
+                "button",
+                {
+                  className: c(
+                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    "disabled:pointer-events-none disabled:opacity-50",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    "h-9 px-3 shrink-0",
+                    {
+                      "bg-accent text-accent-foreground": W
+                    }
+                  ),
+                  "aria-label": "More tabs",
+                  children: /* @__PURE__ */ i(re, { className: "h-4 w-4" })
+                }
+              ),
+              content: /* @__PURE__ */ i("div", { className: c("flex flex-col gap-1 p-1"), children: M.map((o) => /* @__PURE__ */ x(
+                "button",
+                {
+                  onClick: () => {
+                    V(o.key), A(!1);
+                  },
+                  disabled: o.disabled,
+                  className: c(
+                    "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    "disabled:pointer-events-none disabled:opacity-50",
+                    "text-left",
+                    {
+                      "bg-accent text-accent-foreground": o.key === C
+                    }
+                  ),
+                  children: [
+                    o.icon && /* @__PURE__ */ i("span", { className: "inline-flex items-center", children: o.icon }),
+                    o.label
+                  ]
+                },
+                o.key
+              )) }),
+              side: r ? "right" : "bottom",
+              align: "end",
+              className: "w-auto min-w-32 max-w-sm max-h-96 overflow-auto p-0"
+            }
+          )
+        ]
+      }
+    ) : l === "fade" && y ? /* @__PURE__ */ x(
+      "div",
+      {
+        className: c("relative flex items-start gap-1", {
+          "flex-col": r,
+          "flex-1 w-full": !0
+          // Take full width for fade mode
+        }),
+        children: [
+          /* @__PURE__ */ x(
+            "div",
+            {
+              className: c("relative flex-1 overflow-hidden", {
+                "w-full": !r,
+                "h-full": r
+              }),
+              children: [
+                /* @__PURE__ */ x(
+                  K,
+                  {
+                    ref: E,
+                    className: c({
+                      "w-full": !r,
+                      "h-full": r
+                    }),
+                    children: [
+                      t,
+                      /* @__PURE__ */ i(ee, { orientation: r ? "vertical" : "horizontal" })
+                    ]
+                  }
+                ),
+                pe && /* @__PURE__ */ i(
+                  "div",
+                  {
+                    className: c("absolute pointer-events-none z-20", {
+                      "top-0 left-0 bottom-0 w-24 bg-linear-to-r from-background to-transparent": !r,
+                      "left-0 right-0 top-0 h-24 bg-linear-to-b from-background to-transparent": r
+                    })
+                  }
+                ),
+                me && /* @__PURE__ */ i(
+                  "div",
+                  {
+                    className: c("absolute pointer-events-none z-20", {
+                      "top-0 right-0 bottom-0 w-24 bg-linear-to-l from-background to-transparent": !r,
+                      "left-0 right-0 bottom-0 h-24 bg-linear-to-t from-background to-transparent": r
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            te,
+            {
+              open: W,
+              onOpenChange: A,
+              trigger: /* @__PURE__ */ i(
+                "button",
+                {
+                  className: c(
+                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    "disabled:pointer-events-none disabled:opacity-50",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    "h-9 px-3 shrink-0",
+                    {
+                      "bg-accent text-accent-foreground": W
+                    }
+                  ),
+                  "aria-label": "More tabs",
+                  children: /* @__PURE__ */ i(re, { className: "h-4 w-4" })
+                }
+              ),
+              content: (
+                // <div className={cn("flex flex-col gap-1 min-w-[150px]")}>
+                /* @__PURE__ */ i(
+                  K,
+                  {
+                    className: "min-w-[150px] max-h-[256px] [&_[data-radix-scroll-area-viewport]]:max-h-[256px]",
+                    snapType: "y",
+                    children: d.map((o) => /* @__PURE__ */ x(
+                      "button",
+                      {
+                        onClick: () => {
+                          V(o.key), A(!1);
+                        },
+                        disabled: o.disabled,
+                        className: c(
+                          "snap-start",
+                          "w-full flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                          "hover:bg-accent hover:text-accent-foreground",
+                          "disabled:pointer-events-none disabled:opacity-50",
+                          "text-left",
+                          {
+                            "bg-accent text-accent-foreground": o.key === C
+                          }
+                        ),
+                        children: [
+                          o.icon && /* @__PURE__ */ i("span", { className: "inline-flex items-center", children: o.icon }),
+                          o.label
+                        ]
+                      },
+                      o.key
+                    ))
+                  }
+                )
+              ),
+              side: r ? "right" : "bottom",
+              align: "end"
+            }
+          )
+        ]
+      }
+    ) : t;
+  };
+  return /* @__PURE__ */ x(
+    ze,
+    {
+      ref: le,
+      defaultValue: P,
+      value: C,
+      onValueChange: V,
+      orientation: ve,
+      className: c("gap-2", se[p].root, ce),
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            ref: R,
+            className: c("flex", {
+              [oe[_].horizontal]: !r,
+              [oe[_].vertical]: r,
+              "w-full": (D || l === "dropdown" || l === "fade") && !r,
+              "overflow-hidden": l === "dropdown" || l === "fade"
+            }),
+            children: Se()
+          }
+        ),
+        d.map((t) => /* @__PURE__ */ i(
+          Re,
+          {
+            value: t.key,
+            className: c(fe),
+            children: t.children
+          },
+          t.key
+        ))
+      ]
+    }
+  );
+});
+Me.displayName = "Tabs";
+export {
+  Me as default
+};
+//# sourceMappingURL=Tabs.js.map