@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,399 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  BellIcon,
+  CreditCardIcon,
+  LockIcon,
+  PaletteIcon,
+  UserIcon,
+} from "lucide-react";
+import React from "react";
+import { Button } from "../../components";
+import { Tabs, TabsList, TabsPanel, TabsPrimitive, TabsTab } from "./tabs";
+
+/**
+ * Accessible tab component built on Base UI Tabs primitives.
+ *
+ * `variant` lives on `TabsList`, not on `Tabs`. Two variants are available:
+ * `"underline"` (default) renders a line indicator at the edge of the active
+ * tab; `"background"` renders a rounded background behind the active tab.
+ *
+ * Use `value` + `onValueChange` for controlled state.
+ * Set `orientation="vertical"` on `Tabs` to switch to a column layout.
+ */
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+  },
+  subcomponents: {
+    TabsList: TabsList as React.ComponentType<unknown>,
+    TabsTab: TabsTab as React.ComponentType<unknown>,
+    TabsPanel: TabsPanel as React.ComponentType<unknown>,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+// ---------------------------------------------------------------------------
+// Shared content blocks
+// ---------------------------------------------------------------------------
+
+const AccountPanel = () => (
+  <div className="space-y-4 py-2">
+    <div className="flex items-center gap-4">
+      <div className="size-14 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
+        <UserIcon className="size-6" />
+      </div>
+      <div>
+        <p className="font-medium">John Doe</p>
+        <p className="text-sm text-muted-foreground">john@example.com</p>
+      </div>
+    </div>
+    <div className="grid gap-3">
+      <div className="grid gap-1.5">
+        <label className="text-sm font-medium">Display name</label>
+        <input
+          defaultValue="John Doe"
+          className="h-9 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+        />
+      </div>
+      <div className="grid gap-1.5">
+        <label className="text-sm font-medium">Email</label>
+        <input
+          defaultValue="john@example.com"
+          type="email"
+          className="h-9 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+        />
+      </div>
+    </div>
+    <div className="flex justify-end">
+      <Button size="sm">Save changes</Button>
+    </div>
+  </div>
+);
+
+const SecurityPanel = () => (
+  <div className="space-y-3 py-2">
+    {[
+      {
+        label: "Password",
+        meta: "Last changed 3 months ago",
+        action: "Change",
+      },
+      {
+        label: "Two-factor authentication",
+        meta: "Add an extra layer of security",
+        action: "Enable",
+      },
+      {
+        label: "Active sessions",
+        meta: "2 devices currently signed in",
+        action: "Manage",
+      },
+    ].map(({ label, meta, action }) => (
+      <div
+        key={label}
+        className="flex items-center justify-between rounded-lg border p-3.5"
+      >
+        <div>
+          <p className="text-sm font-medium">{label}</p>
+          <p className="text-xs text-muted-foreground">{meta}</p>
+        </div>
+        <Button variant="outline" size="sm">
+          {action}
+        </Button>
+      </div>
+    ))}
+  </div>
+);
+
+const NotificationsPanel = () => (
+  <div className="space-y-3 py-2">
+    {[
+      { title: "Email notifications", desc: "Weekly digest and alerts" },
+      { title: "Push notifications", desc: "Desktop and mobile" },
+      { title: "Security alerts", desc: "Unusual sign-in activity" },
+    ].map(({ title, desc }) => (
+      <div key={title} className="flex items-center justify-between py-1">
+        <div>
+          <p className="text-sm font-medium">{title}</p>
+          <p className="text-xs text-muted-foreground">{desc}</p>
+        </div>
+        <div className="size-5 rounded border border-input bg-background" />
+      </div>
+    ))}
+  </div>
+);
+
+const BillingPanel = () => (
+  <div className="space-y-3 py-2">
+    <div className="rounded-lg border p-4 flex items-start gap-3">
+      <CreditCardIcon className="size-5 mt-0.5 text-muted-foreground" />
+      <div className="flex-1">
+        <p className="text-sm font-medium">Pro plan · $12/month</p>
+        <p className="text-xs text-muted-foreground">Renews on Jun 1, 2025</p>
+      </div>
+      <Button variant="outline" size="sm">
+        Manage
+      </Button>
+    </div>
+    <div className="rounded-lg border p-4">
+      <p className="text-sm font-medium mb-2">Payment method</p>
+      <p className="text-sm text-muted-foreground">Visa ending in 4242</p>
+    </div>
+  </div>
+);
+
+const AppearancePanel = () => (
+  <div className="space-y-3 py-2">
+    <div>
+      <p className="text-sm font-medium mb-2">Theme</p>
+      <div className="flex gap-2">
+        {["Light", "Dark", "System"].map((t) => (
+          <button
+            key={t}
+            className="rounded-md border px-3 py-1.5 text-sm data-[active]:border-primary data-[active]:bg-primary/5 cursor-pointer"
+            data-active={t === "Light" ? "" : undefined}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+    </div>
+    <div>
+      <p className="text-sm font-medium mb-2">Density</p>
+      <div className="flex gap-2">
+        {["Compact", "Comfortable", "Spacious"].map((d) => (
+          <button
+            key={d}
+            className="rounded-md border px-3 py-1.5 text-sm cursor-pointer"
+          >
+            {d}
+          </button>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList>
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="notifications">Notifications</TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+      <TabsPanel value="notifications">
+        <NotificationsPanel />
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const Background: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList variant="background">
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="notifications">Notifications</TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+      <TabsPanel value="notifications">
+        <NotificationsPanel />
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <Tabs
+      defaultValue="account"
+      orientation="vertical"
+      className="w-[620px] h-[300px]"
+    >
+      <TabsList className="w-44 shrink-0">
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="billing">Billing</TabsTab>
+        <TabsTab value="appearance">Appearance</TabsTab>
+      </TabsList>
+      <div className="flex-1 min-w-0">
+        <TabsPanel value="account">
+          <AccountPanel />
+        </TabsPanel>
+        <TabsPanel value="security">
+          <SecurityPanel />
+        </TabsPanel>
+        <TabsPanel value="billing">
+          <BillingPanel />
+        </TabsPanel>
+        <TabsPanel value="appearance">
+          <AppearancePanel />
+        </TabsPanel>
+      </div>
+    </Tabs>
+  ),
+};
+
+export const PillVertical: Story = {
+  render: () => (
+    <Tabs
+      defaultValue="account"
+      orientation="vertical"
+      className="w-[620px] h-[300px]"
+    >
+      <TabsList variant="background" className="w-44 shrink-0">
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="billing">Billing</TabsTab>
+        <TabsTab value="appearance">Appearance</TabsTab>
+      </TabsList>
+      <div className="flex-1 min-w-0">
+        <TabsPanel value="account">
+          <AccountPanel />
+        </TabsPanel>
+        <TabsPanel value="security">
+          <SecurityPanel />
+        </TabsPanel>
+        <TabsPanel value="billing">
+          <BillingPanel />
+        </TabsPanel>
+        <TabsPanel value="appearance">
+          <AppearancePanel />
+        </TabsPanel>
+      </div>
+    </Tabs>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList>
+        <TabsTab value="account">
+          <UserIcon />
+          Account
+        </TabsTab>
+        <TabsTab value="security">
+          <LockIcon />
+          Security
+        </TabsTab>
+        <TabsTab value="notifications">
+          <BellIcon />
+          Notifications
+        </TabsTab>
+        <TabsTab value="appearance">
+          <PaletteIcon />
+          Appearance
+        </TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+      <TabsPanel value="notifications">
+        <NotificationsPanel />
+      </TabsPanel>
+      <TabsPanel value="appearance">
+        <AppearancePanel />
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * Any tab can be disabled via the `disabled` prop on `TabsTab`.
+ * The indicator skips over disabled tabs.
+ */
+export const Disabled: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList>
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="billing" disabled>
+          Billing
+        </TabsTab>
+        <TabsTab value="enterprise" disabled>
+          Enterprise
+        </TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * Use `TabsPrimitive` to access the raw Base UI API when the styled wrappers
+ * don't cover your use case — custom indicators, additional ARIA attributes, etc.
+ */
+export const Primitive: Story = {
+  render: () => (
+    <TabsPrimitive.Root
+      defaultValue="account"
+      className="w-[480px] h-[340px] flex flex-col gap-2"
+    >
+      <TabsPrimitive.List className="flex gap-1 border-b">
+        <TabsPrimitive.Tab
+          value="account"
+          className="px-4 py-2 text-sm font-medium data-active:border-b-2 data-active:border-primary cursor-pointer"
+        >
+          Account
+        </TabsPrimitive.Tab>
+        <TabsPrimitive.Tab
+          value="security"
+          className="px-4 py-2 text-sm font-medium data-active:border-b-2 data-active:border-primary cursor-pointer"
+        >
+          Security
+        </TabsPrimitive.Tab>
+      </TabsPrimitive.List>
+      <TabsPrimitive.Panel value="account">
+        <AccountPanel />
+      </TabsPrimitive.Panel>
+      <TabsPrimitive.Panel value="security">
+        <SecurityPanel />
+      </TabsPrimitive.Panel>
+    </TabsPrimitive.Root>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<TabsPrimitive.Root defaultValue="account">
+  <TabsPrimitive.List>
+    <TabsPrimitive.Tab value="account">Account</TabsPrimitive.Tab>
+    <TabsPrimitive.Tab value="security">Security</TabsPrimitive.Tab>
+  </TabsPrimitive.List>
+  <TabsPrimitive.Panel value="account">…</TabsPrimitive.Panel>
+  <TabsPrimitive.Panel value="security">…</TabsPrimitive.Panel>
+</TabsPrimitive.Root>`,
+      },
+    },
+  },
+};

package/src/components/tabs/tabs.test.tsx

@@ -0,0 +1,202 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  TabList,
+  Tabs,
+  TabsContent,
+  TabsPrimitive,
+  TabsTrigger,
+} from "../../components";
+import { click } from "../../utils/tests";
+
+describe("Tabs component", () => {
+  it("should render correctly", () => {
+    render(<Tabs data-testid="Tabs" />);
+    const component = screen.getByTestId("Tabs");
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should show tabs", () => {
+    render(
+      <Tabs>
+        <TabList>
+          <TabsTrigger value="trigger">Trigger</TabsTrigger>
+          <TabsTrigger value="test">Test</TabsTrigger>
+        </TabList>
+      </Tabs>,
+    );
+
+    expect(screen.getByText(/trigger/i)).toBeInTheDocument();
+    expect(screen.getByText(/test/i)).toBeInTheDocument();
+  });
+
+  it("should show tab content", () => {
+    render(
+      <Tabs defaultValue="trigger">
+        <TabList>
+          <TabsTrigger value="trigger">Trigger</TabsTrigger>
+          <TabsTrigger value="test">Test</TabsTrigger>
+        </TabList>
+        <TabsContent value="trigger">Contenido de trigger</TabsContent>
+      </Tabs>,
+    );
+
+    expect(screen.getByText("Contenido de trigger")).toBeInTheDocument();
+  });
+
+  it("should be controlled", () => {
+    const mock = vi.fn();
+    render(
+      <Tabs value="trigger" onValueChange={mock}>
+        <TabList>
+          <TabsTrigger value="trigger">Trigger</TabsTrigger>
+          <TabsTrigger value="test">Test</TabsTrigger>
+        </TabList>
+        <TabsContent value="trigger">Contenido de trigger</TabsContent>
+        <TabsContent value="test">Contenido de test</TabsContent>
+      </Tabs>,
+    );
+
+    const testTrigger = screen.getByText("Test");
+    click(testTrigger);
+
+    waitFor(() => {
+      expect(mock).toHaveBeenCalledWith("test");
+    });
+  });
+});
+
+describe("Tabs data-slots", () => {
+  it("sets data-slot='tabs' on root", () => {
+    render(<Tabs />);
+    expect(document.querySelector('[data-slot="tabs"]')).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tabs-list' on list", () => {
+    render(
+      <Tabs>
+        <TabList />
+      </Tabs>,
+    );
+    expect(
+      document.querySelector('[data-slot="tabs-list"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tab-indicator' inside list", () => {
+    render(
+      <Tabs>
+        <TabList />
+      </Tabs>,
+    );
+    expect(
+      document.querySelector('[data-slot="tab-indicator"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tabs-tab' on trigger", () => {
+    render(
+      <Tabs>
+        <TabList>
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabList>
+      </Tabs>,
+    );
+    expect(
+      document.querySelector('[data-slot="tabs-tab"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tabs-content' on panel", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsContent value="a">Content</TabsContent>
+      </Tabs>,
+    );
+    expect(
+      document.querySelector('[data-slot="tabs-content"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Tabs variants", () => {
+  it.each([
+    ["underline", "underline"],
+    ["background", "background"],
+  ] as const)("sets data-variant='%s' on list", (variant, expected) => {
+    render(
+      <Tabs>
+        <TabList variant={variant} />
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-list"]')).toHaveAttribute(
+      "data-variant",
+      expected,
+    );
+  });
+
+  it("applies mx-auto when centered=true", () => {
+    render(
+      <Tabs>
+        <TabList centered />
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-list"]')).toHaveClass(
+      "mx-auto",
+    );
+  });
+});
+
+describe("Tabs classNames", () => {
+  it("applies className to root", () => {
+    render(<Tabs className="custom-root" />);
+    expect(document.querySelector('[data-slot="tabs"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+
+  it("applies className to TabsList", () => {
+    render(
+      <Tabs>
+        <TabList className="custom-list" />
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-list"]')).toHaveClass(
+      "custom-list",
+    );
+  });
+
+  it("applies className to TabsTrigger", () => {
+    render(
+      <Tabs>
+        <TabList>
+          <TabsTrigger value="a" className="custom-tab">
+            A
+          </TabsTrigger>
+        </TabList>
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-tab"]')).toHaveClass(
+      "custom-tab",
+    );
+  });
+
+  it("applies className to TabsContent", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsContent value="a" className="custom-panel">
+          Content
+        </TabsContent>
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-content"]')).toHaveClass(
+      "custom-panel",
+    );
+  });
+});
+
+describe("Tabs exports", () => {
+  it("exports TabsPrimitive", () => {
+    expect(TabsPrimitive).toBeDefined();
+  });
+});

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import type React from "react";
+import { cn } from "../../lib";
+
+export type TabsVariant = "underline" | "background";
+
+export function Tabs({
+  className,
+  ...props
+}: TabsPrimitive.Root.Props): React.ReactElement {
+  return (
+    <TabsPrimitive.Root
+      className={cn(
+        "flex flex-col gap-2 data-[orientation=vertical]:flex-row",
+        className,
+      )}
+      data-slot="tabs"
+      {...props}
+    />
+  );
+}
+
+export function TabsList({
+  variant = "underline",
+  centered = false,
+  className,
+  children,
+  ...props
+}: TabsPrimitive.List.Props & {
+  variant?: TabsVariant;
+  centered?: boolean;
+}): React.ReactElement {
+  return (
+    <TabsPrimitive.List
+      data-variant={variant}
+      className={cn(
+        "group/tabs-list relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground",
+        centered && "mx-auto",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-start",
+        variant === "background"
+          ? "rounded-lg border border-border p-0.5"
+          : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
+        className,
+      )}
+      data-slot="tabs-list"
+      {...props}
+    >
+      {children}
+      <TabsPrimitive.Indicator
+        className={cn(
+          "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
+          variant === "background"
+            ? "-z-1 rounded-md bg-primary shadow-sm/5"
+            : "z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px",
+        )}
+        data-slot="tab-indicator"
+      />
+    </TabsPrimitive.List>
+  );
+}
+
+export function TabsTab({
+  className,
+  ...props
+}: TabsPrimitive.Tab.Props): React.ReactElement {
+  return (
+    <TabsPrimitive.Tab
+      className={cn(
+        "relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:grow-0 data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 group-data-[variant=background]/tabs-list:data-active:text-primary-foreground sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="tabs-tab"
+      {...props}
+    />
+  );
+}
+
+export function TabsPanel({
+  className,
+  ...props
+}: TabsPrimitive.Panel.Props): React.ReactElement {
+  return (
+    <TabsPrimitive.Panel
+      className={cn("flex-1 outline-none", className)}
+      data-slot="tabs-content"
+      {...props}
+    />
+  );
+}
+
+export {
+  TabsPrimitive,
+  TabsTab as TabsTrigger,
+  TabsPanel as TabsContent,
+  TabsList as TabList,
+};

package/src/components/tag/index.ts

@@ -0,0 +1 @@
+export * from "./tag";