inertiax-ui 0.0.1

package/Modal.svelte

@@ -0,0 +1,95 @@
+<script module>
+  import { mount, unmount } from 'svelte';
+  import { Frame } from 'inertiax-svelte'
+  import Modal from './Modal.svelte';
+  import { cubicOut } from 'svelte/easing';
+
+  export function modal(node) {
+    node.addEventListener('click', (e) => {
+      e.preventDefault()
+      const href = node.getAttribute('href')
+      const modal = mount(Modal, { 
+        target: document.body,
+        props: {
+          src: href,
+          close: () => {
+            unmount(modal, {outro: true})
+          }
+        }
+      })
+    })
+  }
+
+
+ function variable(node, { delay = 0 }) {
+    // duration on desktop is 300, on mobile 400
+    const duration = window.innerWidth > 768 ? 300 : 400;
+    return {
+      delay,
+      duration,
+      easing: cubicOut,
+      tick: (t) => {
+        node.style.setProperty("--progress", t);
+      },
+      // css: (t) => `--transition: ${t}`
+    };
+  }
+</script>
+
+<script>
+  import { fade,scale } from 'svelte/transition';
+  const { src, close } = $props()
+</script>
+
+<div class="modal_wrapper">
+  <!-- svelte-ignore a11y_click_events_have_key_events,a11y_no_static_element_interactions -->
+  <div class="modal_bg" onclick={close} transition:fade></div>
+  <div class="modal layout" aria-modal="true" role="dialog" transition:variable>
+    <Frame {src} />
+    <nav>
+      <button onclick={close} aria-label="Close modal">
+        <div class="i-material-symbols-light:close-rounded">Close</div>
+      </button>
+    </nav>
+  </div>
+</div>
+
+<style>
+.modal_wrapper {
+
+}
+.modal_bg {
+  background: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* z-index: -1; */
+}
+nav {
+  grid-area: header;
+  display: flex;
+  justify-content: flex-end;
+  button {
+    font-size: 1.5rem;
+    
+  }
+}
+.modal {
+  position: fixed;
+  bottom: 0;
+  transform: translateY(calc((1 - var(--progress)) * 100%));
+  background-color: #00000022;
+  border: 1px solid #333;
+  border-top-left-radius: 2rem;
+  border-top-right-radius: 2rem;
+  backdrop-filter: blur(8px);
+}
+
+@media (min-width: 640px) {
+  .modal {
+    max-width: 400px;
+  }
+}
+</style>

package/README.md

@@ -0,0 +1,15 @@
+# Inertia X UI
+
+A collection of Svelte components for [Inertia X](https://github.com/buhrmi/inertiax).
+
+## Modal
+
+The Modal component displays an Inertia X Frame within a modal. It can be created via the `modal` action:
+
+```svelte
+<script>
+  import { modal } from 'inertiax-ui'
+</script>
+
+<a href="/profile/edit" use:modal>Edit profile</a>
+```

package/index.js

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "inertiax-ui",
+  "version": "0.0.1",
+  "description": "UI component library for Inertia X",
+  "type": "module",
+  "svelte": "./Modal.svelte",
+  "main": "./index.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./Modal.svelte",
+      "default": "./index.js"
+    },
+    "./Modal.svelte": "./Modal.svelte"
+  },
+  "files": [
+    "index.js",
+    "Modal.svelte",
+    "index.d.ts"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "inertiax-svelte": "^11.0.8"
+  }
+}