uibee 2.7.4 → 2.7.6

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

@@ -9,16 +9,16 @@ export default function Button({ text, className, icon, path, color, type, onCli
                     ${bg} cursor-pointer px-4 rounded-md min-h-8 h-8 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 || '' }), _jsx("h1", { className: 'w-fit', children: text })] }));
+                `, children: [_jsx("h1", { className: 'font-bold', children: icon || '' }), _jsx("h1", { className: 'min-w-fit w-fit', children: text })] }));
     }
     if (disabled) {
         return (_jsxs("div", { className: `
-                    ${bg} cursor-not-allowed px-4 rounded-md h-8 flex
-                    justify-evenly items-center gap-2 select-none w-fit
-                `, children: [_jsx("h1", { className: 'font-bold', children: icon || '' }), _jsx("h1", { className: 'w-fit', children: text })] }));
+                    ${bg} cursor-not-allowed px-4 rounded-md h-8 flex w-fit
+                    justify-evenly items-center gap-2 select-none ${className}
+                `, children: [_jsx("h1", { className: 'font-bold', children: icon || '' }), _jsx("h1", { className: 'min-w-fit w-fit', children: text })] }));
     }
     return (_jsxs(Link, { href: path, className: `
-                ${bg} cursor-pointer px-4 rounded-md h-8 flex
-                justify-evenly items-center gap-2 select-none w-fit
-            `, children: [_jsx("h1", { className: 'font-bold', children: icon || '' }), _jsx("h1", { className: 'w-fit', children: text })] }));
+                ${bg} cursor-pointer px-4 rounded-md h-8 flex w-fit
+                justify-evenly items-center gap-2 select-none ${className}
+            `, children: [_jsx("h1", { className: 'font-bold', children: icon || '' }), _jsx("h1", { className: 'min-w-fit w-fit', children: text })] }));
 }

package/dist/src/components/inputs/select.d.ts

@@ -1,6 +1,7 @@
 export type Option = {
     value: string | number;
     label: string;
+    image?: string;
 };
 export type SelectProps = {
     label?: string;

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

@@ -1,6 +1,7 @@
 'use client';
 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 { FieldWrapper } from './shared';
@@ -39,7 +40,7 @@ export default function Select({ label, name, value, onChange, options, error, c
                         flex items-center justify-between
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
                         ${!selectedOption ? 'text-login-200' : ''}
-                    `, title: label, children: [_jsx("span", { className: 'truncate', children: selectedOption ? selectedOption.label : placeholder }), _jsxs("div", { className: 'absolute inset-y-0 right-0 flex items-center px-2 gap-1', children: [clearable && selectedOption && !disabled && (_jsx("div", { role: 'button', onClick: handleClear, className: `
+                    `, title: label, children: [_jsxs("div", { className: 'flex items-center gap-2 truncate', children: [selectedOption?.image && (_jsx(Image, { src: selectedOption.image, alt: '', width: 30, height: 20, className: 'rounded-xs object-cover shrink-0' })), _jsx("span", { className: 'truncate', children: selectedOption ? selectedOption.label : placeholder })] }), _jsxs("div", { className: 'absolute inset-y-0 right-0 flex items-center px-2 gap-1', children: [clearable && selectedOption && !disabled && (_jsx("div", { role: 'button', onClick: handleClear, className: `
                                     p-1 hover:bg-login-500 rounded-full text-login-200
                                     hover:text-red-400 transition-colors cursor-pointer
                                 `, title: 'Clear selection', children: _jsx(X, { className: 'w-3 h-3' }) })), _jsx("div", { className: `
@@ -49,9 +50,10 @@ export default function Select({ label, name, value, onChange, options, error, c
                         `, children: _jsx(ChevronDown, { className: 'w-4 h-4' }) })] })] }), isOpen && (_jsx("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: _jsx("button", { type: 'button', onClick: () => handleSelect(option), className: `
+                    `, 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.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 })] }));
+                                            `, 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 })] }));
 }

package/dist/src/globals.css

@@ -41,6 +41,7 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
+    --radius-xs: 0.125rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -558,6 +559,9 @@
   .min-w-70 {
     min-width: calc(var(--spacing) * 70);
   }
+  .min-w-fit {
+    min-width: fit-content;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -707,6 +711,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -832,6 +839,9 @@
   .object-contain {
     object-fit: contain;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.7.4",
+  "version": "2.7.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/buttons/button.tsx

@@ -40,7 +40,7 @@ export default function Button({
                 `}
             >
                 <h1 className='font-bold'>{icon || ''}</h1>
-                <h1 className='w-fit'>{text}</h1>
+                <h1 className='min-w-fit w-fit'>{text}</h1>
             </button>
         )
     }
@@ -49,12 +49,12 @@ export default function Button({
         return (
             <div
                 className={`
-                    ${bg} cursor-not-allowed px-4 rounded-md h-8 flex
-                    justify-evenly items-center gap-2 select-none w-fit
+                    ${bg} cursor-not-allowed px-4 rounded-md h-8 flex w-fit
+                    justify-evenly items-center gap-2 select-none ${className}
                 `}
             >
                 <h1 className='font-bold'>{icon || ''}</h1>
-                <h1 className='w-fit'>{text}</h1>
+                <h1 className='min-w-fit w-fit'>{text}</h1>
             </div>
         )
     }
@@ -63,12 +63,12 @@ export default function Button({
         <Link
             href={path}
             className={`
-                ${bg} cursor-pointer px-4 rounded-md h-8 flex
-                justify-evenly items-center gap-2 select-none w-fit
+                ${bg} cursor-pointer px-4 rounded-md h-8 flex w-fit
+                justify-evenly items-center gap-2 select-none ${className}
             `}
         >
             <h1 className='font-bold'>{icon || ''}</h1>
-            <h1 className='w-fit'>{text}</h1>
+            <h1 className='min-w-fit w-fit'>{text}</h1>
         </Link>
     )
 }

package/src/components/inputs/select.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import Image from 'next/image'
 import { useClickOutside } from '../../hooks'
 import { ChevronDown, X } from 'lucide-react'
 import { FieldWrapper } from './shared'
@@ -8,6 +9,7 @@ import { FieldWrapper } from './shared'
 export type Option = {
     value: string | number
     label: string
+    image?: string
 }
 
 export type SelectProps = {
@@ -98,9 +100,20 @@ export default function Select({
                     `}
                     title={label}
                 >
-                    <span className='truncate'>
-                        {selectedOption ? selectedOption.label : placeholder}
-                    </span>
+                    <div className='flex items-center gap-2 truncate'>
+                        {selectedOption?.image && (
+                            <Image
+                                src={selectedOption.image}
+                                alt=''
+                                width={30}
+                                height={20}
+                                className='rounded-xs object-cover shrink-0'
+                            />
+                        )}
+                        <span className='truncate'>
+                            {selectedOption ? selectedOption.label : placeholder}
+                        </span>
+                    </div>
                     <div className='absolute inset-y-0 right-0 flex items-center px-2 gap-1'>
                         {clearable && selectedOption && !disabled && (
                             <div
@@ -140,10 +153,20 @@ export default function Select({
                                             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.label}
+                                            {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>
                                 ))}