@bouku/modal 0.0.1

package/dist/assets/icons/x.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1em" height="1em">
+    <path 
+        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ui/index.js";
+export { default as ModalProvider } from "./state/provider";
+export { default as useModal } from "./state/context";

package/dist/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModal = exports.ModalProvider = void 0;
+__exportStar(require("./ui/index.js"), exports);
+var provider_1 = require("./state/provider");
+Object.defineProperty(exports, "ModalProvider", { enumerable: true, get: function () { return __importDefault(provider_1).default; } });
+var context_1 = require("./state/context");
+Object.defineProperty(exports, "useModal", { enumerable: true, get: function () { return __importDefault(context_1).default; } });

package/dist/state/context.d.ts

@@ -0,0 +1,12 @@
+import { JsonMap } from "ts-helper-kit";
+import { ReactNode } from "react";
+export type Props = {
+    activeId?: string;
+    modal: ReactNode;
+    parameters: JsonMap;
+    openModal: (modal: string, params?: JsonMap) => void;
+    closeModal: () => void;
+};
+export declare const Context: import("react").Context<Props>;
+export declare const useModal: () => Props;
+export default useModal;

package/dist/state/context.js

@@ -0,0 +1,14 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModal = exports.Context = void 0;
+const react_1 = require("react");
+exports.Context = (0, react_1.createContext)({
+    modal: null,
+    parameters: {},
+    openModal: () => undefined,
+    closeModal: () => undefined
+});
+const useModal = () => (0, react_1.useContext)(exports.Context);
+exports.useModal = useModal;
+exports.default = exports.useModal;

