zuljaman-banner-components 1.0.6 → 1.0.8

package/dist/components/styles/Style1/substyleConfig.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Centralized configuration for Style1 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+import { SubstyleConfig } from '../types/substyleTypes';
+export type { SubstyleConfig };
+/**
+ * Style1 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+export declare const STYLE1_SUBSTYLE_CONFIGS: Record<number, SubstyleConfig>;
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+export declare const getSubstyleConfig: (substyle: number) => SubstyleConfig;
+//# sourceMappingURL=substyleConfig.d.ts.map

package/dist/components/styles/Style1/substyleConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style1/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAiFlE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}

package/dist/components/styles/Style1/substyleConfig.js

@@ -0,0 +1,105 @@
+"use strict";
+/**
+ * Centralized configuration for Style1 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSubstyleConfig = exports.STYLE1_SUBSTYLE_CONFIGS = void 0;
+const substyleUtils_1 = require("../utils/substyleUtils");
+/**
+ * Style1 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+exports.STYLE1_SUBSTYLE_CONFIGS = {
+    1: {
+        logo: {
+            x: -475, // 6% from left (65px) = -475px from center
+            y: -486, // 5% from top (54px) = -486px from center
+        },
+        copy1: {
+            x: 0, // Centered horizontally
+            y: 432, // 10% from bottom (108px) = 432px from center
+            width: 950, // 88% of 1080px
+            alignment: 'center',
+        },
+        copy2: {
+            x: 0, // Centered horizontally
+            y: 432, // Start at same Y as copy1 (will be auto-positioned above)
+            width: 950, // 88% of 1080px
+            alignment: 'center',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'copy1',
+            targetElement: 'copy2',
+            direction: 'up',
+        },
+        gapRem: 1.5,
+        fontSize: {
+            copy1: 1.0,
+            copy2: 0.80,
+        },
+    },
+    2: {
+        logo: {
+            x: -475,
+            y: -486,
+        },
+        copy1: {
+            x: 0,
+            y: 432,
+            width: 950,
+            alignment: 'center',
+        },
+        copy2: {
+            x: -259, // 6% from left (65px), centered within 40% width (432px) = -259px from center
+            y: -486, // Start at same Y as logo (will be auto-positioned below)
+            width: 432, // 40% of 1080px
+            alignment: 'left',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'logo',
+            targetElement: 'copy2',
+            direction: 'down',
+        },
+        gapRem: 1.5,
+        fontSize: {
+            copy1: 1.0,
+            copy2: 0.80,
+        },
+    },
+    3: {
+        logo: {
+            x: -475,
+            y: -486,
+        },
+        copy1: {
+            x: 0,
+            y: 432,
+            width: 950,
+            alignment: 'center',
+        },
+        copy2: {
+            x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
+            y: -350, // Moved down from -432 to -350
+            width: 432, // 40% of 1080px
+            alignment: 'right',
+        },
+        fontSize: {
+            copy1: 1.0,
+            copy2: 0.80,
+        },
+    },
+};
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+const getSubstyleConfig = (substyle) => {
+    return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE1_SUBSTYLE_CONFIGS, substyle);
+};
+exports.getSubstyleConfig = getSubstyleConfig;

package/dist/components/styles/Style2/substyleConfig.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Centralized configuration for Style2 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+import { SubstyleConfig } from '../types/substyleTypes';
+export type { SubstyleConfig };
+/**
+ * Style2 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+export declare const STYLE2_SUBSTYLE_CONFIGS: Record<number, SubstyleConfig>;
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+export declare const getSubstyleConfig: (substyle: number) => SubstyleConfig;
+//# sourceMappingURL=substyleConfig.d.ts.map

package/dist/components/styles/Style2/substyleConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style2/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CA6GlE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}

package/dist/components/styles/Style2/substyleConfig.js

@@ -0,0 +1,133 @@
+"use strict";
+/**
+ * Centralized configuration for Style2 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSubstyleConfig = exports.STYLE2_SUBSTYLE_CONFIGS = void 0;
+const substyleUtils_1 = require("../utils/substyleUtils");
+/**
+ * Style2 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+exports.STYLE2_SUBSTYLE_CONFIGS = {
+    1: {
+        logo: {
+            x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
+            y: -486, // 5% from top (54px) = -486px from center
+        },
+        copy1: {
+            x: 0, // Centered horizontally
+            y: 432, // 10% from bottom (108px) = 432px from center
+            width: 950, // 88% of 1080px
+            alignment: 'center',
+        },
+        copy2: {
+            x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
+            y: 432, // Start at same Y as copy1 (will be auto-positioned above)
+            width: 432, // 40% of 1080px
+            alignment: 'center',
+            rotation: 3,
+            color: '#000000',
+            bgColor: '#FFFFFF',
+            hasBg: true,
+            paddingX: '1.25rem',
+            paddingY: '1rem',
+            borderRadius: '0.75rem',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'copy1',
+            targetElement: 'copy2',
+            direction: 'up',
+        },
+        gapRem: 2,
+        fontSize: {
+            copy1: 1.0,
+            copy2: 0.40,
+        },
+    },
+    2: {
+        logo: {
+            x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
+            y: -486,
+        },
+        copy1: {
+            x: 0,
+            y: 432,
+            width: 950,
+            alignment: 'center',
+        },
+        copy2: {
+            x: -259, // 6% from left (65px), centered within 40% width (432px) = -259px from center
+            y: -486, // Start at same Y as logo (will be auto-positioned below)
+            width: 432,
+            alignment: 'center',
+            rotation: -3,
+            color: '#000000',
+            bgColor: '#FFFFFF',
+            hasBg: true,
+            paddingX: '1.25rem',
+            paddingY: '1rem',
+            borderRadius: '0.75rem',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'logo',
+            targetElement: 'copy2',
+            direction: 'down',
+        },
+        gapRem: 2,
+        fontSize: {
+            copy1: 1.0,
+            copy2: 0.40,
+        },
+    },
+    3: {
+        logo: {
+            x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
+            y: -486,
+        },
+        copy1: {
+            x: 0,
+            y: 432,
+            width: 950,
+            alignment: 'center',
+        },
+        copy2: {
+            x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
+            y: -486, // Start at same Y as logo (will be auto-positioned below)
+            width: 432,
+            alignment: 'center',
+            rotation: 3,
+            color: '#000000',
+            bgColor: '#FFFFFF',
+            hasBg: true,
+            paddingX: '1.25rem',
+            paddingY: '1rem',
+            borderRadius: '0.75rem',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'logo',
+            targetElement: 'copy2',
+            direction: 'down',
+        },
+        gapRem: 2,
+        fontSize: {
+            copy1: 1.0,
+            copy2: 0.40,
+        },
+    },
+};
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+const getSubstyleConfig = (substyle) => {
+    return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE2_SUBSTYLE_CONFIGS, substyle);
+};
+exports.getSubstyleConfig = getSubstyleConfig;

package/dist/components/styles/Style3/substyleConfig.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Centralized configuration for Style3 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+import { SubstyleConfig } from '../types/substyleTypes';
+export type { SubstyleConfig };
+/**
+ * Style3 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+export declare const STYLE3_SUBSTYLE_CONFIGS: Record<number, SubstyleConfig>;
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+export declare const getSubstyleConfig: (substyle: number) => SubstyleConfig;
+//# sourceMappingURL=substyleConfig.d.ts.map

package/dist/components/styles/Style3/substyleConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style3/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAmElE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}

package/dist/components/styles/Style3/substyleConfig.js

@@ -0,0 +1,91 @@
+"use strict";
+/**
+ * Centralized configuration for Style3 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSubstyleConfig = exports.STYLE3_SUBSTYLE_CONFIGS = void 0;
+const substyleUtils_1 = require("../utils/substyleUtils");
+/**
+ * Style3 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+exports.STYLE3_SUBSTYLE_CONFIGS = {
+    1: {
+        logo: {
+            x: 14, // Centered with copy1 (124 - logoWidth/2)
+            y: -216, // 30% from top (324px) = -216px from center
+        },
+        copy1: {
+            x: 124, // 6% from right, centered within 65% width = 124px from center
+            y: -216, // Start at same Y as logo (will be auto-positioned below)
+            width: 702, // 65% of 1080px
+            alignment: 'center',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'logo',
+            targetElement: 'copy1',
+            direction: 'down',
+        },
+        gapRem: 1.5,
+        fontSize: {
+            copy1: 0.60,
+        },
+    },
+    2: {
+        logo: {
+            x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
+            y: 380, // 15% from bottom (162px) = 378px from center
+        },
+        copy1: {
+            x: 0, // Centered horizontally
+            y: 380, // Start at same Y as logo (will be auto-positioned above)
+            width: 702, // 65% of 1080px
+            alignment: 'center',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'logo',
+            targetElement: 'copy1',
+            direction: 'up',
+        },
+        gapRem: 1.5,
+        fontSize: {
+            copy1: 0.60,
+        },
+    },
+    3: {
+        logo: {
+            x: 254, // 6% from right edge, logo left edge = 254px from center
+            y: 380, // 15% from bottom (162px) = 378px from center
+        },
+        copy1: {
+            x: 313, // 6% from right, centered within 30% width = 313px from center
+            y: 380, // Start at same Y as logo (will be auto-positioned above)
+            width: 324, // 30% of 1080px
+            alignment: 'left',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'logo',
+            targetElement: 'copy1',
+            direction: 'up',
+        },
+        gapRem: 1.5,
+        fontSize: {
+            copy1: 0.60,
+        },
+    },
+};
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+const getSubstyleConfig = (substyle) => {
+    return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE3_SUBSTYLE_CONFIGS, substyle);
+};
+exports.getSubstyleConfig = getSubstyleConfig;

package/dist/components/styles/Style4/substyleConfig.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Centralized configuration for Style4 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+import { SubstyleConfig } from '../types/substyleTypes';
+export type { SubstyleConfig };
+/**
+ * Style4 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+export declare const STYLE4_SUBSTYLE_CONFIGS: Record<number, SubstyleConfig>;
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+export declare const getSubstyleConfig: (substyle: number) => SubstyleConfig;
+//# sourceMappingURL=substyleConfig.d.ts.map

package/dist/components/styles/Style4/substyleConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style4/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAwFlE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}

package/dist/components/styles/Style4/substyleConfig.js

@@ -0,0 +1,112 @@
+"use strict";
+/**
+ * Centralized configuration for Style4 substyles
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSubstyleConfig = exports.STYLE4_SUBSTYLE_CONFIGS = void 0;
+const substyleUtils_1 = require("../utils/substyleUtils");
+/**
+ * Style4 substyle configurations
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
+ * x: negative = left, positive = right
+ * y: negative = up, positive = down
+ */
+exports.STYLE4_SUBSTYLE_CONFIGS = {
+    1: {
+        logo: {
+            x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
+            y: 380, // 15% from bottom (162px) = 378px from center
+        },
+        copy1: {
+            x: 0, // Centered horizontally
+            y: -486, // Start at same Y as copy2 (will be auto-positioned below)
+            width: 972, // 90% of 1080px
+            alignment: 'center',
+        },
+        copy2: {
+            x: 0, // Centered horizontally
+            y: -486, // 5% from top (54px) = -486px from center
+            width: 950, // 88% of 1080px
+            alignment: 'center',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'copy2',
+            targetElement: 'copy1',
+            direction: 'down',
+        },
+        gapRem: 0.15,
+        fontSize: {
+            copy1: 1.6,
+            copy2: 0.60,
+        },
+    },
+    2: {
+        logo: {
+            x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
+            y: 380, // 15% from bottom (162px) = 378px from center
+        },
+        copy1: {
+            x: 0, // Centered horizontally
+            y: -136, // 37.4% from top (404px) = -136px from center
+            width: 972, // 90% of 1080px
+            alignment: 'center',
+        },
+        copy2: {
+            x: 0, // Centered horizontally
+            y: -136, // Start at same Y as copy1 (will be auto-positioned below)
+            width: 950, // 88% of 1080px
+            alignment: 'center',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'copy1',
+            targetElement: 'copy2',
+            direction: 'down',
+        },
+        gapRem: 1,
+        fontSize: {
+            copy1: 1.75,
+            copy2: 0.60,
+        },
+    },
+    3: {
+        logo: {
+            x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
+            y: 380, // 15% from bottom (162px) = 378px from center
+        },
+        copy1: {
+            x: 0, // Centered horizontally
+            y: -281, // 24% from top (259px) = -281px from center
+            width: 972, // 90% of 1080px
+            alignment: 'center',
+        },
+        copy2: {
+            x: 0, // Centered horizontally
+            y: -281, // Start at same Y as copy1 (will be auto-positioned below)
+            width: 950, // 88% of 1080px
+            alignment: 'center',
+        },
+        autoPositioning: true,
+        autoPositioningConfig: {
+            anchorElement: 'copy1',
+            targetElement: 'copy2',
+            direction: 'down',
+        },
+        gapRem: 1,
+        fontSize: {
+            copy1: 1.75,
+            copy2: 0.60,
+        },
+    },
+};
+/**
+ * Get configuration for a specific substyle
+ * @param substyle - Substyle number (1, 2, or 3)
+ * @returns SubstyleConfig for the specified substyle
+ */
+const getSubstyleConfig = (substyle) => {
+    return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE4_SUBSTYLE_CONFIGS, substyle);
+};
+exports.getSubstyleConfig = getSubstyleConfig;

