zabi-components 4.0.0 → 5.0.1

package/dist/components/index.d.ts

@@ -0,0 +1,31 @@
+export { default as Toggle } from './atoms/Toggle.svelte';
+export { default as Badge } from './atoms/Badge.svelte';
+export { default as Button } from './atoms/Button.svelte';
+export { default as Card } from './atoms/Card.svelte';
+export { default as Input } from './atoms/Input.svelte';
+export { default as Textarea } from './atoms/Textarea.svelte';
+export { default as Select } from './atoms/Select.svelte';
+export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as Heading } from './atoms/Heading.svelte';
+export { default as Alert } from './molecules/Alert.svelte';
+export { default as ComponentDemo } from './molecules/ComponentDemo.svelte';
+export { default as ContactForm } from './molecules/ContactForm.svelte';
+export { default as Dropdown } from './molecules/Dropdown.svelte';
+export { default as Form } from './molecules/Form.svelte';
+export { default as ImageUpload } from './molecules/ImageUpload.svelte';
+export { default as Modal } from './molecules/Modal.svelte';
+export { default as SlideUp } from './molecules/SlideUp.svelte';
+export { default as Tabs } from './molecules/Tabs.svelte';
+export { default as Navbar } from './organisms/Navbar.svelte';
+export { default as Navigation } from './organisms/Navigation.svelte';
+export declare const createId: (prefix?: string) => string;
+export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
+export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;
+export declare const validateEmail: (email: string) => boolean;
+export declare const validateRequired: (value: any) => boolean;
+export declare const isBrowser: () => boolean;
+export declare const safeWindow: () => Window | undefined;
+export declare const safeDocument: () => Document | undefined;
+export declare const safeLocalStorage: () => Storage | undefined;
+export declare const generateId: (prefix?: string) => string;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAM5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAM1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAOtE,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAMhD,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAGtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGrE,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAE7C,CAAC;AAGF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAElD,CAAC"}

package/dist/components/molecules/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":""}

package/dist/components/organisms/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -1,15 +1,30 @@
-// Main library entry point
-// Re-export all components from their respective categories
-
-// Atomic Components
-export * from './atoms/index.js';
-
-// Molecular Components  
-export * from './molecules/index.js';
-
-// Organism Components
-export * from './organisms/index.js';
-
-// Re-export types
-export type { FieldConfig } from './molecules/KeyValueForm.types.js';
-export * from './types/index.js';
+export { default as Toggle } from './atoms/Toggle.svelte';
+export { default as Badge } from './atoms/Badge.svelte';
+export { default as Button } from './atoms/Button.svelte';
+export { default as Card } from './atoms/Card.svelte';
+export { default as Input } from './atoms/Input.svelte';
+export { default as Textarea } from './atoms/Textarea.svelte';
+export { default as Select } from './atoms/Select.svelte';
+export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as Heading } from './atoms/Heading.svelte';
+export { default as Alert } from './molecules/Alert.svelte';
+export { default as ComponentDemo } from './molecules/ComponentDemo.svelte';
+export { default as ContactForm } from './molecules/ContactForm.svelte';
+export { default as Dropdown } from './molecules/Dropdown.svelte';
+export { default as Form } from './molecules/Form.svelte';
+export { default as ImageUpload } from './molecules/ImageUpload.svelte';
+export { default as Modal } from './molecules/Modal.svelte';
+export { default as SlideUp } from './molecules/SlideUp.svelte';
+export { default as Tabs } from './molecules/Tabs.svelte';
+export { default as Navbar } from './organisms/Navbar.svelte';
+export { default as Navigation } from './organisms/Navigation.svelte';
+export declare const createId: (prefix?: string) => string;
+export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
+export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;
+export declare const validateEmail: (email: string) => boolean;
+export declare const validateRequired: (value: any) => boolean;
+export declare const isBrowser: () => boolean;
+export declare const safeWindow: () => Window | undefined;
+export declare const safeDocument: () => Document | undefined;
+export declare const safeLocalStorage: () => Storage | undefined;
+export declare const generateId: (prefix?: string) => string;

package/dist/index.js

