@bouku/modal 0.0.1 → 0.0.3

package/dist/index.d.ts

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

package/dist/index.js

@@ -13,13 +13,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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; } });
+__exportStar(require("./state"), exports);
+__exportStar(require("./ui"), exports);

package/dist/state/context.d.ts

@@ -1,12 +1,15 @@
-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;
+import { type ComponentType } from "react";
+export type ModalConfig = Record<string, ComponentType<any>>;
+export type RawActive = {
+    id: string;
+    props: any;
+} | null;
+type ContextValue = {
+    active: RawActive;
+    openModal: (id: string, props?: any) => void;
     closeModal: () => void;
 };
-export declare const Context: import("react").Context<Props>;
-export declare const useModal: () => Props;
-export default useModal;
+export declare const Context: import("react").Context<ContextValue>;
+export declare const useRawModal: () => ContextValue;
+export default function useModal<T extends ModalConfig>(): void;
+export {};

package/dist/state/context.js

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

package/dist/state/index.d.ts

@@ -0,0 +1,20 @@
+import { type ModalConfig } from "./context";
+import type { ComponentProps } from "react";
+type ArgsFor<P> = {} extends P ? [props?: P] : [props: P];
+type ActiveModal<T extends ModalConfig> = {
+    [K in keyof T]: {
+        id: K;
+        props: ComponentProps<T[K]>;
+    };
+}[keyof T];
+export declare const createModalSystem: <T extends ModalConfig>(config: T) => {
+    ModalProvider: (props: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useModal: () => {
+        active: ActiveModal<T> | null;
+        openModal: <K extends keyof T>(id: K, ...args: ArgsFor<ComponentProps<T[K]>>) => void;
+        closeModal: () => void;
+    };
+};
+export {};

package/dist/state/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createModalSystem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const provider_1 = require("./provider");
+const context_1 = require("./context");
+const createModalSystem = (config) => ({
+    ModalProvider: (props) => ((0, jsx_runtime_1.jsx)(provider_1.ModalProvider, { config: config, ...props })),
+    useModal: () => {
+        const { active, openModal, closeModal } = (0, context_1.useRawModal)();
+        function open(id, ...args) {
+            openModal(id, args[0]);
+        }
+        return {
+            active: active, // cast happens only here, at the typed edge
+            openModal: open,
+            closeModal
+        };
+    }
+});
+exports.createModalSystem = createModalSystem;

package/dist/state/provider.d.ts

@@ -1,29 +1,6 @@
-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>;
+import type { ReactNode } from "react";
+import type { ModalConfig } from "./context";
+export declare function ModalProvider<T extends ModalConfig>({ config, children }: {
+    config: T;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-/**
- * Problems:
- *
- *  - Perfect `Context`.
- *  - Perfect `RootModal`.
- *  - Perfect `Config`.
-**/ 

package/dist/state/provider.js

@@ -1,47 +1,21 @@
 "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;
+exports.ModalProvider = ModalProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const animate_1 = require("@bouku/animate");
 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, {})] }));
+    const [active, setActive] = (0, react_1.useState)(null);
+    const openModal = (id, props) => setActive({ id, props: props ?? {} });
+    const closeModal = () => setActive(null);
+    const ActiveComponent = active
+        ? config[active.id]
+        : null;
+    return ((0, jsx_runtime_1.jsxs)(context_1.Context.Provider, { value: { active, openModal, closeModal }, children: [children, (0, jsx_runtime_1.jsx)(animate_1.AnimatePresence, { mode: "wait", children: ActiveComponent && ((0, jsx_runtime_1.jsx)(animate_1.Animation, { style: s.backdrop, onClick: closeModal, children: (0, jsx_runtime_1.jsx)("div", { className: s.content, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ActiveComponent, { ...active.props }) }) }, active.id)) })] }));
 }
+const s = {
+    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/button.js

@@ -6,6 +6,6 @@ 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)();
+    const { openModal } = (0, context_1.useRawModal)();
     return ((0, jsx_runtime_1.jsx)(core_1.Button, { ...props, action: () => openModal(id, params) }));
 }

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

@@ -2,6 +2,8 @@ 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[][];
+    initialData?: Partial<T>;
+    submitLabel?: string;
     validator?: (data: FormSchema<T, P>) => {
         success: boolean;
     };
@@ -17,7 +19,7 @@ type Props<T extends FormData = FormData, P extends PresetName | undefined = und
  * 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 declare function FormModal({ style, fields, initialData, submitLabel, submit, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default FormModal;
 /**
  * Problems:

package/dist/ui/layouts/form.js

@@ -10,7 +10,7 @@ const form_1 = require("@bouku/form");
  * 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 }) }));
+function FormModal({ style, fields, initialData, submitLabel, 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, initialData: initialData, submitLabel: submitLabel, submit: submit }) }));
 }
 exports.default = FormModal;

package/dist/ui/layouts/normal.js

@@ -6,11 +6,11 @@ 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 core_1 = require("@bouku/core");
 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 { openModal, closeModal } = (0, context_1.useRawModal)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/modal",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -20,10 +20,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@bouko/style": "^0.1.6",
-    "@bouko/ts": "^0.2.0",
+    "@bouku/animate": "^0.0.1",
     "@bouku/core": "^0.2.4",
-    "@bouku/form": "^0.1.4",
+    "@bouku/form": "^0.1.5",
     "clsx": "^2.1.1",
     "formeact": "^0.0.3",
     "framer-motion": "^12.16.0",