zabi-components 4.0.0 → 5.0.1

package/dist/atoms/Textarea.svelte

@@ -0,0 +1,116 @@
+<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)}`;
+        } else {
+            return `${prefix}-ssr-${Date.now()}`;
+        }
+    }
+
+    // Input variant classes
+    function getInputVariantClasses(
+        variant: "default" | "success" | "warning" | "error" | "info",
+    ): string {
+        const variantMap = {
+            default:
+                "border-gray-300 focus:border-blue-500 focus:ring-blue-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",
+            info: "border-blue-300 focus:border-blue-500 focus:ring-blue-500",
+        };
+        return variantMap[variant] || variantMap.default;
+    }
+
+    interface Props {
+        value?: string;
+        name?: string;
+        label?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        rows?: number;
+        size?: "sm" | "md" | "lg";
+        variant?: "default" | "success" | "warning" | "error";
+        oninput?: (event: Event) => void;
+    }
+
+    let {
+        value = "",
+        name = "",
+        label = "",
+        placeholder = "",
+        disabled = false,
+        rows = 4,
+        size = "md",
+        variant = "default",
+        oninput,
+        ...restProps
+    }: Props = $props();
+
+    // Generate unique ID - SSR safe (call directly, not in $state)
+    const textareaId = generateId("textarea");
+
+    // Size classes using full class names
+    const sizeClass = $derived(() => {
+        return size === "sm"
+            ? "px-3 py-1.5 text-sm"
+            : size === "lg"
+              ? "px-5 py-3 text-base"
+              : "px-4 py-2 text-sm"; // default md
+    });
+
+    // Variant classes using full class names
+    const variantClass = $derived(() => {
+        return variant === "success"
+            ? "border-green-300 focus:border-green-500 focus:ring-green-500"
+            : variant === "warning"
+              ? "border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500"
+              : variant === "error"
+                ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+                : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"; // default
+    });
+
+    // Textarea classes using Badge pattern
+    const textareaClasses = $derived(() => {
+        const baseClasses =
+            "w-full rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled resize-y";
+
+        return `${baseClasses} ${sizeClass()} ${variantClass()}`.trim();
+    });
+
+    // Label classes using semantic text colors
+    const labelClasses = $derived(
+        () => "block text-sm font-medium text-label mb-1",
+    );
+
+    function handleInput(event: Event) {
+        const target = event.target as HTMLTextAreaElement;
+        value = target.value;
+
+        // Call the parent's oninput handler if provided
+        if (oninput) {
+            oninput(event);
+        }
+    }
+</script>
+
+<div>
+    {#if label}
+        <label for={textareaId} class={labelClasses()}>{label}</label>
+    {/if}
+
+    <textarea
+        id={textareaId}
+        {name}
+        {value}
+        {placeholder}
+        {disabled}
+        {rows}
+        class={textareaClasses()}
+        oninput={handleInput}
+        {...restProps}
+    ></textarea>
+</div>

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

@@ -0,0 +1,14 @@
+interface Props {
+    value?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    rows?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "success" | "warning" | "error";
+    oninput?: (event: Event) => void;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/atoms/ThemeToggle.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    // SSR-safe utilities
+    function safeLocalStorage(): Storage | undefined {
+        return typeof window !== "undefined" ? localStorage : undefined;
+    }
+
+    function safeDocument(): Document | undefined {
+        return typeof window !== "undefined" ? document : undefined;
+    }
+
+    interface Props {
+        isDark?: boolean;
+        onclick?: (event: Event) => void;
+    }
+
+    let { isDark = false, ...restProps }: Props = $props();
+
+    let mounted = $state(false);
+
+    onMount(() => {
+        mounted = true;
+        // Check for saved theme preference or default to light mode
+        const storage = safeLocalStorage();
+        if (storage) {
+            const savedTheme = storage.getItem("theme");
+            let prefersDark = false;
+
+            // Only check media query when mounted and in browser
+            if (mounted && typeof window !== "undefined" && window.matchMedia) {
+                try {
+                    prefersDark = window.matchMedia(
+                        "(prefers-color-scheme: dark)",
+                    ).matches;
+                } catch (e) {
+                    // Fallback if matchMedia fails
+                    prefersDark = false;
+                }
+            }
+
+            isDark = savedTheme === "dark" || (!savedTheme && prefersDark);
+            updateTheme();
+        }
+    });
+
+    function toggleTheme(event: Event) {
+        isDark = !isDark;
+        updateTheme();
+        const storage = safeLocalStorage();
+        if (mounted && storage) {
+            storage.setItem("theme", isDark ? "dark" : "light");
+        }
+    }
+
+    function updateTheme() {
+        const doc = safeDocument();
+        if (mounted && doc) {
+            if (isDark) {
+                doc.documentElement.classList.add("dark");
+            } else {
+                doc.documentElement.classList.remove("dark");
+            }
+        }
+    }
+</script>
+
+{#if mounted}
+    <button
+        onclick={toggleTheme}
+        class="w-10 h-10 bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+        {...restProps}
+    >
+        {#if isDark}
+            <span class="text-lg">☀️</span>
+        {:else}
+            <span class="text-lg">🌙</span>
+        {/if}
+    </button>
+{:else}
+    <!-- SSR fallback -->
+    <button
+        class="w-10 h-10 bg-gray-100 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700"
+        aria-label="Theme toggle"
+        {...restProps}
+    >
+        <span class="text-lg">🌙</span>
+    </button>
+{/if}

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

@@ -0,0 +1,7 @@
+interface Props {
+    isDark?: boolean;
+    onclick?: (event: Event) => void;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/atoms/Toast.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    interface Props {
+        message?: string;
+        type?: "success" | "error" | "warning" | "info";
+        closable?: boolean;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        message = "",
+        type = "info",
+        closable = true,
+        onclick,
+        ...restProps
+    }: Props = $props();
+
+    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",
+        warning: "bg-yellow-100 border-yellow-300 text-warning",
+        info: "bg-blue-100 border-blue-300 text-body",
+    };
+
+    function closeToast(event: Event) {
+        isVisible = false;
+        if (onclick) {
+            onclick(event);
+        }
+    }
+</script>
+
+{#if isVisible}
+    <div
+        class="fixed top-4 right-4 max-w-sm w-full bg-white border rounded-lg shadow-lg p-4 z-50"
+        role="alert"
+        {...restProps}
+    >
+        <div class="flex items-start">
+            <div class="flex-1">
+                <p class="text-sm {typeClasses[type]}">{message}</p>
+            </div>
+
+            {#if closable}
+                <button
+                    type="button"
+                    class="ml-3 text-gray-400 hover:text-gray-600"
+                    onclick={closeToast}
+                    aria-label="Close notification"
+                >
+                    ×
+                </button>
+            {/if}
+        </div>
+    </div>
+{/if}

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

@@ -0,0 +1,9 @@
+interface Props {
+    message?: string;
+    type?: "success" | "error" | "warning" | "info";
+    closable?: boolean;
+    onclick?: (event: Event) => void;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/atoms/Toggle.svelte

@@ -0,0 +1,94 @@
+<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)}`;
+        } else {
+            return `${prefix}-ssr-${Date.now()}`;
+        }
+    }
+
+    // Props using Svelte 5 runes
+    interface Props {
+        checked?: boolean;
+        disabled?: boolean;
+        label?: string;
+        onclick?: (event: MouseEvent) => void;
+        onchange?: (event: { checked: boolean }) => void;
+    }
+
+    let {
+        checked = false,
+        disabled = false,
+        label = "",
+        onclick,
+        onchange,
+        ...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 using full class names
+    const toggleButtonClasses = $derived(() => {
+        const baseClasses =
+            "relative inline-flex w-11 h-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2";
+        const stateClasses = checked ? "bg-blue-600" : "bg-gray-200";
+        const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";
+
+        return `${baseClasses} ${stateClasses} ${disabledClasses}`.trim();
+    });
+
+    // Toggle thumb classes using full class names
+    const toggleThumbClasses = $derived(() => {
+        const baseClasses =
+            "pointer-events-none inline-block w-5 h-5 transform rounded-full bg-white shadow-lg transition duration-200 ease-in-out";
+        const positionClasses = checked ? "translate-x-5" : "translate-x-0";
+
+        return `${baseClasses} ${positionClasses}`.trim();
+    });
+
+    // Handle keyboard
+    function handleKeydown(event: KeyboardEvent) {
+        if (disabled) return;
+        if (event.key === " " || event.key === "Enter") {
+            event.preventDefault();
+            handleClick(event as any);
+        }
+    }
+</script>
+
+<div class="flex items-center gap-3">
+    <button
+        type="button"
+        role="switch"
+        id={toggleId}
+        aria-checked={checked}
+        aria-label={label || "Toggle"}
+        {disabled}
+        onclick={handleClick}
+        onkeydown={handleKeydown}
+        class={toggleButtonClasses()}
+    >
+        <span class={toggleThumbClasses()}></span>
+    </button>
+
+    {#if label}
+        <label
+            for={toggleId}
+            class="text-sm font-medium text-label cursor-pointer"
+        >
+            {label}
+        </label>
+    {/if}
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    onclick?: (event: MouseEvent) => void;
+    onchange?: (event: {
+        checked: boolean;
+    }) => void;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/atoms/Tooltip.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+    interface Props {
+        content?: string;
+        placement?: "top" | "bottom" | "left" | "right";
+        delay?: number;
+        disabled?: boolean;
+    }
+
+    let {
+        content = "",
+        placement = "top",
+        delay = 0,
+        disabled = false,
+        children,
+        ...restProps
+    }: Props & { children?: any } = $props();
+</script>
+
+<div
+    class="tooltip-container group relative inline-block"
+    data-placement={placement}
+    data-delay={delay}
+    data-disabled={disabled}
+    {...restProps}
+>
+    {@render children?.()}
+
+    {#if content && !disabled}
+        <div
+            class="tooltip group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible"
+            role="tooltip"
+            aria-hidden="true"
+        >
+            {content}
+        </div>
+    {/if}
+</div>
+
+<style>
+    :root {
+        --tooltip-bg: #1f2937;
+        --tooltip-color: white;
+        --tooltip-padding: 0.5rem 0.75rem;
+        --tooltip-radius: 0.375rem;
+        --tooltip-font-size: 0.875rem;
+        --tooltip-line-height: 1.25rem;
+        --tooltip-max-width: 200px;
+        --tooltip-gap: 0.5rem;
+        --tooltip-arrow-size: 4px;
+        --tooltip-transition: opacity 0.2s ease-in-out,
+            visibility 0.2s ease-in-out;
+    }
+
+    .tooltip-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .tooltip {
+        position: absolute;
+        z-index: 50;
+        padding: var(--tooltip-padding);
+        background-color: var(--tooltip-bg);
+        color: var(--tooltip-color);
+        border-radius: var(--tooltip-radius);
+        font-size: var(--tooltip-font-size);
+        line-height: var(--tooltip-line-height);
+        max-width: var(--tooltip-max-width);
+        white-space: normal;
+        word-wrap: break-word;
+        opacity: 0;
+        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%);
+        margin-block-end: var(--tooltip-gap);
+    }
+
+    .tooltip-container[data-placement="bottom"] .tooltip {
+        inset-block-start: 100%;
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        margin-block-start: var(--tooltip-gap);
+    }
+
+    .tooltip-container[data-placement="left"] .tooltip {
+        inset-inline-end: 100%;
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+        margin-inline-end: var(--tooltip-gap);
+    }
+
+    .tooltip-container[data-placement="right"] .tooltip {
+        inset-inline-start: 100%;
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+        margin-inline-start: var(--tooltip-gap);
+    }
+
+    /* Modern arrow implementation using CSS clip-path for better performance */
+    .tooltip::before {
+        content: "";
+        position: absolute;
+        width: calc(var(--tooltip-arrow-size) * 2);
+        height: calc(var(--tooltip-arrow-size) * 2);
+        background-color: var(--tooltip-bg);
+    }
+
+    .tooltip-container[data-placement="top"] .tooltip::before {
+        inset-block-start: 100%;
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        clip-path: polygon(50% 100%, 0 0, 100% 0);
+    }
+
+    .tooltip-container[data-placement="bottom"] .tooltip::before {
+        inset-block-end: 100%;
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        clip-path: polygon(0 100%, 50% 0, 100% 100%);
+    }
+
+    .tooltip-container[data-placement="left"] .tooltip::before {
+        inset-inline-start: 100%;
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+        clip-path: polygon(0 50%, 100% 0, 100% 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%);
+    }
+
+    /* 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;
+            margin: var(--tooltip-gap) 0 !important;
+        }
+
+        .tooltip::before {
+            display: none;
+        }
+    }
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --tooltip-bg: #374151;
+        }
+    }
+
+    /* High contrast mode support */
+    @media (prefers-contrast: high) {
+        :root {
+            --tooltip-bg: #000000;
+            --tooltip-color: #ffffff;
+        }
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+        .tooltip {
+            transition: none;
+        }
+    }
+</style>

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

@@ -0,0 +1,12 @@
+interface Props {
+    content?: string;
+    placement?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+    disabled?: boolean;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/atoms/index.d.ts

@@ -1,20 +1,9 @@
-// Atomic Components - Basic building blocks
+export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Card } from './Card.svelte';
-export { default as Checkbox } from './Checkbox.svelte';
-export { default as ColorPicker } from './ColorPicker.svelte';
-export { default as Heading } from './Heading.svelte';
 export { default as Input } from './Input.svelte';
-export { default as OptimizedImage } from './OptimizedImage.svelte';
-export { default as DebugPanel } from './PerformanceMonitor.svelte';
-export { default as Progress } from './Progress.svelte';
-export { default as ScaleDemo } from './ScaleDemo.svelte';
-export { default as Select } from './Select.svelte';
-export { default as Skeleton } from './Skeleton.svelte';
 export { default as Textarea } from './Textarea.svelte';
-export { default as TextAlignment } from './TextAlignment.svelte';
-export { default as ThemeToggle } from './ThemeToggle.svelte';
-export { default as Toast } from './Toast.svelte';
-export { default as Toggle } from './Toggle.svelte';
-export { default as Tooltip } from './Tooltip.svelte';
+export { default as Select } from './Select.svelte';
+export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as Heading } from './Heading.svelte';