@flytedan/flytebot-design-system 0.48.0 → 0.48.1

package/dist/index.cjs

@@ -1095,28 +1095,28 @@ function Card({
     interactive ? "fd-card-interactive" : "",
     className
   ].filter(Boolean).join(" ");
-  const head = title ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fd-card-head", children: [
+  const titleOnlyHead = title ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fd-card-head", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
-    action
+    !interactive && action
   ] }) : null;
   const body = padded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fd-card-body", children }) : children;
   const foot = footer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fd-card-foot", children: footer }) : null;
-  if (href != null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("a", { href, onClick, className: cls, role, tabIndex, ...rest, children: [
-      head,
-      body,
-      foot
+  if (interactive) {
+    const inner = href != null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("a", { href, onClick, className: cls, role, tabIndex, ...rest, children: [
+      titleOnlyHead,
+      body
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick, className: cls, role, tabIndex, ...rest, children: [
+      titleOnlyHead,
+      body
     ] });
-  }
-  if (onClick != null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick, className: cls, role, tabIndex, ...rest, children: [
-      head,
-      body,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fd-card-shell", children: [
+      inner,
+      action ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fd-card-shell-action", children: action }) : null,
       foot
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cls, role, tabIndex, ...rest, children: [
-    head,
+    titleOnlyHead,
     body,
     foot
   ] });
@@ -1290,8 +1290,21 @@ function ScreenHead({ kicker, title, lede, actions }) {
 // src/components/layout/CardGrid.tsx
 var React8 = __toESM(require("react"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function flattenFragments(children) {
+  const out = [];
+  React8.Children.forEach(children, (child) => {
+    if (child === null || child === void 0 || typeof child === "boolean") return;
+    if (React8.isValidElement(child) && child.type === React8.Fragment) {
+      const fragmentChildren = child.props.children;
+      out.push(...flattenFragments(fragmentChildren));
+      return;
+    }
+    out.push(child);
+  });
+  return out;
+}
 function CardGrid({ children, minCardWidth = 280, gap = "lg", className = "", style }) {
-  const items = React8.Children.toArray(children);
+  const items = flattenFragments(children);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
@@ -1299,10 +1312,12 @@ function CardGrid({ children, minCardWidth = 280, gap = "lg", className = "", st
       className: ["fd-card-grid", "fd-gap-" + gap, className].filter(Boolean).join(" "),
       style: { ["--card-grid-min"]: minCardWidth + "px", ...style },
       children: items.map((child, i) => {
-        if (!React8.isValidElement(child)) return child;
-        const existingProps = child.props;
-        if (existingProps.role) return child;
-        return React8.cloneElement(child, { role: "listitem", key: child.key ?? i });
+        if (React8.isValidElement(child)) {
+          const existingRole = child.props.role;
+          if (existingRole) return child;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "listitem", children: child }, child.key ?? i);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "listitem", children: child }, i);
       })
     }
   );