@alfadocs/ui-kit 0.31.7 → 0.32.0

package/dist/_chunks/{key-value-pair-CYE7NSpM.js → key-value-pair-CkQIb9EG.js}

@@ -26,65 +26,72 @@ const B = P("ds:flex", {
   }
 }), _ = g(
   ({
-    label: t,
-    value: s,
-    layout: e = "horizontal",
+    label: o,
+    value: e,
+    layout: s = "horizontal",
     mono: r = !1,
     copyable: l = !1,
     copyText: v,
     icon: d,
     className: h,
-    ...x
-  }, k) => {
-    const { t: o } = I(), [C, p] = y(!1), [N, n] = y(""), c = v ?? (typeof s == "string" ? s : void 0), w = z(async () => {
+    ...k
+  }, x) => {
+    const { t: n } = I(), [C, m] = y(!1), [N, t] = y(""), c = v ?? (typeof e == "string" ? e : void 0), V = z(async () => {
       if (c)
         try {
-          await navigator.clipboard.writeText(c), p(!0), n(o("keyValuePair.copied")), setTimeout(() => {
-            p(!1), n("");
+          await navigator.clipboard.writeText(c), m(!0), t(n("keyValuePair.copied")), setTimeout(() => {
+            m(!1), t("");
           }, 2e3);
         } catch {
-          n(o("keyValuePair.notAvailable")), setTimeout(() => n(""), 3e3);
+          t(n("keyValuePair.notAvailable")), setTimeout(() => t(""), 3e3);
         }
-    }, [c, o]), V = [
+    }, [c, n]), b = [
       "type-body ds:text-foreground ds:min-w-0 ds:shrink ds:[unicode-bidi:isolate]",
+      // `flex-1` lets the value absorb the remaining inline space
+      // when the KVP root flexes the icon / label / value as direct
+      // siblings (`hasIcon && layout === 'horizontal'`). Without it,
+      // the value would shrink to its content width and the row
+      // would leave inline-end whitespace. Vertical layout doesn't
+      // need it because the value is below the label, not beside it.
+      s === "horizontal" ? "ds:flex-1" : "",
       r ? "ds:font-[family-name:var(--font-mono)]" : ""
-    ].filter(Boolean).join(" "), m = d != null, b = e === "horizontal" ? "ds:flex ds:flex-row ds:items-start ds:gap-[var(--spacing-sm)] ds:min-w-0 ds:flex-1" : "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:min-w-0 ds:flex-1", u = /* @__PURE__ */ i(f, { children: [
+    ].filter(Boolean).join(" "), u = d != null, w = "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:min-w-0 ds:flex-1", p = /* @__PURE__ */ i(f, { children: [
       /* @__PURE__ */ i("span", { className: "type-label ds:text-muted-foreground ds:shrink-0", children: [
-        t,
+        o,
         /* @__PURE__ */ a("span", { className: "ds:sr-only", children: ": " })
       ] }),
-      /* @__PURE__ */ a("span", { className: V, children: s }),
+      /* @__PURE__ */ a("span", { className: b, children: e }),
       l && /* @__PURE__ */ a(
         K,
         {
           icon: C ? /* @__PURE__ */ a(T, {}) : /* @__PURE__ */ a(j, {}),
           size: "sm",
-          "aria-label": o("keyValuePair.copy", { label: t }),
-          onClick: w,
+          "aria-label": n("keyValuePair.copy", { label: o }),
+          onClick: V,
           intent: "ghost",
-          className: e === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
+          className: s === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
         }
       )
     ] });
     return /* @__PURE__ */ i(
       "div",
       {
-        ref: k,
-        className: B({ layout: e, hasIcon: m, className: h }),
+        ref: x,
+        className: B({ layout: s, hasIcon: u, className: h }),
         "data-component": "key-value-pair",
-        ...x,
+        ...k,
         children: [
-          m ? /* @__PURE__ */ i(f, { children: [
+          u ? /* @__PURE__ */ i(f, { children: [
             /* @__PURE__ */ a(
               "span",
               {
                 "aria-hidden": "true",
-                className: "ds:inline-flex ds:shrink-0 ds:mt-0.5 ds:text-[color:var(--key-value-pair-icon-color)] ds:[&_svg]:size-4",
+                className: "ds:inline-flex ds:shrink-0 ds:translate-y-0.5 ds:text-[color:var(--key-value-pair-icon-color)] ds:[&_svg]:size-4",
                 children: d
               }
             ),
-            /* @__PURE__ */ a("div", { className: b, children: u })
-          ] }) : u,
+            s === "horizontal" ? p : /* @__PURE__ */ a("div", { className: w, children: p })
+          ] }) : p,
           /* @__PURE__ */ a("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: N })
         ]
       }
@@ -97,7 +104,7 @@ const A = {
   md: "ds:gap-y-[var(--spacing-md)]",
   lg: "ds:gap-y-[var(--spacing-lg)]"
 }, L = g(
-  ({ children: t, className: s, rowGap: e = "md", ...r }, l) => /* @__PURE__ */ a(
+  ({ children: o, className: e, rowGap: s = "md", ...r }, l) => /* @__PURE__ */ a(
     "div",
     {
       ref: l,
@@ -105,7 +112,7 @@ const A = {
       className: [
         "ds:grid ds:grid-cols-[auto_auto_minmax(0,1fr)]",
         "ds:gap-x-[var(--spacing-md)]",
-        A[e],
+        A[s],
         // Each direct `data-component="key-value-pair"` child becomes
         // a subgrid row spanning all three columns. The KVP's own
         // flex layout still works inside the cell (icon shrinks-0,
@@ -115,14 +122,17 @@ const A = {
         'ds:[&>[data-component="key-value-pair"]]:grid-cols-subgrid',
         'ds:[&>[data-component="key-value-pair"]]:col-span-3',
         'ds:[&>[data-component="key-value-pair"]]:items-baseline',
-        // Reset the per-row flex gap so the subgrid columns own the
-        // spacing. Without this the KVP's intra-row `gap-sm` would
-        // double the parent's `gap-x-md`.
-        'ds:[&>[data-component="key-value-pair"]]:gap-0',
-        s
+        // Unset the KVP's intra-row `gap-sm` so the subgrid inherits
+        // the parent KeyValueList's `gap-x-md` for every track gap
+        // (icon→label and label→value). `gap-0` here would override
+        // the parent's gap and crowd the icon against the label;
+        // `[gap:normal]` is the subgrid-spec way to defer to the
+        // parent.
+        'ds:[&>[data-component="key-value-pair"]]:[gap:normal]',
+        e
       ].filter(Boolean).join(" "),
       ...r,
-      children: t
+      children: o
     }
   )
 );
@@ -131,4 +141,4 @@ export {
   L as K,
   _ as a
 };
-//# sourceMappingURL=key-value-pair-CYE7NSpM.js.map
+//# sourceMappingURL=key-value-pair-CkQIb9EG.js.map