New Changes with Model

src/components/ColorSwitcher.astro

@@ -106,7 +106,7 @@ const item =
     )}
 
     <div
-      class="wr:absolute wr:right-0 wr:z-50 wr:w-56 wr:border-border wr:bg-popover/90 wr:backdrop-blur-md wr:text-popover-foreground wr:p-1.5 wr:origin-top-right wr:scale-95 wr:duration-150 wr:ease-out wr:transition-[opacity,margin] wr:border wr:border-gray-100 wr:duration wr:hs-dropdown-open:opacity-100 wr:opacity-0 wr:hidden wr:min-w-60 wr:bg-white wr:shadow-md wr:rounded-lg wr:mt-2 wr:dark:bg-neutral-800 wr:dark:border wr:dark:border-neutral-700 wr:dark:divide-neutral-700 wr:after:h-4 wr:after:absolute wr:after:-bottom-4 wr:after:start-0 wr:after:w-full wr:before:h-4 wr:before:absolute wr:before:-top-4 wr:before:start-0 wr:before:w-full"
+      class="wr:absolute wr:right-0 wr:z-50 wr:w-56 wr:backdrop-blur-md wr:text-popover-foreground wr:p-1.5 wr:origin-top-right wr:scale-95 wr:duration-150 wr:ease-out wr:transition-[opacity,margin] wr:border wr:border-gray-100 wr:duration wr:hs-dropdown-open:opacity-100 wr:opacity-0 wr:hidden wr:min-w-60 wr:bg-white wr:shadow-md wr:rounded-lg wr:mt-2 wr:dark:bg-neutral-800 wr:dark:border wr:dark:border-neutral-700 wr:dark:divide-neutral-700 wr:after:h-4 wr:after:absolute wr:after:-bottom-4 wr:after:start-0 wr:after:w-full wr:before:h-4 wr:before:absolute wr:before:-top-4 wr:before:start-0 wr:before:w-full"
       role="menu"
       aria-label="Brand color"
       data-menu-panel

src/components/Modal.astro

