@hilum/ui 3.2.3 → 3.2.4

package/src/components/dropdown-menu.tsx

@@ -4,6 +4,12 @@ import * as React from "react";
 import { DropdownMenu } 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 DropdownMenuRoot = DropdownMenu.Root;
 const DropdownMenuTrigger = DropdownMenu.Trigger;
@@ -16,22 +22,30 @@ const DropdownMenuContent = React.forwardRef<
   React.ComponentRef<typeof DropdownMenu.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenu.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenu.Portal>
-    <DropdownMenu.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] bg-card 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}
-    />
-  </DropdownMenu.Portal>
+  <>
+    <style>{mobilePopperSheetStyle}</style>
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
+        ref={ref}
+        data-hilum-mobile-sheet="true"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
+          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}
+      />
+    </DropdownMenu.Portal>
+  </>
 ));
 DropdownMenuContent.displayName = "DropdownMenuContent";
 
@@ -162,18 +176,26 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ComponentRef<typeof DropdownMenu.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenu.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenu.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] bg-card rounded-xl border border-border 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}
-  />
+  <>
+    <style>{mobilePopperSheetStyle}</style>
+    <DropdownMenu.SubContent
+      ref={ref}
+      data-hilum-mobile-sheet="true"
+      className={cn(
+        "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
+        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}
+    />
+  </>
 ));
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 

