sv5ui 2.2.0 → 2.3.0

package/dist/components/Error/Error.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { errorVariants, errorDefaults } from "./error.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("error", errorDefaults);
+let {
+  ref = $bindable(null),
+  as = "main",
+  ui,
+  icon,
+  error,
+  redirect = "/",
+  clear = true,
+  onClear,
+  class: className,
+  leading,
+  statusCode,
+  statusMessage,
+  message,
+  links,
+  children,
+  ...restProps
+} = $props();
+const slots = errorVariants();
+const classes = $derived.by(() => {
+  const c = config.slots;
+  return {
+    root: slots.root({ class: [c.root, className, ui?.root] }),
+    leading: slots.leading({ class: [c.leading, ui?.leading] }),
+    leadingIcon: slots.leadingIcon({ class: [c.leadingIcon, ui?.leadingIcon] }),
+    statusCode: slots.statusCode({ class: [c.statusCode, ui?.statusCode] }),
+    statusMessage: slots.statusMessage({ class: [c.statusMessage, ui?.statusMessage] }),
+    message: slots.message({ class: [c.message, ui?.message] }),
+    links: slots.links({ class: [c.links, ui?.links] })
+  };
+});
+const clearButton = $derived({
+  label: "Back to home",
+  color: "primary",
+  size: "lg",
+  ...onClear ? {} : { href: redirect },
+  ...typeof clear === "object" ? clear : {}
+});
+const showMessage = $derived(!!error?.message && error.message !== error.statusMessage);
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if leading}
+        <div class={classes.leading}>
+            {@render leading()}
+        </div>
+    {:else if icon}
+        <div class={classes.leading}>
+            <Icon name={icon} class={classes.leadingIcon} />
+        </div>
+    {/if}
+
+    {#if statusCode}
+        {@render statusCode()}
+    {:else if error?.statusCode}
+        <p class={classes.statusCode}>{error.statusCode}</p>
+    {/if}
+
+    {#if statusMessage}
+        {@render statusMessage()}
+    {:else if error?.statusMessage}
+        <h1 class={classes.statusMessage}>{error.statusMessage}</h1>
+    {/if}
+
+    {#if message}
+        {@render message()}
+    {:else if showMessage}
+        <p class={classes.message}>{error?.message}</p>
+    {/if}
+
+    {#if links}
+        <div class={classes.links}>
+            {@render links()}
+        </div>
+    {:else if clear}
+        <div class={classes.links}>
+            <Button onclick={onClear} {...clearButton} />
+        </div>
+    {/if}
+
+    {@render children?.()}
+</svelte:element>

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

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

package/dist/components/Error/error.types.d.ts

@@ -0,0 +1,87 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ErrorSlots } from './error.variants.js';
+import type { ButtonProps } from '../Button/button.types.js';
+export type ErrorData = {
+    /**
+     * HTTP status code of the error.
+     */
+    statusCode?: number | string;
+    /**
+     * Short status text displayed as the main heading.
+     */
+    statusMessage?: string;
+    /**
+     * Detailed error description.
+     * Hidden automatically when identical to statusMessage.
+     */
+    message?: string;
+};
+export type ErrorProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Renders the error state as a different HTML element.
+     * @default 'main'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific error slots.
+     */
+    ui?: Partial<Record<ErrorSlots, ClassNameValue>>;
+    /**
+     * Icon displayed above the status code.
+     */
+    icon?: string;
+    /**
+     * Error object containing statusCode, statusMessage, and message.
+     */
+    error?: ErrorData;
+    /**
+     * URL the clear button navigates to.
+     * Ignored when onClear is provided.
+     * @default '/'
+     */
+    redirect?: string;
+    /**
+     * Customize the clear button with ButtonProps or hide it with false.
+     * @default true
+     */
+    clear?: boolean | ButtonProps;
+    /**
+     * Callback invoked when the clear button is clicked.
+     * When provided, the clear button renders as a button instead of a link.
+     */
+    onClear?: () => void;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom content to replace the default icon area.
+     */
+    leading?: Snippet;
+    /**
+     * Custom content to replace the default status code rendering.
+     */
+    statusCode?: Snippet;
+    /**
+     * Custom content to replace the default status message rendering.
+     */
+    statusMessage?: Snippet;
+    /**
+     * Custom content to replace the default message rendering.
+     */
+    message?: Snippet;
+    /**
+     * Custom content to replace the default clear button area.
+     */
+    links?: Snippet;
+    /**
+     * Additional content rendered after the links area.
+     */
+    children?: Snippet;
+};

package/dist/components/Error/error.types.js

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

package/dist/components/Error/error.variants.d.ts

@@ -0,0 +1,66 @@
+export declare const errorVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            leadingIcon?: import("tailwind-merge").ClassNameValue;
+            leading?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            message?: import("tailwind-merge").ClassNameValue;
+            statusCode?: import("tailwind-merge").ClassNameValue;
+            statusMessage?: import("tailwind-merge").ClassNameValue;
+            links?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            leadingIcon?: import("tailwind-merge").ClassNameValue;
+            leading?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            message?: import("tailwind-merge").ClassNameValue;
+            statusCode?: import("tailwind-merge").ClassNameValue;
+            statusMessage?: import("tailwind-merge").ClassNameValue;
+            links?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    leading: string;
+    leadingIcon: string;
+    statusCode: string;
+    statusMessage: string;
+    message: string;
+    links: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            leadingIcon?: import("tailwind-merge").ClassNameValue;
+            leading?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            message?: import("tailwind-merge").ClassNameValue;
+            statusCode?: import("tailwind-merge").ClassNameValue;
+            statusMessage?: import("tailwind-merge").ClassNameValue;
+            links?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    leading: string;
+    leadingIcon: string;
+    statusCode: string;
+    statusMessage: string;
+    message: string;
+    links: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    leading: string;
+    leadingIcon: string;
+    statusCode: string;
+    statusMessage: string;
+    message: string;
+    links: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ErrorSlots = keyof ReturnType<typeof errorVariants>;
+export declare const errorDefaults: {
+    defaultVariants: Record<string, never>;
+    slots: Partial<Record<ErrorSlots, string>>;
+};

package/dist/components/Error/error.variants.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const errorVariants = tv({
+    slots: {
+        root: 'min-h-[calc(100svh-var(--ui-header-height,0px))] flex flex-col items-center justify-center text-center px-4',
+        leading: 'flex items-center justify-center mb-4',
+        leadingIcon: 'size-12 shrink-0 text-primary',
+        statusCode: 'text-base font-semibold text-primary',
+        statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-on-surface text-balance',
+        message: 'mt-4 text-lg text-on-surface-variant text-balance',
+        links: 'mt-8 flex items-center justify-center gap-6'
+    }
+});
+export const errorDefaults = {
+    defaultVariants: {},
+    slots: {}
+};

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

@@ -0,0 +1,2 @@
+export { default as Error } from './Error.svelte';
+export type { ErrorProps, ErrorData } from './error.types.js';

package/dist/components/Error/index.js

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

package/dist/components/Footer/Footer.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { footerVariants, footerDefaults } from "./footer.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Container from "../Container/Container.svelte";
+const config = getComponentConfig("footer", footerDefaults);
+let {
+  ref = $bindable(null),
+  as = "footer",
+  ui,
+  class: className,
+  top,
+  left,
+  children,
+  right,
+  bottom,
+  ...restProps
+} = $props();
+const slots = footerVariants();
+const classes = $derived.by(() => {
+  const c = config.slots;
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [c.root, className, u.root] }),
+    top: slots.top({ class: [c.top, u.top] }),
+    container: slots.container({ class: [c.container, u.container] }),
+    left: slots.left({ class: [c.left, u.left] }),
+    center: slots.center({ class: [c.center, u.center] }),
+    right: slots.right({ class: [c.right, u.right] }),
+    bottom: slots.bottom({ class: [c.bottom, u.bottom] })
+  };
+});
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if top}
+        <div class={classes.top}>
+            <Container>
+                {@render top()}
+            </Container>
+        </div>
+    {/if}
+
+    <Container class={classes.container}>
+        {#if right}
+            <div class={classes.right}>
+                {@render right()}
+            </div>
+        {/if}
+
+        {#if children}
+            <div class={classes.center}>
+                {@render children()}
+            </div>
+        {/if}
+
+        {#if left}
+            <div class={classes.left}>
+                {@render left()}
+            </div>
+        {/if}
+    </Container>
+
+    {#if bottom}
+        <div class={classes.bottom}>
+            <Container>
+                {@render bottom()}
+            </Container>
+        </div>
+    {/if}
+</svelte:element>

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

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

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.types.js

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

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: {}
+};