@opensite/ui 0.1.3 → 0.1.4

package/dist/team-media-showcase.cjs

@@ -0,0 +1,182 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var img = require('@page-speed/img');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// components/blocks/team/team-media-showcase.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React__namespace.default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var backgroundStyles = {
+  white: "bg-background text-foreground",
+  gray: "bg-muted/30 text-foreground",
+  dark: "bg-foreground text-background",
+  gradient: "bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-muted-foreground"
+};
+var spacingStyles = {
+  sm: "py-12 md:py-16",
+  md: "py-16 md:py-24",
+  lg: "py-20 md:py-32",
+  xl: "py-24 md:py-40"
+};
+var Section = React__namespace.default.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "white",
+    spacing = "lg",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        ref,
+        id,
+        className: cn(
+          backgroundStyles[background],
+          spacingStyles[spacing],
+          className
+        ),
+        style,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+          (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-12 md:mb-16", children: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wider mb-2 text-primary", children: subtitle }),
+            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight", children: title })
+          ] }),
+          children
+        ] })
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+var TeamMemberBackgroundImageCard = React__namespace.forwardRef(({ className, imageUrl, imageAlt, children, optixFlowConfig, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "group h-[400px] relative w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+        "transition-all duration-300 ease-in-out",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: imageUrl,
+            alt: imageAlt,
+            className: "absolute inset-0 h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110",
+            optixFlowConfig
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }),
+        children
+      ]
+    }
+  );
+});
+TeamMemberBackgroundImageCard.displayName = "TeamMemberBackgroundImageCard";
+function TeamMediaShowcase({
+  items,
+  children,
+  listEyebrow,
+  background = "white",
+  verticalMargin = "lg",
+  gridClassName = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+  className,
+  optixFlowConfig
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: verticalMargin, className, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      listEyebrow && typeof listEyebrow === "string" && listEyebrow.trim() !== "" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-md pt-8 uppercase text-dark-charcoal/70 tracking-[0.2em] font-semibold", children: listEyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: gridClassName, children: items.map((member, idx) => {
+        const imageAlt = member.imageAlt || (member.name && typeof member.name === "string" && member.name.trim() !== "" ? member.name : `member-${idx}`);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TeamMemberBackgroundImageCard,
+          {
+            imageUrl: member.imageSrc,
+            imageAlt,
+            className: member.cardClassName,
+            optixFlowConfig,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full flex-col justify-end p-6 text-card-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 transition-transform duration-500 ease-in-out group-hover:-translate-y-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                member.name && typeof member.name === "string" && member.name.trim() !== "" && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-3xl font-bold text-white", children: member.name }),
+                member.role && typeof member.role === "string" && member.role.trim() !== "" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/80", children: member.role })
+              ] }) }),
+              member.action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-20 left-0 w-full pt-2 p-6 opacity-0 transition-all duration-500 ease-in-out group-hover:bottom-0 group-hover:opacity-100", children: member.action }) : null
+            ] })
+          },
+          idx
+        );
+      }) })
+    ] }) })
+  ] }) });
+}
+
+exports.TeamMediaShowcase = TeamMediaShowcase;
+exports.TeamMemberBackgroundImageCard = TeamMemberBackgroundImageCard;
+//# sourceMappingURL=team-media-showcase.cjs.map
+//# sourceMappingURL=team-media-showcase.cjs.map

