@alfadocs/ui-kit 1.4.17 → 1.6.0

package/dist/_chunks/practice-profile-hero-Bdd0bFqC.js

@@ -0,0 +1,187 @@
+import { jsxs as s, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as k, useId as C, useMemo as R, useRef as j } from "react";
+import { c as A } from "./index-D2ZczOXr.js";
+import { A as x } from "./avatar-BNQNhoyL.js";
+import { B } from "./badge-sTusUqZD.js";
+import { C as y } from "./card-DPmk26CL.js";
+import { R as z } from "./rating-BYbUowdK.js";
+import { u as I } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as K } from "./registry-DvAUVLHh.js";
+const M = {
+  id: "practice-profile-hero",
+  // Purely observable hero region — no interactive affordances and no
+  // imperative actions on the handle (getName / getHasCover are read-only
+  // projections).
+  capabilities: [],
+  state: {
+    name: {
+      type: "string",
+      descriptionKey: "ui.agent.practiceProfileHero.state.name",
+      description: "Practice display name currently rendered.",
+      read: (r) => r.getName()
+    },
+    hasCover: {
+      type: "boolean",
+      descriptionKey: "ui.agent.practiceProfileHero.state.hasCover",
+      description: "Whether a cover-image strip is rendered. Structural flag only — never the image URL or any PHI.",
+      read: (r) => r.getHasCover()
+    }
+  },
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "practice-profile-hero",
+      description: "Marks the PracticeProfileHero root region."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, V = A("ds:w-full ds:text-[color:var(--foreground)]", {
+  variants: {
+    // Matches the kit's other `surface` props (Booking, ReviewsPanel,
+    // OperatorHero). `'elevated'` wraps in `<Card>`.
+    surface: {
+      flat: "",
+      elevated: ""
+    }
+  },
+  defaultVariants: {
+    surface: "elevated"
+  }
+}), E = k(
+  ({
+    name: r,
+    tagline: c,
+    imageUrl: n,
+    coverImageUrl: t,
+    rating: o,
+    badges: d,
+    actionSlot: p,
+    surface: m = "elevated",
+    "aria-label": f,
+    id: l,
+    className: N,
+    ...P
+  }, H) => {
+    const v = C(), i = !!t, b = R(
+      () => ({ getName: () => r, getHasCover: () => i }),
+      [r, i]
+    );
+    K(M, b, l);
+    const h = j(null);
+    I(() => {
+      const a = h.current;
+      a && (t ? a.style.setProperty(
+        "--practice-profile-hero-cover",
+        `url("${t.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`
+      ) : a.style.removeProperty("--practice-profile-hero-cover"));
+    }, [t]);
+    const u = i ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: h,
+        "aria-hidden": "true",
+        "data-slot": "cover",
+        className: [
+          "ds:h-32 ds:sm:h-40 ds:w-full",
+          // Cover image layered over the brand gradient — the gradient is
+          // the visible underlay while the image streams in (or 404s). The
+          // `none` fallback keeps the declaration valid before the layout
+          // effect sets the custom property (SSR / first paint).
+          "ds:bg-[image:var(--practice-profile-hero-cover,none),var(--gradient-hero-brand)]",
+          "ds:bg-cover ds:bg-center"
+        ].join(" ")
+      }
+    ) : null, g = /* @__PURE__ */ s(
+      "div",
+      {
+        className: [
+          // Phones: stacked column, smaller avatar — the practice name,
+          // tagline and rating keep the full line width instead of being
+          // squeezed beside a 3xl avatar. sm+: classic row layout.
+          "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-md)]",
+          "ds:sm:flex-row ds:sm:gap-[var(--spacing-lg)]"
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ e("div", { className: "ds:shrink-0 ds:sm:hidden", children: /* @__PURE__ */ e(x, { size: "xl", name: r, src: n, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ e("div", { className: "ds:hidden ds:shrink-0 ds:sm:block", children: /* @__PURE__ */ e(x, { size: "3xl", name: r, src: n, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ s("div", { className: "ds:flex ds:w-full ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-wrap ds:items-start ds:gap-[var(--spacing-md)]", children: [
+              /* @__PURE__ */ e(
+                "h1",
+                {
+                  id: v,
+                  className: "type-title-page ds:m-0 ds:text-[color:var(--foreground)]",
+                  children: r
+                }
+              ),
+              p ? /* @__PURE__ */ e("div", { className: "ds:ms-auto ds:flex ds:shrink-0 ds:items-center ds:gap-[var(--spacing-xs)]", children: p }) : null
+            ] }),
+            c ? /* @__PURE__ */ e("p", { className: "type-body ds:m-0 ds:text-[color:var(--foreground)]", children: c }) : null,
+            o ? (
+              // Rating owns the whole line: locale-formatted value, plural-
+              // aware review count, and a single role="img" announcement.
+              /* @__PURE__ */ e(
+                z,
+                {
+                  value: o.value,
+                  max: 5,
+                  size: "md",
+                  reviews: { count: o.count }
+                }
+              )
+            ) : null,
+            d && d.length > 0 ? /* @__PURE__ */ e(
+              "div",
+              {
+                role: "list",
+                className: "ds:mt-[var(--spacing-2xs)] ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)]",
+                children: d.map((a) => /* @__PURE__ */ e(
+                  B,
+                  {
+                    variant: a.variant ?? "neutral",
+                    role: "listitem",
+                    children: a.label
+                  },
+                  a.key
+                ))
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: H,
+        role: "region",
+        "aria-label": f,
+        "aria-labelledby": f ? void 0 : v,
+        "data-component": "practice-profile-hero",
+        "data-component-id": l,
+        "data-has-cover": i ? "true" : "false",
+        id: l,
+        className: V({ surface: m, className: N }),
+        ...P,
+        children: m === "elevated" ? /* @__PURE__ */ s(y, { variant: "elevated", children: [
+          u,
+          /* @__PURE__ */ e(y.Body, { children: g })
+        ] }) : /* @__PURE__ */ s(w, { children: [
+          u,
+          /* @__PURE__ */ e("div", { className: "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]", children: g })
+        ] })
+      }
+    );
+  }
+);
+E.displayName = "PracticeProfileHero";
+export {
+  E as P,
+  M as p
+};
+//# sourceMappingURL=practice-profile-hero-Bdd0bFqC.js.map