@@ -0,0 +1,74 @@
+// Zabi Components - Clean & Simple Svelte Component Library
+// Main library entry point - All components in one place
+// ============================================================================
+// ATOM COMPONENTS - Basic UI building blocks
+// ============================================================================
+// Form Controls - All SSR-safe components
+export { default as Toggle } from './atoms/Toggle.svelte';
+export { default as Badge } from './atoms/Badge.svelte';
+export { default as Button } from './atoms/Button.svelte';
+export { default as Card } from './atoms/Card.svelte';
+export { default as Input } from './atoms/Input.svelte';
+export { default as Textarea } from './atoms/Textarea.svelte';
+export { default as Select } from './atoms/Select.svelte';
+export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as Heading } from './atoms/Heading.svelte';
+// ============================================================================
+// MOLECULE COMPONENTS - Composite UI elements
+// ============================================================================
+export { default as Alert } from './molecules/Alert.svelte';
+export { default as ComponentDemo } from './molecules/ComponentDemo.svelte';
+export { default as ContactForm } from './molecules/ContactForm.svelte';
+export { default as Dropdown } from './molecules/Dropdown.svelte';
+export { default as Form } from './molecules/Form.svelte';
+export { default as ImageUpload } from './molecules/ImageUpload.svelte';
+export { default as Modal } from './molecules/Modal.svelte';
+export { default as SlideUp } from './molecules/SlideUp.svelte';
+export { default as Tabs } from './molecules/Tabs.svelte';
+// ============================================================================
+// ORGANISM COMPONENTS - Complex UI sections
+// ============================================================================
+export { default as Navbar } from './organisms/Navbar.svelte';
+export { default as Navigation } from './organisms/Navigation.svelte';
+// ============================================================================
+// UTILITIES - Helper functions and utilities
+// ============================================================================
+// Simple utility functions
+export const createId = (prefix = 'id') => {
+    if (typeof window !== 'undefined') {
+        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    else {
+        return `${prefix}-ssr-${Date.now()}`;
+    }
+};
+export const cn = (...classes) => classes.filter(Boolean).join(' ');
+// Form utilities
+export const getFormData = (form) => {
+    const formData = new FormData(form);
+    return Object.fromEntries(formData.entries());
+};
+// Validation utilities
+export const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+};
+export const validateRequired = (value) => {
+    return value !== null && value !== undefined && value !== '';
+};
+// SSR-safe utilities
+export const isBrowser = () => {
+    return typeof window !== 'undefined';
+};
+export const safeWindow = () => {
+    return isBrowser() ? window : undefined;
+};
+export const safeDocument = () => {
+    return isBrowser() ? document : undefined;
+};
+export const safeLocalStorage = () => {
+    return isBrowser() ? localStorage : undefined;
+};
+export const generateId = (prefix = 'id') => {
+    return createId(prefix);
+};

