@arbidocs/blocks 0.4.0 → 0.4.2

package/dist/{chunk-FZQJ2S6P.cjs → chunk-DREI7EQ2.cjs}

@@ -1228,6 +1228,11 @@ function VideoEmbed({
     }
   ) : url ? /* @__PURE__ */ jsxRuntime.jsx("video", { src: url, controls: true, className: "size-full", "data-testid": testId && `${testId}-video` }) : null });
 }
+function initialValues(fields) {
+  const values = {};
+  for (const f of fields) values[f.name] = f.defaultValue ?? "";
+  return values;
+}
 var INPUT_CLASS = "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground outline-none focus:border-primary";
 function ContactForm({
   fields,
@@ -1236,18 +1241,34 @@ function ContactForm({
   onSubmit,
   successMessage = "Thanks \u2014 we\u2019ll be in touch shortly.",
   renderSuccess,
+  resetLabel,
+  onValuesChange,
+  footerSlot,
   testId,
   testIds
 }) {
   const [sentValues, setSentValues] = react.useState(null);
   const [isSending, setIsSending] = react.useState(false);
   const list = fields ?? [];
+  const [liveValues, setLiveValues] = react.useState(() => initialValues(list));
   const ids = {
     form: testIds?.form ?? testId,
     success: testIds?.success ?? (testId ? `${testId}-success` : void 0),
     submit: testIds?.submit ?? (testId ? `${testId}-submit` : void 0),
     field: (name) => testIds?.field?.(name) ?? (testId ? `${testId}-field-${name}` : void 0)
   };
+  const reset = () => {
+    setLiveValues(initialValues(list));
+    setSentValues(null);
+  };
+  const handleChange = (e) => {
+    const values = { ...initialValues(list) };
+    new FormData(e.currentTarget).forEach((v, k) => {
+      if (typeof v === "string") values[k] = v;
+    });
+    setLiveValues(values);
+    onValuesChange?.(values);
+  };
   const handleSubmit = async (e) => {
     if (action && !onSubmit) return;
     e.preventDefault();
@@ -1268,13 +1289,16 @@ function ContactForm({
     setSentValues(values);
   };
   if (sentValues) {
-    return renderSuccess ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": ids.success, children: renderSuccess(sentValues) }) : /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
+    return renderSuccess ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": ids.success, children: renderSuccess(sentValues, reset) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
         className: "rounded-lg border border-border bg-muted p-6 text-center text-sm text-foreground",
         role: "status",
         "data-testid": ids.success,
-        children: successMessage
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }),
+          resetLabel && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "outline", className: "mt-4", onClick: reset, children: resetLabel })
+        ]
       }
     );
   }
@@ -1284,6 +1308,7 @@ function ContactForm({
       action,
       method: action && !onSubmit ? "post" : void 0,
       onSubmit: handleSubmit,
+      onChange: handleChange,
       className: "mx-auto flex max-w-xl flex-col gap-4",
       "data-testid": ids.form,
       children: [
@@ -1326,6 +1351,7 @@ function ContactForm({
             }
           )
         ] }, i)),
+        typeof footerSlot === "function" ? footerSlot(liveValues) : footerSlot,
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
@@ -1396,41 +1422,175 @@ function MediaText({
     copy
   ] }) });
 }
+var TONES = {
+  default: {
+    text: "text-foreground",
+    muted: "text-muted-foreground",
+    subtle: "text-muted-foreground",
+    accent: "text-primary",
+    hairline: "border-border",
+    panel: "border-border bg-card text-card-foreground",
+    panelHover: "hover:border-primary/45 hover:bg-muted/60",
+    chip: "border-border text-muted-foreground",
+    tile: "border-primary/30 text-primary"
+  },
+  inverse: {
+    text: "text-background",
+    muted: "text-background/70",
+    subtle: "text-background/55",
+    accent: "text-primary",
+    hairline: "border-background/15",
+    panel: "border-background/15 bg-background/5 text-background",
+    panelHover: "hover:border-primary/45 hover:bg-background/10",
+    chip: "border-background/20 text-background/65",
+    tile: "border-primary/40 text-primary"
+  }
+};
+var EditorialToneContext = react.createContext("default");
+function useEditorialTone(override) {
+  const inherited = react.useContext(EditorialToneContext);
+  const tone = override ?? inherited;
+  return { tone, ...TONES[tone] };
+}
+function formatIndex(index) {
+  return typeof index === "number" ? String(index).padStart(2, "0") : index;
+}
+var CLAMP = { 2: "line-clamp-2", 3: "line-clamp-3", 4: "line-clamp-4" };
+function ProfileCard({
+  name,
+  role,
+  kicker,
+  bio,
+  avatarUrl,
+  avatar,
+  avatarClassName,
+  meta,
+  href,
+  linkComponent,
+  bioLines = 3,
+  headingLevel = 3,
+  className,
+  testId
+}) {
+  const t = useEditorialTone();
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(BlockLink, { href, linkComponent, className: "group block h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: ui.cn(
+        "flex h-full flex-col rounded-sm border p-6 transition-colors duration-300",
+        t.panel,
+        href && t.panelHover,
+        className
+      ),
+      "data-slot": "profile-card",
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+          avatar ?? /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { className: "size-14 text-sm", children: [
+            avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src: avatarUrl, alt: "" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { className: avatarClassName, children: chunkWJMEXTVD_cjs.initials(name || "?") })
+          ] }),
+          href && /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ArrowUpRight,
+            {
+              "aria-hidden": "true",
+              className: ui.cn("size-4 shrink-0 transition-colors group-hover:text-primary", t.subtle)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { className: ui.cn("mt-5 font-display text-lg font-semibold", t.text), children: name }),
+        role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: ui.cn("text-sm", t.muted), children: role }),
+        kicker && /* @__PURE__ */ jsxRuntime.jsx("p", { className: ui.cn("mt-0.5 text-xs", t.accent), children: kicker }),
+        bio && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: ui.cn(
+              "mt-4 text-sm leading-relaxed",
+              t.muted,
+              bioLines ? CLAMP[bioLines] : void 0
+            ),
+            children: bio
+          }
+        ),
+        meta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto pt-5", children: meta })
+      ]
+    }
+  ) });
+}
 var COLS3 = {
   "2": "sm:grid-cols-2",
   "3": "sm:grid-cols-2 lg:grid-cols-3",
   "4": "sm:grid-cols-2 lg:grid-cols-4"
 };
