@papu1337/builder 0.0.3

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

@@ -0,0 +1,11 @@
+import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const termsSettings: Settings<{
+    marginTop: NumberSetting;
+    title: TextSetting;
+    sections: ListSetting;
+    backgroundColor: ColorSetting;
+    borderColor: ColorSetting;
+    textColor: ColorSetting;
+    arrowBackground: ColorSetting;
+}>;
+export type TermsSettingsMap = InferSettingsMapType<typeof termsSettings>;

package/dist/elements/terms/settings.js

@@ -0,0 +1,39 @@
+import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings } from '../../settings';
+export const termsSettings = new Settings('Terms', {
+    marginTop: new NumberSetting({
+        title: 'Margin Top',
+        defaultValue: 0
+    }),
+    title: new TextSetting({
+        title: 'Title',
+        defaultValue: 'Terms & Conditions'
+    }),
+    sections: new ListSetting({
+        title: 'Sections',
+        defaultValue: [
+            { title: 'About the Promotion', content: 'Enter promotion details here.' },
+            { title: 'Bonus Game Rules and Prizes', content: 'Enter bonus game rules here.' }
+        ],
+        extra: {
+            addButtonText: '+ Add Section',
+            titlePlaceholder: 'Section title',
+            contentPlaceholder: 'Section content'
+        }
+    }),
+    backgroundColor: new ColorSetting({
+        title: 'Background Color',
+        defaultValue: '#162D3F'
+    }),
+    borderColor: new ColorSetting({
+        title: 'Border Color',
+        defaultValue: 'rgba(177,202,223,0.1)'
+    }),
+    textColor: new ColorSetting({
+        title: 'Text Color',
+        defaultValue: '#ffffff'
+    }),
+    arrowBackground: new ColorSetting({
+        title: 'Arrow Background',
+        defaultValue: '#33475b'
+    })
+});

package/dist/elements/terms/termsElement.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import type { TermsSettingsMap } from './settings';
+
+	let { settings }: { settings: TermsSettingsMap } = $props();
+
+	let expandedSet = $state<Set<number>>(new Set());
+
+	function toggle(index: number) {
+		if (expandedSet.has(index)) {
+			expandedSet.delete(index);
+		} else {
+			expandedSet.add(index);
+		}
+		expandedSet = new Set(expandedSet);
+	}
+</script>
+
+<div class="terms-wrapper" style="margin-top: {settings.marginTop}px;">
+	<div
+		class="terms-container"
+		style="background-color: {settings.backgroundColor}; border: 1px solid {settings.borderColor};"
+	>
+		<div class="terms-main-header" style="color: {settings.textColor};">
+			<span class="terms-main-title">{settings.title}</span>
+		</div>
+
+		{#each settings.sections as section, i}
+			<div class="terms-section" style="border-color: {settings.borderColor};">
+				<button class="terms-header" onclick={() => toggle(i)} style="color: {settings.textColor};">
+					<span class="terms-title">{section.title}</span>
+					<div
+						class="terms-arrow"
+						class:rotated={expandedSet.has(i)}
+						style="background: {settings.arrowBackground};"
+					>
+						<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+							<path d="M8 11L3 5.5h10L8 11z" fill="currentColor" />
+						</svg>
+					</div>
+				</button>
+				{#if expandedSet.has(i)}
+					<div class="terms-content" style="color: {settings.textColor};">
+						<p>{section.content}</p>
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.terms-wrapper {
+		max-width: 750px;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.terms-container {
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	.terms-main-header {
+		padding: 18px 20px;
+		border-bottom: 1px solid rgba(177, 202, 223, 0.1);
+	}
+
+	.terms-main-title {
+		font-size: 1.15rem;
+		font-weight: 600;
+	}
+
+	.terms-section {
+		border-top: 1px solid;
+	}
+
+	.terms-section:first-of-type {
+		border-top: none;
+	}
+
+	.terms-header {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16px 20px;
+		background: none;
+		border: none;
+		cursor: pointer;
+	}
+
+	.terms-title {
+		font-size: 1rem;
+		font-weight: 500;
+		text-align: start;
+	}
+
+	.terms-arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		padding: 4px;
+		transition: transform 0.2s ease;
+		flex-shrink: 0;
+	}
+
+	.terms-arrow.rotated {
+		transform: rotate(180deg);
+	}
+
+	.terms-content {
+		padding: 0 20px 20px;
+		font-size: 0.875rem;
+		line-height: 1.6;
+		opacity: 0.8;
+	}
+
+	.terms-content p {
+		margin: 0;
+	}
+</style>

package/dist/elements/terms/termsElement.svelte.d.ts

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

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

@@ -0,0 +1,11 @@
+import { 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;
+    }>;
+}>;
+export type TextSettingsMap = InferSettingsMapType<typeof textSettings>;

package/dist/elements/text/settings.js

@@ -0,0 +1,12 @@
+import { TranslatableSetting, Settings, createTypographySettings } 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'
+        })
+    })
+});

