uibee 2.6.0 → 2.7.0

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

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react'
+import InputLabel from './inputLabel'
+import InputInfo from './inputInfo'
+import InputError from './inputError'
+
+interface SelectionWrapperProps {
+    label?: string
+    name: string
+    required?: boolean
+    info?: string
+    error?: string
+    children: ReactNode
+    className?: string
+    disabled?: boolean
+}
+
+export default function SelectionWrapper({
+    label,
+    name,
+    required,
+    info,
+    error,
+    children,
+    className,
+    disabled,
+}: SelectionWrapperProps) {
+    return (
+        <div className={`flex flex-col gap-1 ${className || ''}`}>
+            <div className='flex items-center justify-between mb-1'>
+                <div className='flex items-center gap-2'>
+                    {children}
+                    {label && (
+                        <InputLabel
+                            label={label}
+                            name={name}
+                            required={required}
+                            disabled={disabled}
+                            className='select-none cursor-pointer'
+                        />
+                    )}
+                </div>
+                {info && <InputInfo info={info} />}
+            </div>
+            <InputError error={error} />
+        </div>
+    )
+}

package/src/components/inputs/switch.tsx

@@ -1,39 +1,62 @@
-'use client'
+import { type ChangeEvent } from 'react'
+import { SelectionWrapper } from './shared'
 
