@moriajs/ui 0.1.1

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @moriajs/ui@0.1.1 build C:\Codes\node\2026\github\moriajs\packages\ui
+> tsc
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,7 @@
+
+> @moriajs/ui@0.0.1 typecheck C:\Codes\node\2026\github\moriajs\packages\ui
+> tsc --noEmit
+
+src/index.ts(44,13): error TS2304: Cannot find name 'setTimeout'.
+src/index.ts(153,30): error TS2304: Cannot find name 'Event'.
+ ELIFECYCLE  Command failed with exit code 2.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Guntur D
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @moriajs/ui
+ *
+ * UI component library for Mithril.js.
+ * Includes toaster notifications, modals, and layout primitives.
+ * CSS-framework agnostic — ships its own minimal styles.
+ */
+import m from 'mithril';
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export interface Toast {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration?: number;
+}
+/**
+ * Show a toast notification.
+ *
+ * @example
+ * ```ts
+ * import { toast } from '@moriajs/ui';
+ *
+ * toast.success('Saved successfully!');
+ * toast.error('Something went wrong');
+ * toast.info('New update available');
+ * ```
+ */
+export declare const toast: {
+    show(message: string, type?: ToastType, duration?: number): string;
+    success(message: string, duration?: number): string;
+    error(message: string, duration?: number): string;
+    warning(message: string, duration?: number): string;
+    info(message: string, duration?: number): string;
+    dismiss(id: string): void;
+    clear(): void;
+};
+/**
+ * Toaster container component.
+ * Mount once in your app layout.
+ *
+ * @example
+ * ```ts
+ * import { Toaster } from '@moriajs/ui';
+ * m(Toaster); // Place in your root layout
+ * ```
+ */
+export declare const Toaster: m.Component;
+export interface ModalAttrs {
+    /** Whether the modal is visible */
+    isOpen: boolean;
+    /** Callback when modal is closed */
+    onClose: () => void;
+    /** Modal title */
+    title?: string;
+}
+/**
+ * Modal dialog component.
+ *
+ * @example
+ * ```ts
+ * import { Modal } from '@moriajs/ui';
+ *
+ * let showModal = false;
+ *
+ * m(Modal, {
+ *   isOpen: showModal,
+ *   onClose: () => { showModal = false; },
+ *   title: 'Confirm Action',
+ * }, [
+ *   m('p', 'Are you sure?'),
+ *   m('button', { onclick: () => { showModal = false; } }, 'Yes'),
+ * ]);
+ * ```
+ */
+export declare const Modal: m.Component<ModalAttrs>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,CAAC,MAAM,SAAS,CAAC;AAIxB,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,KAAK;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAKD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK;kBACA,MAAM,SAAQ,SAAS;qBAiBpB,MAAM,aAAa,MAAM;mBAG3B,MAAM,aAAa,MAAM;qBAGvB,MAAM,aAAa,MAAM;kBAG5B,MAAM,aAAa,MAAM;gBAG3B,MAAM;;CAWrB,CAAC;AASF;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAqCvB,CAAC;AAIF,MAAM,WAAW,UAAU;IACvB,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,UAAU,CAgEzC,CAAC"}

package/dist/index.js

