@sierra-95/svelte-scaffold 1.0.1

package/dist/components/Core/Form/Input/password/password.svelte.d.ts

@@ -0,0 +1,23 @@
+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 Password: $$__sveltets_2_IsomorphicComponent<{
+    id?: string;
+    label?: string;
+    value?: string;
+    placeholder?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Password = InstanceType<typeof Password>;
+export default Password;

package/dist/components/Core/Menus/DropdownContainer/dropdown.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { onMount, onDestroy } from 'svelte';
+    import { scale } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
+
+    let { 
+        top = '130%',
+        width = 'auto',
+        open = $bindable(true), 
+        dropdownTrigger = null,
+        children = null,
+    } = $props();
+
+
+    let dropdown = $state<HTMLElement | null>(null);
+    let dropdownStyle = $state({ left: '0', right: 'auto' });
+    
+    const adjustDropdownPosition = () => {
+        if (!container || !dropdown) return;
+        const rect = container.getBoundingClientRect();
+        const dropdownWidth = dropdown.offsetWidth;
+        const viewportWidth = window.innerWidth;
+
+        // Check if dropdown would overflow right
+        if (rect.left + dropdownWidth > viewportWidth) {
+            dropdownStyle = { left: 'auto', right: '0' };
+        } else {
+            dropdownStyle = { left: '0', right: 'auto' };
+        }
+    };
+
+    $effect(() => {
+        if (open) {
+            adjustDropdownPosition();
+        }
+    });
+
+    // Close dropdown on outside click
+    let container = $state<HTMLElement | null>(null);
+
+    const handleClose = () => {
+        open = false;
+    };
+    const handleDocumentClick = (event: MouseEvent) => {
+        if (open && container && !container.contains(event.target as Node)) {
+            handleClose();
+        }
+    };
+    if (browser) {
+        onMount(() => {
+            document.addEventListener('click', handleDocumentClick);
+        });
+        onDestroy(() => {
+            document.removeEventListener('click', handleDocumentClick);
+        });
+    }
+</script>
+
+<style>
+    #sierra-dropdown {
+        position: relative;
+    }
+    #sierra-dropdown .dropdown-paper {
+        position: absolute;
+        background-color: var(--background-secondary);
+        border-radius: 5px;
+        box-shadow: var(--box-shadow);
+        min-width: 5px;
+        min-height: 5px;
+        z-index: 5;
+    }
+</style>
+
+<main id="sierra-dropdown" bind:this={container}>
+    {@render dropdownTrigger?.()}
+    {#if open}
+        <div
+            bind:this={dropdown}
+            class="dropdown-paper"
+            transition:scale={{
+                start: 0.9,
+                duration: 180,
+                easing: quintOut,
+                opacity: 0
+            }}
+            style="
+                transform-origin: top; top: {top}; width: {width};
+                left: {dropdownStyle.left}; right: {dropdownStyle.right};
+            "
+        >{@render children?.()}
+        </div>
+    {/if}
+</main>

package/dist/components/Core/Menus/DropdownContainer/dropdown.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const Dropdown: import("svelte").Component<{
+    top?: string;
+    width?: string;
+    open?: boolean;
+    dropdownTrigger?: any;
+    children?: any;
+}, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/Core/Menus/MenuItem/menuItem.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    const {
+        icon = '',
+        active = false,
+        disabled = false,
+        iconSize = '20px',
+        iconBg: iconBg = 'var(--primary-bg)',
+        children = null,
+        ...rest
+    } = $props();
+</script>
+<style>
+    #sierra-menu-item {
+        display: flex;
+        align-items: center;
+        padding: 10px 16px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+    }
+    
+    #sierra-menu-item:hover {
+        background-color: var(--menu-item-hover);
+    }
+    #sierra-menu-item.disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+</style>
+<div
+    id="sierra-menu-item"
+    role="none" 
+    style="background-color: {active ? 'var(--menu-item-active)' : ''}"
+    class="{disabled? 'disabled':''}"
+    {...rest}
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+>
+    {#if icon}
+        <i style="font-size: {iconSize}; color: {iconBg}" 
+        class="fa {icon}"></i>
+    {/if}
+    <h4 style="margin-left: {icon ? '20px' : '0'};">{@render children?.()}</h4>
+</div>

package/dist/components/Core/Menus/MenuItem/menuItem.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const MenuItem: import("svelte").Component<{
+    icon?: string;
+    active?: boolean;
+    disabled?: boolean;
+    iconSize?: string;
+    iconBg?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/Core/Menus/UserMenu/profile.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import {DropdownContainer} from '../../../../index.js';
+
+  let { 
+    top = '150%',
+    width = '300px',
+    iconSize = '30px',
+    iconBg = 'var(--primary-bg)',
+    user = $bindable({}),
+    open = $bindable(false),
+    children = null,
+   } = $props();
+
+  const handleClick = () => {
+    open = !open;
+  };
+</script>
+
+<DropdownContainer bind:open {top} {width}>
+    {#snippet dropdownTrigger()}
+        <button aria-label="none" onclick={handleClick}>
+          <i style="font-size: {iconSize}; color: {iconBg}" class="fa-solid fa-user"></i>
+        </button>
+    {/snippet}
+    <div style="padding:15px; border-bottom:1px solid var(--border);">
+      {#if Object.keys(user).length > 0}
+        {#each Object.entries(user) as [key, value], i}
+          <p>{value}</p>
+        {/each}
+      {:else}
+        <p>No user info</p>
+      {/if}
+    </div> 
+    {@render children?.()}
+</DropdownContainer>

package/dist/components/Core/Menus/UserMenu/profile.svelte.d.ts

@@ -0,0 +1,11 @@
+declare const Profile: import("svelte").Component<{
+    top?: string;
+    width?: string;
+    iconSize?: string;
+    iconBg?: string;
+    user?: Record<string, any>;
+    open?: boolean;
+    children?: any;
+}, {}, "open" | "user">;
+type Profile = ReturnType<typeof Profile>;
+export default Profile;

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

@@ -0,0 +1,51 @@
+.btn-flip {
+  position: relative;
+  display: inline-block;
+  width: 150px; /* you can fix width if needed */
+  height: 40px;
+  text-align: center;
+  perspective: 1000px;
+  color: var(--text-color);
+}
+
+.btn-flip::before,
+.btn-flip::after {
+  content: attr(data-front);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30px;
+  line-height: 40px;
+  transition: 0.5s;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+}
+
+.btn-flip::before {
+  content: attr(data-front);
+  background: var(--bg-front);
+  transform: translateY(0) rotateX(0);
+  opacity: 1;
+}
+
+.btn-flip::after {
+  content: attr(data-back);
+  background: var(--bg-back);
+  transform: translateY(-50%) rotateX(90deg);
+  opacity: 0;
+}
+
+.btn-flip:hover::before {
+  opacity: 0;
+  transform: translateY(50%) rotateX(90deg);
+}
+
+.btn-flip:hover::after {
+  opacity: 1;
+  transform: translateY(0) rotateX(0);
+}

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

@@ -0,0 +1,69 @@
+<a href={link} 
+    aria-label="button" 
+    class="btn-flip" 
+    data-back={back} 
+    data-front={front}
+    style="--bg-front: {bgFront}; --bg-back: {bgBack}; --text-color: {color}"
+></a>
+<style>.btn-flip {
+  position: relative;
+  display: inline-block;
+  width: 150px; /* you can fix width if needed */
+  height: 40px;
+  text-align: center;
+  perspective: 1000px;
+  color: var(--text-color);
+}
+
+.btn-flip::before,
+.btn-flip::after {
+  content: attr(data-front);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30px;
+  line-height: 40px;
+  transition: 0.5s;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+}
+
+.btn-flip::before {
+  content: attr(data-front);
+  background: var(--bg-front);
+  transform: translateY(0) rotateX(0);
+  opacity: 1;
+}
+
+.btn-flip::after {
+  content: attr(data-back);
+  background: var(--bg-back);
+  transform: translateY(-50%) rotateX(90deg);
+  opacity: 0;
+}
+
+.btn-flip:hover::before {
+  opacity: 0;
+  transform: translateY(50%) rotateX(90deg);
+}
+
+.btn-flip:hover::after {
+  opacity: 1;
+  transform: translateY(0) rotateX(0);
+}
+</style>
+<script>
+    const {
+        link = "#",
+        back = "back",
+        front = "front",
+        bgFront = "var(--primary-bg)",
+        bgBack = "#f4e5d4",
+        color = "var(--button-text)",
+    } = $props();
+</script>

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

@@ -0,0 +1,21 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Button: import("svelte").Component<{
+    link?: string;
+    back?: string;
+    front?: string;
+    bgFront?: string;
+    bgBack?: string;
+    color?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    link?: string;
+    back?: string;
+    front?: string;
+    bgFront?: string;
+    bgBack?: string;
+    color?: string;
+};

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

@@ -0,0 +1,37 @@
+  .marquee-container {
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    font-size: 1rem;
+    padding: 0.2rem 10px; 
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+  }
+
+  .marquee {
+    display: inline-block;
+    white-space: nowrap;
+    transition: none;
+  }
+
+  /* scrolling animation only active when hovered */
+  .scrolling {
+    animation: scroll 2s linear infinite;
+  }
+
+  @keyframes scroll {
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-66.66%); 
+    }
+  }
+  .marquee:not(.scrolling) span:not(:first-child) {
+    visibility: hidden;
+  }
+
+  .marquee span {
+    margin-right: 2rem;
+  }

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import './button.css';
+
+  const {
+    text = "Hover me",
+    link = "#",
+    bg = "var(--primary-bg)",
+    color = "var(--text)"
+  } = $props();
+
+  let scrolling = $state(false);
+
+  let container: HTMLDivElement;
+  let marquee: HTMLAnchorElement;
+
+  let containerWidth = 0;
+  let textWidth = 0;
+
+  onMount(() => {
+    if (container && marquee) {
+      // width of one sentence
+      textWidth = marquee.offsetWidth / 3; // because we repeat text 3x
+      containerWidth = textWidth - 10;
+      container.style.width = containerWidth + "px";
+      const containerHeight = container.offsetHeight;
+      container.style.borderRadius = containerHeight / 2 + "px";
+    }
+  });
+</script>
+
+<div
+  role='none'
+  bind:this={container}
+  class="marquee-container"
+  onmouseenter={() => scrolling = true}
+  onmouseleave={() => scrolling = false}
+  style="--border-color: {bg}; --text-color: {color}"
+>
+  <a href={link} class="marquee {scrolling ? 'scrolling' : ''}" bind:this={marquee}>
+    <span>{text}</span>
+    <span>{text}</span>
+    <span>{text}</span>
+  </a>
+</div>

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

@@ -0,0 +1,9 @@
+import './button.css';
+declare const Button: import("svelte").Component<{
+    text?: string;
+    link?: string;
+    bg?: string;
+    color?: string;
+}, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,31 @@
+.btn-0 {
+  position: relative;
+  display: block;
+  width:130px;
+  height: 30px;
+  line-height: 27px;
+  text-align: center;
+  border: 1px solid var(--btn-color);
+  border-radius: 50px;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 0;
+  color: var(--text-color);
+}
+a{
+    text-decoration: none;
+}
+/* Swipe layer */
+.btn-0::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  background-color: var(--btn-color);
+  transform: translateX(-100%);
+  transition: transform 0.4s ease;
+  z-index: -1;
+}
+/* Hover triggers swipe */
+.btn-0:hover::before {
+  transform: translateX(0);
+}

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

@@ -0,0 +1,45 @@
+<a 
+    class="btn-0" 
+    href={link}
+    style="--btn-color: {bg}; --text-color: {color}"
+>{text}</a>
+<style>.btn-0 {
+  position: relative;
+  display: block;
+  width:130px;
+  height: 30px;
+  line-height: 27px;
+  text-align: center;
+  border: 1px solid var(--btn-color);
+  border-radius: 50px;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 0;
+  color: var(--text-color);
+}
+a{
+    text-decoration: none;
+}
+/* Swipe layer */
+.btn-0::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  background-color: var(--btn-color);
+  transform: translateX(-100%);
+  transition: transform 0.4s ease;
+  z-index: -1;
+}
+/* Hover triggers swipe */
+.btn-0:hover::before {
+  transform: translateX(0);
+}
+</style>
+<script>
+    const {
+        link = "#",
+        text = "Button",
+        bg = "var(--primary-bg)",
+        color = "var(--text)"
+    } = $props();
+</script>

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

@@ -0,0 +1,17 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Button: import("svelte").Component<{
+    link?: string;
+    text?: string;
+    bg?: string;
+    color?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    link?: string;
+    text?: string;
+    bg?: string;
+    color?: string;
+};

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

@@ -0,0 +1,52 @@
+.base-btn {
+  color: var(--button-text);
+  padding: 0.5rem 1rem; 
+  border-radius: 4px; 
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  min-width: 100px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 10px;
+}
+.base-btn:hover{
+  opacity: 0.8;
+}
+/*********Button Variants*************************/
+.btn-outlined {
+  border-width: 1px;
+  border-style: solid;
+}
+.btn-contained-primary {
+  background-color: var(--primary-bg);
+}
+.btn-contained-warning {
+  background-color: var(--warning-bg);
+}
+.btn-contained-error {
+  background-color: var(--error-bg);
+}
+.btn-outlined-primary {
+  border-color: var(--primary-bg);
+  color: var(--primary-bg);
+}
+.btn-outlined-warning {
+  border-color: var(--warning-bg);
+  color: var(--warning-bg);
+}
+.btn-outlined-error {
+  border-color: var(--error-bg);
+  color: var(--error-bg);
+}
+
+/*****Disabled********/
+.base-btn.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/****Pill Button******/
+.base-btn.pill{
+  border-radius: 50%;
+  min-width: unset;
+}