@papu1337/builder 0.0.5 → 1.0.1

package/dist/elements/howItWorks/howItWorksElement.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import type { HowItWorksSettingsMap } from './settings';
+	import GradientBorder from '../_shared/GradientBorder.svelte';
+	import Arrow from '../_shared/Arrow.svelte';
+
+	let { settings }: { settings: HowItWorksSettingsMap } = $props();
+
+	const defaultBorder =
+		'linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(13,25,35,0) 100%)';
+
+	const accentLine = (accent: string): string =>
+		`linear-gradient(90deg, rgba(22,45,63,0) 0%, ${accent} 50%, rgba(22,45,63,0) 100%)`;
+</script>
+
+<div class="hiw" style="margin-top: {settings.marginTop}px;">
+	{#if settings.title}
+		<h2 class="hiw-title">{settings.title}</h2>
+	{/if}
+
+	<div class="hiw-steps">
+		{#each settings.steps as step, index (index)}
+			<GradientBorder
+				className="hiw-step-border"
+				backgroundGradient={step.borderColor || defaultBorder}
+			>
+				<div class="hiw-step">
+					<div class="hiw-step-glow" style="background: {step.glowColor};"></div>
+					<div class="hiw-step-content">
+						<div class="hiw-step-head">
+							<h3 class="hiw-step-title">{step.title}</h3>
+							<p class="hiw-step-text">{step.description}</p>
+						</div>
+						{#if step.highlight}
+							<p class="hiw-step-highlight" style="color: {step.highlightColor};">
+								{step.highlight}
+							</p>
+						{/if}
+					</div>
+					<div
+						class="hiw-step-line"
+						style="background: {accentLine(step.accentColor || step.highlightColor)};"
+					></div>
+				</div>
+			</GradientBorder>
+
+			{#if index < settings.steps.length - 1}
+				<div class="hiw-arrow">
+					<Arrow width={10} height={10} direction="down" className="md-rotate-left" stroke="#fff" />
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	{#if settings.footer}
+		<div class="hiw-footer">
+			<p class="hiw-footer-text">{settings.footer}</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hiw {
+		position: relative;
+		width: 100%;
+		margin: 0 auto;
+		max-width: 56rem;
+		min-width: 0;
+	}
+
+	.hiw-title {
+		margin: 0 0 1rem;
+		font-size: 1.5rem;
+		font-weight: 700;
+		text-align: center;
+		color: inherit;
+	}
+
+	.hiw-steps {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		min-width: 0;
+	}
+
+	@container page (min-width: 768px) {
+		.hiw-steps {
+			flex-direction: row;
+			align-items: stretch;
+		}
+	}
+
+	:global(.hiw-step-border) {
+		width: 100%;
+		max-width: 320px;
+		flex: 1 1 0;
+		min-width: 0;
+		border-radius: 1rem;
+	}
+
+	@container page (min-width: 768px) {
+		:global(.hiw-step-border) {
+			max-width: 273px;
+		}
+	}
+
+	.hiw-step {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 1rem;
+		overflow: hidden;
+		border-radius: 1rem;
+		background: rgba(13, 25, 35, 0.7);
+		padding: 1rem;
+		min-height: 145px;
+		height: 100%;
+		width: 100%;
+	}
+
+	.hiw-step-glow {
+		pointer-events: none;
+		position: absolute;
+		right: -270px;
+		top: -150px;
+		height: 175px;
+		width: 445px;
+		transform: rotate(17deg);
+		border-radius: 9999px;
+		filter: blur(48px);
+	}
+
+	.hiw-step-content {
+		position: relative;
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 0.25rem;
+		text-align: center;
+	}
+
+	.hiw-step-head {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.hiw-step-title {
+		margin: 0;
+		font-size: 1.25rem;
+		font-weight: 700;
+		line-height: 1.1;
+		letter-spacing: -0.025em;
+		color: #fff;
+	}
+
+	.hiw-step-text {
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 400;
+		line-height: 1.6;
+		color: rgba(210, 216, 231, 0.92);
+	}
+
+	.hiw-step-highlight {
+		margin: 0;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		letter-spacing: -0.01em;
+		font-weight: 400;
+	}
+
+	.hiw-step-line {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		height: 1px;
+		width: 200px;
+		transform: translateX(-50%);
+	}
+
+	.hiw-arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		border: 1px solid rgba(255, 255, 255, 0.05);
+		background: rgba(13, 25, 35, 0.6);
+		padding: 0.375rem;
+	}
+
+	@container page (min-width: 768px) {
+		.hiw-arrow {
+			align-self: center;
+		}
+	}
+
+	.hiw-footer {
+		position: relative;
+		margin: 0 auto;
+		max-width: 800px;
+		border-radius: 0 0 1.5rem 1.5rem;
+		border: 1px solid #355d80;
+		border-top: 0;
+		background: linear-gradient(to bottom, #10202d, #162a3b);
+		padding: 1.25rem 0.75rem;
+		text-align: center;
+		backdrop-filter: blur(4px);
+	}
+
+	.hiw-footer-text {
+		margin: 0;
+		font-size: 0.875rem;
+		line-height: 1.5;
+		font-weight: 400;
+		color: #fff;
+	}
+</style>

package/dist/elements/howItWorks/howItWorksElement.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+import { Settings, NumberSetting, ColorSetting, TranslatableSetting, RepeaterSetting, type InferSettingsMapType } from '../../settings';
+export declare const howItWorksSettings: Settings<{
+    marginTop: NumberSetting;
+    title: TranslatableSetting;
+    steps: RepeaterSetting<{
+        title: TranslatableSetting;
+        description: TranslatableSetting;
+        highlight: TranslatableSetting;
+        highlightColor: ColorSetting;
+        glowColor: ColorSetting;
+        borderColor: ColorSetting;
+        accentColor: ColorSetting;
+    }>;
+    footer: TranslatableSetting;
+}>;
+export type HowItWorksSettingsMap = InferSettingsMapType<typeof howItWorksSettings>;

package/dist/elements/howItWorks/settings.js

@@ -0,0 +1,70 @@
+import { Settings, NumberSetting, ColorSetting, TranslatableSetting, RepeaterSetting } from '../../settings';
+const STEP_SEEDS = [
+    {
+        title: 'Place qualifying bets',
+        description: 'Bet on UEFA Champions League fixtures with at least 2 selections at minimum odds 1.50.',
+        highlight: 'Min stake $20 per matchweek',
+        highlightColor: '#E8C75C',
+        glowColor: 'rgba(231, 193, 70, 0.3)',
+        borderColor: 'linear-gradient(180deg, rgba(232, 199, 92, 0.5) 0%, rgba(13, 25, 35, 0) 100%)',
+        accentColor: '#FFCA16'
+    },
+    {
+        title: 'Hit the threshold',
+        description: 'Reach $50 turnover in a single matchweek to unlock the bigger reward.',
+        highlight: '$50+ unlocks $15 freebet',
+        highlightColor: '#7EE787',
+        glowColor: 'rgba(46, 160, 67, 0.3)',
+        borderColor: 'linear-gradient(180deg, rgba(63, 185, 80, 0.5) 0%, rgba(13, 25, 35, 0) 100%)',
+        accentColor: '#2CBA44'
+    },
+    {
+        title: 'Claim your freebet',
+        description: 'Freebets are credited within 24 hours after the matchweek and stay valid for 7 days.',
+        highlight: 'Use on any UCL market',
+        highlightColor: '#DAB2FF',
+        glowColor: 'rgba(173, 70, 255, 0.3)',
+        borderColor: 'linear-gradient(180deg, rgba(194, 122, 255, 0.5) 0%, rgba(13, 25, 35, 0) 100%)',
+        accentColor: '#B658C4'
+    }
+];
+const stepFactory = (index) => {
+    const seed = STEP_SEEDS[index] ?? {
+        title: 'New step',
+        description: 'Describe what the user does.',
+        highlight: '',
+        highlightColor: '#E8C75C',
+        glowColor: 'rgba(231, 193, 70, 0.3)',
+        borderColor: 'linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(13,25,35,0) 100%)',
+        accentColor: '#FFCA16'
+    };
+    return new Settings('Step', {
+        title: new TranslatableSetting({ title: 'Title', defaultValue: { en: seed.title } }),
+        description: new TranslatableSetting({
+            title: 'Description',
+            defaultValue: { en: seed.description }
+        }),
+        highlight: new TranslatableSetting({ title: 'Highlight', defaultValue: { en: seed.highlight } }),
+        highlightColor: new ColorSetting({ title: 'Highlight Color', defaultValue: seed.highlightColor }),
+        glowColor: new ColorSetting({ title: 'Glow Color', defaultValue: seed.glowColor }),
+        borderColor: new ColorSetting({ title: 'Border', defaultValue: seed.borderColor }),
+        accentColor: new ColorSetting({ title: 'Accent Color', defaultValue: seed.accentColor })
+    });
+};
+export const howItWorksSettings = new Settings('How It Works', {
+    marginTop: new NumberSetting({ title: 'Margin Top', defaultValue: 24, extra: { min: 0, max: 200 } }),
+    title: new TranslatableSetting({ title: 'Title', defaultValue: { en: '' } }),
+    steps: new RepeaterSetting({
+        title: 'Steps',
+        itemLabel: 'Step',
+        addButtonText: '+ Add step',
+        factory: stepFactory,
+        count: 3
+    }),
+    footer: new TranslatableSetting({
+        title: 'Footer',
+        defaultValue: {
+            en: 'Stake of a winning freebet is not returned with the payout. Only one freebet may be claimed per matchweek.'
+        }
+    })
+});

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

@@ -0,0 +1,17 @@
+import { Settings, NumberSetting, ColorSetting, TextSetting, TranslatableSetting, RepeaterSetting, type InferSettingsMapType } from '../../settings';
+export declare const stepsSettings: Settings<{
+    marginTop: NumberSetting;
+    steps: RepeaterSetting<{
+        number: TextSetting;
+        title: TranslatableSetting;
+        description: TranslatableSetting;
+        highlight: TranslatableSetting;
+        accentColor: ColorSetting;
+        highlightColor: ColorSetting;
+        barColor: ColorSetting;
+    }>;
+    exampleLabel: TranslatableSetting;
+    exampleText: TranslatableSetting;
+    exampleLabelColor: ColorSetting;
+}>;
+export type StepsSettingsMap = InferSettingsMapType<typeof stepsSettings>;

package/dist/elements/steps/settings.js

@@ -0,0 +1,69 @@
+import { Settings, NumberSetting, ColorSetting, TextSetting, TranslatableSetting, RepeaterSetting } from '../../settings';
+const STEP_SEEDS = [
+    {
+        number: '1',
+        title: 'Create Your Ticket',
+        description: 'Pick 3+ Wimbledon selections',
+        highlight: 'Min Odd: 1.4',
+        accentColor: '#E8C75C',
+        highlightColor: '#E8C75C',
+        barColor: '#E8C75C'
+    },
+    {
+        number: '2',
+        title: 'Place Your Bet',
+        description: 'Only combo bets qualify',
+        highlight: 'Min Bet: $30',
+        accentColor: '#35D1C8',
+        highlightColor: '#E8C75C',
+        barColor: '#15B7AE'
+    },
+    {
+        number: '3',
+        title: 'Get 15% Freebet',
+        description: 'If your qualifying combo loses',
+        highlight: 'Max Freebet: $100',
+        accentColor: '#CF96FF',
+        highlightColor: '#E8C75C',
+        barColor: '#CF96FF'
+    }
+];
+const stepFactory = (index) => {
+    const seed = STEP_SEEDS[index] ?? {
+        number: String(index + 1),
+        title: 'New step',
+        description: '',
+        highlight: '',
+        accentColor: '#E8C75C',
+        highlightColor: '#E8C75C',
+        barColor: '#E8C75C'
+    };
+    return new Settings('Step', {
+        number: new TextSetting({ title: 'Number', defaultValue: seed.number }),
+        title: new TranslatableSetting({ title: 'Title', defaultValue: { en: seed.title } }),
+        description: new TranslatableSetting({
+            title: 'Description',
+            defaultValue: { en: seed.description }
+        }),
+        highlight: new TranslatableSetting({ title: 'Highlight', defaultValue: { en: seed.highlight } }),
+        accentColor: new ColorSetting({ title: 'Accent Color', defaultValue: seed.accentColor }),
+        highlightColor: new ColorSetting({ title: 'Highlight Color', defaultValue: seed.highlightColor }),
+        barColor: new ColorSetting({ title: 'Bar Color', defaultValue: seed.barColor })
+    });
+};
+export const stepsSettings = new Settings('Steps', {
+    marginTop: new NumberSetting({ title: 'Margin Top', defaultValue: 24, extra: { min: 0, max: 200 } }),
+    steps: new RepeaterSetting({
+        title: 'Steps',
+        itemLabel: 'Step',
+        addButtonText: '+ Add step',
+        factory: stepFactory,
+        count: 3
+    }),
+    exampleLabel: new TranslatableSetting({ title: 'Example Label', defaultValue: { en: 'Example:' } }),
+    exampleText: new TranslatableSetting({
+        title: 'Example Text',
+        defaultValue: { en: ' Back team A to win, go 2-0 up, and get paid early regardless of the final outcome.' }
+    }),
+    exampleLabelColor: new ColorSetting({ title: 'Example Label Color', defaultValue: '#E8C75C' })
+});

package/dist/elements/steps/stepsElement.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import type { StepsSettingsMap } from './settings';
+
+	let { settings }: { settings: StepsSettingsMap } = $props();
+
+	const ringFill = (accent: string): string =>
+		`linear-gradient(135deg, color-mix(in srgb, ${accent} 18%, transparent) 0%, rgba(255,255,255,0.04) 55%, rgba(0,0,0,0) 100%)`;
+
+	const connectorBackground = (barColor: string, accent: string): string =>
+		`linear-gradient(180deg, ${barColor || accent} 0%, #142636 100%)`;
+</script>
+
+<div class="steps" style="margin-top: {settings.marginTop}px;">
+	<div class="steps-grid">
+		{#each settings.steps as step, index (index)}
+			<div class="steps-item">
+				<div class="steps-rail">
+					<div class="steps-badge">
+						<div class="steps-badge__ring" style="background-image: {ringFill(step.accentColor)};">
+							<span class="steps-badge__number" style="color: {step.accentColor};">
+								{step.number}
+							</span>
+						</div>
+					</div>
+					<div
+						class="steps-connector"
+						style="background: {connectorBackground(step.barColor, step.accentColor)};"
+						aria-hidden="true"
+					></div>
+				</div>
+				<div class="steps-body">
+					<h3 class="steps-title">{step.title}</h3>
+					<p class="steps-description">{step.description}</p>
+					{#if step.highlight}
+						<p class="steps-highlight" style="color: {step.highlightColor};">{step.highlight}</p>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	{#if settings.exampleText || settings.exampleLabel}
+		<div class="steps-example-wrap">
+			<div class="steps-example">
+				<p class="steps-example__text">
+					{#if settings.exampleLabel}<span
+							class="steps-example__label"
+							style="color: {settings.exampleLabelColor};">{settings.exampleLabel}</span
+						>{/if}<span>{settings.exampleText}</span>
+				</p>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.steps {
+		position: relative;
+		width: 100%;
+		min-width: 0;
+	}
+
+	.steps-grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 24px;
+	}
+
+	@container page (min-width: 768px) {
+		.steps-grid {
+			grid-template-columns: repeat(3, 1fr);
+			gap: 32px;
+		}
+	}
+
+	.steps-item {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.steps-rail {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 12px;
+		width: 100px;
+		flex-shrink: 0;
+	}
+
+	.steps-badge {
+		position: relative;
+		width: 72px;
+		height: 72px;
+		border-radius: 9999px;
+	}
+
+	.steps-badge__ring {
+		position: absolute;
+		inset: 0;
+		border-radius: 9999px;
+		border: 1px solid rgba(255, 255, 255, 0.18);
+	}
+
+	.steps-badge__number {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		white-space: nowrap;
+		font-size: 30px;
+		font-weight: 700;
+		line-height: 1.2;
+		letter-spacing: -0.8px;
+	}
+
+	.steps-connector {
+		width: 2px;
+		height: 72px;
+		flex-shrink: 0;
+	}
+
+	.steps-body {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+		min-width: 0;
+		padding-top: 19px;
+	}
+
+	.steps-title {
+		margin: 0;
+		width: 100%;
+		font-size: 24px;
+		font-weight: 700;
+		line-height: 1.2;
+		letter-spacing: -0.8px;
+		text-transform: uppercase;
+		color: #fff;
+	}
+
+	.steps-description {
+		margin: 0;
+		width: 100%;
+		font-size: 18px;
+		line-height: 1.5;
+		color: #b1cadf;
+	}
+
+	.steps-highlight {
+		margin: 0;
+		width: 100%;
+		font-size: 18px;
+		font-weight: 600;
+		line-height: 1.4;
+	}
+
+	@container page (min-width: 768px) {
+		.steps-body {
+			padding-top: 0;
+		}
+
+		.steps-title {
+			font-size: 30px;
+		}
+
+		.steps-description {
+			font-size: 16px;
+		}
+
+		.steps-highlight {
+			font-size: 16px;
+		}
+	}
+
+	.steps-example-wrap {
+		display: flex;
+		justify-content: center;
+		margin-top: 18px;
+	}
+
+	@container page (min-width: 768px) {
+		.steps-example-wrap {
+			margin-top: 0;
+		}
+	}
+
+	.steps-example {
+		position: relative;
+		width: 100%;
+		max-width: 800px;
+		padding: 12px 16px;
+		border: 1px solid rgba(177, 202, 223, 0.2);
+		border-radius: 24px;
+		background: linear-gradient(
+			180deg,
+			rgba(13, 25, 35, 0) 0%,
+			rgba(177, 202, 223, 0.1) 100%
+		);
+		backdrop-filter: blur(7.5px);
+		-webkit-backdrop-filter: blur(7.5px);
+		text-align: center;
+	}
+
+	.steps-example__text {
+		margin: 0;
+		font-size: 14px;
+		line-height: 1.5;
+		font-weight: 400;
+		color: #fff;
+	}
+
+	.steps-example__label {
+		font-weight: 700;
+		margin-right: 4px;
+	}
+</style>

package/dist/elements/steps/stepsElement.svelte.d.ts

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

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

@@ -0,0 +1,14 @@
+import { Settings, NumberSetting, ColorSetting, SelectSetting, TranslatableSetting, RepeaterSetting, type InferSettingsMapType } from '../../settings';
+export declare const termsSettings: Settings<{
+    marginTop: NumberSetting;
+    title: TranslatableSetting;
+    panelBgColor: ColorSetting;
+    borderColor: ColorSetting;
+    textColor: ColorSetting;
+    openByDefault: SelectSetting;
+    sections: RepeaterSetting<{
+        title: TranslatableSetting;
+        lines: TranslatableSetting;
+    }>;
+}>;
+export type TermsSettingsMap = InferSettingsMapType<typeof termsSettings>;

package/dist/elements/terms/settings.js

@@ -0,0 +1,32 @@
+import { Settings, NumberSetting, ColorSetting, SelectSetting, TranslatableSetting, RepeaterSetting } from '../../settings';
+const sectionFactory = () => new Settings('Section', {
+    title: new TranslatableSetting({ title: 'Title', defaultValue: { en: 'Eligibility' } }),
+    lines: new TranslatableSetting({
+        title: 'Lines (one per row)',
+        defaultValue: { en: 'Promotion is available to verified accounts only.' }
+    })
+});
+export const termsSettings = new Settings('Terms', {
+    marginTop: new NumberSetting({ title: 'Margin Top', defaultValue: 0, extra: { min: 0, max: 200 } }),
+    title: new TranslatableSetting({ title: 'Title', defaultValue: { en: 'Terms and conditions' } }),
+    panelBgColor: new ColorSetting({ title: 'Panel Background', defaultValue: '#162D3F' }),
+    borderColor: new ColorSetting({ title: 'Border', defaultValue: 'rgba(177,202,223,0.05)' }),
+    textColor: new ColorSetting({ title: 'Text Color', defaultValue: '#B1CADF' }),
+    openByDefault: new SelectSetting({
+        title: 'Open by default',
+        defaultValue: 'true',
+        extra: {
+            options: [
+                { label: 'Closed', value: 'false' },
+                { label: 'Open', value: 'true' }
+            ]
+        }
+    }),
+    sections: new RepeaterSetting({
+        title: 'Sections',
+        itemLabel: 'Section',
+        addButtonText: '+ Add section',
+        factory: sectionFactory,
+        count: 2
+    })
+});