@emara/ui 1.1.0

package/components/ui/table.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+const meta: Meta<typeof Table> = {
+  title: "Data/Table",
+  component: Table,
+  parameters: { layout: "padded" },
+  argTypes: {
+    density: { control: "select", options: ["warm", "dense"] },
+    striped: { control: "boolean" },
+    bordered: { control: "boolean" },
+    hoverable: { control: "boolean" },
+    stickyHeader: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+const ROWS = [
+  { id: "INV001", status: "Paid", method: "Credit card", amount: 250.0 },
+  { id: "INV002", status: "Pending", method: "Bank transfer", amount: 150.0 },
+  { id: "INV003", status: "Unpaid", method: "PayPal", amount: 350.0 },
+  { id: "INV004", status: "Paid", method: "Credit card", amount: 450.0 },
+  { id: "INV005", status: "Paid", method: "Credit card", amount: 550.0 },
+];
+
+export const Default: Story = {
+  render: (args) => (
+    <Table {...args}>
+      <TableCaption>Recent invoices</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-end">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {ROWS.map((r) => (
+          <TableRow key={r.id}>
+            <TableCell className="font-medium">{r.id}</TableCell>
+            <TableCell>{r.status}</TableCell>
+            <TableCell>{r.method}</TableCell>
+            <TableCell className="text-end tabular-nums">${r.amount.toFixed(2)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-end tabular-nums">
+            ${ROWS.reduce((s, r) => s + r.amount, 0).toFixed(2)}
+          </TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+};
+
+export const Striped: Story = { ...Default, args: { striped: true } };
+export const Bordered: Story = { ...Default, args: { bordered: true } };
+export const Hoverable: Story = { ...Default, args: { hoverable: true } };
+export const DenseDensity: Story = { ...Default, args: { density: "dense", striped: true } };
+export const AllOptions: Story = {
+  ...Default,
+  args: { striped: true, bordered: true, hoverable: true },
+};
+
+export const StickyHeader: Story = {
+  args: { stickyHeader: true, striped: true },
+  render: (args) => (
+    <div className="h-72">
+      <Table {...args}>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead className="text-end">Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 25 }, (_, i) => (
+            <TableRow key={i}>
+              <TableCell>INV{String(i + 1).padStart(3, "0")}</TableCell>
+              <TableCell>{i % 2 ? "Paid" : "Pending"}</TableCell>
+              <TableCell className="text-end tabular-nums">
+                ${((i + 1) * 50).toFixed(2)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};

package/components/ui/table.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-4-components.md §1.1.
+
+type TableDensity = "warm" | "dense";
+
+interface TableContextValue {
+  density?: TableDensity;
+  striped: boolean;
+  bordered: boolean;
+  hoverable: boolean;
+  stickyHeader: boolean;
+}
+
+const TableContext = createContext<TableContextValue | null>(null);
+
+function useTableContext(): TableContextValue {
+  // Subcomponents are safe outside <Table> for raw composition.
+  return (
+    useContext(TableContext) ?? {
+      striped: false,
+      bordered: false,
+      hoverable: false,
+      stickyHeader: false,
+    }
+  );
+}
+
+// --- Table (root) -----------------------------------------------------------
+
+const tableVariants = cva("w-full caption-bottom border-separate border-spacing-0 text-sm", {
+  variants: {
+    bordered: {
+      true: "",
+      false: "",
+    },
+  },
+  defaultVariants: { bordered: false },
+});
+
+type TableRootVariants = VariantProps<typeof tableVariants>;
+
+type TableProps = React.HTMLAttributes<HTMLTableElement> &
+  TableRootVariants & {
+    density?: TableDensity;
+    striped?: boolean;
+    bordered?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    /** Wraps the table in an overflow container. Default true. */
+    wrap?: boolean;
+  };
+
+const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
+  {
+    className,
+    density,
+    striped = false,
+    bordered = false,
+    hoverable = false,
+    stickyHeader = false,
+    wrap = true,
+    ...props
+  },
+  ref,
+) {
+  const ctx = useMemo<TableContextValue>(
+    () => ({
+      ...(density !== undefined ? { density } : {}),
+      striped,
+      bordered,
+      hoverable,
+      stickyHeader,
+    }),
+    [density, striped, bordered, hoverable, stickyHeader],
+  );
+
+  const tableElement = (
+    <table
+      ref={ref}
+      data-density={density}
+      data-striped={striped || undefined}
+      data-bordered={bordered || undefined}
+      data-hoverable={hoverable || undefined}
+      data-sticky-header={stickyHeader || undefined}
+      className={cn(tableVariants({ bordered }), className)}
+      {...props}
+    />
+  );
+
+  return (
+    <TableContext.Provider value={ctx}>
+      {wrap ? (
+        <div className="border-border relative w-full overflow-auto rounded-md border">
+          {tableElement}
+        </div>
+      ) : (
+        tableElement
+      )}
+    </TableContext.Provider>
+  );
+});
+Table.displayName = "Table";
+
+// --- TableHeader ------------------------------------------------------------
+
+const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(function TableHeader({ className, ...props }, ref) {
+  const { stickyHeader } = useTableContext();
+  return (
+    <thead
+      ref={ref}
+      className={cn(
+        "bg-muted/50 [&_tr]:border-border [&_tr]:border-b",
+        stickyHeader && "z-sticky bg-background sticky top-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TableHeader.displayName = "TableHeader";
+
+// --- TableBody --------------------------------------------------------------
+
+const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(function TableBody({ className, ...props }, ref) {
+  return <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+});
+TableBody.displayName = "TableBody";
+
+// --- TableFooter ------------------------------------------------------------
+
+const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(function TableFooter({ className, ...props }, ref) {
+  return (
+    <tfoot
+      ref={ref}
+      className={cn(
+        "border-border bg-muted/30 border-t font-medium [&_tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TableFooter.displayName = "TableFooter";
+
+// --- TableRow ---------------------------------------------------------------
+
+const TableRow = forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  function TableRow({ className, ...props }, ref) {
+    const { striped, hoverable } = useTableContext();
+    return (
+      <tr
+        ref={ref}
+        className={cn(
+          "border-border border-b transition-colors",
+          striped && "even:bg-muted/30",
+          hoverable && "hover:bg-muted/40",
+          "data-[state=selected]:bg-accent/40",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+TableRow.displayName = "TableRow";
+
+// --- TableHead --------------------------------------------------------------
+
+const tableHeadVariants = cva(
+  [
+    "text-start align-middle font-medium text-muted-foreground",
+    "[&:has([role=checkbox])]:pe-0",
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        warm: "h-10 px-3",
+        dense: "h-8 px-2",
+      },
+      bordered: {
+        true: "border-e border-border last:border-e-0",
+        false: "",
+      },
+    },
+    defaultVariants: { density: "warm", bordered: false },
+  },
+);
+
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
+  density?: TableDensity;
+};
+
+const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(
+  { className, density, ...props },
+  ref,
+) {
+  const { density: ctxDensity, bordered } = useTableContext();
+  const resolved = density ?? ctxDensity ?? "warm";
+  return (
+    <th
+      ref={ref}
+      className={cn(tableHeadVariants({ density: resolved, bordered }), className)}
+      {...props}
+    />
+  );
+});
+TableHead.displayName = "TableHead";
+
+// --- TableCell --------------------------------------------------------------
+
+const tableCellVariants = cva(["align-middle [&:has([role=checkbox])]:pe-0"].join(" "), {
+  variants: {
+    density: {
+      warm: "px-3 py-2.5",
+      dense: "px-2 py-1.5",
+    },
+    bordered: {
+      true: "border-e border-border last:border-e-0",
+      false: "",
+    },
+  },
+  defaultVariants: { density: "warm", bordered: false },
+});
+
+type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & {
+  density?: TableDensity;
+};
+
+const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
+  { className, density, ...props },
+  ref,
+) {
+  const { density: ctxDensity, bordered } = useTableContext();
+  const resolved = density ?? ctxDensity ?? "warm";
+  return (
+    <td
+      ref={ref}
+      className={cn(tableCellVariants({ density: resolved, bordered }), className)}
+      {...props}
+    />
+  );
+});
+TableCell.displayName = "TableCell";
+
+// --- TableCaption -----------------------------------------------------------
+
+const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(function TableCaption({ className, ...props }, ref) {
+  return (
+    <caption ref={ref} className={cn("text-muted-foreground mt-3 text-sm", className)} {...props} />
+  );
+});
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+  tableVariants,
+  tableHeadVariants,
+  tableCellVariants,
+};
+export type { TableProps, TableHeadProps, TableCellProps, TableDensity };

package/components/ui/tabs.stories.tsx

@@ -0,0 +1,222 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RiHome4Line, RiSettings4Line, RiUserLine } from "@remixicon/react";
+
+import { Badge } from "./badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Data/Tabs",
+  component: Tabs,
+  parameters: { layout: "padded" },
+  argTypes: {
+    variant: { control: "select", options: ["line", "pill", "card", "vertical"] },
+    size: { control: "select", options: ["sm", "md", "lg"] },
+    lazy: { control: "boolean" },
+    unmountInactive: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+function PanelText({ name }: { name: string }) {
+  return <p className="text-muted-foreground text-sm">Content for the {name} panel.</p>;
+}
+
+export const Line: Story = {
+  args: { variant: "line", defaultValue: "overview" },
+  render: (args) => (
+    <Tabs {...args} className="w-96">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <PanelText name="overview" />
+      </TabsContent>
+      <TabsContent value="activity">
+        <PanelText name="activity" />
+      </TabsContent>
+      <TabsContent value="settings">
+        <PanelText name="settings" />
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Pill: Story = {
+  args: { variant: "pill", defaultValue: "overview" },
+  render: (args) => (
+    <Tabs {...args} className="w-96">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <PanelText name="overview" />
+      </TabsContent>
+      <TabsContent value="activity">
+        <PanelText name="activity" />
+      </TabsContent>
+      <TabsContent value="settings">
+        <PanelText name="settings" />
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Card: Story = {
+  args: { variant: "card", defaultValue: "overview" },
+  render: (args) => (
+    <Tabs {...args} className="w-96">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent
+        value="overview"
+        className="border-border bg-card rounded-md rounded-ss-none border p-4"
+      >
+        <PanelText name="overview" />
+      </TabsContent>
+      <TabsContent
+        value="activity"
+        className="border-border bg-card rounded-md rounded-ss-none border p-4"
+      >
+        <PanelText name="activity" />
+      </TabsContent>
+      <TabsContent
+        value="settings"
+        className="border-border bg-card rounded-md rounded-ss-none border p-4"
+      >
+        <PanelText name="settings" />
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Vertical: Story = {
+  args: { variant: "vertical", defaultValue: "overview" },
+  render: (args) => (
+    <Tabs {...args} className="w-[36rem]">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <PanelText name="overview" />
+      </TabsContent>
+      <TabsContent value="activity">
+        <PanelText name="activity" />
+      </TabsContent>
+      <TabsContent value="settings">
+        <PanelText name="settings" />
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithIconsAndBadges: Story = {
+  args: { variant: "line", defaultValue: "home" },
+  render: (args) => (
+    <Tabs {...args} className="w-[28rem]">
+      <TabsList>
+        <TabsTrigger value="home" icon={<RiHome4Line />}>
+          Home
+        </TabsTrigger>
+        <TabsTrigger
+          value="profile"
+          icon={<RiUserLine />}
+          badge={
+            <Badge size="xs" variant="secondary">
+              3
+            </Badge>
+          }
+        >
+          Profile
+        </TabsTrigger>
+        <TabsTrigger value="settings" icon={<RiSettings4Line />}>
+          Settings
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="home">
+        <PanelText name="home" />
+      </TabsContent>
+      <TabsContent value="profile">
+        <PanelText name="profile" />
+      </TabsContent>
+      <TabsContent value="settings">
+        <PanelText name="settings" />
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="w-96 space-y-6">
+      {(["sm", "md", "lg"] as const).map((size) => (
+        <Tabs key={size} variant="pill" size={size} defaultValue="a">
+          <TabsList>
+            <TabsTrigger value="a">{size.toUpperCase()} A</TabsTrigger>
+            <TabsTrigger value="b">{size.toUpperCase()} B</TabsTrigger>
+          </TabsList>
+          <TabsContent value="a">
+            <PanelText name={`${size}-a`} />
+          </TabsContent>
+          <TabsContent value="b">
+            <PanelText name={`${size}-b`} />
+          </TabsContent>
+        </Tabs>
+      ))}
+    </div>
+  ),
+};
+
+export const Scrollable: Story = {
+  args: { variant: "line", defaultValue: "tab-1" },
+  render: (args) => (
+    <div className="w-72">
+      <Tabs {...args}>
+        <TabsList scrollable>
+          {Array.from({ length: 10 }, (_, i) => (
+            <TabsTrigger key={i} value={`tab-${i + 1}`}>
+              Section {i + 1}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <TabsContent value="tab-1">
+          <PanelText name="tab-1" />
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+};
+
+export const DisabledTrigger: Story = {
+  args: { variant: "line", defaultValue: "a" },
+  render: (args) => (
+    <Tabs {...args} className="w-96">
+      <TabsList>
+        <TabsTrigger value="a">Enabled</TabsTrigger>
+        <TabsTrigger value="b" disabled>
+          Disabled
+        </TabsTrigger>
+        <TabsTrigger value="c">Enabled</TabsTrigger>
+      </TabsList>
+      <TabsContent value="a">
+        <PanelText name="a" />
+      </TabsContent>
+      <TabsContent value="b">
+        <PanelText name="b" />
+      </TabsContent>
+      <TabsContent value="c">
+        <PanelText name="c" />
+      </TabsContent>
+    </Tabs>
+  ),
+};