-function TeamGrid({ members, columns = "3", linkComponent, testId }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("grid gap-6", COLS3[columns] ?? COLS3["3"]), "data-testid": testId, children: (members ?? []).map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    BlockLink,
+function TeamGrid({
+  members,
+  columns = "3",
+  variant = "centered",
+  renderMeta,
+  linkComponent,
+  testId
+}) {
+  const profile = variant === "profile";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      href: m.href,
-      linkComponent,
-      className: ui.cn("block h-full", m.href && "group"),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Card,
-        {
-          variant: "outline",
-          className: ui.cn(
-            "flex h-full flex-col items-center p-6 text-center",
-            m.href && "transition-colors group-hover:border-primary/40"
-          ),
-          "data-testid": testId && `${testId}-item-${i}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { className: "size-20", children: [
-              m.avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src: m.avatarUrl, alt: m.name }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { children: chunkWJMEXTVD_cjs.initials(m.name || "?") })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-base font-semibold tracking-tight", children: m.name }),
-            m.role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary", children: m.role }),
-            m.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: m.bio })
-          ]
+      className: ui.cn("grid", profile ? "gap-4" : "gap-6", COLS3[columns] ?? COLS3["3"]),
+      "data-testid": testId,
+      children: (members ?? []).map((m, i) => {
+        const cardTestId = m.testId ?? (testId ? `${testId}-item-${i}` : void 0);
+        const meta = renderMeta?.(m, i);
+        if (profile) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ProfileCard,
+            {
+              name: m.name,
+              role: m.role,
+              kicker: m.kicker,
+              bio: m.bio,
+              avatarUrl: m.avatarUrl,
+              href: m.href,
+              linkComponent,
+              meta,
+              testId: cardTestId
+            },
+            i
+          );
         }
-      )
-    },
-    i
-  )) });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          BlockLink,
+          {
+            href: m.href,
+            linkComponent,
+            className: ui.cn("block h-full", m.href && "group"),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Card,
+              {
+                variant: "outline",
+                className: ui.cn(
+                  "flex h-full flex-col items-center p-6 text-center",
+                  m.href && "transition-colors group-hover:border-primary/40"
+                ),
+                "data-testid": cardTestId,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { className: "size-20", children: [
+                    m.avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src: m.avatarUrl, alt: m.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { children: chunkWJMEXTVD_cjs.initials(m.name || "?") })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-base font-semibold tracking-tight", children: m.name }),
+                  m.role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary", children: m.role }),
+                  m.kicker && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: m.kicker }),
+                  m.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: m.bio }),
+                  meta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: meta })
+                ]
+              }
+            )
+          },
+          i
+        );
+      })
+    }
+  );
 }
 function Steps({ steps, variant = "numbered", testId }) {
   const list = steps ?? [];
@@ -1495,6 +1655,7 @@ exports.CTABanner = CTABanner;
 exports.Columns = Columns;
 exports.ContactForm = ContactForm;
 exports.Container = Container;
+exports.EditorialToneContext = EditorialToneContext;
 exports.FAQ = FAQ;
 exports.FONT_PAIRINGS = FONT_PAIRINGS;
 exports.FeatureGrid = FeatureGrid;
@@ -1506,6 +1667,7 @@ exports.LogoCloud = LogoCloud;
 exports.MediaText = MediaText;
 exports.Navbar = Navbar;
 exports.PricingTable = PricingTable;
+exports.ProfileCard = ProfileCard;
 exports.RichTextBlock = RichTextBlock;
 exports.SectionHeading = SectionHeading;
 exports.Spacer = Spacer;
@@ -1526,6 +1688,7 @@ exports.clearFontVars = clearFontVars;
 exports.clearThemeVars = clearThemeVars;
 exports.createThemeStore = createThemeStore;
 exports.fontPackages = fontPackages;
+exports.formatIndex = formatIndex;
 exports.getFontPairing = getFontPairing;
 exports.isAssetRef = isAssetRef;
 exports.matchFontPairing = matchFontPairing;
@@ -1534,5 +1697,6 @@ exports.toEmbedUrl = toEmbedUrl;
 exports.toHslTriplet = toHslTriplet;
 exports.useAssetRenderer = useAssetRenderer;
 exports.useAssetResolverActive = useAssetResolverActive;
-//# sourceMappingURL=chunk-FZQJ2S6P.cjs.map
-//# sourceMappingURL=chunk-FZQJ2S6P.cjs.map
+exports.useEditorialTone = useEditorialTone;
+//# sourceMappingURL=chunk-DREI7EQ2.cjs.map
+//# sourceMappingURL=chunk-DREI7EQ2.cjs.map