@arbidocs/blocks 0.3.180 → 0.3.181

package/dist/index.cjs

@@ -1526,7 +1526,7 @@ function RecentActivityCard({
       ),
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 px-2 pt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center gap-1 border-b border-border/60 px-2 pb-2 pt-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -1795,8 +1795,12 @@ function QuickActionCards({
           title: item.disabled ? item.disabledReason : void 0,
           "aria-describedby": void 0,
           className: react.cn(
-            "group flex h-full items-start gap-3 rounded-2xl border-2 border-border bg-card p-4 text-left",
-            "transition-colors",
+            "group flex h-full items-start gap-3 rounded-2xl border border-border bg-card p-4 text-left",
+            // A soft lift instead of a heavy outline: the shadow separates the
+            // tile from the page, and deepens on hover so the card reads as
+            // liftable rather than merely tinted.
+            "shadow-sm [&:hover]:shadow-md",
+            "transition-[color,background-color,border-color,box-shadow]",
             // `[&:hover]` rather than `hover:` — Tailwind v4 wraps the hover
             // variant in @media (hover: hover), so on a touchscreen the
             // affordance would never appear at all.
@@ -1846,12 +1850,16 @@ function SectionStrip({
     "div",
     {
       className: react.cn(
-        "@container rounded-xl border border-border/60 bg-card p-2 shadow-sm",
+        // `p-0`, with the padding pushed onto the children — the same box
+        // model the activity cards use. It is what lets a row's meta (the
+        // date) sit on the card's own right inset, so the Facts dates line up
+        // with the Files ones instead of 8px short of them.
+        "@container rounded-xl border border-border/60 bg-card p-0 shadow-sm",
         className
       ),
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center gap-1 border-b border-border/60 px-2 pb-2 pt-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -1895,7 +1903,7 @@ function SectionStrip({
             {
               type: "button",
               onClick: empty.onClick,
-              className: "group mt-2 flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-4 py-8 text-center transition-colors hover:border-border hover:bg-accent/50 focus-visible:border-border focus-visible:bg-accent/50 focus-visible:outline-none",
+              className: "group m-2 flex w-[calc(100%-1rem)] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-4 py-8 text-center transition-colors hover:border-border hover:bg-accent/50 focus-visible:border-border focus-visible:bg-accent/50 focus-visible:outline-none",
               "data-testid": empty.testId,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(empty.icon, { className: "size-5" }) }),
@@ -1909,31 +1917,37 @@ function SectionStrip({
           {
             type: "button",
             onClick: empty.onClick,
-            className: "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-primary/5 hover:text-foreground",
+            className: "m-2 flex items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-primary/5 hover:text-foreground",
             "data-testid": empty.testId,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-3.5 shrink-0" }),
               empty.label
             ]
           }
-        ) : null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-x-4 @2xl:grid-cols-2", children: filledGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 px-2 pb-0.5 text-right text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: group.caption }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { children: group.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: row.onClick,
-              title: row.title,
-              className: "group flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors [&:hover]:bg-primary/10",
-              "data-testid": group.rowTestId ?? (testId && `${testId}-row`),
-              children: [
-                row.leading,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground group-hover:text-primary", children: row.title }),
-                row.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: row.meta })
-              ]
-            }
-          ) }, row.id)) })
-        ] }, group.caption)) })
+        ) : null : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid gap-x-4 pb-2",
+            children: filledGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 px-4 pb-0.5 text-right text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: group.caption }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { children: group.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: row.onClick,
+                  title: row.title,
+                  className: "group flex w-full min-w-0 items-center gap-2 rounded-lg py-1.5 pl-4 pr-2 text-left transition-colors [&:hover]:bg-primary/10",
+                  "data-testid": group.rowTestId ?? (testId && `${testId}-row`),
+                  children: [
+                    row.leading,
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground group-hover:text-primary", children: row.title }),
+                    row.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: row.meta })
+                  ]
+                }
+              ) }, row.id)) })
+            ] }, group.caption))
+          }
+        )
       ]
     }
   );