@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/components/{NumberInput/NumberInput.svelte → NumberInput.svelte}

@@ -1,8 +1,11 @@
 <script lang="ts">
-  import Input from '../Input/Input.svelte';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import Input from "./Input.svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
 
-  interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
     value: number | null;
     class?: string;
     inputClass?: string;
@@ -10,6 +13,10 @@
     valid?: boolean;
     touched?: boolean;
     element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
     min?: number;
     max?: number;
     step?: number;
@@ -21,8 +28,8 @@
     currency?: string; // e.g., '$', '€', '£', '¥', etc.
     decimalSeparator?: string; // Decimal separator (default: '.')
     thousandsChar?: string; // Thousands separator character (default: ',')
-    roundingMode?: 'round' | 'floor' | 'ceil' | 'trunc'; // Rounding behavior for integers
-    negativeMode?: 'minus' | 'parentheses' | 'both'; // How to display/accept negative numbers
+    roundingMode?: "round" | "floor" | "ceil" | "trunc"; // Rounding behavior for integers
+    negativeMode?: "minus" | "parentheses" | "both"; // How to display/accept negative numbers
   }
 
   let {
@@ -35,30 +42,36 @@
     max,
     step = 1,
     allowDecimals = true,
-    decimalPlaces = 2,
+    // Integer by default. Currency / accounting callers already
+    // pass `decimalPlaces={2}` explicitly (see the showcase), so
+    // this default only affects bare `<NumberInput bind:value=… />`
+    // which reads as an integer field 99% of the time (port numbers,
+    // intervals, counts). Prevents the `22 → 22.00` surprise where
+    // callers had to opt OUT of decimals to display a whole number.
+    decimalPlaces = 0,
     thousandsSeparator: enableThousandsSeparator = false,
-    prefix = '',
-    suffix = '',
+    prefix = "",
+    suffix = "",
     currency,
-    decimalSeparator = '.',
-    thousandsChar = ',',
-    roundingMode = 'round',
-    negativeMode = 'minus',
-    placeholder = 'Enter a number...',
+    decimalSeparator = ".",
+    thousandsChar = ",",
+    roundingMode = "round",
+    negativeMode = "minus",
+    placeholder = "Enter a number...",
     ...restProps
   }: Props = $props();
 
-  let displayValue = $state('');
+  let displayValue = $state("");
   let focused = $state(false);
 
   // Convert number to formatted display string
   function formatNumber(num: number | null): string {
-    if (num === null || num === undefined || isNaN(num)) return '';
-    
+    if (num === null || num === undefined || isNaN(num)) return "";
+
     const isNegative = num < 0;
     const absoluteNum = Math.abs(num);
     let formatted = absoluteNum.toString();
-    
+
     // Handle decimal places and rounding
     if (allowDecimals && decimalPlaces > 0) {
       formatted = absoluteNum.toFixed(decimalPlaces);
@@ -66,13 +79,13 @@
       // Apply rounding mode for integers
       let rounded: number;
       switch (roundingMode) {
-        case 'floor':
+        case "floor":
           rounded = Math.floor(absoluteNum);
           break;
-        case 'ceil':
+        case "ceil":
           rounded = Math.ceil(absoluteNum);
           break;
-        case 'trunc':
+        case "trunc":
           rounded = Math.trunc(absoluteNum);
           break;
         default: // 'round'
@@ -80,22 +93,22 @@
       }
       formatted = rounded.toString();
     }
-    
+
     // Add thousands separator and convert to custom format
     if (enableThousandsSeparator) {
-      const parts = formatted.split('.');
+      const parts = formatted.split(".");
       parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsChar);
       formatted = parts.join(decimalSeparator);
-    } else if (decimalSeparator !== '.') {
+    } else if (decimalSeparator !== ".") {
       // Even without thousands separator, we need to convert decimal separator
-      formatted = formatted.replace('.', decimalSeparator);
+      formatted = formatted.replace(".", decimalSeparator);
     }
-    
+
     const finalPrefix = currency || prefix;
