zabi-components 5.0.15 → 5.0.18

package/dist/atoms/Select.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
-    import { ChevronDown, CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
+    import {
+        ChevronDown,
+        CheckCircle,
+        AlertTriangle,
+        AlertCircle,
+    } from "@lucide/svelte";
 
-    // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -42,31 +46,28 @@
 
     let isOpen = $state(false);
 
-    // Size classes matching M3 design specifications
     const sizeClass = $derived(() => {
         if (size === "sm") {
             return {
                 padding: "px-4 py-2",
                 text: "text-sm",
-                leading: "leading-5"
+                leading: "leading-5",
             };
         } else if (size === "lg") {
             return {
                 padding: "px-4 py-3",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         } else {
-            // default md
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         }
     });
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
             ? "border-success focus:border-success focus:ring-success"
@@ -77,21 +78,18 @@
                 : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
     });
 
-    // Trigger button classes matching M3 design
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-brand-100 rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
+            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
 
-    // Label classes using semantic text colors
     const labelClasses = $derived(
         () => "block text-sm font-medium text-label mb-1",
     );
 
-    // Message classes based on variant
     const messageClasses = $derived(() => {
         if (variant === "error") {
             return "text-error text-sm mt-1 flex items-center gap-1.5";
@@ -103,7 +101,6 @@
         return "text-description text-sm mt-1 flex items-center gap-1.5";
     });
 
-    // Get icon component based on variant
     const getIcon = $derived(() => {
         if (variant === "error") return AlertCircle;
         if (variant === "success") return CheckCircle;
@@ -111,19 +108,18 @@
         return null;
     });
 
-    // Generate unique ID - SSR safe
     const selectId = generateId("select");
 
-    // Get selected option label
     const selectedLabel = $derived(() => {
         if (isEmpty()) {
             return String(placeholder || "Select an option");
         }
         const selected = options.find((opt) => opt.value === value);
-        return selected?.label ? String(selected.label) : String(placeholder || "Select an option");
+        return selected?.label
+            ? String(selected.label)
+            : String(placeholder || "Select an option");
     });
 
-    // Check if value is empty
     const isEmpty = $derived(() => {
         return value === undefined || value === null || value === "";
     });
@@ -133,12 +129,11 @@
         value = optionValue;
         isOpen = false;
 
-        // Create a synthetic event for onchange
         if (onchange) {
             const syntheticEvent = new Event("change", { bubbles: true });
             Object.defineProperty(syntheticEvent, "target", {
                 value: { value: optionValue },
-                enumerable: true
+                enumerable: true,
             });
             (onchange as (event: Event) => void)(syntheticEvent);
         }
@@ -150,14 +145,15 @@
         isOpen = !isOpen;
     }
 
-    // Close dropdown when clicking outside
     function handleClickOutside(event: MouseEvent) {
-        if (isOpen && !(event.target as HTMLElement).closest('.select-container')) {
+        if (
+            isOpen &&
+            !(event.target as HTMLElement).closest(".select-container")
+        ) {
             isOpen = false;
         }
     }
 
-    // Handle escape key
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === "Escape" && isOpen) {
             isOpen = false;
@@ -172,7 +168,7 @@
         <label for={selectId} class={labelClasses()}>{label}</label>
     {/if}
 
-    <Dropdown isOpen={isOpen} placement="bottom-start">
+    <Dropdown {isOpen} placement="bottom-start">
         {#snippet trigger()}
             <button
                 type="button"
@@ -184,12 +180,21 @@
                 aria-expanded={isOpen}
                 aria-describedby={message ? `${selectId}-message` : undefined}
             >
-                <span class="text-left flex-1 {isEmpty() ? 'text-description' : 'text-body'}">
-                    {isEmpty() ? placeholder : (options.find((opt) => opt.value === value)?.label || placeholder)}
+                <span
+                    class="text-left flex-1 {isEmpty()
+                        ? 'text-description'
+                        : 'text-body'}"
+                >
+                    {isEmpty()
+                        ? placeholder
+                        : options.find((opt) => opt.value === value)?.label ||
+                          placeholder}
                 </span>
                 <ChevronDown
                     size={20}
-                    class="text-description transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
+                    class="text-description transition-transform duration-200 {isOpen
+                        ? 'rotate-180'
+                        : ''}"
                 />
             </button>
         {/snippet}
