zabi-components 5.0.21 → 5.0.22

package/dist/molecules/ContactForm.svelte

@@ -14,9 +14,8 @@
 
     let {
         className = "",
-        children,
-        ...restProps
-    } = $props<Props & { children?: any }>();
+        onsubmit,
+    }: Props = $props();
 
     let formData = $state<ContactFormData>({
         name: "",
@@ -25,21 +24,65 @@
         subscribe: false,
     });
 
+    let fieldErrors = $state<Partial<Record<keyof ContactFormData, string>>>({});
+    let formErrorMessage = $state("");
+
+    function validate(data: ContactFormData) {
+        const nextErrors: Partial<Record<keyof ContactFormData, string>> = {};
+
+        if (!data.name.trim()) {
+            nextErrors.name = "Please enter your name.";
+        }
+
+        if (!data.email.trim()) {
+            nextErrors.email = "Please enter your email address.";
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
+            nextErrors.email = "Please enter a valid email address.";
+        }
+
+        if (!(data.message || "").trim()) {
+            nextErrors.message = "Please enter a message.";
+        }
+
+        fieldErrors = nextErrors;
+        return Object.keys(nextErrors).length === 0;
+    }
+
     function handleFormSubmit(event: SubmitEvent) {
-        const formData = new FormData(event.target as HTMLFormElement);
+        const submittedFormData = new FormData(event.target as HTMLFormElement);
         const data: ContactFormData = {
-            name: (formData.get("name") as string) || "",
-            email: (formData.get("email") as string) || "",
-            message: (formData.get("message") as string) || "",
-            subscribe: formData.get("subscribe") === "on" || false,
+            name: (submittedFormData.get("name") as string) || "",
+            email: (submittedFormData.get("email") as string) || "",
+            message: (submittedFormData.get("message") as string) || "",
+            subscribe: submittedFormData.get("subscribe") === "on" || false,
         };
 
-        console.log("Form submitted with data:", data);
+        if (!validate(data)) {
+            formErrorMessage =
+                "We could not submit your request. Fix the highlighted fields and try again.";
+            return;
+        }
+
+        formErrorMessage = "";
+        if (onsubmit) {
+            onsubmit(event);
+        }
     }
 </script>
 
-<Card size="md" fullWidth={true} title="Get in Touch">
-    <Form onsubmit={handleFormSubmit} className="space-y-4">
+<div class={className}>
+    <Card size="md" fullWidth={true} title="Get in Touch">
+        <Form onsubmit={handleFormSubmit} className="space-y-4">
+        {#if formErrorMessage}
+            <div
+                class="rounded-lg border border-error px-4 py-3 text-sm text-error"
+                role="alert"
+            >
+                <p class="font-medium">Something went wrong</p>
+                <p>{formErrorMessage}</p>
+                <p class="mt-1">Recovery action: review your inputs and resubmit.</p>
+            </div>
+        {/if}
         <div class="space-y-4">
             <Input
                 type="text"
@@ -49,6 +92,8 @@
                 value={formData.name}
                 oninput={(e) =>
                     (formData.name = (e.target as HTMLInputElement).value)}
+                variant={fieldErrors.name ? "error" : "default"}
+                message={fieldErrors.name || ""}
             />
             <Input
                 type="email"
@@ -58,24 +103,8 @@
                 value={formData.email}
                 oninput={(e) =>
                     (formData.email = (e.target as HTMLInputElement).value)}
-            />
-            <Input
-                type="email"
-                name="email"
-                label="Email"
-                placeholder="Enter your email"
-                value={formData.email}
-                oninput={(e) =>
-                    (formData.email = (e.target as HTMLInputElement).value)}
-            />
-            <Input
-                type="email"
-                name="email"
-                label="Email"
-                placeholder="Enter your email"
-                value={formData.email}
-                oninput={(e) =>
-                    (formData.email = (e.target as HTMLInputElement).value)}
+                variant={fieldErrors.email ? "error" : "default"}
+                message={fieldErrors.email || ""}
             />
             <Textarea
                 name="message"
@@ -87,6 +116,8 @@
                     (formData.message = (
                         e.target as HTMLTextAreaElement
                     ).value)}
+                variant={fieldErrors.message ? "error" : "default"}
+                message={fieldErrors.message || ""}
             />
             <Checkbox
                 name="subscribe"
@@ -103,5 +134,6 @@
                 Send Message
             </Button>
         </div>
-    </Form>
-</Card>
+        </Form>
+    </Card>
+</div>

package/dist/molecules/ContactForm.svelte.d.ts

@@ -2,9 +2,6 @@ interface Props {
     className?: string;
     onsubmit?: (event: SubmitEvent) => void;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-};
-declare const ContactForm: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ContactForm: import("svelte").Component<Props, {}, "">;
 type ContactForm = ReturnType<typeof ContactForm>;
 export default ContactForm;

package/dist/molecules/Dropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Button from "../atoms/Button.svelte";
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         isOpen?: boolean;
@@ -26,7 +27,7 @@
         ...restProps
     }: Props & { children?: any; trigger?: any } = $props();
 