@@ -0,0 +1,176 @@
+/**
+ * @moriajs/ui
+ *
+ * UI component library for Mithril.js.
+ * Includes toaster notifications, modals, and layout primitives.
+ * CSS-framework agnostic — ships its own minimal styles.
+ */
+import m from 'mithril';
+/** Internal toast state */
+const toasts = [];
+/**
+ * Show a toast notification.
+ *
+ * @example
+ * ```ts
+ * import { toast } from '@moriajs/ui';
+ *
+ * toast.success('Saved successfully!');
+ * toast.error('Something went wrong');
+ * toast.info('New update available');
+ * ```
+ */
+export const toast = {
+    show(message, type = 'info', duration = 3000) {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        toasts.push({ id, message, type, duration });
+        m.redraw();
+        if (duration > 0) {
+            setTimeout(() => {
+                const index = toasts.findIndex((t) => t.id === id);
+                if (index !== -1) {
+                    toasts.splice(index, 1);
+                    m.redraw();
+                }
+            }, duration);
+        }
+        return id;
+    },
+    success(message, duration) {
+        return this.show(message, 'success', duration);
+    },
+    error(message, duration) {
+        return this.show(message, 'error', duration);
+    },
+    warning(message, duration) {
+        return this.show(message, 'warning', duration);
+    },
+    info(message, duration) {
+        return this.show(message, 'info', duration);
+    },
+    dismiss(id) {
+        const index = toasts.findIndex((t) => t.id === id);
+        if (index !== -1) {
+            toasts.splice(index, 1);
+            m.redraw();
+        }
+    },
+    clear() {
+        toasts.length = 0;
+        m.redraw();
+    },
+};
+const TOAST_COLORS = {
+    success: '#16a34a',
+    error: '#dc2626',
+    warning: '#d97706',
+    info: '#2563eb',
+};
+/**
+ * Toaster container component.
+ * Mount once in your app layout.
+ *
+ * @example
+ * ```ts
+ * import { Toaster } from '@moriajs/ui';
+ * m(Toaster); // Place in your root layout
+ * ```
+ */
+export const Toaster = {
+    view() {
+        return m('.moria-toaster', {
+            style: {
+                position: 'fixed',
+                top: '1rem',
+                right: '1rem',
+                zIndex: '9999',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.5rem',
+            },
+        }, toasts.map((t) => m('.moria-toast', {
+            key: t.id,
+            'data-type': t.type,
+            style: {
+                padding: '0.75rem 1rem',
+                borderRadius: '0.5rem',
+                color: '#fff',
+                fontSize: '0.875rem',
+                minWidth: '250px',
+                cursor: 'pointer',
+                background: TOAST_COLORS[t.type],
+            },
+            onclick: () => toast.dismiss(t.id),
+        }, t.message)));
+    },
+};
+/**
+ * Modal dialog component.
+ *
+ * @example
+ * ```ts
+ * import { Modal } from '@moriajs/ui';
+ *
+ * let showModal = false;
+ *
+ * m(Modal, {
+ *   isOpen: showModal,
+ *   onClose: () => { showModal = false; },
+ *   title: 'Confirm Action',
+ * }, [
+ *   m('p', 'Are you sure?'),
+ *   m('button', { onclick: () => { showModal = false; } }, 'Yes'),
+ * ]);
+ * ```
+ */
+export const Modal = {
+    view(vnode) {
+        if (!vnode.attrs.isOpen)
+            return m('div', { style: { display: 'none' } });
+        return m('.moria-modal-overlay', {
+            style: {
+                position: 'fixed',
+                inset: '0',
+                background: 'rgba(0,0,0,0.5)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: '9998',
+            },
+            onclick: (e) => {
+                if (e.target === e.currentTarget)
+                    vnode.attrs.onClose();
+            },
+        }, m('.moria-modal', {
+            style: {
+                background: '#fff',
+                borderRadius: '0.75rem',
+                padding: '1.5rem',
+                minWidth: '400px',
+                maxWidth: '90vw',
+                maxHeight: '90vh',
+                overflowY: 'auto',
+                boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)',
+            },
+        }, [
+            vnode.attrs.title
+                ? m('.moria-modal-header', {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: '1rem',
+                    },
+                }, [
+                    m('h2', { style: { margin: '0', fontSize: '1.25rem', fontWeight: '600' } }, vnode.attrs.title),
+                    m('button', {
+                        style: { background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer', color: '#6b7280' },
+                        onclick: vnode.attrs.onClose,
+                    }, '×'),
+                ])
+                : m('span'),
+            m('.moria-modal-body', vnode.children),
+        ]));
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@moriajs/ui",
+  "version": "0.1.1",
+  "type": "module",
+  "description": "MoriaJS UI — Toaster, modals, and component primitives for Mithril.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "rimraf": "^6.0.0",
+    "@types/mithril": "^2.2.0"
+  },
+  "peerDependencies": {
+    "mithril": "^2.2.0"
+  },
+  "license": "MIT",
+  "author": "Guntur-D <guntur.d.npm@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/guntur-d/moriajs.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/guntur-d/moriajs/tree/main/packages/ui#readme",
+  "bugs": {
+    "url": "https://github.com/guntur-d/moriajs/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist .turbo"
+  }
+}

package/src/index.ts