package/src/components/file-dropzone.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import * as React from "react";
+import { File as FileIcon, Upload } from "lucide-react";
+import { Spinner } from "./spinner";
+import { cn } from "../lib/utils";
+
+type FileDropzoneSelectedFile = Pick<File, "name" | "size">;
+
+interface FileDropzoneProps extends Omit<
+  React.HTMLAttributes<HTMLLabelElement>,
+  "children" | "onChange" | "onDrop" | "onDragOver" | "onDragLeave"
+> {
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingText?: React.ReactNode;
+  label?: React.ReactNode;
+  activeLabel?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  selectedFiles?: readonly FileDropzoneSelectedFile[] | null;
+  inputRef?: React.Ref<HTMLInputElement>;
+  inputClassName?: string;
+  inputName?: string;
+  onFilesSelected?: (files: File[]) => void;
+}
+
+function formatFileSize(bytes: number) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+
+  const units = ["B", "KB", "MB", "GB"];
+  const unitIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, unitIndex);
+
+  return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+}
+
+function getFileSummary(files: readonly FileDropzoneSelectedFile[]) {
+  if (files.length === 0) return null;
+  if (files.length === 1) return `${files[0].name} (${formatFileSize(files[0].size)})`;
+  const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+  return `${files.length} files selected (${formatFileSize(totalSize)})`;
+}
+
+function FileDropzone({
+  accept,
+  multiple,
+  disabled,
+  loading,
+  loadingText = "Uploading...",
+  label = "Drag files here or click to upload",
+  activeLabel = "Drop files to upload",
+  description,
+  icon,
+  selectedFiles,
+  inputRef,
+  inputClassName,
+  inputName,
+  onFilesSelected,
+  className,
+  id,
+  tabIndex,
+  onKeyDown,
+  onClick,
+  ...props
+}: FileDropzoneProps) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const inputId = React.useId();
+  const resolvedId = id ?? inputId;
+  const fileSummary = getFileSummary(selectedFiles ?? []);
+  const isUnavailable = Boolean(disabled || loading);
+
+  const emitFiles = React.useCallback(
+    (fileList: FileList | null) => {
+      if (!fileList || isUnavailable) return;
+      onFilesSelected?.(Array.from(fileList));
+    },
+    [isUnavailable, onFilesSelected],
+  );
+
+  return (
+    <label
+      htmlFor={resolvedId}
+      role="button"
+      tabIndex={isUnavailable ? -1 : (tabIndex ?? 0)}
+      aria-disabled={isUnavailable || undefined}
+      data-dragging={isDragging ? "true" : "false"}
+      className={cn(
+        "group flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-card p-6 text-center shadow-natural",
+        "transition-[background-color,border-color,box-shadow,scale] duration-150",
+        "hover:border-brand-primary/50 hover:bg-muted/40 active:scale-[0.96]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "data-[dragging=true]:border-brand-primary data-[dragging=true]:bg-brand-secondary/25",
+        isUnavailable && "pointer-events-none cursor-not-allowed opacity-60 active:scale-100",
+        className,
+      )}
+      onDragOver={(event) => {
+        event.preventDefault();
+        if (!isUnavailable) setIsDragging(true);
+      }}
+      onDragLeave={(event) => {
+        event.preventDefault();
+        setIsDragging(false);
+      }}
+      onDrop={(event) => {
+        event.preventDefault();
+        setIsDragging(false);
+        emitFiles(event.dataTransfer.files);
+      }}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || isUnavailable) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          document.getElementById(resolvedId)?.click();
+        }
+      }}
+      onClick={(event) => {
+        if (isUnavailable) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+      }}
+      {...props}
+    >
+      <input
+        ref={inputRef}
+        id={resolvedId}
+        name={inputName}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={isUnavailable}
+        className={cn("sr-only", inputClassName)}
+        onChange={(event) => emitFiles(event.currentTarget.files)}
+      />
+      <span
+        className={cn(
+          "mb-3 flex size-12 items-center justify-center rounded-xl bg-muted text-muted-foreground",
+          "transition-[background-color,color,scale] duration-150 group-hover:bg-brand-secondary/35 group-hover:text-foreground",
+          "group-data-[dragging=true]:bg-brand-secondary group-data-[dragging=true]:text-foreground",
+        )}
+        aria-hidden="true"
+      >
+        {loading ? <Spinner size="sm" /> : (icon ?? <Upload className="size-5" />)}
+      </span>
+      <span className="body-sm font-medium text-foreground text-balance">
+        {loading ? loadingText : isDragging ? activeLabel : fileSummary ? fileSummary : label}
+      </span>
+      {description && (
+        <span className="caption mt-1 max-w-md text-pretty text-muted-foreground">
+          {description}
+        </span>
+      )}
+      {fileSummary && !loading && (
+        <span className="caption mt-2 inline-flex min-h-7 max-w-full items-center gap-1 rounded-full bg-muted px-2.5 text-muted-foreground">
+          <FileIcon className="size-3.5 shrink-0" aria-hidden="true" />
+          <span className="min-w-0 truncate">{multiple ? "Ready to upload" : "Selected"}</span>
+        </span>
+      )}
+    </label>
+  );
+}
+
+FileDropzone.displayName = "FileDropzone";
+
+export { FileDropzone, formatFileSize };
+export type { FileDropzoneProps, FileDropzoneSelectedFile };

