@hilum/ui 0.1.1

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import * as React from "react";
+import { DropdownMenu } from "radix-ui";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const DropdownMenuRoot = DropdownMenu.Root;
+const DropdownMenuTrigger = DropdownMenu.Trigger;
+const DropdownMenuGroup = DropdownMenu.Group;
+const DropdownMenuPortal = DropdownMenu.Portal;
+const DropdownMenuSub = DropdownMenu.Sub;
+const DropdownMenuRadioGroup = DropdownMenu.RadioGroup;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+        "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",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenu.Portal>
+));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+const DropdownMenuItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.Item> & {
+    inset?: boolean;
+    destructive?: boolean;
+  }
+>(({ className, inset, destructive, ...props }, ref) => (
+  <DropdownMenu.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body outline-none transition-colors",
+      destructive
+        ? "text-red-600 focus:bg-red-50 focus:text-red-700"
+        : "text-taupe-700 focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenu.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenu.ItemIndicator>
+        <Check size={13} className="text-taupe-900" />
+      </DropdownMenu.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenu.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenu.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenu.ItemIndicator>
+        <Circle size={8} className="fill-taupe-900 text-taupe-900" />
+      </DropdownMenu.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenu.RadioItem>
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenu.Label
+    ref={ref}
+    className={cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenu.Separator
+    ref={ref}
+    className={cn("mx-1 my-1 h-px bg-taupe-100", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenu.SubTrigger
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight size={14} className="ml-auto text-taupe-400" />
+  </DropdownMenu.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenu.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenu.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "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",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("ml-auto caption text-taupe-400", className)} {...props} />;
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenuRoot as DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+};

package/src/components/empty-state.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  };
+  className?: string;
+}
+
+function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className)}>
+      {icon && (
+        <div className="flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-taupe-700">
+          {icon}
+        </div>
+      )}
+      <div className="flex flex-col gap-1.5">
+        <p className="body font-semibold text-taupe-900">{title}</p>
+        {description && <p className="body max-w-xs text-taupe-400">{description}</p>}
+      </div>
+      {action &&
+        (action.href ? (
+          <Button size="sm" asChild>
+            <a href={action.href}>{action.label}</a>
+          </Button>
+        ) : (
+          <Button size="sm" onClick={action.onClick}>
+            {action.label}
+          </Button>
+        ))}
+    </div>
+  );
+}
+
+export { EmptyState };

package/src/components/field.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Label } from "./label";
+
+interface FieldProps {
+  label: string;
+  htmlFor?: string;
+  hint?: string;
+  error?: string;
+  required?: boolean;
+  cornerHint?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Field({
+  label,
+  htmlFor,
+  hint,
+  error,
+  required,
+  cornerHint,
+  className,
+  children,
+}: FieldProps) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor={htmlFor}>
+          {label}
+          {required && <span className="ml-0.5 text-red-600">*</span>}
+        </Label>
+        {cornerHint && <span className="caption text-taupe-400">{cornerHint}</span>}
+      </div>
+      {children}
+      {error ? (
+        <p className="caption text-red-600">{error}</p>
+      ) : hint ? (
+        <p className="caption text-taupe-400">{hint}</p>
+      ) : null}
+    </div>
+  );
+}
+
+export { Field };