@@ -0,0 +1,230 @@
+/**
+ * @moriajs/ui
+ *
+ * UI component library for Mithril.js.
+ * Includes toaster notifications, modals, and layout primitives.
+ * CSS-framework agnostic — ships its own minimal styles.
+ */
+
+import m from 'mithril';
+
+// ─── Toaster ────────────────────────────────────────
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export interface Toast {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration?: number;
+}
+
+/** Internal toast state */
+const toasts: Toast[] = [];
+
+/**
+ * Show a toast notification.
+ *
+ * @example
+ * ```ts
+ * import { toast } from '@moriajs/ui';
+ *
+ * toast.success('Saved successfully!');
+ * toast.error('Something went wrong');
+ * toast.info('New update available');
+ * ```
+ */
+export const toast = {
+    show(message: string, type: ToastType = 'info', duration = 3000) {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        toasts.push({ id, message, type, duration });
+        m.redraw();
+
+        if (duration > 0) {
+            setTimeout(() => {
+                const index = toasts.findIndex((t) => t.id === id);
+                if (index !== -1) {
+                    toasts.splice(index, 1);
+                    m.redraw();
+                }
+            }, duration);
+        }
+
+        return id;
+    },
+    success(message: string, duration?: number) {
+        return this.show(message, 'success', duration);
+    },
+    error(message: string, duration?: number) {
+        return this.show(message, 'error', duration);
+    },
+    warning(message: string, duration?: number) {
+        return this.show(message, 'warning', duration);
+    },
+    info(message: string, duration?: number) {
+        return this.show(message, 'info', duration);
+    },
+    dismiss(id: string) {
+        const index = toasts.findIndex((t) => t.id === id);
+        if (index !== -1) {
+            toasts.splice(index, 1);
+            m.redraw();
+        }
+    },
+    clear() {
+        toasts.length = 0;
+        m.redraw();
+    },
+};
+
+const TOAST_COLORS: Record<ToastType, string> = {
+    success: '#16a34a',
+    error: '#dc2626',
+    warning: '#d97706',
+    info: '#2563eb',
+};
+
+/**
+ * Toaster container component.
+ * Mount once in your app layout.
+ *
+ * @example
+ * ```ts
+ * import { Toaster } from '@moriajs/ui';
+ * m(Toaster); // Place in your root layout
+ * ```
+ */
+export const Toaster: m.Component = {
+    view() {
+        return m(
+            '.moria-toaster',
+            {
+                style: {
+                    position: 'fixed',
+                    top: '1rem',
+                    right: '1rem',
+                    zIndex: '9999',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '0.5rem',
+                },
+            },
+            toasts.map((t) =>
+                m(
+                    '.moria-toast',
+                    {
+                        key: t.id,
+                        'data-type': t.type,
+                        style: {
+                            padding: '0.75rem 1rem',
+                            borderRadius: '0.5rem',
+                            color: '#fff',
+                            fontSize: '0.875rem',
+                            minWidth: '250px',
+                            cursor: 'pointer',
+                            background: TOAST_COLORS[t.type],
+                        },
+                        onclick: () => toast.dismiss(t.id),
+                    },
+                    t.message
+                )
+            )
+        );
+    },
+};
+
+// ─── Modal ──────────────────────────────────────────
+
+export interface ModalAttrs {
+    /** Whether the modal is visible */
+    isOpen: boolean;
+    /** Callback when modal is closed */
+    onClose: () => void;
+    /** Modal title */
+    title?: string;
+}
+
+/**
+ * Modal dialog component.
+ *
+ * @example
+ * ```ts
+ * import { Modal } from '@moriajs/ui';
+ *
+ * let showModal = false;
+ *
+ * m(Modal, {
+ *   isOpen: showModal,
+ *   onClose: () => { showModal = false; },
+ *   title: 'Confirm Action',
+ * }, [
+ *   m('p', 'Are you sure?'),
+ *   m('button', { onclick: () => { showModal = false; } }, 'Yes'),
+ * ]);
+ * ```
+ */
+export const Modal: m.Component<ModalAttrs> = {
+    view(vnode) {
+        if (!vnode.attrs.isOpen) return m('div', { style: { display: 'none' } });
+
+        return m(
+            '.moria-modal-overlay',
+            {
+                style: {
+                    position: 'fixed',
+                    inset: '0',
+                    background: 'rgba(0,0,0,0.5)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: '9998',
+                },
+                onclick: (e: MouseEvent) => {
+                    if (e.target === e.currentTarget) vnode.attrs.onClose();
+                },
+            },
+            m(
+                '.moria-modal',
+                {
+                    style: {
+                        background: '#fff',
+                        borderRadius: '0.75rem',
+                        padding: '1.5rem',
+                        minWidth: '400px',
+                        maxWidth: '90vw',
+                        maxHeight: '90vh',
+                        overflowY: 'auto',
+                        boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)',
+                    },
+                },
+                [
+                    vnode.attrs.title
+                        ? m(
+                            '.moria-modal-header',
+                            {
+                                style: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    marginBottom: '1rem',
+                                },
+                            },
+                            [
+                                m('h2', { style: { margin: '0', fontSize: '1.25rem', fontWeight: '600' } }, vnode.attrs.title),
+                                m(
+                                    'button',
+                                    {
+                                        style: { background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer', color: '#6b7280' },
+                                        onclick: vnode.attrs.onClose,
+                                    },
+                                    '×'
+                                ),
+                            ]
+                        )
+                        : m('span'),
+                    m('.moria-modal-body', vnode.children as m.Children),
+                ]
+            )
+        );
+    },
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "rootDir": "src",
+        "lib": [
+            "ES2022",
+            "DOM"
+        ],
+        "jsx": "react",
+        "jsxFactory": "m"
+    },
+    "include": [
+        "src"
+    ]
+}