uibee 2.4.13 → 2.5.0

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

@@ -0,0 +1,12 @@
+import type { JSX } from 'react';
+type ButtonProps = {
+    text: string;
+    className?: string;
+    icon?: string | JSX.Element;
+    path?: string;
+    color?: 'primary' | 'secondary';
+    onClick?: (_: object) => void;
+    disabled?: boolean;
+};
+export default function Button({ text, className, icon, path, color, onClick, disabled }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+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, onClick, disabled }) {
+    const bg = color === 'secondary'
+        ? 'bg-login-600/70 outline-login-600 hover:bg-login-600/90'
+        : 'bg-login/70 outline-login hover:bg-login/90';
+    if (!path) {
+        return (_jsxs("button", { type: 'button', disabled: disabled, onClick: onClick, "aria-label": text, className: `
+                    ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                    focus:outline-none border-0 outline w-fit ${className}
+                `, children: [_jsx("h1", { className: 'font-bold', children: icon ? icon : '' }), _jsx("h1", { children: text })] }));
+    }
+    if (disabled) {
+        return (_jsxs("div", { className: `
+                    ${bg} cursor-not-allowed px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                `, children: [_jsx("h1", { className: 'font-bold', children: icon ? `${icon}` : '' }), _jsx("h1", { className: '', children: text })] }));
+    }
+    return (_jsxs(Link, { href: path, className: `
+                ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                justify-evenly items-center gap-2 select-none
+            `, children: [_jsx("h1", { className: 'font-bold', children: icon ? `${icon}` : '' }), _jsx("h1", { className: '', children: text })] }));
+}

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

@@ -15,3 +15,4 @@ export { default as Highlight } from './container/highlight';
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, addToast } from './toast/toaster';
+export { default as Button } from './buttons/button';

package/dist/src/components/index.js

@@ -21,3 +21,5 @@ export { default as Highlight } from './container/highlight';
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, addToast } from './toast/toaster';
+// Buttons
+export { default as Button } from './buttons/button';

package/dist/src/globals.css

@@ -603,6 +603,9 @@
   .animate-jump {
     animation: jump 0.4s 1;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -642,6 +645,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -696,6 +702,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-\[0\.10rem\] {
     border-style: var(--tw-border-style);
     border-width: 0.10rem;
@@ -729,6 +739,12 @@
   .bg-login-600 {
     background-color: var(--color-login-600);
   }
+  .bg-login-600\/70 {
+    background-color: color-mix(in srgb, #212121 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-600) 70%, transparent);
+    }
+  }
   .bg-login-700 {
     background-color: var(--color-login-700);
   }
@@ -750,6 +766,12 @@
       background-color: color-mix(in oklab, var(--color-login-900) 20%, transparent);
     }
   }
+  .bg-login\/70 {
+    background-color: color-mix(in srgb, #fd8738 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1002,6 +1024,16 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .outline-login {
+    outline-color: var(--color-login);
+  }
+  .outline-login-600 {
+    outline-color: var(--color-login-600);
+  }
   .backdrop-blur-xl {
     --tw-backdrop-blur: blur(var(--blur-xl));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1072,6 +1104,10 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
   .group-\[\.dropdown\]\:h-auto {
     &:is(:where(.group):is(.dropdown) *) {
       height: auto;
@@ -1202,6 +1238,16 @@
       }
     }
   }
+  .hover\:bg-login-600\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #212121 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-600) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login\/80 {
     &:hover {
       @media (hover: hover) {
@@ -1212,6 +1258,16 @@
       }
     }
   }
+  .hover\:bg-login\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fd8738 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-red-800 {
     &:hover {
       @media (hover: hover) {
@@ -1472,6 +1528,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -1553,6 +1614,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.4.13",
+  "version": "2.5.0",
   "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

@@ -0,0 +1,72 @@
+import Link from 'next/link'
+import type { JSX } from 'react'
+
+type ButtonProps = {
+    text: string
+    className?: string
+    icon?: string | JSX.Element
+    path?: string
+    color?: 'primary' | 'secondary'
+    onClick?: (_: object) => void
+    disabled?: boolean
+}
+
+export default function Button({
+    text,
+    className,
+    icon,
+    path,
+    color,
+    onClick,
+    disabled
+}: ButtonProps) {
+    const bg = color === 'secondary'
+        ? 'bg-login-600/70 outline-login-600 hover:bg-login-600/90'
+        : 'bg-login/70 outline-login hover:bg-login/90'
+
+    if (!path) {
+        return (
+            <button
+                type='button'
+                disabled={disabled}
+                onClick={onClick}
+                aria-label={text}
+                className={`
+                    ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                    focus:outline-none border-0 outline w-fit ${className}
+                `}
+            >
+                <h1 className='font-bold'>{icon ? icon : ''}</h1>
+                <h1>{text}</h1>
+            </button>
+        )
+    }
+
+    if (disabled) {
+        return (
+            <div
+                className={`
+                    ${bg} cursor-not-allowed px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                `}
+            >
+                <h1 className='font-bold'>{icon ? `${icon}` : ''}</h1>
+                <h1 className=''>{text}</h1>
+            </div>
+        )
+    }
+
+    return (
+        <Link
+            href={path}
+            className={`
+                ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                justify-evenly items-center gap-2 select-none
+            `}
+        >
+            <h1 className='font-bold'>{icon ? `${icon}` : ''}</h1>
+            <h1 className=''>{text}</h1>
+        </Link>
+    )
+}

package/src/components/container/highlight.tsx

@@ -1,3 +1,3 @@
 export default function Highlight({ children, className }: { children: React.ReactNode, className?: string }) {
     return <div className={`highlighted-section ${className ?? ''}`}>{children}</div>
-}
+}

package/src/components/index.ts

@@ -26,3 +26,6 @@ export { default as Highlight } from './container/highlight'
 export { default as VersionTag } from './version/version'
 export { default as LoginPage } from './login/loginPage'
 export { default as Toaster, addToast } from './toast/toaster'
+
+// Buttons
+export { default as Button } from './buttons/button'