sv5ui 2.1.0 → 2.3.0

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/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.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/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}
+/>