package/dist/elements/text/textElement.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { TextSettingsMap } from './settings';
+
+	let { settings }: { settings: TextSettingsMap } = $props();
+</script>
+
+<div class="text-wrapper">
+	<p
+		class="text-element"
+		style="
+			font-size: {settings.fontSize}px;
+			font-weight: {settings.fontWeight};
+			line-height: {settings.lineHeight};
+			letter-spacing: {settings.letterSpacing}px;
+		"
+	>
+		{settings.text}
+	</p>
+</div>
+
+<style>
+	.text-wrapper {
+		width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.text-element {
+		margin: 0;
+		word-wrap: break-word;
+		white-space: pre-wrap;
+	}
+</style>

package/dist/elements/text/textElement.svelte.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './settings/base.svelte';
+export * from './settings/implementation.svelte';
+export * from './settings/types';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './settings/base.svelte';
+export * from './settings/implementation.svelte';
+export * from './settings/types';

package/dist/renderer/BuilderRenderer.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { RendererProps } from './types.js';
+	import { componentRegistry } from './registry.js';
+	import { resolveSettings } from './resolve.js';
+
+	let { data, locale = 'en', containerClass = '', containerStyle = '' }: RendererProps = $props();
+
+	const globalStyle = $derived(() => {
+		const g = data.global;
+		return [
+			`background: ${g.background ?? '#ffffff'}`,
+			`padding-top: ${g.paddingTop ?? 0}px`,
+			`padding-bottom: ${g.paddingBottom ?? 0}px`,
+			`padding-left: ${g.paddingLeft ?? 0}px`,
+			`padding-right: ${g.paddingRight ?? 0}px`,
+			containerStyle
+		]
+			.filter(Boolean)
+			.join('; ');
+	});
+
+	const resolvedComponents = $derived(
+		data.components
+			.map((entry) => ({
+				component: componentRegistry[entry.name],
+				settings: resolveSettings(entry.settings, locale),
+				name: entry.name
+			}))
+			.filter((c) => c.component !== undefined)
+	);
+</script>
+
+<div class={containerClass} style={globalStyle()}>
+	{#each resolvedComponents as { component, settings, name } (name + JSON.stringify(settings))}
+		{@const Component = component}
+		<Component {settings} />
+	{/each}
+</div>

package/dist/renderer/BuilderRenderer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RendererProps } from './types.js';
+declare const BuilderRenderer: import("svelte").Component<RendererProps, {}, "">;
+type BuilderRenderer = ReturnType<typeof BuilderRenderer>;
+export default BuilderRenderer;

package/dist/renderer/index.d.ts

@@ -0,0 +1,4 @@
+export { default as BuilderRenderer } from './BuilderRenderer.svelte';
+export { resolveSettings } from './resolve.js';
+export { componentRegistry } from './registry.js';
+export type { RendererProps, VanillaRendererInstance, ExportedState, ExportedEntry } from './types.js';

package/dist/renderer/index.js

@@ -0,0 +1,3 @@
+export { default as BuilderRenderer } from './BuilderRenderer.svelte';
+export { resolveSettings } from './resolve.js';
+export { componentRegistry } from './registry.js';

package/dist/renderer/registry.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+type AnyComponent = Component<any>;
+export declare const componentRegistry: Record<string, AnyComponent>;
+export {};

package/dist/renderer/registry.js

@@ -0,0 +1,20 @@
+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';
+export const componentRegistry = {
+    text: TextElement,
+    button: ButtonElement,
+    auth: AuthElement,
+    banner: BannerElement,
+    badge: BadgeElement,
+    cards: CardsElement,
+    divider: DividerElement,
+    terms: TermsElement,
+    products: ProductsElement
+};