zabi-components 5.0.22 → 7.0.0

package/dist/molecules/Alert.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ExtendedSemanticVariant } from "../../types/variants.js";
+    import type { ExtendedSemanticVariant } from "../types/variants.js";
     type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
@@ -44,28 +44,55 @@
     let alertRole = $derived(
         variant === "success" || variant === "info" ? "status" : "alert",
     );
+</script>
 
-    let iconSvg = $derived({
-        info: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
-        </svg>`,
-        success: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-        </svg>`,
-        warning: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
-        </svg>`,
-        error: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-        </svg>`,
-        neutral: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 9a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
-        </svg>`,
-        energetic: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+{#snippet icon()}
+    {#if visualVariant === "info"}
+        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path
+                fill-rule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    {:else if visualVariant === "success"}
+        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    {:else if visualVariant === "warning"}
+        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path
+                fill-rule="evenodd"
+                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    {:else if visualVariant === "error"}
+        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    {:else if visualVariant === "neutral"}
+        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path
+                fill-rule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 9a1 1 0 100 2 1 1 0 000-2z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    {:else}
+        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
             <path d="M11 3L4 14h6l-1 7 7-11h-6l1-7z" />
-        </svg>`,
-    });
-</script>
+        </svg>
+    {/if}
+{/snippet}
 
 <div
     class="relative rounded-md p-4 border {alertClasses[
@@ -81,7 +108,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-ring"
             aria-label="Dismiss alert"
             type="button"
         >
@@ -103,7 +130,7 @@
 
     <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
         <div class="shrink-0 mt-0.5">
-            {@html iconSvg[visualVariant]}
+            {@render icon()}
         </div>
 
         <div class="flex-1 min-w-0">

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

@@ -1,4 +1,4 @@
-import type { ExtendedSemanticVariant } from "../../types/variants.js";
+import type { ExtendedSemanticVariant } from "../types/variants.js";
 interface Props {
     variant?: ExtendedSemanticVariant;
     title?: string;

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}"
+        className="overflow-visible {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] w-full min-w-0 py-4">
+                    {@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,7 +5,9 @@
     import Checkbox from "../atoms/Checkbox.svelte";
     import Button from "../atoms/Button.svelte";
     import Card from "../atoms/Card.svelte";
-    import type { ContactFormData } from "../../types/page.types";
+    import CardHeader from "../atoms/CardHeader.svelte";
+    import CardContent from "../atoms/CardContent.svelte";
+    import type { ContactFormData } from "../types/page.types";
 
     interface Props {
         className?: string;
@@ -71,69 +73,72 @@
 </script>
 
 <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"
-                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>
+    <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>