zabi-components 5.0.19 → 5.0.21

package/dist/atoms/Card.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type { CardVariant, SizeVariant } from "../../types/variants.js";
+    import CardHeader from "./CardHeader.svelte";
+    import CardContent from "./CardContent.svelte";
 
     interface Props {
         title?: string;
@@ -42,11 +44,12 @@
         }
     });
 
-    const useOldAPI = $derived(title !== "" || description !== "" || image !== "");
-    
+    const useOldAPI = $derived(
+        title !== "" || description !== "" || image !== "",
+    );
+
     const cardClasses = $derived(() => {
-        const baseClasses =
-            `rounded-lg transition-all duration-200 ${variantClasses()}`;
+        const baseClasses = `rounded-lg transition-all duration-200 ${variantClasses()}`;
         const interactiveClasses = onclick
             ? variant === "elevated"
                 ? "cursor-pointer hover:shadow-xl hover:bg-card-hover"
@@ -63,26 +66,6 @@
         return `${baseClasses} ${interactiveClasses} ${widthClasses} ${minWidthClass} ${paddingClass}`.trim();
     });
 
-    const titleClasses = $derived(() => {
-        if (size === "sm") {
-            return "text-lg font-medium mb-2 text-headline";
-        } else if (size === "lg") {
-            return "text-2xl font-medium mb-4 text-headline";
-        } else {
-            return "text-xl font-medium mb-3 text-headline";
-        }
-    });
-
-    const descriptionClasses = $derived(() => {
-        if (size === "sm") {
-            return "text-xs text-description mb-3";
-        } else if (size === "lg") {
-            return "text-base text-description mb-5";
-        } else {
-            return "text-sm text-description mb-4";
-        }
-    });
-
     function handleKeydown(event: KeyboardEvent) {
         if (onclick && (event.key === "Enter" || event.key === " ")) {
             event.preventDefault();
@@ -91,44 +74,37 @@
     }
 
     const cardRole = $derived(onclick ? "button" : undefined);
-    const cardTabIndex = $derived(onclick ? 0 : undefined);
     const cardAriaLabel = $derived(onclick && title ? title : undefined);
 </script>
 
-<div 
-    class={cardClasses()} 
-    {onclick} 
+<div
+    class={cardClasses()}
+    {onclick}
     role={cardRole}
-    tabindex={cardTabIndex}
+    {...onclick ? { tabindex: 0 } : {}}
     aria-label={cardAriaLabel}
-    onkeydown={handleKeydown}
+    onkeydown={onclick ? handleKeydown : undefined}
     {...restProps}
 >
     {#if useOldAPI}
         <!-- Old API: Using title/description/image props -->
-        {#if image}
-            <img
-                src={image}
-                alt={title}
-                class="w-full h-48 object-cover rounded-lg mb-4"
-            />
-        {/if}
-
-        {#if title}
-            <h3 class={titleClasses()}>{title}</h3>
+        {#if title || description}
+            <CardHeader {title} {description} />
         {/if}
 
-        {#if description}
-            <p class={descriptionClasses()}>{description}</p>
-        {/if}
-
-        {#if children}
-            {@render children()}
+        {#if image || children}
+            <CardContent {image} imageAlt={title}>
+                {#if children}
+                    {@render children()}
+                {/if}
+            </CardContent>
         {/if}
     {:else}
         <!-- New API: Using compound components (CardHeader, CardContent, CardFooter) -->
         {#if children}
-            {@render children()}
+            <CardContent className="pt-6">
+                {@render children()}
+            </CardContent>
         {/if}
     {/if}
 </div>

package/dist/atoms/CardContent.svelte

@@ -2,23 +2,30 @@
     import type { Snippet } from "svelte";
 
     interface Props {
+        image?: string;
+        imageAlt?: string;
         className?: string;
         children?: Snippet;
     }
 
     let {
+        image = "",
+        imageAlt = "",
         className = "",
         children,
         ...restProps
     }: Props = $props();
 </script>
 
-<div
-    class="p-6 pt-0 {className}"
-    {...restProps}
->
+<div class="p-6 pt-0 {className}" {...restProps}>
+    {#if image}
+        <img
+            src={image}
+            alt={imageAlt}
+            class="w-full h-48 object-cover rounded-lg mb-4"
+        />
+    {/if}
     {#if children}
         {@render children()}
     {/if}
 </div>
-

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

@@ -1,5 +1,7 @@
 import type { Snippet } from "svelte";
 interface Props {
+    image?: string;
+    imageAlt?: string;
     className?: string;
     children?: Snippet;
 }

package/dist/atoms/CardHeader.svelte

@@ -2,23 +2,40 @@
     import type { Snippet } from "svelte";
 
     interface Props {
+        title?: string;
+        description?: string;
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
         className?: string;
         children?: Snippet;
     }
 
     let {
+        title = "",
+        description = "",
+        level = 3,
         className = "",
         children,
         ...restProps
     }: Props = $props();
+
+    const headingTag = $derived(`h${level}`);
+    const headingClasses = $derived(() => {
+        return "text-2xl font-semibold leading-none tracking-tight text-headline";
+    });
 </script>
 
-<header
-    class="flex flex-col space-y-1.5 p-6 {className}"
-    {...restProps}
->
+<header class="flex flex-col space-y-1.5 p-6 {className}" {...restProps}>
+    {#if title}
+        <svelte:element this={headingTag} class={headingClasses()}>
+            {title}
+        </svelte:element>
+    {/if}
     {#if children}
         {@render children()}
     {/if}
+    {#if description}
+        <p class="text-sm text-description">
+            {description}
+        </p>
+    {/if}
 </header>
-

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

@@ -1,5 +1,8 @@
 import type { Snippet } from "svelte";
 interface Props {
+    title?: string;
+    description?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     className?: string;
     children?: Snippet;
 }

package/dist/atoms/ColorPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Input from "./Input.svelte";
+    import { onMount, onDestroy } from "svelte";
 
     interface Props {
         value?: string;
@@ -18,11 +19,83 @@
         ...restProps
     }: Props = $props();
 
+    let isOpen = $state(false);
+    let pickerContainer: HTMLDivElement;
+    let colorMap: HTMLCanvasElement;
+    let colorMapContainer: HTMLDivElement;
+    let hueSlider: HTMLInputElement;
+    let isDragging = $state(false);
+
+    // HSL values (0-360, 0-100, 0-100)
+    let hue = $state(0);
+    let saturation = $state(100);
+    let lightness = $state(50);
+
     function isValidHex(hex: string): boolean {
         const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
         return hexPattern.test(hex);
     }
 
+    function hexToHsl(hex: string): [number, number, number] {
+        const r = parseInt(hex.slice(1, 3), 16) / 255;
+        const g = parseInt(hex.slice(3, 5), 16) / 255;
+        const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+
+        return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+    }
+
+    function hslToHex(h: number, s: number, l: number): string {
+        l /= 100;
+        const a = (s * Math.min(l, 1 - l)) / 100;
+        const f = (n: number) => {
+            const k = (n + h / 30) % 12;
+            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+            return Math.round(255 * color)
+                .toString(16)
+                .padStart(2, "0");
+        };
+        return `#${f(0)}${f(8)}${f(4)}`;
+    }
+
+    function updateFromHex(hex: string) {
+        if (isValidHex(hex)) {
+            const [h, s, l] = hexToHsl(hex);
+            hue = h;
+            saturation = s;
+            lightness = l;
+        }
+    }
+
+    function updateHexFromHsl() {
+        const hex = hslToHex(hue, saturation, lightness);
+        value = hex;
+        if (onchange) {
+            onchange(new Event("change"));
+        }
+    }
+
     const variant = $derived(() => {
         if (value && !isValidHex(value)) {
             return "error";
@@ -39,6 +112,7 @@
 
     function handleInput(event: Event) {
         if (onchange) onchange(event);
+        updateFromHex(value);
     }
 
     function handleBlur(event: Event) {
@@ -51,9 +125,134 @@
 
         if (hexValue === "" || isValidHex(hexValue)) {
             value = hexValue;
+            updateFromHex(hexValue);
             if (onchange) onchange(event);
         }
     }
+
+    function togglePicker() {
+        if (!disabled) {
+            isOpen = !isOpen;
+            if (isOpen && value && isValidHex(value)) {
+                updateFromHex(value);
+            }
+        }
+    }
+
+    function drawColorMap() {
+        if (!colorMap) return;
+        const ctx = colorMap.getContext("2d");
+        if (!ctx) return;
+
+        const width = colorMap.width;
+        const height = colorMap.height;
+
+        // Draw saturation/lightness gradient
+        for (let x = 0; x < width; x++) {
+            for (let y = 0; y < height; y++) {
+                const s = (x / width) * 100;
+                const l = 100 - (y / height) * 100;
+                const hex = hslToHex(hue, s, l);
+                ctx.fillStyle = hex;
+                ctx.fillRect(x, y, 1, 1);
+            }
+        }
+    }
+
+    function handleColorMapClick(event: MouseEvent) {
+        if (!colorMapContainer || !colorMap) return;
+        const rect = colorMapContainer.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        saturation = Math.max(0, Math.min(100, (x / rect.width) * 100));
+        lightness = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100));
+
+        updateHexFromHsl();
+        drawColorMap();
+    }
+
+    function handleColorMapDrag(event: MouseEvent) {
+        if (isDragging) {
+            handleColorMapClick(event);
+        }
+    }
+
+    function handleHueChange(event: Event) {
+        const target = event.target as HTMLInputElement;
+        hue = parseInt(target.value);
+        updateHexFromHsl();
+        drawColorMap();
+    }
+
+    $effect(() => {
+        if (isOpen && colorMap) {
+            // Use setTimeout to ensure canvas is rendered
+            setTimeout(() => {
+                drawColorMap();
+            }, 0);
+        }
+    });
+
+    $effect(() => {
+        if (hue !== undefined && colorMap && isOpen) {
+            drawColorMap();
+        }
+    });
+
+    $effect(() => {
+        if (value && isValidHex(value) && !isDragging) {
+            updateFromHex(value);
+        }
+    });
+
+    function handleClickOutside(event: MouseEvent) {
+        if (
+            pickerContainer &&
+            !pickerContainer.contains(event.target as Node) &&
+            !(event.target as HTMLElement).closest(
+                '[aria-label="Open color picker"]',
+            )
+        ) {
+            isOpen = false;
+        }
+    }
+
+    onMount(() => {
+        if (value && isValidHex(value)) {
+            updateFromHex(value);
+        }
+        window.addEventListener("mousedown", handleClickOutside);
+        window.addEventListener("mouseup", () => {
+            isDragging = false;
+        });
+        window.addEventListener("mousemove", handleColorMapDrag);
+    });
+
+    onDestroy(() => {
+        window.removeEventListener("mousedown", handleClickOutside);
+        window.removeEventListener("mouseup", () => {});
+        window.removeEventListener("mousemove", handleColorMapDrag);
+    });
+
+    const displayColor = $derived(() => {
+        if (value && isValidHex(value)) {
+            return value;
+        }
+        return placeholder;
+    });
+
+    const currentHslColor = $derived(() => {
+        return `hsl(${hue}, 100%, 50%)`;
+    });
+
+    const pickerIndicatorX = $derived(() => {
+        return `${(saturation / 100) * 100}%`;
+    });
+
+    const pickerIndicatorY = $derived(() => {
+        return `${100 - (lightness / 100) * 100}%`;
+    });
 </script>
 
 <div {...restProps}>
@@ -71,12 +270,77 @@
                 aria-label="Hex color input"
             />
         </div>
-        {#if value && isValidHex(value)}
-            <div
-                class="w-8 h-8 rounded border-2 border-base-300 shrink-0 mt-6"
-                style="background-color: {value};"
-                aria-label="Color preview"
-            ></div>
-        {/if}
+        <div class="relative shrink-0 mt-6">
+            <button
+                type="button"
+                onclick={togglePicker}
+                {disabled}
+                class="w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-brand-500 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                style="background-color: {displayColor()};"
+                aria-label="Open color picker"
+                aria-expanded={isOpen}
+            ></button>
+
+            {#if isOpen}
+                <div
+                    bind:this={pickerContainer}
+                    class="absolute top-12 right-0 z-50 bg-input rounded-2xl shadow-lg p-4 w-80"
+                    role="dialog"
+                    aria-label="Color picker"
+                >
+                    <div class="space-y-4">
+                        <!-- Color Map -->
+                        <div
+                            bind:this={colorMapContainer}
+                            class="relative w-full h-48 rounded-xl overflow-hidden cursor-crosshair"
+                            onmousedown={(e) => {
+                                isDragging = true;
+                                handleColorMapClick(e);
+                            }}
+                            role="button"
+                            tabindex="0"
+                        >
+                            <canvas
+                                bind:this={colorMap}
+                                width={256}
+                                height={192}
+                                class="w-full h-full"
+                            ></canvas>
+                            <!-- Color indicator -->
+                            <div
+                                class="absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
+                                style="left: {pickerIndicatorX()}; top: {pickerIndicatorY()};"
+                            ></div>
+                        </div>
+
+                        <!-- Hue Slider -->
+                        <div class="space-y-2">
+                            <div
+                                class="relative h-6 rounded-lg overflow-hidden"
+                            >
+                                <div
+                                    class="absolute inset-0"
+                                    style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));"
+                                ></div>
+                                <input
+                                    bind:this={hueSlider}
+                                    type="range"
+                                    min="0"
+                                    max="360"
+                                    value={hue}
+                                    oninput={handleHueChange}
+                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                                    aria-label="Hue slider"
+                                />
+                                <div
+                                    class="absolute top-0 bottom-0 w-3 bg-card shadow-md pointer-events-none my-0.25 rounded-full border border-base-950"
+                                    style="left: {(hue / 360) * 100}%;"
+                                ></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {/if}
+        </div>
     </div>
 </div>

package/dist/atoms/IconButton.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+
+    interface Props {
+        /** Visual style variant. */
+        variant?: ButtonVariant;
+        /** Size variant controlling padding and radius. */
+        size?: SizeVariant;
+        /** Whether the button is disabled. */
+        disabled?: boolean;
+        /** Button type attribute. */
+        type?: "button" | "submit" | "reset";
+        /** Accessible label for icon-only buttons. */
+        label?: string;
+        /** Click handler for native click events. */
+        onclick?: (event: MouseEvent) => void;
+        /** Icon content. */
+        children?: Snippet;
+    }
+
+    let {
+        variant = "primary",
+        size = "md",
+        disabled = false,
+        type = "button",
+        label = "",
+        onclick,
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const sizeClass = $derived(() => {
+        if (size === "sm") {
+            return {
+                padding: "p-2",
+                radius: "rounded-md",
+            };
+        } else if (size === "lg") {
+            return {
+                padding: "p-3",
+                radius: "rounded-xl",
+            };
+        } else {
+            return {
+                padding: "p-2.5",
+                radius: "rounded-lg",
+            };
+        }
+    });
+
+    const variantClass = $derived(() => {
+        return variant === "primary"
+            ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+            : variant === "secondary"
+              ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+              : variant === "danger"
+                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                : variant === "ghost"
+                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 focus:ring-2 focus:ring-base-500 focus:ring-offset-2 disabled:text-disabled"
+                  : variant === "outline"
+                    ? "bg-transparent border-2 border-action-primary text-headline hover:bg-action-secondary hover:text-action-primary active:bg-action-primary-active active:text-action-primary focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:border-disabled disabled:text-disabled"
+                    : variant === "link"
+                      ? "text-brand-700 active:text-brand-700 underline-offset-4 hover:underline focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:text-disabled disabled:no-underline"
+                      : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2";
+    });
+
+    const buttonClasses = $derived(() => {
+        const sizeStyles = sizeClass();
+        const baseClasses =
+            "inline-flex items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none";
+
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass()}`.trim();
+    });
+</script>
+
+<button
+    {type}
+    class={buttonClasses()}
+    {disabled}
+    {onclick}
+    aria-label={label || undefined}
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</button>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+interface Props {
+    /** Visual style variant. */
+    variant?: ButtonVariant;
+    /** Size variant controlling padding and radius. */
+    size?: SizeVariant;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Button type attribute. */
+    type?: "button" | "submit" | "reset";
+    /** Accessible label for icon-only buttons. */
+    label?: string;
+    /** Click handler for native click events. */
+    onclick?: (event: MouseEvent) => void;
+    /** Icon content. */
+    children?: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;