package/dist/components/styles/types/substyleTypes.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Shared type definitions for all substyle configurations
+ * Centralized location for style configuration interfaces
+ */
+/**
+ * Logo positioning with absolute coordinates from center
+ */
+export interface LogoConfig {
+    x: number;
+    y: number;
+    width?: number;
+}
+/**
+ * Copy element positioning and styling configuration with absolute coordinates
+ */
+export interface CopyElementConfig {
+    x: number;
+    y: number;
+    width?: number;
+    alignment: 'left' | 'center' | 'right';
+    rotation?: number;
+    color?: string;
+    bgColor?: string;
+    hasBg?: boolean;
+    paddingX?: string;
+    paddingY?: string;
+    borderRadius?: string;
+}
+/**
+ * Auto-positioning configuration
+ * Defines how one element should be positioned relative to another
+ */
+export interface AutoPositioningConfig {
+    /** Element that serves as the reference point (stays in place) */
+    anchorElement: 'logo' | 'copy1' | 'copy2';
+    /** Element that will be positioned relative to the anchor (moves) */
+    targetElement: 'copy1' | 'copy2';
+    /** Direction from anchor to target */
+    direction: 'up' | 'down' | 'left' | 'right';
+}
+/**
+ * Font size configuration for copies
+ */
+export interface FontSizeConfig {
+    copy1: number;
+    copy2?: number;
+}
+/**
+ * Complete substyle configuration
+ * Defines all positioning, styling, and behavior for a specific substyle
+ */
+export interface SubstyleConfig {
+    logo: LogoConfig;
+    copy1: CopyElementConfig;
+    copy2?: CopyElementConfig;
+    /** Enable automatic positioning of elements relative to each other */
+    autoPositioning?: boolean;
+    /** Configuration for automatic positioning (anchor, target, direction) */
+    autoPositioningConfig?: AutoPositioningConfig;
+    /** Gap in rem units between auto-positioned elements */
+    gapRem?: number;
+    fontSize: FontSizeConfig;
+}
+/**
+ * Collection of substyle configurations indexed by substyle number
+ */
+export type SubstyleConfigs = Record<number, SubstyleConfig>;
+//# sourceMappingURL=substyleTypes.d.ts.map