package/src/components/help-tooltip.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import * as React from "react";
+import { CircleHelp } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+interface HelpTooltipProps {
+  text: string;
+  learnMoreUrl?: string;
+  learnMoreURL?: string;
+  placement?: "top" | "right" | "bottom" | "left";
+  className?: string;
+  contentClassName?: string;
+}
+
+function HelpTooltip({
+  text,
+  learnMoreUrl,
+  learnMoreURL,
+  placement = "top",
+  className,
+  contentClassName,
+}: HelpTooltipProps) {
+  const [open, setOpen] = React.useState(false);
+  const rootRef = React.useRef<HTMLSpanElement>(null);
+  const url = learnMoreUrl ?? learnMoreURL;
+  const body = text.length > 120 ? `${text.slice(0, 117)}...` : text;
+
+  React.useEffect(() => {
+    if (!open) return;
+
+    const onPointerDown = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <span ref={rootRef} className={cn("inline-flex align-middle", className)}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                "relative ml-1 inline-flex size-5 items-center justify-center rounded-full text-muted-foreground",
+                "transition-[color,scale] duration-150 hover:text-foreground active:scale-[0.96]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+                "before:absolute before:-inset-2.5 before:content-['']",
+              )}
+              aria-label="Help"
+              onClick={(event) => {
+                event.preventDefault();
+                setOpen((current) => !current);
+              }}
+            >
+              <CircleHelp className="size-4" aria-hidden="true" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent
+            side={placement}
+            collisionPadding={12}
+            className={cn("max-w-xs text-sm", contentClassName)}
+          >
+            <p className="text-pretty">{body}</p>
+            {url && (
+              <a
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1 block text-xs font-medium text-brand-primary underline-offset-4 hover:underline"
+              >
+                Learn more
+              </a>
+            )}
+          </TooltipContent>
+        </span>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+HelpTooltip.displayName = "HelpTooltip";
+
+export { HelpTooltip, type HelpTooltipProps };

package/src/components/media-asset-card.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { File, Image } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface MediaAssetCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: React.ReactNode;
+  src?: string | null;
+  alt?: string;
+  meta?: React.ReactNode;
+  details?: React.ReactNode;
+  actions?: React.ReactNode;
+  selected?: boolean;
+  mediaType?: "image" | "file" | "video" | "unknown";
+  orientation?: "responsive" | "grid" | "list";
+  onSelect?: () => void;
+}
+
+function MediaAssetCard({
+  name,
+  src,
+  alt = "",
+  meta,
+  details,
+  actions,
+  selected,
+  mediaType = src ? "image" : "file",
+  orientation = "responsive",
+  onSelect,
+  className,
+  onClick,
+  ...props
+}: MediaAssetCardProps) {
+  const isInteractive = Boolean(onSelect || onClick);
+  const Wrapper = isInteractive ? "button" : "div";
+  const isList = orientation === "list";
+  const isGrid = orientation === "grid";
+  const showImage = Boolean(src && mediaType === "image");
+
+  const fallbackIcon =
+    mediaType === "image" ? (
+      <Image className="size-6 text-muted-foreground" aria-hidden="true" />
+    ) : (
+      <File className="size-6 text-muted-foreground" aria-hidden="true" />
+    );
+
+  return (
+    <div
+      className={cn(
+        "group min-w-0",
+        isGrid && "overflow-hidden rounded-xl border border-border bg-card shadow-natural",
+        isList && "flex gap-3 border-b border-border py-3 last:border-b-0",
+        orientation === "responsive" &&
+          "flex gap-3 border-b border-border py-3 last:border-b-0 sm:block sm:overflow-hidden sm:rounded-xl sm:border sm:bg-card sm:py-0 sm:shadow-natural",
+        selected && "ring-2 ring-brand-primary/35",
+        className,
+      )}
+      data-slot="media-asset-card"
+      data-selected={selected ? "true" : "false"}
+      {...props}
+    >
+      <Wrapper
+        type={Wrapper === "button" ? "button" : undefined}
+        className={cn(
+          "relative flex shrink-0 items-center justify-center overflow-hidden bg-muted text-left",
+          "transition-[background-color,box-shadow,scale] duration-150",
+          isInteractive &&
+            "cursor-pointer active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+          isList && "size-16 rounded-lg",
+          isGrid && "aspect-square w-full",
+          orientation === "responsive" &&
+            "size-16 rounded-lg sm:aspect-square sm:size-auto sm:w-full sm:rounded-none",
+        )}
+        onClick={(event) => {
+          onClick?.(event as React.MouseEvent<HTMLDivElement>);
+          if (!event.defaultPrevented) onSelect?.();
+        }}
+        aria-label={isInteractive && typeof name === "string" ? name : undefined}
+      >
+        {showImage ? (
+          <img
+            src={src ?? undefined}
+            alt={alt}
+            className="size-full object-cover shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+          />
+        ) : (
+          fallbackIcon
+        )}
+      </Wrapper>
+
+      <div
+        className={cn(
+          "min-w-0 flex-1",
+          isGrid && "p-3",
+          isList && "py-0.5",
+          orientation === "responsive" && "py-0.5 sm:p-3",
+        )}
+      >
+        <div className="flex min-w-0 items-start justify-between gap-2">
+          <div className="min-w-0">
+            <p className="line-clamp-2 break-words text-sm font-medium leading-5 text-foreground sm:truncate">
+              {name}
+            </p>
+            {meta && <p className="caption mt-0.5 truncate text-muted-foreground">{meta}</p>}
+          </div>
+          {actions && <div className="shrink-0">{actions}</div>}
+        </div>
+        {details && <div className="caption mt-2 text-pretty text-muted-foreground">{details}</div>}
+      </div>
+    </div>
+  );
+}
+
+MediaAssetCard.displayName = "MediaAssetCard";
+
+export { MediaAssetCard };
+export type { MediaAssetCardProps };

