@hilum/ui 3.6.6 → 3.6.8

package/llms.txt

@@ -5,10 +5,10 @@
 ## Key Facts
 
 - Package name: `@hilum/ui`
-- Package version: 3.5.2
-- Component modules: 100
-- Atom components: 70
-- Molecule components: 30
+- Package version: 3.6.8
+- Component modules: 103
+- Atom components: 72
+- Molecule components: 31
 - Docs site: https://ui.hilum.dev
 - GitHub repository: https://github.com/hilum-labs/hilum-ui
 - Machine-readable docs index: https://ui.hilum.dev/catalog.json
@@ -122,6 +122,7 @@ Primary exports:
 - Kbd (/atoms/kbd/) — Keyboard shortcut display using compact monospaced styling.
 - Label (/atoms/label/) — Accessible form label that associates text with its control.
 - Media Asset Card (/molecules/media-asset-card/) — Selectable media or file card with grid, list, and responsive orientations. Composes: Card · Icon · Image.
+- Media Asset Grid (/molecules/media-asset-grid/) — Responsive media asset container that keeps compact divided rows on mobile and switches to a grid on larger screens. Composes: MediaAssetCard · List.
 - Media Object (/molecules/media-object/) — Layout primitive pairing fixed media with flexible text content. Composes: Avatar · Icon.
 - Menu Item (/atoms/menu-item/) — Reusable command row for menus, lists, and product navigation surfaces.
 - Menubar (/atoms/menubar/) — Horizontal application menu bar with nested dropdown panels.
@@ -155,6 +156,8 @@ Primary exports:
 - Stat Card (/molecules/stat-card/) — Metric display card with label, value, optional trend, and optional icon. Composes: Card · Badge · Icon.
 - Usage Bar (/molecules/usage-bar/) — Compact quota, readiness, and capacity meter with inline and stacked layouts. Composes: Progress.
 - Status Badge (/atoms/status-badge/) — Semantic badge that maps status values to labels, variants, icons, and dots.
+- Status Tile (/atoms/status-tile/) — Compact status tiles for service health, operational states, and responsive mobile panels.
+- Summary Tile (/atoms/summary-tile/) — Compact metric tiles for dense dashboard summaries and responsive mobile panels.
 - Steps (/atoms/steps/) — Multi-step progress indicator with circles, bullets, and progress variants.
 - Switch (/atoms/switch/) — Toggle between two states, on and off.
 - Table (/atoms/table/) — Structured data display with rows and columns.

package/package.json

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

package/src/components/alert-dialog.tsx

@@ -7,6 +7,7 @@ import { focusRingClasses, motionClasses, pressClasses } from "../lib/interactio
 import {
   desktopDialogContentClassName,
   dialogSheetMotionClassName,
+  mobileDialogSheetStyle,
   mobileDialogSheetContentClassName,
 } from "../lib/mobile-popper-sheet";
 
@@ -37,9 +38,11 @@ const AlertDialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialog.Content>
 >(({ className, children, ...props }, ref) => (
   <AlertDialog.Portal>
+    <style>{mobileDialogSheetStyle}</style>
     <AlertDialogOverlay />
     <AlertDialog.Content
       ref={ref}
+      data-hilum-dialog-sheet="true"
       className={cn(
         mobileDialogSheetContentClassName,
         desktopDialogContentClassName,

package/src/components/dialog.tsx

@@ -2,6 +2,7 @@
 
 import {
   createContext,
+  createElement,
   forwardRef,
   useContext,
   useEffect,
@@ -20,6 +21,7 @@ import { surfaceClasses } from "../lib/surface-classes";
 import {
   desktopDialogContentClassName,
   dialogSheetMotionClassName,
+  mobileDialogSheetStyle,
   mobileDialogSheetContentClassName,
 } from "../lib/mobile-popper-sheet";
 import { Button } from "./button";
@@ -91,6 +93,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
 
     return (
       <DialogPrimitive.Portal forceMount container={container ?? undefined}>
+        {!container && <style>{mobileDialogSheetStyle}</style>}
         <DialogPrimitive.Overlay asChild forceMount>
           <motion.div
             className={cn(
@@ -104,6 +107,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
         </DialogPrimitive.Overlay>
         <DialogPrimitive.Content ref={ref} asChild forceMount {...props}>
           <motion.div
+            data-hilum-dialog-sheet={container ? undefined : "true"}
             className={cn(
               container
                 ? "absolute left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]"
@@ -137,7 +141,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
               {children}
               <DialogPrimitive.Close asChild>
                 <Button variant="ghost" size="icon-sm" className="absolute right-3 top-3">
-                  <XIcon />
+                  {createElement(XIcon)}
                   <span className="sr-only">Close</span>
                 </Button>
               </DialogPrimitive.Close>

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

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface MediaAssetGridProps extends React.HTMLAttributes<HTMLUListElement> {
+  columns?: 2 | 3 | 4 | 5;
+  children: React.ReactNode;
+}
+
+const columnClasses: Record<NonNullable<MediaAssetGridProps["columns"]>, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+};
+
+function MediaAssetGrid({ children, columns = 5, className, ...props }: MediaAssetGridProps) {
+  return (
+    <ul
+      role="list"
+      className={cn(
+        "divide-y divide-border border-y border-border",
+        "sm:grid sm:gap-4 sm:divide-y-0 sm:border-y-0",
+        columnClasses[columns],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+}
+
+function MediaAssetGridItem({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) {
+  return <li className={cn("min-w-0", className)} {...props} />;
+}
+
+MediaAssetGrid.displayName = "MediaAssetGrid";
+MediaAssetGridItem.displayName = "MediaAssetGridItem";
+
+export { MediaAssetGrid, MediaAssetGridItem };
+export type { MediaAssetGridProps };

package/src/index.ts

@@ -65,6 +65,7 @@ export * from "./components/input-otp";
 export * from "./components/input";
 export * from "./components/kbd";
 export * from "./components/label";
+export * from "./components/media-asset-grid";
 export * from "./components/media-asset-card";
 export * from "./components/media-object";
 export * from "./components/menu-item";

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

@@ -17,6 +17,24 @@ export const dialogSheetMotionClassName = [
   "lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95",
 ].join(" ");
 
+export const mobileDialogSheetStyle = `
+@media (max-width: 1023px) {
+  [data-hilum-dialog-sheet="true"] {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    width: 100% !important;
+    max-width: none !important;
+    max-height: calc(100dvh - 1rem) !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    transform-origin: bottom center !important;
+  }
+}
+`;
+
 export const mobilePopperSheetPositionClassName = [
   "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",