@hilum/ui 3.8.6 → 3.10.0

package/src/components/command.tsx

@@ -125,6 +125,7 @@ const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     };
 
     return (
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- focus lives on the options (roving tabindex); the listbox only delegates Arrow keys
       <div
         ref={combinedRef}
         role="listbox"
@@ -197,6 +198,7 @@ const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
     };
 
     return (
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- enabled options get tabIndex=0; disabled options are intentionally unfocusable
       <div
         ref={ref}
         role="option"
@@ -205,10 +207,10 @@ const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
         data-cmd-item
         tabIndex={disabled ? undefined : 0}
         className={cn(
-          "relative mx-1 flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
+          "relative mx-1 flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 compact:min-h-7 compact:px-2 compact:py-1 compact:text-[13px] compact:rounded-[4px]",
           "body text-muted-foreground outline-none transition-colors",
           "hover:bg-muted hover:text-foreground",
-          "focus:bg-muted focus:text-foreground",
+          "focus:bg-active focus:text-foreground",
           disabled && "pointer-events-none opacity-40",
           className,
         )}
@@ -230,7 +232,7 @@ CommandItem.displayName = "CommandItem";
 
 const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("my-1 h-px bg-muted", className)} {...props} />
+    <div ref={ref} className={cn("my-1 h-px bg-border", className)} {...props} />
   ),
 );
 CommandSeparator.displayName = "CommandSeparator";

package/src/components/context-menu.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { ContextMenu } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../lib/utils";
+import { useDensityAttributes } from "../lib/density-context";
 import {
   mobilePopperSheetMotionClassName,
   mobilePopperSheetPositionClassName,
@@ -26,6 +27,7 @@ const ContextMenuContent = React.forwardRef<
     <style>{mobilePopperSheetStyle}</style>
     <ContextMenu.Portal>
       <ContextMenu.Content
+        {...useDensityAttributes()}
         ref={ref}
         data-hilum-mobile-sheet="true"
         className={cn(
@@ -58,13 +60,13 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenu.Item
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 compact:min-h-7 compact:px-2 compact:py-1 compact:text-[13px] compact:rounded-[4px]",
       "body outline-none transition-colors",
       destructive
         ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
-        : "text-muted-foreground focus:bg-muted focus:text-foreground",
+        : "text-foreground focus:bg-active",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "pl-8 compact:pl-7",
       className,
     )}
     {...props}
@@ -79,9 +81,9 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenu.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5 compact:min-h-7 compact:py-1 compact:pl-7 compact:pr-2 compact:text-[13px] compact:rounded-[4px]",
+      "body text-foreground outline-none transition-colors",
+      "focus:bg-active focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -104,9 +106,9 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenu.RadioItem
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5 compact:min-h-7 compact:py-1 compact:pl-7 compact:pr-2 compact:text-[13px] compact:rounded-[4px]",
+      "body text-foreground outline-none transition-colors",
+      "focus:bg-active focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -130,7 +132,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenu.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-muted-foreground compact:px-2 compact:text-[11px]", inset && "pl-8 compact:pl-7", className)}
     {...props}
   />
 ));
@@ -142,7 +144,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenu.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
 ));
@@ -157,10 +159,10 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenu.SubTrigger
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
-      inset && "pl-8",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 compact:min-h-7 compact:px-2 compact:py-1 compact:text-[13px] compact:rounded-[4px]",
+      "body text-foreground outline-none transition-colors",
+      "focus:bg-active focus:text-foreground data-[state=open]:bg-active",
+      inset && "pl-8 compact:pl-7",
       className,
     )}
     {...props}
@@ -178,6 +180,7 @@ const ContextMenuSubContent = React.forwardRef<
   <>
     <style>{mobilePopperSheetStyle}</style>
     <ContextMenu.SubContent
