@spaethtech/svelte-ui 0.1.10

package/dist/components/Input/Input.svelte

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

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

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

package/dist/components/Input/index.js

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