@nr1e/qwik-ui 0.0.8 → 0.0.9

package/README.md

@@ -12,29 +12,10 @@ This library contains approved UI components for use in NR1E projects.
 pnpm i @nr1e/qwik-ui
 ```
 
-## Usage with Tailwind CSS 4.x
-
-This library uses Tailwind CSS classes (with DaisyUI components). To ensure the classes are properly scanned and generated in your project, you need to import the library's styles configuration.
-
-In your main CSS file (e.g., `src/global.css`):
+Inside _global.css_, add the following:
 
 ```css
-@import 'tailwindcss';
-@import '@nr1e/qwik-ui/styles.css' source;
-
-/* Your other styles */
+@import '@nr1e/qwik-ui/styles.css';
 ```
 
-This tells Tailwind v4 to scan the `@nr1e/qwik-ui` library files for class names and include DaisyUI plugin.
-
-### Alternative: Manual Configuration
-
-If you prefer more control, you can manually add the source path in your CSS:
-
-```css
-@import 'tailwindcss';
-
-@source '../src';
-@source '../../node_modules/@nr1e/qwik-ui/lib';
-@plugin 'daisyui';
-```
+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.8",
+  "version": "0.0.9",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {