@opensite/ui 0.1.6 → 0.1.7

package/dist/section.cjs

@@ -30,7 +30,7 @@ var Container = React__default.default.forwardRef(
       {
         ref,
         className: cn(
-          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
           maxWidthStyles[maxWidth],
           className
         ),
@@ -51,6 +51,7 @@ var backgroundStyles = {
   muted: "bg-muted text-muted-foreground"
 };
 var spacingStyles = {
+  none: "py-0 md:py-0",
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",

package/dist/section.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":";;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAYC,sBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EACE,mFAAA;AAAA,EACF,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUD,sBAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,cAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,0CAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACTC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCD,cAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,cAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.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-7xl\",\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:\n    \"bg-linear-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"]}
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":";;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAYC,sBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EACE,mFAAA;AAAA,EACF,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUD,sBAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,cAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,0CAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACTC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCD,cAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,cAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.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-7xl\",\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-2 sm:px-4 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:\n    \"bg-linear-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  none: \"py-0 md:py-0\",\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"]}

package/dist/section.js

@@ -24,7 +24,7 @@ var Container = React.forwardRef(
       {
         ref,
         className: cn(
-          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
           maxWidthStyles[maxWidth],
           className
         ),
@@ -45,6 +45,7 @@ var backgroundStyles = {
   muted: "bg-muted text-muted-foreground"
 };
 var spacingStyles = {
+  none: "py-0 md:py-0",
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",

package/dist/section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["React","jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAY,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EACE,mFAAA;AAAA,EACF,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUA,KAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,+BAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.js","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-7xl\",\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:\n    \"bg-linear-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"]}
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["React","jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAY,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EACE,mFAAA;AAAA,EACF,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUA,KAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,+BAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.js","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-7xl\",\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-2 sm:px-4 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:\n    \"bg-linear-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  none: \"py-0 md:py-0\",\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"]}

package/dist/team-media-showcase.cjs

@@ -48,7 +48,7 @@ var Container = React__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
           maxWidthStyles[maxWidth],
           className
         ),
