@marwes-ui/svelte 1.3.0

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

@@ -0,0 +1,2 @@
+export { default as Icon } from "./Icon.svelte";
+export type { IconProps } from "./types.js";

package/dist/components/icon/index.js

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

package/dist/components/icon/types.d.ts

@@ -0,0 +1,12 @@
+import type { IconColor, IconSize, IconStrokeWidth } from "@marwes-ui/core";
+import type { iconRegistry } from "@marwes-ui/core";
+export type IconName = keyof typeof iconRegistry;
+export interface IconProps {
+    name: IconName;
+    size?: IconSize | number;
+    strokeWidth?: IconStrokeWidth | number;
+    color?: IconColor;
+    class?: string;
+    "aria-label"?: string;
+    decorative?: boolean;
+}

package/dist/components/icon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/input/CurrencyField.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import InputField from "./InputField.svelte";
+  import type { InputFieldProps } from "./types.js";
+  type Props = InputFieldProps & { currency?: string };
+  let { currency, input = {}, ...props }: Props = $props();
+
+  const symbols: Record<string, string> = { USD: "$", EUR: "€", GBP: "£", JPY: "¥", SEK: "kr", NOK: "kr", DKK: "kr", CHF: "CHF", BTC: "₿" };
+  const leadingSymbol = currency ? symbols[currency] : undefined;
+</script>
+<div data-purpose="currency" data-currency={currency}>
+  <InputField {...props} input={{ ...input, type: "text", inputMode: "decimal" }} {...(leadingSymbol ? { leadingSymbol } : {})} />
+</div>

package/dist/components/input/CurrencyField.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InputFieldProps } from "./types.js";
+type Props = InputFieldProps & {
+    currency?: string;
+};
+declare const CurrencyField: import("svelte").Component<Props, {}, "">;
+type CurrencyField = ReturnType<typeof CurrencyField>;
+export default CurrencyField;

package/dist/components/input/DateOfBirthField.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import InputField from "./InputField.svelte";
+  import type { InputProps } from "./types.js";
+
+  interface DateOfBirthFieldProps {
+    id?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    input?: Omit<InputProps, "type" | "autoComplete">;
+    ariaDescribedBy?: string;
+    value?: string;
+    class?: string;
+  }
+
+  let { input, ...rest }: DateOfBirthFieldProps = $props();
+  const enhancedInput = $derived({ ...input, type: "date" as const, autoComplete: "bday" });
+</script>
+<div data-purpose="date-of-birth">
+  <InputField {...rest} input={enhancedInput} />
+</div>

package/dist/components/input/DateOfBirthField.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { InputProps } from "./types.js";
+interface DateOfBirthFieldProps {
+    id?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    input?: Omit<InputProps, "type" | "autoComplete">;
+    ariaDescribedBy?: string;
+    value?: string;
+    class?: string;
+}
+declare const DateOfBirthField: import("svelte").Component<DateOfBirthFieldProps, {}, "">;
+type DateOfBirthField = ReturnType<typeof DateOfBirthField>;
+export default DateOfBirthField;

package/dist/components/input/DropdownField.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import SelectField from "./SelectField.svelte";
+  import type { SelectProps } from "./types.js";
+
+  interface DropdownFieldProps {
+    id?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    select?: SelectProps;
+    ariaDescribedBy?: string;
+    value?: string;
+    class?: string;
+  }
+
+  let {
+    select = { options: [] },
+    value = $bindable(""),
+    ...fieldProps
+  }: DropdownFieldProps = $props();
+
+  const dropdownSelect = $derived({
+    ...select,
+    native: select.native ?? false,
+  });
+</script>
+<div data-purpose="dropdown">
+  <SelectField {...fieldProps} select={dropdownSelect} bind:value />
+</div>

package/dist/components/input/DropdownField.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { SelectProps } from "./types.js";
+interface DropdownFieldProps {
+    id?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    select?: SelectProps;
+    ariaDescribedBy?: string;
+    value?: string;
+    class?: string;
+}
+declare const DropdownField: import("svelte").Component<DropdownFieldProps, {}, "value">;
+type DropdownField = ReturnType<typeof DropdownField>;
+export default DropdownField;

