@widgetic/design-system 0.3.68

package/dist/components/PasswordInput.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  // Svelte Imports
+  import type { FullAutoFill } from 'svelte/elements';
+
+  // SHADCN Imports
+  import { Input } from './ui/input';
+
+  // External Props
+  export let value = '';
+  export let placeholder = 'Enter password';
+  export let name = 'password';
+  export let autocomplete: FullAutoFill = 'current-password';
+  export let disabled = false;
+  
+  // Internal Variables
+  let showPassword = false;
+</script>
+
+<div class="relative widgetic-colors">
+  <div class="relative">
+    <Input
+      class="pr-[32px]"
+      bind:value
+      {name}
+      type={showPassword ? 'text' : 'password'}
+      {placeholder}
+      {autocomplete}
+      {disabled}
+      {...$$restProps}
+    />
+
+    <!-- Toggle Password Visibility -->
+    <button
+      type="button"
+      class="absolute top-1/2 -translate-y-1/2 right-3 cursor-pointer text-[hsl(var(--sage-green))] hover:text-[hsl(var(--dark))]"
+      tabindex="-1"
+      on:click={() => showPassword = !showPassword}
+    >
+      <img 
+        src={showPassword ? '/icons/eye-off.svg' : '/icons/eye.svg'} 
+        alt={showPassword ? 'Hide password' : 'Show password'} 
+        class="w-5 h-5"
+      />
+    </button>
+  </div>
+</div>

package/dist/components/PasswordInput.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { FullAutoFill } from 'svelte/elements';
+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 PasswordInput: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    name?: string | undefined;
+    autocomplete?: FullAutoFill | undefined;
+    disabled?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PasswordInput = InstanceType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/ThumbHashImage.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    // import { browser } from '$app/environment';
+    const browser = typeof window !== 'undefined';
+    import { fade } from 'svelte/transition';
+    
+    
+    export let src: string;
+    export let alt: string = '';
+    export let thumbhash: string;
+    export let class_ = '';
+    export let style = '';
+    export let roundedCorners = 'rounded-medium';
+    export let onLoad: (() => void) | undefined = undefined;
+
+    let imageLoaded = false;
+    let imageElement: HTMLImageElement;
+    let base64Hash: string;
+    let shouldShowThumbhash = true;
+    let thumbHashVisible = false;
+    
+    // Debug logs
+    let showLogs = false;
+
+
+    /***
+     * METHODS
+     **/
+
+    // Convert hex string to base64
+    function hexToBase64(hexstring: string) {
+        if (showLogs) console.log('ThumbHashImage: Converting hash to base64', { 
+            input: hexstring,
+            src,
+            alt 
+        });
+        
+        const hex = hexstring.replace(/\s+/g, '');
+        const bytes = new Uint8Array(hex.length / 2);
+        for (let i = 0; i < hex.length; i += 2) {
+            bytes[i/2] = parseInt(hex.substring(i, i + 2), 16);
+        }
+        const result = btoa(String.fromCharCode.apply(null, Array.from(bytes)));
+        if (showLogs) console.log('ThumbHashImage: Base64 conversion result', { result });
+        return result;
+    }
+
+    $: {
+        if (showLogs) console.log('ThumbHashImage: Props updated', { 
+            src, 
+            alt, 
+            thumbhash,
+            shouldShowThumbhash,
+            browser,
+            imageLoaded,
+            'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
+        });
+        base64Hash = hexToBase64(thumbhash);
+    }
+
+    onMount(async () => {
+        if (showLogs) console.log('ThumbHashImage: Component mounted', { 
+            browser,
+            'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
+        });
+
+        if (browser && !customElements.get('thumb-hash')) {
+            if (showLogs) console.log('ThumbHashImage: Initializing ThumbHashElement');
+            try {
+                const { ThumbHashElement } = await import('@hirasso/thumbhash-custom-element');
+                ThumbHashElement.init();
+                if (showLogs) console.log('ThumbHashImage: ThumbHashElement initialized successfully');
+            } catch (error) {
+                if (showLogs) console.error('ThumbHashImage: Failed to initialize ThumbHashElement', error);
+            }
+        }
+
+        // Check if image is already cached
+        if (imageElement?.complete) {
+            if (showLogs) console.log('ThumbHashImage: Image already cached');
+            imageLoaded = true;
+            shouldShowThumbhash = false;
+            if (onLoad) onLoad();
+        } else {
+            // Trigger thumbhash fade in
+            setTimeout(() => {
+                thumbHashVisible = true;
+            }, 50);
+        }
+    });
+
+    function handleImageLoad() {
+        if (showLogs) console.log('ThumbHashImage: Image loaded', { src });
+        imageLoaded = true;
+        // Delay removal of thumbhash so that the image fades in over it
+        setTimeout(() => {
+            shouldShowThumbhash = false;
+        }, 600);
+        if (onLoad) onLoad();
+    }
+</script>
+
+<div class="relative overflow-hidden {roundedCorners} {class_}" {style}>
+    {#if shouldShowThumbhash && browser}
+        <div class="absolute inset-0">
+            <thumb-hash
+                value={base64Hash}
+                class="block w-full h-full transition-opacity duration-300"
+                style="object-fit: cover; opacity: {thumbHashVisible ? 1 : 0}"
+                class:opacity-0={imageLoaded}
+            ></thumb-hash>
+        </div>
+    {/if}
+
+    <img 
+        bind:this={imageElement}
+        {src}
+        {alt}
+        class="w-full h-full object-cover transition-opacity duration-300"
+        class:opacity-0={!imageLoaded}
+        class:opacity-100={imageLoaded}
+        on:load={handleImageLoad}
+    />
+</div>

package/dist/components/ThumbHashImage.svelte.d.ts

@@ -0,0 +1,26 @@
+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 ThumbHashImage: $$__sveltets_2_IsomorphicComponent<{
+    src: string;
+    alt?: string;
+    thumbhash: string;
+    class_?: string;
+    style?: string;
+    roundedCorners?: string;
+    onLoad?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThumbHashImage = InstanceType<typeof ThumbHashImage>;
+export default ThumbHashImage;

package/dist/components/WScrollArea.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { ScrollArea } from './ui/scroll-area';
+
+// COMPONENT PROPS
+let className = '';
+export { className as class };
+export let style: string = '';
+// Viewport Class
+export let viewPortClass: string = '';
+// Content Padding
+// export let contentPadding: number = 0;
+// Orientation
+export let orientation: 'horizontal' | 'vertical' = 'vertical';
+// Scrollbar Y Classes
+export let scrollOutside: boolean = false;
+export let scrollbarWidth = 16; // Default width of the scrollbar in pixels
+export let scrollbarYClasses = '';
+export let scrollHideDelay = 0;
+export let type : any = 'hover';
+//
+export let element: HTMLElement | null = null;
+
+</script>
+
+<!-- HTML Template -->
+<ScrollArea bind:ref={element}
+        class={(className ? className + ' ' : '') + "scroll-area-container w-full h-full " + 
+              "widgetic-radius widgetic-colors select-text " +  
+              "[&_[data-scroll-area-viewport]]:!pr-[var(--scrollbar-width)]"}
+        style="{style} {scrollOutside ? `width: calc(100% + ${scrollbarWidth}px) !important;` : ''}
+                --scrollbar-width: {scrollbarWidth}px; --scrollbar-padding: {scrollbarWidth/4}px; "
+        {orientation}
+        {type}
+        {scrollHideDelay}
+        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] !p-[var(--scrollbar-padding)] " + 
+                          "!bg-transparent border-none select-none touch-none " + 
+                          "[&>div]:rounded-[var(--radius-pill)] [&>div]:cursor-pointer " + 
+                          "[&>div]:bg-[hsl(var(--grey1))] [&>div]:hover:bg-[hsl(var(--grey2))] " + 
+                          "[&>div]:transition-colors [&>div]:duration-250"}
+      >
+      <div class="actual-viewport {viewPortClass ? viewPortClass + ' ' : ''} absolute inset-0 z-[-1]" style="margin-right: {scrollbarWidth}px;">
+        <!-- <div class="viewport-inner absolute border border-red-500" style="inset: {contentPadding}px;"></div> -->
+      </div>
+      <slot/>
+</ScrollArea>
+
+

package/dist/components/WScrollArea.svelte.d.ts

