@spaethtech/svelte-ui 0.7.1-dev.39.d6b0fa5 → 0.7.1-dev.40.3d22ac0

package/.claude/skills/svelte-ui/SKILL.md

@@ -154,7 +154,9 @@ examples):
 
 - **Form:** `Button` `ButtonDropdown` `Input` `Select` `List` `TextArea` `Checkbox` `Toggle` `Radio`
   `Rating` · **`FieldGroup`** (fieldset wrapper for radio/checkbox/toggle sets)
-- **Specialized inputs:** `PasswordInput` `EmailInput` `SearchInput` `NumberInput`
+- **Specialized inputs:** `PasswordInput` `EmailInput` `SearchInput` `NumberInput` (formatting +
+  `percent`/`stepper`/`clamp`/`liveFormat`) `PhoneInput` (stores E.164; dep-free, inject
+  `parse`/`format` for per-country)
 - **Date / time:** `DatePicker` `Calendar` `TimePicker` `TimeSpinner` `TimeRangeInput` `DateTimeInput`
 - **Data:** `DataTable` `Query` — driven by the headless layer at **`@spaethtech/svelte-ui/data`**
   (query-language parser/AST, `createGrid`, `DataGrid<T>`, `DataSet`).

package/dist/components/PhoneInput.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import Input from "./Input.svelte";
+  import Phone from "~icons/mdi/phone-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";
+
+  /**
+   * PhoneInput — type a phone number in ANY format; the bound `value` is stored in **E.164**
+   * (`+15551234567`): a leading `+`, country calling code, then the national number, digits only.
+   * The field shows what you type while editing and snaps to canonical E.164 on blur.
+   *
+   * **Dependency-free** by design — it normalises the E.164 *shape* only and does NOT do per-country
+   * formatting/validation (that needs a phone library + country data, which we don't bundle). To add
+   * that, inject `parse` / `format` / `validate` (e.g. backed by `libphonenumber-js`) — the component
+   * stays dep-free; you choose the library.
+   */
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    /** Bound value in E.164 (`+15551234567`), normalised from whatever the user types. */
+    value: string;
+    class?: string;
+    inputClass?: string;
+    /** Validates the normalised E.164 value. Overrides the built-in E.164-shape check. */
+    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;
+    /** Calling code (digits, no `+`) prepended when the typed number has no leading `+`. Default `"1"`
+     *  (North America). Set to the calling code of the numbers your users enter without a `+`. */
+    defaultCallingCode?: string;
+    /** Normalise typed text → stored E.164. Override to plug a library (e.g. libphonenumber-js). */
+    parse?: (input: string, defaultCallingCode: string) => string;
+    /** Format the stored E.164 → field display (default: shown as-is). Override for a national /
+     *  pretty format from your phone library. */
+    format?: (value: string) => string;
+  }
+
+  let {
+    value = $bindable(""),
+    valid = $bindable(true),
+    touched = $bindable(false),
+    element = $bindable(),
+    validate,
+    required = false,
+    defaultCallingCode = "1",
+    parse,
+    format,
+    placeholder = "(555) 123-4567",
+    ...restProps
+  }: Props = $props();
+
+  let displayValue = $state("");
+  let focused = $state(false);
+
+  // Default normalisation: an explicit international `+…` is kept (digits only after the `+`);
+  // otherwise the default calling code is prepended. SHAPE only — no per-country length check.
+  function defaultParse(raw: string, dcc: string): string {
+    const trimmed = (raw ?? "").trim();
+    if (!trimmed) return "";
+    const digits = trimmed.replace(/\D/g, "");
+    if (!digits) return "";
+    return trimmed.includes("+") ? `+${digits}` : `+${dcc}${digits}`;
+  }
+
+  const toE164 = (raw: string) => (parse ?? defaultParse)(raw, defaultCallingCode);
+  const toDisplay = (v: string) => (v ? (format ? format(v) : v) : "");
+
+  // Reflect external value changes into the field while the user isn't editing.
+  $effect(() => {
+    if (!focused) displayValue = toDisplay(value);
+  });
+
+  const defaultValidator = (v: string) => {
+    if (!v) return required ? "Phone number is required" : true;
+    // E.164 shape: `+`, a non-zero country digit, then 6–14 more digits (7–15 total).
+    if (!/^\+[1-9]\d{6,14}$/.test(v)) return "Enter a valid phone number";
+    return true;
+  };
+  const phoneValidator = $derived(validate ?? defaultValidator);
+
+  function handleInput(raw: string) {
+    displayValue = raw;
+    value = toE164(raw);
+  }
+  function handleFocus() {
+    focused = true;
+    displayValue = toDisplay(value);
+  }
+  function handleBlur() {
+    focused = false;
+    displayValue = toDisplay(value); // snap the field to the canonical (or your `format`) form
+  }
+
+  let stringValue = $derived(displayValue);
+</script>
+
+<Input
+  bind:value={stringValue}
+  bind:valid
+  bind:touched
+  bind:element
+  type="tel"
+  inputmode="tel"
+  autocomplete="tel"
+  {required}
+  validate={(val) => phoneValidator(toE164(val))}
+  oninput={(e) => handleInput((e.target as HTMLInputElement).value)}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  {placeholder}
+  {...restProps}
+>
+  {#snippet icon()}<Phone />{/snippet}
+</Input>

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

@@ -0,0 +1,41 @@
+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";
+/**
+ * PhoneInput — type a phone number in ANY format; the bound `value` is stored in **E.164**
+ * (`+15551234567`): a leading `+`, country calling code, then the national number, digits only.
+ * The field shows what you type while editing and snaps to canonical E.164 on blur.
+ *
+ * **Dependency-free** by design — it normalises the E.164 *shape* only and does NOT do per-country
+ * formatting/validation (that needs a phone library + country data, which we don't bundle). To add
+ * that, inject `parse` / `format` / `validate` (e.g. backed by `libphonenumber-js`) — the component
+ * stays dep-free; you choose the library.
+ */
+interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    /** Bound value in E.164 (`+15551234567`), normalised from whatever the user types. */
+    value: string;
+    class?: string;
+    inputClass?: string;
+    /** Validates the normalised E.164 value. Overrides the built-in E.164-shape check. */
+    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;
+    /** Calling code (digits, no `+`) prepended when the typed number has no leading `+`. Default `"1"`
+     *  (North America). Set to the calling code of the numbers your users enter without a `+`. */
+    defaultCallingCode?: string;
+    /** Normalise typed text → stored E.164. Override to plug a library (e.g. libphonenumber-js). */
+    parse?: (input: string, defaultCallingCode: string) => string;
+    /** Format the stored E.164 → field display (default: shown as-is). Override for a national /
+     *  pretty format from your phone library. */
+    format?: (value: string) => string;
+}
+declare const PhoneInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as PasswordInput } from "./components/PasswordInput.svelte";
 export { default as EmailInput } from "./components/EmailInput.svelte";
 export { default as SearchInput } from "./components/SearchInput.svelte";
 export { default as NumberInput } from "./components/NumberInput.svelte";
+export { default as PhoneInput } from "./components/PhoneInput.svelte";
 export { default as DateTimeInput } from "./components/DateTimeInput.svelte";
 export { default as Calendar } from "./components/Calendar.svelte";
 export { default as DatePicker } from "./components/DatePicker.svelte";

package/dist/index.js

@@ -24,6 +24,7 @@ export { default as PasswordInput } from "./components/PasswordInput.svelte";
 export { default as EmailInput } from "./components/EmailInput.svelte";
 export { default as SearchInput } from "./components/SearchInput.svelte";
 export { default as NumberInput } from "./components/NumberInput.svelte";
+export { default as PhoneInput } from "./components/PhoneInput.svelte";
 export { default as DateTimeInput } from "./components/DateTimeInput.svelte";
 export { default as Calendar } from "./components/Calendar.svelte";
 export { default as DatePicker } from "./components/DatePicker.svelte";

package/docs/components.md

@@ -207,6 +207,20 @@ blur/submit).
   and **`percent`** (display ×100 `%`, store the fraction; `min`/`max`/`step` in fraction units).
 - Dep-free by design — for locale/`Intl` or currency codes, format upstream or via `validate`.
 
+### PhoneInput
+
+Type any format; stores the bound value as **E.164** (`+15551234567`). Field shows what you type,
+snaps to canonical on blur.
+
+- **Location**: `src/lib/components/PhoneInput.svelte`
+- **Value**: `string` (E.164)
+- **Props**: `defaultCallingCode` (digits, default `"1"` — prepended when input has no `+`), `required`,
+  `validate` (validates the E.164), and the injection hooks **`parse`** (typed → E.164) / **`format`**
+  (E.164 → display).
+- **Dep-free** — normalises the E.164 *shape* only (no per-country validation/formatting). For that,
+  inject `parse`/`format`/`validate` backed by a phone library (e.g. `libphonenumber-js`); the
+  component bundles none.
+
 ## Navigation
 
 ### TabStrip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.39.d6b0fa5",
+  "version": "0.7.1-dev.40.3d22ac0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"