@nr1e/qwik-ui 0.0.11 → 0.0.12

package/lib/components/dialog.qwik.cjs

@@ -10,14 +10,14 @@ const Dialog = qwik.component$((props) => {
     }
   }));
   return /* @__PURE__ */ jsxRuntime.jsx("dialog", {
-    class: `modal z-20 ${props.class}`,
+    class: `modal ${props.class}`,
     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",
+        props.showCloseIcon && /* @__PURE__ */ jsxRuntime.jsx("button", {
+          class: "btn btn-sm btn-circle btn-ghost absolute top-1 right-1",
           onClick$: () => {
             props.open.value = false;
           },
@@ -25,7 +25,20 @@ const Dialog = qwik.component$((props) => {
             size: 24
           })
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+        props.title && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "text-lg font-bold",
+          children: props.title
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "py-4",
+          children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "modal-action",
+          children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+            name: "actions"
+          })
+        })
       ]
     })
   });

package/lib/components/dialog.qwik.mjs

@@ -8,14 +8,14 @@ const Dialog = component$((props) => {
     }
   }));
   return /* @__PURE__ */ jsx("dialog", {
-    class: `modal z-20 ${props.class}`,
+    class: `modal ${props.class}`,
     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",
+        props.showCloseIcon && /* @__PURE__ */ jsx("button", {
+          class: "btn btn-sm btn-circle btn-ghost absolute top-1 right-1",
           onClick$: () => {
             props.open.value = false;
           },
@@ -23,7 +23,20 @@ const Dialog = component$((props) => {
             size: 24
           })
         }),
-        /* @__PURE__ */ jsx(Slot, {})
+        props.title && /* @__PURE__ */ jsx("div", {
+          class: "text-lg font-bold",
+          children: props.title
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "py-4",
+          children: /* @__PURE__ */ jsx(Slot, {})
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "modal-action",
+          children: /* @__PURE__ */ jsx(Slot, {
+            name: "actions"
+          })
+        })
       ]
     })
   });

package/lib/components/select-field.qwik.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const SelectField = qwik.component$((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "fieldset",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", {
+        class: "label",
+        ...props.id && {
+          for: props.id
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          class: "label-text",
+          children: props.title
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("select", {
+        ...props.name && {
+          name: props.name
+        },
+        ...props.id && {
+          id: props.id
+        },
+        class: "select",
+        children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+      })
+    ]
+  });
+});
+exports.SelectField = SelectField;

package/lib/components/select-field.qwik.mjs

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, Slot } from "@builder.io/qwik";
+const SelectField = component$((props) => {
+  return /* @__PURE__ */ jsxs("div", {
+    class: "fieldset",
+    children: [
+      /* @__PURE__ */ jsx("label", {
+        class: "label",
+        ...props.id && {
+          for: props.id
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          class: "label-text",
+          children: props.title
+        })
+      }),
+      /* @__PURE__ */ jsx("select", {
+        ...props.name && {
+          name: props.name
+        },
+        ...props.id && {
+          id: props.id
+        },
+        class: "select",
+        children: /* @__PURE__ */ jsx(Slot, {})
+      })
+    ]
+  });
+});
+export {
+  SelectField
+};

