uibee 2.8.2 → 2.8.3

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+type AlertProps = {
+    children: ReactNode;
+    variant?: 'warning' | 'info';
+    className?: string;
+};
+export default function Alert({ children, variant, className, }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/alert/alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, TriangleAlert, Info } from 'lucide-react';
+export default function Alert({ children, variant = 'warning', className = '', }) {
+    const color = variant === 'warning' ? 'bg-red-900'
+        : variant === 'info' ? 'bg-blue-600' :
+            'bg-gray-900';
+    const Icon = variant === 'warning' ? CircleAlert
+        : variant === 'info' ? Info :
+            TriangleAlert;
+    return (_jsxs("div", { className: `
+                grid grid-cols-[min-content_auto] rounded-lg
+                p-[0.5em_1em_0.5em_0.8em] items-start w-fit text-white
+                ${color} ${className}
+            `, children: [_jsx(Icon, { className: 'w-8 h-8 mr-[0.3rem] stroke-login-50' }), _jsx("div", { className: 'self-center', children: children })] }));
+}

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

@@ -19,3 +19,4 @@ export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, toast } from './toast/toaster';
 export { default as Button } from './buttons/button';
+export { default as Alert } from './alert/alert';

package/dist/src/components/index.js

@@ -27,3 +27,5 @@ export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, toast } from './toast/toaster';
 // Buttons
 export { default as Button } from './buttons/button';
+// Alert
+export { default as Alert } from './alert/alert';

package/dist/src/globals.css

@@ -10,12 +10,15 @@
     --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-900: oklch(39.6% 0.141 25.723);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --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);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -1004,6 +1007,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mr-\[0\.3rem\] {
+    margin-right: 0.3rem;
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1292,6 +1298,9 @@
   .grid-cols-8 {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
+  .grid-cols-\[min-content_auto\] {
+    grid-template-columns: min-content auto;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1310,6 +1319,9 @@
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1344,6 +1356,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1429,6 +1444,12 @@
   .bg-\[\#18181899\] {
     background-color: #18181899;
   }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
   .bg-login {
     background-color: var(--color-login);
   }
@@ -1483,6 +1504,9 @@
       background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
     }
   }
+  .bg-red-900 {
+    background-color: var(--color-red-900);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1539,6 +1563,9 @@
   .stroke-login {
     stroke: var(--color-login);
   }
+  .stroke-login-50 {
+    stroke: var(--color-login-50);
+  }
   .stroke-\[3\.5px\] {
     stroke-width: 3.5px;
   }
@@ -1563,6 +1590,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-\[0\.5em_1em_0\.5em_0\.8em\] {
+    padding: 0.5em 1em 0.5em 0.8em;
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.8.2",
+  "version": "2.8.3",
   "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/alert/alert.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+import { CircleAlert, TriangleAlert, Info } from 'lucide-react'
+
+type AlertProps = {
+    children: ReactNode
+    variant?: 'warning' | 'info'
+    className?: string
+}
+
+export default function Alert({
+    children,
+    variant = 'warning',
+    className = '',
+}: AlertProps) {
+    const color = variant === 'warning' ? 'bg-red-900'
+        : variant === 'info' ? 'bg-blue-600' :
+            'bg-gray-900'
+
+    const Icon = variant === 'warning' ? CircleAlert
+        : variant === 'info' ? Info :
+            TriangleAlert
+
+    return (
+        <div
+            className={`
+                grid grid-cols-[min-content_auto] rounded-lg
+                p-[0.5em_1em_0.5em_0.8em] items-start w-fit text-white
+                ${color} ${className}
+            `}
+        >
+            <Icon className='w-8 h-8 mr-[0.3rem] stroke-login-50' />
+            <div className='self-center'>{children}</div>
+        </div>
+    )
+}

package/src/components/index.ts

@@ -34,3 +34,6 @@ export { default as Toaster, toast } from './toast/toaster'
 
 // Buttons
 export { default as Button } from './buttons/button'
+
+// Alert
+export { default as Alert } from './alert/alert'