@sierra-95/svelte-scaffold 1.0.67 → 1.0.69

package/dist/Core/components/Form/Form/form.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
     import { enhance } from '$app/forms';
+    import {Carousel} from '../../../../index.js';
 
     type _method = 'dialog' |'get' | 'post' | 'DIALOG' | 'GET' | 'POST';
     const {
@@ -8,48 +8,19 @@
         formBackground = 'white',
         pageBackground = 'var(--primary-bg)',
         images = [],
-        imagePlayInterval = 5000,
+        period = 5000,
+        carouselButtonColor = 'white',
         tailwindCss = '',
         method = 'post' as _method,
         enhanceAction = null,
         ...rest
     } = $props();
 
-    let currentIndex = $state(0);
-    let interval: any;
 
-    const next = () => {
-        currentIndex = (currentIndex + 1) % images.length;
-    };
-
-    const prev = () => {
-        currentIndex = (currentIndex - 1 + images.length) % images.length;
-    };
-
-    onMount(() => {
-        if (images.length > 0) {
-            interval = setInterval(next, imagePlayInterval);
-        }
-    });
-
-    onDestroy(() => {
-        clearInterval(interval);
-    });
 </script>
 
 <main id="karakal-form" style="background-color: {pageBackground};">
-    {#if images.length > 0}
-        <div class="carousel">
-            {#each images as img, i}
-                <div class="slide {i === currentIndex ? 'active' : ''}"
-                    style="background-image: url('{img}')"
-                ></div>
-            {/each}
-
-            <button class="nav prev" onclick={prev}>‹</button>
-            <button class="nav next" onclick={next}>›</button>
-        </div>
-    {/if}
+    <Carousel images={images} period={period} buttonColor={carouselButtonColor}/>
     <form use:enhance={enhanceAction} method={method} {...rest} class={tailwindCss} style="background-color: {formBackground};">
         {@render children()} 
     </form>
@@ -82,57 +53,4 @@
             padding: 20px;
         }
     }
-
-    #karakal-form .carousel{
-        position: absolute;
-        inset: 0;
-        overflow: hidden;
-        z-index: 0;
-    }
-
-    #karakal-form .slide{
-        position: absolute;
-        inset: 0;
-        background-size: cover;
-        background-position: center;
-        opacity: 0;
-        transform: scale(1.05);
-        transition: opacity 1.2s ease, transform 6s ease;
-    }
-
-    /* active slide */
-    #karakal-form .slide.active{
-        opacity: 1;
-        transform: scale(1);
-    }
-
-    /* subtle dark overlay so form is readable */
-    #karakal-form .carousel::after{
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: rgba(0,0,0,0.35);
-    }
-
-    /* nav buttons */
-    #karakal-form .nav{
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
-        background: rgba(0,0,0,0.4);
-        color: white;
-        border: none;
-        padding: 10px 14px;
-        cursor: pointer;
-        border-radius: 4px;
-        backdrop-filter: blur(4px);
-    }
-
-    #karakal-form .nav.prev{ left: 15px; }
-    #karakal-form .nav.next{ right: 15px; }
-
-    #karakal-form .nav:hover{
-        background: rgba(0,0,0,0.6);
-    }
 </style>

package/dist/Core/components/Form/Form/form.svelte.d.ts

@@ -3,7 +3,8 @@ declare const Form: import("svelte").Component<{
     formBackground?: string;
     pageBackground?: string;
     images?: any[];
-    imagePlayInterval?: number;
+    period?: number;
+    carouselButtonColor?: string;
     tailwindCss?: string;
     method?: "dialog" | "get" | "post" | "DIALOG" | "GET" | "POST";
     enhanceAction?: any;

package/dist/Core/components/others/Carousel/carousel.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+    const {
+        images = [],
+        period = 5000,
+        buttonColor = 'white',
+    } = $props();
+
+    let currentIndex = $state(0);
+    let interval: any;
+
+    const next = () => {
+        currentIndex = (currentIndex + 1) % images.length;
+    };
+
+    const prev = () => {
+        currentIndex = (currentIndex - 1 + images.length) % images.length;
+    };
+
+    onMount(() => {
+        if (images.length > 0) {
+            interval = setInterval(next, period);
+        }
+    });
+
+    onDestroy(() => {
+        clearInterval(interval);
+    });
+</script>
+{#if images.length > 0}
+    <div id="sierra-carousel">
+        {#each images as img, i}
+            <div class="slide {i === currentIndex ? 'active' : ''}"
+                style="background-image: url('{img}')"
+            ></div>
+        {/each}
+
+        <button style="color: {buttonColor};" aria-label="left" class="nav prev" onclick={prev}><i class="fa-solid fa-chevron-left"></i></button>
+        <button style="color: {buttonColor};" aria-label="right" class="nav next" onclick={next}><i class="fa-solid fa-chevron-right"></i></button>
+    </div>
+{/if}
+
+<style>
+    #sierra-carousel{
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        z-index: 0;
+    }
+
+    #sierra-carousel .slide{
+        position: absolute;
+        inset: 0;
+        background-size: cover;
+        background-position: center;
+        opacity: 0;
+        transform: scale(1.05);
+        transition: opacity 1.2s ease, transform 6s ease;
+    }
+
+    /* active slide */
+    #sierra-carousel .slide.active{
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    /* subtle dark overlay so form is readable */
+    #sierra-carousel::after{
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: rgba(0,0,0,0.35);
+    }
+
+    /* nav buttons */
+    #sierra-carousel .nav{
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        background: rgba(0,0,0,0.4);
+        padding: 10px 14px;
+        border-radius: 4px;
+        backdrop-filter: blur(4px);
+    }
+
+    #sierra-carousel .nav.prev{ left: 15px; }
+    #sierra-carousel .nav.next{ right: 15px; }
+
+    #sierra-carousel .nav:hover{
+        background: rgba(0,0,0,0.6);
+    }
+</style>

package/dist/Core/components/others/Carousel/carousel.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const Carousel: import("svelte").Component<{
+    images?: any[];
+    period?: number;
+    buttonColor?: string;
+}, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/Core/components/others/Hr/HrSplit/hrsplit.svelte

@@ -0,0 +1,36 @@
+<script>
+    let {
+        text = '',
+        height = '1px',
+        color = 'var(--text-color)',
+        fontSize = '1rem',
+        hrColor = '#ccc',
+        margin = '1rem 0'
+    } = $props();
+</script>
+
+<style>
+    #sierra-hr-split {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;             
+        white-space: nowrap;       /* prevents text from breaking */
+    }
+    #sierra-hr-split hr {
+        flex: 1;                   
+        height: var(--hr-height, 1px);
+        background-color: var(--hr-color, #ccc);
+        border: none;
+        margin: 0;       
+    }
+    #sierra-hr-split span {
+        color: var(--text-color, #000);
+        font-size: var(--font-size, 1rem);
+    }
+</style>
+
+<div id="sierra-hr-split" style="--hr-color: {hrColor}; --hr-height: {height}; --text-color: {color}; --font-size: {fontSize}; margin: {margin};">
+    <hr />
+    <span>{text}</span>
+    <hr />
+</div>

package/dist/Core/components/others/Hr/HrSplit/hrsplit.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Hrsplit;
+type Hrsplit = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Hrsplit: import("svelte").Component<{
+    text?: string;
+    height?: string;
+    color?: string;
+    fontSize?: string;
+    hrColor?: string;
+    margin?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    text?: string;
+    height?: string;
+    color?: string;
+    fontSize?: string;
+    hrColor?: string;
+    margin?: string;
+};

package/dist/index.d.ts

@@ -31,9 +31,11 @@ export { default as Tabs } from './Core/components/Menus/Tabs/main.svelte';
 export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamburger.svelte';
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';
-export { default as Hr } from './Core/components/others/Hr/hr.svelte';
+export { default as Hr } from './Core/components/others/Hr/Hr/hr.svelte';
+export { default as HrSplit } from './Core/components/others/Hr/HrSplit/hrsplit.svelte';
 export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.svelte';
 export { default as Form } from './Core/components/Form/Form/form.svelte';
+export { default as Carousel } from './Core/components/others/Carousel/carousel.svelte';
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 export { default as Editor } from './Modules/Editor/main.svelte';
 export { default as Layout } from './Modules/Layout/main.svelte';

package/dist/index.js

@@ -39,9 +39,11 @@ export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamb
 //others
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';
-export { default as Hr } from './Core/components/others/Hr/hr.svelte';
+export { default as Hr } from './Core/components/others/Hr/Hr/hr.svelte';
+export { default as HrSplit } from './Core/components/others/Hr/HrSplit/hrsplit.svelte';
 export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.svelte';
 export { default as Form } from './Core/components/Form/Form/form.svelte';
+export { default as Carousel } from './Core/components/others/Carousel/carousel.svelte';
 //####################Features##################################
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 //####################MODULES COMPONENTS########################

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.0.67",
+	"version": "1.0.69",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",