@@ -69,6 +69,7 @@ var backgroundStyles = {
   muted: "bg-muted text-muted-foreground"
 };
 var spacingStyles = {
+  none: "py-0 md:py-0",
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",

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

@@ -1 +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-7xl\",\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:\n    \"bg-linear-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>(\n  (\n    { className, imageUrl, imageAlt, children, optixFlowConfig, ...props },\n    ref\n  ) => {\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-linear-to-t from-black/80 via-black/20 to-transparent\"></div>\n\n        {children}\n      </div>\n    );\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: <Pressable href=\"/team/john\" variant=\"default\" asButton>View Profile</Pressable>\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\n      background={background}\n      spacing={verticalMargin}\n      className={className}\n    >\n      <Container>\n        {children}\n\n        <div className=\"space-y-12\">\n          <div className=\"space-y-6\">\n            {listEyebrow &&\n              typeof listEyebrow === \"string\" &&\n              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 &&\n                  typeof member.name === \"string\" &&\n                  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 md: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\">\n                                {member.role}\n                              </p>\n                            )}\n                        </div>\n                      </div>\n\n                      {member.action ? (\n                        <div className=\"mt-4 w-full md:absolute md:-bottom-20 md:left-0 md:mt-0 md:p-6 md:pt-2 md:opacity-0 md:transition-all md:duration-500 md:ease-in-out md:group-hover:bottom-0 md: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"]}
+{"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-7xl\",\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-2 sm:px-4 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:\n    \"bg-linear-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  none: \"py-0 md:py-0\",\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>(\n  (\n    { className, imageUrl, imageAlt, children, optixFlowConfig, ...props },\n    ref\n  ) => {\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-linear-to-t from-black/80 via-black/20 to-transparent\"></div>\n\n        {children}\n      </div>\n    );\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: <Pressable href=\"/team/john\" variant=\"default\" asButton>View Profile</Pressable>\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\n      background={background}\n      spacing={verticalMargin}\n      className={className}\n    >\n      <Container>\n        {children}\n\n        <div className=\"space-y-12\">\n          <div className=\"space-y-6\">\n            {listEyebrow &&\n              typeof listEyebrow === \"string\" &&\n              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 &&\n                  typeof member.name === \"string\" &&\n                  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 md: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\">\n                                {member.role}\n                              </p>\n                            )}\n                        </div>\n                      </div>\n\n                      {member.action ? (\n                        <div className=\"mt-4 w-full md:absolute md:-bottom-20 md:left-0 md:mt-0 md:p-6 md:pt-2 md:opacity-0 md:transition-all md:duration-500 md:ease-in-out md:group-hover:bottom-0 md: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.js

@@ -27,7 +27,7 @@ var Container = React__default.forwardRef(
       {
         ref,
         className: cn(
-          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
           maxWidthStyles[maxWidth],
           className
         ),
@@ -48,6 +48,7 @@ var backgroundStyles = {
   muted: "bg-muted text-muted-foreground"
 };
 var spacingStyles = {
+  none: "py-0 md:py-0",
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",

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

@@ -1 +1 @@
-{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx","../components/blocks/team/team-media-showcase.tsx"],"names":["React","jsx","React3","jsxs"],"mappings":"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","file":"team-media-showcase.js","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-7xl\",\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:\n    \"bg-linear-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>(\n  (\n    { className, imageUrl, imageAlt, children, optixFlowConfig, ...props },\n    ref\n  ) => {\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-linear-to-t from-black/80 via-black/20 to-transparent\"></div>\n\n        {children}\n      </div>\n    );\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: <Pressable href=\"/team/john\" variant=\"default\" asButton>View Profile</Pressable>\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\n      background={background}\n      spacing={verticalMargin}\n      className={className}\n    >\n      <Container>\n        {children}\n\n        <div className=\"space-y-12\">\n          <div className=\"space-y-6\">\n            {listEyebrow &&\n              typeof listEyebrow === \"string\" &&\n              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 &&\n                  typeof member.name === \"string\" &&\n                  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 md: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\">\n                                {member.role}\n                              </p>\n                            )}\n                        </div>\n                      </div>\n\n                      {member.action ? (\n                        <div className=\"mt-4 w-full md:absolute md:-bottom-20 md:left-0 md:mt-0 md:p-6 md:pt-2 md:opacity-0 md:transition-all md:duration-500 md:ease-in-out md:group-hover:bottom-0 md: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"]}
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx","../components/blocks/team/team-media-showcase.tsx"],"names":["React","jsx","React3","jsxs"],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAYA,cAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EACE,mFAAA;AAAA,EACF,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUA,cAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,+BAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AC8BtB,IAAM,6BAAA,GAAsCC,KAAA,CAAA,UAAA;AAAA,EAI1C,CACE,EAAE,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,UAAU,eAAA,EAAiB,GAAG,KAAA,EAAM,EACrE,GAAA,KACG;AACH,IAAA,uBACEC,IAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,4GAAA;AAAA,UACA,yCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAF,GAAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,QAAA;AAAA,cACL,GAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAU,iHAAA;AAAA,cACV;AAAA;AAAA,WACF;AAAA,0BAEAA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EAA4E,CAAA;AAAA,UAE1F;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AACA,6BAAA,CAA8B,WAAA,GAAc,+BAAA;AA6BrC,SAAS,iBAAA,CAAkB;AAAA,EAChC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,cAAA,GAAiB,IAAA;AAAA,EACjB,aAAA,GAAgB,sDAAA;AAAA,EAChB,SAAA;AAAA,EACA;AACF,CAAA,EAA8C;AAC5C,EAAA,uBACEA,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,OAAA,EAAS,cAAA;AAAA,MACT,SAAA;AAAA,MAEA,QAAA,kBAAAE,KAAC,SAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBAEDF,IAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cACb,QAAA,kBAAAE,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACZ,QAAA,EAAA;AAAA,UAAA,WAAA,IACC,OAAO,WAAA,KAAgB,QAAA,IACvB,WAAA,CAAY,IAAA,EAAK,KAAM,EAAA,oBACrBF,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6EAAA,EACZ,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,0BAEJA,IAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eACb,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAA,EAAQ,GAAA,KAAQ;AAC1B,YAAA,MAAM,WACJ,MAAA,CAAO,QAAA,KACN,MAAA,CAAO,IAAA,IACR,OAAO,MAAA,CAAO,IAAA,KAAS,QAAA,IACvB,MAAA,CAAO,KAAK,IAAA,EAAK,KAAM,KACnB,MAAA,CAAO,IAAA,GACP,UAAU,GAAG,CAAA,CAAA,CAAA;AAEnB,YAAA,uBACEA,GAAAA;AAAA,cAAC,6BAAA;AAAA,cAAA;AAAA,gBAEC,UAAU,MAAA,CAAO,QAAA;AAAA,gBACjB,QAAA;AAAA,gBACA,WAAW,MAAA,CAAO,aAAA;AAAA,gBAClB,eAAA;AAAA,gBAEA,QAAA,kBAAAE,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oEAAA,EACb,QAAA,EAAA;AAAA,kCAAAF,IAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wFAAA,EACb,QAAA,kBAAAE,KAAC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,MAAA,CAAO,QACN,OAAO,MAAA,CAAO,IAAA,KAAS,QAAA,IACvB,OAAO,IAAA,CAAK,IAAA,EAAK,KAAM,EAAA,oBACrBF,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,+BAAA,EACX,iBAAO,IAAA,EACV,CAAA;AAAA,oBAEH,OAAO,IAAA,IACN,OAAO,MAAA,CAAO,IAAA,KAAS,YACvB,MAAA,CAAO,IAAA,CAAK,IAAA,EAAK,KAAM,sBACrBA,GAAAA,CAAC,OAAE,SAAA,EAAU,uBAAA,EACV,iBAAO,IAAA,EACV;AAAA,mBAAA,EAEN,CAAA,EACF,CAAA;AAAA,kBAEC,MAAA,CAAO,yBACNA,GAAAA,CAAC,SAAI,SAAA,EAAU,yLAAA,EACZ,QAAA,EAAA,MAAA,CAAO,MAAA,EACV,CAAA,GACE;AAAA,iBAAA,EACN;AAAA,eAAA;AAAA,cA/BK;AAAA,aAgCP;AAAA,UAEJ,CAAC,CAAA,EACH;AAAA,SAAA,EACF,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"team-media-showcase.js","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-7xl\",\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-2 sm:px-4 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:\n    \"bg-linear-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  none: \"py-0 md:py-0\",\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>(\n  (\n    { className, imageUrl, imageAlt, children, optixFlowConfig, ...props },\n    ref\n  ) => {\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-linear-to-t from-black/80 via-black/20 to-transparent\"></div>\n\n        {children}\n      </div>\n    );\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: <Pressable href=\"/team/john\" variant=\"default\" asButton>View Profile</Pressable>\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\n      background={background}\n      spacing={verticalMargin}\n      className={className}\n    >\n      <Container>\n        {children}\n\n        <div className=\"space-y-12\">\n          <div className=\"space-y-6\">\n            {listEyebrow &&\n              typeof listEyebrow === \"string\" &&\n              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 &&\n                  typeof member.name === \"string\" &&\n                  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 md: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\">\n                                {member.role}\n                              </p>\n                            )}\n                        </div>\n                      </div>\n\n                      {member.action ? (\n                        <div className=\"mt-4 w-full md:absolute md:-bottom-20 md:left-0 md:mt-0 md:p-6 md:pt-2 md:opacity-0 md:transition-all md:duration-500 md:ease-in-out md:group-hover:bottom-0 md: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/types.d.cts

@@ -11,7 +11,7 @@ type SectionBackground = "white" | "gray" | "dark" | "gradient" | "primary" | "s
 /**
  * Spacing variants for Section component
  */
-type SectionSpacing = "sm" | "md" | "lg" | "xl";
+type SectionSpacing = "none" | "sm" | "md" | "lg" | "xl";
 /**
  * Size variants for AnimatedDialog component
  */

package/dist/types.d.ts

@@ -11,7 +11,7 @@ type SectionBackground = "white" | "gray" | "dark" | "gradient" | "primary" | "s
 /**
  * Spacing variants for Section component
  */
-type SectionSpacing = "sm" | "md" | "lg" | "xl";
+type SectionSpacing = "none" | "sm" | "md" | "lg" | "xl";
 /**
  * Size variants for AnimatedDialog component
  */