@hilum/ui 3.6.1 → 3.6.3

package/package.json

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

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/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

@@ -98,7 +98,9 @@ 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";
 export * from "./components/table";
 export * from "./components/tabs";