zabi-components 4.0.2 → 5.0.2

package/dist/molecules/Form.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    interface Props {
+        method?: "get" | "post";
+        action?: string;
+        className?: string;
+        onsubmit?: (event: SubmitEvent) => void;
+    }
+
+    let {
+        method = "post",
+        action = "",
+        className = "",
+        onsubmit,
+        children,
+        ...restProps
+    } = $props<Props & { children?: any }>();
+
+    function handleSubmit(event: SubmitEvent) {
+        const formData = new FormData(event.target as HTMLFormElement);
+        const data = Object.fromEntries(formData.entries());
+
+        // Call the parent's onsubmit handler if provided
+        if (onsubmit) {
+            onsubmit(event);
+        }
+    }
+</script>
+
+<form
+    {method}
+    {action}
+    class="space-y-4 {className}"
+    onsubmit={handleSubmit}
+    {...restProps}
+>
+    {@render children?.()}
+</form>

package/dist/molecules/Form.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    method?: "get" | "post";
+    action?: string;
+    className?: string;
+    onsubmit?: (event: SubmitEvent) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const Form: import("svelte").Component<$$ComponentProps, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/molecules/ImageUpload.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import Button from "../atoms/Button.svelte";
+
+    interface Props {
+        value?: string | null;
+        disabled?: boolean;
+        accept?: string;
+        placeholder?: string;
+        onchange?: (event: Event) => void;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        value = null,
+        disabled = false,
+        accept = "image/*",
+        placeholder = "No image selected",
+        children,
+        ...restProps
+    } = $props<Props & { children?: any }>();
+
+    let fileInput = $state<HTMLInputElement>();
+
+    function handleFileSelect(event: Event) {
+        const input = event.target as HTMLInputElement;
+        if (!input.files || input.files.length === 0) return;
+
+        const file = input.files[0];
+
+        // SSR-safe URL creation
+        if (typeof URL !== "undefined" && URL.createObjectURL) {
+            const url = URL.createObjectURL(file);
+            value = url;
+        }
+    }
+
+    function removeImage() {
+        if (value && typeof URL !== "undefined" && URL.revokeObjectURL) {
+            URL.revokeObjectURL(value);
+        }
+        value = null;
+    }
+
+    function triggerFileSelect() {
+        fileInput?.click();
+    }
+</script>
+
+<div class="space-y-3">
+    {#if value}
+        <!-- Image Display -->
+        <div class="relative group">
+            <img
+                src={value}
+                alt=""
+                class="w-full h-32 object-cover rounded-lg border border-gray-300"
+            />
+            <div
+                class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"
+            >
+                <div class="flex gap-2">
+                    <Button
+                        variant="secondary"
+                        size="sm"
+                        onclick={triggerFileSelect}
+                        {disabled}
+                    >
+                        Change
+                    </Button>
+                    <Button
+                        variant="danger"
+                        size="sm"
+                        onclick={removeImage}
+                        {disabled}
+                    >
+                        Remove
+                    </Button>
+                </div>
+            </div>
+        </div>
+    {:else}
+        <!-- Empty State -->
+        <div
+            class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors cursor-pointer"
+            onclick={triggerFileSelect}
+            role="button"
+            tabindex="0"
+            onkeydown={(e) => e.key === "Enter" && triggerFileSelect()}
+        >
+            <div class="space-y-3">
+                <div
+                    class="w-12 h-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center"
+                >
+                    <span class="text-2xl">📷</span>
+                </div>
+                <div>
+                    <p class="font-medium text-gray-900">{placeholder}</p>
+                    <p class="text-sm text-gray-500">Click to choose a file</p>
+                </div>
+            </div>
+        </div>
+    {/if}
+
+    <!-- Hidden File Input -->
+    <input
+        bind:this={fileInput}
+        type="file"
+        {accept}
+        onchange={handleFileSelect}
+        class="hidden"
+    />
+</div>

package/dist/molecules/ImageUpload.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    value?: string | null;
+    disabled?: boolean;
+    accept?: string;
+    placeholder?: string;
+    onchange?: (event: Event) => void;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
+export default ImageUpload;

package/dist/molecules/Modal.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    interface Props {
+        isOpen?: boolean;
+        title?: string;
+        onclick?: (event: Event) => void;
+        onkeydown?: (event: Event) => void;
+    }
+
+    let {
+        isOpen = false,
+        title = "",
+        onclick,
+        onkeydown,
+        children,
+        footer,
+        ...restProps
+    }: Props & { children?: any; footer?: any } = $props();
+
+    function closeModal(event?: Event) {
+        isOpen = false;
+        if (onclick && event) {
+            onclick(event);
+        }
+    }
+
+    function handleBackdropClick(event: Event) {
+        if (event.target === event.currentTarget) {
+            closeModal(event);
+        }
+    }
+
+    function handleKeydown(event: Event) {
+        const keyboardEvent = event as KeyboardEvent;
+        if (keyboardEvent.key === "Escape") {
+            closeModal(event);
+        }
+        if (onkeydown) {
+            onkeydown(event);
+        }
+    }
+</script>
+
+{#if isOpen}
+    <div
+        class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
+        onclick={handleBackdropClick}
+        onkeydown={handleKeydown}
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+    >
+        <div
+            class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto"
+        >
+            <!-- Header -->
+            <div
+                class="flex items-center justify-between p-6 border-b border-gray-200"
+            >
+                <h2 class="text-xl font-semibold text-headline">{title}</h2>
+                <button
+                    type="button"
+                    onclick={closeModal}
+                    class="text-gray-400 hover:text-gray-600 text-2xl"
+                    aria-label="Close"
+                >
+                    ×
+                </button>
+            </div>
+
+            <!-- Content -->
+            <div class="p-6">
+                {@render children?.()}
+            </div>
+
+            <!-- Footer -->
+            {#if footer}
+                <div
+                    class="flex justify-end gap-3 p-6 border-t border-gray-200"
+                >
+                    {@render footer?.()}
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}

package/dist/molecules/Modal.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    isOpen?: boolean;
+    title?: string;
+    onclick?: (event: Event) => void;
+    onkeydown?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+    footer?: any;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/molecules/SlideUp.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    interface Props {
+        isOpen?: boolean;
+        title?: string;
+        onclick?: (event: Event) => void;
+        onkeydown?: (event: Event) => void;
+    }
+
+    let {
+        isOpen = false,
+        title = "",
+        children,
+        ...restProps
+    } = $props<Props & { children?: any }>();
+
+    function closeSlideUp() {
+        isOpen = false;
+    }
+
+    function handleBackdropClick(event: Event) {
+        if (event.target === event.currentTarget) {
+            closeSlideUp();
+        }
+    }
+
+    function handleKeydown(event: Event) {
+        const keyboardEvent = event as KeyboardEvent;
+        if (keyboardEvent.key === "Escape") {
+            closeSlideUp();
+        }
+    }
+</script>
+
+{#if isOpen}
+    <!-- Backdrop -->
+    <div
+        class="fixed inset-0 bg-black/50 z-50"
+        onclick={handleBackdropClick}
+        onkeydown={handleKeydown}
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+    ></div>
+
+    <!-- SlideUp Content -->
+    <div
+        class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 rounded-t-xl shadow-xl z-50 max-h-[80vh] overflow-y-auto"
+        role="dialog"
+        aria-modal="true"
+    >
+        <!-- Header -->
+        {#if title}
+            <div
+                class="flex items-center justify-between p-4 border-b border-gray-200"
+            >
+                <h3 class="text-lg font-semibold text-gray-900">{title}</h3>
+                <button
+                    type="button"
+                    class="text-gray-400 hover:text-gray-600 text-2xl"
+                    onclick={closeSlideUp}
+                    aria-label="Close"
+                >
+                    ×
+                </button>
+            </div>
+        {/if}
+
+        <!-- Content -->
+        <div class="p-4">
+            {@render children?.()}
+        </div>
+    </div>
+{/if}

package/dist/molecules/SlideUp.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    isOpen?: boolean;
+    title?: string;
+    onclick?: (event: Event) => void;
+    onkeydown?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const SlideUp: import("svelte").Component<$$ComponentProps, {}, "">;
+type SlideUp = ReturnType<typeof SlideUp>;
+export default SlideUp;

package/dist/molecules/Tabs.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    interface Props {
+        tabs?: Array<{
+            id: string;
+            label: string;
+            disabled?: boolean;
+        }>;
+        activeTab?: string;
+        variant?: "default" | "pills";
+        onclick?: (event: Event) => void;
+        onkeydown?: (event: Event) => void;
+    }
+
+    let {
+        tabs = [],
+        activeTab = "",
+        variant = "default",
+        children,
+        ...restProps
+    }: Props & { children?: any } = $props();
+
+    function selectTab(tabId: string) {
+        activeTab = tabId;
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+            const direction = event.key === "ArrowLeft" ? -1 : 1;
+            const nextIndex =
+                (currentIndex + direction + tabs.length) % tabs.length;
+            selectTab(tabs[nextIndex].id);
+        }
+    }
+</script>
+
+<div class="tabs-container">
+    <!-- Tab List -->
+    <div
+        class="flex border-b border-gray-200"
+        role="tablist"
+        tabindex="0"
+        onkeydown={handleKeydown}
+    >
+        {#each tabs as tab}
+            <button
+                type="button"
+                role="tab"
+                class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab ===
+                tab.id
+                    ? variant === 'pills'
+                        ? 'bg-blue-100 text-blue-700 border-blue-500'
+                        : 'border-blue-500 text-body'
+                    : 'border-transparent text-description hover:text-body hover:border-gray-300'}"
+                onclick={() => selectTab(tab.id)}
+                disabled={tab.disabled}
+                aria-selected={activeTab === tab.id}
+            >
+                {tab.label}
+            </button>
+        {/each}
+    </div>
+
+    <!-- Tab Content -->
+    <div class="mt-4">
+        {@render children?.({ activeTab })}
+    </div>
+</div>

package/dist/molecules/Tabs.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    tabs?: Array<{
+        id: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    activeTab?: string;
+    variant?: "default" | "pills";
+    onclick?: (event: Event) => void;
+    onkeydown?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/molecules/index.d.ts

@@ -1,11 +0,0 @@
-// Molecular Components - Simple combinations of atoms
-export { default as Alert } from './Alert.svelte';
-export { default as Dropdown } from './Dropdown.svelte';
-export { default as FileUpload } from './ImageUpload.svelte';
-export { default as DynamicForm } from './KeyValueForm.svelte';
-export { default as Modal } from './Modal.svelte';
-export { default as SlideUp } from './SlideUp.svelte';
-export { default as Tabs } from './Tabs.svelte';
-
-// Types
-export type { FieldConfig } from './KeyValueForm.types';

package/dist/molecules/index.js

@@ -1,13 +1,2 @@
-import { A as s, C as e, a as m, D as r, F as t, I as p, L as d, M as l, S as n, T as C } from "../ContactForm-CHI_jeFY.js";
-export {
-  s as Alert,
-  e as ComponentDemo,
-  m as ContactForm,
-  r as Dropdown,
-  t as Form,
-  p as ImageUpload,
-  d as Layout,
-  l as Modal,
-  n as SlideUp,
-  C as Tabs
-};
+"use strict";
+// Export molecular components - Temporarily disabled to avoid SSR issues

package/dist/organisms/Navbar.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import ThemeToggle from "../atoms/ThemeToggle.svelte";
+
+    interface Props {
+        brand?: string;
+        showThemeToggle?: boolean;
+        className?: string;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        brand = "",
+        showThemeToggle = true,
+        className = "",
+        children,
+        nav,
+        actions,
+        ...restProps
+    }: Props & { children?: any; nav?: any; actions?: any } = $props();
+
+    let isMenuOpen = $state(false);
+
+    function toggleMenu() {
+        isMenuOpen = !isMenuOpen;
+    }
+
+    function handleBrandClick() {
+        // Brand click is now handled by the parent component
+        // through event forwarding
+    }
+</script>
+
+<nav
+    class="bg-white border-b border-gray-200 sticky top-0 z-50 {className}"
+    {...restProps}
+>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-16">
+            <!-- Brand -->
+            <div class="shrink-0">
+                <button
+                    type="button"
+                    class="text-xl font-bold text-headline"
+                    onclick={handleBrandClick}
+                >
+                    {brand}
+                </button>
+            </div>
+
+            <!-- Desktop Navigation -->
+            <div class="hidden md:block">
+                <div class="ml-10 flex items-baseline space-x-4">
+                    {@render nav?.()}
+                </div>
+            </div>
+
+            <!-- Right side -->
+            <div class="hidden md:block">
+                <div class="ml-4 flex items-center space-x-4">
+                    {@render actions?.()}
+                    {#if showThemeToggle}
+                        <ThemeToggle />
+                    {/if}
+                </div>
+            </div>
+
+            <!-- Mobile menu button -->
+            <div class="md:hidden">
+                <button
+                    type="button"
+                    class="text-description hover:text-body"
+                    onclick={toggleMenu}
+                    aria-label="Toggle menu"
+                >
+                    <span class="text-2xl">☰</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Mobile menu -->
+        {#if isMenuOpen}
+            <div class="md:hidden">
+                <div
+                    class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200"
+                >
+                    {@render nav?.()}
+                    <div class="pt-4">
+                        {@render actions?.()}
+                        {#if showThemeToggle}
+                            <div class="mt-2">
+                                <ThemeToggle />
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+        {/if}
+    </div>
+</nav>

package/dist/organisms/Navbar.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    brand?: string;
+    showThemeToggle?: boolean;
+    className?: string;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+    nav?: any;
+    actions?: any;
+};
+declare const Navbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/organisms/Navigation.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    interface Props {
+        variant?: "header" | "sidebar";
+        items?: Array<{
+            label: string;
+            href: string;
+        }>;
+        currentPath?: string;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        variant = "header",
+        items = [],
+        currentPath = "",
+        children,
+        ...restProps
+    }: Props & { children?: any } = $props();
+
+    function handleClick(item: any, event: MouseEvent) {
+        event.preventDefault();
+        // Navigation is now handled by the parent component
+        // through event forwarding
+    }
+</script>
+
+<nav class="navigation navigation-{variant}" {...restProps}>
+    <ul
+        class="flex {variant === 'sidebar'
+            ? 'flex-col space-y-2'
+            : 'space-x-6'}"
+    >
+        {#each items as item}
+            <li>
+                <a
+                    href={item.href}
+                    class="px-3 py-2 text-sm font-medium rounded-md transition-colors {currentPath ===
+                    item.href
+                        ? 'bg-blue-100 text-body'
+                        : 'text-description hover:text-body hover:bg-gray-100'}"
+                    onclick={(e) => handleClick(item, e)}
+                >
+                    {item.label}
+                </a>
+            </li>
+        {/each}
+    </ul>
+</nav>

package/dist/organisms/Navigation.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    variant?: "header" | "sidebar";
+    items?: Array<{
+        label: string;
+        href: string;
+    }>;
+    currentPath?: string;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const Navigation: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;

package/dist/organisms/index.d.ts

@@ -1,4 +0,0 @@
-// Organism Components - Complex components with state management
-export { default as Navbar } from './Navbar.svelte';
-export { default as ToastContainer } from './NotificationManager.svelte';
-export { default as ToastManager } from './ToastManager.svelte';

package/dist/organisms/index.js

@@ -1,5 +1,2 @@
-import { N as r, a as N } from "../Navigation-BOT-UHg0.js";
-export {
-  r as Navbar,
-  N as Navigation
-};
+"use strict";
+// Export organism components - Temporarily disabled to avoid SSR issues