uibee 2.7.18 → 2.8.1

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

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { Calendar, Clock } from 'lucide-react';
 import { FieldWrapper } from './shared';
 import DateTimePickerPopup from './shared/dateTimePickerPopup';
+import ColorPickerPopup from './shared/colorPickerPopup';
 import useClickOutside from '../../hooks/useClickOutside';
 export default function Input(props) {
     const { name, label, error, className, icon, info, ...inputProps } = props;
@@ -11,8 +12,10 @@ export default function Input(props) {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useClickOutside(() => setIsOpen(false));
     const isDateType = ['date', 'datetime-local', 'time'].includes(type);
+    const isColorType = type === 'color';
+    const isClickableType = isDateType || isColorType;
     function handleIconClick() {
-        if (isDateType && !inputProps.disabled) {
+        if (isClickableType && !inputProps.disabled) {
             setIsOpen(!isOpen);
         }
         else if (localRef.current && !inputProps.disabled) {
@@ -45,6 +48,19 @@ export default function Input(props) {
         };
         onChange(event);
     }
+    function handleColorChange(color) {
+        const onChange = inputProps.onChange;
+        if (!onChange)
+            return;
+        const event = {
+            target: {
+                name,
+                value: color,
+                type,
+            },
+        };
+        onChange(event);
+    }
     let displayIcon = icon;
     if (!displayIcon && isDateType) {
         if (type === 'time') {
@@ -54,6 +70,9 @@ export default function Input(props) {
             displayIcon = _jsx(Calendar, { className: 'w-4 h-4' });
         }
     }
+    else if (!displayIcon && isColorType) {
+        displayIcon = (_jsx("div", { className: 'w-4 h-4 rounded border border-login-200', style: { backgroundColor: value || '#000000' } }));
+    }
     function getDateValue() {
         if (!value)
             return null;
@@ -66,8 +85,8 @@ export default function Input(props) {
     }
     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
-                            ${isDateType && !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: isDateType ? 'text' : type, value: value, readOnly: isDateType, onClick: () => isDateType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                            ${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: `
                         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
@@ -76,6 +95,6 @@ export default function Input(props) {
                         transition-all duration-200
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
-                        ${isDateType && !inputProps.disabled ? 'cursor-pointer' : ''}
-                    ` }), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) }))] }) }));
+                        ${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) }))] }) }));
 }

package/dist/src/components/inputs/shared/colorPickerPopup.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+export type ColorPickerPopupProps = {
+    value: string;
+    onChange: (color: string) => void;
+    onClose: () => void;
+};
+export default function ColorPickerPopup({ value, onChange, onClose }: ColorPickerPopupProps): JSX.Element;