package/dist/components/input/EmailField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import InputField from "./InputField.svelte";
+  import type { InputFieldProps } from "./types.js";
+  type Props = Omit<InputFieldProps, "input"> & { input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete"> };
+  let { input = {}, ...props }: Props = $props();
+</script>
+<div data-purpose="email">
+  <InputField {...props} input={{ ...input, type: "email", inputMode: "email", autoComplete: "email" }} />
+</div>

package/dist/components/input/EmailField.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InputFieldProps } from "./types.js";
+type Props = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete">;
+};
+declare const EmailField: import("svelte").Component<Props, {}, "">;
+type EmailField = ReturnType<typeof EmailField>;
+export default EmailField;

package/dist/components/input/Input.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { createInputRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { InputProps } from "./types.js";
+
+  let {
+    value = $bindable(""),
+    oninput,
+    class: className,
+    style,
+    describedBy,
+    ...options
+  }: InputProps = $props();
+
+  const kit = $derived(
+    createInputRecipe({
+      ...options,
+      value,
+      ...(describedBy ? { describedBy } : {}),
+    })
+  );
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }): void {
+    value = e.currentTarget.value;
+    oninput?.(e);
+  }
+</script>
+
+<input
+  class={mergedClass}
+  style={mergedStyle}
+  id={kit.a11y.id}
+  name={kit.a11y.name}
+  type={kit.a11y.type}
+  inputmode={kit.a11y.inputMode}
+  autocomplete={kit.a11y.autoComplete as any}
+  placeholder={kit.a11y.placeholder}
+  disabled={kit.a11y.disabled}
+  readonly={kit.a11y.readOnly}
+  required={kit.a11y.required}
+  aria-label={kit.a11y.ariaLabel}
+  aria-invalid={kit.a11y.ariaInvalid}
+  aria-describedby={kit.a11y.ariaDescribedBy}
+  {value}
+  oninput={handleInput}
+/>

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

@@ -0,0 +1,4 @@
+import type { InputProps } from "./types.js";
+declare const Input: import("svelte").Component<InputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/input/InputField.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { buildInputFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Icon from "../icon/Icon.svelte";
+  import Input from "./Input.svelte";
+  import type { InputFieldProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    helperText,
+    error,
+    input = {},
+    ariaDescribedBy,
+    leadingSymbol,
+    value = $bindable(""),
+    class: className,
+  }: InputFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-input-${uniqueId}`);
+
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
+  const hasHelperText = $derived(hasTextContent(helperText));
+  const hasError = $derived(hasTextContent(error));
+  const invalid = $derived(hasError || input.invalid || false);
+  const disabled = $derived(input.disabled || false);
+  const readOnly = $derived(input.readOnly || false);
+
+  // Separate type from input to allow override for password toggle
+  const { type: inputType, ...inputRest } = $derived(input);
+
+  // Password visibility toggle
+  const isPasswordField = $derived(inputType === "password");
+  let showPassword = $state(false);
+  const effectiveInputType = $derived(
+    isPasswordField && showPassword ? "text" as const : inputType
+  );
+
+  function togglePassword(): void {
+    showPassword = !showPassword;
+  }
+
+  // Search clear button
+  const isSearchField = $derived(inputType === "search");
+  const hasSearchValue = $derived(isSearchField && String(value).length > 0);
+  const showSearchClearButton = $derived(hasSearchValue && !disabled && !readOnly);
+  const showSearchIcon = $derived(isSearchField && !showSearchClearButton);
+
+  function clearSearch(): void {
+    value = "";
+  }
+
+  const a11yIds = $derived(
+    buildInputFieldA11yIds({
+      id: fieldId,
+      hasHelperText,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass(
+      "mw-input-field",
+      disabled && "mw-input-field--disabled",
+      invalid && "mw-input-field--invalid",
+      readOnly && "mw-input-field--readonly",
+      className
+    )
+  );
+</script>
+
+<div class={wrapperClass}>
+  <label class="mw-input-field__label" for={fieldId}>
+    <p class="mw-p mw-p--md">{label}</p>
+  </label>
+
+  <div class="mw-input-field__input-wrapper">
+    {#if leadingSymbol}
+      <span class="mw-input-field__leading-symbol" aria-hidden="true">
+        {leadingSymbol}
+      </span>
+    {/if}
+    <Input
+      {...inputRest}
+      {...(effectiveInputType ? { type: effectiveInputType } : {})}
+      id={fieldId}
+      {invalid}
+      describedBy={a11yIds.describedBy ?? undefined}
+      bind:value
+    />
+
+    {#if isPasswordField && !disabled}
+      <button
+        type="button"
+        class="mw-input-field__toggle-password"
+        onclick={togglePassword}
+        aria-label={showPassword ? "Hide password" : "Show password"}
+        tabindex={0}
+      >
+        <Icon name={showPassword ? "eyeOff" : "eye"} size="xs" decorative />
+      </button>
+    {/if}
+
+    {#if showSearchIcon}
+      <span class="mw-input-field__search-icon" aria-hidden="true">
+        <Icon name="search" size="xs" decorative />
+      </span>
+    {/if}
+
+    {#if showSearchClearButton}
+      <button
+        type="button"
+        class="mw-input-field__clear-search"
+        onclick={clearSearch}
+        aria-label="Clear search"
+        tabindex={0}
+      >
+        <Icon name="x" size="xs" decorative />
+      </button>
+    {/if}
+  </div>
+
+  {#if hasHelperText && !hasError}
+    <div class="mw-input-field__helper" id={a11yIds.helperTextId}>
+      <p class="mw-p mw-p--sm">{helperText}</p>
+    </div>
+  {/if}
+
+  {#if hasError}
+    <div class="mw-input-field__error" id={a11yIds.errorId} aria-live="polite">
+      <p class="mw-p mw-p--sm">{error}</p>
+    </div>
+  {/if}
+</div>

package/dist/components/input/InputField.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldProps } from "./types.js";
+declare const InputField: import("svelte").Component<InputFieldProps, {}, "value">;
+type InputField = ReturnType<typeof InputField>;
+export default InputField;

package/dist/components/input/InputOtp.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import {
+    buildInputFieldA11yIds,
+    createInputOtpRecipe,
+    sanitizeInputOtpValue,
+  } from "@marwes-ui/core";
+  import type { InputOtpOptions } from "@marwes-ui/core";
+  import { cssVarsToStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { InputOtpProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    name,
+    label,
+    helperText,
+    error,
+    ariaDescribedBy,
+    value: controlledValue,
+    defaultValue,
+    length: lengthProp,
+    placeholderCharacter,
+    disabled,
+    readOnly,
+    required,
+    invalid: invalidProp,
+    ariaLabel,
+    onvaluechange,
+    class: className,
+  }: InputOtpProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-input-otp-${uniqueId}`);
+  const otpLength = $derived(Math.max(1, lengthProp ?? 6));
+
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
+  const hasHelperText = $derived(hasTextContent(helperText));
+  const hasError = $derived(hasTextContent(error));
+  const isInvalid = $derived(hasError || invalidProp === true);
+  const isControlled = $derived(controlledValue !== undefined);
+
+  let uncontrolledValue = $state(sanitizeInputOtpValue(defaultValue, lengthProp ?? 6));
+
+  const currentValue = $derived(
+    sanitizeInputOtpValue(isControlled ? controlledValue : uncontrolledValue, otpLength)
+  );
+
+  const a11yIds = $derived(
+    buildInputFieldA11yIds({
+      id: fieldId,
+      hasHelperText,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const recipeOptions = $derived.by((): InputOtpOptions => {
+    const opts: InputOtpOptions = {
+      id: fieldId,
+      value: currentValue,
+      length: otpLength,
+      invalid: isInvalid,
+    };
+    if (name) opts.name = name;
+    if (placeholderCharacter) opts.placeholderCharacter = placeholderCharacter;
+    if (disabled) opts.disabled = true;
+    if (readOnly) opts.readOnly = true;
+    if (required) opts.required = true;
+    if (a11yIds.describedBy) opts.describedBy = a11yIds.describedBy;
+    if (ariaLabel) opts.ariaLabel = ariaLabel;
+    return opts;
+  });
+
+  const kit = $derived(createInputOtpRecipe(recipeOptions));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(cssVarsToStyle(kit.vars));
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }): void {
+    const nextValue = sanitizeInputOtpValue(e.currentTarget.value, otpLength);
+    if (!isControlled) {
+      uncontrolledValue = nextValue;
+    }
+    onvaluechange?.(nextValue);
+  }
+</script>
+
+<div
+  class={mergedClass}
+  style={mergedStyle}
+  data-component="input-otp"
+  data-invalid={isInvalid ? "true" : undefined}
+  data-disabled={disabled ? "true" : undefined}
+>
+  <label class="mw-input-otp__label" for={fieldId}>
+    <p class="mw-p mw-p--md">{label}</p>
+  </label>
+
+  <div class="mw-input-otp__cells">
+    {#each kit.displayCells as cell (cell.key)}
+      <span
+        class={mergeClass("mw-input-otp__cell", cell.filled && "mw-input-otp__cell--filled")}
+        aria-hidden="true"
+      >
+        {cell.character}
+      </span>
+    {/each}
+
+    <input
+      id={kit.a11y.id}
+      class="mw-input-otp__input"
+      type="text"
+      name={kit.a11y.name}
+      inputmode={kit.a11y.inputMode}
+      autocomplete={kit.a11y.autoComplete}
+      maxlength={kit.a11y.maxLength}
+      pattern={kit.a11y.pattern}
+      disabled={kit.a11y.disabled}
+      readonly={kit.a11y.readOnly}
+      required={kit.a11y.required}
+      aria-label={kit.a11y.ariaLabel}
+      aria-invalid={kit.a11y.ariaInvalid}
+      aria-describedby={kit.a11y.ariaDescribedBy}
+      value={kit.displayValue}
+      oninput={handleChange}
+    />
+  </div>
+
+  {#if hasError}
+    <div class="mw-input-otp__error" id={a11yIds.errorId} aria-live="polite">
+      <p class="mw-p mw-p--sm">{error}</p>
+    </div>
+  {:else if hasHelperText}
+    <div class="mw-input-otp__helper" id={a11yIds.helperTextId}>
+      <p class="mw-p mw-p--sm">{helperText}</p>
+    </div>
+  {/if}
+</div>

package/dist/components/input/InputOtp.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputOtpProps } from "./types.js";
+declare const InputOtp: import("svelte").Component<InputOtpProps, {}, "">;
+type InputOtp = ReturnType<typeof InputOtp>;
+export default InputOtp;

package/dist/components/input/PasswordField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import InputField from "./InputField.svelte";
+  import type { InputFieldProps } from "./types.js";
+  type Props = Omit<InputFieldProps, "input"> & { input?: Omit<InputFieldProps["input"], "type"> };
+  let { input = {}, ...props }: Props = $props();
+</script>
+<div data-purpose="password">
+  <InputField {...props} input={{ ...input, type: "password" }} />
+</div>

package/dist/components/input/PasswordField.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InputFieldProps } from "./types.js";
+type Props = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type">;
+};
+declare const PasswordField: import("svelte").Component<Props, {}, "">;
+type PasswordField = ReturnType<typeof PasswordField>;
+export default PasswordField;

package/dist/components/input/PhoneField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import InputField from "./InputField.svelte";
+  import type { InputFieldProps } from "./types.js";
+  type Props = Omit<InputFieldProps, "input"> & { input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete"> };
+  let { input = {}, ...props }: Props = $props();
+</script>
+<div data-purpose="phone">
+  <InputField {...props} input={{ ...input, type: "tel", inputMode: "tel", autoComplete: "tel" }} />
+</div>

package/dist/components/input/PhoneField.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InputFieldProps } from "./types.js";
+type Props = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete">;
+};
+declare const PhoneField: import("svelte").Component<Props, {}, "">;
+type PhoneField = ReturnType<typeof PhoneField>;
+export default PhoneField;

package/dist/components/input/README.md

@@ -0,0 +1,24 @@
+# Input — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Input` atom with `createInputRecipe` and `bind:value`
+- `InputField` molecule with label, helperText, error, leadingSymbol, ariaDescribedBy
+- Stable generated IDs via `$props.id()`
+- Full a11y: aria-invalid, aria-describedby, aria-live="polite" on error
+- `buildInputFieldA11yIds` integration from core
+
+### Missing ❌
+- **`Select`** — implemented as separate component (not under input folder like React/Vue)
+- **`Textarea`** — implemented as separate component
+- **`SelectField`** molecule
+- **`TextareaField`** molecule
+- **`RichText`** atom + `RichTextField` molecule
+- **`InputOtp`** atom
+- **Field variant wrappers** (9): `DropdownField`, `SearchField`, `PasswordField`, `EmailField`, `DateOfBirthField`, `ZipCodeField`, `PhoneField`, `URLField`, `CurrencyField`
+
+### Notes
+- React/Vue group Select, Textarea, RichText under `components/input/`. Svelte separates them into their own folders for clarity.
+- The missing field variants are thin wrappers that pre-configure InputField with specific type/inputMode/leadingSymbol. Can be added as a batch.
+- `RichText` and `InputOtp` are high-complexity components flagged for later implementation.