@@ -198,7 +203,11 @@
                 {#each options as option (option.value)}
                     <button
                         type="button"
-                        class="w-full text-left px-4 py-2 text-body hover:bg-brand-50 transition-colors rounded-md my-0.5 {option.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} {value === option.value ? 'bg-brand-50' : ''}"
+                        class="w-full text-left px-4 py-2 text-body hover:bg-base-100 transition-colors rounded-md my-0.5 {option.disabled
+                            ? 'opacity-50 cursor-not-allowed'
+                            : 'cursor-pointer'} {value === option.value
+                            ? 'bg-base-100'
+                            : ''}"
                         onclick={() => handleOptionClick(option.value)}
                         disabled={option.disabled}
                     >
@@ -217,4 +226,4 @@
             <span>{message}</span>
         </p>
     {/if}
-</div>
+</div>

package/dist/atoms/Skeleton.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <div
-    class="animate-pulse bg-gray-200 rounded {className}"
+    class="animate-pulse bg-base-200 rounded {className}"
     style="width: {width}; height: {height};"
     {...restProps}
 ></div>

package/dist/atoms/Textarea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
-    
-    // SSR-safe ID generation
+    import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
+
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -17,7 +17,8 @@
         placeholder?: string;
         disabled?: boolean;
         rows?: number;
-        variant?: "default" | "success" | "warning" | "error";
+        size?: SizeVariant;
+        variant?: SemanticVariant;
         message?: string;
         oninput?: (event: Event) => void;
     }
@@ -35,10 +36,8 @@
         ...restProps
     }: Props = $props();
 
-    // Generate unique ID - SSR safe (call directly, not in $state)
     const textareaId = generateId("textarea");
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
             ? "border-success focus:border-success focus:ring-success"
@@ -49,20 +48,17 @@
                 : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
     });
 
-    // Textarea classes matching M3 design
     const textareaClasses = $derived(() => {
         const baseClasses =
-            "w-full bg-brand-100 rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
+            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
 
         return `${baseClasses} ${variantClass()}`.trim();
     });
 
-    // Label classes using semantic text colors
     const labelClasses = $derived(
         () => "block text-sm font-medium text-label mb-1",
     );
 
