@hilum/ui 3.7.0 → 3.7.1

package/dist/index.js

@@ -13826,26 +13826,33 @@ function SearchableTable({
     ] }) }) });
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "md:rounded-lg md:border md:border-border md:bg-muted/30 md:p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 md:flex-row md:flex-wrap md:items-center md:justify-start md:gap-3", children: [
-      /* @__PURE__ */ jsx(
-        InputGroup,
-        {
-          placeholder: searchPlaceholder,
-          value: searchTerm,
-          onChange: (event) => onSearchChange(event.target.value),
-          leadingIcon: /* @__PURE__ */ jsx(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"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap md:w-auto md:justify-end", children: Object.entries(filters).map(([key, filter]) => /* @__PURE__ */ jsxs(Select, { value: filter.value, onValueChange: filter.onChange, children: [
-        /* @__PURE__ */ jsxs(SelectTrigger, { className: "h-9 w-full bg-background sm:w-[180px]", children: [
-          /* @__PURE__ */ jsx(Filter, { className: "mr-2 size-4" }),
-          /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder })
-        ] }),
-        /* @__PURE__ */ jsx(SelectContent, { children: filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
-      ] }, key)) })
-    ] }) }),
+    /* @__PURE__ */ jsxs(
+      "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",
+        children: [
+          /* @__PURE__ */ jsx(
+            InputGroup,
+            {
+              placeholder: searchPlaceholder,
+              value: searchTerm,
+              onChange: (event) => onSearchChange(event.target.value),
+              leadingIcon: /* @__PURE__ */ jsx(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"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap md:w-auto md:justify-end", children: Object.entries(filters).map(([key, filter]) => /* @__PURE__ */ jsxs(Select, { value: filter.value, onValueChange: filter.onChange, children: [
+            /* @__PURE__ */ jsxs(SelectTrigger, { className: "h-9 w-full bg-background sm:w-[180px]", children: [
+              /* @__PURE__ */ jsx(Filter, { className: "mr-2 size-4" }),
+              /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder })
+            ] }),
+            /* @__PURE__ */ jsx(SelectContent, { children: filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          ] }, key)) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(StackedList, { bordered: false, className: "rounded-none bg-transparent md:hidden", children: displayData.length === 0 ? renderEmptyState("px-0 py-9") : displayData.map((item) => {
       if (mobileCard) {
         return /* @__PURE__ */ jsx(StackedListItem, { className: "px-0 py-0", children: mobileCard(item) }, item.id);
@@ -16127,6 +16134,7 @@ function TitledCard({
   titleClassName
 }) {
   const hasHeader = Boolean(title || subtitle || actionButtons);
+  const hasContent = Boolean(children);
   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";
   const isMobileFlat = mobileSurface === "flat" || mobileSurface === "flush";
@@ -16134,11 +16142,7 @@ function TitledCard({
     Card,
     {
       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",
       children: [
         canUseCardHeading ? /* @__PURE__ */ jsx(
@@ -16146,7 +16150,10 @@ function TitledCard({
           {
             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"
+            ),
             children: Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" })
           }
         ) : hasHeader ? /* @__PURE__ */ jsxs(
@@ -16154,6 +16161,7 @@ function TitledCard({
           {
             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"
             ),
             children: [