package/src/components/grid-list.tsx

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Generic grid container                                              */
+/* ------------------------------------------------------------------ */
+
+interface GridListProps {
+  children: React.ReactNode;
+  columns?: 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const colMap = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+
+const gapMap = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+};
+
+function GridList({ children, columns = 3, gap = "md", className }: GridListProps) {
+  return (
+    <ul role="list" className={cn("grid", colMap[columns], gapMap[gap], className)}>
+      {children}
+    </ul>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Simple card item                                                   */
+/* ------------------------------------------------------------------ */
+
+interface GridListCardProps {
+  title: string;
+  description?: string;
+  meta?: string;
+  href?: string;
+  accent?: React.ReactNode;
+  trailing?: React.ReactNode;
+  className?: string;
+}
+
+function GridListCard({
+  title,
+  description,
+  meta,
+  href,
+  accent,
+  trailing,
+  className,
+}: GridListCardProps) {
+  const inner = (
+    <div
+      className={cn(
+        "flex h-full flex-col gap-1 rounded-xl border border-taupe-100 bg-white p-4 shadow-natural transition-shadow",
+        href && "hover:shadow-elevated",
+        className,
+      )}
+    >
+      {accent && <div className="mb-2">{accent}</div>}
+      <p className="body font-semibold text-taupe-900">{title}</p>
+      {description && <p className="caption text-taupe-400">{description}</p>}
+      {(meta || trailing) && (
+        <div className="mt-auto flex items-center justify-between pt-3">
+          {meta && <span className="caption text-taupe-400">{meta}</span>}
+          {trailing && <span className="caption text-taupe-400">{trailing}</span>}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <li>
+      {href ? (
+        <a
+          href={href}
+          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 rounded-xl"
+        >
+          {inner}
+        </a>
+      ) : (
+        inner
+      )}
+    </li>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Horizontal accent card (colored left strip + title + meta)         */
+/* ------------------------------------------------------------------ */
+
+interface GridListAccentCardProps {
+  title: string;
+  meta?: string;
+  href?: string;
+  accentClass?: string;
+  initials?: string;
+  trailing?: React.ReactNode;
+  className?: string;
+}
+
+function GridListAccentCard({
+  title,
+  meta,
+  href,
+  accentClass = "bg-taupe-900",
+  initials,
+  trailing,
+  className,
+}: GridListAccentCardProps) {
+  const inner = (
+    <div
+      className={cn(
+        "flex overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-natural transition-shadow",
+        href && "hover:shadow-elevated",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "flex w-14 shrink-0 items-center justify-center body font-semibold text-white",
+          accentClass,
+        )}
+      >
+        {initials}
+      </div>
+      <div className="flex flex-1 items-center justify-between truncate border-l border-taupe-100 px-4 py-3">
+        <div className="min-w-0">
+          <p className="body font-semibold text-taupe-900 truncate">{title}</p>
+          {meta && <p className="caption text-taupe-400">{meta}</p>}
+        </div>
+        {trailing && <div className="shrink-0 pl-2">{trailing}</div>}
+      </div>
+    </div>
+  );
+
+  return (
+    <li>
+      {href ? (
+        <a
+          href={href}
+          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 rounded-xl"
+        >
+          {inner}
+        </a>
+      ) : (
+        inner
+      )}
+    </li>
+  );
+}
+
+export { GridList, GridListCard, GridListAccentCard };

package/src/components/hover-card.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+import { HoverCard } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const HoverCardRoot = HoverCard.Root;
+const HoverCardTrigger = HoverCard.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ComponentRef<typeof HoverCard.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCard.Content>
+>(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
+  <HoverCard.Portal>
+    <HoverCard.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-64 rounded-xl border border-taupe-100 bg-white p-4 shadow-elevated outline-none",
+        "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",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className,
+      )}
+      {...props}
+    />
+  </HoverCard.Portal>
+));
+HoverCardContent.displayName = "HoverCardContent";
+
+export { HoverCardRoot as HoverCard, HoverCardTrigger, HoverCardContent };

package/src/components/input-group.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { AlertCircle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface InputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  leadingAddon?: React.ReactNode;
+  trailingAddon?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+  trailingButton?: React.ReactNode;
+  error?: boolean;
+  pill?: boolean;
+  wrapperClassName?: string;
+}
+
+const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
+  (
+    {
+      leadingAddon,
+      trailingAddon,
+      leadingIcon,
+      trailingIcon,
+      trailingButton,
+      error,
+      pill,
+      className,
+      wrapperClassName,
+      ...props
+    },
+    ref,
+  ) => {
+    const radius = pill ? "rounded-full" : "rounded-lg";
+    const hasLeading = leadingAddon || leadingIcon;
+    const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
+
+    const baseInput = cn(
+      "flex h-9 w-full border bg-white body text-taupe-900 placeholder:text-taupe-400",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
+      error
+        ? "border-red-400 focus-visible:ring-red-200 focus-visible:border-red-500"
+        : "border-taupe-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+    );
+
+    if (!hasLeading && !hasTrailing) {
+      return <input ref={ref} className={cn(baseInput, radius, "px-3", className)} {...props} />;
+    }
+
+    return (
+      <div className={cn("flex", wrapperClassName)}>
+        {/* Leading addon (text) */}
+        {leadingAddon && (
+          <span
+            className={cn(
+              "inline-flex items-center border border-r-0 bg-taupe-50 px-3 body text-taupe-500 select-none",
+              error ? "border-red-400" : "border-taupe-200",
+              pill ? "rounded-l-full" : "rounded-l-lg",
+            )}
+          >
+            {leadingAddon}
+          </span>
+        )}
+
+        {/* Relative wrapper for icon-only inputs */}
+        <div className="relative flex-1">
+          {leadingIcon && (
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-taupe-400">
+              {leadingIcon}
+            </div>
+          )}
+
+          <input
+            ref={ref}
+            className={cn(
+              baseInput,
+              // Border radius
+              leadingAddon
+                ? trailingAddon || trailingButton
+                  ? "rounded-none px-3"
+                  : pill
+                    ? "rounded-none rounded-r-full px-3"
+                    : "rounded-none rounded-r-lg px-3"
+                : leadingIcon
+                  ? trailingAddon
+                    ? pill
+                      ? "rounded-l-full rounded-r-none pl-9 pr-3"
+                      : "rounded-l-lg rounded-r-none pl-9 pr-3"
+                    : trailingIcon || error
+                      ? cn(radius, "pl-9 pr-9")
+                      : cn(radius, "pl-9 pr-3")
+                  : trailingAddon
+                    ? pill
+                      ? "rounded-l-full rounded-r-none px-3"
+                      : "rounded-l-lg rounded-r-none px-3"
+                    : trailingIcon || error || trailingButton
+                      ? cn(radius, "pl-3 pr-9")
+                      : cn(radius, "px-3"),
+              className,
+            )}
+            {...props}
+          />
+
+          {(trailingIcon || error) && (
+            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+              {error ? (
+                <AlertCircle size={15} className="text-red-500" />
+              ) : (
+                <span className="text-taupe-400">{trailingIcon}</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Trailing addon (text) */}
+        {trailingAddon && (
+          <span
+            className={cn(
+              "inline-flex items-center border border-l-0 bg-taupe-50 px-3 body text-taupe-500 select-none",
+              error ? "border-red-400" : "border-taupe-200",
+              pill ? "rounded-r-full" : "rounded-r-lg",
+            )}
+          >
+            {trailingAddon}
+          </span>
+        )}
+
+        {/* Trailing button */}
+        {trailingButton && <div className="flex">{trailingButton}</div>}
+      </div>
+    );
+  },
+);
+InputGroup.displayName = "InputGroup";
+
+export { InputGroup };