-    let dropdownId = `dropdown-${Math.random().toString(36).substr(2, 9)}`;
+    const dropdownId = generateId("dropdown");
     let triggerElement = $state<HTMLElement | null>(null);
     let menuElement = $state<HTMLElement | null>(null);
     let openedViaKeyboard = $state(false);

package/dist/molecules/ImageUpload.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onDestroy } from "svelte";
     import Button from "../atoms/Button.svelte";
     import { Image } from "@lucide/svelte";
 
@@ -7,6 +8,7 @@
         disabled?: boolean;
         accept?: string;
         placeholder?: string;
+        errorMessage?: string;
         onchange?: (event: Event) => void;
         onclick?: (event: Event) => void;
     }
@@ -16,11 +18,20 @@
         disabled = false,
         accept = "image/*",
         placeholder = "No image selected",
+        errorMessage = "",
         children,
         ...restProps
     } = $props<Props & { children?: any }>();
 
     let fileInput = $state<HTMLInputElement>();
+    let currentObjectUrl = $state<string | null>(null);
+
+    function revokeCurrentObjectUrl() {
+        if (currentObjectUrl && typeof URL !== "undefined" && URL.revokeObjectURL) {
+            URL.revokeObjectURL(currentObjectUrl);
+            currentObjectUrl = null;
+        }
+    }
 
     function handleFileSelect(event: Event) {
         if (disabled) return;
@@ -31,17 +42,17 @@
         const file = input.files[0];
 
         if (typeof URL !== "undefined" && URL.createObjectURL) {
+            revokeCurrentObjectUrl();
             const url = URL.createObjectURL(file);
             value = url;
+            currentObjectUrl = url;
         }
     }
 
     function removeImage() {
         if (disabled) return;
 
-        if (value && typeof URL !== "undefined" && URL.revokeObjectURL) {
-            URL.revokeObjectURL(value);
-        }
+        revokeCurrentObjectUrl();
         value = null;
     }
 
@@ -49,6 +60,10 @@
         if (disabled) return;
         fileInput?.click();
     }
+
+    onDestroy(() => {
+        revokeCurrentObjectUrl();
+    });
 </script>
 
 <div class="space-y-3">
@@ -118,4 +133,12 @@
         {disabled}
         class="hidden"
     />
+
+    {#if errorMessage}
+        <div class="rounded-lg border border-error px-3 py-2 text-sm text-error" role="alert">
+            <p class="font-medium">Image upload failed</p>
+            <p>{errorMessage}</p>
+            <p class="mt-1">Recovery action: try another file or retry upload.</p>
+        </div>
+    {/if}
 </div>

package/dist/molecules/ImageUpload.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     disabled?: boolean;
     accept?: string;
     placeholder?: string;
+    errorMessage?: string;
     onchange?: (event: Event) => void;
     onclick?: (event: Event) => void;
 }

package/dist/molecules/Modal.svelte

@@ -28,7 +28,7 @@
         ...restProps
     }: Props & { children?: any; footer?: any } = $props();
 
