uibee 2.8.2 → 2.8.5

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/components/inputs/select.d.ts

@@ -16,5 +16,6 @@ export type SelectProps = {
     placeholder?: string;
     info?: string;
     clearable?: boolean;
+    searchable?: boolean;
 };
-export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder, info, clearable, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder, info, clearable, searchable, }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/select.js

@@ -3,11 +3,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useClickOutside } from '../../hooks';
-import { ChevronDown, X } from 'lucide-react';
+import { ChevronDown, X, Search } from 'lucide-react';
 import { FieldWrapper } from './shared';
-export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = 'Select an option', info, clearable = true, }) {
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = 'Select an option', info, clearable = true, searchable = true, }) {
     const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
     const [selectedOption, setSelectedOption] = useState(options.find(opt => opt.value === value));
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchTerm('');
+        }
+    }, [isOpen]);
     useEffect(() => {
         setSelectedOption(options.find(opt => opt.value === value));
     }, [value, options]);
@@ -30,6 +36,7 @@ export default function Select({ label, name, value, onChange, options, error, c
             onChange(null);
         }
     }
+    const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
     return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: [_jsxs("div", { className: 'relative', ref: containerRef, children: [_jsxs("button", { type: 'button', onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen, "aria-labelledby": label ? undefined : name, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text text-left
@@ -47,13 +54,17 @@ export default function Select({ label, name, value, onChange, options, error, c
                             text-login-200 pointer-events-none
                             transition-transform duration-200
                             ${isOpen ? 'rotate-180' : ''}
-                        `, children: _jsx(ChevronDown, { className: 'w-4 h-4' }) })] })] }), isOpen && (_jsx("div", { className: `
+                        `, children: _jsx(ChevronDown, { className: 'w-4 h-4' }) })] })] }), isOpen && (_jsxs("div", { className: `
                         absolute z-50 w-full mt-1 bg-login-600 border border-login-500
-                        rounded-md shadow-lg max-h-60 overflow-auto noscroll
-                    `, children: options.length > 0 ? (_jsx("ul", { className: 'py-1', role: 'listbox', children: options.map((option) => (_jsx("li", { role: 'option', "aria-selected": selectedOption?.value === option.value, children: _jsxs("button", { type: 'button', onClick: () => handleSelect(option), className: `
-                                                w-full text-left px-3 py-2 text-sm
-                                                hover:bg-login-500 transition-colors duration-150
-                                                flex items-center gap-2
-                                                ${selectedOption?.value === option.value ? 'bg-login-500 text-login' : 'text-login-text'}
-                                            `, children: [option.image && (_jsx(Image, { src: option.image, alt: '', width: 75, height: 25, className: 'rounded-md object-cover shrink-0' })), _jsx("span", { className: 'truncate', children: option.label })] }) }, option.value))) })) : (_jsx("div", { className: 'px-3 py-2 text-sm text-login-200', children: "No options available" })) }))] }), _jsx("input", { type: 'hidden', name: name, value: selectedOption?.value || '', required: required })] }));
+                        rounded-md shadow-lg max-h-60 overflow-hidden flex flex-col
+                    `, children: [searchable && (_jsx("div", { className: 'p-2 sticky top-0 bg-login-600 border-b border-login-500 z-10', children: _jsxs("div", { className: 'relative', children: [_jsx(Search, { className: 'absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-login-200' }), _jsx("input", { type: 'text', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: 'Search...', autoFocus: true, className: `
+                                            w-full bg-login-500/50 border border-login-500 rounded-md 
+                                            py-1.5 pl-9 pr-3 text-sm text-login-text 
+                                            focus:outline-none focus:border-login focus:ring-1 focus:ring-login
+                                        ` })] }) })), _jsx("div", { className: 'overflow-auto noscroll', children: filteredOptions.length > 0 ? (_jsx("ul", { className: 'py-1', role: 'listbox', children: filteredOptions.map((option) => (_jsx("li", { role: 'option', "aria-selected": selectedOption?.value === option.value, children: _jsxs("button", { type: 'button', onClick: () => handleSelect(option), className: `
+                                                    w-full text-left px-3 py-2 text-sm
+                                                    hover:bg-login-500 transition-colors duration-150
+                                                    flex items-center gap-2
+                                                    ${selectedOption?.value === option.value ? 'bg-login-500 text-login' : 'text-login-text'}
+                                                `, children: [option.image && (_jsx(Image, { src: option.image, alt: '', width: 75, height: 25, className: 'rounded-md object-cover shrink-0' })), _jsx("span", { className: 'truncate', children: option.label })] }) }, option.value))) })) : (_jsx("div", { className: 'px-3 py-2 text-sm text-login-200', children: searchTerm ? 'No results found' : 'No options available' })) })] }))] }), _jsx("input", { type: 'hidden', name: name, value: selectedOption?.value || '', required: required })] }));
 }

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 }: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+export default function LoginPage({ title, description, redirectURL, version, btg, handleSubmit, guestRedirectURL, guestText }: LoginPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ 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 }) {
+export default function LoginPage({ title, description, redirectURL, version, btg, handleSubmit, guestRedirectURL, 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));
@@ -13,5 +13,6 @@ export default function LoginPage({ title, description, redirectURL, version, bt
                             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' })] })), _jsxs("span", { className: 'text-sm mt-2', children: ["v", version] })] }) }));
+                        `, 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] })] }) }));
 }

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;
@@ -293,6 +296,9 @@
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -347,6 +353,9 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -1004,6 +1013,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 +1304,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 +1325,9 @@
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1344,6 +1362,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;
@@ -1401,6 +1422,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -1429,6 +1454,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 +1514,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 +1573,9 @@
   .stroke-login {
     stroke: var(--color-login);
   }
+  .stroke-login-50 {
+    stroke: var(--color-login-50);
+  }
   .stroke-\[3\.5px\] {
     stroke-width: 3.5px;
   }
@@ -1563,6 +1600,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);
   }
@@ -1578,6 +1618,9 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1617,6 +1660,9 @@
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.8.2",
+  "version": "2.8.5",
   "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'

package/src/components/inputs/select.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import Image from 'next/image'
 import { useClickOutside } from '../../hooks'
-import { ChevronDown, X } from 'lucide-react'
+import { ChevronDown, X, Search } from 'lucide-react'
 import { FieldWrapper } from './shared'
 
 export type Option = {
@@ -25,6 +25,7 @@ export type SelectProps = {
     placeholder?: string
     info?: string
     clearable?: boolean
+    searchable?: boolean
 }
 
 export default function Select({
@@ -40,12 +41,20 @@ export default function Select({
     placeholder = 'Select an option',
     info,
     clearable = true,
+    searchable = true,
 }: SelectProps) {
     const [isOpen, setIsOpen] = useState(false)
+    const [searchTerm, setSearchTerm] = useState('')
     const [selectedOption, setSelectedOption] = useState<Option | undefined>(
         options.find(opt => opt.value === value)
     )
 
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchTerm('')
+        }
+    }, [isOpen])
+
     useEffect(() => {
         setSelectedOption(options.find(opt => opt.value === value))
     }, [value, options])
@@ -70,6 +79,10 @@ export default function Select({
         }
     }
 
+    const filteredOptions = options.filter(option =>
+        option.label.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+
     return (
         <FieldWrapper
             label={label}
@@ -141,41 +154,62 @@ export default function Select({
                 {isOpen && (
                     <div className={`
                         absolute z-50 w-full mt-1 bg-login-600 border border-login-500
-                        rounded-md shadow-lg max-h-60 overflow-auto noscroll
+                        rounded-md shadow-lg max-h-60 overflow-hidden flex flex-col
                     `}>
-                        {options.length > 0 ? (
-                            <ul className='py-1' role='listbox'>
-                                {options.map((option) => (
-                                    <li key={option.value} role='option' aria-selected={selectedOption?.value === option.value}>
-                                        <button
-                                            type='button'
-                                            onClick={() => handleSelect(option)}
-                                            className={`
-                                                w-full text-left px-3 py-2 text-sm
-                                                hover:bg-login-500 transition-colors duration-150
-                                                flex items-center gap-2
-                                                ${selectedOption?.value === option.value ? 'bg-login-500 text-login' : 'text-login-text'}
-                                            `}
-                                        >
-                                            {option.image && (
-                                                <Image
-                                                    src={option.image}
-                                                    alt=''
-                                                    width={75}
-                                                    height={25}
-                                                    className='rounded-md object-cover shrink-0'
-                                                />
-                                            )}
-                                            <span className='truncate'>{option.label}</span>
-                                        </button>
-                                    </li>
-                                ))}
-                            </ul>
-                        ) : (
-                            <div className='px-3 py-2 text-sm text-login-200'>
-                                No options available
+                        {searchable && (
+                            <div className='p-2 sticky top-0 bg-login-600 border-b border-login-500 z-10'>
+                                <div className='relative'>
+                                    <Search className='absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-login-200' />
+                                    <input
+                                        type='text'
+                                        value={searchTerm}
+                                        onChange={(e) => setSearchTerm(e.target.value)}
+                                        placeholder='Search...'
+                                        autoFocus
+                                        className={`
+                                            w-full bg-login-500/50 border border-login-500 rounded-md 
+                                            py-1.5 pl-9 pr-3 text-sm text-login-text 
+                                            focus:outline-none focus:border-login focus:ring-1 focus:ring-login
+                                        `}
+                                    />
+                                </div>
                             </div>
                         )}
+                        <div className='overflow-auto noscroll'>
+                            {filteredOptions.length > 0 ? (
+                                <ul className='py-1' role='listbox'>
+                                    {filteredOptions.map((option) => (
+                                        <li key={option.value} role='option' aria-selected={selectedOption?.value === option.value}>
+                                            <button
+                                                type='button'
+                                                onClick={() => handleSelect(option)}
+                                                className={`
+                                                    w-full text-left px-3 py-2 text-sm
+                                                    hover:bg-login-500 transition-colors duration-150
+                                                    flex items-center gap-2
+                                                    ${selectedOption?.value === option.value ? 'bg-login-500 text-login': 'text-login-text'}
+                                                `}
+                                            >
+                                                {option.image && (
+                                                    <Image
+                                                        src={option.image}
+                                                        alt=''
+                                                        width={75}
+                                                        height={25}
+                                                        className='rounded-md object-cover shrink-0'
+                                                    />
+                                                )}
+                                                <span className='truncate'>{option.label}</span>
+                                            </button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            ) : (
+                                <div className='px-3 py-2 text-sm text-login-200'>
+                                    {searchTerm ? 'No results found' : 'No options available'}
+                                </div>
+                            )}
+                        </div>
                     </div>
                 )}
             </div>

package/src/components/login/loginPage.tsx

@@ -3,7 +3,16 @@ import { LogIn } from 'lucide-react'
 import Logo from '@components/logo/logo'
 import Link from 'next/link'
 
-export default function LoginPage({ title, description, redirectURL, version, btg, handleSubmit }: LoginPageProps) {
+export default function LoginPage({
+    title,
+    description,
+    redirectURL,
+    version,
+    btg,
+    handleSubmit,
+    guestRedirectURL,
+    guestText
+}: LoginPageProps) {
     return (
         <main className='w-full h-full flex items-center justify-center bg-login-800 p-8'>
             <div
@@ -69,6 +78,14 @@ export default function LoginPage({ title, description, redirectURL, version, bt
                         <LogIn className='w-6 h-6' />
                     </Link>
                 )}
+                {guestRedirectURL &&
+                    <Link
+                        href={guestRedirectURL}
+                        className='text-sm font-semibold cursor-pointer opacity-50'
+                    >
+                        {guestText || 'Continue as guest'}
+                    </Link>
+                }
                 <span className='text-sm mt-2'>v{version}</span>
             </div>
         </main>

package/src/types/components.d.ts

@@ -7,6 +7,8 @@ declare module 'uibee/components' {
         version: string
         btg?: boolean
         handleSubmit?: (formData: FormData) => void
+        guestRedirectURL?: string
+        guestText?: string
     }
 
     export type ToastType = 'info' | 'success' | 'warning' | 'error'