moverlay 0.0.0

package/dist/assets/forms/login.json

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

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/components/trigger.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+type ButtonProps = {
+    variant?: "primary" | "outline" | "ghost";
+    size?: "xs" | "sm" | "md" | "lg";
+    onClick?: () => void;
+    disabled?: boolean;
+    style?: string;
+    children: ReactNode;
+};
+type Props = Omit<ButtonProps, "onClick"> & {
+    modal: string;
+};
+export declare function ModalButton({ modal, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ModalLink({ modal, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/trigger.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import useModal from "../state/context";
+import { Button } from "@bouko/react";
+export function ModalButton({ modal, ...props }) {
+    const { openModal } = useModal();
+    return (_jsx(Button, { action: () => openModal(modal), ...props }));
+}
+export function ModalLink({ modal, ...props }) {
+    const { openModal } = useModal();
+    return (_jsx(Button, { variant: "ghost", action: () => openModal(modal), ...props }));
+}

package/dist/core/types.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export type Config = Record<string, ReactElement>;

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/field.d.ts

@@ -0,0 +1,7 @@
+import { type Struct } from "superstruct";
+export default function useField<T>(schema: Struct, initial?: T): {
+    value: T | undefined;
+    isValid: boolean;
+    error: string | undefined;
+    update: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
+};

package/dist/hooks/field.js

@@ -0,0 +1,28 @@
+"use client";
+import { useState, useEffect } from "react";
+import { assert } from "superstruct";
+export default function useField(schema, initial) {
+    const [value, update] = useState(initial);
+    const [error, setError] = useState();
+    useEffect(() => {
+        update(initial);
+    }, [initial]);
+    useEffect(() => {
+        try {
+            assert(value, schema);
+            setError(undefined);
+        }
+        catch (err) {
+            setError(processIssues(err));
+        }
+    }, [value]);
+    return {
+        value,
+        isValid: !error,
+        error,
+        update
+    };
+}
+function processIssues(error) {
+    return error.refinement ?? error.message;
+}

package/dist/hooks/form.d.ts

@@ -0,0 +1,8 @@
+import type { ZodType } from "zod";
+export default function useValidation<T>(schema: ZodType<T>, initialData?: Partial<T>): {
+    isValid: boolean;
+    formData: Partial<T>;
+    error: Record<string, string> | null;
+    update: import("react").Dispatch<import("react").SetStateAction<Partial<T>>>;
+    updateField: <K extends keyof T>(key: K, value: T[K]) => void;
+};

package/dist/hooks/form.js

@@ -0,0 +1,25 @@
+"use client";
+import { useState, useEffect } from "react";
+export default function useValidation(schema, initialData) {
+    const [formData, update] = useState(initialData ?? {});
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        update(initialData ?? {});
+    }, [initialData]);
+    const updateField = (key, value) => {
+        update((prev) => ({ ...prev, [key]: value }));
+    };
+    useEffect(() => {
+        try {
+            schema.parse(formData);
+            setError(null);
+        }
+        catch (err) {
+            setError(err.issues.reduce((obj, x) => {
+                obj[x.path.toString()] = x.message;
+                return obj;
+            }, {}));
+        }
+    }, [formData, schema]);
+    return { isValid: !error, formData, error, update, updateField };
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as ModalProvider } from "./state/provider";
+export { default as useModal } from "./state/context";
+export { default as RootModal } from "./state/root";
+export { default as Modal } from "./layouts/normal";
+export { default as FormModal } from "./layouts/form";
+export { default as RegisterModal } from "./templates/register";
+export { default as LoginModal } from "./templates/login";

package/dist/index.js

@@ -0,0 +1,7 @@
+export { default as ModalProvider } from "./state/provider";
+export { default as useModal } from "./state/context";
+export { default as RootModal } from "./state/root";
+export { default as Modal } from "./layouts/normal";
+export { default as FormModal } from "./layouts/form";
+export { default as RegisterModal } from "./templates/register";
+export { default as LoginModal } from "./templates/login";

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/layouts/form.d.ts

@@ -0,0 +1,19 @@
+import { ModalProps } from "./normal";
+import type { FormBuilderProps } from "@bouko/form";
+import type { JsonMap } from "@bouko/ts";
+type Props<T> = Omit<ModalProps, "children"> & Omit<FormBuilderProps<T>, "cancel" | "sound" | "oops">;
+/**
+ * Form Modal component.
+ *
+ * Combines a standard modal layout with a form builder.
+ * Wraps @bouko/form `FormBuilder` for form handling.
+**/
+export declare function FormModal<T extends JsonMap>({ formId, style, fields, validator, submit, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default FormModal;
+/**
+ * Problems:
+ *
+ *  - Perfect `Modal`
+ *  - Perfect `ModalProps`
+ *  - Perfect `FormBuilderProps`
+**/ 

package/dist/layouts/form.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "./normal";
+import { FormBuilder } from "@bouko/form";
+/**
+ * Form Modal component.
+ *
+ * Combines a standard modal layout with a form builder.
+ * Wraps @bouko/form `FormBuilder` for form handling.
+**/
+export function FormModal({ formId, style, fields, validator, submit, ...props }) {
+    return (_jsx(Modal, { ...props, children: _jsx(FormBuilder, { formId: formId, style: style, fields: fields, validator: validator, submit: submit }) }));
+}
+export default FormModal;

package/dist/layouts/load-json.d.ts

@@ -0,0 +1 @@
+export declare function loadJson<T>(name: string): Promise<T>;

package/dist/layouts/load-json.js

@@ -0,0 +1,21 @@
+import { promises as fs } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+function findSrcDirectory(startDir) {
+    let currentDir = startDir;
+    while (currentDir !== path.dirname(currentDir)) { // Stop at root
+        if (path.basename(currentDir) === 'src') {
+            return currentDir;
+        }
+        currentDir = path.dirname(currentDir);
+    }
+    throw new Error('Could not find src directory');
+}
+export async function loadJson(name) {
+    const srcDir = findSrcDirectory(__dirname);
+    const filePath = path.join(srcDir, "assets", `${name}.json`);
+    const file = await fs.readFile(filePath, "utf-8");
+    return JSON.parse(file);
+}

package/dist/layouts/normal.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { 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/layouts/normal.js

@@ -0,0 +1,17 @@
+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 function Modal({ 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-96 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"
+};
+export default Modal;

package/dist/state/context.d.ts

@@ -0,0 +1,12 @@
+import { JsonMap } from "@bouko/ts";
+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,10 @@
+"use client";
+import { useContext, createContext, } from "react";
+export const Context = createContext({
+    modal: null,
+    parameters: {},
+    openModal: () => undefined,
+    closeModal: () => undefined
+});
+export const useModal = () => useContext(Context);
+export default useModal;

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/provider.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { Config } from "../core/types";
+/**
+ * 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 {Config} config - A map of modal ID keys to the modal component itself.
+ * @param {ReactNode} children - Child components that will have access to modals.
+**/
+export default function ModalProvider({ config, children }: {
+    config: Config;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Problems:
+ *
+ *  - Perfect `Context`.
+ *  - Perfect `RootModal`.
+ *  - Perfect `Config`.
+**/ 

package/dist/state/provider.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Context } from "./context";
+import RootModal from "./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 {Config} config - A map of modal ID keys to the modal component itself.
+ * @param {ReactNode} children - Child components that will have access to modals.
+**/
+export default function ModalProvider({ config, children }) {
+    const [activeModal, setActiveModal] = useState();
+    const [parameters, setParameters] = useState({});
+    const openModal = async (modal, params) => {
+        setActiveModal(modal);
+        setParameters(params || {});
+    };
+    const closeModal = () => {
+        setActiveModal(undefined);
+        setParameters({});
+    };
+    return (_jsxs(Context.Provider, { value: {
+            activeId: activeModal,
+            openModal,
+            modal: activeModal ? config[activeModal] : null,
+            parameters,
+            closeModal
+        }, children: [children, _jsx(RootModal, {})] }));
+}

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,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useModal } from "./context";
+import { AnimatePresence, Animation } from "@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.
+**/
+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 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/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

@@ -0,0 +1,86 @@
+{
+
+  "name": "moverlay",
+
+  "version": "0.0.0",
+
+  "main": "./dist/index.js",
+
+  "types": "./dist/index.d.ts",
+
+  "license": "MIT",
+
+  "files": [
+
+    "dist"
+
+  ],
+
+  "publishConfig": {
+
+    "access": "public"
+
+  },
+
+  "author": "",
+
+  "description": "",
+
+  "peerDependencies": {
+
+    "next": ">=15.4.5",
+
+    "react": ">=18.3.1"
+
+  },
+
+  "engines": {},
+
+  "scripts": {
+
+    "build": "tsc"
+
+  },
+
+  "dependencies": {
+
+    "@bouko/form": "^0.6.1",
+
+    "@bouko/react": "^2.4.8",
+
+    "@bouko/style": "^0.1.6",
+
+    "@bouko/ts": "^0.2.0",
+
+    "clsx": "^2.1.1",
+
+    "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",
+
+    "next": "^15.4.5",
+
+    "nupabase": "^0.2.0",
+
+    "react": "^19.1.1",
+
+    "typescript": "^5.9.2"
+
+  }
+
+}
+