uibee 2.8.3 → 2.8.6

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

@@ -83,10 +83,32 @@ export default function Input(props) {
         const date = new Date(value);
         return isNaN(date.getTime()) ? null : date;
     }
+    function getDateDisplayValue() {
+        if (!value || !isDateType)
+            return value;
+        const date = getDateValue();
+        if (!date)
+            return value;
+        function pad(n) {
+            return n.toString().padStart(2, '0');
+        }
+        const yyyy = date.getFullYear();
+        const MM = pad(date.getMonth() + 1);
+        const dd = pad(date.getDate());
+        const hh = pad(date.getHours());
+        const mm = pad(date.getMinutes());
+        if (type === 'date')
+            return `${dd}.${MM}.${yyyy}`;
+        if (type === 'time')
+            return `${hh}:${mm}`;
+        if (type === 'datetime-local')
+            return `${dd}.${MM}.${yyyy} ${hh}:${mm}`;
+        return value;
+    }
     return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
                             absolute left-3 text-login-200
                             ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
-                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: name, type: isClickableType ? 'text' : type, value: value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: isClickableType ? undefined : name, type: isClickableType ? 'text' : type, value: isDateType ? getDateDisplayValue() : value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
@@ -96,5 +118,5 @@ export default function Input(props) {
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
-                    ` }), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
+                    ` }), isClickableType && (_jsx("input", { type: 'hidden', name: name, value: value })), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
 }

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/inputs/shared/dateTimePickerPopup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
@@ -87,7 +87,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
         const daysInMonth = getDaysInMonth(year, month);
         const firstDay = getFirstDayOfMonth(year, month);
         const days = [];
-        for (let i = 0; i < firstDay; i++) {
+        const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+        for (let i = 0; i < adjustedFirstDay; i++) {
             days.push(_jsx("div", { className: 'w-8 h-8' }, `empty-${i}`));
         }
         for (let i = 1; i <= daysInMonth; i++) {

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

@@ -296,6 +296,9 @@
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -350,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);
   }
@@ -1416,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;
@@ -1608,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);
   }
@@ -1647,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.3",
+  "version": "2.8.6",
   "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/inputs/input.tsx

@@ -100,6 +100,29 @@ export default function Input(props: InputProps) {
         return isNaN(date.getTime()) ? null : date
     }
 
+    function getDateDisplayValue() {
+        if (!value || !isDateType) return value as string
+
+        const date = getDateValue()
+        if (!date) return value as string
+
+        function pad(n: number) {
+            return n.toString().padStart(2, '0')
+        }
+
+        const yyyy = date.getFullYear()
+        const MM = pad(date.getMonth() + 1)
+        const dd = pad(date.getDate())
+        const hh = pad(date.getHours())
+        const mm = pad(date.getMinutes())
+
+        if (type === 'date') return `${dd}.${MM}.${yyyy}`
+        if (type === 'time') return `${hh}:${mm}`
+        if (type === 'datetime-local') return `${dd}.${MM}.${yyyy} ${hh}:${mm}`
+
+        return value as string
+    }
+
     return (
         <FieldWrapper
             label={label}
@@ -125,9 +148,9 @@ export default function Input(props: InputProps) {
                     {...inputProps}
                     ref={localRef}
                     id={name}
-                    name={name}
+                    name={isClickableType ? undefined : name}
                     type={isClickableType ? 'text' : type}
-                    value={value}
+                    value={isDateType ? getDateDisplayValue() : value}
                     readOnly={isClickableType}
                     onClick={() => isClickableType && !inputProps.disabled && setIsOpen(true)}
                     title={label}
@@ -145,6 +168,9 @@ export default function Input(props: InputProps) {
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
                     `}
                 />
+                {isClickableType && (
+                    <input type='hidden' name={name} value={value as string} />
+                )}
                 {isOpen && isDateType && !inputProps.disabled && (
                     <DateTimePickerPopup
                         value={getDateValue()}

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/inputs/shared/dateTimePickerPopup.tsx

@@ -8,7 +8,7 @@ type DateTimePickerPopupProps = {
     onClose?: () => void
 }
 
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
@@ -112,7 +112,9 @@ export default function DateTimePickerPopup({
         const firstDay = getFirstDayOfMonth(year, month)
         const days = []
 
-        for (let i = 0; i < firstDay; i++) {
+        const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1
+
+        for (let i = 0; i < adjustedFirstDay; i++) {
             days.push(<div key={`empty-${i}`} className='w-8 h-8' />)
         }
 

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'