@hilum/ui 0.1.1

package/src/components/context-menu.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import * as React from "react";
+import { ContextMenu } from "radix-ui";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const ContextMenuRoot = ContextMenu.Root;
+const ContextMenuTrigger = ContextMenu.Trigger;
+const ContextMenuGroup = ContextMenu.Group;
+const ContextMenuPortal = ContextMenu.Portal;
+const ContextMenuSub = ContextMenu.Sub;
+const ContextMenuRadioGroup = ContextMenu.RadioGroup;
+
+const ContextMenuContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenu.Portal>
+    <ContextMenu.Content
+      ref={ref}
+      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}
+    />
+  </ContextMenu.Portal>
+));
+ContextMenuContent.displayName = "ContextMenuContent";
+
+const ContextMenuItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.Item> & {
+    inset?: boolean;
+    destructive?: boolean;
+  }
+>(({ className, inset, destructive, ...props }, ref) => (
+  <ContextMenu.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}
+  />
+));
+ContextMenuItem.displayName = "ContextMenuItem";
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenu.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">
+      <ContextMenu.ItemIndicator>
+        <Check size={13} className="text-taupe-900" />
+      </ContextMenu.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenu.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenu.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">
+      <ContextMenu.ItemIndicator>
+        <Circle size={8} className="fill-taupe-900 text-taupe-900" />
+      </ContextMenu.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenu.RadioItem>
+));
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+const ContextMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenu.Label
+    ref={ref}
+    className={cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = "ContextMenuLabel";
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenu.Separator
+    ref={ref}
+    className={cn("mx-1 my-1 h-px bg-taupe-100", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenu.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" />
+  </ContextMenu.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenu.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenu.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}
+  />
+));
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+
+function ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("ml-auto caption text-taupe-400", className)} {...props} />;
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenuRoot as ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuRadioGroup,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+};

package/src/components/data-table.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+  type ColumnFiltersState,
+} from "@tanstack/react-table";
+import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "./table";
+import { Button } from "./button";
+import { Input } from "./input";
+import { cn } from "../lib/utils";
+
+interface DataTableProps<TData> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<TData, any>[];
+  data: TData[];
+  searchKey?: string;
+  searchPlaceholder?: string;
+  pageSize?: number;
+  showPagination?: boolean;
+}
+
+function DataTable<TData>({
+  columns,
+  data,
+  searchKey,
+  searchPlaceholder = "Search...",
+  pageSize = 10,
+  showPagination = true,
+}: DataTableProps<TData>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    state: { sorting, columnFilters },
+    initialState: { pagination: { pageSize } },
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      {searchKey && (
+        <Input
+          placeholder={searchPlaceholder}
+          value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
+          onChange={(e) => table.getColumn(searchKey)?.setFilterValue(e.target.value)}
+          className="max-w-sm"
+        />
+      )}
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                    <button
+                      className={cn(
+                        "flex items-center gap-1 transition-colors hover:text-taupe-700",
+                        header.column.getIsSorted() && "text-taupe-900",
+                      )}
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {header.column.getIsSorted() === "asc" ? (
+                        <ChevronUp size={12} className="text-brand-primary" />
+                      ) : header.column.getIsSorted() === "desc" ? (
+                        <ChevronDown size={12} className="text-brand-primary" />
+                      ) : (
+                        <ChevronsUpDown size={12} className="text-taupe-300" />
+                      )}
+                    </button>
+                  ) : (
+                    flexRender(header.column.columnDef.header, header.getContext())
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center text-taupe-400">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      {showPagination && (
+        <div className="flex items-center justify-between">
+          <p className="caption text-taupe-400">
+            {table.getFilteredRowModel().rows.length} result
+            {table.getFilteredRowModel().rows.length !== 1 ? "s" : ""}
+          </p>
+          <div className="flex items-center gap-2">
+            <span className="caption text-taupe-400">
+              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { DataTable };
+export { createColumnHelper } from "@tanstack/react-table";
+export type { ColumnDef };

package/src/components/date-picker.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Calendar } from "./calendar";
+import { Button } from "./button";
+import { cn } from "../lib/utils";
+
+const formatDate = (date: Date) =>
+  date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+interface DatePickerProps {
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  disabled,
+  className,
+}: DatePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-[240px] justify-start gap-2 text-left font-normal",
+            !value && "text-taupe-400",
+            className,
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon size={14} className="text-taupe-400 shrink-0" />
+          {value ? formatDate(value) : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0 shadow-elevated" align="start">
+        <Calendar mode="single" selected={value} onSelect={onChange} autoFocus />
+      </PopoverContent>
+    </Popover>
+  );
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker, formatDate };

