uibee 2.9.2 → 2.9.4

package/dist/src/components/buttons/button.d.ts

@@ -5,9 +5,9 @@ type ButtonProps = {
     icon: string | JSX.Element;
     path?: string;
     type?: 'button' | 'submit' | 'reset';
-    color?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'warning' | 'danger' | 'success' | 'info';
     onClick?: (_: object | string) => void;
     disabled?: boolean;
 };
-export default function Button({ text, className, icon, path, color, type, onClick, disabled }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function Button({ text, className, icon, path, variant, type, onClick, disabled }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/buttons/button.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
-export default function Button({ text, className, icon, path, color, type, onClick, disabled }) {
-    const bg = color === 'secondary'
-        ? 'bg-login-500/70 outline-login-500 hover:bg-login-500/90'
-        : 'bg-login/70 outline-login hover:bg-login/90';
+const variants = {
+    primary: 'bg-login/70 outline-login hover:bg-login/90',
+    secondary: 'bg-login-500/70 outline-login-500 hover:bg-login-500/90',
+    warning: 'bg-yellow-500/70 outline-yellow-500 hover:bg-yellow-500/90',
+    danger: 'bg-red-600/70 outline-red-600 hover:bg-red-600/90',
+    success: 'bg-green-600/70 outline-green-600 hover:bg-green-600/90',
+    info: 'bg-blue-600/70 outline-blue-600 hover:bg-blue-600/90'
+};
+export default function Button({ text, className, icon, path, variant = 'primary', type, onClick, disabled }) {
+    const bg = variants[variant];
     if (!path) {
         return (_jsxs("button", { type: type || 'button', disabled: disabled, onClick: onClick, "aria-label": text, className: `
                     ${bg} cursor-pointer px-4 rounded-md min-h-8 h-8 flex

package/dist/src/components/login/loginPage.d.ts

@@ -1,2 +1,2 @@
 import { LoginPageProps } from 'uibee/components';
-export default function LoginPage({ title, description, redirectURL, version, btg, handleSubmit, guestRedirectURL, guestText }: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+export default function LoginPage({ title, description, redirectPath, version, btg, handleSubmit, guestRedirectPath, guestText }: LoginPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/login/loginPage.js

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LogIn } from 'lucide-react';
 import Logo from '../logo/logo';
 import Link from 'next/link';
-export default function LoginPage({ title, description, redirectURL, version, btg, handleSubmit, guestRedirectURL, guestText }) {
+export default function LoginPage({ title, description, redirectPath, version, btg, handleSubmit, guestRedirectPath, guestText }) {
     return (_jsx("main", { className: 'w-full h-full flex items-center justify-center bg-login-800 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(Logo, { className: 'object-contain px-6 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-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 font-medium focus:outline-none', required: true }), _jsx("input", { type: 'password', name: 'token', placeholder: 'Token', className: 'py-2 px-3 rounded bg-login-900 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 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsxs(Link, { href: redirectURL, className: `
+                                'hover:bg-login/80 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsxs(Link, { href: redirectPath, 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 transition-all
                             duration-200 mb-2 mt-2 cursor-pointer
-                        `, children: ["Login", _jsx(LogIn, { className: 'w-6 h-6' })] })), guestRedirectURL &&
-                    _jsx(Link, { href: guestRedirectURL, className: 'text-sm font-semibold cursor-pointer opacity-50', children: guestText || 'Continue as guest' }), _jsxs("span", { className: 'text-sm mt-2', children: ["v", version] })] }) }));
+                        `, children: ["Login", _jsx(LogIn, { className: 'w-6 h-6' })] })), guestRedirectPath &&
+                    _jsx(Link, { href: guestRedirectPath, className: 'text-sm font-semibold cursor-pointer opacity-50', children: guestText || 'Continue as guest' }), _jsxs("span", { className: 'text-sm mt-2', children: ["v", version] })] }) }));
 }

package/dist/src/globals.css

@@ -10,12 +10,14 @@
     --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-900: oklch(39.6% 0.141 25.723);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -1478,9 +1480,21 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-blue-600\/70 {
+    background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-600) 70%, transparent);
+    }
+  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
+  .bg-green-600\/70 {
+    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600) 70%, transparent);
+    }
+  }
   .bg-login {
     background-color: var(--color-login);
   }
@@ -1541,6 +1555,12 @@
       background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
     }
   }
