uibee 2.2.7 → 2.2.9

package/dist/globals.css

@@ -254,6 +254,9 @@
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .start-2 {
     inset-inline-start: calc(var(--spacing) * 2);
   }
@@ -278,6 +281,9 @@
   .top-16 {
     top: calc(var(--spacing) * 16);
   }
+  .top-full {
+    top: 100%;
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -323,6 +329,9 @@
   .-mt-0\.5 {
     margin-top: calc(var(--spacing) * -0.5);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -395,6 +404,9 @@
   .max-h-0 {
     max-height: calc(var(--spacing) * 0);
   }
+  .max-h-72 {
+    max-height: calc(var(--spacing) * 72);
+  }
   .max-h-\[calc\(100vh-4rem\)\] {
     max-height: calc(100vh - 4rem);
   }
@@ -539,6 +551,9 @@
   .animate-jump {
     animation: jump 0.4s 1;
   }
+  .cursor-none {
+    cursor: none;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -598,6 +613,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -633,6 +651,10 @@
     border-style: var(--tw-border-style);
     border-width: 0.10rem;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -715,6 +737,9 @@
   .object-contain {
     object-fit: contain;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -920,6 +945,10 @@
     --tw-shadow: 0 0.1rem 0.5rem var(--tw-shadow-color, rgba(3,3,3,0.5));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
+  }
   .shadow-md {
     --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);
@@ -1093,6 +1122,11 @@
       top: calc(var(--spacing) * 2);
     }
   }
+  .peer-focus\:block {
+    &:is(:where(.peer):focus ~ *) {
+      display: block;
+    }
+  }
   .peer-focus\:w-fit {
     &:is(:where(.peer):focus ~ *) {
       width: fit-content;

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

@@ -2,6 +2,7 @@ export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
 export { default as Textarea } from './inputs/markdown';
+export { default as Select } from './inputs/select';
 export { default as Logo } from './logo/logo';
 export { default as LogoSmall } from './logo/logoSmall';
 export { default as ThemeToggle } from './toggle/theme';

package/dist/src/components/index.js

@@ -3,6 +3,7 @@ export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
 export { default as Textarea } from './inputs/markdown';
+export { default as Select } from './inputs/select';
 // Logos
 export { default as Logo } from './logo/logo';
 export { default as LogoSmall } from './logo/logoSmall';

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

@@ -0,0 +1,19 @@
+type Option = {
+    value: string | number;
+    label: string;
+    image?: string;
+};
+type SelectProps = {
+    name: string;
+    label: string;
+    value: string | number;
+    setValue: (_: string | number) => void;
+    options: Option[];
+    className?: string;
+    tooltip?: string;
+    required?: boolean;
+    children?: React.ReactNode;
+    color?: string;
+};
+export default function Select({ name, label, value, options, className, tooltip, required, children, setValue, color }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import ToolTip from './tooltip';
+import Label from './label';
+import EraseButton from './erase';
+export default function Select({ name, label, value, options, className, tooltip, required, children, setValue, color }) {
+    const [hasBlured, setHasBlured] = useState(false);
+    const selectRef = useRef(null);
+    const selectedOption = options.find((o) => o.value === value);
+    function handleChoose(value) {
+        setValue(value);
+        setHasBlured(true);
+        if (selectRef.current) {
+            selectRef.current.value = String(value);
+            selectRef.current.blur();
+        }
+    }
+    return (_jsxs("div", { className: `w-full ${className}`, children: [_jsxs("div", { className: 'relative flex items-center', children: [_jsxs("select", { ref: selectRef, name: name, className: 'peer cursor-pointer block px-2.5 pb-2.5 pt-4 ' +
+                            'w-full text-sm rounded-lg border-[0.10rem] ' +
+                            'appearance-none border-login-200 focus:ring-0 ' +
+                            'focus:outline-none focus:border-login-50 ' +
+                            `${color ? color : 'bg-login-800'}`, value: value, onChange: (e) => {
+                            setValue(e.target.value);
+                            setHasBlured(true);
+                        }, onBlur: () => setHasBlured(true), onMouseDown: (e) => {
+                            e.preventDefault();
+                            selectRef.current?.focus();
+                        }, required: required, children: [_jsx("option", { value: '', hidden: true }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(Label, { label: label, value: value, required: required, color: color, showRequired: required && !value && hasBlured }), value && (_jsx(EraseButton, { setData: (v) => {
+                            setValue(v);
+                            setHasBlured(true);
+                        } })), !value && tooltip && _jsx(ToolTip, { info: tooltip }), _jsx(SelectContent, { options: options, value: value, selectedOption: selectedOption, handleChoose: handleChoose, color: color })] }), children] }));
+}
+function SelectContent({ options, value, selectedOption, handleChoose, color }) {
+    return (_jsx("div", { className: 'hidden peer-focus:block absolute left-0 ' +
+            'right-0 top-full mt-1 z-50', children: _jsx("div", { className: `${color ? color : 'bg-login-800'}` + ' border-[0.10rem] border-login-200 ' +
+                'rounded-lg shadow-lg p-0 max-h-72 overflow-hidden', children: _jsxs("div", { className: 'max-h-72 overflow-auto', children: [_jsx(SelectedOption, { value: value, selectedOption: selectedOption }), _jsx("div", { className: 'p-2', children: options
+                            .filter((o) => o.value !== value)
+                            .map((opt) => (_jsx("button", { type: 'button', className: 'cursor-pointer w-full flex ' +
+                                'items-center gap-3 px-2 py-2 ' +
+                                'text-sm hover:bg-surface ' +
+                                'rounded hover:bg-login-600', onMouseDown: (e) => {
+                                e.preventDefault();
+                                handleChoose(opt.value);
+                            }, children: _jsx("span", { className: 'text-left', children: opt.label }) }, opt.value))) })] }) }) }));
+}
+function SelectedOption({ value, selectedOption }) {
+    if (!value) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx("div", { className: 'sticky top-0 bg-surface px-2 py-2 z-10 border-b ' +
+            'border-login-200 bg-login-600', children: _jsx("div", { className: 'flex items-center gap-3', children: _jsx("span", { className: 'font-medium text-left', children: selectedOption?.label }) }) }));
+}

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

@@ -8,6 +8,6 @@ export default function LoginPage({ title, description, redirectURL, version, bt
                         handleSubmit?.(new FormData(e.currentTarget));
                         e.currentTarget.reset();
                     }, children: [_jsx("input", { type: 'text', name: 'name', placeholder: 'Name', className: 'py-2 px-3 rounded bg-login-900 font-medium focus:outline-none', required: true }), _jsx("input", { type: 'password', name: 'token', placeholder: 'Token', className: 'py-2 px-3 rounded bg-login-900 font-medium focus:outline-none', required: true }), _jsx("button", { type: 'submit', className: 'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
-                                'hover:bg-login/80 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsx(Link, { href: redirectURL, className: 'w-full flex justify-center', children: _jsxs("button", { className: 'flex items-center justify-center gap-2 w-full 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', children: ["Login", _jsx(LogIn, { className: 'w-6 h-6' })] }) })), _jsxs("span", { className: 'text-sm mt-2', children: ["v", version] })] }) }));
+                                'hover:bg-login/80 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsx(Link, { href: redirectURL, className: 'w-full flex justify-center cursor-none', children: _jsxs("button", { className: 'flex items-center justify-center gap-2 w-full 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] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "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/index.ts

@@ -3,6 +3,7 @@ export { default as Input } from './inputs/input'
 export { default as SwitchInput } from './inputs/switch'
 export { default as TagInput } from './inputs/tag'
 export { default as Textarea } from './inputs/markdown'
+export { default as Select } from './inputs/select'
 
 // Logos
 export { default as Logo } from './logo/logo'

package/src/components/inputs/select.tsx

@@ -0,0 +1,204 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import ToolTip from './tooltip'
+import Label from './label'
+import EraseButton from './erase'
+
+type Option = {
+    value: string | number;
+    label: string;
+    image?: string
+}
+
+
+type SelectProps = {
+    name: string
+    label: string
+    value: string | number
+    setValue: (_: string | number) => void
+    options: Option[]
+    className?: string
+    tooltip?: string
+    required?: boolean
+    children?: React.ReactNode
+    color?: string
+}
+
+type SelectedOptionProps = {
+    value: string | number
+    selectedOption: Option | undefined
+}
+
+export default function Select({
+    name,
+    label,
+    value,
+    options,
+    className,
+    tooltip,
+    required,
+    children,
+    setValue,
+    color
+}: SelectProps) {
+    const [hasBlured, setHasBlured] = useState(false)
+    const selectRef = useRef<HTMLSelectElement | null>(null)
+    const selectedOption = options.find((o) => o.value === value)
+
+    function handleChoose(value: string | number) {
+        setValue(value)
+        setHasBlured(true)
+        if (selectRef.current) {
+            selectRef.current.value = String(value)
+            selectRef.current.blur()
+        }
+    }
+
+    return (
+        <div className={`w-full ${className}`}>
+            <div className='relative flex items-center'>
+                <select
+                    ref={selectRef}
+                    name={name}
+                    className={
+                        'peer cursor-pointer block px-2.5 pb-2.5 pt-4 ' +
+                        'w-full text-sm rounded-lg border-[0.10rem] ' +
+                        'appearance-none border-login-200 focus:ring-0 ' +
+                        'focus:outline-none focus:border-login-50 ' +
+                        `${color ? color : 'bg-login-800'}`
+                    }
+                    value={value}
+                    onChange={(e) => {
+                        setValue(e.target.value)
+                        setHasBlured(true)
+                    }}
+                    onBlur={() => setHasBlured(true)}
+                    onMouseDown={(e) => {
+                        e.preventDefault()
+                        selectRef.current?.focus()
+                    }}
+                    required={required}
+                >
+                    <option value='' hidden />
+                    {options.map((option) => (
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+
+                <Label
+                    label={label}
+                    value={value}
+                    required={required}
+                    color={color}
+                    showRequired={required && !value && hasBlured}
+                />
+
+                {value && (
+                    <EraseButton
+                        setData={(v: string) => {
+                            setValue(v)
+                            setHasBlured(true)
+                        }}
+                    />
+                )}
+                {!value && tooltip && <ToolTip info={tooltip} />}
+
+                <SelectContent
+                    options={options}
+                    value={value}
+                    selectedOption={selectedOption}
+                    handleChoose={handleChoose}
+                    color={color}
+                />
+            </div>
+            {children}
+        </div>
+    )
+}
+
+function SelectContent({
+    options,
+    value,
+    selectedOption,
+    handleChoose,
+    color
+}: {
+    options: Option[]
+    value: string | number
+    selectedOption: Option | undefined
+    handleChoose: (value: string | number) => void
+    color?: string
+}) {
+    return (
+        <div
+            className={
+                'hidden peer-focus:block absolute left-0 ' +
+                'right-0 top-full mt-1 z-50'
+            }
+        >
+            <div
+                className={
+                    `${color ? color : 'bg-login-800'}` + ' border-[0.10rem] border-login-200 ' +
+                    'rounded-lg shadow-lg p-0 max-h-72 overflow-hidden'
+                }
+            >
+                <div className='max-h-72 overflow-auto'>
+                    <SelectedOption
+                        value={value}
+                        selectedOption={selectedOption}
+                    />
+                    <div className='p-2'>
+                        {options
+                            .filter((o) => o.value !== value)
+                            .map((opt) => (
+                                <button
+                                    key={opt.value}
+                                    type='button'
+                                    className={
+                                        'cursor-pointer w-full flex ' +
+                                        'items-center gap-3 px-2 py-2 ' +
+                                        'text-sm hover:bg-surface ' +
+                                        'rounded hover:bg-login-600'
+                                    }
+                                    onMouseDown={(e) => {
+                                        e.preventDefault()
+                                        handleChoose(opt.value)
+                                    }}
+                                >
+                                    <span className='text-left'>
+                                        {opt.label}
+                                    </span>
+                                </button>
+                            ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function SelectedOption({ value, selectedOption }: SelectedOptionProps) {
+    if (!value) {
+        return <></>
+    }
+
+    return (
+        <div
+            className={
+                'sticky top-0 bg-surface px-2 py-2 z-10 border-b ' +
+                'border-login-200 bg-login-600'
+            }
+        >
+            <div className='flex items-center gap-3'>
+                <span className='font-medium text-left'>
+                    {selectedOption?.label}
+                </span>
+            </div>
+        </div>
+    )
+}
+
+

package/src/components/login/loginPage.tsx

@@ -56,11 +56,11 @@ export default function LoginPage({title, description, redirectURL, version, btg
                         </button>
                     </form>
                 ) : (
-                    <Link href={redirectURL} className='w-full flex justify-center'>
+                    <Link href={redirectURL} className='w-full flex justify-center cursor-none'>
                         <button
                             className={
                                 'flex items-center justify-center gap-2 w-full 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'
+                                'hover:bg-login/80 transition-all duration-200 mb-2 mt-2 cursor-pointer'
                             }
                         >
                             Login