@bouku/modal 0.0.4 → 0.0.6

package/dist/state/index.d.ts

@@ -1,5 +1,6 @@
 import { type ModalConfig } from "./context";
-import type { ComponentProps } from "react";
+import type { ReactNode, ComponentProps } from "react";
+import { type ButtonProps } from "../ui/components/button";
 type ArgsFor<P> = {} extends P ? [props?: P] : [props: P];
 type ActiveModal<T extends ModalConfig> = {
     [K in keyof T]: {
@@ -9,12 +10,13 @@ type ActiveModal<T extends ModalConfig> = {
 }[keyof T];
 export declare const createModalSystem: <T extends ModalConfig>(config: T) => {
     ModalProvider: (props: {
-        children: React.ReactNode;
+        children: 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;
     };
+    ModalButton: (props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 };
 export { useRawModal } from "./context";

package/dist/state/index.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRawModal = exports.createModalSystem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const provider_1 = require("./provider");
 const context_1 = require("./context");
+const provider_1 = require("./provider");
+const button_1 = require("../ui/components/button");
 const createModalSystem = (config) => ({
     ModalProvider: (props) => ((0, jsx_runtime_1.jsx)(provider_1.ModalProvider, { config: config, ...props })),
     useModal: () => {
@@ -12,11 +13,12 @@ const createModalSystem = (config) => ({
             openModal(id, args[0]);
         }
         return {
-            active: active, // cast happens only here, at the typed edge
+            active: active,
             openModal: open,
             closeModal
         };
-    }
+    },
+    ModalButton: (props) => ((0, jsx_runtime_1.jsx)(button_1.ModalButton, { ...props }))
 });
 exports.createModalSystem = createModalSystem;
 var context_2 = require("./context");

package/dist/state/provider.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { ModalConfig } from "./context";
+import { type ReactNode } from "react";
+import { type ModalConfig } from "./context";
 export declare function ModalProvider<T extends ModalConfig>({ config, children }: {
     config: T;
     children: ReactNode;

package/dist/state/provider.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 animate_1 = require("@bouku/animate");
 function ModalProvider({ config, children }) {
     const [active, setActive] = (0, react_1.useState)(null);
     const openModal = (id, props) => setActive({ id, props: props ?? {} });

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

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

package/dist/ui/components/_.js

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

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

@@ -1,11 +1,12 @@
+import { type ModalConfig } from "../../state/context";
 import type { ReactNode } from "react";
 import type { JsonMap } from "ts-helper-kit";
-type ButtonProps = {
-    id: string;
+export type ButtonProps<T extends ModalConfig> = {
+    id: keyof T;
     params?: JsonMap;
     variant?: "surface" | "accent";
     icon?: ReactNode;
     children?: ReactNode;
+    disabled?: boolean;
 };
-export default function ModalButton({ id, params, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ModalButton<T extends ModalConfig>({ id, params, ...props }: ButtonProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/button.js

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

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

@@ -1,5 +1,14 @@
-import { ModalProps } from "./normal";
 import { FormBuilderField, FormData, FormSchema, PresetName } from "@bouku/form";
+import type { ReactNode } from "react";
+import type { Component } from "@bouku/core";
+type ModalProps = Component & {
+    title: string;
+    subtitle?: ReactNode;
+    redirect?: {
+        label: string;
+        to: string;
+    };
+};
 type Props<T extends FormData = FormData, P extends PresetName | undefined = undefined> = {
     fields: FormBuilderField[][];
     initialData?: Partial<T>;
@@ -12,6 +21,7 @@ type Props<T extends FormData = FormData, P extends PresetName | undefined = und
         code?: string;
         message?: string;
     }>;
+    oops?: (message: string) => void;
 } & Omit<ModalProps, "children">;
 /**
  * Form Modal component.
@@ -19,7 +29,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, initialData, submitLabel, submit, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function FormModal({ style, fields, initialData, submitLabel, submit, oops, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default FormModal;
 /**
  * Problems:

package/dist/ui/layouts/form.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormModal = FormModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const normal_1 = require("./normal");
+const notify_1 = require("@bouku/notify");
 const form_1 = require("@bouku/form");
 /**
  * Form Modal component.
@@ -10,7 +11,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, 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 }) }));
+function FormModal({ style, fields, initialData, submitLabel, submit, oops, ...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, oops: oops ?? ((msg) => (0, notify_1.isToasterMounted)() ? notify_1.toast.error(msg) : console.log(msg)) }) }));
 }
 exports.default = FormModal;

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

@@ -1,5 +1,5 @@
+import { type Component } from "@bouku/core";
 import type { ReactNode } from "react";
-import type { Component } from "@bouko/react";
 export type ModalProps = Component & {
     title: string;
     subtitle?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/modal",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -21,8 +21,9 @@
   },
   "dependencies": {
     "@bouku/animate": "^0.0.1",
-    "@bouku/core": "^0.2.4",
-    "@bouku/form": "^0.1.5",
+    "@bouku/core": "^0.4.1",
+    "@bouku/form": "^0.1.9",
+    "@bouku/notify": "^0.0.1",
     "clsx": "^2.1.1",
     "formeact": "^0.0.3",
     "framer-motion": "^12.16.0",

package/dist/state/root.d.ts

@@ -1,14 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-"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"
-};