+  .bg-red-600\/70 {
+    background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-600) 70%, transparent);
+    }
+  }
   .bg-red-700\/80 {
     background-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1556,6 +1576,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-500\/70 {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 70%, transparent);
+    }
+  }
   .bg-yellow-600\/80 {
     background-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1906,6 +1932,12 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-blue-600 {
+    outline-color: var(--color-blue-600);
+  }
+  .outline-green-600 {
+    outline-color: var(--color-green-600);
+  }
   .outline-login {
     outline-color: var(--color-login);
   }
@@ -1918,9 +1950,15 @@
       outline-color: color-mix(in oklab, var(--color-login-500) 60%, transparent);
     }
   }
+  .outline-red-600 {
+    outline-color: var(--color-red-600);
+  }
   .outline-red-700 {
     outline-color: var(--color-red-700);
   }
+  .outline-yellow-500 {
+    outline-color: var(--color-yellow-500);
+  }
   .outline-yellow-600 {
     outline-color: var(--color-yellow-600);
   }
@@ -2224,6 +2262,16 @@
       }
     }
   }
+  .hover\:bg-blue-600\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-blue-600) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-400\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2234,6 +2282,16 @@
       }
     }
   }
+  .hover\:bg-green-600\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-600) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login\! {
     &:hover {
       @media (hover: hover) {
@@ -2298,6 +2356,16 @@
       }
     }
   }
+  .hover\:bg-red-600\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-red-600) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -2305,6 +2373,16 @@
       }
     }
   }
+  .hover\:bg-yellow-500\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-yellow-500) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-yellow-600 {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.9.2",
+  "version": "2.9.4",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/buttons/button.tsx

@@ -7,24 +7,31 @@ type ButtonProps = {
     icon: string | JSX.Element
     path?: string
     type?: 'button' | 'submit' | 'reset'
-    color?: 'primary' | 'secondary'
+    variant?: 'primary' | 'secondary' | 'warning' | 'danger' | 'success' | 'info'
     onClick?: (_: object | string) => void
     disabled?: boolean
 }
 
+const variants = {
+    primary: 'bg-login/70 outline-login hover:bg-login/90',
+    secondary: 'bg-login-500/70 outline-login-500 hover:bg-login-500/90',
+    warning: 'bg-yellow-500/70 outline-yellow-500 hover:bg-yellow-500/90',
+    danger: 'bg-red-600/70 outline-red-600 hover:bg-red-600/90',
+    success: 'bg-green-600/70 outline-green-600 hover:bg-green-600/90',
+    info: 'bg-blue-600/70 outline-blue-600 hover:bg-blue-600/90'
+}
+
 export default function Button({
     text,
     className,
     icon,
     path,
-    color,
+    variant = 'primary',
     type,
     onClick,
     disabled
 }: ButtonProps) {
-    const bg = color === 'secondary'
-        ? 'bg-login-500/70 outline-login-500 hover:bg-login-500/90'
-        : 'bg-login/70 outline-login hover:bg-login/90'
+    const bg = variants[variant]
 
     if (!path) {
         return (

package/src/components/login/loginPage.tsx

@@ -6,11 +6,11 @@ import Link from 'next/link'
 export default function LoginPage({
     title,
     description,
-    redirectURL,
+    redirectPath,
     version,
     btg,
     handleSubmit,
-    guestRedirectURL,
+    guestRedirectPath,
     guestText
 }: LoginPageProps) {
     return (
@@ -66,7 +66,7 @@ export default function LoginPage({
                     </form>
                 ) : (
                     <Link
-                        href={redirectURL}
+                        href={redirectPath}
                         className={`
                             flex items-center justify-center gap-2 w-full
                             max-w-xs py-3 px-6 rounded-xl bg-login font-bold
@@ -78,9 +78,9 @@ export default function LoginPage({
                         <LogIn className='w-6 h-6' />
                     </Link>
                 )}
-                {guestRedirectURL &&
+                {guestRedirectPath &&
                     <Link
-                        href={guestRedirectURL}
+                        href={guestRedirectPath}
                         className='text-sm font-semibold cursor-pointer opacity-50'
                     >
                         {guestText || 'Continue as guest'}

package/src/types/components.d.ts

@@ -3,11 +3,11 @@ declare module 'uibee/components' {
     export interface LoginPageProps {
         title: string
         description?: string
-        redirectURL: string
+        redirectPath: string
         version: string
         btg?: boolean
         handleSubmit?: (formData: FormData) => void
-        guestRedirectURL?: string
+        guestRedirectPath?: string
         guestText?: string
     }