package/src/components/menubar.tsx

@@ -4,6 +4,12 @@ import * as React from "react";
 import { Menubar } 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 MenubarRoot = React.forwardRef<
   React.ComponentRef<typeof Menubar.Root>,
@@ -50,24 +56,32 @@ const MenubarContent = React.forwardRef<
   React.ComponentRef<typeof Menubar.Content>,
   React.ComponentPropsWithoutRef<typeof Menubar.Content>
 >(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-  <Menubar.Portal>
-    <Menubar.Content
-      ref={ref}
-      align={align}
-      alignOffset={alignOffset}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[12rem] bg-card 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}
-    />
-  </Menubar.Portal>
+  <>
+    <style>{mobilePopperSheetStyle}</style>
+    <Menubar.Portal>
+      <Menubar.Content
+        ref={ref}
+        data-hilum-mobile-sheet="true"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
+          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}
+      />
+    </Menubar.Portal>
+  </>
 ));
 MenubarContent.displayName = "MenubarContent";
 
@@ -191,18 +205,26 @@ const MenubarSubContent = React.forwardRef<
   React.ComponentRef<typeof Menubar.SubContent>,
   React.ComponentPropsWithoutRef<typeof Menubar.SubContent>
 >(({ className, ...props }, ref) => (
-  <Menubar.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] bg-card rounded-xl border border-border 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}
-  />
+  <>
+    <style>{mobilePopperSheetStyle}</style>
+    <Menubar.SubContent
+      ref={ref}
+      data-hilum-mobile-sheet="true"
+      className={cn(
+        "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
+        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}
+    />
+  </>
 ));
 MenubarSubContent.displayName = "MenubarSubContent";
 

package/src/components/popover.tsx

@@ -3,6 +3,12 @@
 import * as React from "react";
 import { Popover } from "radix-ui";
 import { cn } from "../lib/utils";
+import {
+  mobilePopperSheetMotionClassName,
+  mobilePopperSheetPositionClassName,
+  mobilePopperSheetStyle,
+  mobilePopperSheetSurfaceClassName,
+} from "../lib/mobile-popper-sheet";
 
 const PopoverRoot = Popover.Root;
 const PopoverTrigger = Popover.Trigger;
@@ -12,23 +18,31 @@ const PopoverContent = React.forwardRef<
   React.ComponentRef<typeof Popover.Content>,
   React.ComponentPropsWithoutRef<typeof Popover.Content>
 >(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
-  <Popover.Portal>
-    <Popover.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-xl bg-card p-4 shadow-natural 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}
-    />
-  </Popover.Portal>
+  <>
+    <style>{mobilePopperSheetStyle}</style>
+    <Popover.Portal>
+      <Popover.Content
+        ref={ref}
+        data-hilum-mobile-sheet="true"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "relative z-50 w-72 rounded-xl bg-card p-4 shadow-natural outline-none",
+          mobilePopperSheetPositionClassName,
+          mobilePopperSheetSurfaceClassName,
+          "max-sm:overflow-y-auto max-sm:px-4 max-sm:pb-4 max-sm:pt-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",
+          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}
+      />
+    </Popover.Portal>
+  </>
 ));
 PopoverContent.displayName = "PopoverContent";