zabi-components 4.0.0 → 5.0.1

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';