試験的 modal dialog component

packages/docs/.vitepress/config.mts

@@ -85,6 +85,7 @@ export default defineConfig({
           { text: "Card", link: "/card" },
           { text: "IconButton", link: "/icon-button" },
           { text: "Input", link: "/input" },
+          {text: "ModalDialog", link: "/modal-dialog" },
           { text: "Select", link: "/select" },
           { text: "Spinner", link: "/spinner" },
           {

packages/docs/components/modal-dialog.md

@@ -0,0 +1,43 @@
+# Modal-Dialog
+
+## Default
+
+:::raw
+
+<dialog id="dialog-1" class="jumpu-modal-dialog jumpu-card fixed top-1/2 left-1/2 -translate-1/2 " onclick="if(event.target !== document.querySelector('.dialog-content')){event.target.close()}">
+  <button onclick="document.querySelector('#dialog-1').close()" class="jumpu-icon-button absolute top-2 right-2">✗</button>
+  <div class="pt-10 min-h-64 px-8 py-4 dialog-content">
+    <h2 class="mb-4 font-bold text-lg">モーダル・ダイアログ</h2>
+    <p class="my-4">3年ほど前（2022年）になりますが、<a class="underline" href="https://github.com/tuqulore/jumpu-ui/issues/182">Modal Dialogコンポーネントの実装</a>で議論した結果、jumpu UI のコンポーネントとしては実装しないことになりました。ただ、Headless UI 等のフレームワークに依存するまでもなく、ツクロアのボイラープレートでもJSXが利用可能になることなど、当時と状況が変わってきているため、このコンポーネントは試験的に Jumpu UI として実装を試みています。</p>
+    <p>このモーダルダイアログの背景はクールです。（<a class="underline" href="https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/dialog">MDNのサイト参照</a>）</p>
+  </div>
+</dialog>
+
+<button onclick="document.querySelector('#dialog-1').showModal()" class="jumpu-button m-40">ダイアログを表示</button>
+
+:::
+
+```html
+<dialog
+  id="dialog-1"
+  class="jumpu-modal-dialog jumpu-card -translate-1/2 fixed left-1/2 top-1/2"
+  onclick="if(event.target !== document.querySelector('.dialog-content')){event.target.close()}"
+>
+  <button
+    onclick="document.querySelector('#dialog-1').close()"
+    class="jumpu-icon-button absolute right-2 top-2"
+  >
+    ✗
+  </button>
+  <div class="dialog-content min-h-64 px-8 py-4 pt-10">
+    <p>このモーダルダイアログの背景はクールです</p>
+  </div>
+</dialog>
+
+<button
+  onclick="document.querySelector('#dialog-1').showModal()"
+  class="jumpu-button m-40"
+>
+  ダイアログを表示
+</button>
+```

packages/tailwindcss/src/components/modal-dialog.css

@@ -0,0 +1,38 @@
+.jumpu-modal-dialog {
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity 0.4s ease-out,
+    transform 0.4s ease-out,
+    overlay 0.4s ease-out allow-discrete,
+    display 0.4s ease-out allow-discrete;
+}
+
+@starting-style {
+  .jumpu-modal-dialog[open] {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+.jumpu-modal-dialog[open] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.jumpu-modal-dialog::backdrop {
+  transition:
+    display 0.4s allow-discrete,
+    overlay 0.4s allow-discrete,
+    background-color 0.4s;
+}
+
+.jumpu-modal-dialog[open]::backdrop {
+  background-color: --alpha(var(--color-gray-950) / 25%);
+}
+
+@starting-style {
+  .jumpu-modal-dialog[open]::backdrop {
+    background-color: --alpha(var(--color-gray-950) / 0%);
+  }
+}

packages/tailwindcss/src/style.css

@@ -11,6 +11,7 @@
 @import "./components/filled-tag.css" layer(components);
 @import "./components/icon-button.css" layer(components);
 @import "./components/input.css" layer(components);
+@import "./components/modal-dialog.css" layer(components);
 @import "./components/outlined-button.css" layer(components);
 @import "./components/select.css" layer(components);
 @import "./components/spinner.css" layer(components);