@papu1337/builder 0.0.5 → 1.0.1

package/dist/settings/types.d.ts

@@ -3,6 +3,9 @@ export type BaseSettingProps<V> = {
     title: string;
     onchange: (value: V) => void;
     onpreview?: (value: V) => void;
+    isMobile?: boolean;
+    overridden?: boolean;
+    onreset?: () => void;
 };
 export interface SettingComponent {
     readonly title: string;
@@ -15,7 +18,15 @@ export interface SettingsGroupComponent {
     readonly entries: SettingMap;
     clone(): SettingsGroupComponent;
 }
-export type SettingMapEntry = SettingComponent | SettingsGroupComponent;
+export interface SettingRepeaterComponent {
+    readonly title: string;
+    readonly component: unknown;
+    readonly factory: (index: number) => unknown;
+    getProps(): Record<string, unknown>;
+    resolvedValues(): unknown[];
+    clone(): SettingRepeaterComponent;
+}
+export type SettingMapEntry = SettingComponent | SettingsGroupComponent | SettingRepeaterComponent;
 export type SettingMap = Record<string, SettingMapEntry>;
 type ResolveValue<E> = E extends {
     isTranslatable: true;
@@ -25,7 +36,11 @@ type ResolveValue<E> = E extends {
 export type InferSettingsMapType<T> = T extends {
     entries: infer E;
 } ? {
-    [K in keyof E]: ResolveValue<E[K]>;
+    [K in keyof E]: E[K] extends {
+        entries: unknown;
+    } ? InferSettingsMapType<E[K]> : E[K] extends {
+        factory: (...args: never[]) => infer S;
+    } ? InferSettingsMapType<S>[] : ResolveValue<E[K]>;
 } : never;
 export type NumberExtra = {
     min?: number;
@@ -48,4 +63,15 @@ export type SelectOption = {
 export type SelectExtra = {
     options: SelectOption[];
 };
+export type SegmentOption = {
+    label: string;
+    value: string;
+    icon?: string;
+};
+export type SegmentExtra = {
+    options: SegmentOption[];
+};
+export type ColorExtra = {
+    allowGradient?: boolean;
+};
 export {};

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@papu1337/builder",
-	"version": "0.0.5",
+	"version": "1.0.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"build:renderer": "vite build --config vite.config.renderer.ts",
-		"prepack": "svelte-kit sync && svelte-package && npm run build:renderer && publint",
+		"build:builder": "vite build --config vite.config.builder.ts",
+		"prepack": "svelte-kit sync && svelte-package && npm run build:renderer && npm run build:builder && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
@@ -42,6 +43,11 @@
 		"./renderer/vanilla": {
 			"types": "./dist/renderer/types.d.ts",
 			"default": "./dist/renderer/renderer.vanilla.es.js"
+		},
+		"./builder": {
+			"types": "./dist/builder/index.d.ts",
+			"svelte": "./dist/builder/index.js",
+			"default": "./dist/builder/builder.vanilla.es.js"
 		}
 	},
 	"peerDependencies": {

package/dist/elements/accordion/accordionElement.svelte

@@ -1,101 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,49 +0,0 @@
-<script lang="ts">
-	import type { BadgeSettingsMap } from './settings';
-
-	let { settings }: { settings: BadgeSettingsMap } = $props();
-
-	const justifyMap: Record<string, string> = {
-		left: 'flex-start',
-		center: 'center',
-		right: 'flex-end'
-	};
-</script>
-
-<div
-	class="badge-wrapper"
-	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;
-		"
-	>
-		{settings.text}
-	</span>
-</div>
-
-<style>
-	.badge-wrapper {
-		display: flex;
-		max-width: 750px;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.badge {
-		display: inline-block;
-		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/badgeElement.svelte.d.ts

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

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

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

package/dist/elements/badge/settings.js

@@ -1,47 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
-export const badgeSettings = new Settings('Badge', {
-    text: new TextSetting({
-        title: 'Badge Text',
-        defaultValue: 'BUILD YOUR BET'
-    }),
-    backgroundColor: new ColorSetting({
-        title: 'Background Color',
-        defaultValue: 'rgba(63,185,80,0.2)'
-    }),
-    textColor: new ColorSetting({
-        title: 'Text Color',
-        defaultValue: '#9AE600'
-    }),
-    borderColor: new ColorSetting({
-        title: 'Border Color',
-        defaultValue: 'rgba(154,230,0,0.15)'
-    }),
-    borderRadius: new NumberSetting({
-        title: 'Border Radius',
-        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: 12,
-        extra: { min: 0, step: 1 }
-    }),
-    paddingY: new NumberSetting({
-        title: 'Padding Vertical',
-        defaultValue: 6,
-        extra: { min: 0, step: 1 }
-    }),
-    marginTop: new NumberSetting({
-        title: 'Margin Top',
-        defaultValue: 0
-    }),
-    align: new TextSetting({
-        title: 'Align (left / center / right)',
-        defaultValue: 'center'
-    })
-});

package/dist/elements/ctaCard/ctaCardElement.svelte

@@ -1,132 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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 }
-        })
-    })
-});