sv5ui 2.2.0 → 2.3.0

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

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

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/Header/Header.svelte

@@ -0,0 +1,177 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { headerVariants, headerDefaults } from "./header.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { page } from "$app/state";
+import Container from "../Container/Container.svelte";
+import Link from "../Link/Link.svelte";
+import Button from "../Button/Button.svelte";
+import Modal from "../Modal/Modal.svelte";
+import Slideover from "../Slideover/Slideover.svelte";
+import Drawer from "../Drawer/Drawer.svelte";
+const config = getComponentConfig("header", headerDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  as = "header",
+  ui,
+  title,
+  to = "/",
+  mode = "modal",
+  menu,
+  toggle = true,
+  toggleSide = config.defaultVariants.toggleSide,
+  open = $bindable(false),
+  autoClose = true,
+  class: className,
+  titleSlot,
+  left,
+  children,
+  right,
+  toggleSlot,
+  top,
+  bottom,
+  body,
+  content,
+  ...restProps
+} = $props();
+const classes = $derived.by(() => {
+  const slots = headerVariants({ toggleSide });
+  const c = config.slots;
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [c.root, className, u.root] }),
+    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] }),
+    title: slots.title({ class: [c.title, u.title] }),
+    toggle: slots.toggle({ class: [c.toggle, u.toggle] }),
+    top: slots.top({ class: [c.top, u.top] }),
+    bottom: slots.bottom({ class: [c.bottom, u.bottom] }),
+    body: slots.body({ class: [c.body, u.body] })
+  };
+});
+const hasMenu = $derived(!!body || !!content);
+const showToggle = $derived(toggle !== false && (!!toggleSlot || hasMenu));
+const userToggle = $derived(typeof toggle === "object" ? toggle : {});
+const toggleProps = $derived({
+  color: "secondary",
+  variant: "ghost",
+  icon: open ? icons.close : icons.menu,
+  "aria-label": open ? "Close menu" : "Open menu",
+  "aria-expanded": open,
+  ...userToggle
+});
+const menuUi = $derived({ body: classes.body });
+function handleToggle(event) {
+  userToggle.onclick?.(event);
+  if (!event.defaultPrevented) {
+    open = !open;
+  }
+}
+let previousPath = page.url.pathname;
+$effect(() => {
+  const path = page.url.pathname;
+  if (path !== previousPath) {
+    previousPath = path;
+    if (autoClose) {
+      open = false;
+    }
+  }
+});
+</script>
+
+{#snippet toggleArea()}
+    {#if showToggle}
+        {#if toggleSlot}
+            {@render toggleSlot()}
+        {:else}
+            <Button
+                {...toggleProps}
+                onclick={handleToggle}
+                class={[classes.toggle, toggleProps.class]}
+            />
+        {/if}
+    {/if}
+{/snippet}
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if top}
+        <div class={classes.top}>
+            {@render top()}
+        </div>
+    {/if}
+
+    <Container class={classes.container}>
+        <div class={classes.left}>
+            {#if toggleSide === 'left'}
+                {@render toggleArea()}
+            {/if}
+
+            {#if titleSlot}
+                {@render titleSlot()}
+            {:else if title}
+                <Link href={to} raw aria-label={title} class={classes.title}>{title}</Link>
+            {/if}
+
+            {@render left?.()}
+        </div>
+
+        {#if children}
+            <div class={classes.center}>
+                {@render children()}
+            </div>
+        {/if}
+
+        <div class={classes.right}>
+            {@render right?.()}
+
+            {#if toggleSide === 'right'}
+                {@render toggleArea()}
+            {/if}
+        </div>
+    </Container>
+
+    {#if bottom}
+        <div class={classes.bottom}>
+            {@render bottom()}
+        </div>
+    {/if}
+</svelte:element>
+
+{#if hasMenu}
+    {#if mode === 'modal'}
+        <Modal
+            bind:open
+            {title}
+            fullscreen
+            overlay={menu?.overlay}
+            dismissible={menu?.dismissible}
+            {body}
+            {content}
+            ui={menuUi}
+        />
+    {:else if mode === 'slideover'}
+        <Slideover
+            bind:open
+            {title}
+            side={menu?.side ?? 'right'}
+            overlay={menu?.overlay}
+            dismissible={menu?.dismissible}
+            {body}
+            {content}
+            ui={menuUi}
+        />
+    {:else if mode === 'drawer'}
+        <Drawer
+            bind:open
+            {title}
+            direction={menu?.direction}
+            overlay={menu?.overlay}
+            {body}
+            {content}
+            ui={menuUi}
+        />
+    {/if}
+{/if}

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

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

package/dist/components/Header/header.types.d.ts

@@ -0,0 +1,124 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { HeaderSlots, HeaderVariantProps } from './header.variants.js';
+import type { ButtonProps } from '../Button/button.types.js';
+import type { SlideoverProps } from '../Slideover/slideover.types.js';
+import type { DrawerProps } from '../Drawer/drawer.types.js';
+export type HeaderMode = 'modal' | 'slideover' | 'drawer';
+export type HeaderMenuProps = {
+    /**
+     * Side the menu opens from when mode is 'slideover'.
+     * @default 'right'
+     */
+    side?: SlideoverProps['side'];
+    /**
+     * Direction the menu opens from when mode is 'drawer'.
+     */
+    direction?: DrawerProps['direction'];
+    /**
+     * Render a backdrop overlay behind the menu.
+     */
+    overlay?: boolean;
+    /**
+     * Allow dismissing the menu by clicking outside or pressing Escape.
+     * Not supported by mode 'drawer'.
+     */
+    dismissible?: boolean;
+};
+export type HeaderProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'title'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Renders the header as a different HTML element.
+     * @default 'header'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific header slots.
+     */
+    ui?: Partial<Record<HeaderSlots, ClassNameValue>>;
+    /**
+     * Brand title text rendered as a link in the left area.
+     */
+    title?: string;
+    /**
+     * Navigation target of the brand title link.
+     * @default '/'
+     */
+    to?: string;
+    /**
+     * How the mobile menu opens, composing the corresponding overlay component.
+     * @default 'modal'
+     */
+    mode?: HeaderMode;
+    /**
+     * Options forwarded to the overlay the mobile menu is built from.
+     */
+    menu?: HeaderMenuProps;
+    /**
+     * Mobile menu toggle button shown below the lg breakpoint.
+     * Customize with ButtonProps or hide with false.
+     * Not rendered when there is no body or content to show.
+     * @default true
+     */
+    toggle?: boolean | ButtonProps;
+    /**
+     * Which side of the header the toggle button is placed on.
+     * @default 'right'
+     */
+    toggleSide?: NonNullable<HeaderVariantProps['toggleSide']>;
+    /**
+     * Bindable open state of the mobile menu.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Close the mobile menu automatically when the route changes.
+     * @default true
+     */
+    autoClose?: boolean;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom content to replace the default brand title link.
+     */
+    titleSlot?: Snippet;
+    /**
+     * Extra content in the left area, after the brand title.
+     */
+    left?: Snippet;
+    /**
+     * Center area content, hidden below the lg breakpoint.
+     * Typically navigation links.
+     */
+    children?: Snippet;
+    /**
+     * Content in the right area, before the toggle button.
+     */
+    right?: Snippet;
+    /**
+     * Custom content to replace the default toggle button.
+     */
+    toggleSlot?: Snippet;
+    /**
+     * Content rendered above the main header row.
+     */
+    top?: Snippet;
+    /**
+     * Content rendered below the main header row.
+     */
+    bottom?: Snippet;
+    /**
+     * Mobile menu content rendered inside the overlay body.
+     */
+    body?: Snippet;
+    /**
+     * Custom content that replaces the entire mobile menu layout.
+     */
+    content?: Snippet;
+};

package/dist/components/Header/header.types.js

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

package/dist/components/Header/header.variants.d.ts

@@ -0,0 +1,108 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const headerVariants: import("tailwind-variants").TVReturnType<{
+    toggleSide: {
+        left: {
+            toggle: string;
+        };
+        right: {
+            toggle: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    left: string;
+    center: string;
+    right: string;
+    title: string;
+    toggle: string;
+    top: string;
+    bottom: string;
+    body: string;
+}, undefined, {
+    toggleSide: {
+        left: {
+            toggle: string;
+        };
+        right: {
+            toggle: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    left: string;
+    center: string;
+    right: string;
+    title: string;
+    toggle: string;
+    top: string;
+    bottom: string;
+    body: string;
+}, import("tailwind-variants").TVReturnType<{
+    toggleSide: {
+        left: {
+            toggle: string;
+        };
+        right: {
+            toggle: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    left: string;
+    center: string;
+    right: string;
+    title: string;
+    toggle: string;
+    top: string;
+    bottom: string;
+    body: string;
+}, undefined, unknown, unknown, undefined>>;
+export type HeaderVariantProps = VariantProps<typeof headerVariants>;
+export type HeaderSlots = keyof ReturnType<typeof headerVariants>;
+export declare const headerDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        toggleSide: {
+            left: {
+                toggle: string;
+            };
+            right: {
+                toggle: string;
+            };
+        };
+    }, {
+        root: string;
+        container: string;
+        left: string;
+        center: string;
+        right: string;
+        title: string;
+        toggle: string;
+        top: string;
+        bottom: string;
+        body: string;
+    }, {
+        toggleSide: {
+            left: {
+                toggle: string;
+            };
+            right: {
+                toggle: string;
+            };
+        };
+    }, {
+        root: string;
+        container: string;
+        left: string;
+        center: string;
+        right: string;
+        title: string;
+        toggle: string;
+        top: string;
+        bottom: string;
+        body: string;
+    }>;
+    slots: Partial<Record<HeaderSlots, string>>;
+};

package/dist/components/Header/header.variants.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const headerVariants = tv({
+    slots: {
+        root: 'sticky top-0 z-50 h-(--ui-header-height) border-b border-outline-variant bg-surface/75 backdrop-blur',
+        container: 'flex h-full items-center justify-between gap-3',
+        left: 'flex items-center gap-1.5 lg:flex-1',
+        center: 'hidden lg:flex',
+        right: 'flex items-center justify-end gap-1.5 lg:flex-1',
+        title: 'flex min-w-0 shrink-0 items-center gap-1.5 text-xl font-bold text-on-surface',
+        toggle: 'lg:hidden',
+        top: '',
+        bottom: '',
+        body: ''
+    },
+    variants: {
+        toggleSide: {
+            left: {
+                toggle: '-ms-1.5'
+            },
+            right: {
+                toggle: '-me-1.5'
+            }
+        }
+    },
+    defaultVariants: {
+        toggleSide: 'right'
+    }
+});
+export const headerDefaults = {
+    defaultVariants: headerVariants.defaultVariants,
+    slots: {}
+};

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

@@ -0,0 +1,2 @@
+export { default as Header } from './Header.svelte';
+export type { HeaderProps, HeaderMode, HeaderMenuProps } from './header.types.js';

package/dist/components/Header/index.js

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

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

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