@hilum/ui 3.2.2 → 3.2.4

package/src/components/color-picker.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import { Popover } from "radix-ui";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
 interface ColorPickerProps {
   value: string;
@@ -38,8 +38,8 @@ function ColorPicker({
   };
 
   return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
+    <Popover>
+      <PopoverTrigger asChild>
         <button
           type="button"
           disabled={disabled}
@@ -58,52 +58,46 @@ function ColorPicker({
             style={{ backgroundColor: value }}
           />
         </button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          align="start"
-          sideOffset={6}
-          className="z-50 w-56 rounded-xl bg-card p-3 shadow-natural outline-none"
-        >
+      </PopoverTrigger>
+      <PopoverContent align="start" sideOffset={6} className="w-56 p-3 max-sm:px-3">
+        <input
+          type="color"
+          value={isValidHex(hex) ? hex : "#000000"}
+          onChange={(e) => {
+            setHex(e.target.value);
+            onChange(e.target.value);
+          }}
+          className="h-10 w-full cursor-pointer rounded-md border border-border bg-card p-0.5"
+        />
+        <div className="mt-2 flex items-center gap-2">
+          <span className="caption text-muted-foreground">Hex</span>
           <input
-            type="color"
-            value={isValidHex(hex) ? hex : "#000000"}
-            onChange={(e) => {
-              setHex(e.target.value);
-              onChange(e.target.value);
+            type="text"
+            value={hex}
+            onChange={(e) => setHex(e.target.value)}
+            onBlur={(e) => commit(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commit((e.target as HTMLInputElement).value);
             }}
-            className="h-10 w-full cursor-pointer rounded-md border border-border bg-card p-0.5"
+            className="h-10 flex-1 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
           />
-          <div className="mt-2 flex items-center gap-2">
-            <span className="caption text-muted-foreground">Hex</span>
-            <input
-              type="text"
-              value={hex}
-              onChange={(e) => setHex(e.target.value)}
-              onBlur={(e) => commit(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") commit((e.target as HTMLInputElement).value);
-              }}
-              className="h-10 flex-1 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
-            />
+        </div>
+        {presets && presets.length > 0 && (
+          <div className="mt-3 grid grid-cols-4 gap-2">
+            {presets.map((p) => (
+              <button
+                key={p}
+                type="button"
+                onClick={() => onChange(p)}
+                aria-label={p}
+                className="size-10 rounded-md border border-black/10 transition-transform hover:scale-105 active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
+                style={{ backgroundColor: p }}
+              />
+            ))}
           </div>
-          {presets && presets.length > 0 && (
-            <div className="mt-3 grid grid-cols-4 gap-2">
-              {presets.map((p) => (
-                <button
-                  key={p}
-                  type="button"
-                  onClick={() => onChange(p)}
-                  aria-label={p}
-                  className="size-10 rounded-md border border-black/10 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
-                  style={{ backgroundColor: p }}
-                />
-              ))}
-            </div>
-          )}
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+        )}
+      </PopoverContent>
+    </Popover>
   );
 }
 

package/src/components/combobox.tsx

@@ -174,74 +174,93 @@ function Combobox({
 
       {/* Dropdown */}
       {open && (
-        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated">
-          <ul id={listboxId} role="listbox" className="max-h-60 overflow-auto py-1">
-            {filtered.length === 0 ? (
-              <li className="px-3 py-2 body text-muted-foreground">{emptyText}</li>
-            ) : (
-              filtered.map((option, idx) => {
-                const isSelected = option.value === value;
-                const isActive = idx === activeIndex;
-                return (
-                  <li
-                    key={option.value}
-                    id={`${listboxId}-option-${idx}`}
-                    role="option"
-                    aria-selected={isSelected}
-                    className={cn(
-                      "flex min-h-10 cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
-                      isSelected
-                        ? "bg-brand-primary text-background"
-                        : isActive
-                          ? "bg-muted text-foreground"
-                          : "text-foreground hover:bg-muted",
-                    )}
-                    onMouseDown={(e) => e.preventDefault()}
-                    onMouseEnter={() => setActiveIndex(idx)}
-                    onClick={() => selectOption(option)}
-                  >
-                    {/* Avatar */}
-                    {option.avatar && (
-                      <div
-                        className={cn(
-                          "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
-                          isSelected
-                            ? "bg-card/20 text-background"
-                            : "bg-muted text-muted-foreground",
-                        )}
-                      >
-                        {option.avatar}
-                      </div>
-                    )}
-                    {/* Status dot */}
-                    {option.statusColor && !option.avatar && (
-                      <div
-                        className="size-2 shrink-0 rounded-full"
-                        style={{ backgroundColor: option.statusColor }}
-                      />
-                    )}
-                    <div className="min-w-0 flex-1">
-                      <p className={cn("truncate", isSelected && "font-semibold")}>
-                        {option.label}
-                      </p>
-                      {option.description && (
-                        <p
+        <>
+          <button
+            type="button"
+            aria-label="Close options"
+            className="fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-sm:block"
+            onClick={closeDropdown}
+          />
+          <div
+            className={cn(
+              "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated",
+              "max-sm:fixed max-sm:inset-x-3 max-sm:bottom-3 max-sm:[bottom:max(0.75rem,env(safe-area-inset-bottom))] max-sm:top-auto max-sm:mt-0 max-sm:w-auto",
+              "max-sm:max-h-[min(70dvh,28rem)] max-sm:rounded-2xl max-sm:p-2 max-sm:pt-5",
+              "max-sm:before:absolute max-sm:before:left-1/2 max-sm:before:top-2 max-sm:before:h-1 max-sm:before:w-9 max-sm:before:-translate-x-1/2 max-sm:before:rounded-full max-sm:before:bg-muted-foreground/35",
+            )}
+          >
+            <ul
+              id={listboxId}
+              role="listbox"
+              className="max-h-60 overflow-auto py-1 max-sm:max-h-[calc(min(70dvh,28rem)-3rem)]"
+            >
+              {filtered.length === 0 ? (
+                <li className="px-3 py-2 body text-muted-foreground">{emptyText}</li>
+              ) : (
+                filtered.map((option, idx) => {
+                  const isSelected = option.value === value;
+                  const isActive = idx === activeIndex;
+                  return (
+                    <li
+                      key={option.value}
+                      id={`${listboxId}-option-${idx}`}
+                      role="option"
+                      aria-selected={isSelected}
+                      className={cn(
+                        "flex min-h-10 cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
+                        isSelected
+                          ? "bg-brand-primary text-background"
+                          : isActive
+                            ? "bg-muted text-foreground"
+                            : "text-foreground hover:bg-muted",
+                      )}
+                      onMouseDown={(e) => e.preventDefault()}
+                      onMouseEnter={() => setActiveIndex(idx)}
+                      onClick={() => selectOption(option)}
+                    >
+                      {/* Avatar */}
+                      {option.avatar && (
+                        <div
                           className={cn(
-                            "caption truncate",
-                            isSelected ? "text-background/70" : "text-muted-foreground",
+                            "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
+                            isSelected
+                              ? "bg-card/20 text-background"
+                              : "bg-muted text-muted-foreground",
                           )}
                         >
-                          {option.description}
-                        </p>
+                          {option.avatar}
+                        </div>
                       )}
-                    </div>
-                    {isSelected && <Check size={14} className="shrink-0" />}
-                  </li>
-                );
-              })
-            )}
-          </ul>
-        </div>
+                      {/* Status dot */}
+                      {option.statusColor && !option.avatar && (
+                        <div
+                          className="size-2 shrink-0 rounded-full"
+                          style={{ backgroundColor: option.statusColor }}
+                        />
+                      )}
+                      <div className="min-w-0 flex-1">
+                        <p className={cn("truncate", isSelected && "font-semibold")}>
+                          {option.label}
+                        </p>
+                        {option.description && (
+                          <p
+                            className={cn(
+                              "caption truncate",
+                              isSelected ? "text-background/70" : "text-muted-foreground",
+                            )}
+                          >
+                            {option.description}
+                          </p>
+                        )}
+                      </div>
+                      {isSelected && <Check size={14} className="shrink-0" />}
+                    </li>
+                  );
+                })
+              )}
+            </ul>
+          </div>
+        </>
       )}
     </div>
   );

package/src/components/command.tsx

@@ -3,6 +3,13 @@
 import * as React from "react";
 import { Search } from "lucide-react";
 import { cn } from "../lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
 
 interface CommandContextValue {
   query: string;
@@ -238,10 +245,38 @@ function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanE
 }
 CommandShortcut.displayName = "CommandShortcut";
 
+interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  ...props
+}: CommandDialogProps) {
+  return (
+    <Dialog {...props}>
+      <DialogContent className={cn("gap-0 overflow-hidden p-0 sm:max-w-xl", className)}>
+        <DialogHeader className="sr-only">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <Command className="rounded-none border-0 shadow-none">{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+CommandDialog.displayName = "CommandDialog";
+
 Command.displayName = "Command";
 
 export {
   Command,
+  CommandDialog,
   CommandInput,
   CommandList,
   CommandEmpty,

package/src/components/context-menu.tsx

@@ -4,6 +4,12 @@ import * as React from "react";
 import { ContextMenu } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../lib/utils";
+import {
+  mobilePopperSheetMotionClassName,
+  mobilePopperSheetPositionClassName,
+  mobilePopperSheetStyle,
+  mobilePopperSheetSurfaceClassName,
+} from "../lib/mobile-popper-sheet";
 
 const ContextMenuRoot = ContextMenu.Root;
 const ContextMenuTrigger = ContextMenu.Trigger;
@@ -16,21 +22,29 @@ 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] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated 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}
-    />
-  </ContextMenu.Portal>
+  <>
+    <style>{mobilePopperSheetStyle}</style>
+    <ContextMenu.Portal>
+      <ContextMenu.Content
+        ref={ref}
+        data-hilum-mobile-sheet="true"
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
+          mobilePopperSheetPositionClassName,
+          mobilePopperSheetSurfaceClassName,
+          "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+          "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",
+          mobilePopperSheetMotionClassName,
+          "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";
 
@@ -161,18 +175,26 @@ 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] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated 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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className,
-    )}
-    {...props}
-  />
+  <>
+    <style>{mobilePopperSheetStyle}</style>
+    <ContextMenu.SubContent
+      ref={ref}
+      data-hilum-mobile-sheet="true"
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className,
+      )}
+      {...props}
+    />
+  </>
 ));
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 