-    let modalContainer: HTMLDivElement;
+    let modalContainer = $state<HTMLDivElement>();
     let cleanupFocusTrap: (() => void) | null = null;
 
     const sizeClasses = $derived(
@@ -53,12 +53,13 @@
 
     // Handle focus trap when modal opens
     $effect(() => {
-        if (isOpen && modalContainer) {
+        const container = modalContainer;
+        if (isOpen && container) {
             saveFocus();
-            cleanupFocusTrap = trapFocus(modalContainer);
+            cleanupFocusTrap = trapFocus(container);
             // Small delay to ensure modal is rendered
             setTimeout(() => {
-                focusFirstElement(modalContainer);
+                focusFirstElement(container);
             }, 0);
         } else if (!isOpen && cleanupFocusTrap) {
             cleanupFocusTrap();
@@ -93,49 +94,49 @@
         aria-labelledby={title ? "modal-title" : undefined}
         tabindex="-1"
     >
-        <Card
+        <div
             bind:this={modalContainer}
-            variant="default"
-            fullWidth={false}
             class="bg-card rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col p-0"
         >
-            {#if title || description}
-                <CardHeader
-                    {description}
-                    className="px-6 pt-6 pb-4"
-                >
-                    {#if title}
-                        <div class="flex items-center justify-between">
-                            <h2
-                                id="modal-title"
-                                class="text-2xl font-normal leading-8 text-headline tracking-normal"
-                            >
-                                {title}
-                            </h2>
-                            <button
-                                type="button"
-                                onclick={closeModal}
-                                class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-100"
-                                aria-label="Close"
-                            >
-                                ×
-                            </button>
-                        </div>
-                    {/if}
-                </CardHeader>
-            {/if}
+            <Card variant="default" fullWidth={false}>
+                {#if title || description}
+                    <CardHeader
+                        {description}
+                        className="px-6 pt-6 pb-4"
+                    >
+                        {#if title}
+                            <div class="flex items-center justify-between">
+                                <h2
+                                    id="modal-title"
+                                    class="text-2xl font-normal leading-8 text-headline tracking-normal"
+                                >
+                                    {title}
+                                </h2>
+                                <button
+                                    type="button"
+                                    onclick={closeModal}
+                                    class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-100"
+                                    aria-label="Close"
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        {/if}
+                    </CardHeader>
+                {/if}
 
-            {#if children}
-                <CardContent className="flex-1">
-                    {@render children?.()}
-                </CardContent>
-            {/if}
+                {#if children}
+                    <CardContent className="flex-1">
+                        {@render children?.()}
+                    </CardContent>
+                {/if}
 
-            {#if footer}
-                <CardFooter className="flex justify-end gap-3 pt-4">
-                    {@render footer?.()}
-                </CardFooter>
-            {/if}
-        </Card>
+                {#if footer}
+                    <CardFooter className="flex justify-end gap-3 pt-4">
+                        {@render footer?.()}
+                    </CardFooter>
+                {/if}
+            </Card>
+        </div>
     </div>
 {/if}

package/dist/molecules/NavigationMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { getContext, setContext } from "svelte";
+    import { setContext } from "svelte";
     import { onMount } from "svelte";
     import NavigationMenuList from "./NavigationMenuList.svelte";
     import NavigationMenuItem from "./NavigationMenuItem.svelte";
@@ -8,13 +8,10 @@
     import NavigationMenuContent from "./NavigationMenuContent.svelte";
     import NavigationMenuLink from "./NavigationMenuLink.svelte";
 
-    interface NavigationMenuContext {
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     export interface NavigationMenuItemData {
         value: string;
@@ -76,7 +73,7 @@
         }
     });
 
-    const context: NavigationMenuContext = {
+    const context: NavigationMenuContextValue = {
         get activeItem() {
             return activeItem;
         },
@@ -86,7 +83,7 @@
         },
     };
 
-    setContext(NAVIGATION_MENU_CONTEXT, context);
+    setContext(NAVIGATION_MENU_CONTEXT_KEY, context);
 </script>
 
 <nav

package/dist/molecules/NavigationMenuContent.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-    import { onMount, onDestroy } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import { onMount } from "svelte";
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -21,11 +23,9 @@
     let contentElement = $state<HTMLElement | null>(null);
     let parentItem = $state<HTMLElement | null>(null);
 
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 

package/dist/molecules/NavigationMenuItem.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -17,10 +19,9 @@
         ...restProps
     }: Props = $props();
 
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 </script>

package/dist/molecules/NavigationMenuLink.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         href?: string;
@@ -19,9 +21,9 @@
         ...restProps
     }: Props = $props();
 
-    const context = getContext<{
-        setActiveItem: (item: string | null) => void;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     function handleClick() {
         context?.setActiveItem(null);

package/dist/molecules/NavigationMenuList.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
 
     interface Props {
         className?: string;
@@ -14,10 +11,6 @@
         children,
         ...restProps
     }: Props = $props();
-
-    const context = getContext<{
-        isMobile: boolean;
-    }>(NAVIGATION_MENU_CONTEXT);
 </script>
 
 <ul

package/dist/molecules/NavigationMenuTrigger.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -19,11 +21,9 @@
 
     let triggerElement = $state<HTMLElement | null>(null);
 
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 

package/dist/molecules/SlideUp.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+    import {
+        focusFirstElement,
+        returnFocus,
+        saveFocus,
+        trapFocus,
+    } from "../../routes/lib/focus-utils.js";
+
     interface Props {
         isOpen?: boolean;
         title?: string;
@@ -13,13 +20,35 @@
         ...restProps
     } = $props<Props & { children?: any }>();
 
+    let slideUpContainer = $state<HTMLDivElement>();
+    let cleanupFocusTrap: (() => void) | null = null;
+
     function closeSlideUp(event?: Event) {
         isOpen = false;
+        if (cleanupFocusTrap) {
+            cleanupFocusTrap();
+            cleanupFocusTrap = null;
+        }
+        returnFocus();
         if (onclick && event) {
             (onclick as (event: Event) => void)(event);
         }
     }
 
+    $effect(() => {
+        const container = slideUpContainer;
+        if (isOpen && container) {
+            saveFocus();
+            cleanupFocusTrap = trapFocus(container);
+            setTimeout(() => {
+                focusFirstElement(container);
+            }, 0);
+        } else if (!isOpen && cleanupFocusTrap) {
+            cleanupFocusTrap();
+            cleanupFocusTrap = null;
+        }
+    });
+
     function handleBackdropClick(event: Event) {
         if (event.target === event.currentTarget) {
             closeSlideUp(event);
@@ -48,6 +77,7 @@
         tabindex="-1"
     >
         <div
+            bind:this={slideUpContainer}
             class="fixed bottom-0 left-0 right-0 bg-card rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
         >
             {#if title}