@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.3.e16df24

package/dist/components/NotesEditor/NotesEditor.svelte

@@ -1,203 +0,0 @@
-<script lang="ts">
-  let {
-    notes = $bindable(""),
-    placeholder = "Add your notes...",
-    onSave,
-    className = ""
-  }: {
-    notes: string | undefined;
-    placeholder?: string;
-    onSave: (notes: string) => Promise<void>;
-    className?: string;
-  } = $props();
-
-  // State management
-  let saveState = $state<'idle' | 'typing' | 'saving' | 'saved' | 'error'>('idle');
-  let saveTimeout: ReturnType<typeof setTimeout>;
-  let lastSavedNotes = $state(notes || '');
-
-  // Auto-save effect - runs when notes change
-  $effect(() => {
-    const currentNotes = notes || '';
-    
-    if (currentNotes !== lastSavedNotes && saveState !== 'saving') {
-      saveState = 'typing';
-      
-      // Clear existing timeout
-      clearTimeout(saveTimeout);
-      
-      // Set new timeout for auto-save
-      saveTimeout = setTimeout(async () => {
-        await handleSave();
-      }, 1000); // Save after 1 second of no typing
-    }
-  });
-
-  // Textarea reference for initial sizing
-  let textareaElement: HTMLTextAreaElement;
-
-  // Initial sizing effect - runs after component mounts
-  $effect(() => {
-    if (textareaElement && notes) {
-      // Use setTimeout to ensure DOM is fully rendered
-      setTimeout(() => {
-        resizeTextarea(textareaElement);
-      }, 0);
-    }
-  });
-
-  // Ctrl+S listener for manual save
-  $effect(() => {
-    async function handleKeyDown(event: KeyboardEvent) {
-      // Check if Ctrl+S (or Cmd+S on Mac) is pressed and textarea is focused
-      if ((event.ctrlKey || event.metaKey) && event.key === 's' && 
-          textareaElement && document.activeElement === textareaElement) {
-        event.preventDefault();
-        event.stopPropagation();
-        
-        
-        // Clear any pending auto-save timeout and save immediately
-        clearTimeout(saveTimeout);
-        await handleSave();
-      }
-    }
-
-    // Add listener to document
-    document.addEventListener('keydown', handleKeyDown);
-
-    // Cleanup function
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  });
-
-  async function handleSave() {
-    const currentNotes = notes || '';
-    
-    if (currentNotes === lastSavedNotes) {
-      // Show brief "No changes" feedback for manual save attempts
-      saveState = 'saved';
-      setTimeout(() => {
-        if (saveState === 'saved') {
-          saveState = 'idle';
-        }
-      }, 1000);
-      return;
-    }
-    
-    saveState = 'saving';
-    
-    try {
-      await onSave(currentNotes);
-      lastSavedNotes = currentNotes;
-      saveState = 'saved';
-      
-      // Clear "saved" status after 2 seconds
-      setTimeout(() => {
-        if (saveState === 'saved') {
-          saveState = 'idle';
-        }
-      }, 2000);
-    } catch (error) {
-      console.error('Failed to save notes:', error);
-      saveState = 'error';
-      
-      // Clear error status after 3 seconds
-      setTimeout(() => {
-        if (saveState === 'error') {
-          saveState = 'idle';
-        }
-      }, 3000);
-    }
-  }
-
-  // Shared function to resize textarea
-  function resizeTextarea(target: HTMLTextAreaElement) {
-    // Get computed styles to calculate exact line height
-    const computedStyle = window.getComputedStyle(target);
-    const lineHeight = parseInt(computedStyle.lineHeight);
-    const paddingTop = parseInt(computedStyle.paddingTop);
-    const paddingBottom = parseInt(computedStyle.paddingBottom);
-    const borderTop = parseInt(computedStyle.borderTopWidth);
-    const borderBottom = parseInt(computedStyle.borderBottomWidth);
-    
-    // Calculate heights based on actual lines
-    const minLines = 3;
-    const maxLines = 15;
-    const minHeight = (lineHeight * minLines) + paddingTop + paddingBottom + borderTop + borderBottom;
-    const maxHeight = (lineHeight * maxLines) + paddingTop + paddingBottom + borderTop + borderBottom;
-    
-    // Reset height to measure content
-    target.style.height = 'auto';
-    
-    // Set height based on content, capped at max
-    const contentHeight = target.scrollHeight;
-    const newHeight = Math.min(Math.max(contentHeight, minHeight), maxHeight);
-    target.style.height = newHeight + 'px';
-    
-    // Only show scrollbar when content actually exceeds max height
-    if (contentHeight > maxHeight) {
-      target.style.overflowY = 'auto';
-    } else {
-      target.style.overflowY = 'hidden';
-    }
-  }
-
-  function handleInput(event: Event) {
-    const target = event.target as HTMLTextAreaElement;
-    resizeTextarea(target);
-  }
-
-
-  // Get status text and styling - simplified approach
-  let statusText = $state('');
-  let statusClass = $state('');
-  
-  $effect(() => {
-    switch (saveState) {
-      case 'typing':
-        statusText = 'Typing...';
-        statusClass = 'text-gray-500';
-        break;
-      case 'saving':
-        statusText = 'Saving...';
-        statusClass = 'text-blue-500';
-        break;
-      case 'saved':
-        statusText = 'Saved';
-        statusClass = 'text-green-600';
-        break;
-      case 'error':
-        statusText = 'Save failed';
-        statusClass = 'text-red-500';
-        break;
-      default:
-        statusText = '';
-        statusClass = '';
-    }
-  });
-</script>
-
-<div class={className}>
-  <!-- Header with Notes label and status -->
-  <div class="flex items-center justify-between mb-2">
-    <label for="notes-textarea" class="block text-sm font-medium [color:var(--color-text)]">
-      Notes
-    </label>
-    <span class="text-xs {statusClass} min-h-[16px]">
-      {statusText}
-    </span>
-  </div>
-
-  <!-- Textarea -->
-  <textarea
-    id="notes-textarea"
-    bind:this={textareaElement}
-    bind:value={notes}
-    {placeholder}
-    class="w-full px-3 py-2 bg-transparent [color:var(--color-text)] [border-color:var(--color-secondary)] border-2 rounded-md focus:outline-none hover:[border-color:color-mix(in_srgb,var(--color-secondary)_80%,black)] focus:[border-color:color-mix(in_srgb,var(--color-secondary)_90%,black)] focus:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus:[outline-offset:0px] resize-none min-h-[80px] overflow-hidden"
-    rows="3"
-    oninput={handleInput}
-  ></textarea>
-
-</div>

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