package/dist/src/components/inputs/shared/colorPickerPopup.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+function hexToHsv(hex) {
+    hex = hex.replace('#', '');
+    let r = 0, g = 0, b = 0;
+    if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+    }
+    else if (hex.length === 6) {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+    }
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    if (max !== min) {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return { h: h * 360, s: s * 100, v: v * 100 };
+}
+function hsvToRgb(h, s, v) {
+    let r = 0, g = 0, b = 0;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+function hsvToHex(h, s, v) {
+    const { r, g, b } = hsvToRgb(h / 360, s / 100, v / 100);
+    function toHex(x) {
+        const hex = x.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+const PRESET_COLORS = [
+    '#f87171', '#fd8738', '#fbbf24', '#facc15', '#a3e635', '#4ade80', '#34d399', '#2dd4bf',
+    '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185'
+];
+function SaturationPicker({ hsv, onChange }) {
+    const containerRef = useRef(null);
+    function handleMove(e) {
+        if (!containerRef.current)
+            return;
+        const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1);
+        const y = Math.min(Math.max((e.clientY - top) / height, 0), 1);
+        onChange(x * 100, (1 - y) * 100);
+    }
+    function handleMouseDown(e) {
+        handleMove(e);
+        function moveHandler(e) { handleMove(e); }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler);
+            window.removeEventListener('mouseup', upHandler);
+        }
+        window.addEventListener('mousemove', moveHandler);
+        window.addEventListener('mouseup', upHandler);
+    }
+    const bgColor = hsvToHex(hsv.h, 100, 100);
+    return (_jsxs("div", { ref: containerRef, className: 'w-full h-32 relative rounded-md overflow-hidden cursor-crosshair mb-3 select-none', style: { backgroundColor: bgColor }, onMouseDown: handleMouseDown, children: [_jsx("div", { className: 'absolute inset-0 bg-linear-to-r from-white to-transparent' }), _jsx("div", { className: 'absolute inset-0 bg-linear-to-t from-black to-transparent' }), _jsx("div", { className: `
+                    absolute w-3 h-3 border-2 border-white rounded-full
+                    shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none
+                `, style: { left: `${hsv.s}%`, top: `${100 - hsv.v}%` } })] }));
+}
+function HuePicker({ hue, onChange }) {
+    const containerRef = useRef(null);
+    function handleMove(e) {
+        if (!containerRef.current)
+            return;
+        const { left, width } = containerRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1);
+        onChange(x * 360);
+    }
+    function handleMouseDown(e) {
+        handleMove(e);
+        function moveHandler(e) { handleMove(e); }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler);
+            window.removeEventListener('mouseup', upHandler);
+        }
+        window.addEventListener('mousemove', moveHandler);
+        window.addEventListener('mouseup', upHandler);
+    }
+    return (_jsx("div", { ref: containerRef, className: 'w-full h-3 relative rounded-full cursor-pointer mb-4 select-none', style: { background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)' }, onMouseDown: handleMouseDown, children: _jsx("div", { className: `
+                    absolute w-4 h-4 bg-white border border-gray-200
+                    rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2
+                    top-1/2 pointer-events-none
+                `, style: { left: `${(hue / 360) * 100}%` } }) }));
+}
+export default function ColorPickerPopup({ value, onChange, onClose }) {
+    const [hsv, setHsv] = useState(() => hexToHsv(value || '#000000'));
+    const [hexInput, setHexInput] = useState(value || '#000000');
+    useEffect(() => {
+        if (value && value !== hexInput) {
+            setHsv(hexToHsv(value));
+            setHexInput(value);
+        }
+    }, [value]);
+    function handleColorChange(newHsv) {
+        setHsv(newHsv);
+        const hex = hsvToHex(newHsv.h, newHsv.s, newHsv.v);
+        setHexInput(hex);
+        onChange(hex);
+    }
+    function handleSaturationChange(s, v) { handleColorChange({ ...hsv, s, v }); }
+    function handleHueChange(h) { handleColorChange({ ...hsv, h }); }
+    function manualHexChange(e) {
+        const val = e.target.value;
+        setHexInput(val);
+        if (/^#[0-9A-F]{6}$/i.test(val)) {
+            const newHsv = hexToHsv(val);
+            setHsv(newHsv);
+            onChange(val);
+        }
+    }
+    return (_jsxs("div", { className: 'absolute top-full left-0 mt-1 z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none', children: [_jsx(SaturationPicker, { hsv: hsv, onChange: handleSaturationChange }), _jsx(HuePicker, { hue: hsv.h, onChange: handleHueChange }), _jsxs("div", { className: 'flex items-center gap-2 mb-3', children: [_jsx("div", { className: 'text-xs text-login-200 font-mono', children: "HEX" }), _jsx("input", { type: 'text', value: hexInput, onChange: manualHexChange, className: `
+                        flex-1 min-w-0 bg-login-500 border border-login-500 rounded
+                        px-2 py-1 text-sm text-login-text focus:outline-none
+                        focus:border-login focus:ring-1 focus:ring-login
+                    `, spellCheck: false }), _jsx("div", { className: 'w-8 h-8 rounded border border-login-500 shrink-0', style: { backgroundColor: hexInput } })] }), _jsx("div", { className: 'grid grid-cols-8 gap-1.5 pt-3 border-t border-login-500', children: PRESET_COLORS.map(color => (_jsx("button", { type: 'button', className: `
+                            w-6 h-6 rounded-sm cursor-pointer hover:scale-110
+                            hover:zIndex-10 transition-transform ring-1 ring-inset ring-black/10
+                        `, style: { backgroundColor: color }, onClick: () => {
+                        const newHsv = hexToHsv(color);
+                        setHsv(newHsv);
+                        setHexInput(color);
+                        onChange(color);
+                        onClose();
+                    }, title: color }, color))) })] }));
+}

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

@@ -3,3 +3,4 @@ export { default as SelectionWrapper } from './selectionWrapper';
 export { default as InputLabel } from './inputLabel';
 export { default as InputInfo } from './inputInfo';
 export { default as InputError } from './inputError';
+export { default as ColorPickerPopup } from './colorPickerPopup';

package/dist/src/components/inputs/shared/index.js

@@ -3,3 +3,4 @@ export { default as SelectionWrapper } from './selectionWrapper';
 export { default as InputLabel } from './inputLabel';
 export { default as InputInfo } from './inputInfo';
 export { default as InputError } from './inputError';
+export { default as ColorPickerPopup } from './colorPickerPopup';

package/dist/src/globals.css

@@ -13,6 +13,7 @@
     --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-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-black: #000;
@@ -43,6 +44,7 @@
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
     --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -291,6 +293,9 @@
   .relative {
     position: relative;
   }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -1005,6 +1010,12 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .-ml-4 {
     margin-left: calc(var(--spacing) * -4);
   }
@@ -1084,6 +1095,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
   .h-fit {
     height: fit-content;
   }
@@ -1141,6 +1155,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-\[4\.3rem\] {
     width: 4.3rem;
   }
@@ -1251,6 +1268,9 @@
   .animate-jump {
     animation: jump 0.4s 1;
   }
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1269,6 +1289,9 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1302,6 +1325,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -1350,6 +1376,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -1376,6 +1405,12 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-login-200 {
+    border-color: var(--color-login-200);
+  }
   .border-login-400 {
     border-color: var(--color-login-400);
   }
@@ -1385,6 +1420,9 @@
   .border-red-500 {
     border-color: var(--color-red-500);
   }
+  .border-white {
+    border-color: var(--color-white);
+  }
   .bg-\[\#181818f0\] {
     background-color: #181818f0;
   }
@@ -1451,9 +1489,35 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-linear-to-r {
+    --tw-gradient-position: to right;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to right in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-linear-to-t {
+    --tw-gradient-position: to top;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to top in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-none {
     background-image: none;
   }
+  .from-black {
+    --tw-gradient-from: var(--color-black);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-white {
+    --tw-gradient-from: var(--color-white);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .fill-\[var\(--foreground\)\] {
     fill: var(--foreground);
   }
@@ -1529,6 +1593,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -1562,6 +1629,9 @@
   .text-right {
     text-align: right;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1699,10 +1769,24 @@
     --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);
+  }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-black\/10 {
+    --tw-ring-color: color-mix(in srgb, #000 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
   .ring-red-500 {
     --tw-ring-color: var(--color-red-500);
   }
@@ -1814,6 +1898,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
   .group-\[\.dropdown\]\:h-auto {
     &:is(:where(.group):is(.dropdown) *) {
       height: auto;
@@ -1998,6 +2085,16 @@
       --tw-ring-color: var(--color-red-500);
     }
   }
+  .hover\:scale-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .hover\:bg-gray-400\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2405,6 +2502,48 @@ input::-ms-clear {
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -2552,6 +2691,15 @@ input::-ms-clear {
       --tw-skew-y: initial;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.7.18",
+  "version": "2.8.1",
   "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

@@ -2,6 +2,7 @@ import { type ChangeEvent, type JSX, useRef, useState } from 'react'
 import { Calendar, Clock } from 'lucide-react'
 import { FieldWrapper } from './shared'
 import DateTimePickerPopup from './shared/dateTimePickerPopup'
+import ColorPickerPopup from './shared/colorPickerPopup'
 import useClickOutside from '../../hooks/useClickOutside'
 
 export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
@@ -22,9 +23,11 @@ export default function Input(props: InputProps) {
     const containerRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
 
     const isDateType = ['date', 'datetime-local', 'time'].includes(type as string)
+    const isColorType = type === 'color'
+    const isClickableType = isDateType || isColorType
 
     function handleIconClick() {
-        if (isDateType && !inputProps.disabled) {
+        if (isClickableType && !inputProps.disabled) {
             setIsOpen(!isOpen)
         } else if (localRef.current && !inputProps.disabled) {
             localRef.current.focus()
@@ -57,6 +60,20 @@ export default function Input(props: InputProps) {
         onChange(event)
     }
 
+    function handleColorChange(color: string) {
+        const onChange = inputProps.onChange
+        if (!onChange) return
+
+        const event = {
+            target: {
+                name,
+                value: color,
+                type,
+            },
+        } as unknown as ChangeEvent<HTMLInputElement>
+        onChange(event)
+    }
+
     let displayIcon = icon
     if (!displayIcon && isDateType) {
         if (type === 'time') {
@@ -64,6 +81,13 @@ export default function Input(props: InputProps) {
         } else {
             displayIcon = <Calendar className='w-4 h-4' />
         }
+    } else if (!displayIcon && isColorType) {
+        displayIcon = (
+            <div
+                className='w-4 h-4 rounded border border-login-200'
+                style={{ backgroundColor: value as string || '#000000' }}
+            />
+        )
     }
 
     function getDateValue() {
@@ -90,7 +114,7 @@ export default function Input(props: InputProps) {
                     <div
                         className={`
                             absolute left-3 text-login-200
-                            ${isDateType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
+                            ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
                         `}
                         onClick={handleIconClick}
                     >
@@ -102,10 +126,10 @@ export default function Input(props: InputProps) {
                     ref={localRef}
                     id={name}
                     name={name}
-                    type={isDateType ? 'text' : type}
+                    type={isClickableType ? 'text' : type}
                     value={value}
-                    readOnly={isDateType}
-                    onClick={() => isDateType && !inputProps.disabled && setIsOpen(true)}
+                    readOnly={isClickableType}
+                    onClick={() => isClickableType && !inputProps.disabled && setIsOpen(true)}
                     title={label}
                     aria-invalid={!!error}
                     aria-describedby={error ? `${name}-error` : undefined}
@@ -118,7 +142,7 @@ export default function Input(props: InputProps) {
                         transition-all duration-200
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
-                        ${isDateType && !inputProps.disabled ? 'cursor-pointer' : ''}
+                        ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
                     `}
                 />
                 {isOpen && isDateType && !inputProps.disabled && (
@@ -129,6 +153,13 @@ export default function Input(props: InputProps) {
                         onClose={() => setIsOpen(false)}
                     />
                 )}
+                {isOpen && isColorType && !inputProps.disabled && (
+                    <ColorPickerPopup
+                        value={value as string || ''}
+                        onChange={handleColorChange}
+                        onClose={() => setIsOpen(false)}
+                    />
+                )}
             </div>
         </FieldWrapper>
     )

package/src/components/inputs/shared/colorPickerPopup.tsx

@@ -0,0 +1,240 @@
+import { type JSX, useState, useEffect, useRef } from 'react'
+
+export type ColorPickerPopupProps = {
+    value: string
+    onChange: (color: string) => void
+    onClose: () => void
+}
+
+function hexToHsv(hex: string): { h: number; s: number; v: number } {
+    hex = hex.replace('#', '')
+    let r = 0, g = 0, b = 0
+    if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16)
+        g = parseInt(hex[1] + hex[1], 16)
+        b = parseInt(hex[2] + hex[2], 16)
+    } else if (hex.length === 6) {
+        r = parseInt(hex.substring(0, 2), 16)
+        g = parseInt(hex.substring(2, 4), 16)
+        b = parseInt(hex.substring(4, 6), 16)
+    }
+
+    r /= 255
+    g /= 255
+    b /= 255
+
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    const d = max - min
+    let h = 0
+    const s = max === 0 ? 0 : d / max
+    const v = max
+
+    if (max !== min) {
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break
+            case g: h = (b - r) / d + 2; break
+            case b: h = (r - g) / d + 4; break
+        }
+        h /= 6
+    }
+    return { h: h * 360, s: s * 100, v: v * 100 }
+}
+
+function hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {
+    let r = 0, g = 0, b = 0
+    const i = Math.floor(h * 6)
+    const f = h * 6 - i
+    const p = v * (1 - s)
+    const q = v * (1 - f * s)
+    const t = v * (1 - (1 - f) * s)
+
+    switch (i % 6) {
+        case 0: r = v; g = t; b = p; break
+        case 1: r = q; g = v; b = p; break
+        case 2: r = p; g = v; b = t; break
+        case 3: r = p; g = q; b = v; break
+        case 4: r = t; g = p; b = v; break
+        case 5: r = v; g = p; b = q; break
+    }
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }
+}
+
+function hsvToHex(h: number, s: number, v: number): string {
+    const { r, g, b } = hsvToRgb(h / 360, s / 100, v / 100)
+    function toHex(x: number) {
+        const hex = x.toString(16)
+        return hex.length === 1 ? '0' + hex : hex
+    }
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+const PRESET_COLORS: string[] = [
+    '#f87171', '#fd8738', '#fbbf24', '#facc15', '#a3e635', '#4ade80', '#34d399', '#2dd4bf',
+    '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185'
+]
+
+function SaturationPicker({ hsv, onChange }: { hsv: { h: number, s: number, v: number }, onChange: (s: number, v: number) => void }) {
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    function handleMove(e: MouseEvent | React.MouseEvent) {
+        if (!containerRef.current) return
+        const { left, top, width, height } = containerRef.current.getBoundingClientRect()
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1)
+        const y = Math.min(Math.max((e.clientY - top) / height, 0), 1)
+
+        onChange(x * 100, (1 - y) * 100)
+    }
+
+    function handleMouseDown(e: React.MouseEvent) {
+        handleMove(e)
+        function moveHandler(e: MouseEvent) { handleMove(e) }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler)
+            window.removeEventListener('mouseup', upHandler)
+        }
+        window.addEventListener('mousemove', moveHandler)
+        window.addEventListener('mouseup', upHandler)
+    }
+
+    const bgColor = hsvToHex(hsv.h, 100, 100)
+
+    return (
+        <div
+            ref={containerRef}
+            className='w-full h-32 relative rounded-md overflow-hidden cursor-crosshair mb-3 select-none'
+            style={{ backgroundColor: bgColor }}
+            onMouseDown={handleMouseDown}
+        >
+            <div className='absolute inset-0 bg-linear-to-r from-white to-transparent' />
+            <div className='absolute inset-0 bg-linear-to-t from-black to-transparent' />
+            <div
+                className={`
+                    absolute w-3 h-3 border-2 border-white rounded-full
+                    shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none
+                `}
+                style={{ left: `${hsv.s}%`, top: `${100 - hsv.v}%` }}
+            />
+        </div>
+    )
+}
+
+function HuePicker({ hue, onChange }: { hue: number, onChange: (h: number) => void }) {
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    function handleMove(e: MouseEvent | React.MouseEvent) {
+        if (!containerRef.current) return
+        const { left, width } = containerRef.current.getBoundingClientRect()
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1)
+        onChange(x * 360)
+    }
+
+    function handleMouseDown(e: React.MouseEvent) {
+        handleMove(e)
+        function moveHandler(e: MouseEvent) { handleMove(e) }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler)
+            window.removeEventListener('mouseup', upHandler)
+        }
+        window.addEventListener('mousemove', moveHandler)
+        window.addEventListener('mouseup', upHandler)
+    }
+
+    return (
+        <div
+            ref={containerRef}
+            className='w-full h-3 relative rounded-full cursor-pointer mb-4 select-none'
+            style={{ background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)' }}
+            onMouseDown={handleMouseDown}
+        >
+            <div
+                className={`
+                    absolute w-4 h-4 bg-white border border-gray-200
+                    rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2
+                    top-1/2 pointer-events-none
+                `}
+                style={{ left: `${(hue / 360) * 100}%` }}
+            />
+        </div>
+    )
+}
+
+export default function ColorPickerPopup({ value, onChange, onClose }: ColorPickerPopupProps): JSX.Element {
+    const [hsv, setHsv] = useState(() => hexToHsv(value || '#000000'))
+    const [hexInput, setHexInput] = useState(value || '#000000')
+
+    useEffect(() => {
+        if (value && value !== hexInput) {
+            setHsv(hexToHsv(value))
+            setHexInput(value)
+        }
+    }, [value])
+
+    function handleColorChange(newHsv: { h: number, s: number, v: number }) {
+        setHsv(newHsv)
+        const hex = hsvToHex(newHsv.h, newHsv.s, newHsv.v)
+        setHexInput(hex)
+        onChange(hex)
+    }
+
+    function handleSaturationChange(s: number, v: number) { handleColorChange({ ...hsv, s, v }) }
+    function handleHueChange(h: number) { handleColorChange({ ...hsv, h }) }
+
+    function manualHexChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const val = e.target.value
+        setHexInput(val)
+        if (/^#[0-9A-F]{6}$/i.test(val)) {
+            const newHsv = hexToHsv(val)
+            setHsv(newHsv)
+            onChange(val)
+        }
+    }
+
+    return (
+        <div className='absolute top-full left-0 mt-1 z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none'>
+            <SaturationPicker hsv={hsv} onChange={handleSaturationChange} />
+            <HuePicker hue={hsv.h} onChange={handleHueChange} />
+
+            <div className='flex items-center gap-2 mb-3'>
+                <div className='text-xs text-login-200 font-mono'>HEX</div>
+                <input
+                    type='text'
+                    value={hexInput}
+                    onChange={manualHexChange}
+                    className={`
+                        flex-1 min-w-0 bg-login-500 border border-login-500 rounded
+                        px-2 py-1 text-sm text-login-text focus:outline-none
+                        focus:border-login focus:ring-1 focus:ring-login
+                    `}
+                    spellCheck={false}
+                />
+                <div
+                    className='w-8 h-8 rounded border border-login-500 shrink-0'
+                    style={{ backgroundColor: hexInput }}
+                />
+            </div>
+
+            <div className='grid grid-cols-8 gap-1.5 pt-3 border-t border-login-500'>
+                {PRESET_COLORS.map(color => (
+                    <button
+                        key={color}
+                        type='button'
+                        className={`
+                            w-6 h-6 rounded-sm cursor-pointer hover:scale-110
+                            hover:zIndex-10 transition-transform ring-1 ring-inset ring-black/10
+                        `}
+                        style={{ backgroundColor: color }}
+                        onClick={() => {
+                            const newHsv = hexToHsv(color)
+                            setHsv(newHsv)
+                            setHexInput(color)
+                            onChange(color)
+                            onClose()
+                        }}
+                        title={color}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}

package/src/components/inputs/shared/index.ts

@@ -3,3 +3,4 @@ export { default as SelectionWrapper } from './selectionWrapper'
 export { default as InputLabel } from './inputLabel'
 export { default as InputInfo } from './inputInfo'
 export { default as InputError } from './inputError'
+export { default as ColorPickerPopup } from './colorPickerPopup'