zuljaman-banner-components 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,12 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- export const createNextJSAdapter = (NextImage) => {
3
- const ImageComponent = ({ src, alt, ...props }) => (_jsx(NextImage, { src: src, alt: alt, ...props }));
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ImageComponent = exports.createNextJSAdapter = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const createNextJSAdapter = (NextImage) => {
6
+ const ImageComponent = ({ src, alt, ...props }) => ((0, jsx_runtime_1.jsx)(NextImage, { src: src, alt: alt, ...props }));
4
7
  return ImageComponent;
5
8
  };
9
+ exports.createNextJSAdapter = createNextJSAdapter;
6
10
  // For backward compatibility, export a basic component that will work in build
7
- export const ImageComponent = ({ src, alt, ...props }) => (_jsx("img", { src: src, alt: alt, ...props }));
11
+ const ImageComponent = ({ src, alt, ...props }) => ((0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, ...props }));
12
+ exports.ImageComponent = ImageComponent;
@@ -1,2 +1,6 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- export const ImageComponent = ({ src, alt, ...props }) => (_jsx("img", { src: src, alt: alt, ...props }));
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ImageComponent = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const ImageComponent = ({ src, alt, ...props }) => ((0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, ...props }));
6
+ exports.ImageComponent = ImageComponent;
@@ -1,5 +1,10 @@
1
+ "use strict";
1
2
  /**
2
3
  * Platform adapters exports
3
4
  */
