sv5ui 2.1.0 → 2.3.0

package/dist/components/Editor/EditorUrlPrompt.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import { untrack } from "svelte";
+import Modal from "../Modal/Modal.svelte";
+import Input from "../Input/Input.svelte";
+import Button from "../Button/Button.svelte";
+import Form from "../Form/Form.svelte";
+import FormField from "../FormField/FormField.svelte";
+import { httpUrlSchema } from "./editor.schemas.js";
+let {
+  open = $bindable(false),
+  title = "Enter URL",
+  description,
+  placeholder = "https://",
+  initialValue = "",
+  confirmLabel = "Insert",
+  schema,
+  onConfirm,
+  onCancel
+} = $props();
+let formApi = $state();
+let formState = $state({ url: "" });
+let inputRef = $state(null);
+let settled = $state(false);
+const resolvedSchema = $derived(schema ?? httpUrlSchema);
+$effect(() => {
+  if (open) {
+    const initial = untrack(() => initialValue);
+    formState = { url: initial };
+    settled = false;
+    untrack(() => formApi?.reset());
+    requestAnimationFrame(() => inputRef?.focus());
+  } else if (!settled) {
+    settled = true;
+    onCancel?.();
+  }
+});
+async function validate(state) {
+  const url = state.url ?? "";
+  const result = await resolvedSchema["~standard"].validate(url);
+  if (result.issues) {
+    return [{ name: "url", message: result.issues[0]?.message ?? "Invalid value" }];
+  }
+  return [];
+}
+function handleSubmit(event) {
+  const data = event.data;
+  settled = true;
+  onConfirm?.(data.url.trim());
+  open = false;
+}
+function cancel() {
+  settled = true;
+  onCancel?.();
+  open = false;
+}
+</script>
+
+<Modal bind:open {title} {description} size="sm">
+    {#snippet body()}
+        <Form
+            bind:api={formApi}
+            bind:state={formState}
+            {validate}
+            onsubmit={handleSubmit}
+            class="py-1"
+        >
+            <FormField name="url">
+                <Input
+                    bind:ref={inputRef}
+                    bind:value={formState.url}
+                    {placeholder}
+                    class="w-full"
+                />
+            </FormField>
+        </Form>
+    {/snippet}
+    {#snippet footer()}
+        <div class="flex items-center justify-end gap-2">
+            <Button variant="ghost" size="sm" label="Cancel" onclick={cancel} />
+            <Button
+                color="primary"
+                size="sm"
+                label={confirmLabel}
+                loading={formApi?.loading}
+                onclick={() => void formApi?.submit()}
+            />
+        </div>
+    {/snippet}
+</Modal>

package/dist/{Editor → components/Editor}/SlashPopup.svelte

@@ -1,27 +1,15 @@
-<script lang="ts">
-    import type { SlashCommand } from './editor.types.js'
-    import Icon from '../Icon/Icon.svelte'
-
-    interface Props {
-        items: SlashCommand[]
-        selectedIndex: number
-        onPick: (index: number) => void
-        listboxId: string
-        optionIdPrefix: string
-    }
-
-    let { items, selectedIndex, onPick, listboxId, optionIdPrefix }: Props = $props()
-
-    let listEl: HTMLDivElement | null = $state(null)
-
-    $effect(() => {
-        if (!listEl) return
-        const active = listEl.querySelector(`[data-index="${selectedIndex}"]`)
-        if (!active) return
-        requestAnimationFrame(() => {
-            ;(active as HTMLElement).scrollIntoView({ block: 'nearest' })
-        })
-    })
+<script lang="ts">import Icon from "../Icon/Icon.svelte";
+let { items, selectedIndex, onPick, listboxId, optionIdPrefix } = $props();
+let listEl = $state(null);
+$effect(() => {
+  if (!listEl) return;
+  const active = listEl.querySelector(`[data-index="${selectedIndex}"]`);
+  if (!active) return;
+  requestAnimationFrame(() => {
+    ;
+    active.scrollIntoView({ block: "nearest" });
+  });
+});
 </script>
 
 <div

package/dist/components/Empty/Empty.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { emptyVariants, emptyDefaults } from "./empty.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("empty", emptyDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  ui,
+  icon,
+  avatar,
+  title,
+  description,
+  actions,
+  variant = config.defaultVariants.variant,
+  size = config.defaultVariants.size,
+  class: className,
+  leading,
+  titleSlot,
+  descriptionSlot,
+  actionsSlot,
+  header,
+  body,
+  footer,
+  children,
+  ...restProps
+} = $props();
+const classes = $derived.by(() => {
+  const slots = emptyVariants({ variant, size });
+  const c = config.slots;
+  return {
+    root: slots.root({ class: [c.root, className, ui?.root] }),
+    header: slots.header({ class: [c.header, ui?.header] }),
+    avatar: slots.avatar({ class: [c.avatar, ui?.avatar] }),
+    title: slots.title({ class: [c.title, ui?.title] }),
+    description: slots.description({ class: [c.description, ui?.description] }),
+    body: slots.body({ class: [c.body, ui?.body] }),
+    actions: slots.actions({ class: [c.actions, ui?.actions] }),
+    footer: slots.footer({ class: [c.footer, ui?.footer] })
+  };
+});
+const hasHeader = $derived(
+  !!icon || !!avatar || !!title || !!description || !!leading || !!titleSlot || !!descriptionSlot || !!header
+);
+const hasActions = $derived(actions && actions.length > 0);
+const hasBody = $derived(!!hasActions || !!actionsSlot || !!body || !!children);
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if header}
+        {@render header()}
+    {:else if hasHeader}
+        <div class={classes.header}>
+            {#if leading}
+                {@render leading()}
+            {:else if icon}
+                <Icon name={icon} class={classes.avatar} />
+            {:else if avatar}
+                <Avatar {...avatar} class={classes.avatar} />
+            {/if}
+
+            {#if titleSlot}
+                {@render titleSlot()}
+            {:else if title}
+                <p class={classes.title}>{title}</p>
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot()}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
+    {/if}
+
+    {#if body}
+        {@render body()}
+    {:else if hasBody}
+        <div class={classes.body}>
+            {@render children?.()}
+
+            {#if actionsSlot}
+                {@render actionsSlot()}
+            {:else if hasActions}
+                <div class={classes.actions}>
+                    {#each actions as action, index (index)}
+                        <Button size="sm" {...action} />
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    {#if footer}
+        <div class={classes.footer}>
+            {@render footer()}
+        </div>
+    {/if}
+</svelte:element>

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

@@ -0,0 +1,41 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { fieldGroupVariants, fieldGroupDefaults } from "./field-group.variants.js";
+import { getComponentConfig } from "../../config.js";
+import { setContext } from "svelte";
+const config = getComponentConfig("fieldGroup", fieldGroupDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  ui,
+  size = config.defaultVariants.size ?? "md",
+  orientation = config.defaultVariants.orientation ?? "horizontal",
+  class: className,
+  children,
+  ...restProps
+} = $props();
+const variantSlots = $derived(fieldGroupVariants({ size, orientation }));
+const classes = $derived({
+  root: variantSlots.root({ class: [config.slots.root, className, ui?.root] })
+});
+setContext("fieldGroup", {
+  get orientation() {
+    return orientation;
+  },
+  get size() {
+    return size;
+  }
+});
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</svelte:element>