package/lib/components/text-field.qwik.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const TextField = qwik.component$((props) => {
+  const error = qwik.useSignal(props.error);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "fieldset",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", {
+        class: "label",
+        ...props.id && {
+          for: props.id
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          class: "label-text",
+          children: props.label
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", {
+        class: `input w-full ${error.value ? "input-error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+            name: "left"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", {
+            type: "text",
+            ...props.name && {
+              name: props.name
+            },
+            ...props.id && {
+              id: props.id
+            },
+            class: "placeholder:opacity-50",
+            placeholder: props.placeholder,
+            onBlur$: (e) => props.onBlur$ && props.onBlur$(e, error),
+            onInput$: (e) => props.onInput$ && props.onInput$(e, error)
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+            name: "right"
+          })
+        ]
+      }),
+      error.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error.value
+      })
+    ]
+  });
+});
+exports.TextField = TextField;

package/lib/components/text-field.qwik.mjs

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, Slot } from "@builder.io/qwik";
+const TextField = component$((props) => {
+  const error = useSignal(props.error);
+  return /* @__PURE__ */ jsxs("div", {
+    class: "fieldset",
+    children: [
+      /* @__PURE__ */ jsx("label", {
+        class: "label",
+        ...props.id && {
+          for: props.id
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          class: "label-text",
+          children: props.label
+        })
+      }),
+      /* @__PURE__ */ jsxs("label", {
+        class: `input w-full ${error.value ? "input-error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(Slot, {
+            name: "left"
+          }),
+          /* @__PURE__ */ jsx("input", {
+            type: "text",
+            ...props.name && {
+              name: props.name
+            },
+            ...props.id && {
+              id: props.id
+            },
+            class: "placeholder:opacity-50",
+            placeholder: props.placeholder,
+            onBlur$: (e) => props.onBlur$ && props.onBlur$(e, error),
+            onInput$: (e) => props.onInput$ && props.onInput$(e, error)
+          }),
+          /* @__PURE__ */ jsx(Slot, {
+            name: "right"
+          })
+        ]
+      }),
+      error.value && /* @__PURE__ */ jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error.value
+      })
+    ]
+  });
+});
+export {
+  TextField
+};

package/lib/index.qwik.cjs

@@ -6,6 +6,8 @@ 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 selectField = require("./components/select-field.qwik.cjs");
+const textField = require("./components/text-field.qwik.cjs");
 const universalLayout = require("./components/universal-layout.qwik.cjs");
 exports.AlertError = alertError.AlertError;
 exports.AlertInfo = alertInfo.AlertInfo;
@@ -13,4 +15,6 @@ exports.AlertSuccess = alertSuccess.AlertSuccess;
 exports.AlertWarning = alertWarning.AlertWarning;
 exports.Dialog = dialog.Dialog;
 exports.PaceBar = paceBar.PaceBar;
+exports.SelectField = selectField.SelectField;
+exports.TextField = textField.TextField;
 exports.UniversalLayout = universalLayout.UniversalLayout;

package/lib/index.qwik.mjs

@@ -4,6 +4,8 @@ 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 { SelectField } from "./components/select-field.qwik.mjs";
+import { TextField } from "./components/text-field.qwik.mjs";
 import { UniversalLayout } from "./components/universal-layout.qwik.mjs";
 export {
   AlertError,
@@ -12,5 +14,7 @@ export {
   AlertWarning,
   Dialog,
   PaceBar,
+  SelectField,
+  TextField,
   UniversalLayout
 };

package/lib-types/components/checkbox-field.d.ts

@@ -0,0 +1,8 @@
+export interface CheckboxFieldProps {
+    id?: string;
+    label: string;
+    name?: string;
+    checked?: boolean;
+}
+declare const _default: import("@builder.io/qwik").Component<CheckboxFieldProps>;
+export default _default;

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

@@ -4,5 +4,6 @@ export interface DialogProps {
     open: Signal<boolean>;
     showCloseIcon?: boolean;
     class?: string;
+    title?: string;
 }
 export declare const Dialog: import("@builder.io/qwik").Component<DialogProps>;

package/lib-types/components/select-field.d.ts

@@ -0,0 +1,6 @@
+export interface SelectFieldProps {
+    id?: string;
+    title: string;
+    name?: string;
+}
+export declare const SelectField: import("@builder.io/qwik").Component<SelectFieldProps>;

package/lib-types/components/text-field.d.ts

@@ -0,0 +1,12 @@
+import { QRL, Signal } from '@builder.io/qwik';
+export interface TextFieldProps {
+    id?: string;
+    label: string;
+    name?: string;
+    placeholder?: string;
+    error?: string;
+    maxLength?: number;
+    onBlur$?: QRL<(event: FocusEvent, error: Signal<string | undefined | null>) => void>;
+    onInput$?: QRL<(event: InputEvent, error: Signal<string | undefined | null>) => void>;
+}
+export declare const TextField: import("@builder.io/qwik").Component<TextFieldProps>;

package/lib-types/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {