zabi-components 4.0.2 → 5.0.1

package/dist/atoms/ColorPicker.svelte

@@ -0,0 +1,171 @@
+<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()}`;
+        }
+    }
+
+    interface Props {
+        value?: string;
+        label?: string;
+        disabled?: boolean;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        value = "",
+        label = "",
+        disabled = false,
+        onclick,
+        ...restProps
+    }: Props = $props();
+
+    const colors = [
+        { label: "Red", value: "#ef4444" },
+        { label: "Blue", value: "#3b82f6" },
+        { label: "Green", value: "#10b981" },
+        { label: "Yellow", value: "#f59e0b" },
+        { label: "Purple", value: "#8b5cf6" },
+        { label: "Pink", value: "#ec4899" },
+        { label: "Gray", value: "#6b7280" },
+        { label: "Black", value: "#000000" },
+    ];
+
+    // Generate unique IDs - SSR safe (call directly, not in onMount)
+    const groupId = generateId("color-picker");
+    const inputId = generateId("color-input");
+
+    // Hex color validation
+    function isValidHex(hex: string): boolean {
+        const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+        return hexPattern.test(hex);
+    }
+
+    // Handle hex input changes
+    function handleHexInput(event: Event) {
+        const target = event.target as HTMLInputElement;
+        const hexValue = target.value;
+
+        if (hexValue === "" || isValidHex(hexValue)) {
+            value = hexValue;
+            if (onclick) onclick(event);
+        }
+    }
+
+    // Handle hex input blur - validate and format
+    function handleHexBlur(event: Event) {
+        const target = event.target as HTMLInputElement;
+        let hexValue = target.value.trim();
+
+        // Add # if missing
+        if (hexValue && !hexValue.startsWith("#")) {
+            hexValue = "#" + hexValue;
+        }
+
+        // Validate and update
+        if (hexValue === "" || isValidHex(hexValue)) {
+            value = hexValue;
+            target.value = hexValue;
+        } else {
+            // Reset to current value if invalid
+            target.value = value;
+        }
+    }
+
+    // Color button classes using full class names
+    const colorButtonClasses = $derived(() => {
+        return (colorValue: string) => {
+            const baseClasses =
+                "w-10 h-10 sm:w-12 sm:h-12 rounded-lg border-2 transition-all";
+            const stateClasses =
+                value === colorValue
+                    ? "border-blue-500 ring-2 ring-blue-200"
+                    : "border-gray-300 hover:border-gray-400";
+
+            return `${baseClasses} ${stateClasses}`.trim();
+        };
+    });
+
+    // Input classes
+    const inputClasses = $derived(() => {
+        const baseClasses =
+            "w-full px-3 py-2 border rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-200";
+        const stateClasses =
+            isValidHex(value) || value === ""
+                ? "border-gray-300 focus:border-blue-500"
+                : "border-red-300 focus:border-red-500 focus:ring-red-200";
+
+        return `${baseClasses} ${stateClasses}`.trim();
+    });
+</script>
+
+<div class="space-y-3 sm:space-y-4">
+    {#if label}
+        <label for={groupId} class="block text-sm font-medium text-label"
+            >{label}</label
+        >
+    {/if}
+
+    <!-- Predefined Colors -->
+    <div
+        id={groupId}
+        class="grid grid-cols-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-4 gap-2 sm:gap-3"
+        role="radiogroup"
+        {...restProps}
+    >
+        {#each colors as color}
+            <button
+                type="button"
+                class={colorButtonClasses()(color.value)}
+                style="background-color: {color.value};"
+                onclick={(e) => {
+                    value = color.value;
+                    if (onclick) onclick(e);
+                }}
+                {disabled}
+                role="radio"
+                aria-checked={value === color.value}
+                aria-label={color.label}
+            >
+                {#if value === color.value}
+                    <span class="text-white text-lg">✓</span>
+                {/if}
+            </button>
+        {/each}
+    </div>
+
+    <!-- Custom Hex Input -->
+    <div class="space-y-1">
+        <label for={inputId} class="block text-xs font-medium text-label">
+            Or enter custom color
+        </label>
+        <div class="flex items-center space-x-2">
+            <input
+                id={inputId}
+                type="text"
+                placeholder="#000000"
+                {value}
+                oninput={handleHexInput}
+                onblur={handleHexBlur}
+                {disabled}
+                class={inputClasses()}
+                aria-label="Custom hex color input"
+            />
+            {#if value && isValidHex(value)}
+                <div
+                    class="w-6 h-6 sm:w-8 sm:h-8 rounded border-2 border-gray-300 shrink-0"
+                    style="background-color: {value};"
+                    aria-label="Color preview"
+                ></div>
+            {/if}
+        </div>
+        {#if value && !isValidHex(value)}
+            <p class="text-xs text-red-500">
+                Please enter a valid hex color (e.g., #ff0000)
+            </p>
+        {/if}
+    </div>
+</div>

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

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

package/dist/atoms/FeatureCard.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    /**
+     * FeatureCard component - SSR-safe implementation
+     * @component
+     */
+
+    interface Props {
+        /** Icon to display */
+        icon?: string;
+        /** Title of the feature */
+        title: string;
+        /** Description of the feature */
+        description: string;
+        /** Additional CSS classes */
+        className?: string;
+    }
+
+    let {
+        icon = "✨",
+        title,
+        description,
+        className = "",
+        ...restProps
+    }: Props = $props();
+
+    let mounted = $state(false);
+
+    onMount(() => {
+        mounted = true;
+    });
+</script>
+
+{#if mounted}
+    <div
+        class="p-6 rounded-lg bg-surface border border-border hover:border-primary/20 hover:shadow-sm transition-colors duration-200 {className}"
+        {...restProps}
+    >
+        <div class="flex items-start gap-4">
+            <div class="shrink-0 text-2xl" aria-hidden="true">
+                {icon}
+            </div>
+            <div class="flex-1 min-w-0">
+                <h3 class="text-lg font-semibold text-headline mb-2">
+                    {title}
+                </h3>
+                <p class="text-description leading-relaxed">
+                    {description}
+                </p>
+            </div>
+        </div>
+    </div>
+{:else}
+    <!-- SSR fallback -->
+    <div
+        class="p-6 rounded-lg bg-gray-100 border border-gray-300 hover:border-gray-400 hover:shadow-sm transition-colors duration-200 {className}"
+        {...restProps}
+    >
+        <div class="flex items-start gap-4">
+            <div class="shrink-0 text-2xl" aria-hidden="true">
+                {icon}
+            </div>
+            <div class="flex-1 min-w-0">
+                <h3 class="text-lg font-semibold text-headline mb-2">
+                    {title}
+                </h3>
+                <p class="text-description leading-relaxed">
+                    {description}
+                </p>
+            </div>
+        </div>
+    </div>
+{/if}

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

@@ -0,0 +1,17 @@
+/**
+ * FeatureCard component - SSR-safe implementation
+ * @component
+ */
+interface Props {
+    /** Icon to display */
+    icon?: string;
+    /** Title of the feature */
+    title: string;
+    /** Description of the feature */
+    description: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const FeatureCard: import("svelte").Component<Props, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/atoms/Heading.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    let { level = 1, text }: { level?: number; text: string } = $props();
+</script>
+
+<div class="text-headline" role="heading" aria-level={level}>{text}</div>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    level?: number;
+    text: string;
+};
+declare const Heading: import("svelte").Component<$$ComponentProps, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/atoms/Input.svelte

@@ -0,0 +1,98 @@
+<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()}`;
+        }
+    }
+
+    interface Props {
+        value?: string;
+        type?: string;
+        name?: string;
+        label?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        size?: "sm" | "md" | "lg";
+        variant?: "default" | "success" | "warning" | "error";
+        oninput?: (event: Event) => void;
+    }
+
+    let {
+        value = "",
+        type = "text",
+        name = "",
+        label = "",
+        placeholder = "",
+        disabled = false,
+        size = "md",
+        variant = "default",
+        oninput,
+        ...restProps
+    }: Props = $props();
+
+    // Generate unique ID - SSR safe (call directly, not in $state)
+    const inputId = generateId("input");
+
+    // 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
+    });
+
+    // Input classes using Badge pattern
+    const inputClasses = $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";
+
+        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 HTMLInputElement;
+        value = target.value;
+
+        // Call the parent's oninput handler if provided
+        if (oninput) {
+            oninput(event);
+        }
+    }
+</script>
+
+<div>
+    {#if label}
+        <label for={inputId} class={labelClasses()}>{label}</label>
+    {/if}
+    <input
+        id={inputId}
+        {type}
+        {name}
+        {value}
+        {placeholder}
+        {disabled}
+        class={inputClasses()}
+        oninput={handleInput}
+        {...restProps}
+    />
+</div>

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

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

package/dist/atoms/OptimizedImage.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    interface Props {
+        src: string;
+        alt?: string;
+        width?: number | string;
+        height?: number | string;
+        className?: string;
+    }
+
+    let {
+        src,
+        alt = "",
+        width = "100%",
+        height = "auto",
+        className = "",
+        children,
+        ...restProps
+    } = $props<Props & { children?: any }>();
+</script>
+
+<img
+    {src}
+    {alt}
+    class="w-full h-auto object-cover {className}"
+    style="width: {typeof width === 'number'
+        ? width + 'px'
+        : width}; height: {typeof height === 'number'
+        ? height + 'px'
+        : height};"
+    loading="lazy"
+    {...restProps}
+/>

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

@@ -0,0 +1,13 @@
+interface Props {
+    src: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const OptimizedImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type OptimizedImage = ReturnType<typeof OptimizedImage>;
+export default OptimizedImage;

package/dist/atoms/Progress.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    interface Props {
+        value?: number;
+        max?: number;
+        size?: "sm" | "md" | "lg";
+        label?: string;
+    }
+
+    let {
+        value = 0,
+        max = 100,
+        size = "md",
+        label = "",
+        ...restProps
+    }: Props = $props();
+
+    // Generate unique ID - SSR safe
+    let progressId = $state(
+        typeof window !== "undefined"
+            ? `progress-${Math.random().toString(36).substr(2, 9)}`
+            : `progress-ssr-${Date.now()}`,
+    );
+
+    // Calculate percentage
+    let percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
+
+    // Simple size classes
+    let sizeClasses = $derived({
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3",
+    });
+</script>
+
+<div>
+    {#if label}
+        <div class="flex justify-between items-center mb-2">
+            <label for={progressId} class="text-sm font-medium text-label"
+                >{label}</label
+            >
+            <span class="text-sm text-caption">{Math.round(percentage)}%</span>
+        </div>
+    {/if}
+
+    <div
+        id={progressId}
+        class="w-full bg-gray-200 rounded-full overflow-hidden {sizeClasses[
+            size
+        ]}"
+        role="progressbar"
+        aria-valuenow={value}
+        aria-valuemin="0"
+        aria-valuemax={max}
+        {...restProps}
+    >
+        <div
+            class="h-full bg-blue-600 rounded-full"
+            style="width: {percentage}%"
+        ></div>
+    </div>
+</div>

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

@@ -0,0 +1,9 @@
+interface Props {
+    value?: number;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    label?: string;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/atoms/Select.svelte

@@ -0,0 +1,85 @@
+<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()}`;
+        }
+    }
+
+    interface Props {
+        value?: string | number | undefined;
+        options?: Array<{
+            value: string | number;
+            label: string;
+            disabled?: boolean;
+        }>;
+        placeholder?: string;
+        label?: string;
+        disabled?: boolean;
+        size?: "sm" | "md" | "lg";
+        onchange?: (event: Event) => void;
+    }
+
+    let {
+        value = undefined,
+        options = [],
+        placeholder = "Select an option",
+        label = "",
+        disabled = false,
+        size = "md",
+        ...restProps
+    }: Props = $props();
+
+    // Generate unique ID - SSR safe (call directly, not in $state)
+    const selectId = generateId("select");
+
+    // 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
+    });
+
+    // Select classes using Badge pattern
+    const selectClasses = $derived(() => {
+        const baseClasses =
+            "w-full border border-gray-300 rounded-md bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed";
+
+        return `${baseClasses} ${sizeClass()}`.trim();
+    });
+
+    function handleChange(event: Event) {
+        const target = event.target as HTMLSelectElement;
+        value = target.value;
+    }
+</script>
+
+<div>
+    {#if label}
+        <label for={selectId} class="block text-sm font-medium text-label mb-1"
+            >{label}</label
+        >
+    {/if}
+
+    <select
+        id={selectId}
+        {value}
+        {disabled}
+        class={selectClasses()}
+        onchange={handleChange}
+        {...restProps}
+    >
+        {#if placeholder && !value}
+            <option value="" disabled>{placeholder}</option>
+        {/if}
+        {#each options as option (option.value)}
+            <option value={option.value} disabled={option.disabled}>
+                {option.label}
+            </option>
+        {/each}
+    </select>
+</div>

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

@@ -0,0 +1,16 @@
+interface Props {
+    value?: string | number | undefined;
+    options?: Array<{
+        value: string | number;
+        label: string;
+        disabled?: boolean;
+    }>;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    onchange?: (event: Event) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/atoms/Skeleton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    interface Props {
+        width?: string;
+        height?: string;
+        className?: string;
+    }
+
+    let {
+        width = "100%",
+        height = "1rem",
+        className = "",
+        ...restProps
+    }: Props = $props();
+</script>
+
+<div
+    class="animate-pulse bg-gray-200 rounded {className}"
+    style="width: {width}; height: {height};"
+    {...restProps}
+></div>

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

@@ -0,0 +1,8 @@
+interface Props {
+    width?: string;
+    height?: string;
+    className?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;