package/dist/state/provider.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement, ReactNode } from "react";
+/**
+ * React Context Provider for Modal component.
+ *
+ * Supplies modal state and control functions to its children,
+ * enabling centralized management of modal configuration, visibility,
+ * and parameters throughout the app.
+ *
+ * Features:
+ *  - Tracks the currently active modal by its key from the `config` object.
+ *  - Stores and provides `parameters` for the active modal instance.
+ *  - Exposes `openModal` and `closeModal` functions for controlling modal state.
+ *  - Passes modal configuration and state to consumers via context value.
+ *  - Renders the `RootModal` component for global modal handling.
+ *
+ * @param {Record<string, ReactElement>} config - A map of modal ID keys to the component itself.
+ * @param {ReactNode} children - Child components that will have access to modals.
+**/
+export default function ModalProvider({ config, children }: {
+    config: Record<string, ReactElement>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Problems:
+ *
+ *  - Perfect `Context`.
+ *  - Perfect `RootModal`.
+ *  - Perfect `Config`.
+**/ 

package/dist/state/provider.js

@@ -0,0 +1,47 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ModalProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("./context");
+const root_1 = __importDefault(require("./root"));
+/**
+ * React Context Provider for Modal component.
+ *
+ * Supplies modal state and control functions to its children,
+ * enabling centralized management of modal configuration, visibility,
+ * and parameters throughout the app.
+ *
+ * Features:
+ *  - Tracks the currently active modal by its key from the `config` object.
+ *  - Stores and provides `parameters` for the active modal instance.
+ *  - Exposes `openModal` and `closeModal` functions for controlling modal state.
+ *  - Passes modal configuration and state to consumers via context value.
+ *  - Renders the `RootModal` component for global modal handling.
+ *
+ * @param {Record<string, ReactElement>} config - A map of modal ID keys to the component itself.
+ * @param {ReactNode} children - Child components that will have access to modals.
+**/
+function ModalProvider({ config, children }) {
+    const [activeModal, setActiveModal] = (0, react_1.useState)();
+    const [parameters, setParameters] = (0, react_1.useState)({});
+    const openModal = async (modal, params) => {
+        setActiveModal(modal);
+        setParameters(params || {});
+    };
+    const closeModal = () => {
+        setActiveModal(undefined);
+        setParameters({});
+    };
+    return ((0, jsx_runtime_1.jsxs)(context_1.Context.Provider, { value: {
+            activeId: activeModal,
+            openModal,
+            modal: activeModal ? config[activeModal] : null,
+            parameters,
+            closeModal
+        }, children: [children, (0, jsx_runtime_1.jsx)(root_1.default, {})] }));
+}

package/dist/state/root.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Root Modal component
+ *
+ * Injected into the root layout in a hidden state,
+ * then when a modal is opened this is displayed and wraps
+ * the new modal with a backdrop.
+**/
+export default function RootModal(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Problems:
+ *
+ *  - Perfect `useModal`
+ *  - Perfect `Animation`
+**/ 

package/dist/state/root.js

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RootModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("./context");
+const react_1 = require("@bouko/react");
+/**
+ * Root Modal component
+ *
+ * Injected into the root layout in a hidden state,
+ * then when a modal is opened this is displayed and wraps
+ * the new modal with a backdrop.
+**/
+function RootModal() {
+    const { activeId, modal } = (0, context_1.useModal)();
+    return ((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", children: modal && ((0, jsx_runtime_1.jsx)(react_1.Animation, { style: styles.backdrop, children: (0, jsx_runtime_1.jsx)("div", { className: styles.content, 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]",
+    content: "max-w-[80%] max-h-[85%] bg-background border border-border rounded-lg shadow-soft"
+};

package/dist/ui/components/_.d.ts

@@ -0,0 +1 @@
+export { default as ModalButton } from "./button";

package/dist/ui/components/_.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalButton = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "ModalButton", { enumerable: true, get: function () { return __importDefault(button_1).default; } });

package/dist/ui/components/button.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { JsonMap } from "ts-helper-kit";
+type ButtonProps = {
+    id: string;
+    params?: JsonMap;
+    variant?: "surface" | "accent";
+    icon?: ReactNode;
+    children?: ReactNode;
+};
+export default function ModalButton({ id, params, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/button.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ModalButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../../state/context");
+const core_1 = require("@bouku/core");
+function ModalButton({ id, params, ...props }) {
+    const { openModal } = (0, context_1.useModal)();
+    return ((0, jsx_runtime_1.jsx)(core_1.Button, { ...props, action: () => openModal(id, params) }));
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./layouts/_";
+export * from "./templates/_";
+export * from "./components/_";

package/dist/ui/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./layouts/_"), exports);
+__exportStar(require("./templates/_"), exports);
+__exportStar(require("./components/_"), exports);

package/dist/ui/layouts/_.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from "./normal";
+export { default as FormModal } from "./form";

package/dist/ui/layouts/_.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormModal = exports.Modal = void 0;
+var normal_1 = require("./normal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
+var form_1 = require("./form");
+Object.defineProperty(exports, "FormModal", { enumerable: true, get: function () { return __importDefault(form_1).default; } });

package/dist/ui/layouts/form.d.ts

@@ -0,0 +1,28 @@
+import { ModalProps } from "./normal";
+import { FormBuilderField, FormData, FormSchema, PresetName } from "@bouku/form";
+type Props<T extends FormData = FormData, P extends PresetName | undefined = undefined> = {
+    fields: FormBuilderField[][];
+    validator?: (data: FormSchema<T, P>) => {
+        success: boolean;
+    };
+    submit: (data: FormSchema<T, P>) => Promise<void | {
+        error?: null | Error;
+        code?: string;
+        message?: string;
+    }>;
+} & Omit<ModalProps, "children">;
+/**
+ * Form Modal component.
+ *
+ * Combines a standard modal layout with a form builder.
+ * Wraps @bouko/form `FormBuilder` for form handling.
+**/
+export declare function FormModal({ style, fields, submit, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default FormModal;
+/**
+ * Problems:
+ *
+ *  - Perfect `Modal`
+ *  - Perfect `ModalProps`
+ *  - Perfect `FormBuilderProps`
+**/ 

package/dist/ui/layouts/form.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormModal = FormModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const normal_1 = require("./normal");
+const form_1 = require("@bouku/form");
+/**
+ * Form Modal component.
+ *
+ * Combines a standard modal layout with a form builder.
+ * Wraps @bouko/form `FormBuilder` for form handling.
+**/
+function FormModal({ style, fields, submit, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(normal_1.Modal, { ...props, children: (0, jsx_runtime_1.jsx)(form_1.FormBuilder, { style: style, fields: fields, submit: submit }) }));
+}
+exports.default = FormModal;

package/dist/ui/layouts/normal.d.ts

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

package/dist/ui/layouts/normal.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = Modal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../../state/context");
+const style_1 = require("@bouko/style");
+const x_svg_1 = __importDefault(require("../../assets/icons/x.svg"));
+function Modal({ style, title, subtitle, redirect, children }) {
+    const { openModal, closeModal } = (0, context_1.useModal)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(styles.container, style), role: "dialog", "aria-modal": "true", children: [(0, jsx_runtime_1.jsxs)("div", { className: styles.header, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles.heading, children: [(0, jsx_runtime_1.jsx)("span", { className: styles.title, children: title }), (0, jsx_runtime_1.jsxs)("span", { className: styles.subtitle, children: [subtitle, redirect && ((0, jsx_runtime_1.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 }))] })] }), (0, jsx_runtime_1.jsx)(x_svg_1.default, { 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"
+};
+exports.default = Modal;

package/dist/ui/templates/_.d.ts

@@ -0,0 +1,2 @@
+export { default as RegisterModal } from "./register";
+export { default as LoginModal } from "./login";

package/dist/ui/templates/_.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginModal = exports.RegisterModal = void 0;
+var register_1 = require("./register");
+Object.defineProperty(exports, "RegisterModal", { enumerable: true, get: function () { return __importDefault(register_1).default; } });
+var login_1 = require("./login");
+Object.defineProperty(exports, "LoginModal", { enumerable: true, get: function () { return __importDefault(login_1).default; } });

package/dist/ui/templates/login.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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({ login }: {
+    login: () => Promise<void>;
+}): import("react/jsx-runtime").JSX.Element;
+export default LoginModal;
+/**
+ * Problems:
+ *
+ *  - Perfect `FormModal`.
+ *  - Perfect `login`.
+ *  - Perfect `LoginSchema`.
+**/ 

package/dist/ui/templates/login.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginModal = LoginModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_1 = require("../layouts/form");
+const form_2 = require("@bouku/form");
+/**
+ * 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
+**/
+function LoginModal({ login }) {
+    return ((0, jsx_runtime_1.jsx)(form_1.FormModal, { title: "Login to your Account", subtitle: "We'll send a verification to your email.", fields: form_2.presets["email-password"], submit: login }));
+}
+exports.default = LoginModal;

package/dist/ui/templates/register.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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({ register }: {
+    register: () => Promise<void>;
+}): import("react/jsx-runtime").JSX.Element;
+export default RegisterModal;
+/**
+ * Problems:
+ *
+ *  - Perfect `FormModal`.
+ *  - Perfect `register`.
+ *  - Perfect `RegisterSchema`.
+**/ 

package/dist/ui/templates/register.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegisterModal = RegisterModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_1 = require("../layouts/form");
+const form_2 = require("@bouku/form");
+/**
+ * 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
+**/
+function RegisterModal({ register }) {
+    return ((0, jsx_runtime_1.jsx)(form_1.FormModal, { title: "Create an Account", subtitle: "We'll send a verification to your email.", fields: form_2.presets["email-password"], submit: register }));
+}
+exports.default = RegisterModal;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@bouku/modal",
+  "version": "0.0.1",
+  "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/style": "^0.1.6",
+    "@bouko/ts": "^0.2.0",
+    "@bouku/core": "^0.2.4",
+    "@bouku/form": "^0.1.4",
+    "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",
+    "ts-helper-kit": "^0.0.9",
+    "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"
+  }
+}