package/dist/molecules/Alert.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+    interface Props {
+        variant?: "info" | "success" | "warning" | "error";
+        title?: string;
+        message?: string;
+        closable?: boolean;
+        className?: string;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        variant = "info",
+        title = "",
+        message = "",
+        closable = false,
+        className = "",
+        onclick,
+        children,
+        ...restProps
+    }: Props & { children?: any } = $props();
+
+    function handleDismiss(event: MouseEvent) {
+        // Call the parent's onclick handler if provided
+        if (onclick) {
+            onclick(event);
+        }
+    }
+
+    let alertClasses = $derived({
+        info: "bg-info-surface text-body border border-info",
+        success: "bg-success-surface text-success border border-success",
+        warning: "bg-warning-surface text-warning border border-warning",
+        error: "bg-error-surface text-error border border-error",
+    });
+
+    let alertRole = $derived(
+        variant === "success" || variant === "info" ? "status" : "alert",
+    );
+
+    let iconSvg = $derived({
+        info: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+        </svg>`,
+        success: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+        </svg>`,
+        warning: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+        </svg>`,
+        error: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+        </svg>`,
+    });
+</script>
+
+<div
+    class="relative rounded-md p-4 border {alertClasses[
+        variant
+    ]} transition-all duration-200 motion-reduce:transition-none {className}"
+    role={alertRole}
+    aria-live={variant === "success" || variant === "info"
+        ? "polite"
+        : "assertive"}
+    aria-atomic="true"
+    {...restProps}
+>
+    <!-- Dismiss button (X in top right) -->
+    {#if closable}
+        <button
+            onclick={handleDismiss}
+            class="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full text-description hover:text-body transition-colors duration-200 motion-reduce:transition-none group focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2"
+            aria-label="Dismiss alert"
+            type="button"
+        >
+            <svg
+                class="w-4 h-4 text-current group-hover:scale-110 transition-transform duration-200 motion-reduce:transition-none"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                />
+            </svg>
+        </button>
+    {/if}
+
+    <!-- Content -->
+    <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
+        <!-- Icon -->
+        <div class="shrink-0 mt-0.5">
+            {@html iconSvg[variant]}
+        </div>
+
+        <!-- Text content -->
+        <div class="flex-1 min-w-0">
+            {#if title}
+                <h4 class="font-semibold text-sm mb-1 text-headline">
+                    {title}
+                </h4>
+            {/if}
+            {#if message}
+                <p class="text-sm leading-relaxed text-body">
+                    {message}
+                </p>
+            {/if}
+            <!-- Default slot for custom content -->
+            {@render children?.()}
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,14 @@
+interface Props {
+    variant?: "info" | "success" | "warning" | "error";
+    title?: string;
+    message?: string;
+    closable?: boolean;
+    className?: string;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/molecules/ComponentDemo.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import CodeBlock from "../atoms/CodeBlock.svelte";
+
+    interface Props {
+        title: string;
+        description?: string;
+        code: string;
+        language?: string;
+        className?: string;
+    }
+
+    let {
+        title,
+        description = "",
+        code,
+        language = "svelte",
+        className = "",
+        children,
+        ...restProps
+    } = $props<Props & { children?: any }>();
+
+    let showCode = $state(false);
+</script>
+
+<div
+    class="component-demo bg-surface border border-border rounded-lg overflow-hidden {className}"
+    {...restProps}
+>
+    <!-- Header -->
+    <div class="px-6 py-4 border-b border-border bg-surface-secondary">
+        <div class="flex items-center justify-between">
+            <div>
+                <h3 class="text-lg font-semibold text-text">{title}</h3>
+                {#if description}
+                    <p class="text-sm text-text-secondary mt-1">
+                        {description}
+                    </p>
+                {/if}
+            </div>
+            <button
+                onclick={() => (showCode = !showCode)}
+                class="flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text hover:bg-surface rounded-md transition-colors duration-200"
+                aria-label={showCode ? "Show preview" : "Show code"}
+            >
+                {#if showCode}
+                    <svg
+                        class="w-4 h-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                        />
+                    </svg>
+                    Preview
+                {:else}
+                    <svg
+                        class="w-4 h-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+                        />
+                    </svg>
+                    Code
+                {/if}
+            </button>
+        </div>
+    </div>
+
+    <!-- Content -->
+    <div class="p-6">
+        {#if showCode}
+            <CodeBlock {code} {language} />
+        {:else}
+            <div class="min-h-[100px] flex items-center justify-center">
+                {@render children?.()}
+            </div>
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,13 @@
+interface Props {
+    title: string;
+    description?: string;
+    code: string;
+    language?: string;
+    className?: string;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const ComponentDemo: import("svelte").Component<$$ComponentProps, {}, "">;
+type ComponentDemo = ReturnType<typeof ComponentDemo>;
+export default ComponentDemo;

package/dist/molecules/ContactForm.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import Form from "./Form.svelte";
+    import Input from "../atoms/Input.svelte";
+    import Textarea from "../atoms/Textarea.svelte";
+    import Checkbox from "../atoms/Checkbox.svelte";
+    import Button from "../atoms/Button.svelte";
+    import type { ContactFormData } from "../../types/page.types";
+
+    interface Props {
+        className?: string;
+        onsubmit?: (event: SubmitEvent) => void;
+    }
+
+    let {
+        className = "",
+        children,
+        ...restProps
+    } = $props<Props & { children?: any }>();
+
+    let formData = $state<ContactFormData>({
+        name: "",
+        email: "",
+        message: "",
+        subscribe: false,
+    });
+
+    function handleFormSubmit(event: SubmitEvent) {
+        const formData = new FormData(event.target as HTMLFormElement);
+        const data: ContactFormData = {
+            name: (formData.get("name") as string) || "",
+            email: (formData.get("email") as string) || "",
+            message: (formData.get("message") as string) || "",
+            subscribe: formData.get("subscribe") === "on" || false,
+        };
+
+        // Form submission is now handled by the parent component
+        // through event forwarding. The data is available for processing.
+        console.log("Form submitted with data:", data);
+    }
+</script>
+
+<div class="max-w-md mx-auto {className}">
+    <div class="mb-6">
+        <h2 class="text-2xl font-bold text-headline mb-2">Get in Touch</h2>
+        <p class="text-description">
+            We'd love to hear from you. Send us a message and we'll respond as
+            soon as possible.
+        </p>
+    </div>
+
+    <Form onsubmit={handleFormSubmit} className="space-y-4">
+        <div class="space-y-4">
+            <Input
+                type="text"
+                name="name"
+                label="Name"
+                placeholder="Enter your name"
+                value={formData.name}
+                oninput={(e) =>
+                    (formData.name = (e.target as HTMLInputElement).value)}
+            />
+            <Input
+                type="email"
+                name="email"
+                label="Email"
+                placeholder="Enter your email"
+                value={formData.email}
+                oninput={(e) =>
+                    (formData.email = (e.target as HTMLInputElement).value)}
+            />
+            <Textarea
+                name="message"
+                label="Message"
+                placeholder="Enter your message"
+                rows={4}
+                value={formData.message}
+                oninput={(e) =>
+                    (formData.message = (
+                        e.target as HTMLTextAreaElement
+                    ).value)}
+            />
+            <Checkbox
+                name="subscribe"
+                label="Subscribe to updates"
+                checked={formData.subscribe}
+                onchange={(e) =>
+                    (formData.subscribe = (
+                        e.target as HTMLInputElement
+                    ).checked)}
+            />
+        </div>
+        <div class="pt-4">
+            <Button type="submit" variant="primary" size="md">
+                Send Message
+            </Button>
+        </div>
+    </Form>
+</div>

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

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

package/dist/molecules/Dropdown.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+    interface Props {
+        isOpen?: boolean;
+        placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    }
+
+    let {
+        isOpen = false,
+        placement = "bottom-start",
+        children,
+        trigger,
+        ...restProps
+    }: Props & { children?: any; trigger?: any } = $props();
+</script>
+
+<div
+    class="dropdown-container group relative inline-block"
+    data-placement={placement}
+>
+    {@render trigger?.()}
+
+    {#if isOpen}
+        <div
+            class="dropdown-content opacity-100 visible transform-none group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible"
+        >
+            {@render children?.()}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .dropdown-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .dropdown-content {
+        position: absolute;
+        z-index: 50;
+        background-color: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        box-shadow:
+            0 10px 15px -3px rgba(0, 0, 0, 0.1),
+            0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        min-width: 12rem;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+            opacity 0.2s ease-in-out,
+            visibility 0.2s ease-in-out,
+            transform 0.2s ease-in-out;
+    }
+
+    /* Positioning based on data-placement */
+    .dropdown-container[data-placement="bottom-start"] .dropdown-content {
+        top: calc(100% + 8px);
+        left: 0;
+        transform: translateY(4px);
+    }
+
+    .dropdown-container[data-placement="bottom-end"] .dropdown-content {
+        top: calc(100% + 8px);
+        right: 0;
+        transform: translateY(4px);
+    }
+
+    .dropdown-container[data-placement="top-start"] .dropdown-content {
+        bottom: calc(100% + 8px);
+        left: 0;
+        transform: translateY(-4px);
+    }
+
+    .dropdown-container[data-placement="top-end"] .dropdown-content {
+        bottom: calc(100% + 8px);
+        right: 0;
+        transform: translateY(-4px);
+    }
+
+    /* Show on hover/focus */
+    .dropdown-container:hover .dropdown-content,
+    .dropdown-container:focus-within .dropdown-content {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+
+    /* Arrow styling */
+    .dropdown-content::before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 6px;
+        border-color: transparent;
+    }
+
+    .dropdown-container[data-placement="bottom-start"]
+        .dropdown-content::before,
+    .dropdown-container[data-placement="bottom-end"] .dropdown-content::before {
+        top: -6px;
+        border-bottom-color: white;
+    }
+
+    .dropdown-container[data-placement="top-start"] .dropdown-content::before,
+    .dropdown-container[data-placement="top-end"] .dropdown-content::before {
+        bottom: -6px;
+        border-top-color: white;
+    }
+
+    .dropdown-container[data-placement="bottom-start"]
+        .dropdown-content::before {
+        left: 1rem;
+    }
+
+    .dropdown-container[data-placement="bottom-end"] .dropdown-content::before {
+        right: 1rem;
+    }
+
+    .dropdown-container[data-placement="top-start"] .dropdown-content::before {
+        left: 1rem;
+    }
+
+    .dropdown-container[data-placement="top-end"] .dropdown-content::before {
+        right: 1rem;
+    }
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    isOpen?: boolean;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+}
+type $$ComponentProps = Props & {
+    children?: any;
+    trigger?: any;
+};
+declare const Dropdown: import("svelte").Component<$$ComponentProps, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;