@sierra-95/svelte-scaffold 1.0.78 → 1.0.80

package/dist/Core/components/Alerts/Modal/modal.svelte

@@ -22,7 +22,18 @@
 
 <Backdrop onClose={close} bind:open={$modalStore.open} zIndex={20}>
   <Wrapper>
-    <h2 style="font-size: 1.3rem;">{$modalStore.title}</h2>
+    <div style="display: flex; align-items: center; gap: {$modalStore.logo_url_spacing};">
+      {#if $modalStore.logo_url}
+        <img src={$modalStore.logo_url} alt="Modal Logo" 
+          style="width: {$modalStore.logo_url_size};" 
+        />
+      {/if}
+      <h2 style="
+        font: {$modalStore.titleFont};
+        font-weight: {$modalStore.titleFontWeight};
+        font-size: {$modalStore.titleFontSize};
+      ">{$modalStore.title}</h2>
+    </div>
     {#if $modalStore?.content}
       <h3 style="font-size: 1rem;">{$modalStore.content}</h3>
     {/if}

package/dist/Core/components/Form/Input/Date/date.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  let {
+    id = '',
+    label = '',
+    value = $bindable(""),
+    type = 'text',
+    placeholder = '',
+    underline = false,
+    borderSize = '1px',
+    borderColor = 'var(--input-border)',
+    background = 'transparent',
+    width = '100%',
+    maxWidth = '',
+    textColor = 'inherit',
+    ...rest
+  } = $props();
+</script>
+
+<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+  <input 
+    id={id} 
+    name={id} 
+    type="date" 
+    bind:value={value}
+    placeholder={placeholder}
+    required={rest.required}
+    readonly={rest.readonly}
+    class="{underline? 'underline-input':''}"
+    style="background-color: {background}; border: {borderSize} solid {borderColor};"
+    onclick={(e: MouseEvent) => {
+      rest.onclick?.(e);
+    }}
+    />
+</label>

package/dist/Core/components/Form/Input/Date/date.svelte.d.ts

@@ -0,0 +1,16 @@
+declare const Date: import("svelte").Component<{
+    id?: string;
+    label?: string;
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    underline?: boolean;
+    borderSize?: string;
+    borderColor?: string;
+    background?: string;
+    width?: string;
+    maxWidth?: string;
+    textColor?: string;
+} & Record<string, any>, {}, "value">;
+type Date = ReturnType<typeof Date>;
+export default Date;

package/dist/Core/components/Form/Input/Time/time.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  let {
+    id = '',
+    label = '',
+    value = $bindable(""),
+    type = 'text',
+    placeholder = '',
+    underline = false,
+    borderSize = '1px',
+    borderColor = 'var(--input-border)',
+    background = 'transparent',
+    width = '100%',
+    maxWidth = '',
+    textColor = 'inherit',
+    ...rest
+  } = $props();
+</script>
+
+<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+  <input 
+    id={id} 
+    name={id} 
+    type="time" 
+    bind:value={value}
+    placeholder={placeholder}
+    required={rest.required}
+    readonly={rest.readonly}
+    class="{underline? 'underline-input':''}"
+    style="background-color: {background}; border: {borderSize} solid {borderColor};"
+    onclick={(e: MouseEvent) => {
+      rest.onclick?.(e);
+    }}
+    />
+</label>

package/dist/Core/components/Form/Input/Time/time.svelte.d.ts

@@ -0,0 +1,16 @@
+declare const Time: import("svelte").Component<{
+    id?: string;
+    label?: string;
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    underline?: boolean;
+    borderSize?: string;
+    borderColor?: string;
+    background?: string;
+    width?: string;
+    maxWidth?: string;
+    textColor?: string;
+} & Record<string, any>, {}, "value">;
+type Time = ReturnType<typeof Time>;
+export default Time;

package/dist/Core/components/others/ColorPicker/colors.d.ts

@@ -0,0 +1,2 @@
+export default colors;
+declare const colors: string[];

package/dist/Core/components/others/ColorPicker/colors.js

@@ -0,0 +1,21 @@
+const colors = [
+  // Grayscale
+  '#000000', '#2E2E2E', '#595959', '#7F7F7F', '#A6A6A6', '#D9D9D9',
+
+  // Reds
+  '#7F1D1D', '#991B1B', '#B91C1C', '#DC2626', '#EF4444', '#F87171',
+
+  // Oranges / Browns
+  '#78350F', '#92400E', '#A16207', '#D97706', '#F59E0B', '#FDBA74',
+
+  // Yellows / Golds
+  '#854D0E', '#A16207', '#CA8A04', '#EAB308', '#FACC15', '#FEF08A',
+
+  // Greens
+  '#14532D', '#166534', '#15803D', '#16A34A', '#22C55E', '#86EFAC',
+
+  // Blues
+  '#1E3A8A', '#1D4ED8', '#2563EB', '#3B82F6', '#60A5FA', '#93C5FD',
+];
+
+export default colors;

package/dist/Core/components/others/ColorPicker/main.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { DropdownContainer } from '../../../../index.js';
+    import colors from './colors.js'
+
+    let {
+        selectedColor=$bindable(''),
+        openDropdown =$bindable(false),
+        dropdownTrigger,
+        onSelect =(color: string) => {},
+    } =$props();
+
+    let recentColors = $state<string[]>([]);
+
+    const STORAGE_KEY = 'sierra_recent_colors';
+    const MAX = 6;
+
+    function saveRecentColor(color: string) {
+        let stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');        
+        stored = stored.filter((c: string) => c !== color); // remove if already exists (so it moves to the end)        
+        stored.push(color); // add new color to the end
+        if (stored.length > MAX) {
+            stored.shift(); // removes first (oldest)
+        }
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
+        recentColors = stored;
+    }
+
+    onMount(() => {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (!stored) {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify([]));
+            recentColors = [];
+        } else {
+            recentColors = JSON.parse(stored);
+        }
+    });
+
+    function handleSelect(color: string) {
+        selectedColor = color;
+        onSelect?.(color);
+        openDropdown = false;
+        saveRecentColor(color);
+    }
+</script>
+
+{#snippet Color(color:string)}
+    <button
+        aria-label={`Select color: ${color}`}
+        class="color-swatch"
+        style="background-color: {color};"
+        onclick={() => handleSelect(color)}
+    ></button>
+{/snippet}
+<DropdownContainer bind:open={openDropdown} dropdownTrigger={dropdownTrigger}>
+    <div class="color-picker">
+        {#each colors as color}
+            {@render Color?.(color)}
+        {/each}
+    </div>
+
+    {#if recentColors.length > 0}
+        <p style="margin-left: 5px; font-size: 12px; color: var(--text-secondary);">Recently used</p>
+        <div class="color-picker">
+            {#each recentColors as color}
+                {@render Color?.(color)}
+            {/each}
+        </div>
+    {/if}
+</DropdownContainer>
+
+<style>
+    .color-picker {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 5px;
+        padding: 5px;
+    }
+    .color-picker .color-swatch {
+        width: 20px;
+        height: 20px;
+        border-radius: 50% !important;
+        transition: transform 0.1s ease-in-out;
+    }
+
+    .color-picker .color-swatch:hover {
+        transform: scale(1.1);
+    }
+</style>

package/dist/Core/components/others/ColorPicker/main.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const Main: import("svelte").Component<{
+    selectedColor?: string;
+    openDropdown?: boolean;
+    dropdownTrigger: any;
+    onSelect?: Function;
+}, {}, "selectedColor" | "openDropdown">;
+type Main = ReturnType<typeof Main>;
+export default Main;

package/dist/Modules/Editor/Nodes/TextColor/textColor.svelte

@@ -1,88 +1,61 @@
 <script lang="ts">
-	import './styles.css';
 	import { onMount } from 'svelte';
-	import {theme, DropdownContainer} from '../../../../index.js';
-	import colors from '../../colors.js';
-	
-	import type { Editor } from "@tiptap/core";
-	export let editor: Editor;
+	import {theme, ColorPicker} from '../../../../index.js';
 
-	let textColor: HTMLDivElement;
-	let highlightColor = '#ffe066';
-	let textColorDropdown = false;
-	let highlightDropdown = false;
+	const {
+		editor,
+	}= $props();
+
+	let textColor = $state<HTMLDivElement>();
+	let highlightColor = $state('#ffe066');
+	let textColorDropdown = $state(false);
+	let highlightDropdown = $state(false);
 
 	onMount(() => {
-		if (!editor) return;
+		if (!editor || !textColor) return;
 		const value = $theme === 'dark' ? '#ffffff' : '#000000';
-		editor.chain().focus().setColor(value).run();
-		textColor.style.backgroundColor = value;
+		setTextColor(value);
 	});
 
-	function applyColor(color: string) {
+	function setTextColor(color: string) {
+		if (!editor || !textColor) return;
 		editor.chain().focus().setColor(color).run();
 		textColor.style.backgroundColor = color;
-		textColorDropdown = false;
+	}
+
+	function setHighlightColor(color: string) {
+		highlightColor = color;
+		if (editor) editor.chain().focus().setHighlight({ color }).run();
 	}
 </script>
 
 {#if editor}
 
 <main id="editor-text-color" style="display: flex; gap: 0.5rem; align-items: center;">
-	<DropdownContainer bind:open={textColorDropdown}>
-		{#snippet dropdownTrigger()}
-			<button aria-label="Text Color" title="Color" on:click={() => textColorDropdown = !textColorDropdown}>
-				<i class="fa fa-font"></i>
-				<div bind:this={textColor} style="height: 3px; border-radius: 0.3125rem;"></div>
-			</button>
-		{/snippet}
-		{#if textColorDropdown}
-			<div class="text-color-selector-dropdown ">
-				{#each colors as color}
-					<div
-						role="none"
-						class="color-swatch"
-						style="background-color: {color};"
-						on:click={() => applyColor(color)}
-					></div>
-				{/each}
-			</div>
-		{/if}
-	</DropdownContainer>
+	{#snippet TriggerText()}
+		<button aria-label="Text Color" title="Color" onclick={() => textColorDropdown = !textColorDropdown}>
+			<i class="fa fa-font"></i>
+			<div bind:this={textColor} style="height: 3px; border-radius: 0.3125rem;"></div>
+		</button>
+	{/snippet}
+	<ColorPicker bind:openDropdown={textColorDropdown} dropdownTrigger={TriggerText} onSelect={setTextColor}/>
 
 	<div style="display: flex;">
 		<button
 			aria-label="Highlight"
 			title="Highlight"
 			class="{editor.isActive('highlight') ? 'active' : ''}"
-			on:click={() => editor.chain().focus().toggleHighlight().run()} 
+			onclick={() => editor.chain().focus().toggleHighlight().run()} 
 			style={editor.isActive('highlight') ? `background-color: ${highlightColor};` : ''}
 		>
 		<i class="fa fa-font"></i>
 		</button>
-		<DropdownContainer bind:open={highlightDropdown}>
-			{#snippet dropdownTrigger()}
-				<button aria-label="Highlight Color" on:click={() => highlightDropdown = !highlightDropdown}>
-					<i class="fa fa-chevron-down {highlightDropdown ? 'active' : ''}"></i>
-				</button>
-			{/snippet}
-			{#if highlightDropdown}
-				<div class="text-color-selector-dropdown">
-					{#each colors as color}
-						<div
-							role="none"
-							class="color-swatch"
-							style="background-color: {color};"
-							on:click={() => {
-								editor.chain().focus().setHighlight({ color }).run();
-								highlightDropdown = false;
-								highlightColor = color;
-							}}
-						></div>
-					{/each}
-				</div>
-			{/if}
-		</DropdownContainer>
+		{#snippet TriggerHighlight()}
+			<button id="color-picker-trigger" aria-label="Highlight Color" onclick={() => highlightDropdown = !highlightDropdown}>
+				<i class="fa fa-chevron-down {highlightDropdown ? 'active' : ''}"></i>
+			</button>
+		{/snippet}
+		<ColorPicker bind:openDropdown={highlightDropdown} dropdownTrigger={TriggerHighlight} onSelect={setHighlightColor}/>
 	</div>
 </main>
 {/if}

package/dist/Modules/Editor/Nodes/TextColor/textColor.svelte.d.ts

@@ -1,22 +1,5 @@
-import './styles.css';
-import type { Editor } from "@tiptap/core";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TextColor: $$__sveltets_2_IsomorphicComponent<{
-    editor: Editor;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TextColor = InstanceType<typeof TextColor>;
+declare const TextColor: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type TextColor = ReturnType<typeof TextColor>;
 export default TextColor;

package/dist/Modules/Layout/Header/header.svelte

@@ -18,6 +18,7 @@
           color: {$layoutStore.headerTitleColor};
           font-family: {$layoutStore.headerTitleFont};
           font-size: {$layoutStore.headerTitleFontSize};
+          font-weight: {$layoutStore.headerTitleFontWeight};
         ">{$layoutStore.headerTitle}</h2>
       {/if}
     </a>

package/dist/Modules/Layout/Menu/menu.svelte

@@ -7,7 +7,6 @@
 
 	export let toggleMenu: () => void;
 	export let closeMobileMenu: () => void;
-	export let isMenuOpen: boolean;
 
 	$: sections = filterSectionsByRole(
 		$layoutStore.sections,
@@ -27,7 +26,7 @@
 	let openSubsections = new Set();
 
 	function toggleSubsection(id: string) {
-		if (!isMenuOpen){
+		if (!$layoutStore.isMenuOpen){
 			toggleMenu();
 			if(openSubsections.has(id)) return;
 		}
@@ -74,12 +73,12 @@
 </script>
 <nav id="sierra-menu">
 	<div class="sierra-menu-global-search">
-		<GlobalSearch {sections} iconMode={!isMenuOpen} onClose={closeMobileMenu} />
+		<GlobalSearch {sections} iconMode={!$layoutStore.isMenuOpen} onClose={closeMobileMenu} />
 	</div>
 	{#each sections.filter(section => !section.hidden) as section, i}
 		{#if section.label}
 			<div style="width: 80%;">
-				<h3 style="font-size:small; {isMenuOpen? '':'display:none;'}">{section.label}</h3>
+				<h3 style="font-size:small; {$layoutStore.isMenuOpen? '':'display:none;'}">{section.label}</h3>
 				<hr/>
 			</div>
 		{/if}
@@ -94,27 +93,27 @@
 						closeMobileMenu();
 					}
 				}}
-				style="{isMenuOpen? '':'border-radius: unset;border-left: none;'}; --menu-active-icon-color: {$layoutStore.menuActiveIconColor};"
+				style="{$layoutStore.isMenuOpen? '':'border-radius: unset;border-left: none;'}; --menu-active-icon-color: {$layoutStore.menuActiveIconColor};"
 				class={`
 					icon-base
 					${
 						item.children
-							? (!isMenuOpen && isParentActive(item, page.url.pathname) ? 'icon-active' : '')
+							? (!$layoutStore.isMenuOpen && isParentActive(item, page.url.pathname) ? 'icon-active' : '')
 							: (isParentActive(item, page.url.pathname) ? 'icon-active' : '')
 					}
 				`}
 
 			>
 				<i class={item.icon}></i>
-				<h3 style="{isMenuOpen ? '':'display:none'}">{item.label}</h3>
+				<h3 style="{$layoutStore.isMenuOpen ? '':'display:none'}">{item.label}</h3>
 				{#if item.children}
 					<i
 						class={`fa fa-chevron-right ${openSubsections.has(item.id) ? 'active' : ''}`}
-						style="position: absolute; right: 10px; font-size: 12px; {isMenuOpen ? '':'display:none'}"
+						style="position: absolute; right: 10px; font-size: 12px; {$layoutStore.isMenuOpen ? '':'display:none'}"
 					></i>
 				{/if}
 			</a>
-			{#if item.children && openSubsections.has(item.id) && isMenuOpen}
+			{#if item.children && openSubsections.has(item.id) && $layoutStore.isMenuOpen}
 				<div style="width: 75%; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px">
 					{#each item.children as child}
 						<a
@@ -127,7 +126,7 @@
 							`}
 							style="margin-left: 10px"
 						>
-							<h3 style="{isMenuOpen ? '':'display:none'}">
+							<h3 style="{$layoutStore.isMenuOpen ? '':'display:none'}">
 								{child.label}
 							</h3>
 						</a>

package/dist/Modules/Layout/Menu/menu.svelte.d.ts

@@ -15,7 +15,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const Menu: $$__sveltets_2_IsomorphicComponent<{
     toggleMenu: () => void;
     closeMobileMenu: () => void;
-    isMenuOpen: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Modules/Layout/collapse.svelte

@@ -1,9 +1,10 @@
 <script>
-    export let isMenuOpen;
+    import { layoutStore } from "../../index.js";
+    
     export let toggleMenu;
 </script>
 <div class="menu-collapse">
-    <button on:click={toggleMenu} aria-label="Collapse Menu" title="{isMenuOpen? 'Close Menu':'Open Menu'}">
+    <button on:click={toggleMenu} aria-label="Collapse Menu" title="{$layoutStore.isMenuOpen? 'Close Menu':'Open Menu'}">
         <svg
         width="30"
         height="30"
@@ -15,7 +16,7 @@
         stroke-linejoin="round"
         aria-hidden="true"
         focusable="false"
-        style="transform: {isMenuOpen? 'scaleX(1)': 'scaleX(-1)'}; flexShrink: 0"
+        style="transform: {$layoutStore.isMenuOpen? 'scaleX(1)': 'scaleX(-1)'}; flexShrink: 0"
         >
         <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
         <path d="M9 4v16" />

package/dist/Modules/Layout/collapse.svelte.d.ts

@@ -1,6 +1,5 @@
 export default Collapse;
 type Collapse = SvelteComponent<{
-    isMenuOpen: any;
     toggleMenu: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -8,7 +7,6 @@ type Collapse = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const Collapse: $$__sveltets_2_IsomorphicComponent<{
-    isMenuOpen: any;
     toggleMenu: any;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/Modules/Layout/main.svelte

@@ -12,11 +12,10 @@
 	} = $props();
 
 	let isSmallscreen = $state(true);
-	let isMenuOpen = $state(false);
 
 	$effect(() => {
 		isSmallscreen = $isMobile || $isTablet;
-		if (isSmallscreen) isMenuOpen = false;
+		if (isSmallscreen) $layoutStore.isMenuOpen = false;
 		if ($theme){
 			document.body.setAttribute('data-theme', $theme);
 			localStorage.setItem('theme', $theme);
@@ -29,9 +28,9 @@
 				const stored = localStorage.getItem('isMenuOpen');
 				if (stored === null) {
 					localStorage.setItem('isMenuOpen', 'true');
-					isMenuOpen = true;
+					$layoutStore.isMenuOpen = true;
 				} else {
-					isMenuOpen = stored === 'true';
+					$layoutStore.isMenuOpen = stored === 'true';
 				}
 			}
 			const storedTheme = localStorage.getItem('theme');
@@ -47,14 +46,14 @@
 	});
 
 	const toggleMenu = () => {
-		isMenuOpen = !isMenuOpen;
+		$layoutStore.isMenuOpen = !$layoutStore.isMenuOpen;
 		if(isSmallscreen) return;
 		if (typeof localStorage !== 'undefined') {
-			localStorage.setItem('isMenuOpen', isMenuOpen.toString());
+			localStorage.setItem('isMenuOpen', $layoutStore.isMenuOpen.toString());
 		}
 	};
 	const closeMobileMenu = () => {
-		if (isSmallscreen && isMenuOpen) isMenuOpen = false;
+		if (isSmallscreen && $layoutStore.isMenuOpen) $layoutStore.isMenuOpen = false;
 	};
 </script>
 
@@ -70,16 +69,15 @@
 			data-label="Menu Container"
 			style={
 				isSmallscreen
-				? `width:300px; transform: translateX(${isMenuOpen ? '0%' : '-100%'}); transition: transform 0.3s ease; position: fixed; left: 0; padding-bottom: 50px`
-				: `width: ${isMenuOpen ? '300px' : '70px'}; transition: width 0.3s ease;`
+				? `width:300px; transform: translateX(${ $layoutStore.isMenuOpen ? '0%' : '-100%'}); transition: transform 0.3s ease; position: fixed; left: 0; padding-bottom: 50px`
+				: `width: ${$layoutStore.isMenuOpen ? '300px' : '70px'}; transition: width 0.3s ease;`
 			}
 		>
 		<Menu 
-			{isMenuOpen} 
 			{toggleMenu}
 			{closeMobileMenu} 
 		/>
-		<Collapse {isMenuOpen} {toggleMenu}/>
+		<Collapse {toggleMenu}/>
 		</div>
 		<div data-label="Content Container" class="content" role="none" onclick={closeMobileMenu} style={$layoutStore.paddingOff ? 'padding: 0px;' : 'padding: 20px'}>
 			<Background />

package/dist/global.css

@@ -261,4 +261,12 @@ button:disabled{
   transform: scale(0);
   opacity: 0.4;
   background: currentColor;
+}
+
+/**/
+i.fa-chevron-down {
+  transition: transform 0.2s;
+}
+i.fa-chevron-down.active {
+  transform: rotate(180deg);
 }

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as Select } from './Core/components/Form/Input/select/select.sv
 export { default as FileInput } from './Core/components/Form/Input/FileInput/fileInput.svelte';
 export { default as SearchBar } from './Core/components/Form/Input/SearchBar/search.svelte';
 export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
+export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
+export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
 export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
 export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';
 export { default as PreviewVideo } from './Core/components/others/Previews/Video/video.svelte';
@@ -38,6 +40,7 @@ export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.sv
 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 Avatar } from './Core/components/others/Avatar/avatar.svelte';
+export { default as ColorPicker } from './Core/components/others/ColorPicker/main.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

@@ -20,6 +20,8 @@ export { default as Select } from './Core/components/Form/Input/select/select.sv
 export { default as FileInput } from './Core/components/Form/Input/FileInput/fileInput.svelte';
 export { default as SearchBar } from './Core/components/Form/Input/SearchBar/search.svelte';
 export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
+export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
+export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
 //Previews
 export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
 export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';
@@ -46,6 +48,7 @@ export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.sv
 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 Avatar } from './Core/components/others/Avatar/avatar.svelte';
+export { default as ColorPicker } from './Core/components/others/ColorPicker/main.svelte';
 //####################Features##################################
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 //####################MODULES COMPONENTS########################

package/dist/stores/core/modal.d.ts

@@ -4,7 +4,13 @@ export function resetModalStore(): void;
 export type ModalData = {
     open: boolean;
     title: string;
+    titleFont?: string;
+    titleFontSize?: string;
+    titleFontWeight?: string;
     content?: string;
+    logo_url?: string;
+    logo_url_size?: string;
+    logo_url_spacing?: string;
     confirmText?: string;
     cancelText?: string;
     onConfirm?: (() => void) | null;

package/dist/stores/core/modal.js

@@ -2,15 +2,21 @@ import { writable } from 'svelte/store';
 
 /**
  * @typedef {{
- *   open: boolean,
- *   title: string,
- *   content?: string,
- *   confirmText?: string,
- *   cancelText?: string,
- *   onConfirm?: (() => void) | null,
- *   onCancel?: (() => void) | null,
- *   closeOnOverlay?: boolean,
- *   render?: (() => any) | null
+  *   open: boolean,
+  *   title: string,
+  *   titleFont?: string,
+  *   titleFontSize?: string,
+  *   titleFontWeight?: string,
+  *   content?: string,
+  *   logo_url?: string,
+  *   logo_url_size?: string,
+  *   logo_url_spacing?: string,
+  *   confirmText?: string,
+  *   cancelText?: string,
+  *   onConfirm?: (() => void) | null,
+  *   onCancel?: (() => void) | null,
+  *   closeOnOverlay?: boolean,
+  *   render?: (() => any) | null
  * }} ModalData
  */
 
@@ -18,7 +24,13 @@ import { writable } from 'svelte/store';
 const defaultModalState = {
   open: false,
   title: '',
+  titleFont: 'inherit',
+  titleFontSize: '1.3rem',
+  titleFontWeight: 'inherit',
   content: '',
+  logo_url: '',
+  logo_url_size: '30px',
+  logo_url_spacing: '1rem',
   confirmText: 'Confirm',
   cancelText: 'Cancel',
   onConfirm: null,

package/dist/stores/modules/layout.d.ts

@@ -15,10 +15,12 @@ export type Section = {
     items: SectionItem[];
 };
 export type LayoutState = {
+    isMenuOpen: boolean;
     headerTitle: string;
     headerTitleColor?: string;
     headerTitleFont?: string;
     headerTitleFontSize?: string;
+    headerTitleFontWeight?: string;
     headerLink: string;
     headerImage: string;
     headerImageSize: string;

package/dist/stores/modules/layout.js

@@ -1,9 +1,11 @@
 import { writable } from 'svelte/store';
 const defaultLayoutState = {
+    isMenuOpen: false,
     headerTitle: '',
     headerTitleColor: 'inherit',
     headerTitleFont: 'inherit',
     headerTitleFontSize: 'inherit',
+    headerTitleFontWeight: 'inherit',
     headerLink: '',
     headerImage: '',
     headerImageSize: '30px',

package/package.json

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

package/dist/Modules/Editor/Nodes/TextColor/styles.css

@@ -1,18 +0,0 @@
-#editor-text-color .text-color-selector-dropdown {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 5px;
-  padding: 5px;
-}
-
-#editor-text-color .color-swatch {
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 50%;
-  transition: transform 0.1s ease-in-out;
-}
-
-#editor-text-color .color-swatch:hover {
-  transform: scale(1.1);
-}