@hilum/ui 3.6.1 → 3.6.2

package/package.json

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

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";