zabi-components 5.0.22 → 6.0.0

package/dist/lib/showcase/components-showcase-constants.d.ts

@@ -0,0 +1,63 @@
+export declare const categories: {
+    id: string;
+    label: string;
+    description: string;
+}[];
+export declare const sampleCode = "function greet(name) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet('World'));";
+export declare const selectOptions: {
+    value: string;
+    label: string;
+}[];
+export declare const docsListItems: ({
+    id: string;
+    label: string;
+    description: string;
+    href: string;
+    disabled?: undefined;
+} | {
+    id: string;
+    label: string;
+    description: string;
+    href?: undefined;
+    disabled?: undefined;
+} | {
+    id: string;
+    label: string;
+    description: string;
+    href: string;
+    disabled: boolean;
+})[];
+export declare const sidebarNavItems: ({
+    id: string;
+    label: string;
+    href: string;
+    icon: import("svelte").Component<import("@lucide/svelte").IconProps, {}, "">;
+    badgeCount?: undefined;
+    group?: undefined;
+} | {
+    id: string;
+    label: string;
+    href: string;
+    icon: import("svelte").Component<import("@lucide/svelte").IconProps, {}, "">;
+    badgeCount: number;
+    group?: undefined;
+} | {
+    id: string;
+    label: string;
+    href: string;
+    icon: import("svelte").Component<import("@lucide/svelte").IconProps, {}, "">;
+    group: "secondary";
+    badgeCount?: undefined;
+})[];
+export declare const sidebarProjectItems: ({
+    id: string;
+    label: string;
+    description: string;
+    badgeText: string;
+} | {
+    id: string;
+    label: string;
+    description: string;
+    badgeText?: undefined;
+})[];
+//# sourceMappingURL=components-showcase-constants.d.ts.map

package/dist/lib/showcase/components-showcase-constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-showcase-constants.d.ts","sourceRoot":"","sources":["../../../src/lib/showcase/components-showcase-constants.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU;;;;GAiBtB,CAAC;AAEF,eAAO,MAAM,UAAU,2FAIM,CAAC;AAE9B,eAAO,MAAM,aAAa;;;GAGvB,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;IAyBzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;IAmB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;IAuB/B,CAAC"}

package/dist/lib/showcase/docs-sidebar-helpers.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from "svelte";
+type SidebarNavIcon = Component<{
+    size?: number;
+    class?: string;
+}>;
+/**
+ * Icon for a documentation sidebar category row.
+ */
+export declare function getDocsCategoryIcon(categoryId: string): SidebarNavIcon;
+/**
+ * Icon for a documentation sidebar component row.
+ */
+export declare function getDocsComponentIcon(componentName: string, componentCategory: string): SidebarNavIcon;
+export {};
+//# sourceMappingURL=docs-sidebar-helpers.d.ts.map

package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-sidebar-helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/showcase/docs-sidebar-helpers.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,KAAK,cAAc,GAAG,SAAS,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEnE;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,CAKtE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAChC,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,MAAM,GAC1B,cAAc,CAgBhB"}

package/dist/molecules/Alert.svelte

@@ -81,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"
         >

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 {
@@ -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>

package/dist/molecules/Dropdown.svelte

@@ -182,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

@@ -75,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

package/dist/molecules/Modal.svelte

@@ -86,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"
@@ -96,7 +96,7 @@
     >
         <div
             bind:this={modalContainer}
-            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}"
         >
             <Card variant="default" fullWidth={false}>
                 {#if title || description}

package/dist/molecules/NavigationMenuContent.svelte

@@ -71,7 +71,7 @@
 {#if isActive}
     <div
         bind:this={contentElement}
-        class="absolute left-0 top-full mt-2 bg-input rounded-lg shadow-lg border border-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
+        class="absolute left-0 top-full mt-2 bg-input rounded-lg shadow-lg border border-input-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
         role="menu"
         onkeydown={handleKeydown}
         data-navigation-menu-content

package/dist/molecules/NavigationMenuLink.svelte

@@ -30,7 +30,7 @@
     }
 
     const linkClasses =
-        "block px-4 py-2 text-sm text-headline hover:bg-base-100 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 no-underline {className}";
+        "block cursor-pointer rounded-md px-4 py-2 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {className}";
 </script>
 
 {#if asChild}

package/dist/molecules/NavigationMenuTrigger.svelte

@@ -19,8 +19,6 @@
         ...restProps
     }: Props = $props();
 
-    let triggerElement = $state<HTMLElement | null>(null);
-
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
     );
