uibee 1.3.0 → 1.4.0

package/dist/globals.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --spacing: 0.25rem;
     --container-xs: 20rem;
+    --container-sm: 24rem;
     --container-md: 28rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
@@ -20,6 +21,7 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
+    --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -27,6 +29,8 @@
     --default-mono-font-family: var(--font-mono);
     --color-login: #fd8738;
     --color-login-900: #121212;
+    --color-login-800: #181818;
+    --color-login-700: #1a1a1a;
     --color-login-600: #212121;
     --color-login-100: #b0b0b0;
     --color-login-50: #ededed;
@@ -181,9 +185,24 @@
   }
 }
 @layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+  .z-50 {
+    z-index: 50;
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -193,36 +212,57 @@
   .flex {
     display: flex;
   }
+  .inline {
+    display: inline;
+  }
   .aspect-\[3\/1\] {
     aspect-ratio: 3/1;
   }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .w-full {
     width: 100%;
   }
+  .w-sm {
+    width: var(--container-sm);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -238,6 +278,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -247,12 +290,21 @@
   .bg-login-600 {
     background-color: var(--color-login-600);
   }
+  .bg-login-700 {
+    background-color: var(--color-login-700);
+  }
+  .bg-login-800 {
+    background-color: var(--color-login-800);
+  }
   .bg-login-900 {
     background-color: var(--color-login-900);
   }
   .object-contain {
     object-fit: contain;
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }

package/dist/src/components/index.d.ts

@@ -1 +1,2 @@
-export { default as LoginPage } from './loginPage';
+export { default as LoginPage } from './login/loginPage';
+export { default as Toaster, addToast } from './toast/toaster';

package/dist/src/components/index.js

@@ -1 +1,2 @@
-export { default as LoginPage } from './loginPage';
+export { default as LoginPage } from './login/loginPage';
+export { default as Toaster, addToast } from './toast/toaster';

package/dist/src/components/{loginPage.js → login/loginPage.js}

@@ -2,9 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LogIn } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
-import logo from '../../images/logo-tekst-white.svg';
+import logo from '../../../images/logo-tekst-white.svg';
 export default function LoginPage({ title, description, redirectURI, version, btg, handleSubmit }) {
-    return (_jsx("main", { className: 'min-h-screen flex items-center justify-center bg-login-900 p-8', children: _jsxs("div", { className: 'flex flex-col justify-center items-center bg-login-600 px-4 py-12 rounded-xl w-full max-w-md gap-4 md:gap-6', children: [_jsx("div", { className: 'relative aspect-[3/1] w-full', children: _jsx(Image, { src: logo, alt: 'Logo', fill: true, className: 'object-contain sm:px-12' }) }), _jsxs("h1", { className: 'text-3xl font-extrabold text-login text-center tracking-tight', children: [title, " ", btg ? ' - Break the Glass' : ''] }), description && (_jsx("p", { className: 'text-login-100 text-center font-medium text-lg mb-2 max-w-xs', children: description })), btg ? (_jsxs("form", { className: 'w-full flex flex-col gap-3 max-w-xs', onSubmit: e => { handleSubmit?.(new FormData(e.currentTarget)); }, children: [_jsx("input", { type: 'text', name: 'name', placeholder: 'Name', className: 'py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none', required: true }), _jsx("input", { type: 'password', name: 'token', placeholder: 'Token', className: 'py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none', required: true }), _jsx("button", { type: 'submit', className: 'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
+    return (_jsx("main", { className: 'min-h-screen flex items-center justify-center bg-login-900 p-8', children: _jsxs("div", { className: 'flex flex-col justify-center items-center bg-login-600 px-4 py-12 rounded-xl w-full max-w-md gap-4 md:gap-6', children: [_jsx("div", { className: 'relative aspect-[3/1] w-full', children: _jsx(Image, { src: logo, alt: 'Logo', fill: true, className: 'object-contain sm:px-12' }) }), _jsxs("h1", { className: 'text-3xl font-extrabold text-login text-center tracking-tight', children: [title, " ", btg ? ' - Break the Glass' : ''] }), description && (_jsx("p", { className: 'text-login-100 text-center font-medium text-lg mb-2 max-w-xs', children: description })), btg ? (_jsxs("form", { className: 'w-full flex flex-col gap-3 max-w-xs', onSubmit: e => {
+                        e.preventDefault();
+                        handleSubmit?.(new FormData(e.currentTarget));
+                        e.currentTarget.reset();
+                    }, children: [_jsx("input", { type: 'text', name: 'name', placeholder: 'Name', className: 'py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none', required: true }), _jsx("input", { type: 'password', name: 'token', placeholder: 'Token', className: 'py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none', required: true }), _jsx("button", { type: 'submit', className: 'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
                                 'hover:bg-login/80 text-login-50 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsx(Link, { href: redirectURI, className: 'w-full flex justify-center', children: _jsxs("button", { className: 'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +
                             'hover:bg-login/80 text-login-50 transition-all duration-200 mb-2 mt-2', children: ["Login", _jsx(LogIn, { className: 'w-6 h-6' })] }) })), _jsxs("span", { className: 'text-login-100 text-sm mt-2', children: ["v", version] })] }) }));
 }

package/dist/src/components/toast/toaster.d.ts

@@ -0,0 +1,3 @@
+import { ToastProps } from 'uibee/components';
+export declare function addToast(message: string, type?: ToastProps['type']): void;
+export default function Toaster(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toast/toaster.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react';
+import { useEffect, useState, useRef } from 'react';
+const observers = [];
+export function addToast(message, type) {
+    observers.forEach((observer) => observer({ message, type }));
+}
+export default function Toaster() {
+    const [toasts, setToasts] = useState([]);
+    const timers = useRef({});
+    const [isHovered, setIsHovered] = useState(false);
+    const pauseTimes = useRef({});
+    useEffect(() => {
+        const listener = ({ message, type }) => {
+            const id = Date.now();
+            setToasts(prev => {
+                const newToasts = prev.concat({ id, message, type, remaining: 3000, created: Date.now() }).slice(-3);
+                return newToasts;
+            });
+        };
+        observers.push(listener);
+        return () => {
+            const idx = observers.indexOf(listener);
+            if (idx > -1)
+                observers.splice(idx, 1);
+            Object.values(timers.current).forEach(clearTimeout);
+        };
+    }, []);
+    useEffect(() => {
+        if (isHovered) {
+            toasts.forEach(toast => {
+                if (timers.current[toast.id]) {
+                    clearTimeout(timers.current[toast.id]);
+                    const elapsed = Date.now() - toast.created;
+                    pauseTimes.current[toast.id] = toast.remaining - elapsed > 0 ? toast.remaining - elapsed : 0;
+                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, remaining: pauseTimes.current[toast.id] } : t));
+                    delete timers.current[toast.id];
+                }
+            });
+        }
+        else {
+            toasts.forEach(toast => {
+                if (!timers.current[toast.id] && toast.remaining > 0) {
+                    timers.current[toast.id] = setTimeout(() => {
+                        setToasts(prev => prev.filter(t => t.id !== toast.id));
+                        delete timers.current[toast.id];
+                    }, toast.remaining);
+                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, created: Date.now() } : t));
+                }
+            });
+        }
+    }, [isHovered, toasts]);
+    const bgClasses = ['bg-login-600', 'bg-login-700', 'bg-login-800'];
+    return (_jsx("div", { className: `fixed bottom-4 right-4 z-50 flex ${isHovered ? 'flex-col-reverse items-end gap-2' : 'flex-col items-end'}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: toasts.slice().reverse().map((toast, idx) => (_jsxs("div", { className: 'p-2 rounded-lg text-login-50 animate-fade-in-down transition-all w-sm flex items-center gap-2 ' +
+                (bgClasses[idx] || bgClasses[2]), style: isHovered ? {} : {
+                position: 'absolute',
+                right: 0,
+                zIndex: 100 - idx,
+                bottom: `${idx * 8}px`,
+                transform: `scale(${1 - idx * 0.05})`,
+            }, children: [_jsx("span", { className: 'flex-shrink-0 w-10 h-10 flex items-center justify-center', children: _jsx(ToastIcon, { type: toast.type }) }), _jsx("span", { children: toast.message })] }, toast.id))) }));
+}
+function ToastIcon({ type }) {
+    switch (type) {
+        case 'success':
+            return _jsx(CircleCheck, {});
+        case 'warning':
+            return _jsx(CircleAlert, {});
+        case 'error':
+            return _jsx(CircleX, {});
+        case 'info':
+            return _jsx(Info, {});
+    }
+}

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export * from './hooks/useVisibility';
-export * from './hooks/useDarkMode';
-export * from './components/loginPage';
-export * from './scripts/buildCss';
+export * from './hooks';
+export * from './components';
+export * from './utils';
+export * from './scripts';

package/dist/src/index.js

@@ -1,4 +1,4 @@
-export * from './hooks/useVisibility';
-export * from './hooks/useDarkMode';
-export * from './components/loginPage';
-export * from './scripts/buildCss';
+export * from './hooks';
+export * from './components';
+export * from './utils';
+export * from './scripts';

package/dist/src/scripts/buildCss.js

@@ -14,7 +14,7 @@ export default async function buildCss() {
     });
     mkdirSync(path.dirname(outputPath), { recursive: true });
     writeFileSync(outputPath, result.css);
-    console.log('🐝 dist/globals.css generated successfully');
+    console.log('🐝 CSS generated successfully');
 }
 buildCss().catch(err => {
     console.error(err);

package/dist/src/scripts/rewriteAlias.d.ts

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

package/dist/src/scripts/rewriteAlias.js

@@ -0,0 +1,31 @@
+import fs from 'fs';
+import path from 'path';
+import { globSync } from 'glob';
+const DIST_DIR = path.resolve('dist');
+const IMAGES_DIR = path.join(DIST_DIR, 'images');
+const jsFiles = globSync(`${DIST_DIR}/**/*.js`, { nodir: true });
+jsFiles.forEach((file) => {
+    let content = fs.readFileSync(file, 'utf-8');
+    const fileDir = path.dirname(file);
+    content = content.replace(/from ['"]@images\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(IMAGES_DIR, p1);
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
+        return `from '${relative}'`;
+    });
+    const inlineImages = content.match(/src: ['"]images\/(.*?)['"]/g);
+    if (inlineImages) {
+        inlineImages.forEach((match) => {
+            const imgPathMatch = match.match(/src: ['"]images\/(.*?)['"]/);
+            if (imgPathMatch) {
+                const imgRelativePath = imgPathMatch[1];
+                const resolvedPath = path.join(IMAGES_DIR, imgRelativePath);
+                console.error(`⚠️  Detected inline image in ${file}: ${match}`);
+                console.error(`   Resolved file path: ${resolvedPath}`);
+                console.error(`   This is not allowed. Use 'import image from '../../images/${imgRelativePath}'' instead.`);
+            }
+        });
+    }
+    fs.writeFileSync(file, content, 'utf-8');
+});
+console.log('🐝 Image imports rewritten');
+console.log('🐝 Build complete');

package/dist/src/utils/discord/discordAlert.d.ts

@@ -0,0 +1,2 @@
+import { DiscordAlertProps } from 'uibee/utils';
+export default function discordAlert({ application, description, type, ping, criticalRole, webhookURL }: DiscordAlertProps): Promise<number>;

package/dist/src/utils/discord/discordAlert.js

@@ -0,0 +1,32 @@
+export default async function discordAlert({ application, description, type = '', ping = false, criticalRole, webhookURL }) {
+    try {
+        const data = {
+            embeds: [
+                {
+                    title: `🐝 ${application} ${`${type.toUpperCase()} `}🐝`,
+                    description: description,
+                    color: 0xff0000,
+                    timestamp: new Date().toISOString()
+                }
+            ]
+        };
+        if (ping) {
+            data.content = `🚨 <@&${criticalRole}> 🚨`;
+        }
+        const response = await fetch(webhookURL ?? '', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+        if (!response.ok) {
+            throw new Error(await response.text());
+        }
+        return response.status;
+    }
+    catch (error) {
+        console.log(error);
+        return 500;
+    }
+}

package/dist/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { default as alertSlowQuery } from './sql/alertSlowQuery';
+export { default as discordAlert } from './discord/discordAlert';

package/dist/src/utils/index.js

@@ -0,0 +1,2 @@
+export { default as alertSlowQuery } from './sql/alertSlowQuery';
+export { default as discordAlert } from './discord/discordAlert';

package/dist/src/utils/sql/alertSlowQuery.d.ts

@@ -0,0 +1,2 @@
+import { SlowQueryProps } from 'uibee/utils';
+export default function alertSlowQuery({ application, duration, name, cacheTTL, webhookURL, criticalRole }: SlowQueryProps): Promise<void>;

package/dist/src/utils/sql/alertSlowQuery.js

@@ -0,0 +1,25 @@
+export default async function alertSlowQuery({ application, duration, name, cacheTTL, webhookURL, criticalRole }) {
+    const lowerCaseName = name.toLowerCase();
+    const firstUpperCaseName = `${name.slice(0, 1).toUpperCase()}${name.slice(1).toLowerCase()}`;
+    if (duration > cacheTTL / 2 && webhookURL) {
+        const data = {
+            embeds: [
+                {
+                    title: `🐝 ${application} ${firstUpperCaseName} Query Timing 🐝`,
+                    description: `🐝 Slow ${lowerCaseName} query detected: ${duration.toFixed(2)}s`,
+                    color: 0xff0000,
+                    timestamp: new Date().toISOString()
+                }
+            ]
+        };
+        if (duration > (cacheTTL - 1)) {
+            data.content = `🚨 <@&${criticalRole}> 🚨`;
+        }
+        console.warn(`${firstUpperCaseName} query exceeded half of cache TTL: ${duration.toFixed(2)}s`);
+        await fetch(webhookURL, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+        });
+    }
+}

package/eslint.config.js

@@ -0,0 +1,46 @@
+import eslint from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import typescriptParser from '@typescript-eslint/parser'
+import stylistic from '@stylistic/eslint-plugin'
+import pluginNext from '@next/eslint-plugin-next'
+
+export default [
+    eslint.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        plugins: {
+            '@stylistic': stylistic,
+            '@next/next': pluginNext,
+        },
+        languageOptions: {
+            sourceType: 'module',
+            ecmaVersion: 2024,
+            parser: typescriptParser,
+        },
+        rules: {
+            ...pluginNext.configs.recommended.rules,
+            strict: 'error',
+            'no-var': 'error',
+            'array-callback-return': 'error',
+            yoda: 'error',
+            '@stylistic/indent': ['error', 4],
+            '@stylistic/quotes': ['error', 'single'],
+            '@stylistic/semi': ['error', 'never'],
+            '@stylistic/jsx-quotes': ['error', 'prefer-single'],
+            '@stylistic/type-generic-spacing': ['error'],
+            '@stylistic/type-annotation-spacing': 'error',
+            '@stylistic/no-trailing-spaces': 'error',
+            '@typescript-eslint/no-unused-vars': 'error',
+            '@typescript-eslint/ban-ts-comment': 'off',
+            '@typescript-eslint/no-non-null-assertion': 'off',
+            '@stylistic/max-len': [
+                'error',
+                {
+                    code: 140,
+                    ignoreComments: true,
+                    ignoreUrls: true,
+                },
+            ],
+        },
+    },
+]

package/images/logo-tekst-white.svg

@@ -0,0 +1,171 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 147.02299 59.20511"
+   version="1.1"
+   id="svg1433"
+   sodipodi:docname="logo-tekst-white.svg"
+   width="147.02299"
+   height="59.205109"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     id="namedview1435"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="5.1614308"
+     inkscape:cx="73.429252"
+     inkscape:cy="28.577347"
+     inkscape:window-width="1896"
+     inkscape:window-height="1028"
+     inkscape:window-x="12"
+     inkscape:window-y="40"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1433" />
+  <defs
+     id="defs1371">
+    <style
+       id="style1369">.a{fill:#fff;}.b{fill:none;stroke:#f0802a;stroke-miterlimit:10;stroke-width:3.5px;}</style>
+  </defs>
+  <title
+     id="title1373">logo_tekst</title>
+  <path
+     class="a"
+     d="m 28.77713,58.37738 v 0.76465 H 25.531 v -5.61816 h 0.91309 v 4.85351 z"
+     id="path1375" />
+  <path
+     class="a"
+     d="m 30.47831,59.142 h -0.917 v -5.61813 h 0.917 z"
+     id="path1377" />
+  <path
+     class="a"
+     d="M 36.46268,53.52387 V 59.142 H 35.99881 A 0.36347,0.36347 0 0 1 35.6785,58.98185 L 32.59256,55.018 c 0.0078,0.07617 0.01368,0.15039 0.01758,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.06641,0.07812 l 3.08984,3.96779 c -0.0078,-0.08105 -0.01367,-0.16015 -0.01757,-0.23828 -0.0039,-0.07813 -0.0059,-0.15039 -0.0059,-0.21875 v -3.6631 z"
+     id="path1379" />
+  <path
+     class="a"
+     d="m 39.84549,57.1684 a 2.91264,2.91264 0 0 1 -0.11523,0.84765 1.748,1.748 0 0 1 -0.34375,0.64063 1.52483,1.52483 0 0 1 -0.56543,0.40527 2.00691,2.00691 0 0 1 -0.78223,0.14258 3.23707,3.23707 0 0 1 -0.40234,-0.0254 3.44454,3.44454 0 0 1 -0.41309,-0.0801 l 0.04688,-0.5459 a 0.2079,0.2079 0 0 1 0.06055,-0.125 0.19754,0.19754 0 0 1 0.14257,-0.0469 0.74035,0.74035 0 0 1 0.18067,0.0293 1.36468,1.36468 0 0 0 0.71387,-0.041 0.74722,0.74722 0 0 0 0.3125,-0.2207 0.9864,0.9864 0 0 0 0.1914,-0.38574 2.19551,2.19551 0 0 0 0.06445,-0.57227 v -3.667 h 0.90918 z"
+     id="path1381" />
+  <path
+     class="a"
+     d="m 44.6326,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z"
+     id="path1383" />
+  <path
+     class="a"
+     d="M 46.53592,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.50391 v 0.7373 z"
+     id="path1385" />
+  <path
+     class="a"
+     d="m 55.25956,56.33344 a 3.18179,3.18179 0 0 1 -0.20215,1.15039 2.6634,2.6634 0 0 1 -0.57227,0.90722 2.59685,2.59685 0 0 1 -0.88476,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.58781,2.58781 0 0 1 0.88476,0.59668 2.68144,2.68144 0 0 1 0.57227,0.90918 3.1871,3.1871 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.821,1.821 0 0 0 -0.375,-0.65527 1.63008,1.63008 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65415,1.65415 0 0 0 -0.59278,0.41407 1.84212,1.84212 0 0 0 -0.3789,0.65527 2.92611,2.92611 0 0 0 0,1.74316 1.83766,1.83766 0 0 0 0.3789,0.6543 1.64222,1.64222 0 0 0 0.59278,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61838,1.61838 0 0 0 0.59082,-0.40918 1.81652,1.81652 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z"
+     id="path1387" />
+  <path
+     class="a"
+     d="m 60.534,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 57.17072 V 59.142 H 56.2576 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.03516,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.07715,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 h -0.74121 v 1.97852 z"
+     id="path1389" />
+  <path
+     class="a"
+     d="m 64.72049,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z"
+     id="path1391" />
+  <path
+     class="a"
+     d="M 70.35721,53.52387 V 59.142 H 69.89335 A 0.36347,0.36347 0 0 1 69.57303,58.98185 L 66.4871,55.018 c 0.0078,0.07617 0.01367,0.15039 0.01757,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22936,0.22936 0 0 1 0.06641,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08985,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z"
+     id="path1393" />
+  <path
+     class="a"
+     d="m 72.6121,59.142 h -0.917 v -5.61813 h 0.917 z"
+     id="path1395" />
+  <path
+     class="a"
+     d="M 78.59794,53.52387 V 59.142 H 78.13358 A 0.36344,0.36344 0 0 1 77.81327,58.98185 L 74.72733,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.713,0.713 0 0 1 0.0986,0.0059 0.31254,0.31254 0 0 1 0.0762,0.02148 0.22936,0.22936 0 0 1 0.0664,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z"
+     id="path1397" />
+  <path
+     class="a"
+     d="M 84.53544,56.37641 V 58.6 a 3.24425,3.24425 0 0 1 -1.9502,0.60449 3.419,3.419 0 0 1 -1.23535,-0.21289 2.7275,2.7275 0 0 1 -0.94141,-0.59277 2.59231,2.59231 0 0 1 -0.60156,-0.90723 3.08634,3.08634 0 0 1 -0.21,-1.1582 3.23536,3.23536 0 0 1 0.20215,-1.165 2.5484,2.5484 0 0 1 1.49414,-1.498 3.29189,3.29189 0 0 1 1.20215,-0.209 3.52605,3.52605 0 0 1 0.62988,0.05273 3.11559,3.11559 0 0 1 0.54,0.14649 2.535,2.535 0 0 1 0.84668,0.52246 l -0.26074,0.418 a 0.26545,0.26545 0 0 1 -0.16016,0.12109 0.27377,0.27377 0 0 1 -0.21094,-0.04688 c -0.0752,-0.04492 -0.15527,-0.09082 -0.24023,-0.14062 a 2.01137,2.01137 0 0 0 -0.29,-0.13867 2.127,2.127 0 0 0 -0.37891,-0.10547 2.72656,2.72656 0 0 0 -0.50683,-0.041 2.09434,2.09434 0 0 0 -0.80176,0.14649 1.70173,1.70173 0 0 0 -0.61035,0.418 1.84692,1.84692 0 0 0 -0.39063,0.65722 2.5766,2.5766 0 0 0 -0.13672,0.86231 2.62333,2.62333 0 0 0 0.14453,0.89844 1.88731,1.88731 0 0 0 0.41016,0.67187 1.74772,1.74772 0 0 0 0.6416,0.419 2.55647,2.55647 0 0 0 1.459,0.0703 2.80344,2.80344 0 0 0 0.53222,-0.207 V 57.07074 H 82.928 a 0.19287,0.19287 0 0 1 -0.13964,-0.04883 0.16848,0.16848 0 0 1 -0.0508,-0.12695 v -0.51855 z"
+     id="path1399" />
+  <path
+     class="a"
+     d="m 89.1243,58.40473 -0.004,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z"
+     id="path1401" />
+  <path
+     class="a"
+     d="M 94.761,53.52387 V 59.142 H 94.29713 A 0.36347,0.36347 0 0 1 93.97682,58.98185 L 90.8909,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.0986,0.0059 0.3128,0.3128 0 0 1 0.0762,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z"
+     id="path1403" />
+  <path
+     class="a"
+     d="M 98.95829,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.5039 v 0.7373 z"
+     id="path1405" />
+  <path
+     class="a"
+     d="m 107.68192,56.33344 a 3.18158,3.18158 0 0 1 -0.20215,1.15039 2.66353,2.66353 0 0 1 -0.57226,0.90722 2.597,2.597 0 0 1 -0.88477,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.588,2.588 0 0 1 0.88477,0.59668 2.68157,2.68157 0 0 1 0.57226,0.90918 3.18689,3.18689 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.82066,1.82066 0 0 0 -0.375,-0.65527 1.63,1.63 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65411,1.65411 0 0 0 -0.59277,0.41407 1.84214,1.84214 0 0 0 -0.37891,0.65527 2.92632,2.92632 0 0 0 0,1.74316 1.83768,1.83768 0 0 0 0.37891,0.6543 1.64218,1.64218 0 0 0 0.59277,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61829,1.61829 0 0 0 0.59082,-0.40918 1.81623,1.81623 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z"
+     id="path1407" />
+  <path
+     class="a"
+     d="m 112.95731,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 109.594 V 59.142 h -0.91309 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.0352,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.0772,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 H 109.594 v 1.97852 z"
+     id="path1409" />
+  <path
+     class="a"
+     d="m 116.4954,59.142 h -0.917 v -5.61813 h 0.917 z"
+     id="path1411" />
+  <path
+     class="a"
+     d="m 121.69559,54.28461 h -1.75195 V 59.142 h -0.9082 v -4.85739 h -1.75586 v -0.76074 h 4.416 z"
+     id="path1413" />
+  <polyline
+     class="b"
+     points="47.871 98.1 33.189 98.1 33.189 83.418"
+     id="polyline1415"
+     transform="translate(-31.392,-41.894)" />
+  <polyline
+     class="b"
+     points="33.142 58.326 33.142 43.644 47.824 43.644"
+     id="polyline1417"
+     transform="translate(-31.392,-41.894)" />
+  <polyline
+     class="b"
+     points="161.983 98.122 176.665 98.122 176.665 83.44"
+     id="polyline1419"
+     transform="translate(-31.392,-41.894)" />
+  <polyline
+     class="b"
+     points="176.665 58.372 176.665 43.69 161.983 43.69"
+     id="polyline1421"
+     transform="translate(-31.392,-41.894)" />
+  <path
+     class="a"
+     d="m 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z"
+     id="path1423" />
+  <path
+     class="a"
+     d="m 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z"
+     id="path1425" />
+  <path
+     class="a"
+     d="m 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z"
+     id="path1427" />
+  <path
+     class="a"
+     d="M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z"
+     id="path1429" />
+  <path
+     class="a"
+     d="m 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z"
+     id="path1431" />
+  <metadata
+     id="metadata1437">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:title>logo_tekst</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -20,19 +20,16 @@
     "./hooks": "./dist/src/hooks/index.js",
     "./components": "./dist/src/components/index.js",
     "./scripts": "./dist/src/scripts/index.js",
+    "./utils": "./dist/src/utils/index.js",
     "./styles": "./dist/globals.css"
   },
-  "files": [
-    "dist",
-    "src/globals.css"
-  ],
   "scripts": {
     "build:clean": "rm -rf dist",
     "build:css": "node --loader ts-node/esm src/scripts/buildCss.ts",
     "build:assets": "cp -r images dist/images",
-    "build:alias": "tsc-alias",
+    "build:rewrite": "node dist/src/scripts/rewriteAlias.js",
     "build:ts": "tsc --declaration",
-    "build": "npm run build:clean && npm run build:css && npm run build:ts && npm run build:alias && npm run build:assets",
+    "build": "npm run build:clean && npm run build:css && npm run build:ts && npm run build:assets && npm run build:rewrite",
     "lint": "eslint --fix ./src"
   },
   "peerDependencies": {
@@ -47,14 +44,14 @@
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "eslint": "^9.36.0",
+    "glob": "^11.0.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.13",
     "ts-node": "^10.9.2",
-    "tsc-alias": "^1.8.16",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.1"
   },
   "dependencies": {
     "lucide-react": "^0.544.0"
   }
-}
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as LoginPage } from './login/loginPage'
+export { default as Toaster, addToast } from './toast/toaster'

package/src/components/login/loginPage.tsx

@@ -0,0 +1,81 @@
+import { LoginPageProps } from 'uibee/components'
+import { LogIn } from 'lucide-react'
+import Link from 'next/link'
+import Image from 'next/image'
+import logo from '@images/logo-tekst-white.svg'
+
+export default function LoginPage({title, description, redirectURI, version, btg, handleSubmit}: LoginPageProps) {
+    return (
+        <main className='min-h-screen flex items-center justify-center bg-login-900 p-8'>
+            <div
+                className={
+                    'flex flex-col justify-center items-center bg-login-600 px-4 py-12 rounded-xl w-full max-w-md gap-4 md:gap-6'
+                }
+            >
+                <div className='relative aspect-[3/1] w-full'>
+                    <Image
+                        src={logo}
+                        alt='Logo'
+                        fill
+                        className='object-contain sm:px-12'
+                    />
+                </div>
+                <h1 className='text-3xl font-extrabold text-login text-center tracking-tight'>
+                    {title} {btg ? ' - Break the Glass' : ''}
+                </h1>
+                {description && (
+                    <p className='text-login-100 text-center font-medium text-lg mb-2 max-w-xs'>
+                        {description}
+                    </p>
+                )}
+                {btg ? (
+                    <form
+                        className='w-full flex flex-col gap-3 max-w-xs'
+                        onSubmit={e => {
+                            e.preventDefault()
+                            handleSubmit?.(new FormData(e.currentTarget))
+                            e.currentTarget.reset()
+                        }}
+                    >
+                        <input
+                            type='text'
+                            name='name'
+                            placeholder='Name'
+                            className='py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none'
+                            required
+                        />
+                        <input
+                            type='password'
+                            name='token'
+                            placeholder='Token'
+                            className='py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none'
+                            required
+                        />
+                        <button
+                            type='submit'
+                            className={
+                                'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
+                                'hover:bg-login/80 text-login-50 transition-all duration-200 mt-2'
+                            }
+                        >
+                            Login
+                        </button>
+                    </form>
+                ) : (
+                    <Link href={redirectURI} className='w-full flex justify-center'>
+                        <button
+                            className={
+                                'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +
+                                'hover:bg-login/80 text-login-50 transition-all duration-200 mb-2 mt-2'
+                            }
+                        >
+                            Login
+                            <LogIn className='w-6 h-6' />
+                        </button>
+                    </Link>
+                )}
+                <span className='text-login-100 text-sm mt-2'>v{version}</span>
+            </div>
+        </main>
+    )
+}

package/src/components/toast/toaster.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react'
+import { useEffect, useState, useRef } from 'react'
+import { ToastProps, ToastObserverProps } from 'uibee/components'
+
+
+const observers: ToastObserverProps[] = []
+
+export function addToast(message: string, type?: ToastProps['type']) {
+    observers.forEach((observer) => observer({ message, type }))
+}
+
+export default function Toaster() {
+    const [toasts, setToasts] = useState<Array<ToastProps & { id: number; remaining: number; created: number }>>([])
+    const timers = useRef<{ [id: number]: NodeJS.Timeout }>({})
+    const [isHovered, setIsHovered] = useState(false)
+    const pauseTimes = useRef<{ [id: number]: number }>({})
+
+    useEffect(() => {
+        const listener: ToastObserverProps = ({ message, type }) => {
+            const id = Date.now()
+            setToasts(prev => {
+                const newToasts = prev.concat({ id, message, type, remaining: 3000, created: Date.now() }).slice(-3)
+                return newToasts
+            })
+        }
+        observers.push(listener)
+        return () => {
+            const idx = observers.indexOf(listener)
+            if (idx > -1) observers.splice(idx, 1)
+            Object.values(timers.current).forEach(clearTimeout)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (isHovered) {
+            toasts.forEach(toast => {
+                if (timers.current[toast.id]) {
+                    clearTimeout(timers.current[toast.id])
+                    const elapsed = Date.now() - toast.created
+                    pauseTimes.current[toast.id] = toast.remaining - elapsed > 0 ? toast.remaining - elapsed : 0
+                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, remaining: pauseTimes.current[toast.id] } : t))
+                    delete timers.current[toast.id]
+                }
+            })
+        } else {
+            toasts.forEach(toast => {
+                if (!timers.current[toast.id] && toast.remaining > 0) {
+                    timers.current[toast.id] = setTimeout(() => {
+                        setToasts(prev => prev.filter(t => t.id !== toast.id))
+                        delete timers.current[toast.id]
+                    }, toast.remaining)
+                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, created: Date.now() } : t))
+                }
+            })
+        }
+    }, [isHovered, toasts])
+
+    const bgClasses = ['bg-login-600', 'bg-login-700', 'bg-login-800']
+    return (
+        <div
+            className={`fixed bottom-4 right-4 z-50 flex ${isHovered ? 'flex-col-reverse items-end gap-2' : 'flex-col items-end'}`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {toasts.slice().reverse().map((toast, idx) => (
+                <div
+                    key={toast.id}
+                    className={
+                        'p-2 rounded-lg text-login-50 animate-fade-in-down transition-all w-sm flex items-center gap-2 ' +
+                        (bgClasses[idx] || bgClasses[2])
+                    }
+                    style={isHovered ? {} : {
+                        position: 'absolute',
+                        right: 0,
+                        zIndex: 100 - idx,
+                        bottom: `${idx * 8}px`,
+                        transform: `scale(${1 - idx * 0.05})`,
+                    }}
+                >
+                    <span className='flex-shrink-0 w-10 h-10 flex items-center justify-center'>
+                        <ToastIcon type={toast.type} />
+                    </span>
+                    <span>{toast.message}</span>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+function ToastIcon({ type }: { type?: ToastProps['type'] }) {
+    switch (type) {
+        case 'success':
+            return <CircleCheck />
+        case 'warning':
+            return <CircleAlert />
+        case 'error':
+            return <CircleX />
+        case 'info':
+            return <Info />
+    }
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useVisibility } from './useVisibility'
+export { default as useDarkMode } from './useDarkMode'

package/src/hooks/useDarkMode.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+
+export default function useDarkMode() {
+    const [isDark, setIsDark] = useState(false)
+
+    useEffect(() => {
+        const darkClassExists = document.documentElement.classList.contains('dark')
+        setIsDark(darkClassExists)
+
+        const observer = new MutationObserver(() => {
+            setIsDark(document.documentElement.classList.contains('dark'))
+        })
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        })
+
+        return () => observer.disconnect()
+    }, [])
+
+    return isDark
+}

package/src/hooks/useVisibility.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+
+export default function useVisibility<T extends HTMLElement>(
+    onVisible: () => void,
+    rootMargin: string = '200px'
+) {
+    const [isVisible, setIsVisible] = useState(false)
+    const ref = useRef<T | null>(null)
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return
+
+        const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+        if (!isTouchDevice) return
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting) {
+                    setIsVisible(true)
+                    onVisible()
+                    observer.disconnect()
+                }
+            },
+            { rootMargin }
+        )
+
+        if (ref.current) observer.observe(ref.current)
+        return () => observer.disconnect()
+    }, [onVisible, rootMargin])
+
+    return { ref, isVisible }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './hooks'
+export * from './components'
+export * from './utils'
+export * from './scripts'

package/src/scripts/buildCss.ts

@@ -0,0 +1,25 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'fs'
+import * as path from 'path'
+import postcss from 'postcss'
+
+export default async function buildCss() {
+    const tailwindModule = await import(new URL('../../tailwind.config.ts', import.meta.url).href)
+    const tailwindConfig = tailwindModule.default ?? tailwindModule
+    const tailwindPostcss = (await import('@tailwindcss/postcss')).default
+    const inputPath = path.resolve('./src/globals.css')
+    const outputPath = path.resolve('./dist/globals.css')
+    const inputCss = readFileSync(inputPath, 'utf-8')
+    const result = await postcss([tailwindPostcss(tailwindConfig)]).process(inputCss, {
+        from: inputPath,
+        to: outputPath,
+    })
+
+    mkdirSync(path.dirname(outputPath), { recursive: true })
+    writeFileSync(outputPath, result.css)
+    console.log('🐝 CSS generated successfully')
+}
+
+buildCss().catch(err => {
+    console.error(err)
+    process.exit(1)
+})

package/src/scripts/index.ts

@@ -0,0 +1 @@
+export { default as buildCss } from './buildCss'

package/src/scripts/rewriteAlias.ts

@@ -0,0 +1,37 @@
+import fs from 'fs'
+import path from 'path'
+import { globSync } from 'glob'
+
+const DIST_DIR = path.resolve('dist')
+const IMAGES_DIR = path.join(DIST_DIR, 'images')
+
+const jsFiles = globSync(`${DIST_DIR}/**/*.js`, { nodir: true })
+
+jsFiles.forEach((file) => {
+    let content = fs.readFileSync(file, 'utf-8')
+    const fileDir = path.dirname(file)
+    content = content.replace(/from ['"]@images\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(IMAGES_DIR, p1)
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
+        return `from '${relative}'`
+    })
+
+    const inlineImages = content.match(/src: ['"]images\/(.*?)['"]/g)
+    if (inlineImages) {
+        inlineImages.forEach((match) => {
+            const imgPathMatch = match.match(/src: ['"]images\/(.*?)['"]/)
+            if (imgPathMatch) {
+                const imgRelativePath = imgPathMatch[1]
+                const resolvedPath = path.join(IMAGES_DIR, imgRelativePath)
+                console.error(`⚠️  Detected inline image in ${file}: ${match}`)
+                console.error(`   Resolved file path: ${resolvedPath}`)
+                console.error(`   This is not allowed. Use 'import image from '@images/${imgRelativePath}'' instead.`)
+            }
+        })
+    }
+
+    fs.writeFileSync(file, content, 'utf-8')
+})
+
+console.log('🐝 Image imports rewritten')
+console.log('🐝 Build complete')

package/src/types/components.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable @stylistic/semi */
+declare module 'uibee/components' {
+    export interface LoginPageProps {
+        title: string
+        description?: string
+        redirectURI: string
+        version: string
+        btg?: boolean
+        handleSubmit?: (formData: FormData) => void
+    }
+
+    export interface ToastProps {
+        id: number
+        message: string
+        type?: 'success' | 'error' | 'info' | 'warning'
+    }
+
+    export interface ToastEventProps {
+        message: string
+        type?: ToastProps['type']
+    }
+
+    export interface ToastObserverProps {
+        (event: ToastEventProps): void
+    }
+
+    export default function LoginPage(props: LoginPageProps): JSX.Element;
+    export default function Toaster(props: { toasts: ToastProps[] }): JSX.Element;
+}

package/src/types/hooks.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @stylistic/semi */
+declare module 'uibee/hooks' {
+    export default function useVisibility<T extends HTMLElement>(
+        onVisible: () => void,
+        rootMargin?: string
+    ): { ref: RefObject<T>; isVisible: boolean };
+
+    export default function useDarkMode(): boolean;
+}

package/src/types/svg.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: string
+    export default content
+}

package/src/types/utils.d.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @stylistic/semi */
+declare module 'uibee/utils' {
+    export interface SlowQueryProps {
+        application: string
+        duration: number
+        name: string
+        cacheTTL: number
+        webhookURL: string
+        criticalRole: string
+    }
+    export interface Embed {
+        title: string
+        description: string
+        color: number
+        timestamp: string
+    }
+
+    export interface Data {
+        content?: string
+        embeds: Embed[]
+    }
+
+    export interface DiscordAlertProps {
+        application: string
+        description: string
+        type: 'get' | 'post' | ''
+        ping: boolean
+        criticalRole: string
+        webhookURL: string
+    }
+
+    export default async function alertSlowQuery(props: SlowQueryProps): Promise<void>;
+    export default async function discordAlert(props: DiscordAlertProps): Promise<number>;
+}

package/src/utils/discord/discordAlert.ts

@@ -0,0 +1,44 @@
+import { Data, DiscordAlertProps } from 'uibee/utils'
+
+export default async function discordAlert({
+    application,
+    description,
+    type = '',
+    ping = false,
+    criticalRole,
+    webhookURL
+}: DiscordAlertProps): Promise<number> {
+    try {
+        const data: Data = {
+            embeds: [
+                {
+                    title: `🐝 ${application} ${`${type.toUpperCase()} `}🐝`,
+                    description: description,
+                    color: 0xff0000,
+                    timestamp: new Date().toISOString()
+                }
+            ]
+        }
+
+        if (ping) {
+            data.content = `🚨 <@&${criticalRole}> 🚨`
+        }
+
+        const response = await fetch(webhookURL ?? '', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        })
+
+        if (!response.ok) {
+            throw new Error(await response.text())
+        }
+
+        return response.status
+    } catch (error) {
+        console.log(error)
+        return 500
+    }
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as alertSlowQuery } from './sql/alertSlowQuery'
+export { default as discordAlert } from './discord/discordAlert'

package/src/utils/sql/alertSlowQuery.ts

@@ -0,0 +1,37 @@
+import { Data, SlowQueryProps } from 'uibee/utils'
+
+export default async function alertSlowQuery({
+    application,
+    duration,
+    name,
+    cacheTTL,
+    webhookURL,
+    criticalRole
+}: SlowQueryProps): Promise<void> {
+    const lowerCaseName = name.toLowerCase()
+    const firstUpperCaseName = `${name.slice(0, 1).toUpperCase()}${name.slice(1).toLowerCase()}`
+    if (duration > cacheTTL / 2 && webhookURL) {
+        const data: Data = {
+            embeds: [
+                {
+                    title: `🐝 ${application} ${firstUpperCaseName} Query Timing 🐝`,
+                    description: `🐝 Slow ${lowerCaseName} query detected: ${duration.toFixed(2)}s`,
+                    color: 0xff0000,
+                    timestamp: new Date().toISOString()
+                }
+            ]
+        }
+
+        if (duration > (cacheTTL - 1)) {
+            data.content = `🚨 <@&${criticalRole}> 🚨`
+        }
+
+        console.warn(`${firstUpperCaseName} query exceeded half of cache TTL: ${duration.toFixed(2)}s`)
+
+        await fetch(webhookURL, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+        })
+    }
+}

package/tailwind.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from 'tailwindcss'
+
+const tailwindConfig: Config = {
+    content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+    theme: { extend: {} },
+    plugins: [],
+}
+
+export default tailwindConfig

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "paths": {
+      "@images/*": ["images/*"]
+    }
+  },
+  "include": [
+    "src",
+    "tailwind.config.ts"
+  ]
+}