@papu1337/builder 0.0.4 → 0.0.5

package/dist/elements/accordion/accordionElement.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import type { AccordionSettingsMap } from './settings';
+
+	let { settings }: { settings: AccordionSettingsMap } = $props();
+
+	let expandedIndex = $state<number | null>(null);
+
+	function toggle(index: number): void {
+		expandedIndex = expandedIndex === index ? null : index;
+	}
+</script>
+
+<div class="accordion-wrapper" style="margin-top: {settings.marginTop}px; gap: {settings.gap}px;">
+	{#each settings.sections as section, i}
+		<div
+			class="accordion-section"
+			style="background-color: {settings.backgroundColor}; border: 1px solid {settings.borderColor};"
+		>
+			<button
+				class="accordion-header"
+				style="color: {settings.textColor};"
+				onclick={() => toggle(i)}
+			>
+				<span class="accordion-title">{section.title}</span>
+				<div
+					class="accordion-arrow"
+					class:rotated={expandedIndex === i}
+					style="background: {settings.arrowBackground}; border: 0.5px solid {settings.arrowBorderColor};"
+				>
+					<svg width="15" height="15" viewBox="0 0 16 16" fill="none">
+						<path d="M8 11L3 5.5h10L8 11z" fill="currentColor" />
+					</svg>
+				</div>
+			</button>
+			{#if expandedIndex === i}
+				<div class="accordion-content" style="color: {settings.contentColor};">
+					<p>{section.content}</p>
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.accordion-wrapper {
+		display: flex;
+		flex-direction: column;
+		max-width: 750px;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.accordion-section {
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	.accordion-header {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16px;
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.accordion-title {
+		font-size: 1.1rem;
+		font-weight: 600;
+	}
+
+	.accordion-arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		transition: transform 0.2s ease-in-out;
+		flex-shrink: 0;
+		backdrop-filter: blur(15px);
+	}
+
+	.accordion-arrow.rotated {
+		transform: rotate(180deg);
+	}
+
+	.accordion-content {
+		padding: 0 16px 16px;
+		font-size: 0.875rem;
+		line-height: 1.6;
+	}
+
+	.accordion-content p {
+		margin: 0;
+		white-space: pre-wrap;
+	}
+</style>

package/dist/elements/accordion/accordionElement.svelte.d.ts

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

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

@@ -0,0 +1,17 @@
+import { ColorSetting, NumberSetting, ListSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const accordionSettings: Settings<{
+    sections: ListSetting;
+    style: Settings<{
+        backgroundColor: ColorSetting;
+        borderColor: ColorSetting;
+        textColor: ColorSetting;
+        contentColor: ColorSetting;
+        arrowBackground: ColorSetting;
+        arrowBorderColor: ColorSetting;
+    }>;
+    layout: Settings<{
+        marginTop: NumberSetting;
+        gap: NumberSetting;
+    }>;
+}>;
+export type AccordionSettingsMap = InferSettingsMapType<typeof accordionSettings>;

package/dist/elements/accordion/settings.js

@@ -0,0 +1,54 @@
+import { ColorSetting, NumberSetting, ListSetting, Settings } from '../../settings';
+export const accordionSettings = new Settings('Accordion', {
+    sections: new ListSetting({
+        title: 'Sections',
+        defaultValue: [
+            { title: 'What is Bet Builder?', content: 'Bet Builder lets you combine multiple selections from the same match into one bet.' },
+            { title: 'How to Build a Bet', content: '1. Pick a match\n2. Select your markets\n3. Confirm your bet' },
+            { title: 'How It Works', content: 'Choose from available markets and combine them for bigger odds.' },
+            { title: 'Important Terms', content: 'All selections must be from the same match. Minimum odds may apply.' }
+        ],
+        extra: {
+            addButtonText: '+ Add Section',
+            titlePlaceholder: 'Section title',
+            contentPlaceholder: 'Section content'
+        }
+    }),
+    style: new Settings('Style', {
+        backgroundColor: new ColorSetting({
+            title: 'Background Color',
+            defaultValue: '#142636'
+        }),
+        borderColor: new ColorSetting({
+            title: 'Border Color',
+            defaultValue: 'rgba(177,202,223,0.05)'
+        }),
+        textColor: new ColorSetting({
+            title: 'Text Color',
+            defaultValue: '#ffffff'
+        }),
+        contentColor: new ColorSetting({
+            title: 'Content Text Color',
+            defaultValue: 'rgba(255,255,255,0.6)'
+        }),
+        arrowBackground: new ColorSetting({
+            title: 'Arrow Background',
+            defaultValue: 'rgba(228,246,255,0.1)'
+        }),
+        arrowBorderColor: new ColorSetting({
+            title: 'Arrow Border Color',
+            defaultValue: 'rgba(177,202,223,0.1)'
+        })
+    }),
+    layout: new Settings('Layout', {
+        marginTop: new NumberSetting({
+            title: 'Margin Top',
+            defaultValue: 0
+        }),
+        gap: new NumberSetting({
+            title: 'Gap Between Sections',
+            defaultValue: 12,
+            extra: { min: 0, max: 32, step: 1 }
+        })
+    })
+});

package/dist/elements/badge/badgeElement.svelte

@@ -12,14 +12,14 @@
 
 <div
 	class="badge-wrapper"
-	style="justify-content: {justifyMap[settings.align] ??
-		'center'}; margin-top: {settings.marginTop}px;"
+	style="justify-content: {justifyMap[settings.align] ?? 'center'}; margin-top: {settings.marginTop}px;"
 >
 	<span
 		class="badge"
 		style="
 			background: {settings.backgroundColor};
 			color: {settings.textColor};
+			border: 0.5px solid {settings.borderColor};
 			border-radius: {settings.borderRadius}px;
 			padding: {settings.paddingY}px {settings.paddingX}px;
 			font-size: {settings.fontSize}px;
@@ -39,10 +39,11 @@
 
 	.badge {
 		display: inline-block;
-		font-weight: 700;
+		font-weight: 500;
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		line-height: 1;
 		white-space: nowrap;
+		backdrop-filter: blur(12px);
 	}
 </style>

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

@@ -1,13 +1,14 @@
 import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
 export declare const badgeSettings: Settings<{
-    marginTop: NumberSetting;
     text: TextSetting;
     backgroundColor: ColorSetting;
     textColor: ColorSetting;
+    borderColor: ColorSetting;
     borderRadius: NumberSetting;
+    fontSize: NumberSetting;
     paddingX: NumberSetting;
     paddingY: NumberSetting;
-    fontSize: NumberSetting;
+    marginTop: NumberSetting;
     align: TextSetting;
 }>;
 export type BadgeSettingsMap = InferSettingsMapType<typeof badgeSettings>;

package/dist/elements/badge/settings.js

@@ -1,54 +1,44 @@
 import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
 export const badgeSettings = new Settings('Badge', {
-    marginTop: new NumberSetting({
-        title: 'Margin Top',
-        defaultValue: 0
-    }),
     text: new TextSetting({
         title: 'Badge Text',
-        defaultValue: 'NEW'
+        defaultValue: 'BUILD YOUR BET'
     }),
     backgroundColor: new ColorSetting({
         title: 'Background Color',
-        defaultValue: '#f0c845'
+        defaultValue: 'rgba(63,185,80,0.2)'
     }),
     textColor: new ColorSetting({
         title: 'Text Color',
-        defaultValue: '#000000'
+        defaultValue: '#9AE600'
+    }),
+    borderColor: new ColorSetting({
+        title: 'Border Color',
+        defaultValue: 'rgba(154,230,0,0.15)'
     }),
     borderRadius: new NumberSetting({
         title: 'Border Radius',
-        defaultValue: 20,
-        extra: {
-            min: 0,
-            max: 50,
-            step: 1
-        }
+        defaultValue: 50,
+        extra: { min: 0, max: 50, step: 1 }
+    }),
+    fontSize: new NumberSetting({
+        title: 'Font Size',
+        defaultValue: 14,
+        extra: { min: 8, max: 32, step: 1 }
     }),
     paddingX: new NumberSetting({
         title: 'Padding Horizontal',
-        defaultValue: 16,
-        extra: {
-            min: 0,
-            step: 1
-        }
+        defaultValue: 12,
+        extra: { min: 0, step: 1 }
     }),
     paddingY: new NumberSetting({
         title: 'Padding Vertical',
         defaultValue: 6,
-        extra: {
-            min: 0,
-            step: 1
-        }
+        extra: { min: 0, step: 1 }
     }),
-    fontSize: new NumberSetting({
-        title: 'Font Size',
-        defaultValue: 12,
-        extra: {
-            min: 8,
-            max: 32,
-            step: 1
-        }
+    marginTop: new NumberSetting({
+        title: 'Margin Top',
+        defaultValue: 0
     }),
     align: new TextSetting({
         title: 'Align (left / center / right)',

package/dist/elements/banner/bannerElement.svelte

@@ -4,24 +4,52 @@
 	let { settings }: { settings: BannerSettingsMap } = $props();
 </script>
 
-{#if settings.image}
-	<img src={settings.image} alt="Banner" class="banner-image" />
-{:else}
-	<div class="banner-placeholder">
-		<span class="placeholder-icon">&#128444;</span>
-		<span class="placeholder-text">No image — select this element and upload one</span>
-	</div>
-{/if}
+<div
+	class="banner-wrapper"
+	style="background-color: {settings.backgroundColor}; min-height: {settings.minHeight}px;"
+>
+	{#if settings.desktopImage}
+		<img src={settings.desktopImage} alt="Banner" class="banner-desktop" />
+	{/if}
+	{#if settings.mobileImage}
+		<img src={settings.mobileImage} alt="Banner mobile" class="banner-mobile" />
+	{/if}
+	{#if !settings.desktopImage && !settings.mobileImage}
+		<div class="banner-placeholder">
+			<span class="placeholder-icon">&#128444;</span>
+			<span class="placeholder-text">Upload desktop and/or mobile banner images</span>
+		</div>
+	{/if}
+</div>
 
 <style>
-	.banner-image {
+	.banner-wrapper {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.banner-desktop,
+	.banner-mobile {
 		display: block;
 		width: 100%;
 		height: auto;
-		max-height: 480px;
 		object-fit: cover;
 	}
 
+	.banner-mobile {
+		display: none;
+	}
+
+	@media (max-width: 768px) {
+		.banner-desktop {
+			display: none;
+		}
+		.banner-mobile {
+			display: block;
+		}
+	}
+
 	.banner-placeholder {
 		display: flex;
 		flex-direction: column;

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

@@ -1,6 +1,8 @@
-import { NumberSetting, UploadSetting, Settings, type InferSettingsMapType } from '../../settings';
+import { ColorSetting, NumberSetting, UploadSetting, Settings, type InferSettingsMapType } from '../../settings';
 export declare const bannerSettings: Settings<{
-    image: UploadSetting;
-    number: NumberSetting;
+    desktopImage: UploadSetting;
+    mobileImage: UploadSetting;
+    backgroundColor: ColorSetting;
+    minHeight: NumberSetting;
 }>;
 export type BannerSettingsMap = InferSettingsMapType<typeof bannerSettings>;

package/dist/elements/banner/settings.js

@@ -1,15 +1,20 @@
-import { NumberSetting, UploadSetting, Settings } from '../../settings';
+import { ColorSetting, NumberSetting, UploadSetting, Settings } from '../../settings';
 export const bannerSettings = new Settings('Banner', {
-    image: new UploadSetting({
-        title: 'Image',
+    desktopImage: new UploadSetting({
+        title: 'Desktop Image',
         defaultValue: ''
     }),
-    number: new NumberSetting({
-        title: 'Number',
-        defaultValue: 123,
-        extra: {
-            min: 0,
-            step: 1
-        }
+    mobileImage: new UploadSetting({
+        title: 'Mobile Image',
+        defaultValue: ''
+    }),
+    backgroundColor: new ColorSetting({
+        title: 'Background Color',
+        defaultValue: '#10202D'
+    }),
+    minHeight: new NumberSetting({
+        title: 'Min Height (px)',
+        defaultValue: 400,
+        extra: { min: 100, max: 1000, step: 10 }
     })
 });

package/dist/elements/button/buttonElement.svelte

@@ -5,9 +5,10 @@
 </script>
 
 <div class="button-wrapper" style="margin-top: {settings.marginTop}px;">
-	<button
+	<a
+		href={settings.link}
 		class="cta-button"
-		style="	
+		style="
 			background: {settings.backgroundColor};
 			color: {settings.textColor};
 			border-radius: {settings.borderRadius}px;
@@ -16,7 +17,7 @@
 		"
 	>
 		{settings.text}
-	</button>
+	</a>
 </div>
 
 <style>
@@ -29,10 +30,13 @@
 	}
 
 	.cta-button {
+		display: inline-block;
 		font-weight: 700;
 		border: none;
 		cursor: pointer;
 		letter-spacing: 0.02em;
+		text-decoration: none;
+		text-align: center;
 		transition: opacity 0.2s ease;
 	}
 

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

@@ -1,6 +1,7 @@
 import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
 export declare const buttonSettings: Settings<{
     text: TextSetting;
+    link: TextSetting;
     style: Settings<{
         backgroundColor: ColorSetting;
         textColor: ColorSetting;

package/dist/elements/button/settings.js

@@ -2,20 +2,24 @@ import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settin
 export const buttonSettings = new Settings('Button', {
     text: new TextSetting({
         title: 'Button Text',
-        defaultValue: 'Bet Now'
+        defaultValue: 'READY TO BUILD'
+    }),
+    link: new TextSetting({
+        title: 'Link URL',
+        defaultValue: '/crypto-sportsbook'
     }),
     style: new Settings('Style', {
         backgroundColor: new ColorSetting({
             title: 'Background Color',
-            defaultValue: '#f0c845'
+            defaultValue: '#2EA043'
         }),
         textColor: new ColorSetting({
             title: 'Text Color',
-            defaultValue: '#000000'
+            defaultValue: '#ffffff'
         }),
         fontSize: new NumberSetting({
             title: 'Font Size',
-            defaultValue: 18,
+            defaultValue: 16,
             extra: { min: 10, max: 48, step: 1 }
         }),
         borderRadius: new NumberSetting({
@@ -31,12 +35,12 @@ export const buttonSettings = new Settings('Button', {
         }),
         paddingX: new NumberSetting({
             title: 'Padding Horizontal',
-            defaultValue: 48,
+            defaultValue: 46,
             extra: { min: 0, step: 1 }
         }),
         paddingY: new NumberSetting({
             title: 'Padding Vertical',
-            defaultValue: 18,
+            defaultValue: 16,
             extra: { min: 0, step: 1 }
         })
     })

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>;