@@ -52,9 +50,8 @@
 </script>
 
 <button
-    bind:this={triggerElement}
     type="button"
-    class="inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-headline bg-transparent hover:bg-base-100 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 {className}"
+    class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-transparent px-4 py-2 text-sm font-medium text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover data-[active=true]:bg-nav-menu-active data-[active=true]:text-nav-menu-item-active focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {className}"
     aria-expanded={isActive ? 'true' : 'false'}
     aria-haspopup="true"
     onclick={handleClick}

package/dist/molecules/Section.svelte

@@ -40,7 +40,7 @@
         ...restProps
     }: Props = $props();
 
-    const sizeClasses = $derived(() => {
+    const sizeClasses = $derived.by(() => {
         switch (size) {
             case "sm":
                 return "text-sm";
@@ -51,7 +51,7 @@
         }
     });
 
-    const maxWidthClasses = $derived(() => {
+    const maxWidthClasses = $derived.by(() => {
         switch (maxWidth) {
             case "sm":
                 return "max-w-screen-sm";
@@ -72,7 +72,7 @@
         }
     });
 
-    const backgroundClasses = $derived(() => {
+    const backgroundClasses = $derived.by(() => {
         switch (background) {
             case "muted":
                 return "bg-base-50";
@@ -85,7 +85,7 @@
         }
     });
 
-    const paddingClasses = $derived(() => {
+    const paddingClasses = $derived.by(() => {
         switch (padding) {
             case "none":
                 return "";
@@ -102,14 +102,14 @@
         }
     });
 
-    const containerClasses = $derived(() => {
+    const containerClasses = $derived.by(() => {
         const base = "w-full";
-        const maxWidthClass = maxWidthClasses();
+        const maxWidthClass = maxWidthClasses;
         const centeredClass = centered ? "mx-auto" : "";
         return `${base} ${maxWidthClass} ${centeredClass}`.trim();
     });
 
-    const contentClasses = $derived(() => {
+    const contentClasses = $derived.by(() => {
         const base = "px-4 sm:px-6 lg:px-8";
         const centeredClass = centered ? "text-center" : "";
         return `${base} ${centeredClass}`.trim();
@@ -117,18 +117,18 @@
 </script>
 
 <section
-    class="section {backgroundClasses()} {paddingClasses()} {className}"
+    class="section {backgroundClasses} {paddingClasses} {className}"
     {...restProps}
 >
-    <div class={containerClasses()}>
-        <div class={contentClasses()}>
+    <div class={containerClasses}>
+        <div class={contentClasses}>
             {#if title}
                 <div class="mb-6 {centered ? 'mx-auto' : ''}">
                     <Heading level={headingLevel} text={title} />
                     {#if description}
                         <p
-                            class="mt-4 {sizeClasses()} text-description {centered
-                                ? 'mx-auto max-w-2xl'
+                            class="mt-4 {sizeClasses} text-description {centered
+                                ? 'mx-auto'
                                 : ''}"
                         >
                             {description}

package/dist/molecules/SlideUp.svelte

@@ -68,7 +68,7 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-overlay z-modal"
+        class="fixed inset-0 z-modal cursor-pointer bg-overlay"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
@@ -78,7 +78,7 @@
     >
         <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"
+            class="fixed bottom-0 left-0 right-0 z-modal flex max-h-[90vh] cursor-default flex-col overflow-y-auto rounded-t-3xl bg-card shadow-xl animate-[slideUp_0.3s_ease-out]"
         >
             {#if title}
                 <div class="flex items-center justify-between px-6 pt-6 pb-4">

package/dist/molecules/Tabs.svelte

@@ -105,12 +105,12 @@
                 type="button"
                 role="tab"
                 id={getTabId(tab.id)}
-                class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab ===
+                class="cursor-pointer border-b-2 px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed {activeTab ===
                 tab.id
                     ? variant === 'pills'
-                        ? 'bg-brand-100 text-brand-700 border-brand-500'
+                        ? 'border-brand-500 bg-brand-100 text-brand-700'
                         : 'border-brand-500 text-body'
-                    : 'border-transparent text-description hover:text-body hover:border-base-300'}"
+                    : 'border-transparent text-description hover:border-base-300 hover:text-body'}"
                 onclick={() => selectTab(tab.id)}
                 disabled={tab.disabled}
                 aria-selected={activeTab === tab.id}