-import ToolTip from './tooltip'
-
-type SwitchProps = {
+export type SwitchProps = {
+    label?: string
     name: string
-    label: string
-    value?: boolean
-    setValue: (_: boolean) => void
+    checked?: boolean
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
     className?: string
-    tooltip?: string
+    disabled?: boolean
+    error?: string
+    info?: string
+    required?: boolean
 }
 
-export default function Switch({ name, label, value, className, tooltip, setValue }: SwitchProps) {
+export default function Switch({
+    label,
+    name,
+    checked,
+    onChange,
+    className,
+    disabled,
+    error,
+    info,
+    required,
+}: SwitchProps) {
     return (
-        <div className={`relative w-full flex items-center px-2.5 pb-2.5 pt-3 border-login-200 rounded-lg border-[0.10rem]
-            bg-login-800 ${className}`}
+        <SelectionWrapper
+            label={label}
+            name={name}
+            required={required}
+            info={info}
+            error={error}
+            className={className}
+            disabled={disabled}
         >
-            <label className='flex items-center cursor-pointer'>
+            <label className='relative inline-flex items-center cursor-pointer'>
                 <input
                     type='checkbox'
+                    id={name}
                     name={name}
-                    className='sr-only'
-                    checked={value}
-                    onChange={(e) => setValue(e.target.checked)}
+                    checked={checked}
+                    onChange={onChange}
+                    disabled={disabled}
+                    required={required}
+                    className='sr-only peer'
                 />
-                <div className={`w-10 h-6  rounded-full p-1 transition ${value ? 'bg-login-50' : 'bg-login-200'}`}>
-                    <div
-                        className={`w-4 h-4 bg-login-800 rounded-full shadow-md transform transition ${value ? 'translate-x-4' : ''}`}
-                    />
-                </div>
+                <div className={`
+                    w-11 h-6 bg-login-500/50 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-login/50 
+                    rounded-full peer 
+                    peer-checked:after:translate-x-full peer-checked:after:border-white 
+                    after:content-[''] after:absolute after:top-0.5 after:left-0.5 
+                    after:bg-white after:border-gray-300 after:border after:rounded-full 
+                    after:h-5 after:w-5 after:transition-all 
+                    peer-checked:bg-login
+                    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+                    ${error ? 'ring-1 ring-red-500' : ''}
+                `}></div>
             </label>
-            <span className='ml-3 text-sm'>
-                {label}
-            </span>
-            {tooltip && <ToolTip info={tooltip} />}
-        </div>
+        </SelectionWrapper>
     )
 }

package/src/components/inputs/textarea.tsx

@@ -0,0 +1,65 @@
+import { type ChangeEvent } from 'react'
+import { FieldWrapper } from './shared'
+
+export type TextareaProps = {
+    label?: string
+    name: string
+    placeholder?: string
+    value?: string
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
+    error?: string
+    className?: string
+    disabled?: boolean
+    required?: boolean
+    rows?: number
+    info?: string
+}
+
+export default function Textarea({
+    label,
+    name,
+    placeholder,
+    value,
+    onChange,
+    error,
+    className,
+    disabled,
+    required,
+    rows = 4,
+    info,
+}: TextareaProps) {
+    return (
+        <FieldWrapper
+            label={label}
+            name={name}
+            required={required}
+            info={info}
+            error={error}
+            className={className}
+        >
+            <textarea
+                id={name}
+                name={name}
+                placeholder={placeholder}
+                value={value}
+                onChange={onChange}
+                disabled={disabled}
+                required={required}
+                rows={rows}
+                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
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                    p-3
+                    transition-all duration-200
+                    resize-y
+                    ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
+                `}
+            />
+        </FieldWrapper>
+    )
+}

package/src/components/logo/logo.tsx

@@ -35,7 +35,7 @@ export default function Logo({ className }: LogoProps) {
             <polyline className={letter} style={{strokeMiterlimit: 10}} points='161.983 98.122 176.665 98.122 176.665 83.44' transform='translate(-31.392,-41.894)' />
             <polyline className={letter} style={{strokeMiterlimit: 10}} points='176.665 58.372 176.665 43.69 161.983 43.69' transform='translate(-31.392,-41.894)' />
             <path className={corner} d='m 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' />
-            <path className={corner} d='m 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' />
+            <path className='fill-login transition-all duration-1000' d='m 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' />
             <path className={corner} d='m 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' />
             <path className={corner} d='M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' />
             <path className={corner} d='m 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' />

package/src/globals.css

@@ -184,3 +184,39 @@
     font-size: 1.2rem;
     font-weight: 500;
 }
+
+/* Hide default browser icons/buttons for inputs */
+input::-webkit-calendar-picker-indicator {
+    display: none !important;
+    -webkit-appearance: none !important;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0 !important;
+}
+
+input[type='number'] {
+    -moz-appearance: textfield !important;
+    appearance: textfield !important;
+}
+
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button,
+input::-webkit-search-results-button,
+input::-webkit-search-results-decoration {
+    -webkit-appearance: none !important;
+}
+
+input::-webkit-contacts-auto-fill-button,
+input::-webkit-credentials-auto-fill-button {
+    visibility: hidden !important;
+    display: none !important;
+    pointer-events: none !important;
+}
+
+input::-ms-reveal,
+input::-ms-clear {
+    display: none !important;
+}

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { default as useVisibility } from './useVisibility'
 export { default as useDarkMode } from './useDarkMode'
+export { default as useClickOutside } from './useClickOutside'

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+
+export default function useClickOutside<T extends HTMLElement>(
+    handler: (event: MouseEvent | TouchEvent) => void
+) {
+    const ref = useRef<T>(null)
+
+    useEffect(() => {
+        const listener = (event: MouseEvent | TouchEvent) => {
+            const el = ref.current
+            if (!el || el.contains(event.target as Node)) {
+                return
+            }
+            handler(event)
+        }
+
+        document.addEventListener('mousedown', listener)
+        document.addEventListener('touchstart', listener)
+
+        return () => {
+            document.removeEventListener('mousedown', listener)
+            document.removeEventListener('touchstart', listener)
+        }
+    }, [handler])
+
+    return ref
+}

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

@@ -1,3 +0,0 @@
-export default function EraseButton({ setData }: {
-    setData: (data: string) => void;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Eraser } from 'lucide-react';
-export default function EraseButton({ setData }) {
-    return (_jsx("button", { type: 'button', onClick: () => setData(''), className: 'absolute right-1 cursor-pointer px-2 py-1 bg-login-800 hover:bg-login-600 rounded-md', children: _jsx(Eraser, { className: 'w-5' }) }));
-}

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

@@ -1,10 +0,0 @@
-type labelProps = {
-    label: string;
-    value: any;
-    required?: boolean;
-    showRequired?: boolean;
-    className?: string;
-    color?: string;
-};
-export default function Label({ label, value, required, showRequired, className, color }: labelProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Label({ label, value, required, showRequired, className, color }) {
-    return (_jsx("label", { className: 'w-[calc(100%-10px)] truncate pointer-events-none absolute text-sm duration-300 transform z-10 ' +
-            'peer-focus:px-2 peer-focus:top-2 origin-left px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
-            `${color ? color : 'bg-login-800'} ` +
-            `${value ? '-translate-y-5 scale-75 top-2 w-fit '
-                : '-translate-y-1/2 scale-100 top-1/2 '
-                    + 'peer-focus:w-fit '} ${showRequired ? 'text-red-500/50 ' : ''} 
-                        ${!value &&
-                required ? 'group-[.submitPressed]:text-red-500/50 ' : ''}
-                        ${required ? 'after:content-["_*"] ' : ''}
-                        ${className}`, children: label }));
-}

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

@@ -1,15 +0,0 @@
-type MarkdownProps = {
-    name: string;
-    label: string;
-    value: string;
-    setValue: (_: string | number) => void;
-    className?: string;
-    tooltip?: string;
-    required?: boolean;
-    rows?: number;
-    color?: string;
-    buttonColor?: string;
-    buttonColorHighlighted?: string;
-};
-export default function Markdown({ name, label, value, className, tooltip, required, rows, setValue, color, buttonColor, buttonColorHighlighted }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,32 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import Label from './label';
-import ToolTip from './tooltip';
-export default function Markdown({ name, label, value, className, tooltip, required, rows = 6, setValue, color, buttonColor, buttonColorHighlighted }) {
-    const [hasBlured, setHasBlured] = useState(false);
-    const textareaRef = useRef(null);
-    const smallButtonStyle = `px-2 py-1 rounded 
-        ${buttonColorHighlighted ? `hover:${buttonColorHighlighted}` : 'hover:bg-login-500'}
-        ${' '}${buttonColor ? buttonColor : 'bg-login-600'}`;
-    function wrapSelection(before, after = before, placeHolder = '') {
-        const textarea = textareaRef.current;
-        if (!textarea)
-            return;
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-        const selected = value.slice(start, end) || placeHolder;
-        const newValue = value.slice(0, start) + before + selected + after + value.slice(end);
-        setValue(newValue);
-        requestAnimationFrame(() => {
-            const pos = start + before.length;
-            textarea.focus();
-            textarea.setSelectionRange(pos, pos + selected.length);
-        });
-    }
-    return (_jsxs("div", { className: `w-full ${className ?? ''}`, children: [_jsxs("div", { className: 'relative', children: [_jsx("textarea", { name: name, ref: textareaRef, value: value, onChange: (e) => setValue(e.target.value), onBlur: () => setHasBlured(true), rows: rows, required: required, className: 'block px-2.5 pb-2.5 pt-4 w-full text-sm ' +
-                            'rounded-lg border-[0.10rem] appearance-none ' +
-                            'border-login-200 focus:outline-none focus:ring-0' +
-                            ' focus:border-login-50 peer resize-vertical ' +
-                            `${color ? color : 'bg-login-800'}` }), _jsx(Label, { label: label, value: value, color: color, required: required, showRequired: required && !value && hasBlured }), tooltip && _jsx(ToolTip, { info: tooltip })] }), _jsx("div", { className: 'flex items-center justify-between gap-2 mt-2', children: _jsxs("div", { className: 'flex gap-2', children: [_jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('**', '**', 'bold'), children: "B" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('*', '*', 'italic'), children: "I" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('\n```\n', '\n```\n', 'code block'), children: "CB" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('[', '](url)', 'text'), children: "Link" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('\n- ', '', 'list item'), children: "UL" })] }) })] }));
-}

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

@@ -1,11 +0,0 @@
-type TagInputProps = {
-    name: string;
-    label: string;
-    value?: string[];
-    setValue: (_: string[]) => void;
-    className?: string;
-    tooltip?: string;
-    required?: boolean;
-};
-export default function TagInput({ name, label, value, className, tooltip, required, setValue, }: TagInputProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,44 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import ToolTip from './tooltip';
-import Label from './label';
-import EraseButton from './erase';
-import { X } from 'lucide-react';
-export default function TagInput({ name, label, value = [], className, tooltip, required, setValue, }) {
-    const original = value;
-    const [input, setInput] = useState('');
-    const [hasBlured, setHasBlured] = useState(false);
-    function addTag(value) {
-        const trimmed = value.trim();
-        if (trimmed && !value.includes(trimmed)) {
-            setValue([...value, trimmed]);
-        }
-    }
-    function removeTag(idx) {
-        setValue(value.filter((_, i) => i !== idx));
-    }
-    function handleKeyDown(e) {
-        if ((e.key === 'Enter' || e.key === ',' || e.key === 'Tab') &&
-            input.trim()) {
-            e.preventDefault();
-            addTag(input);
-            setInput('');
-        }
-        if (e.key === 'Backspace' && !input && value.length) {
-            setValue(value.slice(0, -1));
-        }
-    }
-    function handleErase() {
-        setValue([]);
-        setInput('');
-    }
-    const toRemove = original.filter((tag) => !value.includes(tag));
-    const toAdd = value.filter((tag) => !original.includes(tag));
-    return (_jsx("div", { className: `w-full ${className}`, children: _jsxs("div", { className: 'relative flex items-center flex-wrap gap-1 ' +
-                'border-[0.10rem] border-login-200 ' +
-                'rounded-lg ' +
-                'px-2.5 pt-3 pb-2.5 bg-login-800', children: [_jsxs("div", { className: 'flex flex-wrap gap-1 items-center w-full', children: [value.map((tag, idx) => (_jsxs("span", { className: 'bg-login-600 text-sm rounded px-2 ' +
-                                'py-0.5 flex items-center gap-0.5', children: [tag, _jsx("button", { type: 'button', className: 'ml-1 text-red-700 hover:text-red-800', onClick: () => removeTag(idx), children: _jsx(X, { className: 'h-4 stroke-3' }) })] }, tag + idx))), _jsx("input", { value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, onBlur: () => setHasBlured(true), className: 'peer flex-1 min-w-[6ch] bg-transparent ' +
-                                'outline-none text-sm', autoComplete: 'off', required: required && value.length === 0 }), toRemove.map((tag) => (_jsx("input", { type: 'hidden', name: name + '_remove', value: tag }, tag))), toAdd.map((tag) => (_jsx("input", { type: 'hidden', name: name + '_add', value: tag }, tag))), _jsx(Label, { label: label, value: value.length ? value.join(', ') : '', required: required, showRequired: required && value.length === 0 && hasBlured, className: 'pointer-events-none left-2' })] }), value.length > 0 && _jsx(EraseButton, { setData: handleErase }), value.length === 0 && tooltip && _jsx(ToolTip, { info: tooltip })] }) }));
-}

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

@@ -1,4 +0,0 @@
-export default function ToolTip({ info, className }: {
-    info: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ToolTip({ info, className }) {
-    return (_jsxs("div", { className: `absolute z-19 right-0 px-1 flex justify-center ${className}`, children: [_jsx("span", { className: 'peer cursor-pointer rounded-sm px-3 py-1 bg-login-800 hover:bg-login-600', children: "?" }), _jsx("div", { className: 'absolute hidden peer-hover:block p-2 rounded z-20 bg-login-700 border left-12 w-max max-w-3xs', children: info })] }));
-}

package/src/components/inputs/erase.tsx

@@ -1,13 +0,0 @@
-import { Eraser } from 'lucide-react'
-
-export default function EraseButton({ setData }: { setData: (data: string) => void }) {
-    return (
-        <button
-            type='button'
-            onClick={() => setData('')}
-            className={'absolute right-1 cursor-pointer px-2 py-1 bg-login-800 hover:bg-login-600 rounded-md'}
-        >
-            <Eraser className='w-5' />
-        </button>
-    )
-}

package/src/components/inputs/label.tsx

@@ -1,31 +0,0 @@
-type labelProps = {
-    label: string
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any
-    required?: boolean
-    showRequired?: boolean
-    className?: string
-    color?: string
-}
-
-export default function Label({ label, value, required, showRequired, className, color }: labelProps) {
-    return (
-        <label
-            className={
-                'w-[calc(100%-10px)] truncate pointer-events-none absolute text-sm duration-300 transform z-10 ' +
-                'peer-focus:px-2 peer-focus:top-2 origin-left px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
-                `${color ? color : 'bg-login-800'} ` +
-                `${value ? '-translate-y-5 scale-75 top-2 w-fit '
-                    : '-translate-y-1/2 scale-100 top-1/2 '
-                    + 'peer-focus:w-fit '
-                } ${showRequired ? 'text-red-500/50 ' : ''} 
-                        ${!value &&
-                    required ? 'group-[.submitPressed]:text-red-500/50 ' : ''}
-                        ${required ? 'after:content-["_*"] ' : ''}
-                        ${className}`
-            }
-        >
-            {label}
-        </label>
-    )
-}

package/src/components/inputs/markdown.tsx

@@ -1,129 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import Label from './label'
-import ToolTip from './tooltip'
-
-type MarkdownProps = {
-    name: string
-    label: string
-    value: string
-    setValue: (_: string | number) => void
-    className?: string
-    tooltip?: string
-    required?: boolean
-    rows?: number
-    color?: string
-    buttonColor?: string
-    buttonColorHighlighted?: string
-}
-
-export default function Markdown({
-    name,
-    label,
-    value,
-    className,
-    tooltip,
-    required,
-    rows = 6,
-    setValue,
-    color,
-    buttonColor,
-    buttonColorHighlighted
-}: MarkdownProps) {
-    const [hasBlured, setHasBlured] = useState(false)
-    const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-    const smallButtonStyle = `px-2 py-1 rounded 
-        ${buttonColorHighlighted ? `hover:${buttonColorHighlighted}` : 'hover:bg-login-500'}
-        ${' '}${buttonColor ? buttonColor : 'bg-login-600'}`
-
-    function wrapSelection(before: string, after = before, placeHolder = '') {
-        const textarea = textareaRef.current
-        if (!textarea) return
-        const start = textarea.selectionStart
-        const end = textarea.selectionEnd
-        const selected = value.slice(start, end) || placeHolder
-        const newValue =
-            value.slice(0, start) + before + selected + after + value.slice(end)
-        setValue(newValue)
-        requestAnimationFrame(() => {
-            const pos = start + before.length
-            textarea.focus()
-            textarea.setSelectionRange(pos, pos + selected.length)
-        })
-    }
-
-    return (
-        <div className={`w-full ${className ?? ''}`}>
-            <div className='relative'>
-                <textarea
-                    name={name}
-                    ref={textareaRef}
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    onBlur={() => setHasBlured(true)}
-                    rows={rows}
-                    required={required}
-                    className={
-                        'block px-2.5 pb-2.5 pt-4 w-full text-sm ' +
-                        'rounded-lg border-[0.10rem] appearance-none ' +
-                        'border-login-200 focus:outline-none focus:ring-0' +
-                        ' focus:border-login-50 peer resize-vertical ' +
-                        `${color ? color : 'bg-login-800'}`
-                    }
-                />
-
-                <Label
-                    label={label}
-                    value={value}
-                    color={color}
-                    required={required}
-                    showRequired={required && !value && hasBlured}
-                />
-                {tooltip && <ToolTip info={tooltip} />}
-            </div>
-
-            <div className='flex items-center justify-between gap-2 mt-2'>
-                <div className='flex gap-2'>
-                    <button
-                        type='button'
-                        className={smallButtonStyle}
-                        onClick={() => wrapSelection('**', '**', 'bold')}
-                    >
-                        B
-                    </button>
-                    <button
-                        type='button'
-                        className={smallButtonStyle}
-                        onClick={() => wrapSelection('*', '*', 'italic')}
-                    >
-                        I
-                    </button>
-                    <button
-                        type='button'
-                        className={smallButtonStyle}
-                        onClick={() =>
-                            wrapSelection('\n```\n', '\n```\n', 'code block')
-                        }
-                    >
-                        CB
-                    </button>
-                    <button
-                        type='button'
-                        className={smallButtonStyle}
-                        onClick={() => wrapSelection('[', '](url)', 'text')}
-                    >
-                        Link
-                    </button>
-                    <button
-                        type='button'
-                        className={smallButtonStyle}
-                        onClick={() => wrapSelection('\n- ', '', 'list item')}
-                    >
-                        UL
-                    </button>
-                </div>
-            </div>
-        </div>
-    )
-}