@papu1337/builder 0.0.3 → 0.0.5

package/dist/settings/components/TranslatableSettings.svelte

@@ -23,7 +23,7 @@
 
 <div class="translatable-setting">
 	<button class="translatable-header" onclick={() => (isExpanded = !isExpanded)}>
-		<label>{title}</label>
+		<span class="title-label">{title}</span>
 		<div class="header-right">
 			<span class="current-lang-badge">{locale.current.toUpperCase()}</span>
 			<svg
@@ -74,8 +74,8 @@
 	.translatable-setting {
 		display: flex;
 		flex-direction: column;
-		gap: 6px;
-		padding: 10px 0;
+		gap: 8px;
+		padding: 12px 0;
 	}
 
 	.translatable-header {
@@ -90,8 +90,8 @@
 		width: 100%;
 	}
 
-	.translatable-header label {
-		font-size: 0.75rem;
+	.translatable-header .title-label {
+		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
 		text-transform: capitalize;
@@ -126,11 +126,11 @@
 	.single-input input {
 		width: 100%;
 		box-sizing: border-box;
-		padding: 8px 10px;
+		padding: 10px 12px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		font-size: 0.78rem;
+		border-radius: var(--radius-md);
+		font-size: 0.85rem;
 		color: var(--text-primary);
 		font-family: inherit;
 		outline: none;
@@ -145,17 +145,17 @@
 	.lang-inputs {
 		display: flex;
 		flex-direction: column;
-		gap: 4px;
+		gap: 6px;
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		padding: 6px;
+		border-radius: var(--radius-md);
+		padding: 8px;
 		background: var(--bg-elevated);
 	}
 
 	.lang-row {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 10px;
 	}
 
 	.lang-row.active {
@@ -185,11 +185,11 @@
 	.lang-row input {
 		flex: 1;
 		min-width: 0;
-		padding: 6px 8px;
+		padding: 8px 10px;
 		background: var(--bg-surface);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		border-radius: var(--radius-md);
+		font-size: 0.82rem;
 		color: var(--text-primary);
 		font-family: inherit;
 		outline: none;

package/dist/settings/components/UploadSettings.svelte

@@ -51,12 +51,12 @@
 	.setting-item {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-		padding: 10px 0;
+		gap: 10px;
+		padding: 12px 0;
 	}
 
 	label:not(.upload-zone):not(.replace-btn) {
-		font-size: 0.75rem;
+		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
 		text-transform: capitalize;
@@ -142,11 +142,11 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 5px;
-		padding: 6px 12px;
+		padding: 8px 14px;
 		background: var(--accent);
 		color: #fff;
-		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		border-radius: var(--radius-md);
+		font-size: 0.8rem;
 		font-weight: 500;
 		cursor: pointer;
 		font-family: var(--font);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@papu1337/builder",
-	"version": "0.0.3",
+	"version": "0.0.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -15,9 +15,9 @@
 		"format": "prettier --write .",
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run",
-		"release": "npm run prepack && npm version patch && npm publish --access public",
-		"release:minor": "npm run prepack && npm version minor && npm publish --access public",
-		"release:major": "npm run prepack && npm version major && npm publish --access public"
+		"release": "npm run prepack && npm version patch --no-git-tag-version && npm publish --access public",
+		"release:minor": "npm run prepack && npm version minor --no-git-tag-version && npm publish --access public",
+		"release:major": "npm run prepack && npm version major --no-git-tag-version && npm publish --access public"
 	},
 	"files": [
 		"dist",

package/dist/elements/auth/authElement.svelte

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

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

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

@@ -1,63 +0,0 @@
-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/cards/cardsElement.svelte

@@ -1,136 +0,0 @@
-<script lang="ts">
-	import type { CardsSettingsMap } from './settings';
-
-	let { settings }: { settings: CardsSettingsMap } = $props();
-
-	const rows = $derived(() => {
-		const all = settings.cards;
-		const chunks: (typeof all)[] = [];
-		for (let i = 0; i < all.length; i += 3) {
-			chunks.push(all.slice(i, i + 3));
-		}
-		return chunks;
-	});
-</script>
-
-<div class="cards-wrapper" style="margin-top: {settings.marginTop}px;">
-	{#each rows() as row}
-		<div class="cards-row">
-			{#each row as card, i}
-				{#if i > 0}
-					<div class="arrow" style="color: {settings.arrowColor};">
-						<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-							<path
-								d="M9 6l6 6-6 6"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-					</div>
-				{/if}
-				<div
-					class="card"
-					style="background: {settings.backgroundColor}; border: 1px solid {settings.borderColor};"
-				>
-					<h3 class="card-title" style="color: {settings.titleColor};">
-						{card.title}
-					</h3>
-					<p class="card-content" style="color: {settings.contentColor};">
-						{card.content}
-					</p>
-				</div>
-			{/each}
-		</div>
-	{/each}
-
-	{#if settings.footerText}
-		<div
-			class="cards-footer"
-			style="background: {settings.footerBackground}; color: {settings.footerTextColor};"
-		>
-			<p>{settings.footerText}</p>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.cards-wrapper {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		max-width: 750px;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.cards-row {
-		display: flex;
-		align-items: stretch;
-		gap: 0;
-	}
-
-	.arrow {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		padding: 0 6px;
-	}
-
-	.card {
-		flex: 1;
-		max-width: calc(33.333% - 12px);
-		border-radius: 10px;
-		padding: 24px 20px;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		text-align: center;
-		gap: 10px;
-	}
-
-	.card-title {
-		margin: 0;
-		font-size: 0.95rem;
-		font-weight: 800;
-		text-transform: uppercase;
-		letter-spacing: 0.03em;
-	}
-
-	.card-content {
-		margin: 0;
-		font-size: 0.85rem;
-		line-height: 1.5;
-	}
-
-	.cards-footer {
-		border-radius: 8px;
-		padding: 14px 20px;
-		text-align: center;
-	}
-
-	.cards-footer p {
-		margin: 0;
-		font-size: 0.85rem;
-		line-height: 1.5;
-		font-style: italic;
-	}
-
-	@media (max-width: 640px) {
-		.cards-row {
-			flex-direction: column;
-			gap: 12px;
-		}
-
-		.card {
-			max-width: 100%;
-		}
-
-		.arrow {
-			transform: rotate(90deg);
-			padding: 4px 0;
-		}
-	}
-</style>

package/dist/elements/cards/cardsElement.svelte.d.ts

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

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

@@ -1,14 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings, type InferSettingsMapType } from '../../settings';
-export declare const cardsSettings: Settings<{
-    marginTop: NumberSetting;
-    cards: ListSetting;
-    footerText: TextSetting;
-    backgroundColor: ColorSetting;
-    borderColor: ColorSetting;
-    titleColor: ColorSetting;
-    contentColor: ColorSetting;
-    footerBackground: ColorSetting;
-    footerTextColor: ColorSetting;
-    arrowColor: ColorSetting;
-}>;
-export type CardsSettingsMap = InferSettingsMapType<typeof cardsSettings>;

package/dist/elements/cards/settings.js

@@ -1,52 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings } from '../../settings';
-export const cardsSettings = new Settings('Cards', {
-    marginTop: new NumberSetting({
-        title: 'Margin Top',
-        defaultValue: 0
-    }),
-    cards: new ListSetting({
-        title: 'Cards',
-        defaultValue: [
-            { title: 'CREATE YOUR TICKET', content: 'Pick 3+ positions from UEL & UECL matches' },
-            { title: 'PLACE YOUR BET', content: 'With Combo or Bet Builder ticket' },
-            { title: 'GET 50% FREEBET', content: 'In case you lose any position' }
-        ],
-        extra: {
-            addButtonText: '+ Add Card',
-            titlePlaceholder: 'Card title',
-            contentPlaceholder: 'Card description'
-        }
-    }),
-    footerText: new TextSetting({
-        title: 'Footer Text',
-        defaultValue: 'Example: Place a 3-leg combo for $200 and get 50% back as a $100 Freebet if your ticket loses.'
-    }),
-    backgroundColor: new ColorSetting({
-        title: 'Card Background',
-        defaultValue: 'rgba(22, 45, 63, 0.8)'
-    }),
-    borderColor: new ColorSetting({
-        title: 'Card Border Color',
-        defaultValue: 'rgba(177, 202, 223, 0.15)'
-    }),
-    titleColor: new ColorSetting({
-        title: 'Card Title Color',
-        defaultValue: '#ffffff'
-    }),
-    contentColor: new ColorSetting({
-        title: 'Card Content Color',
-        defaultValue: 'rgba(255, 255, 255, 0.7)'
-    }),
-    footerBackground: new ColorSetting({
-        title: 'Footer Background',
-        defaultValue: 'rgba(22, 45, 63, 0.6)'
-    }),
-    footerTextColor: new ColorSetting({
-        title: 'Footer Text Color',
-        defaultValue: 'rgba(255, 255, 255, 0.7)'
-    }),
-    arrowColor: new ColorSetting({
-        title: 'Arrow Color',
-        defaultValue: 'rgba(255, 255, 255, 0.4)'
-    })
-});

package/dist/elements/divider/dividerElement.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import type { DividerSettingsMap } from './settings';
-
-	let { settings }: { settings: DividerSettingsMap } = $props();
-</script>
-
-<div class="divider" style="color: {settings.textColor};">
-	<div class="divider-line" style="background: {settings.lineColor};"></div>
-	<span class="divider-text">{settings.text}</span>
-	<div class="divider-line" style="background: {settings.lineColor};"></div>
-</div>
-
-<style>
-	.divider {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 20px;
-		max-width: 750px;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.divider-line {
-		flex: 1;
-		height: 1px;
-	}
-
-	.divider-text {
-		font-size: 14px;
-		font-weight: 800;
-		white-space: nowrap;
-	}
-</style>

package/dist/elements/divider/dividerElement.svelte.d.ts

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

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

@@ -1,7 +0,0 @@
-import { ColorSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
-export declare const dividerSettings: Settings<{
-    text: TextSetting;
-    textColor: ColorSetting;
-    lineColor: ColorSetting;
-}>;
-export type DividerSettingsMap = InferSettingsMapType<typeof dividerSettings>;

package/dist/elements/divider/settings.js

@@ -1,15 +0,0 @@
-import { ColorSetting, TextSetting, Settings } from '../../settings';
-export const dividerSettings = new Settings('Divider', {
-    text: new TextSetting({
-        title: 'Text',
-        defaultValue: 'OR'
-    }),
-    textColor: new ColorSetting({
-        title: 'Text Color',
-        defaultValue: '#ffffff'
-    }),
-    lineColor: new ColorSetting({
-        title: 'Line Color',
-        defaultValue: 'rgba(255,255,255,0.2)'
-    })
-});