@@ -1,9 +0,0 @@
-type $$ComponentProps = {
-    notes: string | undefined;
-    placeholder?: string;
-    onSave: (notes: string) => Promise<void>;
-    className?: string;
-};
-declare const NotesEditor: import("svelte").Component<$$ComponentProps, {}, "notes">;
-type NotesEditor = ReturnType<typeof NotesEditor>;
-export default NotesEditor;

package/dist/components/NotesEditor/index.d.ts

@@ -1 +0,0 @@
-export { default } from './NotesEditor.svelte';

package/dist/components/NotesEditor/index.js

@@ -1 +0,0 @@
-export { default } from './NotesEditor.svelte';

package/dist/components/NumberInput/index.d.ts

@@ -1 +0,0 @@
-export { default } from './NumberInput.svelte';

package/dist/components/NumberInput/index.js

@@ -1 +0,0 @@
-export { default } from './NumberInput.svelte';

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  import Input from '../Input/Input.svelte';
-  import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-  import type { HTMLInputAttributes } from 'svelte/elements';
-
-  interface Props extends Omit<HTMLInputAttributes, 'type'> {
-    value: string;
-    class?: string;
-    inputClass?: string;
-    validate?: (value: string) => boolean | string;
-    valid?: boolean;
-    touched?: boolean;
-    element?: HTMLInputElement;
-  }
-
-  let {
-    value = $bindable(),
-    valid = $bindable(true),
-    touched = $bindable(false),
-    element = $bindable(),
-    ...restProps
-  }: Props = $props();
-
-  let showPassword = $state(false);
-
-  function toggleVisibility() {
-    showPassword = !showPassword;
-  }
-</script>
-
-<Input
-  bind:value
-  bind:valid
-  bind:touched
-  bind:element
-  type={showPassword ? 'text' : 'password'}
-  icon={showPassword ? faEye : faEyeSlash}
-  iconClickable={true}
-  onIconClick={toggleVisibility}
-  {...restProps}
-/>

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