@@ -0,0 +1,38 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const WScrollArea: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string;
+    style?: string;
+    viewPortClass?: string;
+    orientation?: "horizontal" | "vertical";
+    scrollOutside?: boolean;
+    scrollbarWidth?: number;
+    scrollbarYClasses?: string;
+    scrollHideDelay?: number;
+    type?: any;
+    element?: HTMLElement | null;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type WScrollArea = InstanceType<typeof WScrollArea>;
+export default WScrollArea;

package/dist/components/debug-grid/DebugGrid.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+  
+  import { onMount } from 'svelte';
+  import Portal from '../modals/Portal.svelte';
+
+  /*** 
+   * COMPONENT PROPS 
+   **/
+  let className = '';
+  export { className as class };
+  // Grid Classes
+  export let gridClass: string = 'app-grid';
+  export let headerGridClass: string = 'app-header-grid';
+  export let mainGridClass: string = 'app-main-grid';
+  export let headerHeight: string | undefined = undefined;
+  // Portal Target
+  export let portalTarget: string = 'debug-grid-portal';
+  // Columns settings
+  export let columns = 12;
+  export let columnWidth = 74;
+  export let isMobile = false;
+  export let isTablet = false;
+  export let isDesktop = true;
+
+  /*** 
+   * STATE VARIABLES
+   **/
+  let mounted = false;
+  let shouldShow = false;
+
+  // Grid variables
+  let windowWidth = 0;
+  //
+  let gapWidth = 20;
+  let marginWidth = 24;
+
+  let sidebarWidth = 240;
+
+  // Debug logs
+  let showLogs = false;
+
+  /***
+   * LIFECYCLE HOOKS
+   **/
+  onMount(() => {
+    if (showLogs) console.log('DebugGrid: Mounted!');
+
+    // Set mounted to true
+    mounted = true;
+
+    // Add resize event listener
+    if (window) {
+      windowWidth = window.innerWidth;
+      updateColumns();
+
+      // Add resize event listener
+      window.addEventListener('resize', handleResize);
+    }
+
+    // Add keydown event listener
+    window.addEventListener('keydown', handleKeydown);
+    
+    // on Unmount
+    return () => {
+        window.removeEventListener('keydown', handleKeydown);
+
+        window.removeEventListener('resize', handleResize);
+    };
+  });
+
+  function handleKeydown(event: KeyboardEvent) {
+    // Only in development mode
+    if (process.env.NODE_ENV !== 'production') {
+      if (event.shiftKey && event.key.toLowerCase() === 'g') {
+        shouldShow = !shouldShow;
+      }
+    }
+  }
+
+  function handleResize() {
+    windowWidth = window.innerWidth;
+    updateColumns();
+  }
+
+  function updateColumns() {
+    const gridType = gridClass.includes('site') 
+      ? 'site' 
+      : gridClass.includes('dashboard')
+        ? 'dashboard'
+        : 'app';
+
+    const element = document.querySelector('.widgetic-breakpoints');
+    if (!element) return;
+    
+    const styles = getComputedStyle(element);
+    const mobileBreakpoint = parseInt(styles.getPropertyValue('--breakpoint-mobile').trim()) || 393;
+    const tabletBreakpoint = parseInt(styles.getPropertyValue('--breakpoint-tablet').trim()) || 744;
+
+    // Get column count from CSS variables
+    if (windowWidth <= mobileBreakpoint) {
+      isMobile = true;
+      isTablet = false;
+      isDesktop = false;
+      columns = parseInt(styles.getPropertyValue(`--${gridType}-columns-mobile`).trim()) || 4;
+    } else if (windowWidth <= tabletBreakpoint) {
+      isTablet = true;
+      isMobile = false;
+      isDesktop = false;
+      columns = parseInt(styles.getPropertyValue(`--${gridType}-columns-tablet`).trim()) || 8;
+    } else {
+      isDesktop = true;
+      isTablet = false;
+      isMobile = false;
+      columns = parseInt(styles.getPropertyValue(`--${gridType}-columns-desktop`).trim()) || 12;
+    }
+
+    // Get column width from CSS variables
+    if (gridType === 'site') {
+      columnWidth = parseInt(styles.getPropertyValue('--site-column-width').trim()) || 74;
+    } 
+    // For dashboard and app grids, we calculate the column width based on the available space
+    // Total width minus margins and gaps, divided by number of columns
+    else if (gridType === 'dashboard') {
+      marginWidth = parseInt(styles.getPropertyValue('--dashboard-margin').trim()) || 24;
+      const gap = gapWidth = parseInt(styles.getPropertyValue('--dashboard-gap').trim()) || 20;
+      sidebarWidth = parseInt(styles.getPropertyValue('--dashboard-sidebar-width').trim()) || 240;
+      // calculate the available width for the columns
+      const availableWidth = windowWidth - (2 * marginWidth);
+      columnWidth = Math.floor((availableWidth - ((columns - 1) * gap)) / columns);
+    } else {
+      // App grid
+      marginWidth = parseInt(styles.getPropertyValue('--app-margin').trim()) || 24;
+      const gap = gapWidth = parseInt(styles.getPropertyValue('--app-gap').trim()) || 20;
+      const availableWidth = windowWidth - (2 * marginWidth);
+      columnWidth = Math.floor((availableWidth - ((columns - 1) * gap)) / columns);
+    }
+  }
+
+  // Update columns and column width when grid class changes
+  $: if (mounted && gridClass) {
+    updateColumns();
+  }
+</script>
+
+<Portal target={portalTarget} clickThrough={true} class="{className ? className : ''}">
+    {#if shouldShow && mounted}
+        <div class="{gridClass.replace('-', '_')} debug-grid-container relative flex flex-col w-full h-full widgetic-colors widgetic-breakpoints">
+            <!-- Site Grid: no header and no margins -->
+            {#if gridClass === 'site-grid'}
+            <div class="{gridClass} h-full">
+                {#each Array(columns) as _}
+                    <div class="site-grid-column grid-column"></div>
+                {/each}
+            </div>
+            
+            <!-- Dashboard or App Grid -->
+            {:else}
+                <!-- Base Grid Snippet -->
+                {#snippet baseGrid(isMain = true, isDashboard = false)}
+                <div class="{gridClass}" style="height: {isMain ? (headerHeight ? `calc(100% - ${headerHeight})` : '100%') : headerHeight}">
+
+                  <!-- Sidebar for Dashboard -->
+                  {#if isDashboard && !isMobile}
+                    <div class="grid-sidebar flex">
+                      <div class="grid-sidebar-margin-left grid-margin-left" style="width: {marginWidth}px"></div>
+                      <div class="grid-sidebar-content grid-column flex-grow"></div>
+                      <div class="grid-sidebar-margin-right grid-margin-right" style="width: {marginWidth}px"></div>
+                    </div>
+                  {/if}
+
+                  <!-- Left Margin -->
+                  <div class="grid-margin-left"></div>
+
+                  <!-- Main Grid -->
+                  <div class="grid-main">
+                      <div class="{!isMain ? headerGridClass + ' ' : ''}{mainGridClass} grid gap-5" style="grid-template-columns: repeat({columns}, minmax(0, 1fr));">
+                          {#each Array(columns) as _}
+                              <div class="{!isMain ? 'grid-header-column' : 'grid-column'}"></div>
+                          {/each}
+                      </div>
+                  </div>
+
+                  <!-- Right Margin -->
+                  <div class="grid-margin-right"></div>
+                </div>
+                {/snippet}
+
+                <!-- Entire Grid from Header and Main -->
+                <!-- Header Grid -->
+                {#if headerHeight}
+                    {@render baseGrid(false, gridClass === 'dashboard-grid')}
+                {/if}
+
+                <!-- Main Grid -->
+                {@render baseGrid(true, gridClass === 'dashboard-grid')}
+            {/if}
+        </div>
+    {/if}
+</Portal>
+
+<style>
+
+    .debug-grid-container {
+        position: absolute !important;
+        inset: 0 !important;
+    }
+</style>

package/dist/components/debug-grid/DebugGrid.svelte.d.ts

@@ -0,0 +1,32 @@
+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 DebugGrid: $$__sveltets_2_IsomorphicComponent<{
+    /***
+       * COMPONENT PROPS
+       **/ class?: string;
+    gridClass?: string;
+    headerGridClass?: string;
+    mainGridClass?: string;
+    headerHeight?: string | undefined;
+    portalTarget?: string;
+    columns?: number;
+    columnWidth?: number;
+    isMobile?: boolean;
+    isTablet?: boolean;
+    isDesktop?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DebugGrid = InstanceType<typeof DebugGrid>;
+export default DebugGrid;