@papu1337/builder 0.0.3

package/README.md

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

package/dist/elements/auth/authElement.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { AuthSettingsMap } from './settings';
+
+	let { settings }: { settings: AuthSettingsMap } = $props();
+</script>
+
+<div
+	class="auth-banner"
+	style="border-color: {settings.borderColor}; background: {settings.backgroundColor}; margin-top: {settings.marginTop}px; padding: {settings.padding}px;"
+>
+	<div class="auth-left">
+		<div class="auth-icon" style="border-color: {settings.iconColor};">
+			<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+				<path
+					d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"
+					fill={settings.iconColor}
+				/>
+			</svg>
+		</div>
+		<p class="auth-prompt" style="color: {settings.textColor};">
+			{settings.promptText}
+		</p>
+	</div>
+	<div class="auth-buttons">
+		<button
+			class="auth-btn login-btn"
+			style="background: {settings.loginButtonBackground}; color: {settings.loginButtonColor};"
+		>
+			{settings.loginButtonText}
+		</button>
+		<button
+			class="auth-btn signup-btn"
+			style="background: {settings.signupButtonBackground}; color: {settings.signupButtonColor};"
+		>
+			{settings.signupButtonText}
+		</button>
+	</div>
+</div>
+
+<style>
+	.auth-banner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 20px;
+		border-radius: 10px;
+		border: 1.5px solid;
+		max-width: 750px;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.auth-left {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		flex: 1;
+	}
+
+	.auth-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		border-radius: 50%;
+		border: 2px solid;
+		flex-shrink: 0;
+	}
+
+	.auth-prompt {
+		font-size: 0.95rem;
+		line-height: 1.4;
+		margin: 0;
+	}
+
+	.auth-buttons {
+		display: flex;
+		gap: 12px;
+		flex-shrink: 0;
+	}
+
+	.auth-btn {
+		height: 48px;
+		border-radius: 8px;
+		padding: 13px 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 14px;
+		font-weight: 600;
+		border: none;
+		cursor: pointer;
+		white-space: nowrap;
+	}
+
+	@media (max-width: 640px) {
+		.auth-banner {
+			flex-direction: column;
+			text-align: center;
+		}
+
+		.auth-left {
+			flex-direction: column;
+		}
+
+		.auth-buttons {
+			width: 100%;
+		}
+
+		.auth-btn {
+			flex: 1;
+		}
+	}
+</style>

package/dist/elements/auth/authElement.svelte.d.ts

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

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

@@ -0,0 +1,25 @@
+import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const authSettings: Settings<{
+    layout: Settings<{
+        marginTop: NumberSetting;
+        padding: NumberSetting;
+    }>;
+    content: Settings<{
+        promptText: TextSetting;
+        loginButtonText: TextSetting;
+        signupButtonText: TextSetting;
+    }>;
+    colors: Settings<{
+        borderColor: ColorSetting;
+        backgroundColor: ColorSetting;
+        textColor: ColorSetting;
+        iconColor: ColorSetting;
+    }>;
+    buttons: Settings<{
+        loginButtonBackground: ColorSetting;
+        loginButtonColor: ColorSetting;
+        signupButtonBackground: ColorSetting;
+        signupButtonColor: ColorSetting;
+    }>;
+}>;
+export type AuthSettingsMap = InferSettingsMapType<typeof authSettings>;

package/dist/elements/auth/settings.js

@@ -0,0 +1,63 @@
+import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
+export const authSettings = new Settings('Auth', {
+    layout: new Settings('Layout', {
+        marginTop: new NumberSetting({
+            title: 'Margin Top',
+            defaultValue: 0
+        }),
+        padding: new NumberSetting({
+            title: 'Padding',
+            defaultValue: 20
+        })
+    }),
+    content: new Settings('Content', {
+        promptText: new TextSetting({
+            title: 'Prompt Text',
+            defaultValue: 'Log in or sign up now to participate in the campaign!'
+        }),
+        loginButtonText: new TextSetting({
+            title: 'Login Button Text',
+            defaultValue: 'Log In'
+        }),
+        signupButtonText: new TextSetting({
+            title: 'Signup Button Text',
+            defaultValue: 'Sign Up'
+        })
+    }),
+    colors: new Settings('Colors', {
+        borderColor: new ColorSetting({
+            title: 'Border Color',
+            defaultValue: '#b8962a'
+        }),
+        backgroundColor: new ColorSetting({
+            title: 'Background Color',
+            defaultValue: '#1a2e3e'
+        }),
+        textColor: new ColorSetting({
+            title: 'Text Color',
+            defaultValue: '#ffffff'
+        }),
+        iconColor: new ColorSetting({
+            title: 'Icon Color',
+            defaultValue: '#ffffff'
+        })
+    }),
+    buttons: new Settings('Buttons', {
+        loginButtonBackground: new ColorSetting({
+            title: 'Login Button Background',
+            defaultValue: '#4a5568'
+        }),
+        loginButtonColor: new ColorSetting({
+            title: 'Login Button Text Color',
+            defaultValue: '#ffffff'
+        }),
+        signupButtonBackground: new ColorSetting({
+            title: 'Signup Button Background',
+            defaultValue: '#f0c845'
+        }),
+        signupButtonColor: new ColorSetting({
+            title: 'Signup Button Text Color',
+            defaultValue: '#000000'
+        })
+    })
+});

package/dist/elements/badge/badgeElement.svelte

@@ -0,0 +1,48 @@
+<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-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: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		line-height: 1;
+		white-space: nowrap;
+	}
+</style>