@@ -1,13 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'type'> {
-    value: string;
-    class?: string;
-    inputClass?: string;
-    validate?: (value: string) => boolean | string;
-    valid?: boolean;
-    touched?: boolean;
-    element?: HTMLInputElement;
-}
-declare const PasswordInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
-type PasswordInput = ReturnType<typeof PasswordInput>;
-export default PasswordInput;

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

@@ -1 +0,0 @@
-export { default } from './PasswordInput.svelte';

package/dist/components/PasswordInput/index.js

@@ -1 +0,0 @@
-export { default } from './PasswordInput.svelte';

package/dist/components/Popup/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Popup.svelte';

package/dist/components/Popup/index.js

@@ -1 +0,0 @@
-export { default } from './Popup.svelte';

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

@@ -1,7 +0,0 @@
-export type RatingProps = {
-    average: number;
-    count: number;
-};
-declare const Rating: import("svelte").Component<RatingProps, {}, "">;
-type Rating = ReturnType<typeof Rating>;
-export default Rating;

package/dist/components/Rating/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Rating.svelte';

package/dist/components/Rating/index.js

@@ -1 +0,0 @@
-export { default } from './Rating.svelte';

package/dist/components/ScrollView/ScrollView.svelte

@@ -1,285 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import type { HTMLAttributes } from "svelte/elements";
-
-    interface Props extends HTMLAttributes<HTMLDivElement> {
-        showScrollbar?: boolean;
-        scrollbarWidth?: number;
-        class?: string;
-        disabled?: boolean;
-        children: Snippet;
-        view?: HTMLDivElement;
-        onScroll?: (data: {
-            scrollTop: number;
-            thumbTop: number;
-            scrollHeight: number;
-            clientHeight: number;
-        }) => void;
-    }
-
-    let {
-        showScrollbar = true,
-        scrollbarWidth = 6,
-        class: className = "",
-        style = "",
-        disabled = false,
-        children,
-        view = $bindable(),
-        onScroll,
-        ...restProps
-    }: Props = $props();
-
-    let isDragging = $state(false);
-    let dragStartY = $state(0);
-    let dragStartScrollTop = $state(0);
-    let scrollTop = $state(0);
-    let previousScrollTop = $state(0);
-    let scrollHeight = $state(0);
-    let clientHeight = $state(0);
-    let isScrolling = $state(false);
-    let isHovering = $state(false);
-    let scrollTimeout = $state<ReturnType<typeof setTimeout>>();
-
-    // Inset from edges (0.25rem = 4px)
-    const inset = 4;
-
-    // Generate unique ID for aria-controls if not provided
-    const scrollableId =
-        restProps.id ?? `scrollview-${Math.random().toString(36).substr(2, 9)}`;
-
-    // Split classes: height/sizing/border/rounded classes go to wrapper, everything else to view
-    const wrapperClasses = $derived(
-        className
-            .match(
-                /\b(h-|min-h-|max-h-|flex-\d|flex-grow|flex-shrink|flex-none|flex-auto|basis-|border|rounded)\S*/g,
-            )
-            ?.join(" ") || "",
-    );
-    const viewClasses = $derived(
-        className
-            .split(/\s+/)
-            .filter((cls) => cls && !wrapperClasses.includes(cls))
-            .join(" "),
-    );
-
-    // Initialize dimensions when view is mounted
-    $effect(() => {
-        if (view) {
-            scrollTop = view.scrollTop;
-            scrollHeight = view.scrollHeight;
-            clientHeight = view.clientHeight;
-
-            // Fire initial callback if provided
-            if (onScroll) {
-                onScroll({ scrollTop, thumbTop, scrollHeight, clientHeight });
-            }
-        }
-    });
-
-    // Calculate thumb height based on view dimensions
-    const thumbHeight = $derived.by(() => {
-        if (scrollHeight === 0 || clientHeight === 0) return 20;
-        const visibleRatio = clientHeight / scrollHeight;
-        return Math.max(
-            20,
-            Math.min(clientHeight - inset * 2, visibleRatio * clientHeight),
-        );
-    });
-
-    // Calculate thumb position based on scroll position
-    const thumbTop = $derived.by(() => {
-        if (scrollHeight === 0 || clientHeight === 0) return inset;
-        const maxScrollTop = scrollHeight - clientHeight;
-        if (maxScrollTop <= 0) return inset;
-        const scrollRatio = scrollTop / maxScrollTop;
-        const trackHeight = clientHeight - thumbHeight - inset * 2;
-        return inset + scrollRatio * trackHeight;
-    });
-
-    // Check if scrollbar is needed
-    const needsScrollbar = $derived(
-        showScrollbar &&
-            !disabled &&
-            scrollHeight > 0 &&
-            clientHeight > 0 &&
-            scrollHeight > clientHeight,
-    );
-
-    // Calculate scroll percentage for aria-valuenow
-    const scrollPercentage = $derived(() => {
-        if (!view) return 0;
-        const maxScrollTop = view.scrollHeight - view.clientHeight;
-        if (maxScrollTop <= 0) return 0;
-        return Math.round((scrollTop / maxScrollTop) * 100);
-    });
-
-    // Calculate opacity based on state
-    const thumbOpacity = $derived(isScrolling || isHovering ? "80%" : "30%");
-
-    // Handle scrollbar thumb mouse down
-    function handleThumbMouseDown(event: MouseEvent) {
-        if (!view) return;
-        event.preventDefault();
-        isDragging = true;
-        dragStartY = event.clientY;
-        dragStartScrollTop = view.scrollTop;
-
-        document.addEventListener("mousemove", handleThumbMouseMove);
-        document.addEventListener("mouseup", handleThumbMouseUp);
-    }
-
-    // Handle scrollbar thumb mouse move
-    function handleThumbMouseMove(event: MouseEvent) {
-        if (!isDragging || !view) return;
-
-        const deltaY = event.clientY - dragStartY;
-        const scrollRatio = deltaY / (view.clientHeight - thumbHeight);
-        const maxScrollTop = view.scrollHeight - view.clientHeight;
-
-        view.scrollTop = Math.max(
-            0,
-            Math.min(
-                maxScrollTop,
-                dragStartScrollTop + scrollRatio * maxScrollTop,
-            ),
-        );
-    }
-
-    // Handle scrollbar thumb mouse up
-    function handleThumbMouseUp() {
-        isDragging = false;
-        document.removeEventListener("mousemove", handleThumbMouseMove);
-        document.removeEventListener("mouseup", handleThumbMouseUp);
-    }
-
-    // Handle keyboard events - prevent scroll chaining while preserving smooth scrolling
-    function handleKeyDown(event: KeyboardEvent) {
-        if (disabled) return;
-
-        // Only handle if this ScrollView has focus (not a child element)
-        if (event.target !== view) return;
-
-        // Check for scroll keys
-        const scrollKeys = [
-            "ArrowDown",
-            "ArrowUp",
-            "PageDown",
-            "PageUp",
-            "Home",
-            "End",
-            " ",
-        ];
-        if (!scrollKeys.includes(event.key)) return;
-
-        if (!view) return;
-
-        // ALWAYS prevent default and stop propagation to have full control
-        event.preventDefault();
-        event.stopPropagation();
-
-        // Calculate scroll amount based on key
-        const {
-            clientHeight: currentClientHeight,
-            scrollTop: currentScrollTop,
-            scrollHeight: currentScrollHeight,
-        } = view;
-        let scrollAmount = 0;
-
-        if (event.key === "ArrowDown") scrollAmount = 40;
-        else if (event.key === "ArrowUp") scrollAmount = -40;
-        else if (event.key === "PageDown")
-            scrollAmount = currentClientHeight * 0.9;
-        else if (event.key === "PageUp")
-            scrollAmount = -currentClientHeight * 0.9;
-        else if (event.key === " ")
-            scrollAmount = event.shiftKey
-                ? -currentClientHeight * 0.9
-                : currentClientHeight * 0.9;
-        else if (event.key === "Home") scrollAmount = -currentScrollTop;
-        else if (event.key === "End")
-            scrollAmount =
-                currentScrollHeight - currentClientHeight - currentScrollTop;
-
-        // Apply scroll instantly (smooth behavior feels laggy with keyboard)
-        view.scrollBy({ top: scrollAmount, behavior: "auto" });
-    }
-
-    // Handle scroll and update state
-    function handleScroll() {
-        if (!view) return;
-
-        // Update scroll state
-        previousScrollTop = scrollTop;
-        scrollTop = view.scrollTop;
-        scrollHeight = view.scrollHeight;
-        clientHeight = view.clientHeight;
-
-        // Show scrollbar during scrolling
-        isScrolling = true;
-
-        // Clear previous timeout
-        if (scrollTimeout) {
-            clearTimeout(scrollTimeout);
-        }
-
-        // Hide scrollbar after scrolling stops (500ms delay)
-        scrollTimeout = setTimeout(() => {
-            isScrolling = false;
-        }, 500);
-
-        // Fire onScroll callback
-        if (onScroll) {
-            onScroll({ scrollTop, thumbTop, scrollHeight, clientHeight });
-        }
-    }
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-    class="relative overflow-hidden p-0 flex-1 min-h-8 {wrapperClasses}"
-    {style}
-    {...restProps}
->
-    <div
-        bind:this={view}
-        id={scrollableId}
-        class="scrollview absolute inset-0 {disabled
-            ? 'overflow-y-hidden'
-            : 'overflow-y-auto'} overflow-x-hidden [scrollbar-width:none] [-ms-overflow-style:none] [overscroll-behavior:contain] {viewClasses} {disabled
-            ? '[background-color:color-mix(in_srgb,var(--color-text)_5%,transparent)] cursor-not-allowed'
-            : '[background-color:var(--color-background)]'} focus-visible:[outline:2px_solid_var(--color-primary)] focus-visible:[outline-offset:0px]"
-        onscroll={handleScroll}
-        onkeydown={handleKeyDown}
-        onmouseenter={() => (isHovering = true)}
-        onmouseleave={() => (isHovering = false)}
-        tabindex={disabled ? -1 : 0}
-        role="region"
-        aria-label="Scrollable content"
-    >
-        {@render children()}
-    </div>
-
-    <!-- Custom scrollbar thumb -->
-    {#if needsScrollbar}
-        <div
-            class="absolute rounded cursor-pointer pointer-events-auto z-10"
-            style="top: {thumbTop}px; right: {inset}px; height: {thumbHeight}px; width: {scrollbarWidth}px; background-color: color-mix(in srgb, var(--color-primary) {thumbOpacity}, transparent);"
-            onmousedown={handleThumbMouseDown}
-            role="scrollbar"
-            aria-controls={scrollableId}
-            aria-orientation="vertical"
-            aria-valuenow={scrollPercentage()}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            tabindex="-1"
-            aria-label="Scroll thumb"
-        ></div>
-    {/if}
-</div>
-
-<style>
-    .scrollview::-webkit-scrollbar {
-        display: none;
-    }
-</style>

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

@@ -1,19 +0,0 @@
-import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    showScrollbar?: boolean;
-    scrollbarWidth?: number;
-    class?: string;
-    disabled?: boolean;
-    children: Snippet;
-    view?: HTMLDivElement;
-    onScroll?: (data: {
-        scrollTop: number;
-        thumbTop: number;
-        scrollHeight: number;
-        clientHeight: number;
-    }) => void;
-}
-declare const ScrollView: import("svelte").Component<Props, {}, "view">;
-type ScrollView = ReturnType<typeof ScrollView>;
-export default ScrollView;

