@hilum/ui 0.1.1

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@hilum/ui",
+  "version": "0.1.1",
+  "private": false,
+  "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/hilum-labs/hilum-ui.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./icons": {
+      "import": "./dist/icons.js",
+      "types": "./dist/icons.d.ts"
+    },
+    "./tokens": {
+      "import": "./dist/tokens.js",
+      "types": "./dist/tokens.d.ts"
+    },
+    "./tokens.css": "./dist/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src/components",
+    "!src/components/__tests__",
+    "src/icons.ts",
+    "src/index.ts",
+    "src/lib",
+    "src/tokens",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-context": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.511.0",
+    "radix-ui": "^1.1.3",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^4.10.0",
+    "recharts": "^3.8.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.6.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.2.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsup && node ./scripts/build-tokens.mjs",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "clean": "rm -rf dist .turbo"
+  }
+}

package/src/components/__tests__/data.test.tsx

@@ -0,0 +1,180 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableFooter,
+  TableCaption,
+} from "../table";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../pagination";
+import { ScrollArea } from "../scroll-area";
+import { AspectRatio } from "../aspect-ratio";
+
+/* ------------------------------------------------------------------ */
+/* Table                                                                */
+/* ------------------------------------------------------------------ */
+
+describe("Table", () => {
+  function TestTable() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Alice</TableCell>
+            <TableCell>alice@example.com</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell>Total</TableCell>
+            <TableCell>1 user</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+  }
+
+  it("renders a table element", () => {
+    render(<TestTable />);
+    expect(screen.getByRole("table")).toBeInTheDocument();
+  });
+
+  it("renders column headers", () => {
+    render(<TestTable />);
+    expect(screen.getByRole("columnheader", { name: "Name" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Email" })).toBeInTheDocument();
+  });
+
+  it("renders data cells", () => {
+    render(<TestTable />);
+    expect(screen.getByRole("cell", { name: "Alice" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "alice@example.com" })).toBeInTheDocument();
+  });
+
+  it("renders caption when provided", () => {
+    render(
+      <Table>
+        <TableCaption>Users list</TableCaption>
+        <TableBody>
+          <TableRow>
+            <TableCell>Cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    expect(screen.getByText("Users list")).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Pagination                                                           */
+/* ------------------------------------------------------------------ */
+
+describe("Pagination", () => {
+  it("renders navigation", () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              1
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">2</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+    expect(screen.getByRole("navigation", { name: /pagination/i })).toBeInTheDocument();
+  });
+
+  it("renders previous and next links", () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="/prev" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="/next" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+    expect(screen.getByRole("link", { name: /previous/i })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /next/i })).toBeInTheDocument();
+  });
+
+  it("marks active link with aria-current", () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              3
+            </PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+    expect(screen.getByRole("link", { name: "3" })).toHaveAttribute("aria-current", "page");
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* ScrollArea                                                           */
+/* ------------------------------------------------------------------ */
+
+describe("ScrollArea", () => {
+  it("renders children", () => {
+    render(
+      <ScrollArea style={{ height: 100 }}>
+        <p>Scrollable content</p>
+      </ScrollArea>,
+    );
+    expect(screen.getByText("Scrollable content")).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* AspectRatio                                                          */
+/* ------------------------------------------------------------------ */
+
+describe("AspectRatio", () => {
+  it("renders children", () => {
+    render(
+      <AspectRatio ratio={16 / 9}>
+        <img alt="hero" src="" />
+      </AspectRatio>,
+    );
+    expect(screen.getByAltText("hero")).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/disclosure.test.tsx

@@ -0,0 +1,198 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../accordion";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../tabs";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../collapsible";
+import { Toggle } from "../toggle";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group";
+
+/* ------------------------------------------------------------------ */
+/* Accordion                                                            */
+/* ------------------------------------------------------------------ */
+
+describe("Accordion", () => {
+  function TestAccordion() {
+    return (
+      <Accordion type="single" collapsible>
+        <AccordionItem value="a">
+          <AccordionTrigger>Section A</AccordionTrigger>
+          <AccordionContent>Content A</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>Section B</AccordionTrigger>
+          <AccordionContent>Content B</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+  }
+
+  it("renders all trigger labels", () => {
+    render(<TestAccordion />);
+    expect(screen.getByText("Section A")).toBeInTheDocument();
+    expect(screen.getByText("Section B")).toBeInTheDocument();
+  });
+
+  it("expands item on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<TestAccordion />);
+    const triggerA = screen.getByText("Section A");
+    await user.click(triggerA);
+    expect(screen.getByText("Content A")).toBeVisible();
+  });
+
+  it("renders multiple type without error", () => {
+    render(
+      <Accordion type="multiple">
+        <AccordionItem value="x">
+          <AccordionTrigger>X</AccordionTrigger>
+          <AccordionContent>X content</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    expect(screen.getByText("X")).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Tabs                                                                 */
+/* ------------------------------------------------------------------ */
+
+describe("Tabs", () => {
+  function TestTabs() {
+    return (
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Panel 1</TabsContent>
+        <TabsContent value="tab2">Panel 2</TabsContent>
+      </Tabs>
+    );
+  }
+
+  it("renders tab triggers", () => {
+    render(<TestTabs />);
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toBeInTheDocument();
+  });
+
+  it("shows the default tab panel", () => {
+    render(<TestTabs />);
+    expect(screen.getByText("Panel 1")).toBeInTheDocument();
+  });
+
+  it("switches to second tab on click", async () => {
+    const user = userEvent.setup();
+    render(<TestTabs />);
+    await user.click(screen.getByRole("tab", { name: "Tab 2" }));
+    expect(screen.getByText("Panel 2")).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Collapsible                                                          */
+/* ------------------------------------------------------------------ */
+
+describe("Collapsible", () => {
+  it("renders trigger and content", () => {
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Hidden content</CollapsibleContent>
+      </Collapsible>,
+    );
+    expect(screen.getByText("Toggle")).toBeInTheDocument();
+  });
+
+  it("renders as open by default when defaultOpen is set", () => {
+    render(
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger>Show</CollapsibleTrigger>
+        <CollapsibleContent>Visible</CollapsibleContent>
+      </Collapsible>,
+    );
+    expect(screen.getByText("Visible")).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Toggle                                                               */
+/* ------------------------------------------------------------------ */
+
+describe("Toggle", () => {
+  it("renders as a button", () => {
+    render(<Toggle>Bold</Toggle>);
+    expect(screen.getByRole("button", { name: "Bold" })).toBeInTheDocument();
+  });
+
+  it("renders all variants without error", () => {
+    const variants = ["default", "outline", "brand"] as const;
+    for (const variant of variants) {
+      const { unmount } = render(<Toggle variant={variant}>V</Toggle>);
+      expect(screen.getByRole("button")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("renders all sizes without error", () => {
+    const sizes = ["sm", "default", "lg", "icon", "icon-sm", "icon-lg"] as const;
+    for (const size of sizes) {
+      const { unmount } = render(<Toggle size={size}>S</Toggle>);
+      expect(screen.getByRole("button")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("toggles pressed state on click", async () => {
+    const user = userEvent.setup();
+    render(<Toggle>B</Toggle>);
+    const btn = screen.getByRole("button");
+    expect(btn).toHaveAttribute("data-state", "off");
+    await user.click(btn);
+    expect(btn).toHaveAttribute("data-state", "on");
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* ToggleGroup                                                          */
+/* ------------------------------------------------------------------ */
+
+describe("ToggleGroup", () => {
+  // Radix ToggleGroup type="single" uses role="radio" per the ARIA toggle button pattern.
+  // type="multiple" uses role="button".
+
+  it("renders items (type=single → role=radio)", () => {
+    render(
+      <ToggleGroup type="single">
+        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+      </ToggleGroup>,
+    );
+    expect(screen.getByText("Bold")).toBeInTheDocument();
+    expect(screen.getByText("Italic")).toBeInTheDocument();
+  });
+
+  it("activates item on click (type=single)", async () => {
+    const user = userEvent.setup();
+    render(
+      <ToggleGroup type="single">
+        <ToggleGroupItem value="a">Format A</ToggleGroupItem>
+      </ToggleGroup>,
+    );
+    const item = screen.getByRole("radio", { name: "Format A" });
+    await user.click(item);
+    expect(item).toHaveAttribute("data-state", "on");
+  });
+
+  it("supports multiple selection (type=multiple → role=button)", () => {
+    render(
+      <ToggleGroup type="multiple">
+        <ToggleGroupItem value="x">X</ToggleGroupItem>
+        <ToggleGroupItem value="y">Y</ToggleGroupItem>
+      </ToggleGroup>,
+    );
+    expect(screen.getAllByRole("button")).toHaveLength(2);
+  });
+});