@hilum/ui 0.1.1 → 0.1.3

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

@@ -1,198 +0,0 @@
-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);
-  });
-});

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

@@ -1,262 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  CardMedia,
-} from "../card";
-import { Avatar, AvatarFallback, AvatarImage, AvatarWithStatus } from "../avatar";
-import { AvatarStack } from "../avatar-stack";
-import { StatCard } from "../stat-card";
-import { Notification } from "../notification";
-import { MediaObject } from "../media-object";
-
-/* ------------------------------------------------------------------ */
-/* Card                                                                 */
-/* ------------------------------------------------------------------ */
-
-describe("Card", () => {
-  it("renders children", () => {
-    render(<Card>Content</Card>);
-    expect(screen.getByText("Content")).toBeInTheDocument();
-  });
-
-  it("carries data-slot attribute", () => {
-    const { container } = render(<Card>Content</Card>);
-    expect(container.firstChild).toHaveAttribute("data-slot", "card");
-  });
-
-  it("renders all variants without error", () => {
-    const variants = ["default", "muted", "ghost"] as const;
-    for (const variant of variants) {
-      const { unmount } = render(<Card variant={variant}>Card</Card>);
-      expect(screen.getByText("Card")).toBeInTheDocument();
-      unmount();
-    }
-  });
-
-  it("composes sub-components correctly", () => {
-    render(
-      <Card>
-        <CardHeader>
-          <CardTitle>Title</CardTitle>
-          <CardDescription>Description</CardDescription>
-        </CardHeader>
-        <CardContent>Body</CardContent>
-        <CardFooter>Footer</CardFooter>
-      </Card>,
-    );
-    expect(screen.getByText("Title")).toBeInTheDocument();
-    expect(screen.getByText("Description")).toBeInTheDocument();
-    expect(screen.getByText("Body")).toBeInTheDocument();
-    expect(screen.getByText("Footer")).toBeInTheDocument();
-  });
-
-  it("renders CardMedia", () => {
-    const { container } = render(<CardMedia data-testid="media" />);
-    expect(container.querySelector('[data-slot="card-media"]')).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Avatar                                                               */
-/* ------------------------------------------------------------------ */
-
-describe("Avatar", () => {
-  it("renders with fallback text", () => {
-    render(
-      <Avatar>
-        <AvatarFallback>JD</AvatarFallback>
-      </Avatar>,
-    );
-    expect(screen.getByText("JD")).toBeInTheDocument();
-  });
-
-  it("renders all sizes without error", () => {
-    const sizes = ["xs", "sm", "md", "lg", "xl"] as const;
-    for (const size of sizes) {
-      const { unmount } = render(
-        <Avatar size={size}>
-          <AvatarFallback>X</AvatarFallback>
-        </Avatar>,
-      );
-      expect(screen.getByText("X")).toBeInTheDocument();
-      unmount();
-    }
-  });
-
-  it("renders AvatarImage with alt text", () => {
-    render(
-      <Avatar>
-        <AvatarImage src="https://example.com/avatar.jpg" alt="User avatar" />
-        <AvatarFallback>JD</AvatarFallback>
-      </Avatar>,
-    );
-    // AvatarFallback shows when image fails — just check it's in the DOM
-    expect(screen.getByText("JD")).toBeInTheDocument();
-  });
-});
-
-describe("AvatarWithStatus", () => {
-  it("renders children", () => {
-    render(
-      <AvatarWithStatus>
-        <AvatarFallback>AB</AvatarFallback>
-      </AvatarWithStatus>,
-    );
-    expect(screen.getByText("AB")).toBeInTheDocument();
-  });
-
-  it("renders status indicator when status is provided", () => {
-    const statuses = ["online", "offline", "busy", "away"] as const;
-    for (const status of statuses) {
-      const { unmount } = render(
-        <AvatarWithStatus status={status}>
-          <AvatarFallback>X</AvatarFallback>
-        </AvatarWithStatus>,
-      );
-      expect(screen.getByText("X")).toBeInTheDocument();
-      unmount();
-    }
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* AvatarStack                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("AvatarStack", () => {
-  const avatars = [{ name: "Alice" }, { name: "Bob" }, { name: "Carol" }];
-
-  it("renders all avatars by default", () => {
-    render(<AvatarStack avatars={avatars} />);
-    expect(screen.getByTitle("Alice")).toBeInTheDocument();
-    expect(screen.getByTitle("Bob")).toBeInTheDocument();
-    expect(screen.getByTitle("Carol")).toBeInTheDocument();
-  });
-
-  it("shows overflow count when max is set", () => {
-    render(<AvatarStack avatars={avatars} max={2} />);
-    expect(screen.getByText("+1")).toBeInTheDocument();
-  });
-
-  it("renders all sizes without error", () => {
-    const sizes = ["sm", "md", "lg"] as const;
-    for (const size of sizes) {
-      const { unmount } = render(<AvatarStack avatars={[{ name: "A" }]} size={size} />);
-      expect(screen.getByTitle("A")).toBeInTheDocument();
-      unmount();
-    }
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* StatCard                                                             */
-/* ------------------------------------------------------------------ */
-
-describe("StatCard", () => {
-  it("renders label and value", () => {
-    render(<StatCard label="Total Users" value="1,234" />);
-    expect(screen.getByText("Total Users")).toBeInTheDocument();
-    expect(screen.getByText("1,234")).toBeInTheDocument();
-  });
-
-  it("renders trend when provided", () => {
-    render(<StatCard label="Revenue" value="$10k" trend={{ value: "+12%", direction: "up" }} />);
-    expect(screen.getByText("+12%")).toBeInTheDocument();
-  });
-
-  it("renders all trend directions without error", () => {
-    const directions = ["up", "down", "neutral"] as const;
-    for (const direction of directions) {
-      const { unmount } = render(
-        <StatCard label="L" value="V" trend={{ value: "5%", direction }} />,
-      );
-      expect(screen.getByText("5%")).toBeInTheDocument();
-      unmount();
-    }
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Notification                                                         */
-/* ------------------------------------------------------------------ */
-
-describe("Notification", () => {
-  it("renders title", () => {
-    render(<Notification title="File uploaded" />);
-    expect(screen.getByText("File uploaded")).toBeInTheDocument();
-  });
-
-  it("renders description when provided", () => {
-    render(<Notification title="Done" description="Your export is ready." />);
-    expect(screen.getByText("Your export is ready.")).toBeInTheDocument();
-  });
-
-  it("renders close button when onClose is provided", () => {
-    render(<Notification title="Alert" onClose={() => {}} />);
-    expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument();
-  });
-
-  it("renders actions when provided", () => {
-    render(
-      <Notification
-        title="Update available"
-        actions={[{ label: "Install" }, { label: "Dismiss", variant: "ghost" }]}
-      />,
-    );
-    expect(screen.getByText("Install")).toBeInTheDocument();
-    expect(screen.getByText("Dismiss")).toBeInTheDocument();
-  });
-
-  it("renders all variants without error", () => {
-    const variants = ["default", "success", "error", "warning", "info"] as const;
-    for (const variant of variants) {
-      const { unmount } = render(<Notification title="T" variant={variant} />);
-      expect(screen.getByText("T")).toBeInTheDocument();
-      unmount();
-    }
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* MediaObject                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("MediaObject", () => {
-  it("renders media and content", () => {
-    render(
-      <MediaObject media={<img alt="thumb" src="" />}>
-        <p>Content text</p>
-      </MediaObject>,
-    );
-    expect(screen.getByAltText("thumb")).toBeInTheDocument();
-    expect(screen.getByText("Content text")).toBeInTheDocument();
-  });
-
-  it('renders mediaPosition="right" without error', () => {
-    render(
-      <MediaObject media={<span>icon</span>} mediaPosition="right">
-        Content
-      </MediaObject>,
-    );
-    expect(screen.getByText("Content")).toBeInTheDocument();
-  });
-
-  it("renders all gap options without error", () => {
-    const gaps = ["sm", "md", "lg"] as const;
-    for (const gap of gaps) {
-      const { unmount } = render(
-        <MediaObject media={<span />} gap={gap}>
-          Body
-        </MediaObject>,
-      );
-      expect(screen.getByText("Body")).toBeInTheDocument();
-      unmount();
-    }
-  });
-});

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

@@ -1,138 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { Alert, AlertTitle, AlertDescription } from "../alert";
-import { Progress } from "../progress";
-import { Steps } from "../steps";
-import { EmptyState } from "../empty-state";
-import type { Step } from "../steps";
-
-/* ------------------------------------------------------------------ */
-/* Alert                                                                */
-/* ------------------------------------------------------------------ */
-
-describe("Alert", () => {
-  it('renders with role="alert"', () => {
-    render(<Alert>Message</Alert>);
-    expect(screen.getByRole("alert")).toBeInTheDocument();
-  });
-
-  it("renders sub-components together", () => {
-    render(
-      <Alert>
-        <AlertTitle>Warning</AlertTitle>
-        <AlertDescription>Something went wrong.</AlertDescription>
-      </Alert>,
-    );
-    expect(screen.getByText("Warning")).toBeInTheDocument();
-    expect(screen.getByText("Something went wrong.")).toBeInTheDocument();
-  });
-
-  it("renders all variants without error", () => {
-    const variants = ["default", "info", "success", "warning", "destructive"] as const;
-    for (const variant of variants) {
-      const { unmount } = render(<Alert variant={variant}>Alert</Alert>);
-      expect(screen.getByRole("alert")).toBeInTheDocument();
-      unmount();
-    }
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Progress                                                             */
-/* ------------------------------------------------------------------ */
-
-describe("Progress", () => {
-  it("renders with a progressbar role", () => {
-    render(<Progress value={50} />);
-    expect(screen.getByRole("progressbar")).toBeInTheDocument();
-  });
-
-  it("reflects the correct value", () => {
-    render(<Progress value={75} />);
-    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "75");
-  });
-
-  it("renders at 0%", () => {
-    render(<Progress value={0} />);
-    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "0");
-  });
-
-  it("renders at 100%", () => {
-    render(<Progress value={100} />);
-    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "100");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Steps                                                                */
-/* ------------------------------------------------------------------ */
-
-const STEPS: Step[] = [
-  { name: "Cart", status: "complete" },
-  { name: "Shipping", status: "current" },
-  { name: "Payment", status: "upcoming" },
-];
-
-describe("Steps", () => {
-  it("renders all step names in circles variant (default)", () => {
-    render(<Steps steps={STEPS} />);
-    expect(screen.getByText("Cart")).toBeInTheDocument();
-    expect(screen.getByText("Shipping")).toBeInTheDocument();
-    expect(screen.getByText("Payment")).toBeInTheDocument();
-  });
-
-  it("renders bullets variant without error", () => {
-    render(<Steps steps={STEPS} variant="bullets" />);
-    expect(screen.getByRole("navigation", { name: /progress/i })).toBeInTheDocument();
-  });
-
-  it("renders progress variant without error", () => {
-    render(<Steps steps={STEPS} variant="progress" />);
-    expect(screen.getByText("Cart")).toBeInTheDocument();
-  });
-
-  it("bullets variant shows step count", () => {
-    render(<Steps steps={STEPS} variant="bullets" />);
-    expect(screen.getByText(/Step 2 of 3/i)).toBeInTheDocument();
-  });
-
-  it("renders with descriptions in circles variant", () => {
-    const stepsWithDesc: Step[] = [
-      { name: "Step 1", description: "First step", status: "complete" },
-      { name: "Step 2", status: "current" },
-    ];
-    render(<Steps steps={stepsWithDesc} />);
-    expect(screen.getByText("First step")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* EmptyState                                                           */
-/* ------------------------------------------------------------------ */
-
-describe("EmptyState", () => {
-  it("renders the title", () => {
-    render(<EmptyState title="No results found" />);
-    expect(screen.getByText("No results found")).toBeInTheDocument();
-  });
-
-  it("renders description when provided", () => {
-    render(<EmptyState title="Empty" description="Try a different search." />);
-    expect(screen.getByText("Try a different search.")).toBeInTheDocument();
-  });
-
-  it("renders action button with label", () => {
-    render(<EmptyState title="Empty" action={{ label: "Add item" }} />);
-    expect(screen.getByRole("button", { name: "Add item" })).toBeInTheDocument();
-  });
-
-  it("renders action as anchor when href is provided", () => {
-    render(<EmptyState title="Empty" action={{ label: "Create", href: "/new" }} />);
-    expect(screen.getByRole("link", { name: "Create" })).toHaveAttribute("href", "/new");
-  });
-
-  it("renders icon when provided", () => {
-    render(<EmptyState title="Empty" icon={<span data-testid="icon">📭</span>} />);
-    expect(screen.getByTestId("icon")).toBeInTheDocument();
-  });
-});