@papu1337/builder 0.0.3 → 0.0.5

package/dist/elements/ctaCard/ctaCardElement.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { CtaCardSettingsMap } from './settings';
+
+	let { settings }: { settings: CtaCardSettingsMap } = $props();
+</script>
+
+<div
+	class="cta-wrapper"
+	style="margin-top: {settings.marginTop}px;"
+>
+	<div
+		class="cta-outer"
+		style="
+			background-color: {settings.cardBackground};
+			border: 1px solid {settings.borderColor};
+			border-radius: {settings.borderRadius}px;
+		"
+	>
+		<a
+			href={settings.buttonLink}
+			class="cta-inner"
+			style="
+				background: {settings.innerBackground};
+				border: 0.5px solid {settings.borderColor};
+				border-radius: {settings.borderRadius}px;
+			"
+		>
+			{#if settings.backgroundImage}
+				<img
+					alt=""
+					class="cta-bg-image"
+					src={settings.backgroundImage}
+				/>
+			{/if}
+			<div class="cta-text">
+				<p class="cta-heading" style="color: {settings.headingColor};">
+					{settings.heading}
+				</p>
+				<p class="cta-description" style="color: {settings.descriptionColor};">
+					{settings.description}
+				</p>
+			</div>
+			<div
+				class="cta-button"
+				style="background: {settings.buttonBackground}; color: {settings.buttonTextColor};"
+			>
+				{settings.buttonText}
+			</div>
+		</a>
+	</div>
+</div>
+
+<style>
+	.cta-wrapper {
+		max-width: 750px;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.cta-outer {
+		padding: 8px;
+	}
+
+	.cta-inner {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 16px;
+		position: relative;
+		overflow: hidden;
+		text-decoration: none;
+		color: inherit;
+	}
+
+	@media (min-width: 768px) {
+		.cta-inner {
+			flex-direction: row;
+		}
+	}
+
+	.cta-bg-image {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		object-fit: cover;
+	}
+
+	.cta-text {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		position: relative;
+		z-index: 1;
+	}
+
+	.cta-heading {
+		margin: 0;
+		font-size: 1.5rem;
+		font-weight: 800;
+		line-height: 120%;
+	}
+
+	.cta-description {
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 400;
+		line-height: 150%;
+	}
+
+	.cta-button {
+		position: relative;
+		z-index: 1;
+		padding: 16px 46px;
+		border-radius: 12px;
+		text-align: center;
+		font-weight: 700;
+		white-space: nowrap;
+		flex-shrink: 0;
+		width: 100%;
+	}
+
+	@media (min-width: 768px) {
+		.cta-button {
+			width: auto;
+		}
+	}
+</style>

package/dist/elements/ctaCard/ctaCardElement.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CtaCardSettingsMap } from './settings';
+type $$ComponentProps = {
+    settings: CtaCardSettingsMap;
+};
+declare const CtaCardElement: import("svelte").Component<$$ComponentProps, {}, "">;
+type CtaCardElement = ReturnType<typeof CtaCardElement>;
+export default CtaCardElement;

package/dist/elements/ctaCard/settings.d.ts

@@ -0,0 +1,22 @@
+import { ColorSetting, NumberSetting, TextSetting, UploadSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const ctaCardSettings: Settings<{
+    heading: TextSetting;
+    description: TextSetting;
+    buttonText: TextSetting;
+    buttonLink: TextSetting;
+    backgroundImage: UploadSetting;
+    style: Settings<{
+        cardBackground: ColorSetting;
+        innerBackground: ColorSetting;
+        borderColor: ColorSetting;
+        headingColor: ColorSetting;
+        descriptionColor: ColorSetting;
+        buttonBackground: ColorSetting;
+        buttonTextColor: ColorSetting;
+    }>;
+    layout: Settings<{
+        marginTop: NumberSetting;
+        borderRadius: NumberSetting;
+    }>;
+}>;
+export type CtaCardSettingsMap = InferSettingsMapType<typeof ctaCardSettings>;

package/dist/elements/ctaCard/settings.js

@@ -0,0 +1,64 @@
+import { ColorSetting, NumberSetting, TextSetting, UploadSetting, Settings } from '../../settings';
+export const ctaCardSettings = new Settings('CTA Card', {
+    heading: new TextSetting({
+        title: 'Heading',
+        defaultValue: 'Ready to Build Your Bet?'
+    }),
+    description: new TextSetting({
+        title: 'Description',
+        defaultValue: 'Combine multiple selections from the same match into one powerful bet.'
+    }),
+    buttonText: new TextSetting({
+        title: 'Button Text',
+        defaultValue: 'READY TO BUILD'
+    }),
+    buttonLink: new TextSetting({
+        title: 'Button Link',
+        defaultValue: '/crypto-sportsbook'
+    }),
+    backgroundImage: new UploadSetting({
+        title: 'Decorative Background',
+        defaultValue: ''
+    }),
+    style: new Settings('Style', {
+        cardBackground: new ColorSetting({
+            title: 'Card Background',
+            defaultValue: '#142636'
+        }),
+        innerBackground: new ColorSetting({
+            title: 'Inner Background',
+            defaultValue: 'rgba(177,202,223,0.05)'
+        }),
+        borderColor: new ColorSetting({
+            title: 'Border Color',
+            defaultValue: 'rgba(177,202,223,0.05)'
+        }),
+        headingColor: new ColorSetting({
+            title: 'Heading Color',
+            defaultValue: '#ffffff'
+        }),
+        descriptionColor: new ColorSetting({
+            title: 'Description Color',
+            defaultValue: 'rgba(255,255,255,0.8)'
+        }),
+        buttonBackground: new ColorSetting({
+            title: 'Button Background',
+            defaultValue: '#2EA043'
+        }),
+        buttonTextColor: new ColorSetting({
+            title: 'Button Text Color',
+            defaultValue: '#ffffff'
+        })
+    }),
+    layout: new Settings('Layout', {
+        marginTop: new NumberSetting({
+            title: 'Margin Top',
+            defaultValue: 0
+        }),
+        borderRadius: new NumberSetting({
+            title: 'Border Radius',
+            defaultValue: 8,
+            extra: { min: 0, max: 24, step: 1 }
+        })
+    })
+});

package/dist/elements/text/settings.d.ts

@@ -1,11 +1,16 @@
-import { TranslatableSetting, Settings, type InferSettingsMapType } from '../../settings';
+import { ColorSetting, NumberSetting, TextSetting, SelectSetting, TranslatableSetting, Settings, type InferSettingsMapType } from '../../settings';
 export declare const textSettings: Settings<{
     text: TranslatableSetting;
-    typography: Settings<{
-        color: import("../../settings").ColorSetting;
-        fontSize: import("../../settings").NumberSetting;
-        fontFamily: import("../../settings").TextSetting;
-        fontWeight: import("../../settings").SelectSetting;
+    style: Settings<{
+        color: ColorSetting;
+        fontSize: NumberSetting;
+        fontWeight: SelectSetting;
+        lineHeight: TextSetting;
+        align: SelectSetting;
+    }>;
+    layout: Settings<{
+        marginTop: NumberSetting;
+        marginBottom: NumberSetting;
     }>;
 }>;
 export type TextSettingsMap = InferSettingsMapType<typeof textSettings>;

package/dist/elements/text/settings.js

@@ -1,12 +1,56 @@
-import { TranslatableSetting, Settings, createTypographySettings } from '../../settings';
+import { ColorSetting, NumberSetting, TextSetting, SelectSetting, TranslatableSetting, Settings } from '../../settings';
 export const textSettings = new Settings('Text', {
     text: new TranslatableSetting({
         title: 'Text',
         defaultValue: { en: 'Enter your text here' }
     }),
-    typography: new Settings('Typography', {
-        ...createTypographySettings({
-            fontFamily: 'Arial'
+    style: new Settings('Style', {
+        color: new ColorSetting({
+            title: 'Text Color',
+            defaultValue: '#ffffff'
+        }),
+        fontSize: new NumberSetting({
+            title: 'Font Size',
+            defaultValue: 16,
+            extra: { min: 8, max: 96, step: 1 }
+        }),
+        fontWeight: new SelectSetting({
+            title: 'Font Weight',
+            defaultValue: '400',
+            extra: {
+                options: [
+                    { label: 'Normal', value: '400' },
+                    { label: 'Medium', value: '500' },
+                    { label: 'Semi Bold', value: '600' },
+                    { label: 'Bold', value: '700' },
+                    { label: 'Extra Bold', value: '800' }
+                ]
+            }
+        }),
+        lineHeight: new TextSetting({
+            title: 'Line Height',
+            defaultValue: '120%'
+        }),
+        align: new SelectSetting({
+            title: 'Text Align',
+            defaultValue: 'center',
+            extra: {
+                options: [
+                    { label: 'Left', value: 'left' },
+                    { label: 'Center', value: 'center' },
+                    { label: 'Right', value: 'right' }
+                ]
+            }
+        })
+    }),
+    layout: new Settings('Layout', {
+        marginTop: new NumberSetting({
+            title: 'Margin Top',
+            defaultValue: 0
+        }),
+        marginBottom: new NumberSetting({
+            title: 'Margin Bottom',
+            defaultValue: 0
         })
     })
 });

package/dist/elements/text/textElement.svelte

@@ -4,14 +4,18 @@
 	let { settings }: { settings: TextSettingsMap } = $props();
 </script>
 
-<div class="text-wrapper">
+<div
+	class="text-wrapper"
+	style="margin-top: {settings.marginTop}px; margin-bottom: {settings.marginBottom}px;"
+>
 	<p
 		class="text-element"
 		style="
+			color: {settings.color};
 			font-size: {settings.fontSize}px;
 			font-weight: {settings.fontWeight};
 			line-height: {settings.lineHeight};
-			letter-spacing: {settings.letterSpacing}px;
+			text-align: {settings.align};
 		"
 	>
 		{settings.text}
@@ -21,6 +25,7 @@
 <style>
 	.text-wrapper {
 		width: 100%;
+		max-width: 750px;
 		margin-left: auto;
 		margin-right: auto;
 	}

package/dist/renderer/registry.js

@@ -1,20 +1,14 @@
-import TextElement from '../elements/text/textElement.svelte';
-import ButtonElement from '../elements/button/buttonElement.svelte';
-import AuthElement from '../elements/auth/authElement.svelte';
 import BannerElement from '../elements/banner/bannerElement.svelte';
 import BadgeElement from '../elements/badge/badgeElement.svelte';
-import CardsElement from '../elements/cards/cardsElement.svelte';
-import DividerElement from '../elements/divider/dividerElement.svelte';
-import TermsElement from '../elements/terms/termsElement.svelte';
-import ProductsElement from '../elements/products/productsElement.svelte';
+import TextElement from '../elements/text/textElement.svelte';
+import ButtonElement from '../elements/button/buttonElement.svelte';
+import AccordionElement from '../elements/accordion/accordionElement.svelte';
+import CtaCardElement from '../elements/ctaCard/ctaCardElement.svelte';
 export const componentRegistry = {
-    text: TextElement,
-    button: ButtonElement,
-    auth: AuthElement,
     banner: BannerElement,
     badge: BadgeElement,
-    cards: CardsElement,
-    divider: DividerElement,
-    terms: TermsElement,
-    products: ProductsElement
+    text: TextElement,
+    button: ButtonElement,
+    accordion: AccordionElement,
+    ctaCard: CtaCardElement
 };