@arbidocs/blocks 0.3.179 → 0.3.181

package/dist/index.d.cts

@@ -593,6 +593,20 @@ interface EntityIdentityField {
      * value run the full width, which is what a description wants.
      */
     trailing?: ReactNode;
+    /**
+     * Content rendered immediately BEFORE the value — the entity's own mark.
+     * Sits outside the edit swap, so starting to edit the name doesn't make the
+     * icon jump or disappear.
+     */
+    leading?: ReactNode;
+    /**
+     * Drops the caption from view for this row, leaving the value flush left.
+     * For a field whose value already says what it is — a workspace's name and
+     * description read as exactly that — the caption is a word the eye has to
+     * step over on the way in. The caption stays in the markup for screen
+     * readers, which have no such visual cue to fall back on.
+     */
+    hideLabel?: boolean;
     /** Row test id; the pencil and input derive `-edit` and `-input`. */
     testId?: string;
 }

package/dist/index.d.ts

@@ -593,6 +593,20 @@ interface EntityIdentityField {
      * value run the full width, which is what a description wants.
      */
     trailing?: ReactNode;
+    /**
+     * Content rendered immediately BEFORE the value — the entity's own mark.
+     * Sits outside the edit swap, so starting to edit the name doesn't make the
+     * icon jump or disappear.
+     */
+    leading?: ReactNode;
+    /**
+     * Drops the caption from view for this row, leaving the value flush left.
+     * For a field whose value already says what it is — a workspace's name and
+     * description read as exactly that — the caption is a word the eye has to
+     * step over on the way in. The caption stays in the markup for screen
+     * readers, which have no such visual cue to fall back on.
+     */
+    hideLabel?: boolean;
     /** Row test id; the pencil and input derive `-edit` and `-input`. */
     testId?: string;
 }

package/dist/index.js

@@ -1297,6 +1297,8 @@ function IdentityFieldRow({ field, canEdit }) {
     multiline = false,
     maxLength,
     valueClassName,
+    leading,
+    hideLabel,
     trailing,
     testId
   } = field;
@@ -1340,8 +1342,7 @@ function IdentityFieldRow({ field, canEdit }) {
       "dt",
       {
         className: cn(
-          "w-24 shrink-0 text-sm font-medium text-muted-foreground",
-          multiline && "pt-1"
+          hideLabel ? "sr-only" : cn("w-24 shrink-0 text-sm font-medium text-muted-foreground", multiline && "pt-1")
         ),
         children: [
           label,
@@ -1350,6 +1351,7 @@ function IdentityFieldRow({ field, canEdit }) {
       }
     ),
     /* @__PURE__ */ jsxs("dd", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      leading,
       isEditing ? /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
         multiline ? /* @__PURE__ */ jsx(
           Textarea,
@@ -1524,7 +1526,7 @@ function RecentActivityCard({
       ),
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 pt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-1 border-b border-border/60 px-2 pb-2 pt-2", children: [
           /* @__PURE__ */ jsxs(
             "button",
             {
@@ -1579,7 +1581,7 @@ function RecentActivityCard({
           /* @__PURE__ */ jsx(
             "p",
             {
-              className: "mt-1 px-4 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
+              className: "mt-1 px-4 pb-1 text-right text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
               "data-testid": testId && `${testId}-caption`,
               children: caption
             }
@@ -1793,15 +1795,19 @@ function QuickActionCards({
           title: item.disabled ? item.disabledReason : void 0,
           "aria-describedby": void 0,
           className: cn(
-            "group flex h-full items-start gap-3 rounded-2xl border border-border/70 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.
             "[&:hover]:border-theme-cyan/50 [&:hover]:bg-theme-cyan/5",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-theme-cyan focus-visible:ring-offset-2",
             "disabled:cursor-default disabled:opacity-55",
-            "disabled:[&:hover]:border-border/70 disabled:[&:hover]:bg-card"
+            "disabled:[&:hover]:border-border disabled:[&:hover]:bg-card"
           ),
           "data-testid": item.testId,
           children: [
@@ -1843,10 +1849,17 @@ function SectionStrip({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("rounded-xl border border-border/60 bg-card p-2 shadow-sm", className),
+      className: cn(
+        // `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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-1 border-b border-border/60 px-2 pb-2 pt-2", children: [
           /* @__PURE__ */ jsxs(
             "button",
             {
@@ -1890,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__ */ 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__ */ jsx(empty.icon, { className: "size-5" }) }),
@@ -1904,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__ */ jsx(Plus, { className: "size-3.5 shrink-0" }),
               empty.label
             ]
           }
-        ) : null : /* @__PURE__ */ jsx("div", { className: "grid gap-x-4 @2xl:grid-cols-2", children: filledGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "mt-1 px-2 pb-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: group.caption }),
-          /* @__PURE__ */ jsx("ul", { children: group.rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground group-hover:text-primary", children: row.title }),
-                row.meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: row.meta })
-              ]
-            }
-          ) }, row.id)) })
-        ] }, group.caption)) })
+        ) : null : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-x-4 pb-2",
+            children: filledGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ 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__ */ jsx("ul", { children: group.rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground group-hover:text-primary", children: row.title }),
+                    row.meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: row.meta })
+                  ]
+                }
+              ) }, row.id)) })
+            ] }, group.caption))
+          }
+        )
       ]
     }
   );