zabi-components 5.0.14 → 5.0.17

package/dist/atoms/Tooltip.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { onMount } from "svelte";
+
     interface Props {
         content?: string;
         placement?: "top" | "bottom" | "left" | "right";
@@ -14,22 +16,82 @@
         children,
         ...restProps
     }: Props & { children?: any } = $props();
+
+    let triggerId = `tooltip-trigger-${Math.random().toString(36).substr(2, 9)}`;
+    let tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+    let isVisible = $state(false);
+    let triggerElement: HTMLElement | null = $state(null);
+
+    // Handle keyboard events
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape" && isVisible) {
+            isVisible = false;
+            triggerElement?.focus();
+        }
+    }
+
+    // Handle focus events for accessibility
+    function handleFocus() {
+        if (!disabled && content) {
+            isVisible = true;
+        }
+    }
+
+    function handleBlur() {
+        // Delay hiding to allow clicking on tooltip content if needed
+        setTimeout(() => {
+            isVisible = false;
+        }, 100);
+    }
+
+    function handleMouseEnter() {
+        if (!disabled && content) {
+            if (delay > 0) {
+                setTimeout(() => {
+                    isVisible = true;
+                }, delay);
+            } else {
+                isVisible = true;
+            }
+        }
+    }
+
+    function handleMouseLeave() {
+        isVisible = false;
+    }
+
+    onMount(() => {
+        if (typeof window !== "undefined") {
+            window.addEventListener("keydown", handleKeydown);
+            return () => {
+                window.removeEventListener("keydown", handleKeydown);
+            };
+        }
+    });
 </script>
 
 <div
-    class="tooltip-container group relative inline-block"
+    class="tooltip-container relative inline-block"
     data-placement={placement}
-    data-delay={delay}
     data-disabled={disabled}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    onfocusin={handleFocus}
+    onfocusout={handleBlur}
     {...restProps}
 >
-    {@render children?.()}
+    <div bind:this={triggerElement} id={triggerId} aria-describedby={isVisible ? tooltipId : undefined}>
+        {@render children?.()}
+    </div>
 
     {#if content && !disabled}
         <div
-            class="tooltip group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible"
+            id={tooltipId}
+            class="tooltip"
             role="tooltip"
-            aria-hidden="true"
+            aria-hidden={!isVisible}
+            data-visible={isVisible}
+            data-placement={placement}
         >
             {content}
         </div>
@@ -48,7 +110,7 @@
         --tooltip-gap: 0.5rem;
         --tooltip-arrow-size: 4px;
         --tooltip-transition: opacity 0.2s ease-in-out,
-            visibility 0.2s ease-in-out;
+            visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
     }
 
     .tooltip-container {
@@ -58,7 +120,7 @@
 
     .tooltip {
         position: absolute;
-        z-index: 50;
+        z-index: var(--z-tooltip, 1070);
         padding: var(--tooltip-padding);
         background-color: var(--tooltip-bg);
         color: var(--tooltip-color);
@@ -72,41 +134,61 @@
         visibility: hidden;
         transition: var(--tooltip-transition);
         pointer-events: none;
-        /* Use logical properties for better internationalization */
-        inset-inline-start: 50%;
-        inset-block-start: 50%;
-        transform: translate(-50%, -50%);
     }
 
     /* Simplified positioning using CSS custom properties and logical properties */
     .tooltip-container[data-placement="top"] .tooltip {
         inset-block-end: 100%;
         inset-inline-start: 50%;
-        transform: translateX(-50%);
+        transform: translateX(-50%) translateY(4px) scale(0.95);
         margin-block-end: var(--tooltip-gap);
     }
 
+    .tooltip-container[data-placement="top"] .tooltip[data-visible="true"] {
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+
     .tooltip-container[data-placement="bottom"] .tooltip {
         inset-block-start: 100%;
         inset-inline-start: 50%;
-        transform: translateX(-50%);
+        transform: translateX(-50%) translateY(-4px) scale(0.95);
         margin-block-start: var(--tooltip-gap);
     }
 
+    .tooltip-container[data-placement="bottom"] .tooltip[data-visible="true"] {
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+
     .tooltip-container[data-placement="left"] .tooltip {
         inset-inline-end: 100%;
         inset-block-start: 50%;
-        transform: translateY(-50%);
+        transform: translateY(-50%) translateX(4px) scale(0.95);
         margin-inline-end: var(--tooltip-gap);
     }
 
+    .tooltip-container[data-placement="left"] .tooltip[data-visible="true"] {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(-50%) translateX(0) scale(1);
+    }
+
     .tooltip-container[data-placement="right"] .tooltip {
         inset-inline-start: 100%;
         inset-block-start: 50%;
-        transform: translateY(-50%);
+        transform: translateY(-50%) translateX(-4px) scale(0.95);
         margin-inline-start: var(--tooltip-gap);
     }
 
+    .tooltip-container[data-placement="right"] .tooltip[data-visible="true"] {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(-50%) translateX(0) scale(1);
+    }
+
     /* Modern arrow implementation using CSS clip-path for better performance */
     .tooltip::before {
         content: "";
@@ -134,14 +216,14 @@
         inset-inline-start: 100%;
         inset-block-start: 50%;
         transform: translateY(-50%);
-        clip-path: polygon(0 50%, 100% 0, 100% 100%);
+        clip-path: polygon(0 0, 100% 50%, 0 100%);
     }
 
     .tooltip-container[data-placement="right"] .tooltip::before {
         inset-inline-end: 100%;
         inset-block-start: 50%;
         transform: translateY(-50%);
-        clip-path: polygon(0 0, 100% 50%, 0 100%);
+        clip-path: polygon(0 50%, 100% 0, 100% 100%);
     }
 
     /* Delay support using CSS custom properties */
@@ -155,10 +237,14 @@
             --tooltip-max-width: calc(100vw - 2rem);
             inset-inline-start: 50% !important;
             inset-inline-end: auto !important;
-            transform: translateX(-50%) !important;
+            transform: translateX(-50%) scale(0.95) !important;
             margin: var(--tooltip-gap) 0 !important;
         }
 
+        .tooltip[data-visible="true"] {
+            transform: translateX(-50%) scale(1) !important;
+        }
+
         .tooltip::before {
             display: none;
         }
@@ -171,18 +257,41 @@
         }
     }
 
