@hilum/ui 0.1.1

package/src/components/radio-card.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface RadioCardOption {
+  value: string;
+  label: string;
+  description?: string;
+  meta?: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+interface RadioCardsProps {
+  options: RadioCardOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  columns?: 1 | 2 | 3 | 4;
+  className?: string;
+}
+
+function RadioCards({ options, value, onValueChange, columns = 3, className }: RadioCardsProps) {
+  const colMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4",
+  };
+
+  return (
+    <div className={cn("grid gap-3", colMap[columns], className)}>
+      {options.map((option) => {
+        const isSelected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            disabled={option.disabled}
+            onClick={() => !option.disabled && onValueChange?.(option.value)}
+            className={cn(
+              "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-all",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              isSelected
+                ? "border-brand-primary bg-white shadow-natural"
+                : "border-taupe-200 bg-white hover:border-taupe-400",
+            )}
+          >
+            {/* Selected ring overlay */}
+            {isSelected && (
+              <span
+                className="pointer-events-none absolute inset-0 rounded-xl ring-2 ring-brand-primary"
+                aria-hidden="true"
+              />
+            )}
+
+            <div className="flex items-start justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                {option.icon && <div className="mb-2 text-taupe-500">{option.icon}</div>}
+                <p
+                  className={cn(
+                    "body font-semibold",
+                    isSelected ? "text-taupe-900" : "text-taupe-800",
+                  )}
+                >
+                  {option.label}
+                </p>
+                {option.description && (
+                  <p className="mt-0.5 caption text-taupe-400">{option.description}</p>
+                )}
+              </div>
+              <div
+                className={cn(
+                  "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                  isSelected
+                    ? "border-brand-primary bg-brand-primary"
+                    : "border-taupe-300 bg-white",
+                )}
+              >
+                {isSelected && <Check size={10} className="text-white" strokeWidth={3} />}
+              </div>
+            </div>
+
+            {option.meta && (
+              <p
+                className={cn(
+                  "caption font-semibold mt-2",
+                  isSelected ? "text-taupe-900" : "text-taupe-400",
+                )}
+              >
+                {option.meta}
+              </p>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export { RadioCards };

package/src/components/radio-group.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import { RadioGroup } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const RadioGroupRoot = React.forwardRef<
+  React.ComponentRef<typeof RadioGroup.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroup.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroup.Root ref={ref} className={cn("grid gap-2", className)} {...props} />
+));
+RadioGroupRoot.displayName = "RadioGroup";
+
+const RadioGroupItem = React.forwardRef<
+  React.ComponentRef<typeof RadioGroup.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroup.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroup.Item
+    ref={ref}
+    className={cn(
+      "aspect-square size-4 rounded-full border border-taupe-300 text-taupe-900",
+      "shadow-none transition-colors",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/20",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-taupe-900 data-[state=checked]:border-taupe-900",
+      className,
+    )}
+    {...props}
+  >
+    <RadioGroup.Indicator className="flex items-center justify-center">
+      <div className="size-2 rounded-full bg-white" />
+    </RadioGroup.Indicator>
+  </RadioGroup.Item>
+));
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroupRoot as RadioGroup, RadioGroupItem };

package/src/components/resizable.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+import type { GroupProps, SeparatorProps } from "react-resizable-panels";
+import { GripVertical } from "lucide-react";
+import { cn } from "../lib/utils";
+
+// react-resizable-panels v4 uses `orientation` and `elementRef` instead of
+// the older `direction` prop + React.forwardRef pattern.
+
+type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
+  /** Alias for `orientation` — matches the common shadcn/ui API. */
+  direction?: "horizontal" | "vertical";
+  orientation?: "horizontal" | "vertical";
+};
+
+function ResizablePanelGroup({
+  className,
+  direction,
+  orientation,
+  ...props
+}: ResizablePanelGroupProps) {
+  const resolvedOrientation = orientation ?? direction ?? "horizontal";
+  return (
+    <Group
+      orientation={resolvedOrientation}
+      className={cn(
+        "flex h-full w-full",
+        resolvedOrientation === "vertical" && "flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+
+const ResizablePanel = Panel;
+
+type ResizableHandleProps = SeparatorProps & {
+  withHandle?: boolean;
+};
+
+function ResizableHandle({ className, withHandle = true, ...props }: ResizableHandleProps) {
+  return (
+    <Separator
+      className={cn(
+        "relative flex shrink-0 items-center justify-center bg-taupe-100",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-primary/50",
+        // Horizontal (default): vertical bar
+        "[&:not([aria-orientation=vertical])]:h-full [&:not([aria-orientation=vertical])]:w-px",
+        // Vertical: horizontal bar
+        "[aria-orientation=vertical]:h-px [aria-orientation=vertical]:w-full",
+        // Wider hit target via pseudo-element
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
+        "[aria-orientation=vertical]:after:left-0 [aria-orientation=vertical]:after:h-1 [aria-orientation=vertical]:after:w-full [aria-orientation=vertical]:after:translate-x-0 [aria-orientation=vertical]:after:-translate-y-1/2",
+        // Active drag state
+        "active:bg-brand-primary/30",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-taupe-100 bg-white shadow-natural">
+          <GripVertical size={10} className="text-taupe-400" />
+        </div>
+      )}
+    </Separator>
+  );
+}
+ResizableHandle.displayName = "ResizableHandle";
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/components/scroll-area.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import * as React from "react";
+import { ScrollArea } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const ScrollAreaRoot = React.forwardRef<
+  React.ComponentRef<typeof ScrollArea.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollArea.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollArea.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollArea.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollArea.Viewport>
+    <ScrollAreaScrollbar orientation="vertical" />
+    <ScrollAreaScrollbar orientation="horizontal" />
+    <ScrollArea.Corner />
+  </ScrollArea.Root>
+));
+ScrollAreaRoot.displayName = "ScrollArea";
+
+const ScrollAreaScrollbar = React.forwardRef<
+  React.ComponentRef<typeof ScrollArea.Scrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollArea.Scrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollArea.Scrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollArea.Thumb className="relative flex-1 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors" />
+  </ScrollArea.Scrollbar>
+));
+ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
+
+export { ScrollAreaRoot as ScrollArea };

package/src/components/section-heading.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+interface SectionHeadingAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: "default" | "outline" | "ghost";
+}
+
+interface SectionHeadingProps {
+  title: string;
+  description?: string;
+  actions?: SectionHeadingAction[];
+  border?: boolean;
+  className?: string;
+}
+
+function SectionHeading({
+  title,
+  description,
+  actions,
+  border = true,
+  className,
+}: SectionHeadingProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1 pb-4 sm:flex-row sm:items-start sm:justify-between",
+        border && "border-b border-taupe-100",
+        className,
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        <h2 className="heading text-taupe-900 truncate">{title}</h2>
+        {description && <p className="mt-1 body text-taupe-400">{description}</p>}
+      </div>
+
+      {actions && actions.length > 0 && (
+        <div className="flex shrink-0 items-center gap-2 pt-1">
+          {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 { SectionHeading };

package/src/components/select.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import { Select } from "radix-ui";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const SelectRoot = Select.Root;
+const SelectGroup = Select.Group;
+const SelectValue = Select.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof Select.Trigger>,
+  React.ComponentPropsWithoutRef<typeof Select.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <Select.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between rounded-xl bg-white px-3 py-2",
+      "body text-taupe-900 shadow-natural",
+      "focus:outline-none focus:ring-2 focus:ring-taupe-900/15",
+      "disabled:opacity-50 disabled:cursor-not-allowed",
+      "data-[placeholder]:text-taupe-400",
+      "[&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <Select.Icon asChild>
+      <ChevronDown size={15} className="text-taupe-400 shrink-0" />
+    </Select.Icon>
+  </Select.Trigger>
+));
+SelectTrigger.displayName = "SelectTrigger";
+
+const SelectContent = React.forwardRef<
+  React.ComponentRef<typeof Select.Content>,
+  React.ComponentPropsWithoutRef<typeof Select.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <Select.Portal>
+    <Select.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
+        "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",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <Select.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+        <ChevronUp size={14} className="text-taupe-400" />
+      </Select.ScrollUpButton>
+      <Select.Viewport
+        className={cn(
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </Select.Viewport>
+      <Select.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+        <ChevronDown size={14} className="text-taupe-400" />
+      </Select.ScrollDownButton>
+    </Select.Content>
+  </Select.Portal>
+));
+SelectContent.displayName = "SelectContent";
+
+const SelectItem = React.forwardRef<
+  React.ComponentRef<typeof Select.Item>,
+  React.ComponentPropsWithoutRef<typeof Select.Item>
+>(({ className, children, ...props }, ref) => (
+  <Select.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <Select.ItemIndicator>
+        <Check size={13} className="text-taupe-900" />
+      </Select.ItemIndicator>
+    </span>
+    <Select.ItemText>{children}</Select.ItemText>
+  </Select.Item>
+));
+SelectItem.displayName = "SelectItem";
+
+const SelectLabel = React.forwardRef<
+  React.ComponentRef<typeof Select.Label>,
+  React.ComponentPropsWithoutRef<typeof Select.Label>
+>(({ className, ...props }, ref) => (
+  <Select.Label
+    ref={ref}
+    className={cn("px-2.5 py-1 label text-taupe-400", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = "SelectLabel";
+
+const SelectSeparator = React.forwardRef<
+  React.ComponentRef<typeof Select.Separator>,
+  React.ComponentPropsWithoutRef<typeof Select.Separator>
+>(({ className, ...props }, ref) => (
+  <Select.Separator ref={ref} className={cn("mx-1 my-1 h-px bg-taupe-100", className)} {...props} />
+));
+SelectSeparator.displayName = "SelectSeparator";
+
+export {
+  SelectRoot as Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+};

package/src/components/separator.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-taupe-100",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className,
+    )}
+    {...props}
+  />
+));
+Separator.displayName = "Separator";
+
+export { Separator };

package/src/components/sheet.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import * as React from "react";
+import { Dialog } from "radix-ui";
+import { X } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const SheetRoot = Dialog.Root;
+const SheetTrigger = Dialog.Trigger;
+const SheetClose = Dialog.Close;
+
+const SheetOverlay = React.forwardRef<
+  React.ComponentRef<typeof Dialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof Dialog.Overlay>
+>(({ className, ...props }, ref) => (
+  <Dialog.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}
+  />
+));
+SheetOverlay.displayName = "SheetOverlay";
+
+const sheetContentVariants = cva(
+  [
+    "fixed z-50 bg-white shadow-elevated p-6",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "transition ease-in-out duration-300",
+  ],
+  {
+    variants: {
+      side: {
+        right:
+          "right-0 top-0 h-full w-full max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+        left: "left-0 top-0 h-full w-full max-w-sm data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        top: "top-0 inset-x-0 h-auto data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "bottom-0 inset-x-0 h-auto data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof Dialog.Content>,
+    VariantProps<typeof sheetContentVariants> {}
+
+const SheetContent = React.forwardRef<React.ComponentRef<typeof Dialog.Content>, SheetContentProps>(
+  ({ className, children, side = "right", ...props }, ref) => (
+    <Dialog.Portal>
+      <SheetOverlay />
+      <Dialog.Content
+        ref={ref}
+        className={cn(sheetContentVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        <Dialog.Close className="absolute right-4 top-4 rounded-md p-1 text-taupe-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-taupe-900/20">
+          <X size={16} />
+          <span className="sr-only">Close</span>
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog.Portal>
+  ),
+);
+SheetContent.displayName = "SheetContent";
+
+function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 mb-4", className)} {...props} />;
+}
+SheetHeader.displayName = "SheetHeader";
+
+function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center justify-end gap-2 mt-6", className)} {...props} />;
+}
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ComponentRef<typeof Dialog.Title>,
+  React.ComponentPropsWithoutRef<typeof Dialog.Title>
+>(({ className, ...props }, ref) => (
+  <Dialog.Title
+    ref={ref}
+    className={cn("body-lg font-semibold text-taupe-900", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = "SheetTitle";
+
+const SheetDescription = React.forwardRef<
+  React.ComponentRef<typeof Dialog.Description>,
+  React.ComponentPropsWithoutRef<typeof Dialog.Description>
+>(({ className, ...props }, ref) => (
+  <Dialog.Description ref={ref} className={cn("body text-taupe-500", className)} {...props} />
+));
+SheetDescription.displayName = "SheetDescription";
+
+export {
+  SheetRoot as Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
+};