package/dist/components/styles/types/substyleTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"substyleTypes.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/types/substyleTypes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,qEAAqE;IACrE,aAAa,EAAE,OAAO,GAAG,OAAO,CAAC;IACjC,sCAAsC;IACtC,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC7C;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC"}

package/dist/components/styles/types/substyleTypes.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Shared type definitions for all substyle configurations
+ * Centralized location for style configuration interfaces
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/styles/utils/calculations.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Platform-agnostic calculation utilities
+ * Common mathematical operations and conversions used across all banner styles
+ */
+/**
+ * Convert rem units to pixels
+ * @param rem - Value in rem units
+ * @returns Value in pixels
+ */
+export declare const remToPixels: (rem: number) => number;
+/**
+ * Convert percentage to pixels based on container size
+ * @param percent - Percentage value (0-100)
+ * @param containerSize - Container size in pixels
+ * @returns Value in pixels
+ */
+export declare const percentToPixels: (percent: number, containerSize: number) => number;
+/**
+ * Parse a percentage string to a number
+ * @param percentString - String like "50%" or "10.5%"
+ * @returns Numeric percentage value (e.g., 50, 10.5)
+ */
+export declare const parsePercent: (percentString: string) => number;
+/**
+ * Calculate the pixel position from a percentage string and container size
+ * @param percentString - String like "50%" or "10%"
+ * @param containerSize - Container size in pixels
+ * @returns Position in pixels
+ */
+export declare const percentStringToPixels: (percentString: string, containerSize: number) => number;
+/**
+ * Clamp a value between min and max
+ * @param value - Value to clamp
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @returns Clamped value
+ */
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Linear interpolation between two values
+ * @param start - Start value
+ * @param end - End value
+ * @param t - Interpolation factor (0-1)
+ * @returns Interpolated value
+ */
+export declare const lerp: (start: number, end: number, t: number) => number;
+//# sourceMappingURL=calculations.d.ts.map

package/dist/components/styles/utils/calculations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculations.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/utils/calculations.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,MAEzC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,MAAM,EAAE,eAAe,MAAM,KAAG,MAExE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,eAAe,MAAM,KAAG,MAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,eAAe,MAAM,EAAE,eAAe,MAAM,KAAG,MAGpF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAE/D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,KAAG,MAE5D,CAAC"}