@spaethtech/svelte-ui 0.1.10

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

@@ -0,0 +1,26 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'> {
+    value: number | null;
+    class?: string;
+    inputClass?: string;
+    validate?: (value: number | null) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLInputElement;
+    min?: number;
+    max?: number;
+    step?: number;
+    allowDecimals?: boolean;
+    decimalPlaces?: number;
+    thousandsSeparator?: boolean;
+    prefix?: string;
+    suffix?: string;
+    currency?: string;
+    decimalSeparator?: string;
+    thousandsChar?: string;
+    roundingMode?: 'round' | 'floor' | 'ceil' | 'trunc';
+    negativeMode?: 'minus' | 'parentheses' | 'both';
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

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

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

package/dist/components/NumberInput/index.js

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

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,13 @@
+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

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

package/dist/components/PasswordInput/index.js

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

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

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

package/dist/components/Popup/index.js

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

package/dist/components/Rating/Rating.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  export type RatingProps = {
+    average: number;
+    count: number;
+  };
+
+  let { average, count }: RatingProps = $props();
+
+  // Validate and sanitize the average rating
+  const validAverage =
+    isNaN(average) || average < 0 ? 0 : Math.min(average, 10);
+
+  // Convert TMDB 10-point scale to 5-star scale
+  const fiveStarRating = validAverage / 2;
+
+  // Calculate how many stars should be filled (ensure they're valid numbers)
+  const filledStars = Math.max(0, Math.min(5, Math.floor(fiveStarRating)));
+  const hasHalfStar = fiveStarRating % 1 >= 0.5;
+  const emptyStars = Math.max(0, 5 - filledStars - (hasHalfStar ? 1 : 0));
+</script>
+
+<div class="rating select-none">
+  <div class="stars">
+    {#each Array(filledStars) as _, i}
+      <span class="star filled">★</span>
+    {/each}
+    {#if hasHalfStar}
+      <span class="star half-filled">☆</span>
+    {/if}
+    {#each Array(emptyStars) as _, i}
+      <span class="star empty">☆</span>
+    {/each}
+  </div>
+  <span class="rating-value">{fiveStarRating.toFixed(1)}</span>
+  <span class="rating-count">({count})</span>
+</div>
+
+<style>
+  .rating {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .stars {
+    display: flex;
+    gap: 0.1rem;
+  }
+
+  .star {
+    font-size: 1.2rem;
+    line-height: 1;
+  }
+
+  .star.filled {
+    color: #ffd700;
+  }
+
+  .star.half-filled {
+    color: #ffd700;
+    opacity: 0.6;
+  }
+
+  .star.empty {
+    color: var(--color-secondary);
+  }
+
+  .rating-value {
+    font-weight: 600;
+    color: var(--color-text);
+  }
+
+  .rating-count {
+    font-size: 0.9rem;
+    color: var(--color-secondary);
+  }
+</style>

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

@@ -0,0 +1,7 @@
+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

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

package/dist/components/Rating/index.js

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

package/dist/components/ScrollView/ScrollView.svelte

@@ -0,0 +1,285 @@
+<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

@@ -0,0 +1,19 @@
+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

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

package/dist/components/ScrollView/index.js

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

package/dist/components/SearchInput/SearchInput.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Input from '../Input/Input.svelte';
+  import { faSearch, faTimes } 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;
+    onClear?: () => void;
+    clearable?: boolean;
+  }
+
+  let {
+    value = $bindable(),
+    valid = $bindable(true),
+    touched = $bindable(false),
+    element = $bindable(),
+    onClear,
+    clearable = true,
+    placeholder = 'Search...',
+    ...restProps
+  }: Props = $props();
+
+  function handleClear() {
+    value = '';
+    onClear?.();
+  }
+
+  // Show clear icon when there's content and clearable is true
+  let showClearIcon = $derived(clearable && value.length > 0);
+</script>
+
+<Input
+  bind:value
+  bind:valid
+  bind:touched
+  bind:element
+  type="search"
+  inputClass="[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none"
+  icon={showClearIcon ? faTimes : faSearch}
+  iconClickable={showClearIcon}
+  onIconClick={showClearIcon ? handleClear : undefined}
+  {placeholder}
+  {...restProps}
+/>

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

@@ -0,0 +1,15 @@
+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;
+    onClear?: () => void;
+    clearable?: boolean;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

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

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

package/dist/components/SearchInput/index.js

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