4
- export { ImageComponent as NextJSImageComponent } from './NextJSAdapter';
5
- export { ImageComponent as SSRImageComponent } from './SSRAdapter';
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.SSRImageComponent = exports.NextJSImageComponent = void 0;
7
+ var NextJSAdapter_1 = require("./NextJSAdapter");
8
+ Object.defineProperty(exports, "NextJSImageComponent", { enumerable: true, get: function () { return NextJSAdapter_1.ImageComponent; } });
9
+ var SSRAdapter_1 = require("./SSRAdapter");
10
+ Object.defineProperty(exports, "SSRImageComponent", { enumerable: true, get: function () { return SSRAdapter_1.ImageComponent; } });
@@ -1,24 +1,30 @@
1
+ "use strict";
1
2
  /**
2
3
  * Platform-agnostic BannerVisor component
3
4
  * Extracted from Next.js app and adapted for cross-platform use
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { useState, useRef, useEffect } from "react";
8
- import clsx from "clsx";
9
- import { DEFAULT_BANNER_WIDTH, DEFAULT_BANNER_HEIGHT, DEFAULT_STORY_WIDTH, DEFAULT_STORY_HEIGHT, } from "../constants";
7
+ var __importDefault = (this && this.__importDefault) || function (mod) {
8
+ return (mod && mod.__esModule) ? mod : { "default": mod };
9
+ };
10
+ Object.defineProperty(exports, "__esModule", { value: true });
11
+ exports.BannerVisor = void 0;
12
+ const jsx_runtime_1 = require("react/jsx-runtime");
13
+ const react_1 = require("react");
14
+ const clsx_1 = __importDefault(require("clsx"));
15
+ const constants_1 = require("../constants");
10
16
  // Import style components (will be created next)
11
- import { BannerStyle1 } from "./Style1/BannerStyle1";
12
- import { BannerStyle2 } from "./Style2/BannerStyle2";
17
+ const BannerStyle1_1 = require("./Style1/BannerStyle1");
18
+ const BannerStyle2_1 = require("./Style2/BannerStyle2");
13
19
  const NoImageComponent = () => {
14
- return (_jsx("div", { className: "w-full grow flex items-center justify-center text-neutral-500", children: _jsx("p", { children: "No image selected" }) }));
20
+ return ((0, jsx_runtime_1.jsx)("div", { className: "w-full grow flex items-center justify-center text-neutral-500", children: (0, jsx_runtime_1.jsx)("p", { children: "No image selected" }) }));
15
21
  };
16
- export const BannerVisor = ({ bannerStyle = 1, // Default to style 1 if undefined
22
+ const BannerVisor = ({ bannerStyle = 1, // Default to style 1 if undefined
17
23
  backgroundImageUrl, copy1, copy2, bannerSubstyle, logoUrl, postType, sizeMultiplier: externalSizeMultiplier, ImageComponent, }) => {
18
- const [internalSizeMultiplier, setInternalSizeMultiplier] = useState(1);
19
- const containerRef = useRef(null);
24
+ const [internalSizeMultiplier, setInternalSizeMultiplier] = (0, react_1.useState)(1);
25
+ const containerRef = (0, react_1.useRef)(null);
20
26
  // Use external size multiplier if provided, otherwise use internal
21
- const sizeMultiplier = externalSizeMultiplier ?? internalSizeMultiplier;
27
+ const sizeMultiplier = externalSizeMultiplier !== null && externalSizeMultiplier !== void 0 ? externalSizeMultiplier : internalSizeMultiplier;
22
28
  const bannerContentProps = {
23
29
  copy1,
24
30
  copy2,
@@ -36,15 +42,15 @@ backgroundImageUrl, copy1, copy2, bannerSubstyle, logoUrl, postType, sizeMultipl
36
42
  const effectiveBannerStyle = bannerStyle === null ? 1 : bannerStyle;
37
43
  switch (effectiveBannerStyle) {
38
44
  case 1:
39
- return _jsx(BannerStyle1, { ...bannerContentProps });
45
+ return (0, jsx_runtime_1.jsx)(BannerStyle1_1.BannerStyle1, { ...bannerContentProps });
40
46
  case 2:
41
- return _jsx(BannerStyle2, { ...bannerContentProps });
47
+ return (0, jsx_runtime_1.jsx)(BannerStyle2_1.BannerStyle2, { ...bannerContentProps });
42
48
  default:
43
49
  // Default to BannerStyle1
44
- return _jsx(BannerStyle1, { ...bannerContentProps });
50
+ return (0, jsx_runtime_1.jsx)(BannerStyle1_1.BannerStyle1, { ...bannerContentProps });
45
51
  }
46
52
  };
47
- useEffect(() => {
53
+ (0, react_1.useEffect)(() => {
48
54
  // Only use internal size calculation if no external multiplier is provided
49
55
  if (externalSizeMultiplier !== undefined)
50
56
  return;
@@ -53,8 +59,8 @@ backgroundImageUrl, copy1, copy2, bannerSubstyle, logoUrl, postType, sizeMultipl
53
59
  return;
54
60
  // Determine target dimensions based on postType
55
61
  const isStory = postType === "STORY";
56
- const targetWidth = isStory ? DEFAULT_STORY_WIDTH : DEFAULT_BANNER_WIDTH;
57
- const targetHeight = isStory ? DEFAULT_STORY_HEIGHT : DEFAULT_BANNER_HEIGHT;
62
+ const targetWidth = isStory ? constants_1.DEFAULT_STORY_WIDTH : constants_1.DEFAULT_BANNER_WIDTH;
63
+ const targetHeight = isStory ? constants_1.DEFAULT_STORY_HEIGHT : constants_1.DEFAULT_BANNER_HEIGHT;
58
64
  const updateSize = () => {
59
65
  const actualWidth = container.clientWidth;
60
66
  const actualHeight = container.clientHeight;
@@ -83,17 +89,18 @@ backgroundImageUrl, copy1, copy2, bannerSubstyle, logoUrl, postType, sizeMultipl
83
89
  };
84
90
  // Add postType to dependency array to recalculate when it changes
85
91
  }, [postType, externalSizeMultiplier]);
86
- return (_jsx("div", { className: "relative w-full h-full bg-black rounded-sm flex items-center justify-center overflow-hidden", ref: containerRef, children: hasBannerContent || backgroundImageUrl ? (_jsx("div", { className: clsx("relative flex items-center justify-center h-full"), children: _jsxs("div", { className: "relative", style: {
92
+ return ((0, jsx_runtime_1.jsx)("div", { className: "relative w-full h-full bg-black rounded-sm flex items-center justify-center overflow-hidden", ref: containerRef, children: hasBannerContent || backgroundImageUrl ? ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("relative flex items-center justify-center h-full"), children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", style: {
87
93
  transform: `scale(${sizeMultiplier})`,
88
94
  width: `${(postType === "STORY"
89
- ? DEFAULT_STORY_WIDTH
90
- : DEFAULT_BANNER_WIDTH) / 16}rem`,
95
+ ? constants_1.DEFAULT_STORY_WIDTH
96
+ : constants_1.DEFAULT_BANNER_WIDTH) / 16}rem`,
91
97
  height: `${(postType === "STORY"
92
- ? DEFAULT_STORY_HEIGHT
93
- : DEFAULT_BANNER_HEIGHT) / 16}rem`,
94
- }, children: [!hasBannerContent && backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: postType === "STORY"
95
- ? DEFAULT_STORY_WIDTH
96
- : DEFAULT_BANNER_WIDTH, height: postType === "STORY"
97
- ? DEFAULT_STORY_HEIGHT
98
- : DEFAULT_BANNER_HEIGHT, className: "object-cover w-full h-full absolute inset-0", style: { objectFit: "cover" } })), hasBannerContent && (_jsx("div", { className: "flex items-center justify-center overflow-hidden w-full h-full", children: renderBannerStyle() }))] }) })) : (_jsx(NoImageComponent, {})) }));
98
+ ? constants_1.DEFAULT_STORY_HEIGHT
99
+ : constants_1.DEFAULT_BANNER_HEIGHT) / 16}rem`,
100
+ }, children: [!hasBannerContent && backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: postType === "STORY"
101
+ ? constants_1.DEFAULT_STORY_WIDTH
102
+ : constants_1.DEFAULT_BANNER_WIDTH, height: postType === "STORY"
103
+ ? constants_1.DEFAULT_STORY_HEIGHT
104
+ : constants_1.DEFAULT_BANNER_HEIGHT, className: "object-cover w-full h-full absolute inset-0", style: { objectFit: "cover" } })), hasBannerContent && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center overflow-hidden w-full h-full", children: renderBannerStyle() }))] }) })) : ((0, jsx_runtime_1.jsx)(NoImageComponent, {})) }));
99
105
  };
106
+ exports.BannerVisor = BannerVisor;
@@ -1,9 +1,12 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { BannerSubstyle1, BannerSubstyle2, BannerSubstyle3 } from "./substyles";
3
- import { calculateStyleFontSizes } from "../../utils";
4
- export const BannerStyle1 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgroundImageUrl, ImageComponent, }) => {
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.BannerStyle1 = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const substyles_1 = require("./substyles");
6
+ const utils_1 = require("../../utils");
7
+ const BannerStyle1 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgroundImageUrl, ImageComponent, }) => {
5
8
  // Use the utility function to calculate font sizes with Style1 parameters
6
- const fontSizes = calculateStyleFontSizes(copy1, copy2, {
9
+ const fontSizes = (0, utils_1.calculateStyleFontSizes)(copy1, copy2, {
7
10
  baseSizeRem1: 4.8,
8
11
  baseSizeRem2: 4.8,
9
12
  maxLengthThreshold: 40,
@@ -18,5 +21,6 @@ export const BannerStyle1 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgr
18
21
  backgroundImageUrl,
19
22
  ImageComponent,
20
23
  };
21
- return (_jsxs("div", { className: "w-full h-full text-white", children: [bannerSubstyle === 1 && _jsx(BannerSubstyle1, { ...substyleProps }), bannerSubstyle === 2 && _jsx(BannerSubstyle2, { ...substyleProps }), bannerSubstyle === 3 && _jsx(BannerSubstyle3, { ...substyleProps })] }));
24
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-full text-white", children: [bannerSubstyle === 1 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle1, { ...substyleProps }), bannerSubstyle === 2 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle2, { ...substyleProps }), bannerSubstyle === 3 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle3, { ...substyleProps })] }));
22
25
  };
26
+ exports.BannerStyle1 = BannerStyle1;
@@ -1,13 +1,16 @@
1
+ "use strict";
1
2
  /**
2
3
  * BannerSubstyle1 for Style1 - Platform-agnostic version
3
4
  * Extracted from Next.js app implementation
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { useMemo } from "react";
8
- import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
9
- export const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
10
- const { shadowStyle, logoShadowStyle } = useMemo(() => {
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports.BannerSubstyle1 = void 0;
9
+ const jsx_runtime_1 = require("react/jsx-runtime");
10
+ const react_1 = require("react");
11
+ const shadowUtils_1 = require("../../../styles/shadowUtils");
12
+ const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
13
+ const { shadowStyle, logoShadowStyle } = (0, react_1.useMemo)(() => {
11
14
  // --- Randomized Shadow Parameters ---
12
15
  // Text Shadow (Bottom)
13
16
  const baseTextSize = 70;
@@ -24,21 +27,22 @@ export const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUr
24
27
  const logoVariationIntensity = 0.2; // +/- 0.1
25
28
  const randomLogoIntensity = baseLogoIntensity + (Math.random() - 0.5) * logoVariationIntensity;
26
29
  // --- Generate Styles with Random Values ---
27
- const shadowStyle = createAbstractShadowStyle({
30
+ const shadowStyle = (0, shadowUtils_1.createAbstractShadowStyle)({
28
31
  // direction: "bottom", // Default
29
32
  size: `${randomTextSize}%`,
30
33
  intensity: randomTextIntensity,
31
34
  });
32
- const logoShadowStyle = createAbstractShadowStyle({
35
+ const logoShadowStyle = (0, shadowUtils_1.createAbstractShadowStyle)({
33
36
  direction: "top-left",
34
37
  size: `${randomLogoSize}%`,
35
38
  intensity: randomLogoIntensity,
36
39
  });
37
40
  return { shadowStyle, logoShadowStyle };
38
41
  }, []); // Empty dependency array ensures this runs only once on mount
39
- return (_jsxs("div", { className: "inset-0 flex flex-col items-start justify-between h-full text-center pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: "cover" } })), _jsx("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsx("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsx("div", { className: "relative px-20 pt-20 z-20", children: _jsx("div", { className: "relative w-64 h-64", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }) }), _jsxs("div", { className: "w-full px-20 relative z-20", children: [_jsx("p", { style: {
42
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col items-start justify-between h-full text-center pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "relative px-20 pt-20 z-20", children: (0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full px-20 relative z-20", children: [(0, jsx_runtime_1.jsx)("p", { style: {
40
43
  fontSize: fontSize_01,
41
- }, className: "leading-tight whitespace-pre-wrap", children: copy1 }), _jsx("p", { style: {
44
+ }, className: "leading-tight whitespace-pre-wrap", children: copy1 }), (0, jsx_runtime_1.jsx)("p", { style: {
42
45
  fontSize: fontSize_02,
43
46
  }, className: "font-bold leading-tight whitespace-pre-wrap", children: copy2 })] })] }));
44
47
  };
48
+ exports.BannerSubstyle1 = BannerSubstyle1;
@@ -1,13 +1,16 @@
1
+ "use strict";
1
2
  /**
2
3
  * BannerSubstyle2 for Style1 - Platform-agnostic version
3
4
  * Extracted from Next.js app implementation
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { useMemo } from "react";
8
- import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
9
- export const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
10
- const { shadowStyle, logoShadowStyle } = useMemo(() => {
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports.BannerSubstyle2 = void 0;
9
+ const jsx_runtime_1 = require("react/jsx-runtime");
10
+ const react_1 = require("react");
11
+ const shadowUtils_1 = require("../../../styles/shadowUtils");
12
+ const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
13
+ const { shadowStyle, logoShadowStyle } = (0, react_1.useMemo)(() => {
11
14
  // --- Randomized Shadow Parameters ---
12
15
  // Text Shadow (Bottom)
13
16
  const baseTextSize = 70;
@@ -24,21 +27,22 @@ export const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUr
24
27
  const logoVariationIntensity = 0.2; // +/- 0.1
25
28
  const randomLogoIntensity = baseLogoIntensity + (Math.random() - 0.5) * logoVariationIntensity;
26
29
  // --- Generate Styles with Random Values ---
27
- const shadowStyle = createAbstractShadowStyle({
30
+ const shadowStyle = (0, shadowUtils_1.createAbstractShadowStyle)({
28
31
  // direction: "bottom", // Default
29
32
  size: `${randomTextSize}%`,
30
33
  intensity: randomTextIntensity,
31
34
  });
32
- const logoShadowStyle = createAbstractShadowStyle({
35
+ const logoShadowStyle = (0, shadowUtils_1.createAbstractShadowStyle)({
33
36
  direction: "top-left",
34
37
  size: `${randomLogoSize}%`,
35
38
  intensity: randomLogoIntensity,
36
39
  });
37
40
  return { shadowStyle, logoShadowStyle };
38
41
  }, []); // Empty dependency array ensures this runs only once on mount
39
- return (_jsxs("div", { className: "inset-0 flex flex-col items-start justify-between h-full pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-75", style: { objectFit: 'cover' } })), _jsx("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsxs("div", { className: "relative px-20 pt-20 z-20", children: [_jsx("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsx("div", { className: "relative w-64 h-64", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }), _jsx("p", { style: {
42
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col items-start justify-between h-full pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-75", style: { objectFit: 'cover' } })), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative px-20 pt-20 z-20", children: [(0, jsx_runtime_1.jsx)("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }), (0, jsx_runtime_1.jsx)("p", { style: {
40
43
  fontSize: `calc(${fontSize_01} * 0.8)`,
41
- }, className: "w-1/2 mt-8 leading-tight whitespace-pre-wrap", children: copy1 })] }), _jsx("div", { className: "w-full px-20 relative z-20", children: _jsx("p", { style: {
44
+ }, className: "w-1/2 mt-8 leading-tight whitespace-pre-wrap", children: copy1 })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full px-20 relative z-20", children: (0, jsx_runtime_1.jsx)("p", { style: {
42
45
  fontSize: fontSize_02,
43
46
  }, className: "font-bold text-center leading-tight whitespace-pre-wrap", children: copy2 }) })] }));
44
47
  };
48
+ exports.BannerSubstyle2 = BannerSubstyle2;
@@ -1,19 +1,22 @@
1
+ "use strict";
1
2
  /**
2
3
  * BannerSubstyle3 for Style1 - Platform-agnostic version
3
4
  * Extracted from Next.js app implementation
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { useMemo } from "react";
8
- import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports.BannerSubstyle3 = void 0;
9
+ const jsx_runtime_1 = require("react/jsx-runtime");
10
+ const react_1 = require("react");
11
+ const shadowUtils_1 = require("../../../styles/shadowUtils");
9
12
  // Helper function to replace multiple spaces with newlines
10
13
  const formatCopy = (text) => {
11
14
  if (!text)
12
15
  return "";
13
16
  return text.replace(/\s{2,}/g, "\n");
14
17
  };
15
- export const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
16
- const { shadowStyle, logoShadowStyle } = useMemo(() => {
18
+ const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
19
+ const { shadowStyle, logoShadowStyle } = (0, react_1.useMemo)(() => {
17
20
  // --- Randomized Shadow Parameters ---
18
21
  // Text Shadow (Bottom)
19
22
  const baseTextSize = 70;
@@ -30,12 +33,12 @@ export const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUr
30
33
  const logoVariationIntensity = 0.2; // +/- 0.1
31
34
  const randomLogoIntensity = baseLogoIntensity + (Math.random() - 0.5) * logoVariationIntensity;
32
35
  // --- Generate Styles with Random Values ---
33
- const shadowStyle = createAbstractShadowStyle({
36
+ const shadowStyle = (0, shadowUtils_1.createAbstractShadowStyle)({
34
37
  // direction: "bottom", // Default
35
38
  size: `${randomTextSize}%`,
36
39
  intensity: randomTextIntensity,
37
40
  });
38
- const logoShadowStyle = createAbstractShadowStyle({
41
+ const logoShadowStyle = (0, shadowUtils_1.createAbstractShadowStyle)({
39
42
  direction: "top-left",
40
43
  size: `${randomLogoSize}%`,
41
44
  intensity: randomLogoIntensity,
@@ -43,11 +46,12 @@ export const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUr
43
46
  return { shadowStyle, logoShadowStyle };
44
47
  }, []); // Empty dependency array ensures this runs only once on mount
45
48
  // Process the copy strings
46
- const formattedCopy1 = useMemo(() => formatCopy(copy1), [copy1]);
47
- const formattedCopy2 = useMemo(() => formatCopy(copy2), [copy2]);
48
- return (_jsxs("div", { className: "inset-0 flex flex-col items-start justify-between h-full pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: 'cover' } })), _jsx("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsx("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsxs("div", { className: "relative px-20 pt-20 flex justify-between w-full z-20", children: [_jsx("div", { className: "relative w-64 h-64 pr-64", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }), _jsx("p", { style: {
49
+ const formattedCopy1 = (0, react_1.useMemo)(() => formatCopy(copy1), [copy1]);
50
+ const formattedCopy2 = (0, react_1.useMemo)(() => formatCopy(copy2), [copy2]);
51
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col items-start justify-between h-full pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: 'cover' } })), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative px-20 pt-20 flex justify-between w-full z-20", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 pr-64", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }), (0, jsx_runtime_1.jsx)("p", { style: {
49
52
  fontSize: `calc(${fontSize_01} * 0.8)`,
50
- }, className: "text-right w-2/3 leading-tight whitespace-pre-wrap", children: formattedCopy1 })] }), _jsx("div", { className: "w-full px-20 relative z-20", children: _jsx("p", { style: {
53
+ }, className: "text-right w-2/3 leading-tight whitespace-pre-wrap", children: formattedCopy1 })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full px-20 relative z-20", children: (0, jsx_runtime_1.jsx)("p", { style: {
51
54
  fontSize: fontSize_02,
52
55
  }, className: "font-bold text-center leading-tight whitespace-pre-wrap", children: formattedCopy2 }) })] }));
53
56
  };
57
+ exports.BannerSubstyle3 = BannerSubstyle3;
@@ -1,6 +1,22 @@
1
+ "use strict";
1
2
  /**
2
3
  * Style1 substyles exports
3
4
  */