package/dist/elements/badge/badgeElement.svelte.d.ts

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

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

package/dist/elements/badge/settings.js

@@ -0,0 +1,57 @@
+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'
+    }),
+    backgroundColor: new ColorSetting({
+        title: 'Background Color',
+        defaultValue: '#f0c845'
+    }),
+    textColor: new ColorSetting({
+        title: 'Text Color',
+        defaultValue: '#000000'
+    }),
+    borderRadius: new NumberSetting({
+        title: 'Border Radius',
+        defaultValue: 20,
+        extra: {
+            min: 0,
+            max: 50,
+            step: 1
+        }
+    }),
+    paddingX: new NumberSetting({
+        title: 'Padding Horizontal',
+        defaultValue: 16,
+        extra: {
+            min: 0,
+            step: 1
+        }
+    }),
+    paddingY: new NumberSetting({
+        title: 'Padding Vertical',
+        defaultValue: 6,
+        extra: {
+            min: 0,
+            step: 1
+        }
+    }),
+    fontSize: new NumberSetting({
+        title: 'Font Size',
+        defaultValue: 12,
+        extra: {
+            min: 8,
+            max: 32,
+            step: 1
+        }
+    }),
+    align: new TextSetting({
+        title: 'Align (left / center / right)',
+        defaultValue: 'center'
+    })
+});

package/dist/elements/banner/bannerElement.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { BannerSettingsMap } from './settings';
+
+	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}
+
+<style>
+	.banner-image {
+		display: block;
+		width: 100%;
+		height: auto;
+		max-height: 480px;
+		object-fit: cover;
+	}
+
+	.banner-placeholder {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 10px;
+		padding: 48px 24px;
+		border: 1.5px dashed rgba(255, 255, 255, 0.12);
+		background: rgba(255, 255, 255, 0.03);
+	}
+
+	.placeholder-icon {
+		font-size: 2rem;
+		opacity: 0.3;
+	}
+
+	.placeholder-text {
+		font-size: 0.8rem;
+		color: rgba(255, 255, 255, 0.3);
+		text-align: center;
+	}
+</style>

package/dist/elements/banner/bannerElement.svelte.d.ts

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

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

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

package/dist/elements/banner/settings.js

@@ -0,0 +1,15 @@
+import { NumberSetting, UploadSetting, Settings } from '../../settings';
+export const bannerSettings = new Settings('Banner', {
+    image: new UploadSetting({
+        title: 'Image',
+        defaultValue: ''
+    }),
+    number: new NumberSetting({
+        title: 'Number',
+        defaultValue: 123,
+        extra: {
+            min: 0,
+            step: 1
+        }
+    })
+});

package/dist/elements/button/buttonElement.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { ButtonSettingsMap } from './settings';
+
+	let { settings }: { settings: ButtonSettingsMap } = $props();
+</script>
+
+<div class="button-wrapper" style="margin-top: {settings.marginTop}px;">
+	<button
+		class="cta-button"
+		style="	
+			background: {settings.backgroundColor};
+			color: {settings.textColor};
+			border-radius: {settings.borderRadius}px;
+			padding: {settings.paddingY}px {settings.paddingX}px;
+			font-size: {settings.fontSize}px;
+		"
+	>
+		{settings.text}
+	</button>
+</div>
+
+<style>
+	.button-wrapper {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		max-width: 750px;
+		margin: 0 auto;
+	}
+
+	.cta-button {
+		font-weight: 700;
+		border: none;
+		cursor: pointer;
+		letter-spacing: 0.02em;
+		transition: opacity 0.2s ease;
+	}
+
+	.cta-button:hover {
+		opacity: 0.9;
+	}
+</style>

package/dist/elements/button/buttonElement.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const buttonSettings: Settings<{
+    text: TextSetting;
+    style: Settings<{
+        backgroundColor: ColorSetting;
+        textColor: ColorSetting;
+        fontSize: NumberSetting;
+        borderRadius: NumberSetting;
+    }>;
+    layout: Settings<{
+        marginTop: NumberSetting;
+        paddingX: NumberSetting;
+        paddingY: NumberSetting;
+    }>;
+}>;
+export type ButtonSettingsMap = InferSettingsMapType<typeof buttonSettings>;

package/dist/elements/button/settings.js

@@ -0,0 +1,43 @@
+import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
+export const buttonSettings = new Settings('Button', {
+    text: new TextSetting({
+        title: 'Button Text',
+        defaultValue: 'Bet Now'
+    }),
+    style: new Settings('Style', {
+        backgroundColor: new ColorSetting({
+            title: 'Background Color',
+            defaultValue: '#f0c845'
+        }),
+        textColor: new ColorSetting({
+            title: 'Text Color',
+            defaultValue: '#000000'
+        }),
+        fontSize: new NumberSetting({
+            title: 'Font Size',
+            defaultValue: 18,
+            extra: { min: 10, max: 48, step: 1 }
+        }),
+        borderRadius: new NumberSetting({
+            title: 'Border Radius',
+            defaultValue: 12,
+            extra: { min: 0, max: 50, step: 1 }
+        })
+    }),
+    layout: new Settings('Layout', {
+        marginTop: new NumberSetting({
+            title: 'Margin Top',
+            defaultValue: 0
+        }),
+        paddingX: new NumberSetting({
+            title: 'Padding Horizontal',
+            defaultValue: 48,
+            extra: { min: 0, step: 1 }
+        }),
+        paddingY: new NumberSetting({
+            title: 'Padding Vertical',
+            defaultValue: 18,
+            extra: { min: 0, step: 1 }
+        })
+    })
+});