package/dist/team-media-showcase.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx","../components/blocks/team/team-media-showcase.tsx"],"names":["twMerge","clsx","React","jsx","jsxs","React3","Img"],"mappings":"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","file":"team-media-showcase.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  \"4xl\": \"max-w-[1536px]\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n *   <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n    const Component = as as any;\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n          maxWidthStyles[maxWidth],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n  white: \"bg-background text-foreground\",\n  gray: \"bg-muted/30 text-foreground\",\n  dark: \"bg-foreground text-background\",\n  gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  secondary: \"bg-secondary text-secondary-foreground\",\n  muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n  xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n *   title=\"Our Services\"\n *   subtitle=\"What we offer\"\n *   background=\"gray\"\n *   spacing=\"lg\"\n * >\n *   <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      id,\n      title,\n      subtitle,\n      children,\n      className,\n      style,\n      background = \"white\",\n      spacing = \"lg\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <section\n        ref={ref}\n        id={id}\n        className={cn(\n          backgroundStyles[background],\n          spacingStyles[spacing],\n          className\n        )}\n        style={style}\n        {...props}\n      >\n        <Container>\n          {(title || subtitle) && (\n            <div className=\"text-center mb-12 md:mb-16\">\n              {subtitle && (\n                <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n                  {subtitle}\n                </p>\n              )}\n              {title && (\n                <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n                  {title}\n                </h2>\n              )}\n            </div>\n          )}\n          {children}\n        </Container>\n      </section>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../../lib/utils\";\nimport { Container } from \"../../ui/container\";\nimport { Section } from \"../../ui/section\";\nimport { Img } from \"@page-speed/img\";\nimport type { SectionBackground, SectionSpacing } from \"../../../src/types\";\n\n/**\n * Configuration for Optix Flow image optimization\n */\nexport interface OptixFlowConfig {\n  /**\n   * API key for Optix Flow service\n   */\n  apiKey: string;\n  /**\n   * Compression level (0-100)\n   */\n  compression?: number;\n}\n\n/**\n * Individual team member item for TeamMediaShowcase\n */\nexport interface TeamMediaShowcaseItem {\n  /**\n   * Image source URL for the team member (required)\n   */\n  imageSrc: string;\n  /**\n   * Team member's name (optional)\n   */\n  name?: string;\n  /**\n   * Team member's role/title (optional)\n   */\n  role?: string;\n  /**\n   * Custom action element to display on hover (optional)\n   * Can be a button, link, or any React node\n   */\n  action?: React.ReactNode;\n  /**\n   * Alt text for the image (defaults to name or generic text)\n   */\n  imageAlt?: string;\n  /**\n   * Additional CSS classes for the card\n   */\n  cardClassName?: string;\n}\n\n/**\n * Props for TeamMediaShowcase component\n */\nexport interface TeamMediaShowcaseProps {\n  /**\n   * Array of team member items to display (required)\n   * Each item must have at least an imageSrc\n   */\n  items: TeamMediaShowcaseItem[];\n  /**\n   * Optional children to render above the grid (e.g., section header content)\n   */\n  children?: React.ReactNode;\n  /**\n   * Eyebrow text displayed above the grid\n   */\n  listEyebrow?: string;\n  /**\n   * Background style variant for the section\n   * @default \"white\"\n   */\n  background?: SectionBackground;\n  /**\n   * Vertical spacing/margin variant\n   * @default \"lg\"\n   */\n  verticalMargin?: SectionSpacing;\n  /**\n   * Custom grid CSS classes\n   * @default \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"\n   */\n  gridClassName?: string;\n  /**\n   * Additional CSS classes for the section wrapper\n   */\n  className?: string;\n  /**\n   * Optional Optix Flow configuration for @page-speed/img\n   */\n  optixFlowConfig?: OptixFlowConfig;\n}\n\n/**\n * Props for TeamMemberBackgroundImageCard component\n */\ninterface TeamMemberBackgroundImageCardProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Image URL for the background\n   */\n  imageUrl: string;\n  /**\n   * Alt text for the image\n   */\n  imageAlt: string;\n  /**\n   * Card content (overlaid on the image)\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional Optix Flow configuration for @page-speed/img\n   */\n  optixFlowConfig?: OptixFlowConfig;\n}\n\n/**\n * TeamMemberBackgroundImageCard - Individual card with background image and hover effects\n *\n * Displays a team member with a full-bleed background image that zooms on hover,\n * with a gradient overlay for text readability.\n */\nconst TeamMemberBackgroundImageCard = React.forwardRef<\n  HTMLDivElement,\n  TeamMemberBackgroundImageCardProps\n>(({ className, imageUrl, imageAlt, children, optixFlowConfig, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"group h-[400px] relative w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-lg\",\n        \"transition-all duration-300 ease-in-out\",\n        className\n      )}\n      {...props}\n    >\n      <Img\n        src={imageUrl}\n        alt={imageAlt}\n        className=\"absolute inset-0 h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110\"\n        optixFlowConfig={optixFlowConfig}\n      />\n\n      <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent\"></div>\n\n      {children}\n    </div>\n  );\n});\nTeamMemberBackgroundImageCard.displayName = \"TeamMemberBackgroundImageCard\";\n\n/**\n * TeamMediaShowcase - Display team members in a grid with background images\n *\n * A responsive grid of team member cards featuring full-bleed background images\n * with hover effects. Each card shows the member's name and role with an optional\n * action element that appears on hover.\n *\n * @example\n * ```tsx\n * <TeamMediaShowcase\n *   listEyebrow=\"Our Team\"\n *   items={[\n *     {\n *       imageSrc: \"/team/john.jpg\",\n *       name: \"John Doe\",\n *       role: \"CEO\",\n *       action: <Button>View Profile</Button>\n *     },\n *     {\n *       imageSrc: \"/team/jane.jpg\",\n *       name: \"Jane Smith\",\n *       role: \"CTO\"\n *     }\n *   ]}\n * />\n * ```\n */\nexport function TeamMediaShowcase({\n  items,\n  children,\n  listEyebrow,\n  background = \"white\",\n  verticalMargin = \"lg\",\n  gridClassName = \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n  className,\n  optixFlowConfig,\n}: TeamMediaShowcaseProps): React.JSX.Element {\n  return (\n    <Section background={background} spacing={verticalMargin} className={className}>\n      <Container>\n        {children}\n\n        <div className=\"space-y-12\">\n          <div className=\"space-y-6\">\n            {listEyebrow && typeof listEyebrow === \"string\" && listEyebrow.trim() !== \"\" && (\n              <div className=\"text-md pt-8 uppercase text-dark-charcoal/70 tracking-[0.2em] font-semibold\">\n                {listEyebrow}\n              </div>\n            )}\n            <div className={gridClassName}>\n              {items.map((member, idx) => {\n                const imageAlt =\n                  member.imageAlt ||\n                  (member.name && typeof member.name === \"string\" && member.name.trim() !== \"\"\n                    ? member.name\n                    : `member-${idx}`);\n\n                return (\n                  <TeamMemberBackgroundImageCard\n                    key={idx}\n                    imageUrl={member.imageSrc}\n                    imageAlt={imageAlt}\n                    className={member.cardClassName}\n                    optixFlowConfig={optixFlowConfig}\n                  >\n                    <div className=\"relative flex h-full flex-col justify-end p-6 text-card-foreground\">\n                      <div className=\"space-y-4 transition-transform duration-500 ease-in-out group-hover:-translate-y-12\">\n                        <div>\n                          {member.name &&\n                            typeof member.name === \"string\" &&\n                            member.name.trim() !== \"\" && (\n                              <h4 className=\"text-3xl font-bold text-white\">\n                                {member.name}\n                              </h4>\n                            )}\n                          {member.role &&\n                            typeof member.role === \"string\" &&\n                            member.role.trim() !== \"\" && (\n                              <p className=\"text-sm text-white/80\">{member.role}</p>\n                            )}\n                        </div>\n                      </div>\n\n                      {member.action ? (\n                        <div className=\"absolute -bottom-20 left-0 w-full pt-2 p-6 opacity-0 transition-all duration-500 ease-in-out group-hover:bottom-0 group-hover:opacity-100\">\n                          {member.action}\n                        </div>\n                      ) : null}\n                    </div>\n                  </TeamMemberBackgroundImageCard>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </Container>\n    </Section>\n  );\n}\n\nexport { TeamMemberBackgroundImageCard };\n"]}

package/dist/team-media-showcase.d.cts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { SectionBackground, SectionSpacing } from './types.cjs';
+
+/**
+ * Configuration for Optix Flow image optimization
+ */
+interface OptixFlowConfig {
+    /**
+     * API key for Optix Flow service
+     */
+    apiKey: string;
+    /**
+     * Compression level (0-100)
+     */
+    compression?: number;
+}
+/**
+ * Individual team member item for TeamMediaShowcase
+ */
+interface TeamMediaShowcaseItem {
+    /**
+     * Image source URL for the team member (required)
+     */
+    imageSrc: string;
+    /**
+     * Team member's name (optional)
+     */
+    name?: string;
+    /**
+     * Team member's role/title (optional)
+     */
+    role?: string;
+    /**
+     * Custom action element to display on hover (optional)
+     * Can be a button, link, or any React node
+     */
+    action?: React.ReactNode;
+    /**
+     * Alt text for the image (defaults to name or generic text)
+     */
+    imageAlt?: string;
+    /**
+     * Additional CSS classes for the card
+     */
+    cardClassName?: string;
+}
+/**
+ * Props for TeamMediaShowcase component
+ */
+interface TeamMediaShowcaseProps {
+    /**
+     * Array of team member items to display (required)
+     * Each item must have at least an imageSrc
+     */
+    items: TeamMediaShowcaseItem[];
+    /**
+     * Optional children to render above the grid (e.g., section header content)
+     */
+    children?: React.ReactNode;
+    /**
+     * Eyebrow text displayed above the grid
+     */
+    listEyebrow?: string;
+    /**
+     * Background style variant for the section
+     * @default "white"
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing/margin variant
+     * @default "lg"
+     */
+    verticalMargin?: SectionSpacing;
+    /**
+     * Custom grid CSS classes
+     * @default "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for the section wrapper
+     */
+    className?: string;
+    /**
+     * Optional Optix Flow configuration for @page-speed/img
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+/**
+ * Props for TeamMemberBackgroundImageCard component
+ */
+interface TeamMemberBackgroundImageCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image URL for the background
+     */
+    imageUrl: string;
+    /**
+     * Alt text for the image
+     */
+    imageAlt: string;
+    /**
+     * Card content (overlaid on the image)
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional Optix Flow configuration for @page-speed/img
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+/**
+ * TeamMemberBackgroundImageCard - Individual card with background image and hover effects
+ *
+ * Displays a team member with a full-bleed background image that zooms on hover,
+ * with a gradient overlay for text readability.
+ */
+declare const TeamMemberBackgroundImageCard: React.ForwardRefExoticComponent<TeamMemberBackgroundImageCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TeamMediaShowcase - Display team members in a grid with background images
+ *
+ * A responsive grid of team member cards featuring full-bleed background images
+ * with hover effects. Each card shows the member's name and role with an optional
+ * action element that appears on hover.
+ *
+ * @example
+ * ```tsx
+ * <TeamMediaShowcase
+ *   listEyebrow="Our Team"
+ *   items={[
+ *     {
+ *       imageSrc: "/team/john.jpg",
+ *       name: "John Doe",
+ *       role: "CEO",
+ *       action: <Button>View Profile</Button>
+ *     },
+ *     {
+ *       imageSrc: "/team/jane.jpg",
+ *       name: "Jane Smith",
+ *       role: "CTO"
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+declare function TeamMediaShowcase({ items, children, listEyebrow, background, verticalMargin, gridClassName, className, optixFlowConfig, }: TeamMediaShowcaseProps): React.JSX.Element;
+
+export { type OptixFlowConfig, TeamMediaShowcase, type TeamMediaShowcaseItem, type TeamMediaShowcaseProps, TeamMemberBackgroundImageCard };

package/dist/team-media-showcase.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { SectionBackground, SectionSpacing } from './types.js';
+
+/**
+ * Configuration for Optix Flow image optimization
+ */
+interface OptixFlowConfig {
+    /**
+     * API key for Optix Flow service
+     */
+    apiKey: string;
+    /**
+     * Compression level (0-100)
+     */
+    compression?: number;
+}
+/**
+ * Individual team member item for TeamMediaShowcase
+ */
+interface TeamMediaShowcaseItem {
+    /**
+     * Image source URL for the team member (required)
+     */
+    imageSrc: string;
+    /**
+     * Team member's name (optional)
+     */
+    name?: string;
+    /**
+     * Team member's role/title (optional)
+     */
+    role?: string;
+    /**
+     * Custom action element to display on hover (optional)
+     * Can be a button, link, or any React node
+     */
+    action?: React.ReactNode;
+    /**
+     * Alt text for the image (defaults to name or generic text)
+     */
+    imageAlt?: string;
+    /**
+     * Additional CSS classes for the card
+     */
+    cardClassName?: string;
+}
+/**
+ * Props for TeamMediaShowcase component
+ */
+interface TeamMediaShowcaseProps {
+    /**
+     * Array of team member items to display (required)
+     * Each item must have at least an imageSrc
+     */
+    items: TeamMediaShowcaseItem[];
+    /**
+     * Optional children to render above the grid (e.g., section header content)
+     */
+    children?: React.ReactNode;
+    /**
+     * Eyebrow text displayed above the grid
+     */
+    listEyebrow?: string;
+    /**
+     * Background style variant for the section
+     * @default "white"
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing/margin variant
+     * @default "lg"
+     */
+    verticalMargin?: SectionSpacing;
+    /**
+     * Custom grid CSS classes
+     * @default "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for the section wrapper
+     */
+    className?: string;
+    /**
+     * Optional Optix Flow configuration for @page-speed/img
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+/**
+ * Props for TeamMemberBackgroundImageCard component
+ */
+interface TeamMemberBackgroundImageCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image URL for the background
+     */
+    imageUrl: string;
+    /**
+     * Alt text for the image
+     */
+    imageAlt: string;
+    /**
+     * Card content (overlaid on the image)
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional Optix Flow configuration for @page-speed/img
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+/**
+ * TeamMemberBackgroundImageCard - Individual card with background image and hover effects
+ *
+ * Displays a team member with a full-bleed background image that zooms on hover,
+ * with a gradient overlay for text readability.
+ */
+declare const TeamMemberBackgroundImageCard: React.ForwardRefExoticComponent<TeamMemberBackgroundImageCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TeamMediaShowcase - Display team members in a grid with background images
+ *
+ * A responsive grid of team member cards featuring full-bleed background images
+ * with hover effects. Each card shows the member's name and role with an optional
+ * action element that appears on hover.
+ *
+ * @example
+ * ```tsx
+ * <TeamMediaShowcase
+ *   listEyebrow="Our Team"
+ *   items={[
+ *     {
+ *       imageSrc: "/team/john.jpg",
+ *       name: "John Doe",
+ *       role: "CEO",
+ *       action: <Button>View Profile</Button>
+ *     },
+ *     {
+ *       imageSrc: "/team/jane.jpg",
+ *       name: "Jane Smith",
+ *       role: "CTO"
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+declare function TeamMediaShowcase({ items, children, listEyebrow, background, verticalMargin, gridClassName, className, optixFlowConfig, }: TeamMediaShowcaseProps): React.JSX.Element;
+
+export { type OptixFlowConfig, TeamMediaShowcase, type TeamMediaShowcaseItem, type TeamMediaShowcaseProps, TeamMemberBackgroundImageCard };

package/dist/team-media-showcase.js

@@ -0,0 +1,160 @@
+"use client";
+import * as React from 'react';
+import React__default from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Img } from '@page-speed/img';
+
+// components/blocks/team/team-media-showcase.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React__default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var backgroundStyles = {
+  white: "bg-background text-foreground",
+  gray: "bg-muted/30 text-foreground",
+  dark: "bg-foreground text-background",
+  gradient: "bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-muted-foreground"
+};
+var spacingStyles = {
+  sm: "py-12 md:py-16",
+  md: "py-16 md:py-24",
+  lg: "py-20 md:py-32",
+  xl: "py-24 md:py-40"
+};
+var Section = React__default.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "white",
+    spacing = "lg",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        id,
+        className: cn(
+          backgroundStyles[background],
+          spacingStyles[spacing],
+          className
+        ),
+        style,
+        ...props,
+        children: /* @__PURE__ */ jsxs(Container, { children: [
+          (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16", children: [
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wider mb-2 text-primary", children: subtitle }),
+            title && /* @__PURE__ */ jsx("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight", children: title })
+          ] }),
+          children
+        ] })
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+var TeamMemberBackgroundImageCard = React.forwardRef(({ className, imageUrl, imageAlt, children, optixFlowConfig, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "group h-[400px] relative w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+        "transition-all duration-300 ease-in-out",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: imageUrl,
+            alt: imageAlt,
+            className: "absolute inset-0 h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110",
+            optixFlowConfig
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }),
+        children
+      ]
+    }
+  );
+});
+TeamMemberBackgroundImageCard.displayName = "TeamMemberBackgroundImageCard";
+function TeamMediaShowcase({
+  items,
+  children,
+  listEyebrow,
+  background = "white",
+  verticalMargin = "lg",
+  gridClassName = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+  className,
+  optixFlowConfig
+}) {
+  return /* @__PURE__ */ jsx(Section, { background, spacing: verticalMargin, className, children: /* @__PURE__ */ jsxs(Container, { children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: "space-y-12", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      listEyebrow && typeof listEyebrow === "string" && listEyebrow.trim() !== "" && /* @__PURE__ */ jsx("div", { className: "text-md pt-8 uppercase text-dark-charcoal/70 tracking-[0.2em] font-semibold", children: listEyebrow }),
+      /* @__PURE__ */ jsx("div", { className: gridClassName, children: items.map((member, idx) => {
+        const imageAlt = member.imageAlt || (member.name && typeof member.name === "string" && member.name.trim() !== "" ? member.name : `member-${idx}`);
+        return /* @__PURE__ */ jsx(
+          TeamMemberBackgroundImageCard,
+          {
+            imageUrl: member.imageSrc,
+            imageAlt,
+            className: member.cardClassName,
+            optixFlowConfig,
+            children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col justify-end p-6 text-card-foreground", children: [
+              /* @__PURE__ */ jsx("div", { className: "space-y-4 transition-transform duration-500 ease-in-out group-hover:-translate-y-12", children: /* @__PURE__ */ jsxs("div", { children: [
+                member.name && typeof member.name === "string" && member.name.trim() !== "" && /* @__PURE__ */ jsx("h4", { className: "text-3xl font-bold text-white", children: member.name }),
+                member.role && typeof member.role === "string" && member.role.trim() !== "" && /* @__PURE__ */ jsx("p", { className: "text-sm text-white/80", children: member.role })
+              ] }) }),
+              member.action ? /* @__PURE__ */ jsx("div", { className: "absolute -bottom-20 left-0 w-full pt-2 p-6 opacity-0 transition-all duration-500 ease-in-out group-hover:bottom-0 group-hover:opacity-100", children: member.action }) : null
+            ] })
+          },
+          idx
+        );
+      }) })
+    ] }) })
+  ] }) });
+}
+
+export { TeamMediaShowcase, TeamMemberBackgroundImageCard };
+//# sourceMappingURL=team-media-showcase.js.map
+//# sourceMappingURL=team-media-showcase.js.map