package/src/components/description-list.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface DescriptionItem {
+  term: string;
+  details: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+interface DescriptionListProps {
+  title?: string;
+  description?: string;
+  items: DescriptionItem[];
+  columns?: 1 | 2;
+  striped?: boolean;
+  className?: string;
+}
+
+function DescriptionList({
+  title,
+  description,
+  items,
+  columns = 1,
+  striped = false,
+  className,
+}: DescriptionListProps) {
+  return (
+    <div className={className}>
+      {(title || description) && (
+        <div className="mb-4">
+          {title && <p className="body font-semibold text-taupe-900">{title}</p>}
+          {description && <p className="mt-1 caption text-taupe-400">{description}</p>}
+        </div>
+      )}
+
+      <dl className={cn("border-t border-taupe-100", columns === 2 && "sm:grid sm:grid-cols-2")}>
+        {items.map((item, i) => (
+          <div
+            key={i}
+            className={cn(
+              "py-3.5",
+              columns === 1
+                ? "grid grid-cols-3 gap-4 items-baseline"
+                : "flex flex-col gap-1 border-b border-taupe-100",
+              columns === 1 && i !== items.length - 1 && "border-b border-taupe-100",
+              striped && i % 2 === 0 && "bg-taupe-50 -mx-4 px-4 rounded",
+            )}
+          >
+            <dt className="caption font-semibold text-taupe-500 uppercase tracking-wide">
+              {item.term}
+            </dt>
+            <dd className={cn("body text-taupe-900", columns === 1 ? "col-span-2" : "")}>
+              {item.action ? (
+                <div className="flex items-center justify-between gap-4">
+                  <span>{item.details}</span>
+                  {item.action}
+                </div>
+              ) : (
+                item.details
+              )}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}
+
+export { DescriptionList };
+export type { DescriptionItem };

package/src/components/dialog.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import * as React from "react";
+import { Dialog } from "radix-ui";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const DialogRoot = Dialog.Root;
+const DialogTrigger = Dialog.Trigger;
+const DialogClose = Dialog.Close;
+
+const DialogOverlay = 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}
+  />
+));
+DialogOverlay.displayName = "DialogOverlay";
+
+const DialogContent = React.forwardRef<
+  React.ComponentRef<typeof Dialog.Content>,
+  React.ComponentPropsWithoutRef<typeof Dialog.Content>
+>(({ className, children, ...props }, ref) => (
+  <Dialog.Portal>
+    <DialogOverlay />
+    <Dialog.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+        "w-full max-w-lg bg-white rounded-2xl shadow-elevated p-6",
+        "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",
+        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>
+));
+DialogContent.displayName = "DialogContent";
+
+function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 mb-4", className)} {...props} />;
+}
+DialogHeader.displayName = "DialogHeader";
+
+function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center justify-end gap-2 mt-6", className)} {...props} />;
+}
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = 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}
+  />
+));
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = 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} />
+));
+DialogDescription.displayName = "DialogDescription";
+
+export {
+  DialogRoot as Dialog,
+  DialogTrigger,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+};

package/src/components/drawer.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../lib/utils";
+
+const DrawerRoot = DrawerPrimitive.Root;
+const DrawerTrigger = DrawerPrimitive.Trigger;
+const DrawerPortal = DrawerPrimitive.Portal;
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-taupe-950/40 backdrop-blur-[1px]", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+
+const DrawerContent = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-taupe-100 bg-white",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-taupe-200" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1 px-6 py-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 px-6 pb-6", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("subheading text-taupe-900", className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = "DrawerTitle";
+
+const DrawerDescription = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("body text-taupe-500", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = "DrawerDescription";
+
+export {
+  DrawerRoot as Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};