added modal + bump version

packages/tui-components-svelte/README.md

@@ -2,3 +2,15 @@
 
 This is a component and module library for building user interfaces and features.
 It exports many base ui elements like buttons, switches, etc. But also exports modules like media or call that allow you to easily build such features into your Svelte app.
+
+## Todos
+
+### `modals`
+
+- [ ] Darken+Blur background transition
+- [ ] `onClose` handler with if check possibility and modal to confirm possibility
+- [ ] remove `data`, it should not be handled by this library
+
+### `tabs`
+
+- [ ] Handle support for Components+Props

packages/tui-components-svelte/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@timephy/tui-components-svelte",
-    "version": "0.0.26",
+    "version": "0.0.27",
     "description": "",
     "homepage": "https://github.com/timephy/tui/tree/main/tui-components-svelte#readme",
     "scripts": {
@@ -109,13 +109,23 @@
             "types": "./dist/ui/Icon.svelte.d.ts",
             "svelte": "./dist/ui/Icon.svelte"
         },
+        "./tabs": "./dist/tabs/index.js",
         "./tabs/TabViewController.svelte": {
             "types": "./dist/tabs/TabViewController.svelte.d.ts",
             "svelte": "./dist/tabs/TabViewController.svelte"
         },
         "./tabs/TabView.svelte": {
             "types": "./dist/tabs/TabView.svelte.d.ts",
             "svelte": "./dist/tabs/TabView.svelte"
+        },
+        "./modals": "./dist/modals/index.js",
+        "./modals/ModalViewController.svelte": {
+            "types": "./dist/modals/ModalViewController.svelte.d.ts",
+            "svelte": "./dist/modals/ModalViewController.svelte"
+        },
+        "./modals/ModalView.svelte": {
+            "types": "./dist/modals/ModalView.svelte.d.ts",
+            "svelte": "./dist/modals/ModalView.svelte"
         }
     },
     "author": "",

packages/tui-components-svelte/src/lib/modals/ModalView.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { setContext, type Snippet } from "svelte"
+    import type { Modal } from "."
+    import { MODAL_KEY } from "./internal"
+
+    const {
+        id,
+        topMost,
+        bottomMost,
+        close,
+        children,
+    }: {
+        id: string
+        topMost: boolean
+        bottomMost: boolean
+        close: () => void
+        children: Snippet
+    } = $props()
+
+    /* ============================================================================================================== */
+
+    let _fullscreen = $state(false)
+    let _escClose = $state(true)
+
+    /* ============================================================================================================== */
+
+    const MODAL: Modal = {
+        get id() {
+            return id
+        },
+        get topMost() {
+            return topMost
+        },
+        get bottomMost() {
+            return bottomMost
+        },
+        close,
+        get fullscreen() {
+            return _fullscreen
+        },
+        set fullscreen(fullscreen) {
+            _fullscreen = fullscreen
+        },
+        get escClose() {
+            return _escClose
+        },
+        set escClose(escClose) {
+            _escClose = escClose
+        },
+    }
+    setContext(MODAL_KEY, MODAL)
+
+    /* ============================================================================================================== */
+
+    const onkeydown = (e: KeyboardEvent) => {
+        if (topMost && _escClose && e.key === "Escape") {
+            MODAL.close()
+        }
+    }
+</script>
+
+<svelte:window {onkeydown} />
+
+<div
+    id="ModalView"
+    class="absolute inset-0 z-40 flex flex-col items-center justify-center
+        bg-black/75 backdrop-blur-sm transition-opacity duration-300"
+    style:display={topMost || _fullscreen ? "" : "none"}
+    ontouchmove={(e) => e.stopPropagation()}
+>
+    {@render children()}
+</div>