@sierra-95/svelte-scaffold 1.0.4 → 1.0.7

package/dist/Hooks/button.d.ts

@@ -0,0 +1,3 @@
+export declare function buttonRipple(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/Hooks/button.js

@@ -0,0 +1,33 @@
+export function buttonRipple(node) {
+    const handleClick = (e) => {
+        const rect = node.getBoundingClientRect();
+        const ripple = document.createElement('span');
+        const size = Math.max(rect.width, rect.height);
+        const x = e.clientX - rect.left - size / 2;
+        const y = e.clientY - rect.top - size / 2;
+        ripple.style.position = 'absolute';
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.borderRadius = '50%';
+        ripple.style.background = 'currentColor';
+        ripple.style.opacity = '0.25';
+        ripple.style.transform = 'scale(0)';
+        ripple.style.pointerEvents = 'none';
+        ripple.style.transition = 'transform 400ms ease-out, opacity 600ms ease-out';
+        node.appendChild(ripple);
+        requestAnimationFrame(() => {
+            ripple.style.transform = 'scale(1)';
+            ripple.style.opacity = '0';
+        });
+        ripple.addEventListener('transitionend', () => ripple.remove());
+    };
+    node.style.position = 'relative';
+    node.style.overflow = 'hidden';
+    node.addEventListener('click', handleClick);
+    return {
+        destroy() {
+            node.removeEventListener('click', handleClick);
+        }
+    };
+}

package/dist/components/Core/Form/Input/FileInput/fileInput.svelte

@@ -120,6 +120,7 @@
             </Button>
         {/if}
         <Button 
+            endIcon="fa-cloud-arrow-up"
             onclick={(e: MouseEvent) => {
                 rest.onclick?.(e);
             }}

package/dist/components/Core/others/Button/default/button.css

@@ -1,52 +1,77 @@
-.base-btn {
-  color: var(--button-text);
+#sierra-button {
   padding: 0.5rem 1rem; 
   border-radius: 4px; 
   cursor: pointer;
-  transition: all 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
   min-width: 100px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   gap: 10px;
 }
-.base-btn:hover{
+#sierra-button:hover{
   opacity: 0.8;
 }
+#sierra-button i{
+  font-size: 0.9rem;
+}
 /*********Button Variants*************************/
