@spaethtech/svelte-ui 0.1.10 → 0.3.0

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

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import Input from '../Input/Input.svelte';
-  import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import Input from "./Input.svelte";
+  import Email from "~icons/mdi/email-outline";
+  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'> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
     value: string;
     class?: string;
     inputClass?: string;
@@ -11,6 +14,10 @@
     valid?: boolean;
     touched?: boolean;
     element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
     required?: boolean;
   }
 
@@ -26,8 +33,9 @@
 
   // Default email validation
   const defaultEmailValidator = (value: string) => {
-    if (required && !value) return 'Email is required';
-    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Please enter a valid email address';
+    if (required && !value) return "Email is required";
+    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+      return "Please enter a valid email address";
     return true;
   };
 
@@ -41,7 +49,8 @@
   bind:touched
   bind:element
   type="email"
-  icon={faEnvelope}
   validate={emailValidator}
   {...restProps}
-/>
+>
+  {#snippet icon()}<Email />{/snippet}
+</Input>

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

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

package/dist/components/Input.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+
+  // Omit the native `size` attribute (character width, a number) — we repurpose `size` as the
+  // shared sm/md/lg axis; the native one is meaningless on our flex-based input anyway.
+  interface Props extends Omit<HTMLInputAttributes, "size"> {
+    /** Accepts number too so remote-form field spreads (`{...field.as(...)}`) type-check. */
+    value?: string | number;
+    /** Icon slot — consumer-rendered (e.g. an MDI `~icons/mdi/*` component). Styled by the lib. */
+    icon?: Snippet;
+    /** Trailing controls rendered inside the bordered wrapper, right edge (e.g. clear/help buttons).
+        Lets compound components (Query, Select…) reuse Input's frame instead of re-rolling it. */
+    actions?: Snippet;
+    iconPosition?: "left" | "right";
+    size?: Responsive<Size>;
+    /** Colour axis (shared with every component). Tints the field's border like Card: the default
+     *  `secondary` is the neutral strong edge; other variants use that colour at the 30% tint-border,
+     *  strengthening on hover/focus. A validation error still overrides with the error colour. */
+    variant?: Variant;
+    /** Drop the visible frame while keeping the 1px box + focus outline: the border goes transparent
+     *  (the field's background) and the hover/focus border-darkening is suppressed. Defaults `false` —
+     *  an Input reads as a bordered field. A validation error still shows its border. */
+    borderless?: boolean;
+    iconClickable?: boolean;
+    onIconClick?: () => void;
+    class?: string;
+    inputClass?: string;
+    validate?: (value: string) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLInputElement;
+  }
+
+  let {
+    value = $bindable(),
+    icon,
+    actions,
+    iconPosition = "right",
+    size = "md",
+    variant = "secondary",
+    borderless = false,
+    iconClickable = false,
+    onIconClick,
+    class: containerClass = "",
+    inputClass = "",
+    validate,
+    valid = $bindable(true),
+    touched = $bindable(false),
+    element = $bindable(),
+    type = "text",
+    disabled = false,
+    readonly = false,
+    // Pulled out of restProps so the wrapping handlers below can't be clobbered by the
+    // `{...restProps}` spread on the <input>; we still forward the consumer's callbacks.
+    oninput: oninputProp,
+    onfocus: onfocusProp,
+    ...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(String(value ?? ""));
+    validationResult = result;
+    valid = result === true;
+  }
+
+  // Run validation when value changes
+  $effect(() => {
+    runValidation();
+  });
+
+  // Size axis (see types/sizes.ts): control height, embedded icon-box, text, and svg size.
+  // Per-Size class maps → responsiveClasses() handles scalar OR { base, xs, … }. Icons: 14/16/20px.
+  const heightMap: Record<Size, string> = { sm: "h-6", md: "h-8", lg: "h-10" };
+  const iconBoxMap: Record<Size, string> = { sm: "w-6 h-6", md: "w-8 h-8", lg: "w-10 h-10" };
+  const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const svgMap: Record<Size, string> = { sm: "w-3.5 h-3.5", md: "w-4 h-4", lg: "w-5 h-5" };
+  // Border colour by variant — ONE calculation for EVERY variant (no `secondary`/`-strong` special
+  // case): the variant token at `--ui-tint-border` (30%) at rest, the same token at 55% on hover/focus,
+  // always mixed toward transparent (the tint language, like Alert/Badge/Card). Literal classes so
+  // Tailwind can generate them (incl. the hover/focus states). ghost/neutral resolve to --ui-color-text.
+  const borderVariantClass: Record<Variant, string> = {
+    secondary:
+      "[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)]",
+    primary:
+      "[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border-hover),transparent)]",
+    danger:
+      "[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border-hover),transparent)]",
+    info: "[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border-hover),transparent)]",
+    success:
+      "[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border-hover),transparent)]",
+    warning:
+      "[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border-hover),transparent)]",
+    neutral:
+      "[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+    ghost:
+      "[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+  };
+
+  // Placeholder colour tracks the variant too — muted, matching each variant's RESTING border colour
+  // (secondary = the neutral strong edge; others = their 30% tint-border). Literal classes so Tailwind
+  // emits them; applied regardless of `borderless`, so a frameless variant field still reads as coloured.
+  const placeholderVariantClass: Record<Variant, string> = {
+    secondary:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]",
+    primary:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border),transparent)]",
+    danger:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border),transparent)]",
+    info: "placeholder:[color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border),transparent)]",
+    success:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border),transparent)]",
+    warning:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border),transparent)]",
+    neutral:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)]",
+    ghost:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)]",
+  };
+
+  const heightClass = $derived(responsiveClasses(size, heightMap));
+  const iconBoxClass = $derived(responsiveClasses(size, iconBoxMap));
+  const textClass = $derived(responsiveClasses(size, textMap));
+  const svgClass = $derived(responsiveClasses(size, svgMap));
+
+  // Computed classes
+  let containerClasses = $derived.by(() => {
+    const base = "relative w-full";
+    return `${base} ${containerClass}`.trim();
+  });
+
+  let wrapperClasses = $derived.by(() => {
+    const base = `w-full ${heightClass} flex items-center [border-radius:var(--ui-border-radius)]`;
+
+    // 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";
+    }
+
+    // Border colour comes from the variant map (the shared tint scheme — token @ --ui-tint-border at
+    // rest, @ --ui-tint-border-hover on hover/focus — same as Card/DataTable/TextArea, so every bordered
+    // surface stays uniform under any theme). `borderless` overrides it with transparent (the field's
+    // own background) — the 1px box stays, so the field never jumps, and the focus outline still fires.
+    const frameStyles = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
+    const themeStyles = [
+      "bg-transparent",
+      "border", // 1px — matches --ui-border (List/TextArea); uniform across the library
+      paddingClasses,
+      frameStyles,
+      "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(--ui-color-error)] focus-within:[ring-color:var(--ui-color-error)]";
+    }
+
+    // Disabled state — borders are uniformly 1px now, so no padding compensation is needed.
+    // (readonly renders like a normal field: same 1px frame + hover/focus glow, e.g. Select's trigger.)
+    let disabledStyles = "";
+    if (disabled) {
+      disabledStyles =
+        "![background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] cursor-not-allowed";
+    }
+
+    return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
+  });
+
+  let inputClasses = $derived.by(() => {
+    const base = `flex-1 h-full bg-transparent border-none outline-none ${textClass} leading-tight p-0 min-w-0`;
+
+    // Text uses the theme's text token; placeholder is a muted mix of
+    // it (matches DaisyUI's `base-content/50` convention). Not tied
+    // to --ui-color-secondary anymore so a theme's accent palette doesn't
+    // leak into every input's placeholder.
+    const themeStyles = [
+      "[color:var(--ui-color-text)]",
+      placeholderVariantClass[variant],
+      "disabled:bg-transparent",
+      "disabled:[color:color-mix(in_srgb,var(--ui-color-text)_40%,transparent)]",
+      "disabled:cursor-not-allowed",
+    ].join(" ");
+
+    return `${base} ${themeStyles} ${inputClass}`.trim();
+  });
+
+  let iconClasses = $derived.by(() => {
+    const base = `${iconBoxClass} 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;
+    oninputProp?.(event);
+  }
+
+  function handleFocus(event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+    touched = true;
+    onfocusProp?.(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>
+
+<!-- Styled icon box: the consumer renders any icon component in the `icon` snippet; the lib controls
+     size + color here (MDI icons use currentColor and fill the box), so it works with any icon set. -->
+{#snippet iconBox()}
+  <span
+    class="inline-flex {svgClass} items-center justify-center [color:var(--ui-color-secondary)] group-hover:[color:color-mix(in_srgb,var(--ui-color-secondary)_80%,black)] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)] transition-colors [&_svg]:w-full [&_svg]:h-full"
+  >
+    {@render icon?.()}
+  </span>
+{/snippet}
+
+<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;"
+        >
+          {@render iconBox()}
+        </div>
+      {:else}
+        <div class={iconClasses}>
+          {@render iconBox()}
+        </div>
+      {/if}
+    {/if}
+
+    <input
+      bind:this={inputElement}
+      {type}
+      {value}
+      {disabled}
+      {readonly}
+      oninput={handleInput}
+      onfocus={handleFocus}
+      {...restProps}
+      class="{inputClasses} ui-input"
+      style="border: 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;"
+        >
+          {@render iconBox()}
+        </div>
+      {:else}
+        <div class={iconClasses}>
+          {@render iconBox()}
+        </div>
+      {/if}
+    {/if}
+
+    {#if actions}
+      <div class="flex h-full shrink-0 items-center gap-1">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Kill the UA focus ring/box-shadow without inline !important (which would also defeat the
+     autofill override below, since box-shadow and -webkit-box-shadow are the same property). */
+  .ui-input {
+    box-shadow: none !important;
+  }
+  /* Theme the browser autofill so it fills the whole field in our background colour (no inset blue
+     band) and uses our text colour, in both light and dark. More specific than `.ui-input`, so it
+     wins. The huge inset shadow paints over the UA-yellow/blue highlight. */
+  .ui-input:-webkit-autofill,
+  .ui-input:-webkit-autofill:hover,
+  .ui-input:-webkit-autofill:focus,
+  .ui-input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--ui-color-background) inset !important;
+    -webkit-text-fill-color: var(--ui-color-text) !important;
+    caret-color: var(--ui-color-text);
+    transition: background-color 9999s ease-in-out 0s; /* belt-and-suspenders against the fade */
+  }
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from "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, "size"> {
+    /** Accepts number too so remote-form field spreads (`{...field.as(...)}`) type-check. */
+    value?: string | number;
+    /** Icon slot — consumer-rendered (e.g. an MDI `~icons/mdi/*` component). Styled by the lib. */
+    icon?: Snippet;
+    /** Trailing controls rendered inside the bordered wrapper, right edge (e.g. clear/help buttons).
+        Lets compound components (Query, Select…) reuse Input's frame instead of re-rolling it. */
+    actions?: Snippet;
+    iconPosition?: "left" | "right";
+    size?: Responsive<Size>;
+    /** Colour axis (shared with every component). Tints the field's border like Card: the default
+     *  `secondary` is the neutral strong edge; other variants use that colour at the 30% tint-border,
+     *  strengthening on hover/focus. A validation error still overrides with the error colour. */
+    variant?: Variant;
+    /** Drop the visible frame while keeping the 1px box + focus outline: the border goes transparent
+     *  (the field's background) and the hover/focus border-darkening is suppressed. Defaults `false` —
+     *  an Input reads as a bordered field. A validation error still shows its border. */
+    borderless?: boolean;
+    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;