moverlay 0.0.6 → 0.0.7

package/dist/layout/form.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { type Props as BaseProps } from "./normal";
+import { type Option, type FormSection, SetState } from "@bouko/form";
+import { JsonMap } from "@bouko/ts";
+import { ZodTypeAny } from "zod";
+type Field<T, K = string> = {
+    id: string;
+    label?: string;
+    style?: string;
+    value?: K;
+    update: SetState<T>;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+type FormBuilderField<T> = (Omit<Field<T>, "value" | "update"> & {
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+type Props<T> = BaseProps & FormSection<T> & {
+    fields: FormBuilderField<T>;
+    validator: ZodTypeAny;
+    styles?: {
+        submit?: string;
+    };
+    submit: (data: T, clear?: (() => void) | undefined) => Promise<void>;
+};
+export declare function FormModal<T extends JsonMap>({ fields, data, validator, update, submit, styles, clear, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default FormModal;

package/dist/layout/form.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Modal from "./normal";
+import { FormBuilder } from "@bouko/form";
+export function FormModal({ fields, data, validator, update, submit, styles, clear, ...props }) {
+    return (_jsx(Modal, { ...props, children: _jsx(FormBuilder, { styles: styles, fields: fields, validator: validator.safeParse, submit: submit }) }));
+}
+export default FormModal;

package/dist/layout/normal.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export type Props = {
+    style?: string;
+    title: string;
+    subtitle?: ReactNode;
+    redirect?: {
+        label: string;
+        to: string;
+    };
+    children?: ReactNode;
+};
+export default function ModalLayout({ style, title, subtitle, redirect, children }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/layout/normal.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+import useModal from "../state/context";
+import X from "../assets/icons/x.svg";
+export default function ModalLayout({ style, title, subtitle, redirect, children }) {
+    const { openModal, closeModal } = useModal();
+    return (_jsxs("div", { className: cn(styles.container, style), role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles.heading, children: [_jsx("span", { className: styles.title, children: title }), _jsxs("span", { className: styles.subtitle, children: [subtitle, redirect && (_jsx("button", { className: "p-0 bg-transparent border-none outline-none text-sm text-accent duration-200 hover:text-accent-light cursor-pointer font-semibold", onClick: () => openModal(redirect.to), children: redirect.label }))] })] }), _jsx(X, { className: styles.close, onClick: closeModal })] }), children] }));
+}
+const styles = {
+    container: "relative flex flex-col gap-4 w-lg p-7 pt-6 select-none overflow-hidden",
+    header: "relative flex flex-col gap-px mb-1 w-full",
+    heading: "flex flex-col gap-px",
+    title: "leading-none text-xl font-semibold",
+    subtitle: "flex items-center gap-2 text-sm text-slate-400",
+    close: "absolute -right-2 -top-1 text-error hover:text-error text-lg duration-200 cursor-pointer"
+};

package/dist/layout/root.d.ts

@@ -0,0 +1 @@
+export default function RootModal(): import("react/jsx-runtime").JSX.Element;

package/dist/layout/root.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useModal from "../state/context";
+import { AnimatePresence, motion } from "framer-motion";
+export default function RootModal() {
+    const { isOpen, templateId, templates } = useModal();
+    return (_jsx(AnimatePresence, { mode: "wait", children: isOpen && templateId && (_jsxs(motion.div, { className: styles.container, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, layout: true, children: [_jsx("div", { className: styles.backdrop }), _jsx("div", { className: styles.content, children: _jsx("div", { className: styles.subcontainer, children: templates[templateId] }) })] }, templateId)) }));
+}
+const styles = {
+    container: "fixed inset-0 flex justify-center items-center z-[99]",
+    backdrop: "absolute inset-0 bg-background-dark/60",
+    content: "absolute top-0 left-0 w-[100dvw] h-[100dvh] flex justify-center items-center 2xl:scale-125 select-none",
+    subcontainer: "relative flex max-w-[80%] max-h-[85%] bg-background border border-border rounded-lg shadow-soft overflow-hidden"
+};

package/dist/state/manager.d.ts

