sv5ui 2.0.0 → 2.2.0

package/dist/components/Form/Form.svelte

@@ -0,0 +1,146 @@
+<script lang="ts" module></script>
+
+<script
+    lang="ts"
+    generics="S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false"
+>import { setContext, onMount, onDestroy, untrack } from "svelte";
+import { formVariants, formDefaults } from "./form.variants.js";
+import { FormContext, FORM_CONTEXT_KEY, getFormContext } from "./form.context.svelte.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("form", formDefaults);
+let {
+  ref = $bindable(null),
+  api = $bindable(),
+  id,
+  schema,
+  state = $bindable({}),
+  validate: customValidate,
+  validateOn = ["input", "blur", "change"],
+  validateOnInputDelay = 300,
+  disabled = false,
+  loadingAuto = true,
+  transform = true,
+  nested = false,
+  name,
+  onsubmit,
+  onerror,
+  class: className,
+  ui,
+  children,
+  ...restProps
+} = $props();
+const formId = untrack(
+  () => id ?? (typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `sv5ui-form-${Math.random().toString(36).slice(2)}`)
+);
+const parentCtx = untrack(() => nested ? getFormContext() : void 0);
+const initialNested = untrack(() => nested);
+$effect(() => {
+  if (nested !== initialNested) {
+    console.warn(
+      "[sv5ui Form] The `nested` prop was changed after mount. This is not supported \u2014 nested/standalone status is fixed at mount time. Unmount and remount the Form to toggle."
+    );
+  }
+});
+const ctx = new FormContext(
+  {
+    getState: () => state,
+    getSchema: () => schema,
+    getCustomValidate: () => customValidate,
+    getValidateOn: () => validateOn,
+    getValidateOnInputDelay: () => validateOnInputDelay,
+    getDisabled: () => disabled,
+    getLoadingAuto: () => loadingAuto,
+    getTransform: () => transform,
+    getName: () => name,
+    getOnSubmit: () => onsubmit,
+    getOnError: () => onerror
+  },
+  formId,
+  parentCtx
+);
+setContext(FORM_CONTEXT_KEY, ctx);
+const apiObject = {
+  validate: (opts) => ctx.validate(opts),
+  submit: () => ctx.submit(),
+  clear: (name2) => ctx.clear(name2),
+  getErrors: (name2) => ctx.getErrors(name2),
+  setErrors: (errs, name2) => ctx.setErrors(errs, name2),
+  reset: () => ctx.reset(),
+  get errors() {
+    return ctx.errors;
+  },
+  get loading() {
+    return ctx.loading;
+  },
+  get disabled() {
+    return ctx.disabled;
+  },
+  get dirty() {
+    return ctx.dirty;
+  },
+  get dirtyFields() {
+    return ctx.dirtyFields;
+  },
+  get touchedFields() {
+    return ctx.touchedFields;
+  },
+  get blurredFields() {
+    return ctx.blurredFields;
+  },
+  get submitCount() {
+    return ctx.submitCount;
+  }
+};
+api = apiObject;
+onMount(() => {
+  if (parentCtx && nested) {
+    parentCtx.attachChild(formId, {
+      formId,
+      name,
+      validate: (opts) => ctx.validate(opts),
+      clear: (n) => ctx.clear(n),
+      reset: () => ctx.reset(),
+      setErrors: (errs, n) => ctx.setErrors(errs, n)
+    });
+  }
+});
+onDestroy(() => {
+  if (parentCtx && nested) parentCtx.detachChild(formId);
+  ctx.dispose();
+});
+async function handleSubmit(event) {
+  event.preventDefault();
+  await ctx.submit(event);
+}
+const variantSlots = formVariants();
+const classes = $derived({
+  root: variantSlots.root({
+    class: [config.slots.root, className, ui?.root]
+  })
+});
+const slotProps = $derived({
+  errors: ctx.errors,
+  loading: ctx.loading
+});
+</script>
+
+{#if nested}
+    <div
+        {...restProps as unknown as HTMLAttributes<HTMLDivElement>}
+        bind:this={ref}
+        id={typeof id === 'number' ? String(id) : id}
+        class={classes.root}
+    >
+        {@render children?.(slotProps)}
+    </div>
+{:else}
+    <form
+        {...restProps}
+        bind:this={ref}
+        id={typeof id === 'number' ? String(id) : id}
+        class={classes.root}
+        onsubmit={handleSubmit}
+    >
+        {@render children?.(slotProps)}
+    </form>
+{/if}

package/dist/{Form → components/Form}/form.context.svelte.js

@@ -217,7 +217,7 @@ export class FormContext {
     }
     // ==================== VALIDATION CORE ====================
     // The validation pipeline inherently has 6 sequential stages (nested → custom →
-    // schema → merge → scope → transform) mirroring Nuxt UI's Form.vue. Decomposing
+    // schema → merge → scope → transform). Decomposing
     // further would fragment the logic across helpers without reducing real complexity.
     // eslint-disable-next-line complexity
     async validate(opts = {}) {

package/dist/{Form → components/Form}/form.variants.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'tailwind-variants';
  * Form component variants.
  *
  * The Form component renders a near-styleless `<form>` (or `<div>` for nested forms) —
- * matching Nuxt UI v4's minimal form theme. This exists primarily so users can inject
+ * a minimal form theme. This exists primarily so users can inject
  * shared form spacing via `defineConfig({ form: { slots: { root: 'space-y-4' } } })`.
  */
 export declare const formVariants: import("tailwind-variants").TVReturnType<{

package/dist/{Form → components/Form}/form.variants.js

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
  * Form component variants.
  *
  * The Form component renders a near-styleless `<form>` (or `<div>` for nested forms) —
- * matching Nuxt UI v4's minimal form theme. This exists primarily so users can inject
+ * a minimal form theme. This exists primarily so users can inject
  * shared form spacing via `defineConfig({ form: { slots: { root: 'space-y-4' } } })`.
  */
 export const formVariants = tv({

package/dist/components/FormField/FormField.svelte

@@ -0,0 +1,158 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Label, useId } from "bits-ui";
+import { formFieldVariants, formFieldDefaults } from "./form-field.variants.js";
+import { getComponentConfig } from "../../config.js";
+import { setContext, untrack } from "svelte";
+import {
+  FORM_FIELD_CONTEXT_KEY
+} from "../../hooks/useFormField/index.js";
+import { getFormContext } from "../Form/form.context.svelte.js";
+const config = getComponentConfig("formField", formFieldDefaults);
+let {
+  ref = $bindable(null),
+  ui,
+  name,
+  label,
+  description,
+  hint,
+  help,
+  error,
+  size = config.defaultVariants.size ?? "md",
+  required = false,
+  orientation = config.defaultVariants.orientation ?? "vertical",
+  eagerValidation,
+  validateOnInputDelay,
+  errorPattern,
+  class: className,
+  children,
+  labelSlot,
+  hintSlot,
+  descriptionSlot,
+  helpSlot,
+  errorSlot,
+  ...restProps
+} = $props();
+const id = useId();
+const ariaId = $derived(name ? `form-field-${name}` : id);
+const formCtx = getFormContext();
+const resolvedError = $derived.by(() => {
+  if (error !== void 0) return error;
+  if (!formCtx || !name) return void 0;
+  const errs = errorPattern ? formCtx.getErrors(errorPattern) : formCtx.getErrors(name);
+  return errs[0]?.message;
+});
+$effect(() => {
+  if (!formCtx || !name) return;
+  const registeredName = name;
+  untrack(() => {
+    formCtx.registerField(registeredName, {
+      id: ariaId,
+      pattern: errorPattern,
+      eagerValidation,
+      validateOnInputDelay
+    });
+  });
+  return () => {
+    formCtx.unregisterField(registeredName);
+  };
+});
+$effect(() => {
+  if (!formCtx || !name) return;
+  formCtx.registerField(name, {
+    id: ariaId,
+    pattern: errorPattern,
+    eagerValidation,
+    validateOnInputDelay
+  });
+});
+const variantSlots = $derived(formFieldVariants({ size, required, orientation }));
+const classes = $derived({
+  root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+  wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+  labelWrapper: variantSlots.labelWrapper({
+    class: [config.slots.labelWrapper, ui?.labelWrapper]
+  }),
+  label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+  container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+  description: variantSlots.description({
+    class: [config.slots.description, ui?.description]
+  }),
+  error: variantSlots.error({ class: [config.slots.error, ui?.error] }),
+  hint: variantSlots.hint({ class: [config.slots.hint, ui?.hint] }),
+  help: variantSlots.help({ class: [config.slots.help, ui?.help] })
+});
+const hasError = $derived(resolvedError !== void 0 && resolvedError !== false);
+const errorMessage = $derived(typeof resolvedError === "string" ? resolvedError : void 0);
+setContext(FORM_FIELD_CONTEXT_KEY, {
+  get name() {
+    return name;
+  },
+  get size() {
+    return size;
+  },
+  get error() {
+    return resolvedError;
+  },
+  get ariaId() {
+    return ariaId;
+  },
+  get eagerValidation() {
+    return eagerValidation;
+  },
+  get validateOnInputDelay() {
+    return validateOnInputDelay;
+  },
+  get errorPattern() {
+    return errorPattern;
+  }
+});
+</script>
+
+<div bind:this={ref} class={classes.root} {...restProps}>
+    <div class={classes.wrapper}>
+        {#if label || labelSlot || hint || hintSlot}
+            <div class={classes.labelWrapper}>
+                {#if labelSlot}
+                    {@render labelSlot({ label })}
+                {:else if label}
+                    <Label.Root for={ariaId} class={classes.label}>
+                        {label}
+                    </Label.Root>
+                {/if}
+
+                {#if hintSlot}
+                    {@render hintSlot({ hint })}
+                {:else if hint}
+                    <span class={classes.hint}>{hint}</span>
+                {/if}
+            </div>
+        {/if}
+
+        {#if descriptionSlot}
+            {@render descriptionSlot({ description })}
+        {:else if description}
+            <p id="{ariaId}-description" class={classes.description}>{description}</p>
+        {/if}
+    </div>
+
+    <div class={classes.container}>
+        {#if children}
+            {@render children({ error: resolvedError })}
+        {/if}
+
+        {#if hasError && (errorMessage || errorSlot)}
+            {#if errorSlot}
+                {@render errorSlot({ error: resolvedError })}
+            {:else if errorMessage}
+                <p id="{ariaId}-error" class={classes.error}>{errorMessage}</p>
+            {/if}
+        {:else if help || helpSlot}
+            {#if helpSlot}
+                {@render helpSlot({ help })}
+            {:else if help}
+                <p id="{ariaId}-help" class={classes.help}>{help}</p>
+            {/if}
+        {/if}
+    </div>
+</div>

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import Icon from "@iconify/svelte";
+import { twMerge } from "tailwind-merge";
+let {
+  name,
+  size = 24,
+  color,
+  flipH = false,
+  flipV = false,
+  rotate = 0,
+  class: className,
+  ...restProps
+} = $props();
+const flip = $derived(
+  flipH && flipV ? "horizontal,vertical" : flipH ? "horizontal" : flipV ? "vertical" : void 0
+);
+const rotateValue = $derived(rotate ? rotate / 90 : void 0);
+const iconClass = $derived(twMerge("shrink-0", className));
+</script>
+
+<Icon
+    icon={name}
+    width={size}
+    height={size}
+    {color}
+    {flip}
+    rotate={rotateValue}
+    class={iconClass}
+    {...restProps}
+/>

package/dist/{Icon → components/Icon}/icon.types.d.ts

@@ -3,7 +3,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'>, Pick<SVGAttributes<SVGSVGElement>, 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
     /** Custom data attributes are forwarded to the rendered `<svg>`. */
-    [key: `data-${string}`]: unknown;
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Icon name in Iconify format: "collection:icon-name"
      * @example "lucide:home", "mdi:account", "heroicons:star"

package/dist/components/Input/Input.svelte

@@ -0,0 +1,168 @@
+<script lang="ts" module></script>
+
+<script lang="ts" generics="T extends InputValue = InputValue">import { inputVariants, inputDefaults } from "./input.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { getContext } from "svelte";
+import {
+  fieldGroupVariantWithRoot
+} from "../FieldGroup/field-group.variants.js";
+import Icon from "../Icon/Icon.svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("input", inputDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  ui,
+  id,
+  name,
+  color = config.defaultVariants.color,
+  variant = config.defaultVariants.variant,
+  size,
+  type = "text",
+  highlight,
+  loading = false,
+  loadingIcon = icons.loading,
+  disabled = false,
+  icon,
+  leadingIcon,
+  trailingIcon,
+  trailing = false,
+  avatar,
+  leadingSlot,
+  trailingSlot,
+  class: className,
+  onblur,
+  oninput,
+  onchange,
+  onfocus,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+function handleBlur(event) {
+  emit.onBlur();
+  onblur?.(event);
+}
+function handleInput(event) {
+  emit.onInput();
+  oninput?.(event);
+}
+function handleChange(event) {
+  emit.onChange();
+  onchange?.(event);
+}
+function handleFocus(event) {
+  emit.onFocus();
+  onfocus?.(event);
+}
+const fieldGroupContext = getContext("fieldGroup");
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedSize = $derived(
+  size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
+);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedHighlight = $derived(highlight ?? hasError);
+const fieldGroupClass = $derived(
+  fieldGroupContext ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? "horizontal"] : void 0
+);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const loadingLeading = $derived(loading && !trailing);
+const loadingTrailing = $derived(loading && trailing);
+const isLeading = $derived(!!icon && !trailing || !!leadingIcon || !!avatar || loadingLeading);
+const isTrailing = $derived(!!icon && trailing || !!trailingIcon || loadingTrailing);
+const leadingIconName = $derived(leadingIcon || (!!icon && !trailing ? icon : void 0));
+const trailingIconName = $derived(trailingIcon || (!!icon && trailing ? icon : void 0));
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const variantSlots = $derived(
+  inputVariants({
+    variant,
+    color: resolvedColor,
+    size: resolvedSize,
+    leading: isLeading,
+    trailing: isTrailing,
+    highlight: resolvedHighlight
+  })
+);
+const classes = $derived({
+  root: variantSlots.root({
+    class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
+  }),
+  base: variantSlots.base({
+    class: [config.slots.base, fieldGroupClass?.base, ui?.base]
+  }),
+  leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
+  leadingIcon: variantSlots.leadingIcon({
+    class: [config.slots.leadingIcon, ui?.leadingIcon]
+  }),
+  leadingAvatar: variantSlots.leadingAvatar({
+    class: [config.slots.leadingAvatar, ui?.leadingAvatar]
+  }),
+  leadingAvatarSize: variantSlots.leadingAvatarSize(),
+  trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
+  trailingIcon: variantSlots.trailingIcon({
+    class: [config.slots.trailingIcon, ui?.trailingIcon]
+  })
+});
+</script>
+
+<div class={classes.root}>
+    {#if leadingSlot}
+        <span class={classes.leading}>
+            {@render leadingSlot()}
+        </span>
+    {:else if loadingLeading}
+        <span class={classes.leading}>
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.leadingIcon} />
+            </span>
+        </span>
+    {:else if avatar}
+        <span class={classes.leading}>
+            <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+        </span>
+    {:else if leadingIconName}
+        <span class={classes.leading}>
+            <Icon name={leadingIconName} class={classes.leadingIcon} />
+        </span>
+    {/if}
+
+    <input
+        {...restProps}
+        bind:this={ref}
+        bind:value
+        {type}
+        id={resolvedId}
+        name={resolvedName}
+        disabled={disabled || loading}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={resolvedHighlight ? true : undefined}
+        class={classes.base}
+        onblur={handleBlur}
+        oninput={handleInput}
+        onchange={handleChange}
+        onfocus={handleFocus}
+    />
+
+    {#if trailingSlot}
+        <span class={classes.trailing}>
+            {@render trailingSlot()}
+        </span>
+    {:else if loadingTrailing}
+        <span class={classes.trailing}>
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.trailingIcon} />
+            </span>
+        </span>
+    {:else if trailingIconName}
+        <span class={classes.trailing}>
+            <Icon name={trailingIconName} class={classes.trailingIcon} />
+        </span>
+    {/if}
+</div>

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

@@ -0,0 +1,2 @@
+export { default as Input } from './Input.svelte';
+export type { InputProps, InputValue } from './input.types.js';

package/dist/{Input → components/Input}/input.types.d.ts

@@ -7,9 +7,9 @@ import type { AvatarProps } from '../Avatar/avatar.types.js';
  * Valid value types for `<Input bind:value>`.
  *
  * Covers every HTML input `type` except `"file"` (which uses `FileList` and is
- * typically handled via `onchange` events, not `bind:value`). Pattern borrowed
- * from Nuxt UI v4's `AcceptableValue` — it's the minimum union that covers
- * real-world usage while still giving TypeScript enough to catch mistakes.
+ * typically handled via `onchange` events, not `bind:value`). It's the minimum
+ * union that covers real-world usage while still giving TypeScript enough to
+ * catch mistakes.
  *
  * Use with the component generic for strict typing:
  * ```ts

package/dist/components/Kbd/Kbd.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>import { resolveKey } from "./useKbd.svelte.js";
+</script>
+
+<script lang="ts">import { onMount } from "svelte";
+import { kbdVariants, kbdDefaults } from "./kbd.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("kbd", kbdDefaults);
+let {
+  ref = $bindable(null),
+  as = "kbd",
+  value,
+  color = config.defaultVariants.color,
+  size = config.defaultVariants.size,
+  variant = config.defaultVariants.variant,
+  ui,
+  class: className,
+  children,
+  ...restProps
+} = $props();
+let mounted = $state(false);
+onMount(() => mounted = true);
+const displayValue = $derived(resolveKey(value, mounted));
+const kbdClass = $derived(
+  kbdVariants({ color, size, variant }).base({
+    class: [config.slots.base, className, ui?.base]
+  })
+);
+</script>
+
+<svelte:element this={as} bind:this={ref} class={kbdClass} {...restProps}>
+    {#if children}
+        {@render children()}
+    {:else if displayValue}
+        {displayValue}
+    {/if}
+</svelte:element>