4
- export * from './BannerSubstyle1';
5
- export * from './BannerSubstyle2';
6
- export * from './BannerSubstyle3';
5
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
9
+ desc = { enumerable: true, get: function() { return m[k]; } };
10
+ }
11
+ Object.defineProperty(o, k2, desc);
12
+ }) : (function(o, m, k, k2) {
13
+ if (k2 === undefined) k2 = k;
14
+ o[k2] = m[k];
15
+ }));
16
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
17
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ __exportStar(require("./BannerSubstyle1"), exports);
21
+ __exportStar(require("./BannerSubstyle2"), exports);
22
+ __exportStar(require("./BannerSubstyle3"), exports);
@@ -1,14 +1,17 @@
1
+ "use strict";
1
2
  /**
2
3
  * BannerStyle2 component - Platform-agnostic version
3
4
  * Extracted from Next.js app implementation
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { BannerSubstyle1, BannerSubstyle2, BannerSubstyle3 } from "./substyles";
8
- import { calculateStyleFontSizes } from "../../utils";
9
- export const BannerStyle2 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgroundImageUrl, ImageComponent, }) => {
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports.BannerStyle2 = void 0;
9
+ const jsx_runtime_1 = require("react/jsx-runtime");
10
+ const substyles_1 = require("./substyles");
11
+ const utils_1 = require("../../utils");
12
+ const BannerStyle2 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgroundImageUrl, ImageComponent, }) => {
10
13
  // Use the utility function to calculate font sizes with Style2 constrained parameters
11
- const fontSizes = calculateStyleFontSizes(copy1, copy2, {
14
+ const fontSizes = (0, utils_1.calculateStyleFontSizes)(copy1, copy2, {
12
15
  baseSizeRem1: 3.8,
13
16
  baseSizeRem2: 4.0,
14
17
  maxLengthThreshold: 35,
@@ -23,5 +26,6 @@ export const BannerStyle2 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgr
23
26
  backgroundImageUrl,
24
27
  ImageComponent,
25
28
  };
26
- return (_jsxs("div", { className: "w-full h-full text-white", children: [bannerSubstyle === 1 && _jsx(BannerSubstyle1, { ...substyleProps }), bannerSubstyle === 2 && _jsx(BannerSubstyle2, { ...substyleProps }), bannerSubstyle === 3 && _jsx(BannerSubstyle3, { ...substyleProps })] }));
29
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-full text-white", children: [bannerSubstyle === 1 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle1, { ...substyleProps }), bannerSubstyle === 2 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle2, { ...substyleProps }), bannerSubstyle === 3 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle3, { ...substyleProps })] }));
27
30
  };
31
+ exports.BannerStyle2 = BannerStyle2;
@@ -1,27 +1,31 @@
1
+ "use strict";
1
2
  /**
2
3
  * BannerSubstyle1 for Style2 - Platform-agnostic version
3
4
  * Extracted from Next.js app implementation
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
8
- export const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
9
- const shadowStyle01 = createAbstractShadowStyle({
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports.BannerSubstyle1 = void 0;
9
+ const jsx_runtime_1 = require("react/jsx-runtime");
10
+ const shadowUtils_1 = require("../../../styles/shadowUtils");
11
+ const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
12
+ const shadowStyle01 = (0, shadowUtils_1.createAbstractShadowStyle)({
10
13
  direction: "bottom",
11
14
  size: `70%`,
12
15
  intensity: 0.8,
13
16
  });
14
- const shadowStyle02 = createAbstractShadowStyle({
17
+ const shadowStyle02 = (0, shadowUtils_1.createAbstractShadowStyle)({
15
18
  direction: "top",
16
19
  size: `45%`,
17
20
  intensity: 0.8,
18
21
  });
19
- return (_jsxs("div", { className: "inset-0 flex flex-col items-center justify-between h-full text-center isolate overflow-hidden pt-8 px-20 pb-24 relative bg-neutral-900", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: 'cover' } })), _jsx("div", { className: "relative z-20 flex-shrink-0", children: _jsx("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }) }), _jsx("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), _jsx("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), _jsxs("div", { className: "w-full text-center relative z-20 flex-grow flex flex-col items-center justify-end gap-16", children: [_jsx("div", { className: "bg-white py-4 px-5 rounded-lg w-1/2 ml-auto shadow-lg rotate-3", children: _jsx("p", { style: {
22
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col items-center justify-between h-full text-center isolate overflow-hidden pt-8 px-20 pb-24 relative bg-neutral-900", children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: 'cover' } })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-20 flex-shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }) }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full text-center relative z-20 flex-grow flex flex-col items-center justify-end gap-16", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-white py-4 px-5 rounded-lg w-1/2 ml-auto shadow-lg rotate-3", children: (0, jsx_runtime_1.jsx)("p", { style: {
20
23
  fontSize: fontSize_02 ? `calc(${fontSize_02} * 0.5)` : "1rem",
21
24
  fontFamily: "var(--font-lato), sans-serif",
22
- }, className: "font-bold text-black leading-tight whitespace-pre-wrap text-center", children: copy2 }) }), _jsx("p", { style: {
25
+ }, className: "font-bold text-black leading-tight whitespace-pre-wrap text-center", children: copy2 }) }), (0, jsx_runtime_1.jsx)("p", { style: {
23
26
  fontSize: fontSize_01,
24
27
  fontWeight: "900",
25
28
  fontFamily: "var(--font-roboto), sans-serif",
26
29
  }, className: "leading-none whitespace-pre-wrap text-white uppercase tracking-wider text-shadow-lg", children: copy1 })] })] }));
27
30
  };
31
+ exports.BannerSubstyle1 = BannerSubstyle1;
@@ -1,27 +1,31 @@
1
+ "use strict";
1
2
  /**
2
3
  * BannerSubstyle2 for Style2 - Platform-agnostic version
3
4
  * Extracted from Next.js app implementation
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
8
- export const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
9
- const shadowStyle01 = createAbstractShadowStyle({
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports.BannerSubstyle2 = void 0;
9
+ const jsx_runtime_1 = require("react/jsx-runtime");
10
+ const shadowUtils_1 = require("../../../styles/shadowUtils");
11
+ const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
12
+ const shadowStyle01 = (0, shadowUtils_1.createAbstractShadowStyle)({
10
13
  direction: "bottom",
11
14
  size: `70%`,
12
15
  intensity: 0.8,
13
16
  });
14
- const shadowStyle02 = createAbstractShadowStyle({
17
+ const shadowStyle02 = (0, shadowUtils_1.createAbstractShadowStyle)({
15
18
  direction: "top",
16
19
  size: `40%`,
17
20
  intensity: 0.8,
18
21
  });
19
- return (_jsxs("div", { className: "inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden pt-8 px-16 pb-24 relative bg-neutral-900", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: 'cover' } })), _jsxs("div", { className: "relative z-20 flex-shrink-0 flex flex-col justify-between gap-8", children: [_jsx("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }), _jsx("div", { className: "bg-white py-6 px-4 rounded-lg w-1/2 mr-auto -rotate-3 shadow-lg", children: _jsx("p", { style: {
22
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden pt-8 px-16 pb-24 relative bg-neutral-900", children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-20 flex-shrink-0 flex flex-col justify-between gap-16", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white py-6 px-4 rounded-lg w-1/2 mr-auto -rotate-3 shadow-lg", children: (0, jsx_runtime_1.jsx)("p", { style: {
20
23
  fontSize: fontSize_02 ? `calc(${fontSize_02} * 0.45)` : "1rem",
21
24
  fontFamily: "var(--font-lato), sans-serif",
22
- }, className: "font-bold text-black leading-tight whitespace-pre-wrap text-center", children: copy2 }) })] }), _jsx("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), _jsx("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), _jsx("p", { style: {
25
+ }, className: "font-bold text-black leading-tight whitespace-pre-wrap text-center", children: copy2 }) })] }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { style: {
23
26
  fontSize: fontSize_01,
24
27
  fontWeight: "900",
25
28
  fontFamily: "var(--font-roboto), sans-serif",
26
29
  }, className: "leading-none whitespace-pre-wrap text-white uppercase tracking-wider text-shadow-lg text-right", children: copy1 })] }));
27
30
  };
31
+ exports.BannerSubstyle2 = BannerSubstyle2;
@@ -1,27 +1,31 @@
1
+ "use strict";
1
2
  /**
2
3
  * BannerSubstyle3 for Style2 - Platform-agnostic version
3
4
  * Extracted from Next.js app implementation
4
5
  */
5
6
  "use client";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
8
- export const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
9
- const shadowStyle01 = createAbstractShadowStyle({
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports.BannerSubstyle3 = void 0;
9
+ const jsx_runtime_1 = require("react/jsx-runtime");
10
+ const shadowUtils_1 = require("../../../styles/shadowUtils");
11
+ const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
12
+ const shadowStyle01 = (0, shadowUtils_1.createAbstractShadowStyle)({
10
13
  direction: "bottom",
11
14
  size: `70%`,
12
15
  intensity: 0.8,
13
16
  });
14
- const shadowStyle02 = createAbstractShadowStyle({
17
+ const shadowStyle02 = (0, shadowUtils_1.createAbstractShadowStyle)({
15
18
  direction: "top",
16
19
  size: `40%`,
17
20
  intensity: 0.8,
18
21
  });
19
- return (_jsxs("div", { className: "inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden pt-8 px-16 pb-24 relative bg-neutral-900", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: 'cover' } })), _jsxs("div", { className: "relative z-20 flex-shrink-0 flex flex-col justify-between gap-8", children: [_jsx("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }), _jsx("div", { className: "bg-white py-6 px-4 rounded-lg w-1/2 ml-auto rotate-3 shadow-lg", children: _jsx("p", { style: {
22
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden pt-8 px-16 pb-24 relative bg-neutral-900", children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-20 flex-shrink-0 flex flex-col justify-between gap-16", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white py-6 px-4 rounded-lg w-1/2 ml-auto rotate-3 shadow-lg", children: (0, jsx_runtime_1.jsx)("p", { style: {
20
23
  fontSize: fontSize_02 ? `calc(${fontSize_02} * 0.45)` : "1rem",
21
24
  fontFamily: "var(--font-lato), sans-serif",
22
- }, className: "font-bold text-black leading-tight whitespace-pre-wrap text-center", children: copy2 }) })] }), _jsx("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), _jsx("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), _jsx("p", { style: {
25
+ }, className: "font-bold text-black leading-tight whitespace-pre-wrap text-center", children: copy2 }) })] }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { style: {
23
26
  fontSize: fontSize_01,
24
27
  fontWeight: "900",
25
28
  fontFamily: "var(--font-roboto), sans-serif",
26
29
  }, className: "leading-none whitespace-pre-wrap text-white uppercase tracking-wider text-shadow-lg text-left", children: copy1 })] }));
27
30
  };
31
+ exports.BannerSubstyle3 = BannerSubstyle3;
@@ -1,6 +1,22 @@
1
+ "use strict";
1
2
  /**
2
3
  * Style2 substyles exports
3
4
  */
4
- export * from './BannerSubstyle1';
5
- export * from './BannerSubstyle2';
6
- export * from './BannerSubstyle3';
5
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
9
+ desc = { enumerable: true, get: function() { return m[k]; } };
10
+ }
11
+ Object.defineProperty(o, k2, desc);
12
+ }) : (function(o, m, k, k2) {
13
+ if (k2 === undefined) k2 = k;
14
+ o[k2] = m[k];
15
+ }));
16
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
17
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ __exportStar(require("./BannerSubstyle1"), exports);
21
+ __exportStar(require("./BannerSubstyle2"), exports);
22
+ __exportStar(require("./BannerSubstyle3"), exports);
@@ -1,6 +1,22 @@
1
+ "use strict";
1
2
  /**
2
3
  * Banner components exports
3
4
  */
4
- export * from './BannerVisor';
5
- export * from './Style1/BannerStyle1';
6
- export * from './Style2/BannerStyle2';
5
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
9
+ desc = { enumerable: true, get: function() { return m[k]; } };
10
+ }
11
+ Object.defineProperty(o, k2, desc);
12
+ }) : (function(o, m, k, k2) {
13
+ if (k2 === undefined) k2 = k;
14
+ o[k2] = m[k];
15
+ }));
16
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
17
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ __exportStar(require("./BannerVisor"), exports);
21
+ __exportStar(require("./Style1/BannerStyle1"), exports);
22
+ __exportStar(require("./Style2/BannerStyle2"), exports);
@@ -1,4 +1,20 @@
1
+ "use strict";
1
2
  /**
2
3
  * Constants exports
3
4
  */