package/dist/components/ScrollView/index.d.ts

@@ -1 +0,0 @@
-export { default } from './ScrollView.svelte';

package/dist/components/ScrollView/index.js

@@ -1 +0,0 @@
-export { default } from './ScrollView.svelte';

package/dist/components/SearchInput/index.d.ts

@@ -1 +0,0 @@
-export { default } from './SearchInput.svelte';

package/dist/components/SearchInput/index.js

@@ -1 +0,0 @@
-export { default } from './SearchInput.svelte';

package/dist/components/Select/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Select.svelte';

package/dist/components/Select/index.js

@@ -1 +0,0 @@
-export { default } from './Select.svelte';

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

@@ -1,19 +0,0 @@
-import type { HTMLTextareaAttributes } from "svelte/elements";
-interface Props extends HTMLTextareaAttributes {
-    value?: string;
-    lines?: string[];
-    class?: string;
-    textareaClass?: string;
-    validate?: (value: string) => boolean | string;
-    valid?: boolean;
-    touched?: boolean;
-    element?: HTMLTextAreaElement;
-    minRows?: number;
-    maxRows?: number;
-    lineHeightRem?: number;
-    required?: boolean;
-    allowCopy?: boolean;
-}
-declare const TextArea: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched" | "lines" | "allowCopy">;
-type TextArea = ReturnType<typeof TextArea>;
-export default TextArea;

package/dist/components/TextArea/index.d.ts

@@ -1 +0,0 @@
-export { default } from './TextArea.svelte';

package/dist/components/TextArea/index.js

@@ -1 +0,0 @@
-export { default } from './TextArea.svelte';