@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/components/Input/Input.svelte

@@ -1,268 +0,0 @@
-<script lang="ts">
-  import Icon from '../Icon/Icon.svelte';
-  import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-  import type { HTMLInputAttributes } from 'svelte/elements';
-  
-  interface Props extends HTMLInputAttributes {
-    value: string;
-    icon?: IconDefinition;
-    iconPosition?: 'left' | 'right';
-    iconClickable?: boolean;
-    onIconClick?: () => void;
-    class?: string;
-    inputClass?: string;
-    validate?: (value: string) => boolean | string;
-    valid?: boolean;
-    touched?: boolean;
-    element?: HTMLInputElement;
-  }
-  
-  let {
-    value = $bindable(),
-    icon,
-    iconPosition = 'right',
-    iconClickable = false,
-    onIconClick,
-    class: containerClass = '',
-    inputClass = '',
-    validate,
-    valid = $bindable(true),
-    touched = $bindable(false),
-    element = $bindable(),
-    type = 'text',
-    disabled = false,
-    readonly = false,
-    ...restProps
-  }: Props = $props();
-  
-  let inputElement: HTMLInputElement;
-  
-  // Sync element binding
-  $effect(() => {
-    element = inputElement;
-  });
-  
-  // Validation logic
-  let validationResult = $state<boolean | string>(true);
-  
-  function runValidation() {
-    if (!validate) {
-      valid = true;
-      validationResult = true;
-      return;
-    }
-    
-    const result = validate(value);
-    validationResult = result;
-    valid = result === true;
-  }
-  
-  // Run validation when value changes
-  $effect(() => {
-    runValidation();
-  });
-  
-  // Computed classes
-  let containerClasses = $derived.by(() => {
-    const base = 'relative w-full';
-    return `${base} ${containerClass}`.trim();
-  });
-  
-  let wrapperClasses = $derived.by(() => {
-    const base = 'w-full h-8 flex items-center rounded-md';
-    
-    // Calculate padding based on icon presence and position
-    let paddingClasses = '';
-    if (icon) {
-      // Icon present - only pad the side without icon
-      if (iconPosition === 'left') {
-        paddingClasses = 'pl-0 pr-2'; // Icon on left, pad right only
-      } else {
-        paddingClasses = 'pl-2 pr-0'; // Icon on right, pad left only  
-      }
-    } else {
-      // No icon - pad both sides
-      paddingClasses = 'px-2';
-    }
-    
-    // Use new semantic color system with transparent background
-    const themeStyles = [
-      'bg-transparent',
-      'border-2',
-      paddingClasses,
-      '[border-color:var(--color-secondary)]',
-      'hover:[border-color:color-mix(in_srgb,var(--color-secondary)_80%,black)]',
-      'focus-within:[border-color:color-mix(in_srgb,var(--color-secondary)_90%,black)]',
-      'focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]',
-      'focus-within:[outline-offset:0px]'
-    ].join(' ');
-    
-    // Validation state overrides
-    let validationStyles = '';
-    if (touched && !valid) {
-      validationStyles = '[border-color:var(--color-danger)] focus-within:[ring-color:var(--color-danger)]';
-    }
-    
-    // Disabled and readonly state (with padding compensation for 1px border)
-    let disabledStyles = '';
-    if (disabled || readonly) {
-      let disabledPadding = '';
-      if (icon) {
-        // Icon present - adjust padding for 1px border compensation
-        if (iconPosition === 'left') {
-          disabledPadding = '!pl-[1px] !pr-[calc(0.5rem+1px)]'; // Icon on left
-        } else {
-          disabledPadding = '!pl-[calc(0.5rem+1px)] !pr-[1px]'; // Icon on right
-        }
-      } else {
-        // No icon - pad both sides with compensation
-        disabledPadding = '!px-[calc(0.5rem+1px)]';
-      }
-      
-      disabledStyles = disabled 
-        ? `![background-color:color-mix(in_srgb,var(--color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--color-secondary)_50%,transparent)] !border ${disabledPadding} cursor-not-allowed`
-        : `[border-color:var(--color-secondary)] !border ${disabledPadding}`;
-    }
-    
-    return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
-  });
-  
-  let inputClasses = $derived.by(() => {
-    const base = 'flex-1 h-full bg-transparent border-none outline-none text-sm leading-tight p-0 min-w-0';
-    
-    // Use new semantic color system
-    const themeStyles = [
-      '[color:var(--color-text)]',
-      'placeholder:[color:var(--color-secondary)]',
-      'disabled:bg-transparent',
-      'disabled:[color:color-mix(in_srgb,var(--color-text)_40%,transparent)]',
-      'disabled:cursor-not-allowed'
-    ].join(' ');
-    
-    return `${base} ${themeStyles} ${inputClass}`.trim();
-  });
-  
-  let iconClasses = $derived.by(() => {
-    const base = 'w-8 h-8 flex items-center justify-center flex-shrink-0 select-none';
-    
-    const interactive = iconClickable 
-      ? 'cursor-pointer focus:outline-none transition-colors group' 
-      : 'pointer-events-none';
-    
-    return `${base} ${interactive}`.trim();
-  });
-  
-  // Event handlers
-  function handleInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-    const target = event.target as HTMLInputElement;
-    value = target.value;
-    if (restProps.oninput) restProps.oninput(event);
-  }
-  
-  function handleFocus(event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
-    touched = true;
-    if (restProps.onfocus) restProps.onfocus(event);
-  }
-
-  function handleIconKeydown(event: KeyboardEvent) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      onIconClick?.();
-    }
-  }
-
-  function handleIconMouseDown(event: MouseEvent) {
-    event.preventDefault(); // Prevent text selection on double-click
-    event.stopPropagation(); // Prevent event from bubbling
-  }
-
-  function handleIconSelectStart(event: Event) {
-    event.preventDefault(); // Prevent text selection
-    return false;
-  }
-
-  function handleIconDoubleClick(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    return false;
-  }
-  
-  // Override browser validation
-  $effect(() => {
-    if (inputElement) {
-      inputElement.setCustomValidity('');
-      if (touched && !valid && typeof validationResult === 'string') {
-        inputElement.setCustomValidity(validationResult);
-      }
-    }
-  });
-</script>
-
-<div class={containerClasses}>
-  <div class={wrapperClasses} style="user-select: none;">
-    {#if icon && iconPosition === 'left'}
-      {#if iconClickable}
-        <div 
-          class={iconClasses}
-          onclick={onIconClick}
-          onkeydown={handleIconKeydown}
-          onmousedown={handleIconMouseDown}
-          ondblclick={handleIconDoubleClick}
-          onselectstart={handleIconSelectStart}
-          role="button"
-          tabindex="0"
-          style="user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;"
-        >
-          {#key icon}
-            <Icon {icon} class="w-4 h-4 [color:var(--color-secondary)!important] group-hover:[color:color-mix(in_srgb,var(--color-secondary)_80%,black)!important] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)!important] transition-colors" />
-          {/key}
-        </div>
-      {:else}
-        <div class={iconClasses}>
-          {#key icon}
-            <Icon {icon} class="w-4 h-4 [color:var(--color-secondary)!important] group-hover:[color:color-mix(in_srgb,var(--color-secondary)_80%,black)!important] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)!important] transition-colors" />
-          {/key}
-        </div>
-      {/if}
-    {/if}
-    
-    <input
-      bind:this={inputElement}
-      {type}
-      {value}
-      {disabled}
-      {readonly}
-      oninput={handleInput}
-      onfocus={handleFocus}
-      {...restProps}
-      class={inputClasses}
-      style="border: none !important; box-shadow: none !important; user-select: text !important;"
-    />
-    
-    {#if icon && iconPosition === 'right'}
-      {#if iconClickable}
-        <div 
-          class={iconClasses}
-          onclick={onIconClick}
-          onkeydown={handleIconKeydown}
-          onmousedown={handleIconMouseDown}
-          ondblclick={handleIconDoubleClick}
-          onselectstart={handleIconSelectStart}
-          role="button"
-          tabindex="0"
-          style="user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;"
-        >
-          {#key icon}
-            <Icon {icon} class="w-4 h-4 [color:var(--color-secondary)!important] group-hover:[color:color-mix(in_srgb,var(--color-secondary)_80%,black)!important] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)!important] transition-colors" />
-          {/key}
-        </div>
-      {:else}
-        <div class={iconClasses}>
-          {#key icon}
-            <Icon {icon} class="w-4 h-4 [color:var(--color-secondary)!important] group-hover:[color:color-mix(in_srgb,var(--color-secondary)_80%,black)!important] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)!important] transition-colors" />
-          {/key}
-        </div>
-      {/if}
-    {/if}
-  </div>
-</div>

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

@@ -1,18 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends HTMLInputAttributes {
-    value: string;
-    icon?: IconDefinition;
-    iconPosition?: 'left' | 'right';
-    iconClickable?: boolean;
-    onIconClick?: () => void;
-    class?: string;
-    inputClass?: string;
-    validate?: (value: string) => boolean | string;
-    valid?: boolean;
-    touched?: boolean;
-    element?: HTMLInputElement;
-}
-declare const Input: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
-type Input = ReturnType<typeof Input>;
-export default Input;

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

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

package/dist/components/Input/index.js

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

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

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

package/dist/components/List/index.js

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

package/dist/components/ListItem/ListItem.svelte

@@ -1,175 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-    import type { Variant } from "../../types/variants.js";
-    import Icon from "../Icon/Icon.svelte";
-    import { getVariantClasses } from "../../styles/variants.js";
-
-    interface Props {
-        value: string;
-        label?: string;
-        secondaryText?: string;
-        icon?: IconDefinition;
-        prefix?: string;
-        suffix?: string;
-        variant?: Variant;
-        disabled?: boolean;
-        selected?: boolean;
-        focused?: boolean;
-        showCheckbox?: boolean;
-        class?: string;
-        children?: Snippet;
-        onclick?: (event: MouseEvent) => void;
-        onfocus?: (event: FocusEvent) => void;
-        onblur?: (event: FocusEvent) => void;
-    }
-
-    let {
-        value,
-        label,
-        secondaryText,
-        icon,
-        prefix,
-        suffix,
-        variant = "ghost",
-        disabled = false,
-        selected = false,
-        focused = false,
-        showCheckbox = false,
-        class: className = "",
-        children,
-        onclick,
-        onfocus,
-        onblur,
-    }: Props = $props();
-
-    // Determine background classes based on state and variant
-    const backgroundClasses = $derived(() => {
-        // Checkbox mode: no selection highlighting, only focus/hover
-        if (showCheckbox) {
-            if (focused) {
-                return "[background-color:var(--color-secondary)]";
-            }
-            return "bg-transparent hover:[background-color:var(--color-secondary)]";
-        }
-
-        // Selected state: darker secondary background
-        if (selected) {
-            return "[background-color:color-mix(in_srgb,var(--color-secondary)_80%,black)] hover:[background-color:color-mix(in_srgb,var(--color-secondary)_80%,black)]";
-        }
-
-        // Focused (not selected)
-        if (focused) {
-            return "[background-color:var(--color-secondary)]";
-        }
-
-        // Default: transparent with hover
-        return "bg-transparent hover:[background-color:var(--color-secondary)]";
-    });
-
-    const textClasses = $derived(() => {
-        if (disabled) {
-            return "[color:color-mix(in_srgb,var(--color-text)_40%,transparent)]";
-        }
-
-        // For selected items, check if variant needs specific text color
-        if (selected && variant !== "ghost") {
-            // Variants with solid backgrounds need white text
-            return "text-white";
-        }
-
-        return "[color:var(--color-text)]";
-    });
-
-    const cursorClass = $derived(
-        disabled ? "cursor-not-allowed" : "cursor-pointer",
-    );
-</script>
-
-<button
-    type="button"
-    class="w-full overflow-hidden text-left focus:outline-none flex items-center transition-colors duration-150 {backgroundClasses()} {textClasses()} {cursorClass} {className}"
-    style="height: var(--list-item-height, 32px); border: none; border-radius: 0;"
-    {onclick}
-    {onfocus}
-    {onblur}
-    tabindex="-1"
-    role="option"
-    aria-selected={selected}
-    aria-disabled={disabled}
-    aria-label={label || "List item"}
-    {disabled}
-    data-value={value}
->
-    {#if children}
-        {@render children()}
-    {:else if showCheckbox}
-        <div class="flex items-center gap-3 px-3 w-full">
-            <div class="relative flex-shrink-0 mt-1">
-                <input
-                    type="checkbox"
-                    checked={selected}
-                    {disabled}
-                    class="w-4 h-4 rounded [border-color:var(--color-secondary)] {selected
-                        ? '[background-color:var(--color-primary)] [border-color:var(--color-primary)]'
-                        : '[background-color:var(--color-background)]'} {disabled
-                        ? 'opacity-50 cursor-not-allowed'
-                        : 'cursor-pointer'}"
-                    tabindex="-1"
-                    readonly
-                />
-                {#if selected}
-                    <svg
-                        class="absolute inset-0 w-4 h-4 text-white pointer-events-none"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                    >
-                        <path
-                            fill-rule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clip-rule="evenodd"
-                        />
-                    </svg>
-                {/if}
-            </div>
-            <div class="flex-1 min-w-0">
-                {#if secondaryText}
-                    <div class="font-medium text-sm truncate">{label}</div>
-                    <div
-                        class="text-xs [color:color-mix(in_srgb,var(--color-text)_60%,transparent)] truncate"
-                    >
-                        {secondaryText}
-                    </div>
-                {:else}
-                    <span class="text-sm truncate block">{label}</span>
-                {/if}
-            </div>
-        </div>
-    {:else}
-        <div class="flex items-center gap-2 px-3 w-full min-w-0">
-            {#if prefix}
-                <span class="flex-shrink-0 text-lg">{prefix}</span>
-            {/if}
-            {#if icon}
-                <span class="flex-shrink-0"><Icon {icon} size="sm" /></span>
-            {/if}
-            {#if label || secondaryText}
-                <div class="flex-1 min-w-0">
-                    {#if secondaryText}
-                        <div class="font-medium text-sm truncate">{label}</div>
-                        <div
-                            class="text-xs [color:color-mix(in_srgb,var(--color-text)_60%,transparent)] truncate"
-                        >
-                            {secondaryText}
-                        </div>
-                    {:else}
-                        <span class="text-sm truncate block">{label}</span>
-                    {/if}
-                </div>
-            {/if}
-            {#if suffix}
-                <span class="flex-shrink-0 text-sm ml-auto">{suffix}</span>
-            {/if}
-        </div>
-    {/if}
-</button>

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

@@ -1,24 +0,0 @@
-import type { Snippet } from "svelte";
-import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-import type { Variant } from "../../types/variants.js";
-interface Props {
-    value: string;
-    label?: string;
-    secondaryText?: string;
-    icon?: IconDefinition;
-    prefix?: string;
-    suffix?: string;
-    variant?: Variant;
-    disabled?: boolean;
-    selected?: boolean;
-    focused?: boolean;
-    showCheckbox?: boolean;
-    class?: string;
-    children?: Snippet;
-    onclick?: (event: MouseEvent) => void;
-    onfocus?: (event: FocusEvent) => void;
-    onblur?: (event: FocusEvent) => void;
-}
-declare const ListItem: import("svelte").Component<Props, {}, "">;
-type ListItem = ReturnType<typeof ListItem>;
-export default ListItem;

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

@@ -1,2 +0,0 @@
-export { default } from "./ListItem.svelte";
-export { default as ListItem } from "./ListItem.svelte";

package/dist/components/ListItem/index.js

@@ -1,2 +0,0 @@
-export { default } from "./ListItem.svelte";
-export { default as ListItem } from "./ListItem.svelte";