@hilum/ui 3.2.2 → 3.2.4

package/src/components/sidebar.tsx

@@ -5,7 +5,9 @@ import { PanelLeft } from "lucide-react";
 import { Slot } from "radix-ui";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
+import { Input } from "./input";
 import { Separator } from "./separator";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
 
 /* ------------------------------------------------------------------ */
@@ -13,8 +15,27 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tool
 /* ------------------------------------------------------------------ */
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3.5rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const MOBILE_BREAKPOINT = 768;
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mediaQuery.matches);
+
+    onChange();
+    mediaQuery.addEventListener("change", onChange);
+    return () => mediaQuery.removeEventListener("change", onChange);
+  }, []);
+
+  return isMobile;
+}
 
 /* ------------------------------------------------------------------ */
 /*  Context                                                             */
@@ -23,7 +44,10 @@ const SIDEBAR_WIDTH_ICON = "3.5rem";
 interface SidebarContextValue {
   state: "expanded" | "collapsed";
   open: boolean;
-  setOpen: (open: boolean) => void;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  openMobile: boolean;
+  setOpenMobile: React.Dispatch<React.SetStateAction<boolean>>;
+  isMobile: boolean;
   toggleSidebar: () => void;
 }
 
@@ -54,32 +78,59 @@ function SidebarProvider({
   children,
   ...props
 }: SidebarProviderProps) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
   const [_open, _setOpen] = React.useState(defaultOpen);
 
   const open = openProp !== undefined ? openProp : _open;
 
   const setOpen = React.useCallback(
-    (value: boolean) => {
+    (value: React.SetStateAction<boolean>) => {
+      const nextOpen = typeof value === "function" ? value(open) : value;
       if (onOpenChange) {
-        onOpenChange(value);
+        onOpenChange(nextOpen);
       } else {
-        _setOpen(value);
+        _setOpen(nextOpen);
       }
-      // Persist to cookie
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${60 * 60 * 24 * 7}`;
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${nextOpen}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [onOpenChange],
+    [onOpenChange, open],
   );
 
   const toggleSidebar = React.useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
+    if (isMobile) {
+      setOpenMobile((currentOpen) => !currentOpen);
+      return;
+    }
+
+    setOpen((currentOpen) => !currentOpen);
+  }, [isMobile, setOpen]);
+
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
 
   const state = open ? "expanded" : "collapsed";
 
   const contextValue = React.useMemo<SidebarContextValue>(
-    () => ({ state, open, setOpen, toggleSidebar }),
-    [state, open, setOpen, toggleSidebar],
+    () => ({
+      state,
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      isMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar],
   );
 
   return (
@@ -92,6 +143,7 @@ function SidebarProvider({
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
               "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
               ...style,
             } as React.CSSProperties
@@ -109,7 +161,7 @@ function SidebarProvider({
 /*  Sidebar                                                             */
 /* ------------------------------------------------------------------ */
 
-interface SidebarProps extends React.ComponentProps<"aside"> {
+interface SidebarProps extends React.ComponentProps<"div"> {
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
@@ -123,7 +175,7 @@ function Sidebar({
   children,
   ...props
 }: SidebarProps) {
-  const { state } = useSidebar();
+  const { state, isMobile, openMobile, setOpenMobile } = useSidebar();
 
   if (collapsible === "none") {
     return (
@@ -143,6 +195,28 @@ function Sidebar({
     );
   }
 
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-mobile="true"
+          side={side}
+          className={cn(
+            "w-(--sidebar-width-mobile) max-w-[85dvw] bg-card p-0 text-foreground [&>button]:hidden",
+            className,
+          )}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
   if (collapsible === "offcanvas") {
     return (
       <aside
@@ -247,7 +321,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
     <main
       data-sidebar="inset"
-      className={cn("relative flex min-h-svh flex-1 flex-col bg-card overflow-hidden", className)}
+      className={cn("relative flex min-h-svh flex-1 flex-col overflow-hidden bg-background", className)}
       {...props}
     />
   );
@@ -297,6 +371,16 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
   );
 }
 
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Group components                                                    */
 /* ------------------------------------------------------------------ */
@@ -619,6 +703,7 @@ export {
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
+  SidebarInput,
   SidebarInset,
   SidebarMenu,
   SidebarMenuAction,
@@ -632,5 +717,11 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
   useSidebar,
 };

package/src/components/stat-card.tsx

@@ -1,19 +1,52 @@
 import * as React from "react";
-import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { TrendingUp, TrendingDown, Minus, Plus } from "lucide-react";
 import { cn } from "../lib/utils";
 
 interface StatCardProps {
-  label: string;
-  value: string | number;
+  label?: string;
+  title?: string;
+  value?: string | number;
   trend?: {
     value: string;
     direction: "up" | "down" | "neutral";
   };
   icon?: React.ReactNode;
+  children?: React.ReactNode;
+  actionButtons?: React.ReactNode;
   className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  valueClassName?: string;
 }
 
-function StatCard({ label, value, trend, icon, className }: StatCardProps) {
+interface StatCardGridProps {
+  children: React.ReactNode;
+  maxSlots?: number;
+  onAddCard?: () => void;
+  className?: string;
+  showEmptySlots?: boolean;
+}
+
+interface StatCardSlotProps {
+  onAddCard?: () => void;
+  className?: string;
+  label?: string;
+}
+
+function StatCard({
+  label,
+  title,
+  value,
+  trend,
+  icon,
+  children,
+  actionButtons,
+  className,
+  containerClassName,
+  titleClassName,
+  valueClassName,
+}: StatCardProps) {
+  const displayLabel = title ?? label;
   const trendColor = {
     up: "text-muted-foreground bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
     down: "text-destructive",
@@ -27,16 +60,34 @@ function StatCard({ label, value, trend, icon, className }: StatCardProps) {
   };
 
   return (
-    <div className={cn("rounded-xl border border-border bg-card p-5", className)}>
+    <div
+      className={cn(
+        "min-w-0 rounded-xl border border-border bg-card p-4 shadow-natural sm:p-5",
+        containerClassName,
+        className,
+      )}
+      data-slot="stat-card"
+    >
       <div className="flex items-start justify-between gap-3">
-        <p className="label text-muted-foreground">{label}</p>
+        {displayLabel && (
+          <p className={cn("label min-w-0 text-muted-foreground", titleClassName)}>
+            {displayLabel}
+          </p>
+        )}
         {icon && (
           <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
             {icon}
           </div>
         )}
+        {actionButtons && <div className="flex shrink-0 items-center gap-2">{actionButtons}</div>}
       </div>
-      <p className="heading-xl mt-2 tabular-nums text-foreground">{value}</p>
+      {value !== undefined ? (
+        <p className={cn("heading-xl mt-2 tabular-nums text-foreground", valueClassName)}>
+          {value}
+        </p>
+      ) : children ? (
+        <div className="mt-2">{children}</div>
+      ) : null}
       {trend &&
         (() => {
           const Icon = TrendIcon[trend.direction];
@@ -53,4 +104,67 @@ function StatCard({ label, value, trend, icon, className }: StatCardProps) {
 
 StatCard.displayName = "StatCard";
 
-export { StatCard };
+function StatCardSlot({ onAddCard, className, label = "Add card" }: StatCardSlotProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex min-h-28 w-full min-w-0 items-center justify-center rounded-xl border border-dashed border-border bg-card p-4 text-muted-foreground shadow-natural",
+        "transition-[background-color,border-color,color,scale] duration-150 hover:border-ground-300 hover:bg-muted hover:text-foreground active:scale-[0.96]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        className,
+      )}
+      onClick={onAddCard}
+    >
+      <span className="flex flex-col items-center gap-1.5">
+        <Plus className="size-4" aria-hidden="true" />
+        <span className="caption font-medium">{label}</span>
+      </span>
+    </button>
+  );
+}
+
+StatCardSlot.displayName = "StatCardSlot";
+
+function StatCardGrid({
+  children,
+  maxSlots = 6,
+  onAddCard,
+  className,
+  showEmptySlots = false,
+}: StatCardGridProps) {
+  const childrenArray = React.Children.toArray(children);
+  const emptySlots = showEmptySlots ? Math.max(0, maxSlots - childrenArray.length) : 0;
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-0 grid-cols-2 items-stretch gap-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+        className,
+      )}
+      data-slot="stat-card-grid"
+    >
+      {childrenArray.map((child, index) => (
+        <div key={`filled-${index}`} className="min-w-0">
+          {child}
+        </div>
+      ))}
+      {Array.from({ length: emptySlots }, (_, index) => (
+        <div key={`empty-${index}`} className="min-w-0">
+          <StatCardSlot {...(onAddCard ? { onAddCard } : {})} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+StatCardGrid.displayName = "StatCardGrid";
+
+export {
+  StatCard,
+  StatCardGrid,
+  StatCardSlot,
+  type StatCardProps,
+  type StatCardGridProps,
+  type StatCardSlotProps,
+};

package/src/components/status-badge.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import { Badge } from "./badge";
+import { cn } from "../lib/utils";
+
+type StatusBadgeVariant = NonNullable<React.ComponentProps<typeof Badge>["variant"]>;
+
+interface StatusBadgeProps extends Omit<
+  React.ComponentProps<typeof Badge>,
+  "children" | "variant"
+> {
+  status?: string | null;
+  label?: React.ReactNode;
+  variant?: StatusBadgeVariant;
+  variantMap?: Record<string, StatusBadgeVariant>;
+  labelMap?: Record<string, React.ReactNode>;
+  showDot?: boolean;
+  dotClassName?: string;
+}
+
+const DEFAULT_STATUS_VARIANT: Record<string, StatusBadgeVariant> = {
+  active: "success",
+  approved: "success",
+  complete: "success",
+  completed: "success",
+  confirmed: "success",
+  delivered: "success",
+  enabled: "success",
+  healthy: "success",
+  optimized: "success",
+  paid: "success",
+  published: "success",
+  resolved: "success",
+  translated: "success",
+  verified: "success",
+
+  degraded: "warning",
+  flagged: "warning",
+  held_for_review: "warning",
+  pending: "warning",
+  processing: "warning",
+  retrying: "warning",
+  scheduled: "warning",
+  trial: "warning",
+  warning: "warning",
+
+  archived: "secondary",
+  disabled: "secondary",
+  draft: "secondary",
+  inactive: "secondary",
+  missing: "secondary",
+  neutral: "secondary",
+  skipped: "secondary",
+
+  blocked: "destructive",
+  cancelled: "destructive",
+  critical: "destructive",
+  dead_letter: "destructive",
+  deleted: "destructive",
+  error: "destructive",
+  failed: "destructive",
+  rejected: "destructive",
+  suspended: "destructive",
+  unpaid: "destructive",
+  outdated: "destructive",
+};
+
+const DEFAULT_DOT_CLASS: Record<StatusBadgeVariant, string> = {
+  default: "bg-background",
+  secondary: "bg-muted-foreground",
+  outline: "bg-muted-foreground",
+  brand: "bg-background",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  destructive: "bg-destructive",
+};
+
+function normalizeStatus(status?: string | null) {
+  return String(status ?? "unknown")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "_");
+}
+
+function statusLabel(status?: string | null) {
+  const normalized = normalizeStatus(status);
+  if (normalized === "unknown") return "Unknown";
+
+  return normalized
+    .split("_")
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function statusBadgeVariantFor(
+  status?: string | null,
+  variantMap?: Record<string, StatusBadgeVariant>,
+) {
+  const normalized = normalizeStatus(status);
+  return variantMap?.[normalized] ?? DEFAULT_STATUS_VARIANT[normalized] ?? "outline";
+}
+
+function StatusBadge({
+  status,
+  label,
+  variant,
+  variantMap,
+  labelMap,
+  showDot = false,
+  dotClassName,
+  className,
+  ...props
+}: StatusBadgeProps) {
+  const normalized = normalizeStatus(status);
+  const resolvedVariant = variant ?? statusBadgeVariantFor(normalized, variantMap);
+  const resolvedLabel = label ?? labelMap?.[normalized] ?? statusLabel(normalized);
+
+  return (
+    <Badge
+      variant={resolvedVariant}
+      className={cn("max-w-full whitespace-nowrap", showDot && "pl-2", className)}
+      {...props}
+    >
+      {showDot && (
+        <span
+          className={cn(
+            "size-1.5 shrink-0 rounded-full",
+            DEFAULT_DOT_CLASS[resolvedVariant],
+            dotClassName,
+          )}
+          aria-hidden="true"
+        />
+      )}
+      <span className="min-w-0 truncate">{resolvedLabel}</span>
+    </Badge>
+  );
+}
+
+StatusBadge.displayName = "StatusBadge";
+
+export { StatusBadge, statusBadgeVariantFor, statusLabel };
+export type { StatusBadgeProps, StatusBadgeVariant };

package/src/components/titled-card.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./card";
+import { CardHeading } from "./card-heading";
+
+interface TitledCardProps {
+  title?: string;
+  subtitle?: string;
+  children?: React.ReactNode;
+  actionButtons?: React.ReactNode;
+  icon?: React.ComponentType<{ className?: string }>;
+  className?: string;
+  contentClassName?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+}
+
+function TitledCard({
+  title,
+  subtitle,
+  children,
+  actionButtons,
+  icon: Icon,
+  className,
+  contentClassName,
+  containerClassName,
+  titleClassName,
+}: TitledCardProps) {
+  const hasHeader = Boolean(title || subtitle || actionButtons);
+  const canUseCardHeading = Boolean(title) && !actionButtons && !titleClassName;
+
+  return (
+    <Card
+      className={cn(
+        "min-w-0 overflow-hidden border border-border bg-card shadow-natural",
+        "max-sm:rounded-none max-sm:border-0 max-sm:bg-transparent max-sm:shadow-none",
+        containerClassName,
+        className,
+      )}
+      data-slot="titled-card"
+    >
+      {canUseCardHeading ? (
+        <CardHeading
+          title={title!}
+          {...(subtitle ? { description: subtitle } : {})}
+          className="max-sm:border-b-0 max-sm:px-0 max-sm:pb-3"
+        >
+          {Icon && <Icon className="size-5 shrink-0 text-muted-foreground" />}
+        </CardHeading>
+      ) : hasHeader ? (
+        <CardHeader className="flex flex-col gap-3 border-b border-border p-4 max-sm:border-b-0 max-sm:px-0 max-sm:pb-3 sm:flex-row sm:items-start sm:justify-between sm:p-5">
+          <div className="min-w-0 flex-1">
+            {title && (
+              <CardTitle
+                className={cn(
+                  "flex min-w-0 items-center gap-2 text-base leading-tight sm:text-lg",
+                  titleClassName,
+                )}
+              >
+                {Icon && <Icon className="size-5 shrink-0 text-muted-foreground" />}
+                <span className="min-w-0 truncate">{title}</span>
+              </CardTitle>
+            )}
+            {subtitle && (
+              <CardDescription className="mt-1 max-w-3xl text-sm leading-5">
+                {subtitle}
+              </CardDescription>
+            )}
+          </div>
+          {actionButtons && (
+            <div className="flex w-full min-w-0 flex-wrap items-center gap-2 sm:w-auto sm:justify-end">
+              {actionButtons}
+            </div>
+          )}
+        </CardHeader>
+      ) : null}
+      {children && (
+        <CardContent
+          className={cn(
+            hasHeader ? "p-4 sm:p-5" : "p-0 sm:p-5",
+            "min-w-0 max-sm:px-0",
+            contentClassName,
+          )}
+        >
+          {children}
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
+TitledCard.displayName = "TitledCard";
+
+export { TitledCard, type TitledCardProps };