zabi-components 5.0.21 → 6.0.0

package/dist/molecules/Alert.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ExtendedSemanticVariant } from "../../types/variants.js";
+    type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
         variant?: ExtendedSemanticVariant;
@@ -27,6 +28,10 @@
         }
     }
 
+    const visualVariant = $derived<AlertVisualVariant>(
+        variant === "default" ? "info" : variant,
+    );
+
     let alertClasses = $derived({
         info: "text-info border border-info",
         success: "text-success border border-success",
@@ -64,10 +69,10 @@
 
 <div
     class="relative rounded-md p-4 border {alertClasses[
-        variant
+        visualVariant
     ]} transition-all duration-200 motion-reduce:transition-none {className}"
     role={alertRole}
-    aria-live={variant === "success" || variant === "info"
+    aria-live={visualVariant === "success" || visualVariant === "info"
         ? "polite"
         : "assertive"}
     aria-atomic="true"
@@ -76,7 +81,7 @@
     {#if closable}
         <button
             onclick={handleDismiss}
-            class="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full text-description hover:text-body transition-colors duration-200 motion-reduce:transition-none group focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2"
+            class="group absolute right-2 top-2 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-description transition-colors duration-200 hover:text-body motion-reduce:transition-none focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2"
             aria-label="Dismiss alert"
             type="button"
         >
@@ -98,7 +103,7 @@
 
     <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
         <div class="shrink-0 mt-0.5">
-            {@html iconSvg[variant]}
+            {@html iconSvg[visualVariant]}
         </div>
 
         <div class="flex-1 min-w-0">

package/dist/molecules/ComponentDemo.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import CodeBlock from "../atoms/CodeBlock.svelte";
     import Card from "../atoms/Card.svelte";
+    import CardHeader from "../atoms/CardHeader.svelte";
+    import CardContent from "../atoms/CardContent.svelte";
 
     interface Props {
         title: string;
@@ -27,61 +29,62 @@
     <Card
         size="lg"
         fullWidth={true}
-        {title}
-        {description}
         className="overflow-hidden {className}"
         {...restProps}
     >
-        <button
-            onclick={() => (showCode = !showCode)}
-            class="absolute top-8 right-8 flex items-center gap-2 px-3 py-1.5 text-sm text-description hover:text-body hover:bg-base-50 rounded-md transition-colors duration-200 z-10"
-            aria-label={showCode ? "Show preview" : "Show code"}
-        >
+        <CardHeader {title} {description} />
+        <CardContent>
+            <button
+                onclick={() => (showCode = !showCode)}
+                class="absolute top-8 right-8 z-10 flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-sm text-description transition-colors duration-200 hover:bg-base-50 hover:text-body"
+                aria-label={showCode ? "Show preview" : "Show code"}
+            >
+                {#if showCode}
+                    <svg
+                        class="w-4 h-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                        />
+                    </svg>
+                    Preview
+                {:else}
+                    <svg
+                        class="w-4 h-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+                        />
+                    </svg>
+                    Code
+                {/if}
+            </button>
+
             {#if showCode}
-                <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                    />
-                </svg>
-                Preview
+                <CodeBlock {code} {language} />
             {:else}
-                <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-                    />
-                </svg>
-                Code
+                <div class="min-h-[100px] flex items-center justify-center w-full">
+                    {@render children?.()}
+                </div>
             {/if}
-        </button>
-
-        {#if showCode}
-            <CodeBlock {code} {language} />
-        {:else}
-            <div class="min-h-[100px] flex items-center justify-center w-full">
-                {@render children?.()}
-            </div>
-        {/if}
+        </CardContent>
     </Card>
 </div>

package/dist/molecules/ContactForm.svelte

@@ -5,6 +5,8 @@
     import Checkbox from "../atoms/Checkbox.svelte";
     import Button from "../atoms/Button.svelte";
     import Card from "../atoms/Card.svelte";
+    import CardHeader from "../atoms/CardHeader.svelte";
+    import CardContent from "../atoms/CardContent.svelte";
     import type { ContactFormData } from "../../types/page.types";
 
     interface Props {
@@ -14,9 +16,8 @@
 
     let {
         className = "",
-        children,
-        ...restProps
-    } = $props<Props & { children?: any }>();
+        onsubmit,
+    }: Props = $props();
 
     let formData = $state<ContactFormData>({
         name: "",
@@ -25,83 +26,119 @@
         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="space-y-4">
-            <Input
-                type="text"
-                name="name"
-                label="Name"
-                placeholder="Enter your name"
-                value={formData.name}
-                oninput={(e) =>
-                    (formData.name = (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)}
-            />
-            <Input
-                type="email"
-                name="email"
-                label="Email"
-                placeholder="Enter your email"
-                value={formData.email}
-                oninput={(e) =>
-                    (formData.email = (e.target as HTMLInputElement).value)}
-            />
-            <Textarea
-                name="message"
-                label="Message"
-                placeholder="Enter your message"
-                rows={4}
-                value={formData.message}
-                oninput={(e) =>
-                    (formData.message = (
-                        e.target as HTMLTextAreaElement
-                    ).value)}
-            />
-            <Checkbox
-                name="subscribe"
-                label="Subscribe to updates"
-                checked={formData.subscribe}
-                onchange={(e) =>
-                    (formData.subscribe = (
-                        e.target as HTMLInputElement
-                    ).checked)}
-            />
-        </div>
-        <div class="pt-4">
-            <Button type="submit" variant="primary" size="md">
-                Send Message
-            </Button>
-        </div>
-    </Form>
-</Card>
+<div class={className}>
+    <Card size="md" fullWidth={true}>
+        <CardHeader title="Get in Touch" />
+        <CardContent>
+            <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"
+                        name="name"
+                        label="Name"
+                        placeholder="Enter your name"
+                        value={formData.name}
+                        oninput={(e) =>
+                            (formData.name = (e.target as HTMLInputElement).value)}
+                        variant={fieldErrors.name ? "error" : "default"}
+                        message={fieldErrors.name || ""}
+                    />
+                    <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"
+                        label="Message"
+                        placeholder="Enter your message"
+                        rows={4}
+                        value={formData.message}
+                        oninput={(e) =>
+                            (formData.message = (
+                                e.target as HTMLTextAreaElement
+                            ).value)}
+                        variant={fieldErrors.message ? "error" : "default"}
+                        message={fieldErrors.message || ""}
+                    />
+                    <Checkbox
+                        name="subscribe"
+                        label="Subscribe to updates"
+                        checked={formData.subscribe}
+                        onchange={(e) =>
+                            (formData.subscribe = (
+                                e.target as HTMLInputElement
+                            ).checked)}
+                    />
+                </div>
+                <div class="pt-4">
+                    <Button type="submit" variant="primary" size="md">
+                        Send Message
+                    </Button>
+                </div>
+            </Form>
+        </CardContent>
+    </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);
@@ -181,7 +182,8 @@
             bg-input
             rounded-lg
             shadow-lg
-            border-0
+            border
+            border-input-border
             py-2
             transition-all
             duration-200

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">
@@ -60,7 +75,7 @@
                 class="w-full h-32 min-w-64 object-cover rounded-2xl border-0"
             />
             <div
-                class="absolute inset-0 bg-input min-w-64 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl flex items-center justify-center"
+                class="absolute inset-0 border border-input-border bg-input min-w-64 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl flex items-center justify-center"
             >
                 <div class="flex gap-2">
                     <Button
@@ -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();
@@ -85,7 +86,7 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-overlay flex items-end md:items-center justify-center p-0 md:p-4 z-modal"
+        class="fixed inset-0 z-modal flex cursor-pointer items-end justify-center bg-overlay p-0 md:items-center md:p-4"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
@@ -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"
+            class="flex max-h-[90vh] min-w-[320px] cursor-default flex-col overflow-y-auto rounded-t-3xl bg-card p-0 shadow-xl animate-[slideUp_0.3s_ease-out] md:animate-none md:rounded-3xl {sizeClasses}"
         >
-            {#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}