package/src/components/data-transfer-controls.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { Download, Loader2, MoreHorizontal, Upload } from "lucide-react";
+import { Button } from "./button";
+import { ButtonGroup, ButtonGroupItem } from "./button-group";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { cn } from "../lib/utils";
+
+interface DataTransferScopeOption {
+  value: string;
+  label: string;
+}
+
+interface DataTransferAction {
+  label: string;
+  shortLabel?: string;
+  ariaLabel?: string;
+  icon?: React.ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
+interface DataTransferControlsProps {
+  scopeValue?: string;
+  onScopeChange?: (value: string) => void;
+  scopeOptions?: DataTransferScopeOption[];
+  scopePlaceholder?: string;
+  actions: DataTransferAction[];
+  compact?: boolean;
+  compactLabel?: string;
+  className?: string;
+  selectClassName?: string;
+  actionGroupClassName?: string;
+}
+
+function normalizeIcon(icon: React.ReactNode, fallback: React.ReactNode, loading?: boolean) {
+  if (loading) return <Loader2 className="size-4 animate-spin" aria-hidden="true" />;
+  return icon ?? fallback;
+}
+
+function DataTransferControls({
+  scopeValue,
+  onScopeChange,
+  scopeOptions = [],
+  scopePlaceholder = "Scope",
+  actions,
+  compact = false,
+  compactLabel = "Import and export actions",
+  className,
+  selectClassName,
+  actionGroupClassName,
+}: DataTransferControlsProps) {
+  const hasScope = scopeOptions.length > 0 && scopeValue !== undefined && onScopeChange;
+
+  const renderScopeSelect = () => {
+    if (!hasScope) return null;
+
+    return (
+      <Select value={scopeValue} onValueChange={onScopeChange}>
+        <SelectTrigger
+          aria-label={scopePlaceholder}
+          className={cn("min-h-10 w-full max-w-full bg-background sm:w-[180px]", selectClassName)}
+        >
+          <SelectValue placeholder={scopePlaceholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {scopeOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  };
+
+  const defaultActionIcon = (index: number) =>
+    index === 0 ? (
+      <Upload className="size-4" aria-hidden="true" />
+    ) : (
+      <Download className="size-4" aria-hidden="true" />
+    );
+
+  return (
+    <div
+      className={cn(
+        compact
+          ? "grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2"
+          : "grid w-full min-w-0 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center",
+        className,
+      )}
+    >
+      {renderScopeSelect()}
+
+      {compact ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="size-10"
+              aria-label={compactLabel}
+            >
+              <MoreHorizontal className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            {actions.map((action, index) => {
+              const disabled = Boolean(action.disabled || action.loading);
+
+              return (
+                <DropdownMenuItem
+                  key={`${action.label}-${index}`}
+                  disabled={disabled}
+                  onClick={action.onSelect}
+                >
+                  {normalizeIcon(action.icon, defaultActionIcon(index), action.loading)}
+                  {action.label}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <ButtonGroup className={cn("grid w-full grid-cols-3 sm:inline-flex sm:w-auto", actionGroupClassName)}>
+          {actions.map((action, index) => (
+            <ButtonGroupItem
+              key={`${action.label}-${index}`}
+              className="min-h-10 justify-center px-3 disabled:pointer-events-none disabled:opacity-50"
+              onClick={action.onSelect}
+              disabled={action.disabled || action.loading}
+              aria-label={action.ariaLabel ?? action.label}
+            >
+              {normalizeIcon(action.icon, defaultActionIcon(index), action.loading)}
+              {action.shortLabel ?? action.label}
+            </ButtonGroupItem>
+          ))}
+        </ButtonGroup>
+      )}
+    </div>
+  );
+}
+
+DataTransferControls.displayName = "DataTransferControls";
+
+export { DataTransferControls };
+export type { DataTransferAction, DataTransferControlsProps, DataTransferScopeOption };

package/src/components/dialog.tsx

@@ -4,6 +4,11 @@ import * as React from "react";
 import { Dialog } from "radix-ui";
 import { X } from "lucide-react";
 import { cn } from "../lib/utils";
+import {
+  desktopDialogContentClassName,
+  dialogSheetMotionClassName,
+  mobileDialogSheetContentClassName,
+} from "../lib/mobile-popper-sheet";
 
 const DialogRoot = Dialog.Root;
 const DialogTrigger = Dialog.Trigger;
@@ -35,11 +40,10 @@ const DialogContent = React.forwardRef<
     <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-card 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",
+        mobileDialogSheetContentClassName,
+        desktopDialogContentClassName,
+        "sm:max-w-lg",
+        dialogSheetMotionClassName,
         className,
       )}
       {...props}
@@ -60,7 +64,16 @@ function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 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} />;
+  return (
+    <div
+      className={cn(
+        "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
+        "[&>*]:w-full sm:[&>*]:w-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 DialogFooter.displayName = "DialogFooter";