+    /* Use CSS color-scheme for better dark mode support */
+    .dark :root {
+        --tooltip-bg: #374151;
+    }
+
     /* High contrast mode support */
     @media (prefers-contrast: high) {
         :root {
             --tooltip-bg: #000000;
             --tooltip-color: #ffffff;
+            --tooltip-padding: 0.75rem 1rem;
         }
     }
 
     /* Reduced motion support */
     @media (prefers-reduced-motion: reduce) {
         .tooltip {
-            transition: none;
+            transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
+        }
+
+        .tooltip-container[data-placement="top"] .tooltip[data-visible="true"],
+        .tooltip-container[data-placement="bottom"] .tooltip[data-visible="true"] {
+            transform: translateX(-50%) !important;
+        }
+
+        .tooltip-container[data-placement="left"] .tooltip[data-visible="true"],
+        .tooltip-container[data-placement="right"] .tooltip[data-visible="true"] {
+            transform: translateY(-50%) !important;
         }
     }
+
+    /* Focus-visible for better keyboard navigation */
+    .tooltip-container:focus-visible {
+        outline: 2px solid var(--color-focus, #8fa8ff);
+        outline-offset: 2px;
+        border-radius: var(--tooltip-radius);
+    }
 </style>

package/dist/molecules/Alert.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
     interface Props {
-        variant?: "info" | "success" | "warning" | "error" | "neutral" | "energetic";
+        variant?:
+            | "info"
+            | "success"
+            | "warning"
+            | "error"
+            | "neutral"
+            | "energetic";
         title?: string;
         message?: string;
         closable?: boolean;
@@ -27,12 +33,12 @@
     }
 
     let alertClasses = $derived({
-        info: "bg-surface-level-1 text-info border border-info",
-        success: "bg-surface-level-1 text-success border border-success",
-        warning: "bg-surface-level-1 text-warning border border-warning",
-        error: "bg-surface-level-1 text-error border border-error",
-        neutral: "bg-surface-level-1 text-neutral border border-neutral",
-        energetic: "bg-surface-level-1 text-energetic border border-energetic",
+        info: "text-info border border-info",
+        success: "text-success border border-success",
+        warning: "text-warning border border-warning",
+        error: "text-error border border-error",
+        neutral: "text-neutral border border-neutral",
+        energetic: "text-energetic border border-energetic",
     });
 
     let alertRole = $derived(

package/dist/molecules/ComponentDemo.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import CodeBlock from "../atoms/CodeBlock.svelte";
+    import Card from "../atoms/Card.svelte";
 
     interface Props {
         title: string;
@@ -22,75 +23,67 @@
     let showCode = $state(false);
 </script>
 
-<div
-    class="component-demo bg-surface-level-0 border border-border rounded-lg overflow-hidden {className}"
-    {...restProps}
->
-    <!-- Header -->
-    <div class="px-6 py-4 border-b border-border bg-surface-level-1">
-        <div class="flex items-center justify-between">
-            <div>
-                <h3 class="text-lg font-semibold text-text">{title}</h3>
-                {#if description}
-                    <p class="text-sm text-text-secondary mt-1">
-                        {description}
-                    </p>
-                {/if}
-            </div>
-            <button
-                onclick={() => (showCode = !showCode)}
-                class="flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text hover:bg-surface-level-0 rounded-md transition-colors duration-200"
-                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>
-        </div>
-    </div>
+<div class="relative">
+    <Card
+        size="lg"
+        fullWidth={true}
+        {title}
+        {description}
+        className="overflow-hidden {className}"
+        {...restProps}
+    >
+        <!-- Toggle Button positioned absolutely -->
+        <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"}
+        >
+            {#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>
 
-    <!-- Content -->
-    <div class="p-6">
+        <!-- Content -->
         {#if showCode}
             <CodeBlock {code} {language} />
         {:else}
-            <div class="min-h-[100px] flex items-center justify-center">
+            <div class="min-h-[100px] flex items-center justify-center w-full">
                 {@render children?.()}
             </div>
         {/if}
-    </div>
+    </Card>
 </div>

package/dist/molecules/Dropdown.svelte

@@ -42,7 +42,7 @@
     const dropdownContentClasses = $derived(() => {
         return `
             ${placementClasses()}
-            bg-brand-100
+            bg-input
             rounded-lg
             shadow-lg
             border-0
@@ -51,7 +51,9 @@
             duration-200
             ease-in-out
             ${transformClasses()}
-        `.trim().replace(/\s+/g, " ");
+        `
+            .trim()
+            .replace(/\s+/g, " ");
     });
 </script>
 

package/dist/molecules/ImageUpload.svelte

@@ -87,7 +87,7 @@
     {:else}
         <!-- Empty State -->
         <div
-            class="border-2 border-dashed border-stone-200 rounded-lg p-6 text-center hover:border-brand-500 transition-colors {disabled
+            class="border-2 border-dashed border-base-200 rounded-lg p-6 text-center hover:border-brand-500 transition-colors {disabled
                 ? 'cursor-not-allowed opacity-50'
                 : 'cursor-pointer'}"
             onclick={triggerFileSelect}
@@ -99,7 +99,7 @@
         >
             <div class="space-y-3">
                 <div
-                    class="w-12 h-12 mx-auto bg-surface-level-1 rounded-lg flex items-center justify-center"
+                    class="w-12 h-12 mx-auto bg-base-100 rounded-lg flex items-center justify-center"
                 >
                     <Image size={24} class="text-description" />
                 </div>

package/dist/molecules/Modal.svelte

@@ -63,7 +63,7 @@
         tabindex="-1"
     >
         <div
-            class="bg-surface-elevated 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"
+            class="bg-base-50 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"
         >
             <!-- Header -->
             {#if title}
@@ -77,7 +77,7 @@
                     <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-surface-hover"
+                        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"
                     >
                         ×

package/dist/molecules/SlideUp.svelte

@@ -48,7 +48,7 @@
         tabindex="-1"
     >
         <div
-            class="fixed bottom-0 left-0 right-0 bg-surface-elevated 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 bg-base-50 rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
         >
             <!-- Header -->
             {#if title}
@@ -62,7 +62,7 @@
                     <button
                         type="button"
                         onclick={closeSlideUp}
-                        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-surface-hover"
+                        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"
                     >
                         ×

package/dist/molecules/Tabs.svelte

@@ -37,7 +37,7 @@
 <div class="tabs-container">
     <!-- Tab List -->
     <div
-        class="flex border-b border-gray-200"
+        class="flex border-b border-base-200"
         role="tablist"
         tabindex="0"
         onkeydown={handleKeydown}
@@ -51,7 +51,7 @@
                     ? variant === 'pills'
                         ? 'bg-brand-100 text-brand-700 border-brand-500'
                         : 'border-brand-500 text-body'
-                    : 'border-transparent text-description hover:text-body hover:border-gray-300'}"
+                    : 'border-transparent text-description hover:text-body hover:border-base-300'}"
                 onclick={() => selectTab(tab.id)}
                 disabled={tab.disabled}
                 aria-selected={activeTab === tab.id}

package/dist/organisms/Navbar.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <nav
-    class="bg-surface-elevated border-b border-border sticky top-0 z-50 {className}"
+    class="bg-base-50 border-b border-border sticky top-0 z-50 {className}"
     {...restProps}
 >
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

package/dist/routes/lib/variant-utils.ts

@@ -9,7 +9,7 @@ export type Variant = 'default' | 'success' | 'warning' | 'error' | 'info';
  */
 export function getInputVariantClasses(variant: Variant): string {
     const variantMap: Record<Variant, string> = {
-        default: 'border-gray-300 focus:border-brand-500 focus:ring-brand-500',
+        default: 'border-base-300 focus:border-brand-500 focus:ring-brand-500',
         success: 'border-green-300 focus:border-green-500 focus:ring-green-500',
         warning: 'border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500',
         error: 'border-red-300 focus:border-red-500 focus:ring-red-500',
@@ -24,7 +24,7 @@ export function getInputVariantClasses(variant: Variant): string {
  */
 export function getCardVariantClasses(variant: Variant): string {
     const variantMap: Record<Variant, string> = {
-        default: 'border-gray-200 bg-white',
+        default: 'border-base-200 bg-white',
         success: 'border-green-200 bg-green-50',
         warning: 'border-yellow-200 bg-yellow-50',
         error: 'border-red-200 bg-red-50',
@@ -40,8 +40,8 @@ export function getCardVariantClasses(variant: Variant): string {
 export function getVariantClasses(variant: Variant, type: 'border' | 'text' | 'bg'): string {
     const variantMap: Record<Variant, Record<'border' | 'text' | 'bg', string>> = {
         default: {
-            border: 'border-gray-300',
-            text: 'text-gray-900',
+            border: 'border-base-300',
+            text: 'text-base-900',
             bg: 'bg-white'
         },
         success: {