@hilum/ui 0.1.1

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

@@ -0,0 +1,248 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Button } from "../button";
+import { Badge } from "../badge";
+import { Input } from "../input";
+import { Textarea } from "../textarea";
+import { Label } from "../label";
+import { Spinner } from "../spinner";
+import { Skeleton } from "../skeleton";
+import { Separator } from "../separator";
+import { Kbd } from "../kbd";
+
+/* ------------------------------------------------------------------ */
+/* Button                                                               */
+/* ------------------------------------------------------------------ */
+
+describe("Button", () => {
+  it("renders as a button element by default", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
+  });
+
+  it("forwards data-slot attribute", () => {
+    render(<Button>Test</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("data-slot", "button");
+  });
+
+  it("renders all variants without error", () => {
+    const variants = [
+      "default",
+      "destructive",
+      "outline",
+      "secondary",
+      "brand",
+      "ghost",
+      "link",
+    ] as const;
+    for (const variant of variants) {
+      const { unmount } = render(<Button variant={variant}>Btn</Button>);
+      expect(screen.getByRole("button")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("renders all sizes without error", () => {
+    const sizes = ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"] as const;
+    for (const size of sizes) {
+      const { unmount } = render(<Button size={size}>B</Button>);
+      expect(screen.getByRole("button")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("renders as child element when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="/home">Home</a>
+      </Button>,
+    );
+    expect(screen.getByRole("link", { name: "Home" })).toBeInTheDocument();
+  });
+
+  it("is disabled when disabled prop is set", () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Badge                                                                */
+/* ------------------------------------------------------------------ */
+
+describe("Badge", () => {
+  it("renders children", () => {
+    render(<Badge>Active</Badge>);
+    expect(screen.getByText("Active")).toBeInTheDocument();
+  });
+
+  it("renders all variants without error", () => {
+    const variants = [
+      "default",
+      "secondary",
+      "outline",
+      "brand",
+      "success",
+      "warning",
+      "destructive",
+    ] as const;
+    for (const variant of variants) {
+      const { unmount } = render(<Badge variant={variant}>v</Badge>);
+      expect(screen.getByText("v")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("forwards className", () => {
+    const { container } = render(<Badge className="custom-class">Badge</Badge>);
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Input                                                                */
+/* ------------------------------------------------------------------ */
+
+describe("Input", () => {
+  it("renders an input element", () => {
+    render(<Input />);
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("carries data-slot attribute", () => {
+    render(<Input />);
+    expect(screen.getByRole("textbox")).toHaveAttribute("data-slot", "input");
+  });
+
+  it("accepts a placeholder", () => {
+    render(<Input placeholder="Type here" />);
+    expect(screen.getByPlaceholderText("Type here")).toBeInTheDocument();
+  });
+
+  it("is disabled when disabled prop is set", () => {
+    render(<Input disabled />);
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Textarea                                                             */
+/* ------------------------------------------------------------------ */
+
+describe("Textarea", () => {
+  it("renders a textarea", () => {
+    render(<Textarea />);
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("carries data-slot attribute", () => {
+    render(<Textarea />);
+    expect(screen.getByRole("textbox")).toHaveAttribute("data-slot", "textarea");
+  });
+
+  it("accepts placeholder", () => {
+    render(<Textarea placeholder="Write here" />);
+    expect(screen.getByPlaceholderText("Write here")).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Label                                                                */
+/* ------------------------------------------------------------------ */
+
+describe("Label", () => {
+  it("renders label text", () => {
+    render(<Label>Username</Label>);
+    expect(screen.getByText("Username")).toBeInTheDocument();
+  });
+
+  it("associates with an input via htmlFor", () => {
+    render(
+      <>
+        <Label htmlFor="input-id">Name</Label>
+        <input id="input-id" />
+      </>,
+    );
+    expect(screen.getByLabelText("Name")).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Spinner                                                              */
+/* ------------------------------------------------------------------ */
+
+describe("Spinner", () => {
+  it('renders with role="status"', () => {
+    render(<Spinner />);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("has accessible label", () => {
+    render(<Spinner />);
+    expect(screen.getByRole("status")).toHaveAttribute("aria-label", "Loading");
+  });
+
+  it("renders all sizes without error", () => {
+    const sizes = ["xs", "sm", "default", "lg", "xl"] as const;
+    for (const size of sizes) {
+      const { unmount } = render(<Spinner size={size} />);
+      expect(screen.getByRole("status")).toBeInTheDocument();
+      unmount();
+    }
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Skeleton                                                             */
+/* ------------------------------------------------------------------ */
+
+describe("Skeleton", () => {
+  it("renders a div with data-slot", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toHaveAttribute("data-slot", "skeleton");
+  });
+
+  it("forwards className", () => {
+    const { container } = render(<Skeleton className="w-24 h-4" />);
+    expect(container.firstChild).toHaveClass("w-24", "h-4");
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Separator                                                            */
+/* ------------------------------------------------------------------ */
+
+describe("Separator", () => {
+  it("renders a separator with role", () => {
+    render(<Separator />);
+    expect(screen.getByRole("none")).toBeInTheDocument();
+  });
+
+  it("renders horizontal orientation without error", () => {
+    const { unmount } = render(<Separator orientation="horizontal" />);
+    expect(screen.getByRole("none")).toBeInTheDocument();
+    unmount();
+  });
+
+  it("renders vertical orientation without error", () => {
+    const { unmount } = render(<Separator orientation="vertical" />);
+    expect(screen.getByRole("none")).toBeInTheDocument();
+    unmount();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Kbd                                                                  */
+/* ------------------------------------------------------------------ */
+
+describe("Kbd", () => {
+  it("renders keyboard shortcut text", () => {
+    render(<Kbd>⌘K</Kbd>);
+    expect(screen.getByText("⌘K")).toBeInTheDocument();
+  });
+
+  it("renders as kbd element", () => {
+    const { container } = render(<Kbd>Esc</Kbd>);
+    expect(container.querySelector("kbd")).toBeInTheDocument();
+  });
+});

package/src/components/accordion.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import { Accordion } from "radix-ui";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const AccordionRoot = React.forwardRef<
+  React.ComponentRef<typeof Accordion.Root>,
+  React.ComponentPropsWithoutRef<typeof Accordion.Root>
+>(({ className, ...props }, ref) => (
+  <Accordion.Root ref={ref} className={cn("divide-y divide-taupe-100", className)} {...props} />
+));
+AccordionRoot.displayName = "Accordion";
+
+const AccordionItem = React.forwardRef<
+  React.ComponentRef<typeof Accordion.Item>,
+  React.ComponentPropsWithoutRef<typeof Accordion.Item>
+>(({ className, ...props }, ref) => (
+  <Accordion.Item ref={ref} className={cn("", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof Accordion.Trigger>,
+  React.ComponentPropsWithoutRef<typeof Accordion.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <Accordion.Header className="flex">
+    <Accordion.Trigger
+      ref={ref}
+      className={cn(
+        "flex w-full items-center justify-between py-4",
+        "body font-medium text-taupe-900 transition-colors hover:text-taupe-700",
+        "[&[data-state=open]>svg]:rotate-180",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown
+        size={16}
+        className="text-taupe-400 transition-transform duration-200 shrink-0"
+      />
+    </Accordion.Trigger>
+  </Accordion.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+const AccordionContent = React.forwardRef<
+  React.ComponentRef<typeof Accordion.Content>,
+  React.ComponentPropsWithoutRef<typeof Accordion.Content>
+>(({ className, children, ...props }, ref) => (
+  <Accordion.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden body text-taupe-500",
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className,
+    )}
+    {...props}
+  >
+    <div className="pb-4">{children}</div>
+  </Accordion.Content>
+));
+AccordionContent.displayName = "AccordionContent";
+
+export { AccordionRoot as Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/action-panel.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+interface ActionPanelAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: "default" | "destructive" | "outline" | "ghost";
+}
+
+interface ActionPanelLink {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+interface ActionPanelProps {
+  title: string;
+  description?: string;
+  action?: ActionPanelAction;
+  actions?: ActionPanelAction[];
+  link?: ActionPanelLink;
+  variant?: "default" | "muted";
+  layout?: "stacked" | "inline";
+  children?: React.ReactNode;
+  className?: string;
+}
+
+function ActionPanel({
+  title,
+  description,
+  action,
+  actions,
+  link,
+  variant = "default",
+  layout = "stacked",
+  children,
+  className,
+}: ActionPanelProps) {
+  const allActions = actions ?? (action ? [action] : []);
+
+  const renderActions = () => {
+    if (allActions.length === 0 && !link) return null;
+    return (
+      <div className="flex items-center gap-2">
+        {link &&
+          (link.href ? (
+            <a
+              href={link.href}
+              className="body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1"
+            >
+              {link.label} <span aria-hidden>→</span>
+            </a>
+          ) : (
+            <button
+              type="button"
+              onClick={link.onClick}
+              className="body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1"
+            >
+              {link.label} <span aria-hidden>→</span>
+            </button>
+          ))}
+        {allActions.map((a, i) =>
+          a.href ? (
+            <Button key={i} size="sm" variant={a.variant ?? "default"} asChild>
+              <a href={a.href}>{a.label}</a>
+            </Button>
+          ) : (
+            <Button key={i} size="sm" variant={a.variant ?? "default"} onClick={a.onClick}>
+              {a.label}
+            </Button>
+          ),
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-xl border px-5 py-5",
+        variant === "muted"
+          ? "border-taupe-100 bg-taupe-50"
+          : "border-taupe-100 bg-white shadow-natural",
+        layout === "inline" && "flex items-center justify-between gap-6",
+        className,
+      )}
+    >
+      <div className={cn("min-w-0", layout === "inline" ? "flex-1" : "")}>
+        <p className="body font-semibold text-taupe-900">{title}</p>
+        {description && (
+          <p className={cn("body text-taupe-400", layout === "stacked" ? "mt-1" : "")}>
+            {description}
+          </p>
+        )}
+        {children && layout === "stacked" && <div className="mt-4">{children}</div>}
+      </div>
+
+      {layout === "stacked" ? (
+        (allActions.length > 0 || link) && <div className="mt-4">{renderActions()}</div>
+      ) : (
+        <div className="shrink-0 flex items-center gap-3">
+          {children}
+          {renderActions()}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { ActionPanel };

package/src/components/activity-feed.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface FeedEvent {
+  id?: string | number;
+  content: React.ReactNode;
+  date?: string;
+  datetime?: string;
+  icon?: React.ReactNode;
+  iconBgClass?: string;
+}
+
+interface ActivityFeedProps {
+  events: FeedEvent[];
+  className?: string;
+}
+
+function ActivityFeed({ events, className }: ActivityFeedProps) {
+  return (
+    <div className={cn("flow-root", className)}>
+      <ul role="list" className="-mb-8">
+        {events.map((event, i) => {
+          const isLast = i === events.length - 1;
+          return (
+            <li key={event.id ?? i}>
+              <div className="relative pb-8">
+                {!isLast && (
+                  <span
+                    className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-taupe-100"
+                    aria-hidden="true"
+                  />
+                )}
+                <div className="relative flex gap-3">
+                  {/* Icon */}
+                  <div>
+                    <span
+                      className={cn(
+                        "flex size-8 items-center justify-center rounded-full ring-8 ring-white",
+                        event.iconBgClass ?? "bg-taupe-100 text-taupe-500",
+                      )}
+                    >
+                      {event.icon}
+                    </span>
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex min-w-0 flex-1 items-baseline justify-between gap-4 pt-1">
+                    <div className="body text-taupe-600">{event.content}</div>
+                    {event.date && (
+                      <time
+                        dateTime={event.datetime ?? event.date}
+                        className="caption whitespace-nowrap text-taupe-400"
+                      >
+                        {event.date}
+                      </time>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export { ActivityFeed };
+export type { FeedEvent };

package/src/components/alert-dialog.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const AlertDialogRoot = AlertDialog.Root;
+const AlertDialogTrigger = AlertDialog.Trigger;
+const AlertDialogPortal = AlertDialog.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialog.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialog.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialog.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialog.Content>
+>(({ className, children, ...props }, ref) => (
+  <AlertDialog.Portal>
+    <AlertDialogOverlay />
+    <AlertDialog.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+        "w-full max-w-md bg-white rounded-2xl shadow-elevated p-6",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </AlertDialog.Content>
+  </AlertDialog.Portal>
+));
+AlertDialogContent.displayName = "AlertDialogContent";
+
+function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 mb-5", className)} {...props} />;
+}
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center justify-end gap-2 mt-6", className)} {...props} />;
+}
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialog.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialog.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialog.Title
+    ref={ref}
+    className={cn("body-lg font-semibold text-taupe-900", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = "AlertDialogTitle";
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialog.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialog.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialog.Description ref={ref} className={cn("body text-taupe-500", className)} {...props} />
+));
+AlertDialogDescription.displayName = "AlertDialogDescription";
+
+const AlertDialogAction = React.forwardRef<
+  React.ComponentRef<typeof AlertDialog.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialog.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialog.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-all duration-150",
+      "bg-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
+      "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = "AlertDialogAction";
+
+const AlertDialogCancel = React.forwardRef<
+  React.ComponentRef<typeof AlertDialog.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialog.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialog.Cancel
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-all duration-150",
+      "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
+      "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = "AlertDialogCancel";
+
+export {
+  AlertDialogRoot as AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/alert.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-xl px-4 py-3.5 body [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3.5 [&>svg~*]:pl-6",
+  {
+    variants: {
+      variant: {
+        default: "bg-taupe-50 text-taupe-800 [&>svg]:text-taupe-500",
+        info: "bg-brand-secondary/40 text-taupe-700 [&>svg]:text-taupe-500",
+        success: "bg-brand-secondary/15 text-taupe-800 [&>svg]:text-taupe-600",
+        warning: "bg-brand-secondary/70 text-taupe-800 [&>svg]:text-taupe-600",
+        destructive: "bg-red-50 text-red-800 [&>svg]:text-red-500",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+interface AlertProps extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+  ),
+);
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.ComponentProps<"p">>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("mb-0.5 body font-semibold leading-tight", className)} {...props} />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<"p">>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("body opacity-90", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import * as React from "react";
+import { AspectRatio } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const AspectRatioRoot = React.forwardRef<
+  React.ComponentRef<typeof AspectRatio.Root>,
+  React.ComponentPropsWithoutRef<typeof AspectRatio.Root>
+>(({ className, ...props }, ref) => (
+  <AspectRatio.Root
+    ref={ref}
+    className={cn("relative w-full overflow-hidden", className)}
+    {...props}
+  />
+));
+AspectRatioRoot.displayName = "AspectRatio";
+
+export { AspectRatioRoot as AspectRatio };