@@ -0,0 +1,5 @@
+import { type ReactElement, type ReactNode } from "react";
+export default function ModalManager({ config, children }: {
+    config: Record<string, ReactElement>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/state/manager.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Context } from "./context";
+import { parseData } from "@bouko/react";
+export default function ModalManager({ config, children }) {
+    const [isOpen, setOpen] = useState(false);
+    const [templateId, setTemplate] = useState();
+    const [params, setParams] = useState({});
+    const openModal = async (template, params) => {
+        setTemplate(template);
+        setParams(params ?? {});
+        setOpen(true);
+    };
+    const getParams = () => parseData(params ?? {});
+    const closeModal = () => {
+        setOpen(false);
+        setTemplate(undefined);
+        setParams({});
+    };
+    return (_jsx(Context.Provider, { value: {
+            templates: config,
+            templateId,
+            isOpen,
+            params,
+            getParams,
+            openModal,
+            closeModal
+        }, children: children }));
+}

package/dist/state/root.js

@@ -10,8 +10,8 @@ import { AnimatePresence, Animation } from "@bouko/react";
  * the new modal with a backdrop.
 **/
 export default function RootModal() {
-    const { activeId, modal } = useModal();
-    return (_jsx(AnimatePresence, { mode: "wait", children: modal && (_jsx(Animation, { style: styles.backdrop, children: _jsx("div", { className: styles.content, children: modal }) }, activeId)) }));
+    const { activeId, modal, closeModal } = useModal();
+    return (_jsx(AnimatePresence, { mode: "wait", children: modal && (_jsx(Animation, { style: styles.backdrop, onClick: closeModal, children: _jsx("div", { className: styles.content, onClick: e => e.stopPropagation(), children: modal }) }, activeId)) }));
 }
 const styles = {
     backdrop: "fixed inset-0 flex justify-center items-center bg-background-light/60 dark:bg-background-dark/60 z-[99]",

package/dist/templates/login.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Login Modal component
+ *
+ * Displays a modal for user login with handling for
+ * input validation and submission logic for existing users.
+ * Uses `nupabase` which is a Supabase wrapper.
+ *
+ * Form Fields:
+ *  `email` - User's email address
+ *  `password` - User's desired password
+**/
+export declare function LoginModal(): import("react/jsx-runtime").JSX.Element;
+export default LoginModal;
+/**
+ * Problems:
+ *
+ *  - Perfect `FormModal`.
+ *  - Perfect `login`.
+ *  - Perfect `LoginSchema`.
+**/ 

package/dist/templates/login.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormModal } from "../layouts/form";
+import { login, LoginSchema } from "nupabase";
+/**
+ * Login Modal component
+ *
+ * Displays a modal for user login with handling for
+ * input validation and submission logic for existing users.
+ * Uses `nupabase` which is a Supabase wrapper.
+ *
+ * Form Fields:
+ *  `email` - User's email address
+ *  `password` - User's desired password
+**/
+export function LoginModal() {
+    return (_jsx(FormModal, { formId: "login", title: "Login to your Account", subtitle: "We'll send a verification to your email.", validator: LoginSchema.safeParse, submit: login }));
+}
+export default LoginModal;

package/dist/templates/register.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Register Modal component
+ *
+ * Displays a modal for user registration with handling
+ * for input validation and submission logic for new users.
+ * Uses `nupabase` which is a Supabase wrapper.
+ *
+ * Form Fields:
+ *  `email` - User's email address
+ *  `password` - User's desired password
+**/
+export declare function RegisterModal(): import("react/jsx-runtime").JSX.Element;
+export default RegisterModal;
+/**
+ * Problems:
+ *
+ *  - Perfect `FormModal`.
+ *  - Perfect `register`.
+ *  - Perfect `RegisterSchema`.
+**/ 

package/dist/templates/register.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormModal } from "../layouts/form";
+import { register, RegisterSchema } from "nupabase";
+/**
+ * Register Modal component
+ *
+ * Displays a modal for user registration with handling
+ * for input validation and submission logic for new users.
+ * Uses `nupabase` which is a Supabase wrapper.
+ *
+ * Form Fields:
+ *  `email` - User's email address
+ *  `password` - User's desired password
+**/
+export function RegisterModal() {
+    return (_jsx(FormModal, { formId: "register", title: "Create an Account", subtitle: "We'll send a verification to your email.", validator: RegisterSchema.safeParse, submit: register }));
+}
+export default RegisterModal;

package/package.json

@@ -1,46 +1,82 @@
 {
 
   "name": "moverlay",
-  "version": "0.0.6",
+
+  "version": "0.0.7",
+
   "main": "./dist/index.js",
+
   "types": "./dist/index.d.ts",
+
   "license": "MIT",
+
   "files": [
+
     "dist"
+
   ],
+
   "publishConfig": {
+
     "access": "public"
+
   },
+
   "author": "",
+
   "description": "",
+
   "peerDependencies": {
+
     "react": ">=18.3.1"
+
   },
+
   "engines": {},
 
   "scripts": {
+
     "build": "tsc"
+
   },
 
   "dependencies": {
-    "@bouko/react": "^2.4.8",
+
+    "@bouko/react": "^2.7.2",
+
     "@bouko/style": "^0.1.6",
+
     "@bouko/ts": "^0.2.0",
+
     "clsx": "^2.1.1",
+
     "formeact": "^0.0.3",
+
     "framer-motion": "^12.16.0",
+
     "superstruct": "^2.0.2",
+
     "tailwind-merge": "^3.3.0",
+
     "tailwind-variants": "^1.0.0",
+
     "zod": "^4.0.17"
+
   },
 
   "devDependencies": {
+
     "@types/react": "^19.1.10",
+
     "dependency-cruiser": "^17.0.1",
+
     "nupabase": "^0.2.0",
+
     "react": "^19.1.1",
+
     "typescript": "^5.9.2"
+
   }
 
-}
+}
+

package/dist/assets/forms/register.json

@@ -1,17 +0,0 @@
-[
-
-    [{
-        "id": "email", 
-        "element": "input", 
-        "label": "Email Address", 
-        "placeholder": "Your email" 
-    }], 
-
-    [{
-        "id": "password", 
-        "element": "input", 
-        "label": "Password", 
-        "placeholder": "Enter password" 
-    }] 
-
-]