4
- export * from './styleConfigs';
5
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
9
+ desc = { enumerable: true, get: function() { return m[k]; } };
10
+ }
11
+ Object.defineProperty(o, k2, desc);
12
+ }) : (function(o, m, k, k2) {
13
+ if (k2 === undefined) k2 = k;
14
+ o[k2] = m[k];
15
+ }));
16
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
17
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ __exportStar(require("./styleConfigs"), exports);
@@ -1,8 +1,11 @@
1
+ "use strict";
1
2
  /**
2
3
  * Style-specific font configurations
3
4
  * Based on banner style requirements from the original implementations
4
5
  */
5
- export const STYLE_FONT_CONFIGS = {
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.DEFAULT_STORY_HEIGHT = exports.DEFAULT_STORY_WIDTH = exports.DEFAULT_BANNER_HEIGHT = exports.DEFAULT_BANNER_WIDTH = exports.STYLE_FONT_CONFIGS = void 0;
8
+ exports.STYLE_FONT_CONFIGS = {
6
9
  1: {
7
10
  baseSizeRem1: 2.5, // Base size for copy1 in rem
8
11
  baseSizeRem2: 1.8, // Base size for copy2 in rem
@@ -17,8 +20,8 @@ export const STYLE_FONT_CONFIGS = {
17
20
  }
18
21
  };
19
22
  // Default banner dimensions
20
- export const DEFAULT_BANNER_WIDTH = 1080;
21
- export const DEFAULT_BANNER_HEIGHT = 1350;
23
+ exports.DEFAULT_BANNER_WIDTH = 1080;
24
+ exports.DEFAULT_BANNER_HEIGHT = 1350;
22
25
  // Default story dimensions
23
- export const DEFAULT_STORY_WIDTH = 1080;
24
- export const DEFAULT_STORY_HEIGHT = 1920;
26
+ exports.DEFAULT_STORY_WIDTH = 1080;
27
+ exports.DEFAULT_STORY_HEIGHT = 1920;
package/dist/index.js CHANGED
@@ -1,18 +1,34 @@
1
+ "use strict";
1
2
  /**
2
3
  * @zuljaman/banner-components - Main package exports
3
4
  *
4
5
  * Platform-agnostic banner components for Next.js and AWS Lambda
5
6
  * Based on consolidated implementation from Next.js app with enhanced features
6
7
  */
8
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
9
+ if (k2 === undefined) k2 = k;
10
+ var desc = Object.getOwnPropertyDescriptor(m, k);
11
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
12
+ desc = { enumerable: true, get: function() { return m[k]; } };
13
+ }
14
+ Object.defineProperty(o, k2, desc);
15
+ }) : (function(o, m, k, k2) {
16
+ if (k2 === undefined) k2 = k;
17
+ o[k2] = m[k];
18
+ }));
19
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
20
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
21
+ };
22
+ Object.defineProperty(exports, "__esModule", { value: true });
7
23
  // Core components
8
- export * from './components';
24
+ __exportStar(require("./components"), exports);
9
25
  // Platform adapters
10
- export * from './adapters';
26
+ __exportStar(require("./adapters"), exports);
11
27
  // Types and interfaces
12
- export * from './types';
28
+ __exportStar(require("./types"), exports);
13
29
  // Utilities
14
- export * from './utils';
30
+ __exportStar(require("./utils"), exports);
15
31
  // Style utilities
16
- export * from './styles';
32
+ __exportStar(require("./styles"), exports);
17
33
  // Constants and configurations
18
- export * from './constants';
34
+ __exportStar(require("./constants"), exports);
@@ -1,4 +1,20 @@
1
+ "use strict";
1
2
  /**
2
3
  * Style utilities exports
3
4
  */
4
- export * from './shadowUtils';
5
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
9
+ desc = { enumerable: true, get: function() { return m[k]; } };
10
+ }
11
+ Object.defineProperty(o, k2, desc);
12
+ }) : (function(o, m, k, k2) {
13
+ if (k2 === undefined) k2 = k;
14
+ o[k2] = m[k];
15
+ }));
16
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
17
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ __exportStar(require("./shadowUtils"), exports);
@@ -1,14 +1,17 @@
1
+ "use strict";
1
2
  /**
2
3
  * Enhanced shadow utilities for banner components
3
4
  * Extracted from Next.js app implementation
4
5
  */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.createAbstractShadowStyle = void 0;
5
8
  /**
6
9
  * Creates a style object for an abstract shadow element.
7
10
  * This should be applied to a dedicated element (e.g., a div)
8
11
  * positioned absolutely within a container. The container must
9
12
  * have `position: 'relative'` and ideally `isolation: 'isolate'`.
10
13
  */
11
- export const createAbstractShadowStyle = ({ direction = "bottom", size = "60%", // Default size for height/width/corner extent
14
+ const createAbstractShadowStyle = ({ direction = "bottom", size = "60%", // Default size for height/width/corner extent
12
15
  color = "0, 0, 0", // Default black
13
16
  intensity = 0.6, // Default 60% opacity at the edge
14
17
  } = {}) => {
@@ -105,3 +108,4 @@ intensity = 0.6, // Default 60% opacity at the edge
105
108
  }
106
109
  return style;
107
110
  };
111
+ exports.createAbstractShadowStyle = createAbstractShadowStyle;
package/dist/types.js CHANGED
@@ -1,20 +1,23 @@
1
+ "use strict";
1
2
  /**
2
3
  * Consolidated types for banner components shared package
3
4
  * Based on Next.js app types with AWS Lambda compatibility
4
5
  */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.BannerStyle = exports.PostType = void 0;
5
8
  /**
6
9
  * Post type enumeration for different banner formats
7
10
  */
8
- export var PostType;
11
+ var PostType;
9
12
  (function (PostType) {
10
13
  PostType["POST"] = "POST";
11
14
  PostType["STORY"] = "STORY";
12
- })(PostType || (PostType = {}));
15
+ })(PostType || (exports.PostType = PostType = {}));
13
16
  /**
14
17
  * Banner style enumeration for different design templates
15
18
  */
16
- export var BannerStyle;
19
+ var BannerStyle;
17
20
  (function (BannerStyle) {
18
21
  BannerStyle["CANVA_STYLE_01"] = "CANVA_STYLE_01";
19
22
  BannerStyle["CANVA_STYLE_02"] = "CANVA_STYLE_02";
20
- })(BannerStyle || (BannerStyle = {}));
23
+ })(BannerStyle || (exports.BannerStyle = BannerStyle = {}));
package/dist/utils.js CHANGED
@@ -1,7 +1,10 @@
1
+ "use strict";
1
2
  /**
2
3
  * Enhanced font size calculation for banner styles with separate sizing for copy1 and copy2
3
4
  * Extracted from Next.js app implementation
4
5
  */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.calculateStyleFontSizes = void 0;
5
8
  /**
6
9
  * Calculates dynamic font sizes for both copy1 and copy2 based on content length
7
10
  * and style-specific constraints.
@@ -11,11 +14,12 @@
11
14
  * @param config - Style-specific font configuration
12
15
  * @returns Object with fontSize_01 and fontSize_02 strings
13
16
  */
14
- export const calculateStyleFontSizes = (copy1, copy2, config) => {
17
+ const calculateStyleFontSizes = (copy1, copy2, config) => {
18
+ var _a, _b;
15
19
  const { baseSizeRem1, baseSizeRem2, maxLengthThreshold, reductionFactor } = config;
16
20
  // Calculate length excluding spaces for each copy
17
- const len1 = copy1?.replace(/\s/g, "").length ?? 0;
18
- const len2 = copy2?.replace(/\s/g, "").length ?? 0;
21
+ const len1 = (_a = copy1 === null || copy1 === void 0 ? void 0 : copy1.replace(/\s/g, "").length) !== null && _a !== void 0 ? _a : 0;
22
+ const len2 = (_b = copy2 === null || copy2 === void 0 ? void 0 : copy2.replace(/\s/g, "").length) !== null && _b !== void 0 ? _b : 0;
19
23
  // Calculate font size for copy1
20
24
  const calculationLength1 = len1 === 0 ? 1 : len1;
21
25
  const size1 = baseSizeRem1 + Math.max(0, maxLengthThreshold - calculationLength1) * reductionFactor;
@@ -27,3 +31,4 @@ export const calculateStyleFontSizes = (copy1, copy2, config) => {
27
31
  fontSize_02: `${size2}rem`
28
32
  };
29
33
  };
34
+ exports.calculateStyleFontSizes = calculateStyleFontSizes;
package/package.json CHANGED
@@ -1,17 +1,33 @@
1
1
  {
2
2
  "name": "zuljaman-banner-components",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Shared banner components package for Next.js and AWS Lambda platforms",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "require": "./dist/index.js",
10
+ "types": "./dist/index.d.ts"
11
+ },
12
+ "./adapters/SSRAdapter": {
13
+ "require": "./dist/adapters/SSRAdapter.js",
14
+ "types": "./dist/adapters/SSRAdapter.d.ts"
15
+ },
16
+ "./adapters/NextJSAdapter": {
17
+ "require": "./dist/adapters/NextJSAdapter.js",
18
+ "types": "./dist/adapters/NextJSAdapter.d.ts"
19
+ }
20
+ },
7
21
  "files": [
8
22
  "dist"
9
23
  ],
10
24
  "scripts": {
11
- "build": "rm -rf dist tsconfig.tsbuildinfo && tsc",
25
+ "build": "npm run clean && npm run build:cjs",
26
+ "build:cjs": "tsc -p tsconfig.json",
27
+ "build:esm": "tsc -p tsconfig.esm.json",
12
28
  "dev": "tsc --watch",
13
- "clean": "rm -rf dist",
14
- "prepack": "npm run build",
29
+ "clean": "rm -rf dist esm tsconfig.tsbuildinfo",
30
+ "prepack": "echo 'Build manually before packing'",
15
31
  "pack:test": "npm pack",
16
32
  "pack:dry": "npm pack --dry-run",
17
33
  "prepublishOnly": "npm run clean && npm run build",
@@ -59,4 +75,4 @@
59
75
  ],
60
76
  "author": "Zuljaman Team",
61
77
  "license": "MIT"
62
- }
78
+ }