-    
+
     // Handle negative number display
     if (isNegative) {
-      if (negativeMode === 'parentheses') {
+      if (negativeMode === "parentheses") {
         // For parentheses, put everything (prefix, number, suffix) inside
         return `(${finalPrefix}${formatted}${suffix})`;
       } else {
@@ -103,56 +116,62 @@
         return `-${finalPrefix}${formatted}${suffix}`;
       }
     }
-    
+
     return `${finalPrefix}${formatted}${suffix}`;
   }
 
   // Parse display string back to number
   function parseNumber(str: string): number | null {
-    if (!str || str.trim() === '') return null;
-    
+    if (!str || str.trim() === "") return null;
+
     // Check for negative indicators
-    const hasParentheses = str.includes('(') && str.includes(')');
-    const hasMinus = str.includes('-');
+    const hasParentheses = str.includes("(") && str.includes(")");
+    const hasMinus = str.includes("-");
     const isNegative = hasParentheses || hasMinus;
-    
+
     // Remove prefix, suffix, currency
     const finalPrefix = currency || prefix;
     let cleaned = str;
-    
+
     if (finalPrefix) {
-      const escapedPrefix = finalPrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const escapedPrefix = finalPrefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
       // Remove prefix from beginning, or after negative indicators
-      cleaned = cleaned.replace(new RegExp(`^${escapedPrefix}`), ''); // $123
-      cleaned = cleaned.replace(new RegExp(`^-${escapedPrefix}`), '-'); // -$123 -> -123
-      cleaned = cleaned.replace(new RegExp(`^\\(${escapedPrefix}`), '('); // ($123 -> (123
+      cleaned = cleaned.replace(new RegExp(`^${escapedPrefix}`), ""); // $123
+      cleaned = cleaned.replace(new RegExp(`^-${escapedPrefix}`), "-"); // -$123 -> -123
+      cleaned = cleaned.replace(new RegExp(`^\\(${escapedPrefix}`), "("); // ($123 -> (123
     }
-    
+
     if (suffix) {
-      const escapedSuffix = suffix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      cleaned = cleaned.replace(new RegExp(`${escapedSuffix}$`), '');
+      const escapedSuffix = suffix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      cleaned = cleaned.replace(new RegExp(`${escapedSuffix}$`), "");
     }
-    
+
     // Remove negative indicators
-    cleaned = cleaned.replace(/[()]/g, ''); // Remove parentheses
-    cleaned = cleaned.replace(/-/g, ''); // Remove minus signs
-    
+    cleaned = cleaned.replace(/[()]/g, ""); // Remove parentheses
+    cleaned = cleaned.replace(/-/g, ""); // Remove minus signs
+
     // Remove thousands separators (both , and . could be thousands separators)
-    cleaned = cleaned.replace(new RegExp(`\\${thousandsChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, 'g'), '');
-    
+    cleaned = cleaned.replace(
+      new RegExp(`\\${thousandsChar.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "g"),
+      "",
+    );
+
     // Convert decimal separator to standard decimal point
-    if (decimalSeparator !== '.') {
+    if (decimalSeparator !== ".") {
       // Replace the decimal separator with standard decimal point
       // But only the last occurrence to handle cases like "1.234,56"
       const lastSeparatorIndex = cleaned.lastIndexOf(decimalSeparator);
       if (lastSeparatorIndex !== -1) {
-        cleaned = cleaned.substring(0, lastSeparatorIndex) + '.' + cleaned.substring(lastSeparatorIndex + 1);
+        cleaned =
+          cleaned.substring(0, lastSeparatorIndex) +
+          "." +
+          cleaned.substring(lastSeparatorIndex + 1);
       }
     }
-    
+
     const parsed = parseFloat(cleaned);
     if (isNaN(parsed)) return null;
-    
+
     return isNegative ? -parsed : parsed;
   }
 
@@ -166,12 +185,12 @@
   // Default validation
   const defaultValidator = (val: number | null) => {
     if (val === null) return true; // Allow null/empty values
-    
+
     if (min !== undefined && val < min) return `Value must be at least ${min}`;
     if (max !== undefined && val > max) return `Value must be at most ${max}`;
-    
-    if (!allowDecimals && val % 1 !== 0) return 'Decimal values are not allowed';
-    
+
+    if (!allowDecimals && val % 1 !== 0) return "Decimal values are not allowed";
+
     return true;
   };
 
@@ -180,49 +199,49 @@
 
   function handleInput(inputValue: string) {
     displayValue = inputValue;
-    
+
     // Only skip parsing for truly incomplete inputs that have no numeric content
     const finalPrefix = currency || prefix;
-    
+
     // Check if input is incomplete (has negative indicators but no actual numbers)
     const incompletePatterns = [
-      '-',                                    // Just minus
-      '(',                                    // Just opening paren
-      '()',                                   // Empty parens
+      "-", // Just minus
+      "(", // Just opening paren
+      "()", // Empty parens
     ];
-    
+
     // Add prefix-related incomplete patterns
     if (finalPrefix) {
       incompletePatterns.push(
-        `-${finalPrefix}`,                    // -$, -€, etc.
-        `(${finalPrefix}`,                    // ($, (€, etc.
-        `(${finalPrefix})`                    // ($), (€), etc.
+        `-${finalPrefix}`, // -$, -€, etc.
+        `(${finalPrefix}`, // ($, (€, etc.
+        `(${finalPrefix})`, // ($), (€), etc.
       );
     }
-    
-    // Add suffix-related incomplete patterns  
+
+    // Add suffix-related incomplete patterns
     if (suffix) {
       incompletePatterns.push(
-        `-${suffix}`,                         // -%, etc.
-        `(${suffix}`,                         // (%, etc.
-        `(${suffix})`                         // (%), etc.
+        `-${suffix}`, // -%, etc.
+        `(${suffix}`, // (%, etc.
+        `(${suffix})`, // (%), etc.
       );
-      
+
       // Combined prefix and suffix patterns
       if (finalPrefix) {
         incompletePatterns.push(
-          `-${finalPrefix}${suffix}`,         // -$%, etc.
-          `(${finalPrefix}${suffix}`,         // ($%, etc.
-          `(${finalPrefix}${suffix})`         // ($%), etc.
+          `-${finalPrefix}${suffix}`, // -$%, etc.
+          `(${finalPrefix}${suffix}`, // ($%, etc.
+          `(${finalPrefix}${suffix})`, // ($%), etc.
         );
       }
     }
-    
+
     if (incompletePatterns.includes(inputValue)) {
       // Keep the current value but update display for incomplete inputs
       return;
     }
-    
+
     const parsed = parseNumber(inputValue);
     value = parsed;
   }
@@ -244,15 +263,16 @@
   function handleKeyDown(event: KeyboardEvent) {
     // Allow control keys (backspace, delete, arrow keys, tab, etc.)
     if (
-      event.key === 'Backspace' ||
-      event.key === 'Delete' ||
-      event.key === 'Tab' ||
-      event.key === 'Escape' ||
-      event.key === 'Enter' ||
-      event.key.startsWith('Arrow') ||
-      event.key === 'Home' ||
-      event.key === 'End' ||
-      (event.ctrlKey || event.metaKey) // Allow Ctrl/Cmd shortcuts
+      event.key === "Backspace" ||
+      event.key === "Delete" ||
+      event.key === "Tab" ||
+      event.key === "Escape" ||
+      event.key === "Enter" ||
+      event.key.startsWith("Arrow") ||
+      event.key === "Home" ||
+      event.key === "End" ||
+      event.ctrlKey ||
+      event.metaKey // Allow Ctrl/Cmd shortcuts
     ) {
       return;
     }
@@ -261,18 +281,18 @@
     const finalPrefix = currency || prefix;
     const input = event.target as HTMLInputElement;
     const cursorPosition = input.selectionStart || 0;
-    
+
     // Basic allowed characters
-    const allowedChars = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
-    
+    const allowedChars = new Set(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]);
+
     // Always allow both comma and period for international input flexibility
-    allowedChars.add(',');
-    allowedChars.add('.');
-    
+    allowedChars.add(",");
+    allowedChars.add(".");
+
     // Add currency characters (but validate position)
     if (finalPrefix && event.key === finalPrefix) {
       // Only allow currency at the beginning (after minus if present)
-      const hasMinusAtStart = currentValue.startsWith('-');
+      const hasMinusAtStart = currentValue.startsWith("-");
       const expectedPosition = hasMinusAtStart ? 1 : 0;
       if (cursorPosition === expectedPosition && !currentValue.includes(finalPrefix)) {
         allowedChars.add(finalPrefix);
@@ -281,7 +301,7 @@
         return;
       }
     }
-    
+
     // Add suffix characters (but validate position and prevent duplicates)
     if (suffix && event.key === suffix) {
       // Only allow suffix at the end and if not already present
@@ -292,31 +312,35 @@
         return;
       }
     }
-    
+
     // Always allow both minus and parentheses for input (negativeMode only affects display formatting)
-    if (event.key === '-') {
+    if (event.key === "-") {
       // Only allow minus at the very beginning and if not already present
-      if (cursorPosition === 0 && !currentValue.includes('-')) {
-        allowedChars.add('-');
+      if (cursorPosition === 0 && !currentValue.includes("-")) {
+        allowedChars.add("-");
       } else {
         event.preventDefault();
         return;
       }
     }
-    
-    if (event.key === '(') {
+
+    if (event.key === "(") {
       // Only allow opening parenthesis at the beginning and if not already present
-      if (cursorPosition === 0 && !currentValue.includes('(')) {
-        allowedChars.add('(');
+      if (cursorPosition === 0 && !currentValue.includes("(")) {
+        allowedChars.add("(");
       } else {
         event.preventDefault();
         return;
       }
     }
-    if (event.key === ')') {
+    if (event.key === ")") {
       // Only allow closing parenthesis at the end, if opening exists, and no closing yet
-      if (cursorPosition === currentValue.length && currentValue.includes('(') && !currentValue.includes(')')) {
-        allowedChars.add(')');
+      if (
+        cursorPosition === currentValue.length &&
+        currentValue.includes("(") &&
+        !currentValue.includes(")")
+      ) {
+        allowedChars.add(")");
       } else {
         event.preventDefault();
         return;
@@ -331,6 +355,23 @@
 
   // Convert our number value to string for the Input component
   let stringValue = $derived(displayValue);
+
+  // Use native <input type="number"> when the caller isn't using any
+  // of the custom-formatting features (prefix / suffix / currency /
+  // thousands / non-`.` decimal / paren-negative). That gives them
+  // the browser spinner + arrow-key increment + guaranteed mobile
+  // numeric keypad. When formatting IS used, stay on type="text" so
+  // the browser doesn't strip `$`, `%`, `,`, `(`, etc.
+  const inputType = $derived(
+    prefix ||
+      suffix ||
+      currency ||
+      enableThousandsSeparator ||
+      decimalSeparator !== "." ||
+      negativeMode === "parentheses"
+      ? "text"
+      : "number",
+  );
 </script>
 
 <Input
@@ -338,7 +379,7 @@
   bind:valid
   bind:touched
   bind:element
-  type="text"
+  type={inputType}
   inputmode="numeric"
   validate={(val) => {
     const parsed = parseNumber(val);
@@ -350,4 +391,4 @@
   onkeydown={handleKeyDown}
   {placeholder}
   {...restProps}
-/>
+/>

package/dist/components/{NumberInput/NumberInput.svelte.d.ts → NumberInput.svelte.d.ts}

@@ -1,5 +1,8 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'> {
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
     value: number | null;
     class?: string;
     inputClass?: string;
@@ -7,6 +10,10 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'> {
     valid?: boolean;
     touched?: boolean;
     element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
     min?: number;
     max?: number;
     step?: number;
@@ -18,8 +25,8 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'> {
     currency?: string;
     decimalSeparator?: string;
     thousandsChar?: string;
-    roundingMode?: 'round' | 'floor' | 'ceil' | 'trunc';
-    negativeMode?: 'minus' | 'parentheses' | 'both';
+    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>;

package/dist/components/PasswordInput.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Input from "./Input.svelte";
+  import Eye from "~icons/mdi/eye";
+  import EyeOff from "~icons/mdi/eye-off";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+
+  interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+    value: string;
+    class?: string;
+    inputClass?: string;
+    validate?: (value: string) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
+  }
+
+  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"}
+  iconClickable={true}
+  onIconClick={toggleVisibility}
+  {...restProps}
+>
+  {#snippet icon()}
+    {#if showPassword}<EyeOff />{:else}<Eye />{/if}
+  {/snippet}
+</Input>

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

@@ -0,0 +1,20 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+    value: string;
+    class?: string;
+    inputClass?: string;
+    validate?: (value: string) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
+}
+declare const PasswordInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;