@hilum/ui 3.7.0 → 3.7.1

package/package.json

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

package/src/components/searchable-table.tsx

@@ -246,33 +246,34 @@ function SearchableTable<T extends { id: string | number }>({
 
   return (
     <div className="space-y-4">
-      <div className="md:rounded-lg md:border md:border-border md:bg-muted/30 md:p-3">
-        <div className="flex flex-col gap-2.5 md:flex-row md:flex-wrap md:items-center md:justify-start md:gap-3">
-          <InputGroup
-            placeholder={searchPlaceholder}
-            value={searchTerm}
-            onChange={(event) => onSearchChange(event.target.value)}
-            leadingIcon={<Search className="size-4" />}
-            wrapperClassName="w-full min-w-0 md:min-w-[280px] md:max-w-[520px] md:flex-1 md:basis-[340px]"
-            className="h-9 bg-background"
-          />
-          <div className="flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap md:w-auto md:justify-end">
-            {Object.entries(filters).map(([key, filter]) => (
-              <Select key={key} value={filter.value} onValueChange={filter.onChange}>
-                <SelectTrigger className="h-9 w-full bg-background sm:w-[180px]">
-                  <Filter className="mr-2 size-4" />
-                  <SelectValue placeholder={filter.placeholder} />
-                </SelectTrigger>
-                <SelectContent>
-                  {filter.options.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            ))}
-          </div>
+      <div
+        data-slot="searchable-table-toolbar"
+        className="flex flex-col gap-2.5 md:flex-row md:flex-wrap md:items-center md:justify-start md:gap-3"
+      >
+        <InputGroup
+          placeholder={searchPlaceholder}
+          value={searchTerm}
+          onChange={(event) => onSearchChange(event.target.value)}
+          leadingIcon={<Search className="size-4" />}
+          wrapperClassName="w-full min-w-0 md:min-w-[280px] md:max-w-[520px] md:flex-1 md:basis-[340px]"
+          className="h-9 bg-background"
+        />
+        <div className="flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap md:w-auto md:justify-end">
+          {Object.entries(filters).map(([key, filter]) => (
+            <Select key={key} value={filter.value} onValueChange={filter.onChange}>
+              <SelectTrigger className="h-9 w-full bg-background sm:w-[180px]">
+                <Filter className="mr-2 size-4" />
+                <SelectValue placeholder={filter.placeholder} />
+              </SelectTrigger>
+              <SelectContent>
+                {filter.options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ))}
         </div>
       </div>
 

package/src/components/titled-card.tsx

@@ -40,6 +40,7 @@ function TitledCard({
   titleClassName,
 }: TitledCardProps) {
   const hasHeader = Boolean(title || subtitle || actionButtons);
+  const hasContent = Boolean(children);
   const canUseCardHeading = Boolean(title) && !actionButtons && !titleClassName;
   const contentPaddingClassName =
     contentPadding === "flush"
@@ -54,18 +55,17 @@ function TitledCard({
   return (
     <Card
       mobileSurface={mobileSurface}
-      className={cn(
-        "min-w-0 overflow-hidden border border-border bg-card shadow-natural",
-        containerClassName,
-        className,
-      )}
+      className={cn("min-w-0 overflow-hidden", containerClassName, className)}
       data-slot="titled-card"
     >
       {canUseCardHeading ? (
         <CardHeading
           title={title!}
           {...(subtitle ? { description: subtitle } : {})}
-          className={cn(isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3")}
+          className={cn(
+            !hasContent && "border-b-0",
+            isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3",
+          )}
         >
           {Icon && <Icon className="size-5 shrink-0 text-muted-foreground" />}
         </CardHeading>
@@ -73,6 +73,7 @@ function TitledCard({
         <CardHeader
           className={cn(
             "flex flex-col gap-3 border-b border-border p-4 sm:flex-row sm:items-start sm:justify-between sm:p-5",
+            !hasContent && "border-b-0",
             isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3",
           )}
         >