-.btn-outlined {
+.sierra-button-contained {
+  color: var(--button-text);
+}
+.sierra-button-outlined {
   border-width: 1px;
   border-style: solid;
 }
-.btn-contained-primary {
+
+/*********Contained Button Colors*************************/
+.sierra-button-contained-primary {
   background-color: var(--primary-bg);
 }
-.btn-contained-warning {
+.sierra-button-contained-warning {
   background-color: var(--warning-bg);
 }
-.btn-contained-error {
+.sierra-button-contained-error {
   background-color: var(--error-bg);
 }
-.btn-outlined-primary {
+/*********Outlined Button Colors*************************/
+.sierra-button-outlined-primary {
   border-color: var(--primary-bg);
   color: var(--primary-bg);
 }
-.btn-outlined-warning {
+.sierra-button-outlined-warning {
   border-color: var(--warning-bg);
   color: var(--warning-bg);
 }
-.btn-outlined-error {
+.sierra-button-outlined-error {
   border-color: var(--error-bg);
   color: var(--error-bg);
 }
 
 /*****Disabled********/
-.base-btn.disabled {
+#sierra-button.disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 /****Pill Button******/
-.base-btn.pill{
+#sierra-button.pill{
   border-radius: 50%;
   min-width: unset;
-}
+}
+
+.ripple {
+  position: relative;
+  overflow: hidden; /* IMPORTANT */
+}
+
+.ripple::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  pointer-events: none;
+  transform: scale(0);
+  opacity: 0.4;
+  background: currentColor;
+}

package/dist/components/Core/others/Button/default/button.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	// @enable runes
-	import { CircularProgress } from '../../../../../index.js';
+	import { CircularProgress, buttonRipple } from '../../../../../index.js';
 
-  type _variant = 'contained' | 'outlined';
-  type _color = 'primary' | 'warning' | 'error';
-  type _buttonType = 'button' | 'submit' | 'reset';
+	type _variant = 'contained' | 'outlined';
+	type _color = 'primary' | 'warning' | 'error';
+	type _buttonType = 'button' | 'submit' | 'reset';
 
 	const {
 		variant = 'contained' as _variant,
@@ -17,83 +16,106 @@
 		disabled = false,
 		isLoading = false,
 		html2canvas_ignore = 'false',
+		startIcon = '',
+		endIcon = '',
 		style = '',
     	children = null,
 		...rest
 	} = $props();
 
+	const name = 'sierra-button';
 	const buttonClasses = $derived(() => {
-		let classes = 'base-btn';
-
-		if (variant) classes += ` btn-${variant}`;
-
+		let classes = '';
+		if (variant) classes += `${name}-${variant}`;
 		if (variant === 'contained') {
-			classes += ` btn-contained-${color}`;
+			classes += ` ${name}-contained-${color}`;
 		} else if (variant === 'outlined') {
-			classes += ` btn-outlined-${color}`;
+			classes += ` ${name}-outlined-${color}`;
 		}
-
 		if (style) classes += ` ${style}`;
-
 		return classes;
 	});
 </script>
 
-<style>.base-btn {
-  color: var(--button-text);
+<style>#sierra-button {
   padding: 0.5rem 1rem; 
   border-radius: 4px; 
   cursor: pointer;
-  transition: all 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
   min-width: 100px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   gap: 10px;
 }
-.base-btn:hover{
+#sierra-button:hover{
   opacity: 0.8;
 }
+#sierra-button i{
+  font-size: 0.9rem;
+}
 /*********Button Variants*************************/
-.btn-outlined {
+.sierra-button-contained {
+  color: var(--button-text);
+}
+.sierra-button-outlined {
   border-width: 1px;
   border-style: solid;
 }
-.btn-contained-primary {
+/*********Contained Button Colors*************************/
+.sierra-button-contained-primary {
   background-color: var(--primary-bg);
 }
-.btn-contained-warning {
+.sierra-button-contained-warning {
   background-color: var(--warning-bg);
 }
-.btn-contained-error {
+.sierra-button-contained-error {
   background-color: var(--error-bg);
 }
-.btn-outlined-primary {
+/*********Outlined Button Colors*************************/
+.sierra-button-outlined-primary {
   border-color: var(--primary-bg);
   color: var(--primary-bg);
 }
-.btn-outlined-warning {
+.sierra-button-outlined-warning {
   border-color: var(--warning-bg);
   color: var(--warning-bg);
 }
-.btn-outlined-error {
+.sierra-button-outlined-error {
   border-color: var(--error-bg);
   color: var(--error-bg);
 }
 /*****Disabled********/
-.base-btn.disabled {
+#sierra-button.disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 /****Pill Button******/
-.base-btn.pill{
+#sierra-button.pill{
   border-radius: 50%;
   min-width: unset;
 }
+.ripple {
+  position: relative;
+  overflow: hidden; /* IMPORTANT */
+}
+.ripple::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  pointer-events: none;
+  transform: scale(0);
+  opacity: 0.4;
+  background: currentColor;
+}
 </style>
 
 <button
+	id={name}
 	{...rest}
+	use:buttonRipple
 	data-html2canvas-ignore={html2canvas_ignore}
 	class:pill={pill}
 	class:disabled={isLoading || disabled}
@@ -105,8 +127,14 @@
 		rest.onclick?.(e);
 	}}
 >
+	{#if startIcon}
+		<i class="fa {startIcon}"></i>
+	{/if}
 	{@render children?.()}
+	{#if endIcon}
+		<i class="fa {endIcon}"></i>
+	{/if}
 	{#if isLoading}
 		<CircularProgress size={spinner} thickness={thickness} />
 	{/if}
-</button>
+</button>

package/dist/components/Core/others/Button/default/button.svelte.d.ts

@@ -9,6 +9,8 @@ declare const Button: import("svelte").Component<{
     disabled?: boolean;
     isLoading?: boolean;
     html2canvas_ignore?: string;
+    startIcon?: string;
+    endIcon?: string;
     style?: string;
     children?: any;
 } & Record<string, any>, {}, "">;

package/dist/components/Core/others/Progress/CustomProgress/customProgress.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { onMount, onDestroy } from "svelte";
+    let {
+        value = $bindable(0),
+        height = '5px',
+        radius = '8px',
+        color = 'var(--primary-bg)', 
+        useTimeout = false,
+        seconds = 0,
+        onComplete = null,
+    } = $props();
+
+    let intervalId: any;
+
+    onMount(() => {
+        if (useTimeout && seconds > 0) {
+        const startTime = Date.now();
+        const endTime = startTime + seconds * 1000;
+
+        intervalId = setInterval(() => {
+            const now = Date.now();
+            const remaining = Math.max(endTime - now, 0);
+            const percentage = (remaining / (seconds * 1000)) * 100;
+            value = percentage;
+
+            if (remaining <= 0) {
+            clearInterval(intervalId);
+            intervalId = null;
+            if (onComplete) onComplete();
+            }
+        }, 50); // update 20 times per second
+        }
+    });
+
+    onDestroy(() => {
+        if (intervalId) clearInterval(intervalId);
+    });
+</script>
+
+<div
+  class="sierra-custom-progress"
+  style="border-radius: {radius}; height: {height}; background-color: var(--background-tertiary); overflow: hidden;"
+>
+  <div
+    class="sierra-custom-progress-fill"
+    style="
+      width: {Math.min(Math.max(value, 0), 100)}%;
+      background-color: {color};
+      height: 100%;
+      transition: width 0.3s ease;
+    "
+  ></div>
+</div>
+
+<style>
+  .sierra-custom-progress {
+    width: 100%;
+    display: block;
+  }
+
+  .sierra-custom-progress-fill {
+    border-radius: inherit;
+  }
+</style>

package/dist/components/Core/others/Progress/CustomProgress/customProgress.svelte.d.ts

@@ -0,0 +1,11 @@
+declare const CustomProgress: import("svelte").Component<{
+    value?: number;
+    height?: string;
+    radius?: string;
+    color?: string;
+    useTimeout?: boolean;
+    seconds?: number;
+    onComplete?: any;
+}, {}, "value">;
+type CustomProgress = ReturnType<typeof CustomProgress>;
+export default CustomProgress;

package/dist/components/Core/others/Progress/LinearProgress/LinearProgress.css

@@ -4,7 +4,6 @@
     appearance: none;
     border: none;
     height: 0.25em;
-    color: var(--primary-bg);
     background-color: rgba( 33, 150, 243, 0.12);
     font-size: 16px;
 }

package/dist/components/Core/others/Progress/LinearProgress/LinearProgress.svelte

@@ -1,10 +1,14 @@
+<script>
+  const {
+    color = 'var(--primary-bg)',
+  } = $props();
+</script>
 <style>.pure-material-progress-linear {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: none;
     height: 0.25em;
-    color: var(--primary-bg);
     background-color: rgba( 33, 150, 243, 0.12);
     font-size: 16px;
 }
@@ -75,5 +79,8 @@
   }
 </style>
 <div class="cover">
-  <progress class="pure-material-progress-linear child"></progress>
+  <progress 
+    style="color: {color};"
+    class="pure-material-progress-linear child"
+    ></progress>
 </div>

package/dist/components/Core/others/Progress/LinearProgress/LinearProgress.svelte.d.ts

@@ -1,26 +1,11 @@
 export default LinearProgress;
-type LinearProgress = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type LinearProgress = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LinearProgress: import("svelte").Component<{
+    color?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    color?: string;
 };
-declare const LinearProgress: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/Modules/Editor/save.svelte

@@ -25,4 +25,5 @@
 <Button
   onclick={onSave}
   disabled={disabled}
+  endIcon="fa-regular fa-floppy-disk"
 >{exportText}</Button>

package/dist/components/Modules/Editor/styles/controls.css

@@ -2,17 +2,17 @@
     margin: 0px 10px;
     padding-top: 5px;
 }  
-#editor #controls .controls-menu i {
+#editor #controls .controls-menu i:not(#sierra-button i){
   display: none;
 }
-#editor #controls .controls-menu #sierra-menu-item i{
+#editor #controls .controls-menu #sierra-menu-item i:not(#sierra-button i){
   display: inline-block;
 }
 @media (max-width: 400px) {
   #editor #controls .controls-menu span {
       display: none;
   }  
-  #editor #controls .controls-menu i {
+  #editor #controls .controls-menu i:not(#sierra-button i) {
     display: inline-block;
   }
 }
@@ -42,11 +42,14 @@
     opacity: 1;
     pointer-events: all;
 }
-
 #editor #controls button{
-  align-self:center;
-  cursor: pointer;
+  align-self: center;
+}
+#editor #controls button{
   padding: 2px;
+}
+#editor #controls button:not(#sierra-button) {
+  align-self:center;
   border-radius: 3px;
   transition: background-color 0.3s ease, color 0.1s ease;
 }
@@ -58,7 +61,7 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
-#editor #controls button:hover:not(.active):not(.base-btn) {
+#editor #controls button:hover:not(.active):not(#sierra-button) {
   color: var(--primary-bg);
 }
 

package/dist/components/Modules/FilePicker/cloudStore.svelte

@@ -71,7 +71,7 @@
 
 <style>
     #sierra-cloud-store .icon-active {
-        background-color: var(--menu-icon-active-bg);
+        background-color: var(--menu-item-active);
     }
 </style>
 <main id="sierra-cloud-store" style="display: flex; gap: 1rem; height: 100%; min-height: 300px;">

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import './global.css';
 export { default as CircularProgress } from './components/Core/others/Progress/CircularProgress/CircularProgress.svelte';
 export { default as LinearProgress } from './components/Core/others/Progress/LinearProgress/LinearProgress.svelte';
