sv5ui 2.1.0 → 2.3.0

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/{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>

package/dist/components/Link/Link.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>function parseUrl(url, baseUrl) {
+  try {
+    const parsed = new URL(url, baseUrl.origin);
+    return {
+      pathname: parsed.pathname,
+      query: parsed.searchParams,
+      hash: parsed.hash
+    };
+  } catch {
+    return {
+      pathname: url,
+      query: new URLSearchParams(),
+      hash: ""
+    };
+  }
+}
+function isQueryMatch(linkQuery, currentQuery, mode) {
+  if (mode === false) return true;
+  if (mode === "partial") {
+    for (const [key, value] of linkQuery) {
+      if (!currentQuery.getAll(key).includes(value)) return false;
+    }
+    return true;
+  }
+  if (linkQuery.size !== currentQuery.size) return false;
+  const sorted = (p) => new URLSearchParams([...p].sort()).toString();
+  return sorted(linkQuery) === sorted(currentQuery);
+}
+function isPathnameMatch(linkPath, currentPath, exactMatch) {
+  if (exactMatch) return linkPath === currentPath;
+  const link = linkPath.replace(/\/$/, "") || "/";
+  const current = currentPath.replace(/\/$/, "") || "/";
+  return link === "/" ? current === "/" : current === link || current.startsWith(link + "/");
+}
+</script>
+
+<script lang="ts">import { page } from "$app/state";
+import { twMerge } from "tailwind-merge";
+import { linkVariants, linkDefaults } from "./link.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("link", linkDefaults);
+let {
+  ref = $bindable(null),
+  href,
+  type,
+  active,
+  exact = false,
+  exactQuery = false,
+  exactHash = false,
+  activeClass,
+  inactiveClass,
+  disabled = false,
+  raw = false,
+  external,
+  children,
+  class: className,
+  ui,
+  target,
+  rel,
+  onclick,
+  ...restProps
+} = $props();
+const isLink = $derived(!!href);
+const isExternal = $derived(
+  isLink && (external ?? (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//")))
+);
+const resolvedTarget = $derived(
+  isLink ? target ?? (isExternal ? "_blank" : void 0) : void 0
+);
+const resolvedRel = $derived(
+  isLink ? rel ?? (isExternal || resolvedTarget === "_blank" ? "noopener noreferrer" : void 0) : void 0
+);
+const isActive = $derived.by(() => {
+  if (active !== void 0) return active;
+  if (!isLink || !page.url || isExternal) return false;
+  const link = parseUrl(href, page.url);
+  if (exactHash && link.hash !== page.url.hash) return false;
+  if (!isQueryMatch(link.query, page.url.searchParams, exactQuery)) return false;
+  return isPathnameMatch(link.pathname, page.url.pathname, exact);
+});
+const baseClass = $derived.by(() => {
+  const stateClass = isActive ? activeClass : inactiveClass;
+  if (raw) return twMerge(stateClass, className);
+  const slots = linkVariants({ active: isActive, disabled, raw });
+  return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] });
+});
+const ariaCurrent = $derived(isActive && exact ? "page" : void 0);
+function handleClick(e) {
+  if (disabled) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
+  if (typeof onclick === "function") {
+    ;
+    onclick(e);
+  }
+}
+</script>
+
+{#if isLink}
+    <!-- eslint-disable svelte/no-navigation-without-resolve -->
+    <a
+        bind:this={ref}
+        {...restProps}
+        href={disabled ? undefined : href}
+        class={baseClass}
+        target={resolvedTarget}
+        rel={resolvedRel}
+        role={disabled ? 'link' : undefined}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-current={ariaCurrent}
+        tabindex={disabled ? -1 : undefined}
+        onclick={handleClick}
+    >
+        <!-- eslint-enable svelte/no-navigation-without-resolve -->
+        {@render children?.()}
+    </a>
+{:else}
+    <button
+        bind:this={ref}
+        {...restProps}
+        type={type ?? 'button'}
+        class={baseClass}
+        {disabled}
+        aria-current={ariaCurrent}
+        onclick={handleClick}
+    >
+        {@render children?.()}
+    </button>
+{/if}

package/dist/components/Main/Main.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { mainVariants, mainDefaults } from "./main.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("main", mainDefaults);
+let {
+  ref = $bindable(null),
+  as = "main",
+  ui,
+  class: className,
+  children,
+  ...restProps
+} = $props();
+const slots = mainVariants();
+const rootClass = $derived(slots.root({ class: [config.slots.root, className, ui?.root] }));
+</script>
+
+<svelte:element this={as} bind:this={ref} class={rootClass} {...restProps}>
+    {@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,5 @@
+import type { MainProps } from './main.types.js';
+export type Props = MainProps;
+declare const Main: import("svelte").Component<MainProps, {}, "ref">;
+type Main = ReturnType<typeof Main>;
+export default Main;

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

@@ -0,0 +1,2 @@
+export { default as Main } from './Main.svelte';
+export type { MainProps } from './main.types.js';

package/dist/components/Main/index.js

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

package/dist/components/Main/main.types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { MainSlots } from './main.variants.js';
+export type MainProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Renders the main container as a different HTML element.
+     * @default 'main'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific main slots.
+     */
+    ui?: Partial<Record<MainSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Content rendered inside the main container.
+     */
+    children?: Snippet;
+};

package/dist/components/Main/main.variants.d.ts

@@ -0,0 +1,30 @@
+export declare const mainVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MainSlots = keyof ReturnType<typeof mainVariants>;
+export declare const mainDefaults: {
+    defaultVariants: Record<string, never>;
+    slots: Partial<Record<MainSlots, string>>;
+};

package/dist/components/Main/main.variants.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const mainVariants = tv({
+    slots: {
+        root: 'min-h-[calc(100svh-var(--ui-header-height,0px))]'
+    }
+});
+export const mainDefaults = {
+    defaultVariants: {},
+    slots: {}
+};

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

@@ -1,111 +1,97 @@
-<script lang="ts" module>
-    import type { ModalProps } from './modal.types.js'
-
-    export type Props = ModalProps
-</script>
-
-<script lang="ts">
-    import { Dialog } from 'bits-ui'
-    import { modalVariants, modalDefaults } from './modal.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('modal', modalDefaults)
-
-    let {
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        trapFocus = true,
-        preventScroll = true,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        restoreScrollDelay,
-        title,
-        description,
-        overlay: showOverlay = config.defaultVariants.overlay ?? true,
-        scrollable = config.defaultVariants.scrollable ?? false,
-        transition = config.defaultVariants.transition ?? 'scale',
-        size = config.defaultVariants.size ?? 'md',
-        fullscreen = false,
-        portal = true,
-        close: closeProp = true,
-        dismissible = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        header: headerSlot,
-        titleSlot,
-        descriptionSlot,
-        actions: actionsSlot,
-        body: bodySlot,
-        footer: footerSlot,
-        closeSlot
-    }: Props = $props()
-
-    const resolvedSize = $derived(fullscreen ? 'full' : size)
-    const resolvedTransition = $derived(
-        transition === false ? 'none' : transition === true ? 'scale' : transition
-    )
-
-    const showClose = $derived(!!closeProp)
-    const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
-
-    const hasTitle = $derived(!!title || !!titleSlot)
-    const hasDescription = $derived(!!description || !!descriptionSlot)
-    const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(
-        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
-    )
-
-    const variantSlots = $derived(
-        modalVariants({
-            transition: resolvedTransition,
-            size: resolvedSize,
-            overlay: showOverlay,
-            scrollable
-        })
-    )
-
-    const classes = $derived({
-        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
-        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
-        description: variantSlots.description({
-            class: [config.slots.description, ui?.description]
-        }),
-        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
-        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
-        footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
-        close: variantSlots.close({ class: [config.slots.close, ui?.close] })
-    })
-
-    const contentProps = $derived.by(() => {
-        const behavior = dismissible ? ('close' as const) : ('ignore' as const)
-        return {
-            trapFocus,
-            preventScroll,
-            escapeKeydownBehavior: behavior,
-            interactOutsideBehavior: behavior,
-            onOpenAutoFocus,
-            onCloseAutoFocus,
-            onEscapeKeydown,
-            onInteractOutside,
-            forceMount,
-            restoreScrollDelay
-        }
-    })
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
+<script lang="ts" module></script>
+
+<script lang="ts">import { Dialog } from "bits-ui";
+import { modalVariants, modalDefaults } from "./modal.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("modal", modalDefaults);
+let {
+  open = $bindable(false),
+  onOpenChange,
+  onOpenChangeComplete,
+  trapFocus = true,
+  preventScroll = true,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeydown,
+  onInteractOutside,
+  forceMount,
+  restoreScrollDelay,
+  title,
+  description,
+  overlay: showOverlay = config.defaultVariants.overlay ?? true,
+  scrollable = config.defaultVariants.scrollable ?? false,
+  transition = config.defaultVariants.transition ?? "scale",
+  size = config.defaultVariants.size ?? "md",
+  fullscreen = false,
+  portal = true,
+  close: closeProp = true,
+  dismissible = true,
+  ui,
+  class: className,
+  children,
+  content: contentSlot,
+  header: headerSlot,
+  titleSlot,
+  descriptionSlot,
+  actions: actionsSlot,
+  body: bodySlot,
+  footer: footerSlot,
+  closeSlot
+} = $props();
+const resolvedSize = $derived(fullscreen ? "full" : size);
+const resolvedTransition = $derived(
+  transition === false ? "none" : transition === true ? "scale" : transition
+);
+const showClose = $derived(!!closeProp);
+const closeProps = $derived(typeof closeProp === "object" ? closeProp : {});
+const hasTitle = $derived(!!title || !!titleSlot);
+const hasDescription = $derived(!!description || !!descriptionSlot);
+const hasHeading = $derived(hasTitle || hasDescription);
+const hasHeader = $derived(
+  !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+);
+const variantSlots = $derived(
+  modalVariants({
+    transition: resolvedTransition,
+    size: resolvedSize,
+    overlay: showOverlay,
+    scrollable
+  })
+);
+const classes = $derived({
+  overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+  wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+  title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+  description: variantSlots.description({
+    class: [config.slots.description, ui?.description]
+  }),
+  actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
+  body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+  footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
+  close: variantSlots.close({ class: [config.slots.close, ui?.close] })
+});
+const contentProps = $derived.by(() => {
+  const behavior = dismissible ? "close" : "ignore";
+  return {
+    trapFocus,
+    preventScroll,
+    escapeKeydownBehavior: behavior,
+    interactOutsideBehavior: behavior,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onEscapeKeydown,
+    onInteractOutside,
+    forceMount,
+    restoreScrollDelay
+  };
+});
+function handleOpenChange(value) {
+  open = value;
+  onOpenChange?.(value);
+}
 </script>
 
 {#snippet titleEl()}

package/dist/{Modal → components/Modal}/ModalTriggerTestWrapper.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">
-    import Modal from './Modal.svelte'
+<script lang="ts">import Modal from "./Modal.svelte";
 </script>
 
 <Modal title="Trigger test" description="D">