@tangle-network/ui 1.0.0

package/dist/chunk-MKTSMWVD.js

@@ -0,0 +1,109 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+        outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
+        secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
+        ghost: "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
+        link: "text-primary underline-offset-4 hover:underline",
+        sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]"
+      },
+      size: {
+        default: "h-[var(--control-height)] px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-lg px-7 text-sm",
+        xl: "h-13 rounded-xl px-9 text-base",
+        icon: "h-[var(--control-height)] w-[var(--control-height)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          className: cn(buttonVariants({ variant, size, className })),
+          ref,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "mr-2 -ml-1 h-4 w-4 animate-spin",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx("title", { children: "Loading spinner" }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  buttonVariants,
+  Button
+};

package/dist/chunk-NKDZ7GZE.js

@@ -0,0 +1,192 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-34A66VBG.js";
+import {
+  Button
+} from "./chunk-MKTSMWVD.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/auth/auth.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function GitHubIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+        }
+      )
+    }
+  );
+}
+function GitHubLoginButton({
+  authUrl = "/auth/github",
+  variant = "default",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      className: cn("gap-2", className),
+      onClick: () => {
+        window.location.href = authUrl;
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(GitHubIcon, { className: "h-5 w-5" }),
+        children ?? "Sign in with GitHub"
+      ]
+    }
+  );
+}
+function UserMenu({
+  user,
+  logoutUrl = "/auth/logout",
+  links = [],
+  variant = "sandbox",
+  onLogout
+}) {
+  const initials = user.name ? user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : user.email.slice(0, 2).toUpperCase();
+  const avatarGradient = {
+    sandbox: "bg-[image:var(--accent-gradient-strong)]"
+  }[variant];
+  const handleLogout = () => {
+    if (onLogout) {
+      onLogout();
+    }
+    window.location.href = logoutUrl;
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8", children: [
+            /* @__PURE__ */ jsx(AvatarImage, { src: void 0, alt: user.name ?? user.email }),
+            /* @__PURE__ */ jsx(
+              AvatarFallback,
+              {
+                className: cn(
+                  "text-white text-xs",
+                  avatarGradient
+                ),
+                children: initials
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden text-left md:block", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: user.name ?? user.email }),
+            user.tier && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs capitalize", children: [
+              user.tier,
+              " Plan"
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: user.name ?? "Account" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: user.email })
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      links.map((link) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs("a", { href: link.href, className: "flex items-center gap-2", children: [
+        link.icon,
+        link.label
+      ] }) }, link.href)),
+      links.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: handleLogout,
+          className: "text-[var(--surface-danger-text)] focus:text-[var(--surface-danger-text)]",
+          children: "Sign out"
+        }
+      )
+    ] })
+  ] });
+}
+function AuthHeader({
+  user,
+  loading = false,
+  variant = "sandbox",
+  apiBaseUrl = "",
+  menuLinks,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-muted" }) })
+    ] });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsx(
+      GitHubLoginButton,
+      {
+        authUrl: `${apiBaseUrl}/auth/github`,
+        variant,
+        size: "sm"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    UserMenu,
+    {
+      user,
+      variant,
+      logoutUrl: `${apiBaseUrl}/auth/logout`,
+      links: menuLinks
+    }
+  );
+}
+
+// src/auth/login-layout.tsx
+import { Terminal } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function LoginLayout({
+  title = "Welcome Back",
+  subtitle = "Sign in to your workspace.",
+  brandIcon,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("relative flex min-h-screen items-center justify-center bg-background overflow-hidden antialiased font-sans flex-col", className), children: /* @__PURE__ */ jsxs2("div", { className: "z-10 w-full max-w-md px-6 animate-in flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-10 text-center flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx2("div", { className: "inline-flex h-14 w-14 mb-4 items-center justify-center rounded-lg bg-muted border border-border", children: brandIcon || /* @__PURE__ */ jsx2(Terminal, { className: "h-7 w-7 text-foreground" }) }),
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-bold tracking-tight text-foreground font-display", children: title }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "w-full bg-card p-8 border border-border rounded-lg", children })
+  ] }) });
+}
+
+export {
+  GitHubLoginButton,
+  UserMenu,
+  AuthHeader,
+  LoginLayout
+};

package/dist/chunk-OEX7NZE3.js

@@ -0,0 +1,321 @@
+// src/stores/active-sessions-store.ts
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+import { useMemo } from "react";
+var INITIAL_STATE = {
+  sessions: {},
+  lastUpdatedAt: 0
+};
+var STATUS_PRIORITY = {
+  running: 0,
+  error: 1,
+  "attention-needed": 2,
+  idle: 3
+};
+var DEFAULT_RECORD = {
+  status: "idle",
+  isRunning: false,
+  isForeground: false,
+  needsAttention: false,
+  connectionState: "disconnected",
+  reconnectState: "idle",
+  transportMode: null,
+  lastError: null,
+  lastEventAt: null
+};
+var activeSessionsAtom = atom(INITIAL_STATE);
+var foregroundSessionId = null;
+function createRecord(options, now) {
+  return {
+    sessionId: options.sessionId,
+    projectId: options.projectId ?? null,
+    projectLabel: options.projectLabel,
+    title: options.title,
+    href: options.href,
+    registeredAt: now,
+    lastActivityAt: now,
+    metadata: options.metadata,
+    ...DEFAULT_RECORD,
+    isForeground: options.sessionId === foregroundSessionId
+  };
+}
+function resolveStatus(session) {
+  if (session.isRunning) return "running";
+  if (session.lastError || session.reconnectState === "failed") return "error";
+  if (session.needsAttention) return "attention-needed";
+  return "idle";
+}
+function normalizeSession(session) {
+  return {
+    ...session,
+    status: resolveStatus(session)
+  };
+}
+function updateSession(sessionId, updater) {
+  const current = activeSessionsAtom.get();
+  const existing = current.sessions[sessionId];
+  if (!existing) return;
+  const now = Date.now();
+  activeSessionsAtom.set({
+    sessions: {
+      ...current.sessions,
+      [sessionId]: normalizeSession(updater(existing, now))
+    },
+    lastUpdatedAt: now
+  });
+}
+function registerActiveSession(options) {
+  const now = Date.now();
+  const current = activeSessionsAtom.get();
+  const existing = current.sessions[options.sessionId];
+  activeSessionsAtom.set({
+    sessions: {
+      ...current.sessions,
+      [options.sessionId]: normalizeSession(
+        existing ? {
+          ...existing,
+          projectId: existing.projectId ?? options.projectId ?? null,
+          projectLabel: options.projectLabel ?? existing.projectLabel,
+          title: options.title ?? existing.title,
+          href: options.href ?? existing.href,
+          metadata: options.metadata ?? existing.metadata,
+          lastActivityAt: now,
+          isForeground: options.sessionId === foregroundSessionId || existing.isForeground
+        } : createRecord(options, now)
+      )
+    },
+    lastUpdatedAt: now
+  });
+}
+function unregisterActiveSession(sessionId) {
+  const current = activeSessionsAtom.get();
+  if (!current.sessions[sessionId]) return;
+  const { [sessionId]: _removed, ...remaining } = current.sessions;
+  if (foregroundSessionId === sessionId) {
+    foregroundSessionId = null;
+  }
+  activeSessionsAtom.set({
+    sessions: remaining,
+    lastUpdatedAt: Date.now()
+  });
+}
+function setForegroundActiveSession(sessionId) {
+  foregroundSessionId = sessionId;
+  const current = activeSessionsAtom.get();
+  const now = Date.now();
+  let changed = false;
+  const sessions = Object.fromEntries(
+    Object.entries(current.sessions).map(([id, session]) => {
+      const isForeground = id === sessionId;
+      if (session.isForeground !== isForeground) {
+        changed = true;
+      }
+      return [
+        id,
+        {
+          ...session,
+          isForeground,
+          lastActivityAt: isForeground ? now : session.lastActivityAt
+        }
+      ];
+    })
+  );
+  if (!changed) return;
+  activeSessionsAtom.set({
+    sessions,
+    lastUpdatedAt: now
+  });
+}
+function updateActiveSessionMeta(sessionId, meta) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    ...meta,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionConnection(sessionId, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    connectionState: options.connectionState,
+    reconnectState: options.reconnectState ?? session.reconnectState,
+    transportMode: options.transportMode ?? session.transportMode,
+    lastError: options.lastError === void 0 ? session.lastError : options.lastError,
+    lastEventAt: options.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionRunning(sessionId, isRunning, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    isRunning,
+    needsAttention: isRunning ? false : session.needsAttention,
+    lastError: isRunning ? null : session.lastError,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionAttention(sessionId, needsAttention, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    needsAttention,
+    isRunning: needsAttention ? false : session.isRunning,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionError(sessionId, error) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    isRunning: false,
+    needsAttention: false,
+    lastError: error,
+    reconnectState: error ? "failed" : "idle",
+    connectionState: error ? "error" : session.connectionState,
+    lastEventAt: now,
+    lastActivityAt: now
+  }));
+}
+function bumpActiveSessionActivity(sessionId, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt ?? now,
+    lastActivityAt: now
+  }));
+}
+function resetActiveSessions() {
+  foregroundSessionId = null;
+  activeSessionsAtom.set(INITIAL_STATE);
+}
+function getAllActiveSessions(state) {
+  return Object.values(state.sessions);
+}
+function getActiveSession(state, sessionId) {
+  return state.sessions[sessionId] ?? null;
+}
+function getSessionsForProject(state, projectId) {
+  return Object.values(state.sessions).filter((session) => session.projectId === projectId);
+}
+function getSessionsForNavbar(state, projectId) {
+  const sessions = projectId == null ? Object.values(state.sessions) : getSessionsForProject(state, projectId);
+  return [...sessions].sort((left, right) => {
+    if (left.isForeground !== right.isForeground) {
+      return Number(right.isForeground) - Number(left.isForeground);
+    }
+    const statusDiff = STATUS_PRIORITY[left.status] - STATUS_PRIORITY[right.status];
+    if (statusDiff !== 0) {
+      return statusDiff;
+    }
+    return right.lastActivityAt - left.lastActivityAt;
+  });
+}
+function getSessionsByActivity(state) {
+  return [...Object.values(state.sessions)].sort(
+    (left, right) => right.lastActivityAt - left.lastActivityAt
+  );
+}
+function getTotalRunningSessionCount(state) {
+  return Object.values(state.sessions).filter((session) => session.isRunning).length;
+}
+function hasBackgroundRunningSessions(state) {
+  return Object.values(state.sessions).some(
+    (session) => session.isRunning && !session.isForeground
+  );
+}
+function getAllProjectActivity(state) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const session of Object.values(state.sessions)) {
+    if (session.projectId == null) continue;
+    const existing = grouped.get(session.projectId);
+    if (existing) {
+      existing.activeSessionCount += 1;
+      existing.lastActivityAt = Math.max(existing.lastActivityAt, session.lastActivityAt);
+      if (session.isRunning) {
+        existing.runningSessionIds.push(session.sessionId);
+      }
+      if (!existing.projectLabel && session.projectLabel) {
+        existing.projectLabel = session.projectLabel;
+      }
+      continue;
+    }
+    grouped.set(session.projectId, {
+      projectId: session.projectId,
+      projectLabel: session.projectLabel,
+      activeSessionCount: 1,
+      runningSessionIds: session.isRunning ? [session.sessionId] : [],
+      lastActivityAt: session.lastActivityAt
+    });
+  }
+  return [...grouped.values()].sort((left, right) => right.lastActivityAt - left.lastActivityAt);
+}
+function useActiveSessionsState() {
+  return useStore(activeSessionsAtom);
+}
+function useActiveSessions() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getAllActiveSessions(state), [state]);
+}
+function useActiveSession(sessionId) {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(
+    () => sessionId ? getActiveSession(state, sessionId) : null,
+    [sessionId, state]
+  );
+}
+function useProjectSessions(projectId) {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(
+    () => projectId == null ? [] : getSessionsForProject(state, projectId),
+    [projectId, state]
+  );
+}
+function useNavbarSessions(projectId) {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getSessionsForNavbar(state, projectId), [projectId, state]);
+}
+function useSessionsByActivity() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getSessionsByActivity(state), [state]);
+}
+function useProjectActivity() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getAllProjectActivity(state), [state]);
+}
+function useTotalRunningSessions() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getTotalRunningSessionCount(state), [state]);
+}
+function useHasBackgroundRunningSessions() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => hasBackgroundRunningSessions(state), [state]);
+}
+
+export {
+  activeSessionsAtom,
+  registerActiveSession,
+  unregisterActiveSession,
+  setForegroundActiveSession,
+  updateActiveSessionMeta,
+  setActiveSessionConnection,
+  setActiveSessionRunning,
+  setActiveSessionAttention,
+  setActiveSessionError,
+  bumpActiveSessionActivity,
+  resetActiveSessions,
+  getAllActiveSessions,
+  getActiveSession,
+  getSessionsForProject,
+  getSessionsForNavbar,
+  getSessionsByActivity,
+  getTotalRunningSessionCount,
+  hasBackgroundRunningSessions,
+  getAllProjectActivity,
+  useActiveSessionsState,
+  useActiveSessions,
+  useActiveSession,
+  useProjectSessions,
+  useNavbarSessions,
+  useSessionsByActivity,
+  useProjectActivity,
+  useTotalRunningSessions,
+  useHasBackgroundRunningSessions
+};

package/dist/chunk-Q56BYXQF.js

@@ -0,0 +1,61 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/tabs.tsx
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
+  const variants = {
+    default: "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+    pills: "inline-flex items-center gap-2",
+    underline: "inline-flex items-center gap-4 border-b border-border"
+  };
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(variants[variant], className),
+      ...props
+    }
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
+  const variants = {
+    default: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+    pills: "inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted",
+    underline: "inline-flex items-center justify-center whitespace-nowrap pb-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground"
+  };
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(variants[variant], className),
+      ...props
+    }
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:animate-in",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent
+};