@hilum/ui 3.6.2 → 3.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.6.2",
+  "version": "3.6.4",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

package/src/components/combobox.tsx

@@ -181,21 +181,21 @@ function Combobox({
           <button
             type="button"
             aria-label="Close options"
-            className="fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-sm:block"
+            className="fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-md: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",
+              "max-md:fixed max-md:inset-x-3 max-md:bottom-3 max-md:[bottom:max(0.75rem,env(safe-area-inset-bottom))] max-md:top-auto max-md:mt-0 max-md:w-auto",
+              "max-md:max-h-[min(70dvh,28rem)] max-md:rounded-2xl max-md:p-2 max-md:pt-5",
+              "max-md:before:absolute max-md:before:left-1/2 max-md:before:top-2 max-md:before:h-1 max-md:before:w-9 max-md:before:-translate-x-1/2 max-md:before:rounded-full max-md: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)]"
+              className="max-h-60 overflow-auto py-1 max-md:max-h-[calc(min(70dvh,28rem)-3rem)]"
             >
               {filtered.length === 0 ? (
                 <li className="px-3 py-2 body text-muted-foreground">{emptyText}</li>

package/src/components/context-menu.tsx

@@ -32,7 +32,7 @@ const ContextMenuContent = React.forwardRef<
           "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",
+          "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md: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",
@@ -184,7 +184,7 @@ const ContextMenuSubContent = React.forwardRef<
         "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",
+        "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md: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",

package/src/components/dropdown-menu.tsx

@@ -39,7 +39,7 @@ const DropdownMenuContent = React.forwardRef<
           "z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
-          "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+          "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md: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",
@@ -193,7 +193,7 @@ const DropdownMenuSubContent = React.forwardRef<
         "z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
         mobilePopperSheetPositionClassName,
         mobilePopperSheetSurfaceClassName,
-        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md: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",

package/src/components/menubar.tsx

@@ -69,7 +69,7 @@ const MenubarContent = React.forwardRef<
           "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",
+          "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md: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",
@@ -214,7 +214,7 @@ const MenubarSubContent = React.forwardRef<
         "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",
+        "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md: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",

package/src/components/popover.tsx

@@ -32,7 +32,7 @@ const PopoverContent = React.forwardRef<
           motionClasses,
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
-          "max-sm:overflow-y-auto max-sm:px-4 max-sm:pb-4 max-sm:pt-6",
+          "max-md:overflow-y-auto max-md:px-4 max-md:pb-4 max-md: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",

package/src/components/select.tsx

@@ -448,7 +448,7 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
               }}
               onKeyDown={handleKeyDown}
               className={cn(
-                `relative flex flex-col gap-0.5 max-h-[300px] overflow-y-auto ${shape.container} p-1 select-none outline-none max-sm:!fixed max-sm:rounded-2xl max-sm:data-[state=open]:slide-in-from-bottom`,
+                `relative flex flex-col gap-0.5 max-h-[300px] overflow-y-auto ${shape.container} p-1 select-none outline-none max-md:!fixed max-md:rounded-2xl max-md:data-[state=open]:slide-in-from-bottom`,
                 className,
               )}
             >

package/src/components/status-tile.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { StatusBadge, type StatusBadgeVariant } from "./status-badge";
+
+interface StatusTileGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: 2 | 3 | 4;
+}
+
+interface StatusTileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+  status: string;
+  description?: React.ReactNode;
+  meta?: React.ReactNode;
+  icon?: React.ComponentType<{ className?: string }>;
+  labelMap?: Record<string, React.ReactNode>;
+  variantMap?: Record<string, StatusBadgeVariant>;
+  iconMap?: Record<string, React.ComponentType<{ className?: string }>>;
+}
+
+const columnClassName: Record<NonNullable<StatusTileGridProps["columns"]>, string> = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-2 xl:grid-cols-3",
+  4: "md:grid-cols-2 xl:grid-cols-4",
+};
+
+function StatusTileGrid({ columns = 3, className, ...props }: StatusTileGridProps) {
+  return (
+    <div
+      data-slot="status-tile-grid"
+      className={cn(
+        "divide-y divide-border md:grid md:gap-4 md:divide-y-0",
+        columnClassName[columns],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function StatusTile({
+  title,
+  status,
+  description,
+  meta,
+  icon: Icon,
+  labelMap,
+  variantMap,
+  iconMap,
+  className,
+  ...props
+}: StatusTileProps) {
+  return (
+    <div
+      data-slot="status-tile"
+      className={cn(
+        "min-w-0 py-4 md:rounded-lg md:border md:border-border md:bg-background md:p-4 md:shadow-natural",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex min-w-0 items-start justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          {Icon ? <Icon className="size-4 shrink-0 text-muted-foreground" /> : null}
+          <h3 className="body min-w-0 truncate font-medium text-foreground">{title}</h3>
+        </div>
+        <StatusBadge
+          status={status}
+          {...(labelMap ? { labelMap } : {})}
+          {...(variantMap ? { variantMap } : {})}
+          {...(iconMap ? { iconMap } : {})}
+          className="shrink-0"
+        />
+      </div>
+      {description ? (
+        <p className="body-sm mt-3 text-muted-foreground">{description}</p>
+      ) : null}
+      {meta ? <div className="mt-3 min-w-0 text-muted-foreground">{meta}</div> : null}
+    </div>
+  );
+}
+
+StatusTileGrid.displayName = "StatusTileGrid";
+StatusTile.displayName = "StatusTile";
+
+export { StatusTile, StatusTileGrid, type StatusTileProps, type StatusTileGridProps };

package/src/index.ts

@@ -98,6 +98,7 @@ export * from "./components/spinner";
 export * from "./components/stacked-list";
 export * from "./components/stat-card";
 export * from "./components/status-badge";
+export * from "./components/status-tile";
 export * from "./components/steps";
 export * from "./components/summary-tile";
 export * from "./components/switch";

package/src/lib/mobile-popper-sheet.ts

@@ -1,35 +1,35 @@
 export const mobileDialogSheetContentClassName = [
   "fixed inset-x-0 bottom-0 z-50 max-h-[calc(100dvh-1rem)] w-full overflow-y-auto",
   "rounded-t-2xl border border-border bg-card p-6 shadow-elevated",
-  "max-sm:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-sm:pt-8",
-  "max-sm:before:absolute max-sm:before:left-1/2 max-sm:before:top-3 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",
+  "max-md:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-md:pt-8",
+  "max-md:before:absolute max-md:before:left-1/2 max-md:before:top-3 max-md:before:h-1 max-md:before:w-9",
+  "max-md:before:-translate-x-1/2 max-md:before:rounded-full max-md:before:bg-muted-foreground/35",
 ].join(" ");
 
 export const desktopDialogContentClassName =
-  "sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:max-h-[calc(100dvh-2rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl";
+  "md:bottom-auto md:left-1/2 md:top-1/2 md:max-h-[calc(100dvh-2rem)] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-2xl";
 
 export const dialogSheetMotionClassName = [
   "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]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-  "sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95",
+  "md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95",
 ].join(" ");
 
 export const mobilePopperSheetPositionClassName = [
-  "max-sm:!fixed max-sm:!inset-x-3 max-sm:!bottom-3 max-sm:!top-auto max-sm:!left-3 max-sm:!right-3",
-  "max-sm:!w-auto max-sm:!min-w-0 max-sm:!max-w-none max-sm:!transform-none",
+  "max-md:!fixed max-md:!inset-x-3 max-md:!bottom-3 max-md:!top-auto max-md:!left-3 max-md:!right-3",
+  "max-md:!w-auto max-md:!min-w-0 max-md:!max-w-none max-md:!transform-none",
 ].join(" ");
 
 export const mobilePopperSheetSurfaceClassName =
-  "max-sm:max-h-[min(70dvh,28rem)] max-sm:rounded-2xl max-sm:border max-sm:border-border max-sm:shadow-elevated";
+  "max-md:max-h-[min(70dvh,28rem)] max-md:rounded-2xl max-md:border max-md:border-border max-md:shadow-elevated";
 
 export const mobilePopperSheetMotionClassName = [
-  "max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom",
+  "max-md:data-[state=closed]:slide-out-to-bottom max-md:data-[state=open]:slide-in-from-bottom",
 ].join(" ");
 
 export const mobilePopperSheetStyle = `
-@media (max-width: 639px) {
+@media (max-width: 767px) {
   [data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"]) {
     position: fixed !important;
     inset: 0 !important;