+export { default as CustomProgress } from './components/Core/others/Progress/CustomProgress/customProgress.svelte';
 export { default as Button } from './components/Core/others/Button/default/button.svelte';
 export { default as ButtonFlip } from './components/Core/others/Button/Flip/button.svelte';
 export { default as ButtonMarquee } from './components/Core/others/Button/Marquee/button.svelte';
@@ -39,3 +40,4 @@ export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.
 export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modules/toast.js';
 export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia } from './Hooks/preview.js';
 export { validateLayoutMenuSections } from './Hooks/layout_menu.js';
+export { buttonRipple } from './Hooks/button.js';

package/dist/index.js

@@ -3,6 +3,7 @@ import './global.css';
 //Progress
 export { default as CircularProgress } from './components/Core/others/Progress/CircularProgress/CircularProgress.svelte';
 export { default as LinearProgress } from './components/Core/others/Progress/LinearProgress/LinearProgress.svelte';
+export { default as CustomProgress } from './components/Core/others/Progress/CustomProgress/customProgress.svelte';
 //Buttons
 export { default as Button } from './components/Core/others/Button/default/button.svelte';
 export { default as ButtonFlip } from './components/Core/others/Button/Flip/button.svelte';
@@ -52,3 +53,4 @@ export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modul
 //#######################HOOKS/UTILS########################
 export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia } from './Hooks/preview.js';
 export { validateLayoutMenuSections } from './Hooks/layout_menu.js';
+export { buttonRipple } from './Hooks/button.js';

package/package.json

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