-    // Message classes based on variant
     const messageClasses = $derived(() => {
         if (variant === "error") {
             return "text-error text-sm mt-1 flex items-center gap-1.5";
@@ -74,7 +70,6 @@
         return "text-description text-sm mt-1 flex items-center gap-1.5";
     });
 
-    // Get icon component based on variant
     const getIcon = $derived(() => {
         if (variant === "error") return AlertCircle;
         if (variant === "success") return CheckCircle;
@@ -86,7 +81,6 @@
         const target = event.target as HTMLTextAreaElement;
         value = target.value;
 
-        // Call the parent's oninput handler if provided
         if (oninput) {
             oninput(event);
         }

package/dist/atoms/Textarea.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
 interface Props {
     value?: string;
     name?: string;
@@ -5,7 +6,8 @@ interface Props {
     placeholder?: string;
     disabled?: boolean;
     rows?: number;
-    variant?: "default" | "success" | "warning" | "error";
+    size?: SizeVariant;
+    variant?: SemanticVariant;
     message?: string;
     oninput?: (event: Event) => void;
 }

package/dist/atoms/ThemeToggle.svelte

@@ -2,7 +2,6 @@
     import { onMount } from "svelte";
     import { Sun, Moon } from "@lucide/svelte";
     
-    // SSR-safe utilities
     function safeLocalStorage(): Storage | undefined {
         return typeof window !== "undefined" ? localStorage : undefined;
     }
@@ -28,7 +27,6 @@
 
     onMount(() => {
         mounted = true;
-        // Check for saved theme preference or default to light mode
         const storage = safeLocalStorage();
         if (storage) {
             const savedTheme = storage.getItem("theme");
@@ -71,7 +69,6 @@
         }
     }
 
-    // Size classes matching M3 design
     const sizeClass = $derived(() => {
         if (size === "sm") {
             return {
@@ -84,7 +81,6 @@
                 icon: 24
             };
         } else {
-            // default md
             return {
                 button: "w-10 h-10",
                 icon: 20
@@ -92,15 +88,13 @@
         }
     });
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         if (variant === "ghost") {
-            return "bg-transparent hover:bg-surface-hover border-0";
+            return "bg-transparent hover:bg-base-100 border-0";
         } else if (variant === "outline") {
-            return "bg-surface-elevated hover:bg-surface-hover border border-border";
+            return "bg-base-50 hover:bg-base-100 border border-border";
         } else {
-            // default
-            return "bg-surface-elevated hover:bg-surface-hover border-0";
+            return "bg-base-50 hover:bg-base-100 border-0";
         }
     });
 
@@ -121,7 +115,7 @@
             focus:ring-2
             focus:ring-brand-500
             focus:ring-offset-2
-            focus:ring-offset-surface
+            focus:ring-offset-base-50
         `.trim().replace(/\s+/g, " ");
     });
 </script>
@@ -141,9 +135,8 @@
         {/if}
     </button>
 {:else}
-    <!-- SSR fallback -->
     <button
-        class="w-10 h-10 bg-surface-elevated rounded-lg flex items-center justify-center text-label cursor-pointer"
+        class="w-10 h-10 bg-base-50 rounded-lg flex items-center justify-center text-label cursor-pointer"
         aria-label="Theme toggle"
         type="button"
         {...restProps}

package/dist/atoms/Toast.svelte

@@ -16,7 +16,6 @@
 
     let isVisible = $state(true);
 
-    // Simple type classes
     const typeClasses = {
         success: "bg-green-100 border-green-300 text-success",
         error: "bg-red-100 border-red-300 text-error",
@@ -46,7 +45,7 @@
             {#if closable}
                 <button
                     type="button"
-                    class="ml-3 text-gray-400 hover:text-gray-600"
+                    class="ml-3 text-base-400 hover:text-base-600"
                     onclick={closeToast}
                     aria-label="Close notification"
                 >

package/dist/atoms/Toggle.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -8,7 +7,6 @@
         }
     }
 
-    // Props using Svelte 5 runes
     interface Props {
         checked?: boolean;
         disabled?: boolean;
@@ -26,40 +24,34 @@
         ...restProps
     }: Props = $props();
 
-    // SSR-safe ID generation (call directly, not in onMount)
     const toggleId = generateId("toggle");
 
-    // Handle click
     function handleClick(event: MouseEvent) {
         if (disabled) return;
         checked = !checked;
 
-        // Call parent handlers if provided
         if (onclick) onclick(event);
         if (onchange) onchange({ checked });
     }
 
-    // Toggle button classes matching M3 design
     const toggleButtonClasses = $derived(() =>
         [
             "relative inline-flex w-10 h-6 flex-shrink-0 cursor-pointer rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
-            checked ? "bg-brand-600" : "bg-stone-300",
+            checked ? "bg-action-primary" : "bg-base-400",
             disabled && "opacity-50 cursor-not-allowed",
         ]
             .filter(Boolean)
             .join(" "),
     );
 
-    // Toggle thumb classes matching M3 design
     const toggleThumbClasses = $derived(() => {
         const baseClasses =
-            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform duration-200 ease-in-out";
+            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card transition-transform duration-200 ease-in-out";
         const positionClasses = checked ? "translate-x-4" : "translate-x-0";
 
         return `${baseClasses} ${positionClasses}`.trim();
     });
 
-    // Handle keyboard
     function handleKeydown(event: KeyboardEvent) {
         if (disabled) return;
         if (event.key === " " || event.key === "Enter") {

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,79 @@
         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);
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape" && isVisible) {
+            isVisible = false;
+            triggerElement?.focus();
+        }
+    }
+
+    function handleFocus() {
+        if (!disabled && content) {
+            isVisible = true;
+        }
+    }
+
+    function handleBlur() {
+        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 +107,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 +117,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,42 +131,60 @@
         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);
     }
 
-    /* Modern arrow implementation using CSS clip-path for better performance */
+    .tooltip-container[data-placement="right"] .tooltip[data-visible="true"] {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(-50%) translateX(0) scale(1);
+    }
+
     .tooltip::before {
         content: "";
         position: absolute;
@@ -134,55 +211,75 @@
         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 */
     .tooltip-container[data-delay] .tooltip {
         transition-delay: calc(var(--tooltip-delay, 0) * 1ms);
     }
 
-    /* Responsive design with modern CSS */
     @media (max-width: 640px) {
         .tooltip {
             --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;
         }
     }
 
-    /* Dark mode support */
     @media (prefers-color-scheme: dark) {
         :root {
             --tooltip-bg: #374151;
         }
     }
 
-    /* High contrast mode support */
+    .dark :root {
+        --tooltip-bg: #374151;
+    }
+
     @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;
         }
     }
+
+    .tooltip-container:focus-visible {
+        outline: 2px solid var(--color-focus, #8fa8ff);
+        outline-offset: 2px;
+        border-radius: var(--tooltip-radius);
+    }
 </style>