@hilum/ui 3.6.0 → 3.6.2

package/package.json

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

package/src/components/dialog.tsx

@@ -17,6 +17,11 @@ import { spring } from "../lib/springs";
 import { useShape } from "../lib/shape-context";
 import { SurfaceProvider, useSurface } from "../lib/surface-context";
 import { surfaceClasses } from "../lib/surface-classes";
+import {
+  desktopDialogContentClassName,
+  dialogSheetMotionClassName,
+  mobileDialogSheetContentClassName,
+} from "../lib/mobile-popper-sheet";
 import { Button } from "./button";
 
 const DIALOG_OFFSET = 4;
@@ -75,6 +80,15 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
 
     if (!mounted) return null;
 
+    const sizeClassName =
+      size === "sm"
+        ? container
+          ? "max-w-[400px]"
+          : "sm:max-w-[400px]"
+        : container
+          ? "max-w-[540px]"
+          : "sm:max-w-[540px]";
+
     return (
       <DialogPrimitive.Portal forceMount container={container ?? undefined}>
         <DialogPrimitive.Overlay asChild forceMount>
@@ -91,24 +105,31 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
         <DialogPrimitive.Content ref={ref} asChild forceMount {...props}>
           <motion.div
             className={cn(
-              container ? "absolute" : "fixed",
-              "left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]",
+              container
+                ? "absolute left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]"
+                : [
+                    mobileDialogSheetContentClassName,
+                    desktopDialogContentClassName,
+                    dialogSheetMotionClassName,
+                  ],
               surfaceClasses(dialogLevel),
               "p-6 focus:outline-none",
-              "rounded-t-2xl max-sm:pb-[calc(1.5rem+env(safe-area-inset-bottom))] data-[state=open]:slide-in-from-bottom sm:data-[state=open]:zoom-in-95",
-              size === "sm" && "max-w-[400px]",
-              size === "lg" && "max-w-[540px]",
+              sizeClassName,
               shape.container,
               "rounded-t-2xl",
               className,
             )}
-            initial={{ opacity: 0, scale: 0.97, x: "-50%", y: "-50%" }}
-            animate={{
-              opacity: open ? 1 : 0,
-              scale: open ? 1 : 0.97,
-              x: "-50%",
-              y: "-50%",
-            }}
+            initial={container ? { opacity: 0, scale: 0.97, x: "-50%", y: "-50%" } : { opacity: 0 }}
+            animate={
+              container
+                ? {
+                    opacity: open ? 1 : 0,
+                    scale: open ? 1 : 0.97,
+                    x: "-50%",
+                    y: "-50%",
+                  }
+                : { opacity: open ? 1 : 0 }
+            }
             transition={open ? spring.slow : spring.slow.exit}
             onAnimationComplete={handleExitComplete}
           >

package/src/components/summary-tile.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface SummaryTileGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: 2 | 3 | 4;
+}
+
+interface SummaryTileProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  value: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+const columnClassName: Record<NonNullable<SummaryTileGridProps["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 SummaryTileGrid({ columns = 3, className, ...props }: SummaryTileGridProps) {
+  return (
+    <div
+      data-slot="summary-tile-grid"
+      className={cn(
+        "divide-y divide-border md:grid md:gap-3 md:divide-y-0",
+        columnClassName[columns],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SummaryTile({ title, value, description, className, ...props }: SummaryTileProps) {
+  return (
+    <div
+      data-slot="summary-tile"
+      className={cn(
+        "min-w-0 py-4 md:rounded-lg md:border md:border-border md:bg-card md:p-4",
+        className,
+      )}
+      {...props}
+    >
+      <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{title}</p>
+      <p className="mt-2 text-xl font-semibold text-foreground">{value}</p>
+      {description ? (
+        <p className="mt-1 text-sm leading-5 text-muted-foreground">{description}</p>
+      ) : null}
+    </div>
+  );
+}
+
+SummaryTileGrid.displayName = "SummaryTileGrid";
+SummaryTile.displayName = "SummaryTile";
+
+export { SummaryTile, SummaryTileGrid, type SummaryTileProps, type SummaryTileGridProps };

package/src/components/titled-card.tsx

@@ -2,13 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./card";
 import { CardHeading } from "./card-heading";
 
 interface TitledCardProps {
@@ -17,6 +11,7 @@ interface TitledCardProps {
   children?: React.ReactNode;
   actionButtons?: React.ReactNode;
   icon?: React.ComponentType<{ className?: string }>;
+  contentPadding?: "default" | "flush-mobile" | "flush";
   className?: string;
   contentClassName?: string;
   containerClassName?: string;
@@ -29,6 +24,7 @@ function TitledCard({
   children,
   actionButtons,
   icon: Icon,
+  contentPadding = "default",
   className,
   contentClassName,
   containerClassName,
@@ -36,6 +32,14 @@ function TitledCard({
 }: TitledCardProps) {
   const hasHeader = Boolean(title || subtitle || actionButtons);
   const canUseCardHeading = Boolean(title) && !actionButtons && !titleClassName;
+  const contentPaddingClassName =
+    contentPadding === "flush"
+      ? "p-0"
+      : contentPadding === "flush-mobile"
+        ? "p-0 sm:p-5"
+        : hasHeader
+          ? "p-4 sm:p-5"
+          : "p-0 sm:p-5";
 
   return (
     <Card
@@ -84,11 +88,7 @@ function TitledCard({
       ) : null}
       {children && (
         <CardContent
-          className={cn(
-            hasHeader ? "p-4 sm:p-5" : "p-0 sm:p-5",
-            "min-w-0 max-sm:px-0",
-            contentClassName,
-          )}
+          className={cn(contentPaddingClassName, "min-w-0 max-sm:px-0", contentClassName)}
         >
           {children}
         </CardContent>

package/src/index.ts

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