@hilum/ui 0.1.1

package/src/components/navigation-menu.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import * as React from "react";
+import { NavigationMenu } from "radix-ui";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const NavigationMenuRoot = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenu.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenu.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenu.Root
+    ref={ref}
+    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    {...props}
+  >
+    {children}
+  </NavigationMenu.Root>
+));
+NavigationMenuRoot.displayName = "NavigationMenu";
+
+const NavigationMenuList = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenu.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenu.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenu.List
+    ref={ref}
+    className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = "NavigationMenuList";
+
+const NavigationMenuItem = NavigationMenu.Item;
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenu.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenu.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenu.Trigger
+    ref={ref}
+    className={cn(
+      "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+      "body font-medium text-taupe-700",
+      "hover:bg-taupe-100 hover:text-taupe-900",
+      "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+      "outline-none transition-colors",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronDown
+      size={12}
+      className="transition-transform duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenu.Trigger>
+));
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+
+const NavigationMenuContent = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenu.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenu.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenu.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
+      "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+      "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+      "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+      "md:absolute md:w-auto",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = "NavigationMenuContent";
+
+const NavigationMenuLink = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenu.Link>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenu.Link>
+>(({ className, ...props }, ref) => (
+  <NavigationMenu.Link
+    ref={ref}
+    className={cn(
+      "block select-none rounded-md px-3 py-2 body text-taupe-700",
+      "hover:bg-taupe-50 hover:text-taupe-900",
+      "outline-none transition-colors",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuLink.displayName = "NavigationMenuLink";
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenu.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenu.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className="absolute left-0 top-full flex justify-center">
+    <NavigationMenu.Viewport
+      ref={ref}
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+        "md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenu.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenu.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenu.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+      "data-[state=visible]:animate-in data-[state=hidden]:animate-out",
+      "data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-taupe-100 shadow-elevated" />
+  </NavigationMenu.Indicator>
+));
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
+
+function navigationMenuTriggerStyle() {
+  return cn(
+    "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+    "body font-medium text-taupe-700",
+    "hover:bg-taupe-100 hover:text-taupe-900",
+    "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+    "outline-none transition-colors",
+  );
+}
+
+export {
+  NavigationMenuRoot as NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+  NavigationMenuIndicator,
+  navigationMenuTriggerStyle,
+};

package/src/components/notification.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface NotificationAction {
+  label: string;
+  onClick?: () => void;
+  variant?: "default" | "ghost";
+}
+
+interface NotificationProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  variant?: "default" | "success" | "error" | "warning" | "info";
+  actions?: NotificationAction[];
+  onClose?: () => void;
+  className?: string;
+}
+
+const variantConfig = {
+  default: { icon: null, iconClass: "text-taupe-400" },
+  success: {
+    icon: CheckCircle,
+    iconClass: "bg-brand-secondary/25 text-taupe-700 rounded-full p-1",
+  },
+  error: { icon: AlertCircle, iconClass: "text-red-500" },
+  warning: {
+    icon: AlertTriangle,
+    iconClass: "bg-brand-secondary/80 text-taupe-700 rounded-full p-1",
+  },
+  info: { icon: Info, iconClass: "text-taupe-400" },
+};
+
+function Notification({
+  title,
+  description,
+  icon,
+  variant = "default",
+  actions,
+  onClose,
+  className,
+}: NotificationProps) {
+  const config = variantConfig[variant];
+  const DefaultIcon = config.icon;
+
+  const resolvedIcon = icon ?? (DefaultIcon ? <DefaultIcon size={20} /> : null);
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+        className,
+      )}
+    >
+      <div className="p-4">
+        <div className="flex items-start gap-3">
+          {/* Icon */}
+          {resolvedIcon && (
+            <div className={cn("shrink-0 mt-0.5", config.iconClass)}>{resolvedIcon}</div>
+          )}
+
+          {/* Body */}
+          <div className="min-w-0 flex-1">
+            <p className="body font-semibold text-taupe-900">{title}</p>
+            {description && <p className="mt-0.5 body text-taupe-500">{description}</p>}
+
+            {/* Actions */}
+            {actions && actions.length > 0 && (
+              <div className="mt-3 flex gap-3">
+                {actions.map((action, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={action.onClick}
+                    className={cn(
+                      "body font-semibold transition-colors",
+                      action.variant === "ghost"
+                        ? "text-taupe-400 hover:text-taupe-700"
+                        : "text-taupe-900 hover:text-taupe-600",
+                    )}
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Close */}
+          {onClose && (
+            <div className="shrink-0">
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-md text-taupe-400 hover:text-taupe-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40"
+              >
+                <span className="sr-only">Close</span>
+                <X size={16} />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { Notification };

package/src/components/page-heading.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Badge } from "./badge";
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface PageHeadingAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: "default" | "outline" | "ghost";
+  primary?: boolean;
+}
+
+interface PageHeadingMeta {
+  icon?: React.ReactNode;
+  text: string;
+}
+
+interface PageHeadingProps {
+  title: string;
+  description?: string;
+  breadcrumbs?: BreadcrumbItem[];
+  actions?: PageHeadingAction[];
+  meta?: PageHeadingMeta[];
+  badge?: string | { label: string; variant?: "default" | "secondary" | "outline" | "destructive" };
+  className?: string;
+}
+
+function PageHeading({
+  title,
+  description,
+  breadcrumbs,
+  actions,
+  meta,
+  badge,
+  className,
+}: PageHeadingProps) {
+  return (
+    <div className={cn("border-b border-taupe-100 pb-6", className)}>
+      {/* Breadcrumbs */}
+      {breadcrumbs && breadcrumbs.length > 0 && (
+        <nav className="mb-3 flex items-center gap-1.5" aria-label="Breadcrumb">
+          {breadcrumbs.map((crumb, i) => (
+            <React.Fragment key={i}>
+              {i > 0 && <ChevronRight size={12} className="text-taupe-300 shrink-0" />}
+              {crumb.href ? (
+                <a
+                  href={crumb.href}
+                  className="caption text-taupe-400 hover:text-taupe-700 transition-colors"
+                >
+                  {crumb.label}
+                </a>
+              ) : (
+                <span className="caption font-semibold text-taupe-700">{crumb.label}</span>
+              )}
+            </React.Fragment>
+          ))}
+        </nav>
+      )}
+
+      {/* Title row */}
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-3">
+            <h1 className="display text-taupe-900 truncate">{title}</h1>
+            {badge &&
+              (typeof badge === "string" ? (
+                <Badge variant="secondary">{badge}</Badge>
+              ) : (
+                <Badge variant={badge.variant ?? "secondary"}>{badge.label}</Badge>
+              ))}
+          </div>
+          {description && <p className="mt-1.5 body text-taupe-400 max-w-2xl">{description}</p>}
+
+          {/* Meta */}
+          {meta && meta.length > 0 && (
+            <div className="mt-3 flex flex-wrap items-center gap-4">
+              {meta.map((m, i) => (
+                <div key={i} className="flex items-center gap-1.5 caption text-taupe-400">
+                  {m.icon && <span className="text-taupe-400">{m.icon}</span>}
+                  <span>{m.text}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        {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.primary ? "default" : (action.variant ?? "outline")}
+                  asChild
+                >
+                  <a href={action.href}>{action.label}</a>
+                </Button>
+              ) : (
+                <Button
+                  key={i}
+                  size="sm"
+                  variant={action.primary ? "default" : (action.variant ?? "outline")}
+                  onClick={action.onClick}
+                >
+                  {action.label}
+                </Button>
+              ),
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { PageHeading };

package/src/components/pagination.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  ),
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
+);
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = React.ComponentProps<"a"> & { isActive?: boolean };
+
+const PaginationLink = ({ className, isActive, ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({ variant: isActive ? "default" : "ghost", size: "icon" }),
+      "size-8 rounded-md body",
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn("gap-1 px-3 w-auto", className)}
+    {...props}
+  >
+    <ChevronLeft size={14} />
+    <span className="body">Prev</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn("gap-1 px-3 w-auto", className)}
+    {...props}
+  >
+    <span className="body">Next</span>
+    <ChevronRight size={14} />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex size-8 items-center justify-center text-taupe-400", className)}
+    {...props}
+  >
+    <MoreHorizontal size={14} />
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/components/popover.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import { Popover } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const PopoverRoot = Popover.Root;
+const PopoverTrigger = Popover.Trigger;
+const PopoverClose = Popover.Close;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof Popover.Content>,
+  React.ComponentPropsWithoutRef<typeof Popover.Content>
+>(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
+  <Popover.Portal>
+    <Popover.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-xl bg-white p-4 shadow-natural 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}
+    />
+  </Popover.Portal>
+));
+PopoverContent.displayName = "PopoverContent";
+
+export { PopoverRoot as Popover, PopoverTrigger, PopoverContent, PopoverClose };

package/src/components/progress.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Progress } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const ProgressRoot = React.forwardRef<
+  React.ComponentRef<typeof Progress.Root>,
+  React.ComponentPropsWithoutRef<typeof Progress.Root>
+>(({ className, value, ...props }, ref) => (
+  <Progress.Root
+    ref={ref}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-taupe-100", className)}
+    value={value}
+    {...props}
+  >
+    <Progress.Indicator
+      className="h-full w-full flex-1 bg-brand-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+    />
+  </Progress.Root>
+));
+ProgressRoot.displayName = "Progress";
+
+export { ProgressRoot as Progress };

package/src/components/property-row.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface PropertyRowProps extends React.ComponentProps<"div"> {
+  /** Optional label rendered on the left. Pass a string or any React node (icon + label, etc.). */
+  label?: React.ReactNode;
+  /** Width of the label column. Default: 96px. */
+  labelWidth?: number | string;
+  /** Aligns label vertically with controls. Default: "center". */
+  labelAlign?: "start" | "center";
+}
+
+/**
+ * Horizontal property row used inside designer inspector panels:
+ * left-aligned label, right-aligned controls, single visual row.
+ * Different from <Field>, which is a vertical form field with hint/error.
+ *
+ * <PropertyRow label="Opacity">
+ *   <Slider />
+ *   <InputNumber />
+ * </PropertyRow>
+ */
+function PropertyRow({
+  label,
+  labelWidth = 96,
+  labelAlign = "center",
+  className,
+  children,
+  ...rest
+}: PropertyRowProps) {
+  return (
+    <div
+      className={cn(
+        "flex w-full gap-3 py-1",
+        labelAlign === "center" ? "items-center" : "items-start",
+        className,
+      )}
+      {...rest}
+    >
+      {label !== undefined && (
+        <div
+          className="caption text-taupe-500 shrink-0 select-none"
+          style={{ width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth }}
+        >
+          {label}
+        </div>
+      )}
+      <div className="flex flex-1 items-center gap-2 min-w-0">{children}</div>
+    </div>
+  );
+}
+
+export { PropertyRow };
+export type { PropertyRowProps };