@sierra-95/svelte-scaffold 1.0.9 → 1.0.10

package/dist/components/Core/others/Button/select/select.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-    const {
-        ...rest
-    } = $props();
-</script>
-<style>
-    #sierra-button-select{
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-        background: var(--primary-bg);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-    }
-</style>
-<button
-    aria-label="Selected"
-    id="sierra-button-select"
-    {...rest}
-    onclick={(e: MouseEvent) => {
-		rest.onclick?.(e);
-	}}
-><i class="fa fa-check" style="color: white; font-size: 12px;"></i>
+<script lang="ts">
+    const {
+        ...rest
+    } = $props();
+</script>
+<style>
+    #sierra-button-select{
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: var(--primary-bg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+</style>
+<button
+    aria-label="Selected"
+    id="sierra-button-select"
+    {...rest}
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+><i class="fa fa-check" style="color: white; font-size: 12px;"></i>
 </button>

package/dist/components/Core/others/Button/theme/theme.css

@@ -1,122 +1,122 @@
-#sierra-theme-toggle {
-	--hue: 223;
-	--trans-dur: 0.6s;
-	--trans-timing: cubic-bezier(0.65,0,0.35,1);
-	font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320));
-}
-#sierra-theme-toggle * {
-	border: 0;
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-#sierra-theme-toggle,
-#sierra-theme-toggle .switch__input {
-	display: block;
-	-webkit-tap-highlight-color: transparent;
-}
-#sierra-theme-toggle {
-    font-size: 25px;
-	margin: auto;
-	position: relative;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-    cursor: pointer;
-    width: 68.75px;
-    overflow: hidden;
-    border-radius: 0.8em;
-    box-shadow: var(--box-shadow);
-}
-#sierra-theme-toggle .switch__icon {
-	color: hsla(var(--hue),10%,80%);
-	position: absolute;
-	top: 0.375em;
-	left: 0.375em;
-	width: 0.75em;
-	height: 0.75em;
-	transition:
-		color var(--trans-dur),
-		transform var(--trans-dur) var(--trans-timing);
-}
-#sierra-theme-toggle .switch__icon:nth-of-type(2) {
-	right: 0.375em;
-	left: auto;
-}
-#sierra-theme-toggle .switch__inner,
-#sierra-theme-toggle .switch__inner-icons {
-	border-radius: 0.5em;
-	display: block;
-	overflow: hidden;
-	position: absolute;
-	top: 0.25em;
-	left: 0.25em;
-	width: 2.25em;
-	height: 1em;
-}
-#sierra-theme-toggle .switch__inner:before,
-#sierra-theme-toggle .switch__inner-icons {
-	transition: transform var(--trans-dur) var(--trans-timing);
-	transform: translateX(-1.25em);
-}
-#sierra-theme-toggle .switch__inner:before {
-	background-color: var(--primary-bg);
-	border-radius: inherit;
-	content: "";
-	display: block;
-	width: 100%;
-	height: 100%;
-}
-#sierra-theme-toggle .switch__inner-icons {
-	pointer-events: none;
-}
-#sierra-theme-toggle .switch__inner-icons .switch__icon {
-	color: hsl(0,0%,100%);
-	top: 0.125em;
-	left: 0.125em;
-	transform: translateX(1.25em);
-}
-#sierra-theme-toggle .switch__inner-icons .switch__icon:nth-child(2) {
-	right: 0.125em;
-	left: auto;
-}
-#sierra-theme-toggle .switch__input {
-	background-color: hsl(0,0%,100%);
-	border-radius: 0.75em;
-	box-shadow:
-		0 0 0 0.0625em hsla(var(--hue),90%,50%,0),
-		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
-	outline: transparent;
-	width: 2.75em;
-	height: 1.5em;
-	-webkit-appearance: none;
-	appearance: none;
-	transition:
-		background-color var(--trans-dur),
-		box-shadow var(--trans-dur);
-}
-#sierra-theme-toggle .switch__input:checked {
-	background-color: hsl(var(--hue),10%,10%);
-}
-#sierra-theme-toggle .switch__input:checked ~ .switch__icon {
-	color: hsla(var(--hue),10%,40%);
-}
-#sierra-theme-toggle .switch__input:checked ~ .switch__inner:before,
-#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons {
-	transform: translateX(1.25em);
-}
-#sierra-theme-toggle .switch__input:not(:checked) ~ .switch__icon:first-of-type,
-#sierra-theme-toggle .switch__input:checked ~ .switch__icon:nth-of-type(2) {
-	transform: rotate(360deg);
-}
-#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons .switch__icon:first-of-type {
-	transform: translateX(-1.25em) rotate(-360deg);
-}
-#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons .switch__icon:nth-of-type(2) {
-	transform: translateX(-1.25em) rotate(360deg);
-}
-#sierra-theme-toggle .switch__input:focus-visible {
-	box-shadow:
-		0 0 0 0.0625em hsla(var(--hue),90%,50%,1),
-		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
+#sierra-theme-toggle {
+	--hue: 223;
+	--trans-dur: 0.6s;
+	--trans-timing: cubic-bezier(0.65,0,0.35,1);
+	font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320));
+}
+#sierra-theme-toggle * {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+#sierra-theme-toggle,
+#sierra-theme-toggle .switch__input {
+	display: block;
+	-webkit-tap-highlight-color: transparent;
+}
+#sierra-theme-toggle {
+    font-size: 25px;
+	margin: auto;
+	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+    cursor: pointer;
+    width: 68.75px;
+    overflow: hidden;
+    border-radius: 0.8em;
+    box-shadow: var(--box-shadow);
+}
+#sierra-theme-toggle .switch__icon {
+	color: hsla(var(--hue),10%,80%);
+	position: absolute;
+	top: 0.375em;
+	left: 0.375em;
+	width: 0.75em;
+	height: 0.75em;
+	transition:
+		color var(--trans-dur),
+		transform var(--trans-dur) var(--trans-timing);
+}
+#sierra-theme-toggle .switch__icon:nth-of-type(2) {
+	right: 0.375em;
+	left: auto;
+}
+#sierra-theme-toggle .switch__inner,
+#sierra-theme-toggle .switch__inner-icons {
+	border-radius: 0.5em;
+	display: block;
+	overflow: hidden;
+	position: absolute;
+	top: 0.25em;
+	left: 0.25em;
+	width: 2.25em;
+	height: 1em;
+}
+#sierra-theme-toggle .switch__inner:before,
+#sierra-theme-toggle .switch__inner-icons {
+	transition: transform var(--trans-dur) var(--trans-timing);
+	transform: translateX(-1.25em);
+}
+#sierra-theme-toggle .switch__inner:before {
+	background-color: var(--primary-bg);
+	border-radius: inherit;
+	content: "";
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+#sierra-theme-toggle .switch__inner-icons {
+	pointer-events: none;
+}
+#sierra-theme-toggle .switch__inner-icons .switch__icon {
+	color: hsl(0,0%,100%);
+	top: 0.125em;
+	left: 0.125em;
+	transform: translateX(1.25em);
+}
+#sierra-theme-toggle .switch__inner-icons .switch__icon:nth-child(2) {
+	right: 0.125em;
+	left: auto;
+}
+#sierra-theme-toggle .switch__input {
+	background-color: hsl(0,0%,100%);
+	border-radius: 0.75em;
+	box-shadow:
+		0 0 0 0.0625em hsla(var(--hue),90%,50%,0),
+		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
+	outline: transparent;
+	width: 2.75em;
+	height: 1.5em;
+	-webkit-appearance: none;
+	appearance: none;
+	transition:
+		background-color var(--trans-dur),
+		box-shadow var(--trans-dur);
+}
+#sierra-theme-toggle .switch__input:checked {
+	background-color: hsl(var(--hue),10%,10%);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__icon {
+	color: hsla(var(--hue),10%,40%);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner:before,
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons {
+	transform: translateX(1.25em);
+}
+#sierra-theme-toggle .switch__input:not(:checked) ~ .switch__icon:first-of-type,
+#sierra-theme-toggle .switch__input:checked ~ .switch__icon:nth-of-type(2) {
+	transform: rotate(360deg);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons .switch__icon:first-of-type {
+	transform: translateX(-1.25em) rotate(-360deg);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons .switch__icon:nth-of-type(2) {
+	transform: translateX(-1.25em) rotate(360deg);
+}
+#sierra-theme-toggle .switch__input:focus-visible {
+	box-shadow:
+		0 0 0 0.0625em hsla(var(--hue),90%,50%,1),
+		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
 }

package/dist/components/Core/others/Button/theme/theme.svelte

@@ -1,68 +1,68 @@
-<script lang="ts">
-    import './theme.css';
-    import { onMount } from 'svelte';
-    import {theme} from '../../../../../index.js';
-
-    let isDark = false;
-
-    onMount(() => {
-        const unsubscribe = theme.subscribe(value => {
-            isDark = value === 'dark';
-        });
-        return () => unsubscribe();
-    });
-
-    function toggleTheme(e: Event) {
-        const target = e.target as HTMLInputElement;
-        isDark = target.checked;
-        theme.set(isDark ? 'dark' : 'light');
-    }
-</script>
-
-<main>
-    <svg style="display: none;">
-        <symbol id="light" viewBox="0 0 24 24">
-            <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(0,12,12)" />
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(45,12,12)" />
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(90,12,12)" />
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(135,12,12)" />
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(180,12,12)" />
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(225,12,12)" />
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(270,12,12)" />
-                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(315,12,12)" />
-            </g>
-            <circle fill="currentColor" cx="12" cy="12" r="5" />
-        </symbol>
-        <symbol id="dark" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M15.1,14.9c-3-0.5-5.5-3-6-6C8.8,7.1,9.1,5.4,9.9,4c0.4-0.8-0.4-1.7-1.2-1.4C4.6,4,1.8,7.9,2,12.5c0.2,5.1,4.4,9.3,9.5,9.5c4.5,0.2,8.5-2.6,9.9-6.6c0.3-0.8-0.6-1.7-1.4-1.2C18.6,14.9,16.9,15.2,15.1,14.9z" />
-        </symbol>
-    </svg>
-    <label id="sierra-theme-toggle">
-        <input 
-            hidden
-            class="switch__input" 
-            type="checkbox" 
-            role="switch" 
-            name="dark" 
-            bind:checked={isDark}
-            on:change={toggleTheme} 
-        />
-        <button aria-label="button"></button>
-        <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
-            <use href="#light" />
-        </svg>
-        <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
-            <use href="#dark" />
-        </svg>
-        <span class="switch__inner"></span>
-        <span class="switch__inner-icons">
-            <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
-                <use href="#light" />
-            </svg>
-            <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
-                <use href="#dark" />
-            </svg>
-        </span>
-    </label>
+<script lang="ts">
+    import './theme.css';
+    import { onMount } from 'svelte';
+    import {theme} from '../../../../../index.js';
+
+    let isDark = false;
+
+    onMount(() => {
+        const unsubscribe = theme.subscribe(value => {
+            isDark = value === 'dark';
+        });
+        return () => unsubscribe();
+    });
+
+    function toggleTheme(e: Event) {
+        const target = e.target as HTMLInputElement;
+        isDark = target.checked;
+        theme.set(isDark ? 'dark' : 'light');
+    }
+</script>
+
+<main>
+    <svg style="display: none;">
+        <symbol id="light" viewBox="0 0 24 24">
+            <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(0,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(45,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(90,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(135,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(180,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(225,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(270,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(315,12,12)" />
+            </g>
+            <circle fill="currentColor" cx="12" cy="12" r="5" />
+        </symbol>
+        <symbol id="dark" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M15.1,14.9c-3-0.5-5.5-3-6-6C8.8,7.1,9.1,5.4,9.9,4c0.4-0.8-0.4-1.7-1.2-1.4C4.6,4,1.8,7.9,2,12.5c0.2,5.1,4.4,9.3,9.5,9.5c4.5,0.2,8.5-2.6,9.9-6.6c0.3-0.8-0.6-1.7-1.4-1.2C18.6,14.9,16.9,15.2,15.1,14.9z" />
+        </symbol>
+    </svg>
+    <label id="sierra-theme-toggle">
+        <input 
+            hidden
+            class="switch__input" 
+            type="checkbox" 
+            role="switch" 
+            name="dark" 
+            bind:checked={isDark}
+            on:change={toggleTheme} 
+        />
+        <button aria-label="button"></button>
+        <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+            <use href="#light" />
+        </svg>
+        <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+            <use href="#dark" />
+        </svg>
+        <span class="switch__inner"></span>
+        <span class="switch__inner-icons">
+            <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+                <use href="#light" />
+            </svg>
+            <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+                <use href="#dark" />
+            </svg>
+        </span>
+    </label>
 </main>

package/dist/components/Core/others/Button/times/times.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-    const {
-        vertical = 'top',
-        horizontal = 'right',
-        ...rest
-    } = $props();
-</script>
-<style>
-    .sierra-times-top{
-        transform: translate(50%, -50%);
-    }
-    .sierra-times-bottom{
-        transform: translate(50%, 50%);
-    }
-</style>
-<button 
-    {...rest}
-    onclick={(e: MouseEvent) => {
-		rest.onclick?.(e);
-	}}
-    style="position: absolute; {vertical}: 0; {horizontal}: 0;"
-    aria-label="Times Button" 
-    class={vertical === 'top' ? 'sierra-times-top' : 'sierra-times-bottom'}
-><i class="fa fa-times-circle"></i>
+<script lang="ts">
+    const {
+        vertical = 'top',
+        horizontal = 'right',
+        ...rest
+    } = $props();
+</script>
+<style>
+    .sierra-times-top{
+        transform: translate(50%, -50%);
+    }
+    .sierra-times-bottom{
+        transform: translate(50%, 50%);
+    }
+</style>
+<button 
+    {...rest}
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+    style="position: absolute; {vertical}: 0; {horizontal}: 0;"
+    aria-label="Times Button" 
+    class={vertical === 'top' ? 'sierra-times-top' : 'sierra-times-bottom'}
+><i class="fa fa-times-circle"></i>
 </button>

package/dist/components/Core/others/Clock/Date/date.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  export let timezone: string = "Africa/Nairobi";
-
-  let time = new Date();
-  let interval: ReturnType<typeof setInterval>;
-
-  onMount(() => {
-    interval = setInterval(() => {
-      time = new Date();
-    }, 1000);
-
-    return () => clearInterval(interval);
-  });
-
-  $: dateString = new Intl.DateTimeFormat("en-GB", {
-    weekday: "long",
-    day: "numeric",
-    month: "long",
-    timeZone: timezone
-  }).format(time);
-</script>
-
-<div>{dateString}</div>
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let timezone: string = "Africa/Nairobi";
+
+  let time = new Date();
+  let interval: ReturnType<typeof setInterval>;
+
+  onMount(() => {
+    interval = setInterval(() => {
+      time = new Date();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  $: dateString = new Intl.DateTimeFormat("en-GB", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    timeZone: timezone
+  }).format(time);
+</script>
+
+<div>{dateString}</div>

package/dist/components/Core/others/Clock/Time/time.svelte

@@ -1,35 +1,35 @@
-<script lang="ts">
-    import { onMount } from 'svelte';
-
-    export let timezone: string = 'Africa/Nairobi';
-
-    let time = new Date();
-    let interval: ReturnType<typeof setInterval>;
-
-    onMount(() => {
-        interval = setInterval(() => {
-            time = new Date();
-        }, 1000);
-
-        return () => clearInterval(interval);
-    });
-
-    $: timeString = new Intl.DateTimeFormat('en-GB', {
-        timeStyle: 'medium',
-        timeZone: timezone
-    }).format(time);
-
-    $: ampm = new Intl.DateTimeFormat('en-GB', {
-        hour12: true,
-        hour: 'numeric',
-        timeZone: timezone
-    }).format(time).split(' ')[1];
-
-    $: city = timezone.split('/')[1]?.replace('_', ' ') || '';
-</script>
-
-<div style="display: flex; align-items:last baseline; gap: 0.2rem;">
-    {timeString}
-    <span class="time">{ampm}</span>
-    <span class="time">{city}</span>
-</div>
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    export let timezone: string = 'Africa/Nairobi';
+
+    let time = new Date();
+    let interval: ReturnType<typeof setInterval>;
+
+    onMount(() => {
+        interval = setInterval(() => {
+            time = new Date();
+        }, 1000);
+
+        return () => clearInterval(interval);
+    });
+
+    $: timeString = new Intl.DateTimeFormat('en-GB', {
+        timeStyle: 'medium',
+        timeZone: timezone
+    }).format(time);
+
+    $: ampm = new Intl.DateTimeFormat('en-GB', {
+        hour12: true,
+        hour: 'numeric',
+        timeZone: timezone
+    }).format(time).split(' ')[1];
+
+    $: city = timezone.split('/')[1]?.replace('_', ' ') || '';
+</script>
+
+<div style="display: flex; align-items:last baseline; gap: 0.2rem;">
+    {timeString}
+    <span class="time">{ampm}</span>
+    <span class="time">{city}</span>
+</div>