@papu1337/builder 0.0.3 → 0.0.5

package/README.md

@@ -1,65 +1 @@
-# Svelte library
-
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-To recreate this project with the same configuration:
-
-```sh
-# recreate this project
-pnpm dlx sv@0.12.8 create --template library --types ts --add prettier eslint vitest="usages:unit,component" tailwindcss="plugins:typography,forms" --install pnpm build
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```
+# builder

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 }
         })
     })