@@ -0,0 +1,98 @@
+---
+import { cn } from "../utils/cn";
+
+interface Props {
+    id: string;
+    open: boolean;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    position?: "center" | "top" | "bottom";
+    closedby?: "none" | "closerequest" | "any";
+    onClose?: () => void;
+    dialogClass?: string;
+}
+
+const {
+    id,
+    size = "md",
+    position = "center",
+    open,
+    onClose,
+    closedby = "none",
+    dialogClass = "",
+} = Astro.props;
+---
+
+<div>
+    <div id={`trigger-${id}`} class="wr:w-fit">
+        <slot name="trigger" />
+    </div>
+    <dialog
+        open={open}
+        id={`modal-${id}`}
+        closedby={closedby}
+        class={cn(
+            "wr:absolute wr:rounded-md wr:shadow-lg wr:p-4 wr:bg-white wr:dark:bg-neutral-800 wr:m-0 wr:border-0",
+            size === "sm" && "wr:w-[300px]",
+            size === "md" && "wr:w-[500px]",
+            size === "lg" && "wr:w-[700px]",
+            size === "xl" && "wr:w-[900px]",
+            size === "full" &&
+                "wr:w-full wr:h-screen wr:max-w-none wr:rounded-none wr:inset-0",
+            position == "center" &&
+                size !== "full" &&
+                "wr:top-1/2 wr:left-1/2 wr:-translate-x-1/2 wr:-translate-y-1/2",
+            position == "top" && size !== "full" && "wr:top-[30px] wr:mx-auto",
+            position == "bottom" &&
+                size !== "full" &&
+                "wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
+            dialogClass,
+        )}
+    >
+        <slot name="content" />
+    </dialog>
+</div>
+
+<style>
+    dialog::backdrop {
+        background-color: transparent;
+        transition:
+            display 0.7s allow-discrete,
+            overlay 0.7s allow-discrete,
+            background-color 0.7s;
+    }
+
+    dialog:open::backdrop {
+        background-color: rgb(0 0 0 / 25%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    @starting-style {
+        dialog:open::backdrop {
+            background-color: transparent;
+        }
+    }
+</style>
+
+<script type="module" is:inline define:vars={{ id, onClose }}>
+    const trigger = document.getElementById(`trigger-${id}`);
+    const modal = document.getElementById(`modal-${id}`);
+    const close = document.getElementById(`close-${id}`);
+
+    trigger?.addEventListener("click", () => {
+        if (!modal.open) {
+            modal?.showModal();
+        }
+    });
+
+    modal?.addEventListener("close", () => {
+        if (onClose) {
+            onClose(modal);
+        }
+    });
+
+    close?.addEventListener("click", () => {
+        modal?.close();
+    });
+</script>

src/global.d.ts

@@ -3,6 +3,8 @@ declare global {
         schema: any;
         submit: any;
         upload: any;
+        myModal_open: any;
+        myModal_close: any;
     }
 }
 

src/index.ts

@@ -1,20 +1,20 @@
-
-export { default as Button } from "../src/components/Button.astro";
-export { default as ColorSwitcher } from "../src/components/ColorSwitcher.astro";
-export { default as DatePicker } from "../src/components/DatePicker.astro";
-export { default as DateTimePicker } from "../src/components/DateTimePicker.astro";
-export { default as Dropdown } from "../src/components/Dropdown.astro";
-export { default as Field } from "../src/components/Field.astro";
-export { default as FieldRow } from "../src/components/FieldRow.astro";
-export { default as FileUploader } from "../src/components/FileUploader.astro";
-export { default as Form } from "../src/components/Form.astro";
-export { default as MultiSelect } from "../src/components/MultiSelect.astro";
-export { default as OtpField } from "../src/components/OtpField.astro";
-export { default as PasswordField } from "../src/components/PasswordField.astro";
-export { default as ThemeSwitcher } from "../src/components/ThemeSwitcher.astro";
-export { default as TimePicker } from "../src/components/TimePicker.astro";
-export { default as Drawer } from "../src/components/Drawer.astro";
-export { default as Tooltip } from "../src/components/Tooltip.astro";
-
-// Utils
-export { cn } from "./utils/cn";
+export { default as Breadcrumb } from "./components/Breadcrumb.astro";
+export { default as Button } from "./components/Button.astro";
+export { default as ColorSwitcher } from "./components/ColorSwitcher.astro";
+export { default as DatePicker } from "./components/DatePicker.astro";
+export { default as DateTimePicker } from "./components/DateTimePicker.astro";
+export { default as Drawer } from "./components/Drawer.astro";
+export { default as Dropdown } from "./components/Dropdown.astro";
+export { default as Field } from "./components/Field.astro";
+export { default as FieldRow } from "./components/FieldRow.astro";
+export { default as FileUploader } from "./components/FileUploader.astro";
+export { default as Form } from "./components/Form.astro";
+export { default as Link } from "./components/Link.astro";
+export { default as Modal } from "./components/Modal.astro";
+export { default as MultiSelect } from "./components/MultiSelect.astro";
+export { default as OtpField } from "./components/OtpField.astro";
+export { default as PasswordField } from "./components/PasswordField.astro";
+export { default as ThemeSwitcher } from "./components/ThemeSwitcher.astro";
+export { default as TimePicker } from "./components/TimePicker.astro";
+export { default as Tooltip } from "./components/Tooltip.astro";
+export { cn } from "./utils/cn.js";

src/layouts/ComponentLayout.astro

@@ -29,6 +29,9 @@ import Base from "./Base.astro";
                 <li class="list-item">
                     <a href="/link">Link</a>
                 </li>
+                <li class="list-item">
+                    <a href="/modal">Modal</a>
+                </li>
                 <li class="list-item">
                     <a href="/forms">Forms</a>
                 </li>

src/pages/modal.astro

@@ -0,0 +1,164 @@
+---
+import Button from "../components/Button.astro";
+import Modal from "../components/Modal.astro";
+import ComponentLayout from "../layouts/ComponentLayout.astro";
+---
+
+<ComponentLayout class="wr:p-4">
+    <!-- Small Center Modal -->
+    <Modal id="sm-center" size="sm" position="center" closedby="closerequest">
+        <span slot="trigger">
+            <button
+                class="wr:px-4 wr:py-2 wr:rounded wr:bg-blue-600 wr:text-white"
+            >
+                Small Center
+            </button>
+        </span>
+        <div slot="content" class="wr:max-h-[400px] wr:overflow-y-auto">
+            <h2 class="wr:text-lg wr:font-semibold">Small Center Modal</h2>
+            <p class="wr:mt-2">
+                This is a small modal centered on the screen with limited
+                height.
+            </p>
+            <ul class="wr:space-y-2 wr:mt-4">
+                {
+                    Array.from({ length: 20 }).map((_, i) => (
+                        <li class="wr:p-2 wr:bg-gray-100 wr:rounded">
+                            Item {i + 1}
+                        </li>
+                    ))
+                }
+            </ul>
+            <button
+                id="close-sm-center"
+                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+            >
+                Close
+            </button>
+        </div>
+    </Modal>
+
+    <!-- Medium Top Modal -->
+    <Modal id="md-top" size="md" position="top" closedby="any">
+        <span slot="trigger">
+            <button
+                class="wr:px-4 wr:py-2 wr:rounded wr:bg-green-600 wr:text-white"
+            >
+                Medium Top
+            </button>
+        </span>
+        <div slot="content" class="wr:max-h-[500px] wr:overflow-y-auto">
+            <h2 class="wr:text-lg wr:font-semibold">Medium Top Modal</h2>
+            <p class="wr:mt-2">
+                This modal appears at the top of the page with scrollable
+                content.
+            </p>
+            {
+                Array.from({ length: 40 }).map((_, i) => (
+                    <p class="wr:mt-2">
+                        Paragraph {i + 1}: Lorem ipsum dolor sit amet,
+                        consectetur adipiscing elit.
+                    </p>
+                ))
+            }
+            <button
+                id="close-md-top"
+                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+            >
+                Close
+            </button>
+        </div>
+    </Modal>
+
+    <!-- Large Bottom Modal -->
+    <Modal id="lg-bottom" size="lg" position="bottom" closedby="closerequest">
+        <span slot="trigger">
+            <button
+                class="wr:px-4 wr:py-2 wr:rounded wr:bg-purple-600 wr:text-white"
+            >
+                Large Bottom
+            </button>
+        </span>
+        <div slot="content" class="wr:max-h-[600px] wr:overflow-y-auto">
+            <h2 class="wr:text-lg wr:font-semibold">Large Bottom Modal</h2>
+            <p class="wr:mt-2">
+                This modal appears at the bottom of the screen.
+            </p>
+            <ul class="wr:space-y-2 wr:mt-4">
+                {
+                    Array.from({ length: 50 }).map((_, i) => (
+                        <li class="wr:p-2 wr:bg-gray-100 wr:rounded">
+                            Bottom Item {i + 1}
+                        </li>
+                    ))
+                }
+            </ul>
+            <button
+                id="close-lg-bottom"
+                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+            >
+                Close
+            </button>
+        </div>
+    </Modal>
+
+    <!-- Extra Large Center Modal -->
+    <Modal id="xl-center" size="xl" position="center">
+        <span slot="trigger">
+            <button
+                class="wr:px-4 wr:py-2 wr:rounded wr:bg-orange-600 wr:text-white"
+            >
+                XL Center
+            </button>
+        </span>
+        <div slot="content" class="wr:max-h-[700px] wr:overflow-y-auto">
+            <h2 class="wr:text-lg wr:font-semibold">XL Center Modal</h2>
+            <p class="wr:mt-2">
+                Extra large modal in the middle with scroll test.
+            </p>
+            {
+                Array.from({ length: 60 }).map((_, i) => (
+                    <p class="wr:mt-2">
+                        Line {i + 1}: Scroll inside modal without moving page.
+                    </p>
+                ))
+            }
+            <button
+                id="close-xl-center"
+                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+            >
+                Close
+            </button>
+        </div>
+    </Modal>
+
+    <!-- Full Screen Modal -->
+    <Modal id="full-screen" size="full" position="center">
+        <span slot="trigger">
+            <button
+                class="wr:px-4 wr:py-2 wr:rounded wr:bg-red-600 wr:text-white"
+            >
+                Full Screen
+            </button>
+        </span>
+        <div slot="content" class="wr:h-full wr:overflow-y-auto wr:p-6">
+            <h2 class="wr:text-2xl wr:font-bold">Full Screen Modal</h2>
+            <p class="wr:mt-4 wr:text-lg">
+                This modal covers the entire screen and scrolls vertically.
+            </p>
+            {
+                Array.from({ length: 100 }).map((_, i) => (
+                    <p class="wr:mt-2">
+                        Block {i + 1}: Testing long content inside full modal.
+                    </p>
+                ))
+            }
+            <button
+                id="close-full-screen"
+                class="wr:mt-6 wr:px-6 wr:py-3 wr:bg-white wr:rounded wr:text-red-600 wr:border"
+            >
+                Close Full
+            </button>
+        </div>
+    </Modal>
+</ComponentLayout>