sv5ui 2.1.0 → 2.3.0

package/dist/components/Footer/FooterColumns.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { footerColumnsVariants, footerColumnsDefaults } from "./footer-columns.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Link from "../Link/Link.svelte";
+import Icon from "../Icon/Icon.svelte";
+const config = getComponentConfig("footerColumns", footerColumnsDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  as = "nav",
+  ui,
+  columns,
+  class: className,
+  columnLabel,
+  link,
+  left,
+  right,
+  children,
+  ...restProps
+} = $props();
+const slots = footerColumnsVariants();
+const classes = $derived.by(() => {
+  const c = config.slots;
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [c.root, className, u.root] }),
+    left: slots.left({ class: [c.left, u.left] }),
+    center: slots.center({ class: [c.center, u.center] }),
+    right: slots.right({ class: [c.right, u.right] }),
+    column: slots.column({ class: [c.column, u.column] }),
+    label: slots.label({ class: [c.label, u.label] }),
+    list: slots.list({ class: [c.list, u.list] }),
+    item: slots.item({ class: [c.item, u.item] }),
+    link: slots.link({ class: [c.link, u.link] }),
+    linkActive: slots.linkActive({ class: [c.linkActive, u.linkActive] }),
+    linkInactive: slots.linkInactive({ class: [c.linkInactive, u.linkInactive] }),
+    linkLeadingIcon: slots.linkLeadingIcon({
+      class: [c.linkLeadingIcon, u.linkLeadingIcon]
+    }),
+    linkLabel: slots.linkLabel({ class: [c.linkLabel, u.linkLabel] }),
+    linkLabelExternalIcon: slots.linkLabelExternalIcon({
+      class: [c.linkLabelExternalIcon, u.linkLabelExternalIcon]
+    })
+  };
+});
+const hasColumns = $derived((columns?.length ?? 0) > 0 || !!children);
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if left}
+        <div class={classes.left}>
+            {@render left()}
+        </div>
+    {/if}
+
+    {#if hasColumns}
+        <div class={classes.center}>
+            {#each columns ?? [] as column, columnIndex (columnIndex)}
+                <div class={classes.column}>
+                    {#if columnLabel}
+                        {@render columnLabel({ column })}
+                    {:else}
+                        <p class={classes.label}>{column.label}</p>
+                    {/if}
+
+                    <ul class={classes.list}>
+                        {#each column.children as columnLink, linkIndex (linkIndex)}
+                            <li class={classes.item}>
+                                {#if link}
+                                    {@render link({ link: columnLink })}
+                                {:else}
+                                    {@const { label, icon, ...linkProps } = columnLink}
+                                    <Link
+                                        raw
+                                        activeClass={classes.linkActive}
+                                        inactiveClass={classes.linkInactive}
+                                        {...linkProps}
+                                        class={[classes.link, columnLink.class]}
+                                    >
+                                        {#if icon}
+                                            <Icon name={icon} class={classes.linkLeadingIcon} />
+                                        {/if}
+                                        <span class={classes.linkLabel}>
+                                            {label}
+                                            {#if columnLink.target === '_blank'}
+                                                <Icon
+                                                    name={icons.external}
+                                                    class={classes.linkLabelExternalIcon}
+                                                />
+                                            {/if}
+                                        </span>
+                                    </Link>
+                                {/if}
+                            </li>
+                        {/each}
+                    </ul>
+                </div>
+            {/each}
+
+            {@render children?.()}
+        </div>
+    {/if}
+
+    {#if right}
+        <div class={classes.right}>
+            {@render right()}
+        </div>
+    {/if}
+</svelte:element>

package/dist/components/Footer/FooterColumns.svelte.d.ts

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

package/dist/components/Footer/footer-columns.types.d.ts

@@ -0,0 +1,73 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { FooterColumnsSlots } from './footer-columns.variants.js';
+import type { LinkProps } from '../Link/link.types.js';
+export type FooterColumnLink = Omit<LinkProps, 'children' | 'ui'> & {
+    /**
+     * Link display text.
+     */
+    label: string;
+    /**
+     * Icon displayed before the label.
+     */
+    icon?: string;
+};
+export type FooterColumn = {
+    /**
+     * Column heading text.
+     */
+    label: string;
+    /**
+     * Links rendered in the column.
+     */
+    children: FooterColumnLink[];
+};
+export type FooterColumnsProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Renders the columns as a different HTML element.
+     * @default 'nav'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific slots.
+     */
+    ui?: Partial<Record<FooterColumnsSlots, ClassNameValue>>;
+    /**
+     * Columns of link groups to render.
+     */
+    columns?: FooterColumn[];
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom rendering for a column heading.
+     */
+    columnLabel?: Snippet<[{
+        column: FooterColumn;
+    }]>;
+    /**
+     * Custom rendering for a link, replacing the default Link element.
+     */
+    link?: Snippet<[{
+        link: FooterColumnLink;
+    }]>;
+    /**
+     * Content beside the columns, before them on xl screens.
+     */
+    left?: Snippet;
+    /**
+     * Content beside the columns, after them on xl screens.
+     * Designed for a newsletter or call to action block.
+     */
+    right?: Snippet;
+    /**
+     * Extra content rendered as an additional column in the grid.
+     */
+    children?: Snippet;
+};

package/dist/components/Footer/footer-columns.variants.d.ts

@@ -0,0 +1,108 @@
+export declare const footerColumnsVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            label?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            center?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            left?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            column?: import("tailwind-merge").ClassNameValue;
+            linkActive?: import("tailwind-merge").ClassNameValue;
+            linkInactive?: import("tailwind-merge").ClassNameValue;
+            linkLeadingIcon?: import("tailwind-merge").ClassNameValue;
+            linkLabel?: import("tailwind-merge").ClassNameValue;
+            linkLabelExternalIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            label?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            center?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            left?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            column?: import("tailwind-merge").ClassNameValue;
+            linkActive?: import("tailwind-merge").ClassNameValue;
+            linkInactive?: import("tailwind-merge").ClassNameValue;
+            linkLeadingIcon?: import("tailwind-merge").ClassNameValue;
+            linkLabel?: import("tailwind-merge").ClassNameValue;
+            linkLabelExternalIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    left: string;
+    center: string;
+    right: string;
+    column: string;
+    label: string;
+    list: string;
+    item: string;
+    link: string;
+    linkActive: string;
+    linkInactive: string;
+    linkLeadingIcon: string;
+    linkLabel: string;
+    linkLabelExternalIcon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            label?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            center?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            left?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            column?: import("tailwind-merge").ClassNameValue;
+            linkActive?: import("tailwind-merge").ClassNameValue;
+            linkInactive?: import("tailwind-merge").ClassNameValue;
+            linkLeadingIcon?: import("tailwind-merge").ClassNameValue;
+            linkLabel?: import("tailwind-merge").ClassNameValue;
+            linkLabelExternalIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    left: string;
+    center: string;
+    right: string;
+    column: string;
+    label: string;
+    list: string;
+    item: string;
+    link: string;
+    linkActive: string;
+    linkInactive: string;
+    linkLeadingIcon: string;
+    linkLabel: string;
+    linkLabelExternalIcon: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    left: string;
+    center: string;
+    right: string;
+    column: string;
+    label: string;
+    list: string;
+    item: string;
+    link: string;
+    linkActive: string;
+    linkInactive: string;
+    linkLeadingIcon: string;
+    linkLabel: string;
+    linkLabelExternalIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FooterColumnsSlots = keyof ReturnType<typeof footerColumnsVariants>;
+export declare const footerColumnsDefaults: {
+    defaultVariants: Record<string, never>;
+    slots: Partial<Record<FooterColumnsSlots, string>>;
+};

package/dist/components/Footer/footer-columns.variants.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+export const footerColumnsVariants = tv({
+    slots: {
+        root: 'xl:grid xl:grid-cols-3 xl:gap-8',
+        left: 'mb-10 xl:mb-0',
+        center: 'flex flex-col gap-8 lg:grid lg:auto-cols-fr lg:grid-flow-col xl:col-span-2',
+        right: 'mt-10 xl:mt-0',
+        column: '',
+        label: 'text-sm font-semibold text-on-surface',
+        list: 'mt-6 space-y-4',
+        item: 'relative',
+        link: 'group flex items-center gap-1.5 text-sm',
+        linkActive: 'font-medium text-primary',
+        linkInactive: 'text-on-surface-variant transition-colors hover:text-on-surface',
+        linkLeadingIcon: 'size-5 shrink-0',
+        linkLabel: 'truncate',
+        linkLabelExternalIcon: 'absolute top-0 inline-block size-3 text-on-surface-variant'
+    }
+});
+export const footerColumnsDefaults = {
+    defaultVariants: {},
+    slots: {}
+};

package/dist/components/Footer/footer.types.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { FooterSlots } from './footer.variants.js';
+export type FooterProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Renders the footer as a different HTML element.
+     * @default 'footer'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific footer slots.
+     */
+    ui?: Partial<Record<FooterSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Content rendered above the main footer row.
+     * Designed for FooterColumns.
+     */
+    top?: Snippet;
+    /**
+     * Left area of the main row, typically copyright.
+     * Last in the mobile stack, first on lg+.
+     */
+    left?: Snippet;
+    /**
+     * Center area of the main row, typically navigation links.
+     */
+    children?: Snippet;
+    /**
+     * Right area of the main row, typically social buttons.
+     * First in the mobile stack, last on lg+.
+     */
+    right?: Snippet;
+    /**
+     * Content rendered below the main footer row.
+     */
+    bottom?: Snippet;
+};

package/dist/components/Footer/footer.variants.d.ts

@@ -0,0 +1,66 @@
+export declare const footerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            center?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            left?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            bottom?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            center?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            left?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            bottom?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    top: string;
+    container: string;
+    left: string;
+    center: string;
+    right: string;
+    bottom: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            center?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            left?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            bottom?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    top: string;
+    container: string;
+    left: string;
+    center: string;
+    right: string;
+    bottom: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    top: string;
+    container: string;
+    left: string;
+    center: string;
+    right: string;
+    bottom: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FooterSlots = keyof ReturnType<typeof footerVariants>;
+export declare const footerDefaults: {
+    defaultVariants: Record<string, never>;
+    slots: Partial<Record<FooterSlots, string>>;
+};

package/dist/components/Footer/footer.variants.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const footerVariants = tv({
+    slots: {
+        root: 'border-t border-outline-variant',
+        top: 'py-8 lg:py-12',
+        container: 'flex flex-col items-center gap-y-3 py-8 lg:flex-row lg:items-center lg:justify-between lg:gap-x-3 lg:py-4',
+        left: 'flex items-center justify-center gap-x-1.5 text-sm text-on-surface-variant lg:order-1 lg:flex-1 lg:justify-start',
+        center: 'flex items-center justify-center lg:order-2',
+        right: 'flex items-center justify-center gap-x-1.5 lg:order-3 lg:flex-1 lg:justify-end',
+        bottom: 'py-8 text-sm text-on-surface-variant lg:py-12'
+    }
+});
+export const footerDefaults = {
+    defaultVariants: {},
+    slots: {}
+};

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

@@ -0,0 +1,4 @@
+export { default as Footer } from './Footer.svelte';
+export { default as FooterColumns } from './FooterColumns.svelte';
+export type { FooterProps } from './footer.types.js';
+export type { FooterColumnsProps, FooterColumn, FooterColumnLink } from './footer-columns.types.js';

package/dist/components/Footer/index.js

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

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