@hilum/ui 0.1.1

package/src/components/avatar-stack.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface AvatarStackItem {
+  src?: string;
+  name: string;
+  fallback?: string;
+  colorClass?: string;
+}
+
+interface AvatarStackProps {
+  avatars: AvatarStackItem[];
+  max?: number;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const sizeMap = {
+  sm: { wrapper: "size-6 ring-[1.5px]", text: "caption-xs" },
+  md: { wrapper: "size-8 ring-2", text: "caption" },
+  lg: { wrapper: "size-10 ring-2", text: "body" },
+};
+
+function AvatarStack({ avatars, max, size = "md", className }: AvatarStackProps) {
+  const shown = max ? avatars.slice(0, max) : avatars;
+  const overflow = max && avatars.length > max ? avatars.length - max : 0;
+  const s = sizeMap[size];
+
+  return (
+    <div className={cn("flex -space-x-2", className)}>
+      {shown.map((avatar, i) => (
+        <span
+          key={i}
+          title={avatar.name}
+          className={cn(
+            "relative inline-flex shrink-0 overflow-hidden rounded-full ring-white",
+            s.wrapper,
+          )}
+        >
+          {avatar.src ? (
+            <img src={avatar.src} alt={avatar.name} className="size-full object-cover" />
+          ) : (
+            <span
+              className={cn(
+                "flex size-full items-center justify-center font-medium",
+                s.text,
+                avatar.colorClass ?? "bg-taupe-200 text-taupe-700",
+              )}
+            >
+              {avatar.fallback ?? avatar.name.slice(0, 2).toUpperCase()}
+            </span>
+          )}
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span
+          className={cn(
+            "relative inline-flex shrink-0 items-center justify-center rounded-full ring-white bg-taupe-100 font-medium text-taupe-600",
+            s.wrapper,
+            s.text,
+          )}
+        >
+          +{overflow}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export { AvatarStack };

package/src/components/avatar.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const sizeMap = {
+  xs: "size-5 caption-xs",
+  sm: "size-7 caption",
+  md: "size-8 body",
+  lg: "size-10 body-lg",
+  xl: "size-12 subheading",
+} as const;
+
+type AvatarSize = keyof typeof sizeMap;
+
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  size?: AvatarSize;
+}
+
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
+  ({ className, size = "md", ...props }, ref) => (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex shrink-0 overflow-hidden rounded-full",
+        sizeMap[size],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full object-cover", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-taupe-100 body font-semibold text-taupe-600",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = "AvatarFallback";
+
+const statusColorMap = {
+  online: "bg-brand-secondary",
+  offline: "bg-taupe-300",
+  busy: "bg-red-500",
+  away: "bg-brand-secondary",
+};
+
+const statusSizeMap = {
+  xs: "size-1.5 ring-1",
+  sm: "size-2 ring-1",
+  md: "size-2.5 ring-[1.5px]",
+  lg: "size-3 ring-2",
+  xl: "size-3.5 ring-2",
+};
+
+interface AvatarWithStatusProps extends AvatarProps {
+  status?: keyof typeof statusColorMap;
+}
+
+const AvatarWithStatus = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarWithStatusProps & { children?: React.ReactNode }
+>(({ status, size = "md", className, children, ...props }, ref) => (
+  <div className="relative inline-flex shrink-0">
+    <Avatar ref={ref} size={size} className={className} {...props}>
+      {children}
+    </Avatar>
+    {status && (
+      <span
+        className={cn(
+          "absolute bottom-0 right-0 rounded-full ring-white",
+          statusColorMap[status],
+          statusSizeMap[size],
+        )}
+      />
+    )}
+  </div>
+));
+AvatarWithStatus.displayName = "AvatarWithStatus";
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarWithStatus };

package/src/components/badge.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 caption font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-taupe-900 text-white",
+        secondary: "bg-taupe-100 text-taupe-700",
+        outline: "border border-taupe-200 text-taupe-600 bg-transparent",
+        brand: "bg-brand-primary text-white",
+        success: "bg-brand-secondary/20 text-taupe-800 border border-brand-secondary/50",
+        warning: "bg-brand-secondary/70 text-taupe-700 border border-brand-secondary",
+        destructive: "bg-red-50 text-red-700 border border-red-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span data-slot="badge" className={cn(badgeVariants({ variant, className }))} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/breadcrumb.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentProps<"nav"> & { separator?: React.ReactNode }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentProps<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn("flex flex-wrap items-center gap-1.5 body text-taupe-500", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.ComponentProps<"a">>(
+  ({ className, ...props }, ref) => (
+    <a ref={ref} className={cn("transition-colors hover:text-taupe-900", className)} {...props} />
+  ),
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentProps<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-current="page"
+      className={cn("body font-medium text-taupe-900", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("text-taupe-300", className)} {...props}>
+    {children ?? <ChevronRight size={14} />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex size-5 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal size={14} className="text-taupe-400" />
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/components/button-group.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface ButtonGroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function ButtonGroup({ children, className }: ButtonGroupProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex divide-x divide-taupe-200 overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-natural",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface ButtonGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+}
+
+function ButtonGroupItem({ active, className, children, ...props }: ButtonGroupItemProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "relative inline-flex items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 focus-visible:ring-inset",
+        active
+          ? "bg-taupe-900 text-white"
+          : "text-taupe-600 hover:bg-taupe-50 hover:text-taupe-900",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export { ButtonGroup, ButtonGroupItem };

package/src/components/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2",
+    "body font-medium whitespace-nowrap",
+    "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-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
+        destructive: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800",
+        outline: "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
+        secondary: "bg-taupe-100 text-taupe-700 hover:bg-taupe-200",
+        brand:
+          "bg-brand-secondary text-taupe-900 hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
+        ghost: "text-taupe-600 hover:bg-taupe-100 hover:text-taupe-900",
+        link: "text-taupe-900 underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 rounded-md",
+        xs: "h-6 gap-1 px-2 caption rounded-md",
+        sm: "h-8 gap-1.5 px-3 rounded-md",
+        lg: "h-10 px-6 rounded-md",
+        icon: "size-9 rounded-md",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-md",
+        "icon-lg": "size-10 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/components/calendar.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-4",
+        month: "flex flex-col gap-4",
+        month_caption: "flex justify-center pt-1 relative items-center px-10",
+        caption_label: "body font-semibold text-taupe-900",
+        nav: "flex items-center justify-between absolute inset-x-0 top-1",
+        button_previous: cn(
+          "absolute left-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "text-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors",
+        ),
+        button_next: cn(
+          "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "text-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors",
+        ),
+        month_grid: "w-full border-collapse mt-1",
+        weekdays: "flex",
+        weekday: "w-9 h-9 flex items-center justify-center label text-taupe-400 font-normal",
+        week: "flex w-full mt-1",
+        day: "relative p-0 text-center",
+        day_button: cn(
+          "h-9 w-9 flex items-center justify-center rounded-full body font-normal",
+          "text-taupe-900 hover:bg-taupe-100 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        ),
+        selected:
+          "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:hover:bg-brand-primary/90",
+        today: "[&>button]:font-semibold [&>button]:text-brand-primary",
+        outside: "opacity-40 [&>button]:text-taupe-400",
+        disabled: "opacity-30 [&>button]:cursor-not-allowed",
+        range_start: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
+        range_end: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
+        range_middle:
+          "[&>button]:bg-brand-primary/15 [&>button]:text-taupe-900 [&>button]:rounded-none",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) =>
+          orientation === "left" ? <ChevronLeft size={14} /> : <ChevronRight size={14} />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/src/components/card-heading.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+interface CardHeadingAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: "default" | "outline" | "ghost" | "destructive";
+}
+
+interface CardHeadingProps {
+  title: string;
+  description?: string;
+  actions?: CardHeadingAction[];
+  children?: React.ReactNode; // e.g. avatar or icon on the left
+  className?: string;
+}
+
+function CardHeading({ title, description, actions, children, className }: CardHeadingProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-start justify-between gap-4 border-b border-taupe-100 px-5 py-4",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-3">
+        {children}
+        <div className="min-w-0">
+          <p className="body font-semibold text-taupe-900 truncate">{title}</p>
+          {description && <p className="caption text-taupe-400 mt-0.5">{description}</p>}
+        </div>
+      </div>
+
+      {actions && actions.length > 0 && (
+        <div className="flex shrink-0 items-center gap-2">
+          {actions.map((action, i) =>
+            action.href ? (
+              <Button key={i} size="sm" variant={action.variant ?? "default"} asChild>
+                <a href={action.href}>{action.label}</a>
+              </Button>
+            ) : (
+              <Button
+                key={i}
+                size="sm"
+                variant={action.variant ?? "default"}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { CardHeading };

package/src/components/card.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Card root                                                          */
+/* ------------------------------------------------------------------ */
+
+const cardVariants = cva("rounded-xl", {
+  variants: {
+    variant: {
+      default: "bg-white shadow-natural",
+      muted: "bg-taupe-50",
+      ghost: "bg-transparent",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+interface CardProps extends React.ComponentProps<"div">, VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card"
+      className={cn(cardVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+/* ------------------------------------------------------------------ */
+/*  Card sub-components                                                */
+/* ------------------------------------------------------------------ */
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 p-5", className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<"h3">>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      data-slot="card-title"
+      className={cn("subheading text-taupe-900", className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<"p">>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      data-slot="card-description"
+      className={cn("caption text-taupe-500", className)}
+      {...props}
+    />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="card-content" className={cn("p-5 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-footer"
+      className={cn("flex items-center p-5 pt-0", className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+/* ------------------------------------------------------------------ */
+/*  CardMedia — full-bleed image/gradient header                       */
+/* ------------------------------------------------------------------ */
+
+const CardMedia = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-media"
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    />
+  ),
+);
+CardMedia.displayName = "CardMedia";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardMedia,
+  cardVariants,
+};