@nr1e/qwik-ui 0.0.7 → 0.0.9

package/README.md

@@ -2,12 +2,20 @@
     <img width="200" src="https://nr1e.com/images/logo-tagline.svg" />
 </div>
 
-# Qwik Icons Library ⚡️
+# Qwik UI Library ⚡️
 
-This library contains approved icons for use in NR1E projects.
+This library contains approved UI components for use in NR1E projects.
 
-## Prefixes
+## Installation
 
-Each icon has a prefix identifying where it came from.
+```bash
+pnpm i @nr1e/qwik-ui
+```
 
-- **Mdi** = [Material Design Icons](https://icon-sets.iconify.design/mdi/)
+Inside _global.css_, add the following:
+
+```css
+@import '@nr1e/qwik-ui/styles.css';
+```
+
+This typically should appear under your _@import 'tailwindcss';_ statement.

package/lib/components/dialog.qwik.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const mdiClose_qwik = require("../qwik-icons/lib/components/icons/mdi-close.qwik.qwik.cjs");
+const Dialog = qwik.component$((props) => {
+  qwik.useOnDocument("keydown", qwik.$((event) => {
+    if (event.key === "Escape") {
+      props.open.value = false;
+    }
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx("dialog", {
+    class: "modal",
+    id: props.id,
+    open: props.open.value,
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: "modal-box",
+      children: [
+        props.showCloseIcon && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "absolute top-0 right-0 cursor-pointer",
+          onClick$: () => {
+            props.open.value = false;
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(mdiClose_qwik.MdiClose, {
+            size: 24
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+      ]
+    })
+  });
+});
+exports.Dialog = Dialog;

package/lib/components/dialog.qwik.mjs

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
+import { component$, useOnDocument, $, Slot } from "@builder.io/qwik";
+import { MdiClose } from "../qwik-icons/lib/components/icons/mdi-close.qwik.qwik.mjs";
+const Dialog = component$((props) => {
+  useOnDocument("keydown", $((event) => {
+    if (event.key === "Escape") {
+      props.open.value = false;
+    }
+  }));
+  return /* @__PURE__ */ jsx("dialog", {
+    class: "modal",
+    id: props.id,
+    open: props.open.value,
+    children: /* @__PURE__ */ jsxs("div", {
+      class: "modal-box",
+      children: [
+        props.showCloseIcon && /* @__PURE__ */ jsx("div", {
+          class: "absolute top-0 right-0 cursor-pointer",
+          onClick$: () => {
+            props.open.value = false;
+          },
+          children: /* @__PURE__ */ jsx(MdiClose, {
+            size: 24
+          })
+        }),
+        /* @__PURE__ */ jsx(Slot, {})
+      ]
+    })
+  });
+});
+export {
+  Dialog
+};

package/lib/index.qwik.cjs

@@ -4,11 +4,13 @@ const alertError = require("./components/alert-error.qwik.cjs");
 const alertInfo = require("./components/alert-info.qwik.cjs");
 const alertSuccess = require("./components/alert-success.qwik.cjs");
 const alertWarning = require("./components/alert-warning.qwik.cjs");
+const dialog = require("./components/dialog.qwik.cjs");
 const paceBar = require("./components/pace-bar.qwik.cjs");
 const universalLayout = require("./components/universal-layout.qwik.cjs");
 exports.AlertError = alertError.AlertError;
 exports.AlertInfo = alertInfo.AlertInfo;
 exports.AlertSuccess = alertSuccess.AlertSuccess;
 exports.AlertWarning = alertWarning.AlertWarning;
+exports.Dialog = dialog.Dialog;
 exports.PaceBar = paceBar.PaceBar;
 exports.UniversalLayout = universalLayout.UniversalLayout;

package/lib/index.qwik.mjs

@@ -2,6 +2,7 @@ import { AlertError } from "./components/alert-error.qwik.mjs";
 import { AlertInfo } from "./components/alert-info.qwik.mjs";
 import { AlertSuccess } from "./components/alert-success.qwik.mjs";
 import { AlertWarning } from "./components/alert-warning.qwik.mjs";
+import { Dialog } from "./components/dialog.qwik.mjs";
 import { PaceBar } from "./components/pace-bar.qwik.mjs";
 import { UniversalLayout } from "./components/universal-layout.qwik.mjs";
 export {
@@ -9,6 +10,7 @@ export {
   AlertInfo,
   AlertSuccess,
   AlertWarning,
+  Dialog,
   PaceBar,
   UniversalLayout
 };

package/lib/qwik-icons/lib/components/icons/mdi-close.qwik.qwik.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const svg_qwik = require("../svg.qwik.qwik.cjs");
+const MdiClose = qwik.component$((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(svg_qwik.Svg, {
+    ...props,
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      fill: "currentColor",
+      d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+    })
+  });
+});
+exports.MdiClose = MdiClose;

package/lib/qwik-icons/lib/components/icons/mdi-close.qwik.qwik.mjs

@@ -0,0 +1,16 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+import { Svg } from "../svg.qwik.qwik.mjs";
+const MdiClose = component$((props) => {
+  return /* @__PURE__ */ jsx(Svg, {
+    ...props,
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "currentColor",
+      d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+    })
+  });
+});
+export {
+  MdiClose
+};

package/lib-types/components/dialog.d.ts

@@ -0,0 +1,7 @@
+import { Signal } from '@builder.io/qwik';
+export interface DialogProps {
+    id: string;
+    open: Signal<boolean>;
+    showCloseIcon?: boolean;
+}
+export declare const Dialog: import("@builder.io/qwik").Component<DialogProps>;

package/lib-types/index.d.ts

@@ -2,5 +2,6 @@ export * from './components/alert-error';
 export * from './components/alert-info';
 export * from './components/alert-success';
 export * from './components/alert-warning';
+export * from './components/dialog';
 export * from './components/pace-bar';
 export * from './components/universal-layout';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {
@@ -19,11 +19,13 @@
       "import": "./lib/index.qwik.mjs",
       "require": "./lib/index.qwik.cjs",
       "types": "./lib-types/index.d.ts"
-    }
+    },
+    "./styles.css": "./styles.css"
   },
   "files": [
     "lib",
-    "lib-types"
+    "lib-types",
+    "styles.css"
   ],
   "engines": {
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"

package/styles.css

@@ -0,0 +1 @@
+@source './lib';