@hilum/ui 0.1.1

package/src/components/spinner.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-2 border-current border-t-transparent",
+  {
+    variants: {
+      size: {
+        xs: "size-3",
+        sm: "size-4",
+        default: "size-5",
+        lg: "size-6",
+        xl: "size-8",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+interface SpinnerProps
+  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {}
+
+function Spinner({ className, size, ...props }: SpinnerProps) {
+  return (
+    <span
+      role="status"
+      aria-label="Loading"
+      className={cn(spinnerVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner, spinnerVariants };

package/src/components/stacked-list.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface StackedListProps {
+  children: React.ReactNode;
+  divided?: boolean;
+  bordered?: boolean;
+  className?: string;
+}
+
+function StackedList({ children, divided = true, bordered = true, className }: StackedListProps) {
+  return (
+    <ul
+      role="list"
+      className={cn(
+        "overflow-hidden rounded-xl bg-white",
+        bordered && "border border-taupe-100 shadow-natural",
+        divided && "divide-y divide-taupe-100",
+        className,
+      )}
+    >
+      {children}
+    </ul>
+  );
+}
+
+interface StackedListItemProps {
+  children: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+function StackedListItem({ children, href, onClick, className }: StackedListItemProps) {
+  const inner = <div className={cn("px-4 py-3.5", className)}>{children}</div>;
+
+  if (href) {
+    return (
+      <li>
+        <a href={href} className="block hover:bg-taupe-50 transition-colors">
+          {inner}
+        </a>
+      </li>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <li>
+        <button
+          type="button"
+          className="w-full text-left hover:bg-taupe-50 transition-colors"
+          onClick={onClick}
+        >
+          {inner}
+        </button>
+      </li>
+    );
+  }
+
+  return <li>{inner}</li>;
+}
+
+export { StackedList, StackedListItem };

package/src/components/stat-card.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  trend?: {
+    value: string;
+    direction: "up" | "down" | "neutral";
+  };
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+function StatCard({ label, value, trend, icon, className }: StatCardProps) {
+  const trendColor = {
+    up: "text-taupe-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
+    down: "text-red-600",
+    neutral: "text-taupe-400",
+  };
+
+  const TrendIcon = {
+    up: TrendingUp,
+    down: TrendingDown,
+    neutral: Minus,
+  };
+
+  return (
+    <div className={cn("rounded-xl border border-taupe-100 bg-white p-5", className)}>
+      <div className="flex items-start justify-between gap-3">
+        <p className="label text-taupe-400">{label}</p>
+        {icon && (
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-taupe-50 text-taupe-400">
+            {icon}
+          </div>
+        )}
+      </div>
+      <p className="heading-xl mt-2 text-taupe-900">{value}</p>
+      {trend &&
+        (() => {
+          const Icon = TrendIcon[trend.direction];
+          return (
+            <div className={cn("mt-2 flex items-center gap-1", trendColor[trend.direction])}>
+              <Icon size={12} />
+              <span className="caption font-medium">{trend.value}</span>
+            </div>
+          );
+        })()}
+    </div>
+  );
+}
+
+export { StatCard };

package/src/components/steps.tsx

@@ -0,0 +1,179 @@
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export type StepStatus = "complete" | "current" | "upcoming";
+
+export interface Step {
+  id?: string | number;
+  name: string;
+  description?: string;
+  status: StepStatus;
+  href?: string;
+}
+
+interface StepsProps {
+  steps: Step[];
+  variant?: "circles" | "bullets" | "progress";
+  className?: string;
+}
+
+/* ---------- Circles variant ---------- */
+function CirclesSteps({ steps, className }: { steps: Step[]; className?: string }) {
+  return (
+    <nav aria-label="Progress" className={className}>
+      <ol role="list" className="flex items-center">
+        {steps.map((step, i) => {
+          const isLast = i === steps.length - 1;
+          return (
+            <li key={step.id ?? i} className={cn("relative", !isLast && "flex-1")}>
+              {/* Connector line */}
+              {!isLast && (
+                <div className="absolute top-4 left-8 -right-px h-0.5" aria-hidden="true">
+                  <div
+                    className={cn(
+                      "h-full",
+                      step.status === "complete" ? "bg-brand-primary" : "bg-taupe-200",
+                    )}
+                  />
+                </div>
+              )}
+
+              <a
+                href={step.href ?? "#"}
+                onClick={!step.href ? (e) => e.preventDefault() : undefined}
+                className="group relative flex flex-col items-center gap-2"
+              >
+                {/* Circle */}
+                <span
+                  className={cn(
+                    "relative z-10 flex size-8 items-center justify-center rounded-full transition-colors",
+                    step.status === "complete" &&
+                      "bg-brand-primary group-hover:bg-brand-primary/80",
+                    step.status === "current" && "border-2 border-brand-primary bg-white",
+                    step.status === "upcoming" &&
+                      "border-2 border-taupe-300 bg-white group-hover:border-taupe-400",
+                  )}
+                >
+                  {step.status === "complete" ? (
+                    <Check size={14} className="text-white" strokeWidth={2.5} />
+                  ) : step.status === "current" ? (
+                    <span className="size-2.5 rounded-full bg-brand-primary" />
+                  ) : (
+                    <span className="size-2.5 rounded-full bg-transparent group-hover:bg-taupe-300" />
+                  )}
+                </span>
+
+                {/* Labels */}
+                <span className="flex flex-col items-center">
+                  <span
+                    className={cn(
+                      "caption font-semibold",
+                      step.status === "upcoming" ? "text-taupe-400" : "text-taupe-900",
+                    )}
+                  >
+                    {step.name}
+                  </span>
+                  {step.description && (
+                    <span className="caption text-taupe-400">{step.description}</span>
+                  )}
+                </span>
+              </a>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+/* ---------- Bullets variant ---------- */
+function BulletsSteps({ steps, className }: { steps: Step[]; className?: string }) {
+  const currentIdx = steps.findIndex((s) => s.status === "current");
+
+  return (
+    <nav className={cn("flex items-center gap-4", className)} aria-label="Progress">
+      <p className="body font-medium text-taupe-700">
+        Step {currentIdx + 1} of {steps.length}
+      </p>
+      <ol role="list" className="flex items-center gap-2">
+        {steps.map((step, i) => (
+          <li key={step.id ?? i}>
+            <a
+              href={step.href ?? "#"}
+              onClick={!step.href ? (e) => e.preventDefault() : undefined}
+              className="block"
+            >
+              {step.status === "complete" ? (
+                <span
+                  className="block size-2.5 rounded-full bg-brand-primary hover:bg-brand-primary/80 transition-colors"
+                  title={step.name}
+                />
+              ) : step.status === "current" ? (
+                <span
+                  className="relative flex size-4 items-center justify-center"
+                  aria-current="step"
+                >
+                  <span className="absolute size-4 rounded-full bg-brand-primary/20" />
+                  <span className="relative size-2.5 rounded-full bg-brand-primary" />
+                  <span className="sr-only">{step.name}</span>
+                </span>
+              ) : (
+                <span
+                  className="block size-2.5 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors"
+                  title={step.name}
+                />
+              )}
+            </a>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+/* ---------- Progress bar variant ---------- */
+function ProgressSteps({ steps, className }: { steps: Step[]; className?: string }) {
+  const completeCount = steps.filter((s) => s.status === "complete").length;
+  const currentIdx = steps.findIndex((s) => s.status === "current");
+  const progress = ((completeCount + (currentIdx >= 0 ? 0.5 : 0)) / steps.length) * 100;
+
+  return (
+    <div className={cn("w-full", className)}>
+      {/* Bar */}
+      <div className="h-1.5 w-full overflow-hidden rounded-full bg-taupe-100">
+        <div
+          className="h-full rounded-full bg-brand-primary transition-all duration-500"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+      {/* Labels */}
+      <div className="mt-4 grid" style={{ gridTemplateColumns: `repeat(${steps.length}, 1fr)` }}>
+        {steps.map((step, i) => {
+          const isLast = i === steps.length - 1;
+          return (
+            <div
+              key={step.id ?? i}
+              className={cn(
+                "caption font-medium",
+                i === 0 ? "text-left" : isLast ? "text-right" : "text-center",
+                step.status === "upcoming" ? "text-taupe-400" : "text-taupe-900",
+              )}
+            >
+              {step.name}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Main component ---------- */
+function Steps({ steps, variant = "circles", className }: StepsProps) {
+  if (variant === "bullets") return <BulletsSteps steps={steps} className={className} />;
+  if (variant === "progress") return <ProgressSteps steps={steps} className={className} />;
+  return <CirclesSteps steps={steps} className={className} />;
+}
+
+export { Steps };

package/src/components/switch.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import { Switch } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const SwitchRoot = React.forwardRef<
+  React.ComponentRef<typeof Switch.Root>,
+  React.ComponentPropsWithoutRef<typeof Switch.Root>
+>(({ className, ...props }, ref) => (
+  <Switch.Root
+    ref={ref}
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full",
+      "border-2 border-transparent transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=unchecked]:bg-taupe-200 data-[state=checked]:bg-brand-primary",
+      className,
+    )}
+    {...props}
+  >
+    <Switch.Thumb
+      className={cn(
+        "pointer-events-none block size-4 rounded-full bg-white shadow-natural",
+        "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4",
+      )}
+    />
+  </Switch.Root>
+));
+SwitchRoot.displayName = "Switch";
+
+export { SwitchRoot as Switch };

package/src/components/table.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
+>(({ className, containerClassName, ...props }, ref) => (
+  <div
+    className={cn(
+      "w-full overflow-hidden rounded-xl border border-taupe-100 bg-white",
+      containerClassName,
+    )}
+  >
+    <table
+      ref={ref}
+      className={cn("min-w-full caption-bottom divide-y divide-taupe-200", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("bg-taupe-50", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("divide-y divide-taupe-100 bg-white", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("bg-taupe-50 font-medium", className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "transition-colors hover:bg-taupe-50/50 data-[state=selected]:bg-taupe-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "px-6 py-3 text-left align-middle label text-taupe-400",
+      "[&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "px-6 py-4 align-middle body text-taupe-500",
+      "[&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-4 caption text-taupe-400", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };

package/src/components/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import { Tabs } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const TabsRoot = React.forwardRef<
+  React.ComponentRef<typeof Tabs.Root>,
+  React.ComponentPropsWithoutRef<typeof Tabs.Root>
+>(({ className, ...props }, ref) => (
+  <Tabs.Root ref={ref} className={cn("w-full", className)} {...props} />
+));
+TabsRoot.displayName = "Tabs";
+
+const TabsList = React.forwardRef<
+  React.ComponentRef<typeof Tabs.List>,
+  React.ComponentPropsWithoutRef<typeof Tabs.List>
+>(({ className, ...props }, ref) => (
+  <Tabs.List
+    ref={ref}
+    className={cn("inline-flex items-center gap-1 border-b border-taupe-100 w-full", className)}
+    {...props}
+  />
+));
+TabsList.displayName = "TabsList";
+
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof Tabs.Trigger>,
+  React.ComponentPropsWithoutRef<typeof Tabs.Trigger>
+>(({ className, ...props }, ref) => (
+  <Tabs.Trigger
+    ref={ref}
+    className={cn(
+      "px-0 pb-2.5 body font-medium text-taupe-400",
+      "border-b-2 border-transparent -mb-px",
+      "transition-colors cursor-pointer",
+      "data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof Tabs.Content>,
+  React.ComponentPropsWithoutRef<typeof Tabs.Content>
+>(({ className, ...props }, ref) => (
+  <Tabs.Content ref={ref} className={cn("mt-4", className)} {...props} />
+));
+TabsContent.displayName = "TabsContent";
+
+export { TabsRoot as Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-taupe-200 bg-white px-3 py-2",
+        "body text-taupe-900 placeholder:text-taupe-400",
+        "resize-none transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15 focus-visible:border-taupe-400",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-taupe-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/toggle-group.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { ToggleGroup } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { toggleVariants } from "./toggle";
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroupRoot = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroup.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroup.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroup.Root
+    ref={ref}
+    className={cn("inline-flex items-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroup.Root>
+));
+ToggleGroupRoot.displayName = "ToggleGroup";
+
+const ToggleGroupItem = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroup.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroup.Item> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  return (
+    <ToggleGroup.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: variant ?? context.variant,
+          size: size ?? context.size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroupRoot as ToggleGroup, ToggleGroupItem };

package/src/components/toggle.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { Toggle } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const toggleVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2",
+    "body font-medium whitespace-nowrap rounded-md",
+    "transition-all duration-150 outline-none",
+    "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-transparent text-taupe-600",
+          "hover:bg-taupe-100 hover:text-taupe-900",
+          "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900",
+        ],
+        outline: [
+          "border border-taupe-200 bg-white text-taupe-600 shadow-natural",
+          "hover:bg-taupe-50 hover:text-taupe-900",
+          "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900 data-[state=on]:border-taupe-300",
+        ],
+        brand: [
+          "bg-transparent text-taupe-600",
+          "hover:bg-taupe-100 hover:text-taupe-900",
+          "data-[state=on]:bg-brand-primary data-[state=on]:text-white",
+        ],
+      },
+      size: {
+        sm: "h-8 gap-1.5 px-3",
+        default: "h-9 px-3",
+        lg: "h-10 px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+interface ToggleProps
+  extends React.ComponentPropsWithoutRef<typeof Toggle.Root>, VariantProps<typeof toggleVariants> {}
+
+const ToggleRoot = React.forwardRef<React.ComponentRef<typeof Toggle.Root>, ToggleProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <Toggle.Root
+      ref={ref}
+      className={cn(toggleVariants({ variant, size }), className)}
+      {...props}
+    />
+  ),
+);
+ToggleRoot.displayName = "Toggle";
+
+export { ToggleRoot as Toggle, toggleVariants };