+        {...useDensityAttributes()}
       ref={ref}
       data-hilum-mobile-sheet="true"
       className={cn(

package/src/components/contextual-save-bar.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { CircleAlert } from "lucide-react";
+import { cn } from "../lib/utils";
+import { spring } from "../lib/springs";
+import { Button } from "./button";
+
+interface ContextualSaveBarProps {
+  /** Show the bar — usually `form.isDirty`. */
+  open: boolean;
+  /** Message on the leading edge. Default: "Unsaved changes". */
+  message?: React.ReactNode;
+  /** Primary action. */
+  onSave?: () => void;
+  /** Secondary action — resets the form to its saved state. */
+  onDiscard?: () => void;
+  saveLabel?: React.ReactNode;
+  discardLabel?: React.ReactNode;
+  /** Shows a spinner on Save and disables both actions. */
+  saving?: boolean;
+  /** Disable Save (e.g. while the form is invalid). */
+  saveDisabled?: boolean;
+  /**
+   * Wire the Save button to a `<form id>` instead of `onSave` — the button
+   * becomes `type="submit" form={formId}` so native validation still runs.
+   */
+  formId?: string;
+  /**
+   * `fixed` pins the bar to the viewport (default: top on desktop,
+   * bottom on mobile for thumb reach). `sticky` keeps it inside its scroll
+   * container — useful inside a settings pane or a dialog.
+   */
+  position?: "fixed" | "sticky";
+  /** Extra content between the message and the actions (e.g. a "Preview" link). */
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Contextual save bar — the "you have unsaved changes" strip that replaces
+ * per-card Save buttons on edit screens (Shopify's contextual save bar).
+ * Announces itself politely to assistive tech and binds ⌘S / Ctrl+S to Save
+ * while open.
+ */
+function ContextualSaveBar({
+  open,
+  message = "Unsaved changes",
+  onSave,
+  onDiscard,
+  saveLabel = "Save",
+  discardLabel = "Discard",
+  saving = false,
+  saveDisabled = false,
+  formId,
+  position = "fixed",
+  children,
+  className,
+}: ContextualSaveBarProps) {
+  const reduceMotion = useReducedMotion();
+  const saveRef = React.useRef<HTMLButtonElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+        event.preventDefault();
+        if (!saving && !saveDisabled) saveRef.current?.click();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, saving, saveDisabled]);
+
+  return (
+    <AnimatePresence initial={false}>
+      {open && (
+        <motion.div
+          key="contextual-save-bar"
+          role="region"
+          aria-label="Unsaved changes"
+          data-slot="contextual-save-bar"
+          data-position={position}
+          initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}
+          transition={spring.fast}
+          className={cn(
+            "z-(--z-sticky) flex min-w-0 items-center gap-3 border-border bg-foreground px-4 py-2.5 text-background",
+            position === "fixed"
+              ? "fixed inset-x-0 bottom-0 border-t pb-[max(0.625rem,env(safe-area-inset-bottom))] sm:top-0 sm:bottom-auto sm:border-t-0 sm:border-b sm:pb-2.5"
+              : "sticky top-0 rounded-xl shadow-elevated",
+            className,
+          )}
+        >
+          <p
+            className="body-sm flex min-w-0 flex-1 items-center gap-2 font-medium"
+            aria-live="polite"
+          >
+            <CircleAlert className="size-4 shrink-0 opacity-70" aria-hidden="true" />
+            <span className="truncate">{message}</span>
+          </p>
+          {children}
+          <div className="flex shrink-0 items-center gap-2">
+            {onDiscard && (
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                className="text-background/80 hover:bg-background/10 hover:text-background"
+                onClick={onDiscard}
+                disabled={saving}
+              >
+                {discardLabel}
+              </Button>
+            )}
+            <Button
+              ref={saveRef}
+              size="sm"
+              variant="brand"
+              {...(formId ? { type: "submit" as const, form: formId } : { type: "button" as const })}
+              {...(onSave ? { onClick: onSave } : {})}
+              loading={saving}
+              disabled={saveDisabled}
+            >
+              {saveLabel}
+            </Button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+ContextualSaveBar.displayName = "ContextualSaveBar";
+
+/**
+ * Warn before the tab closes / reloads while `dirty` is true. Pair with
+ * ContextualSaveBar; route-level blocking belongs to your router.
+ */
+function useUnsavedChangesWarning(dirty: boolean) {
+  React.useEffect(() => {
+    if (!dirty) return;
+    const onBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      // Legacy browsers require returnValue to be set.
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [dirty]);
+}
+
+export { ContextualSaveBar, useUnsavedChangesWarning };
+export type { ContextualSaveBarProps };

package/src/components/data-table.tsx

@@ -17,6 +17,7 @@ import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from ".
 import { Button } from "./button";
 import { Input } from "./input";
 import { cn } from "../lib/utils";
+import { pluralize, useFormatter } from "../lib/format";
 
 interface DataTableProps<TData> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -26,6 +27,12 @@ interface DataTableProps<TData> {
   searchPlaceholder?: string;
   pageSize?: number;
   showPagination?: boolean;
+  /** Rendered in the table body when there are no rows (e.g. an `<EmptyState>` with an action). */
+  emptyState?: React.ReactNode;
+  /** Make rows clickable (e.g. open the detail page). Enter/Space activate focused rows. */
+  onRowClick?: (row: TData) => void;
+  /** Noun for the result count — "12 orders". Default: "result". */
+  itemLabel?: string;
 }
 
 function DataTable<TData>({
@@ -35,7 +42,11 @@ function DataTable<TData>({
   searchPlaceholder = "Search...",
   pageSize = 10,
   showPagination = true,
+  emptyState,
+  onRowClick,
+  itemLabel = "result",
 }: DataTableProps<TData>) {
+  const fmt = useFormatter();
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
 
@@ -107,7 +118,23 @@ function DataTable<TData>({
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow key={row.id}>
+              <TableRow
+                key={row.id}
+                {...(onRowClick
+                  ? {
+                      tabIndex: 0,
+                      className:
+                        "cursor-pointer focus-visible:outline-none focus-visible:bg-muted hover:bg-muted",
+                      onClick: () => onRowClick(row.original),
+                      onKeyDown: (event: React.KeyboardEvent<HTMLTableRowElement>) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          onRowClick(row.original);
+                        }
+                      },
+                    }
+                  : {})}
+              >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -119,9 +146,9 @@ function DataTable<TData>({
             <TableRow>
               <TableCell
                 colSpan={columns.length}
-                className="h-24 text-center text-muted-foreground"
+                className={cn(!emptyState && "h-24 text-center text-muted-foreground")}
               >
-                No results.
+                {emptyState ?? "No results."}
               </TableCell>
             </TableRow>
           )}
@@ -130,8 +157,9 @@ function DataTable<TData>({
       {showPagination && (
         <div className="flex items-center justify-between">
           <p className="caption tabular-nums text-muted-foreground">
-            {table.getFilteredRowModel().rows.length} result
-            {table.getFilteredRowModel().rows.length !== 1 ? "s" : ""}
+            {pluralize(table.getFilteredRowModel().rows.length, itemLabel, {
+              ...(fmt.locale ? { locale: fmt.locale } : {}),
+            })}
           </p>
           <div className="flex items-center gap-2">
             <span className="caption tabular-nums text-muted-foreground">
@@ -161,5 +189,6 @@ function DataTable<TData>({
 }
 
 export { DataTable };
+export type { DataTableProps };
 export { createColumnHelper } from "@tanstack/react-table";
 export type { ColumnDef };