uibee 2.7.17 → 2.7.18

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

@@ -1,13 +1,8 @@
-import { type ChangeEvent } from 'react';
-export type CheckboxProps = {
-    label?: string;
+export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    checked?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
-    disabled?: boolean;
+    label?: string;
     error?: string;
     info?: string;
-    required?: boolean;
+    className?: string;
 };
-export default function Checkbox({ label, name, checked, onChange, className, disabled, error, info, required, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
 import { SelectionWrapper } from './shared';
-export default function Checkbox({ label, name, checked, onChange, className, disabled, error, info, required, }) {
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, disabled: disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { id: name, name: name, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, required: required, className: `
+export default function Checkbox(props) {
+    const { name, label, error, info, className, ...inputProps } = props;
+    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: name, name: name, type: 'checkbox', className: `
                         peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50

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

@@ -1,17 +1,10 @@
-import { type ChangeEvent, type JSX } from 'react';
-export type InputProps = {
-    label?: string;
+import { type JSX } from 'react';
+export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    type?: React.HTMLInputTypeAttribute;
-    placeholder?: string;
-    value?: string | number;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
     error?: string;
     className?: string;
-    disabled?: boolean;
-    required?: boolean;
     icon?: JSX.Element;
     info?: string;
-    multiple?: boolean;
 };
-export default function Input({ label, name, type, placeholder, value, onChange, error, className, disabled, required, icon, info, multiple, }: InputProps): import("react/jsx-runtime").JSX.Element;
+export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,20 +4,23 @@ import { Calendar, Clock } from 'lucide-react';
 import { FieldWrapper } from './shared';
 import DateTimePickerPopup from './shared/dateTimePickerPopup';
 import useClickOutside from '../../hooks/useClickOutside';
-export default function Input({ label, name, type = 'text', placeholder, value, onChange, error, className, disabled, required, icon, info, multiple, }) {
+export default function Input(props) {
+    const { name, label, error, className, icon, info, ...inputProps } = props;
+    const { type = 'text', value } = inputProps;
     const localRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useClickOutside(() => setIsOpen(false));
     const isDateType = ['date', 'datetime-local', 'time'].includes(type);
     function handleIconClick() {
-        if (isDateType && !disabled) {
+        if (isDateType && !inputProps.disabled) {
             setIsOpen(!isOpen);
         }
-        else if (localRef.current && !disabled) {
+        else if (localRef.current && !inputProps.disabled) {
             localRef.current.focus();
         }
     }
     function handleDateChange(date) {
+        const onChange = inputProps.onChange;
         if (!onChange)
             return;
         const pad = (n) => n.toString().padStart(2, '0');
@@ -61,10 +64,10 @@ export default function Input({ label, name, type = 'text', placeholder, value,
         const date = new Date(value);
         return isNaN(date.getTime()) ? null : date;
     }
-    return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
+    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 && !disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
-                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ref: localRef, id: name, name: name, type: isDateType ? 'text' : type, placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, required: required, readOnly: isDateType, onClick: () => isDateType && !disabled && setIsOpen(true), title: label, multiple: multiple, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                            ${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: `
                         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
@@ -73,6 +76,6 @@ export default function Input({ label, name, type = 'text', placeholder, value,
                         transition-all duration-200
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
-                        ${isDateType && !disabled ? 'cursor-pointer' : ''}
-                    ` }), isOpen && isDateType && !disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) }))] }) }));
+                        ${isDateType && !inputProps.disabled ? 'cursor-pointer' : ''}
+                    ` }), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) }))] }) }));
 }

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

@@ -1,14 +1,8 @@
-import { type ChangeEvent } from 'react';
-export type RadioProps = {
-    label?: string;
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    value: string | number;
-    checked?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
-    disabled?: boolean;
+    label?: string;
     error?: string;
     info?: string;
-    required?: boolean;
+    className?: string;
 };
-export default function Radio({ label, name, value, checked, onChange, className, disabled, error, info, required, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectionWrapper } from './shared';
-export default function Radio({ label, name, value, checked, onChange, className, disabled, error, info, required, }) {
+export default function Radio(props) {
+    const { name, label, error, info, className, ...inputProps } = props;
+    const { value } = inputProps;
     const id = `${name}-${value}`;
-    return (_jsx(SelectionWrapper, { label: label, name: id, required: required, info: info, error: error, className: className, disabled: disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { id: id, name: name, type: 'radio', value: value, checked: checked, onChange: onChange, disabled: disabled, required: required, className: `
+    return (_jsx(SelectionWrapper, { label: label, name: id, required: inputProps.required, info: info, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'radio', className: `
                         peer appearance-none h-5 w-5 rounded-full border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50

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

@@ -1,17 +1,9 @@
-import { type ChangeEvent } from 'react';
-export type RangeProps = {
-    label?: string;
+export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    min?: number;
-    max?: number;
-    step?: number;
-    value?: number;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
     error?: string;
     className?: string;
-    disabled?: boolean;
-    required?: boolean;
     info?: string;
     showValue?: boolean;
 };
-export default function Range({ label, name, min, max, step, value, onChange, error, className, disabled, required, info, showValue, }: RangeProps): import("react/jsx-runtime").JSX.Element;
+export default function Range(props: RangeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldWrapper } from './shared';
-export default function Range({ label, name, min = 0, max = 100, step = 1, value = 0, onChange, error, className, disabled, required, info, showValue = true, }) {
-    return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: _jsxs("div", { className: 'flex items-center gap-4', children: [_jsx("input", { id: name, name: name, type: 'range', min: min, max: max, step: step, value: value, onChange: onChange, disabled: disabled, required: required, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+export default function Range(props) {
+    const { name, label, error, className, info, showValue = true, ...inputProps } = props;
+    const { min = 0, max = 100, step = 1, value = 0 } = inputProps;
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'flex items-center gap-4', children: [_jsx("input", { ...inputProps, id: name, name: name, type: 'range', min: min, max: max, step: step, value: value, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         flex-1 h-2 bg-login-500 rounded-lg appearance-none cursor-pointer
                         accent-login
                         [&::-webkit-slider-thumb]:appearance-none

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

@@ -1,14 +1,9 @@
-import { type ChangeEvent } from 'react';
-export type SwitchProps = {
-    label?: string;
+export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    checked?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
-    disabled?: boolean;
+    label?: string;
     error?: string;
     info?: string;
-    required?: boolean;
+    className?: string;
     switchOnly?: boolean;
 };
-export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, switchOnly, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectionWrapper } from './shared';
-export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, switchOnly, }) {
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, hideError: switchOnly, className: className, disabled: disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { type: 'checkbox', id: name, name: name, checked: checked, onChange: onChange, disabled: disabled, required: required, className: 'sr-only peer' }), _jsx("div", { className: `
+export default function Switch(props) {
+    const { name, label, error, info, className, switchOnly, ...inputProps } = props;
+    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, hideError: switchOnly, className: className, disabled: inputProps.disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { ...inputProps, type: 'checkbox', id: name, name: name, className: 'sr-only peer' }), _jsx("div", { className: `
                     w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
                     after:content-[''] after:absolute ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} 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' : ''}
+                    ${inputProps.disabled ? 'opacity-50 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500' : ''}
                 ` })] }) }));
 }

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

@@ -1,16 +1,9 @@
-import { type ChangeEvent } from 'react';
-export type TextareaProps = {
-    label?: string;
+export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     name: string;
-    placeholder?: string;
-    type?: 'markdown' | 'json' | 'text';
-    value?: string;
-    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    label?: string;
     error?: string;
     className?: string;
-    disabled?: boolean;
-    required?: boolean;
-    rows?: number;
     info?: string;
+    type?: 'markdown' | 'json' | 'text';
 };
-export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows, info, type, }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export default function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;

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

@@ -12,17 +12,19 @@ function isValidJson(str) {
         return error.message;
     }
 }
-export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows = 4, info, type = 'text', }) {
+export default function Textarea(props) {
+    const { name, label, error, className, info, type = 'text', rows = 4, ...textareaProps } = props;
+    const { value } = textareaProps;
     const [preview, setPreview] = useState(false);
     const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
     const displayError = jsonError || error;
-    return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: displayError, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, error: displayError, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text 
                         p-3
                         prose prose-invert prose-sm max-w-none overflow-y-auto
                         ${error ? 'border-red-500' : ''}
-                    `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: value || '' }) })) : (_jsx("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: `
+                    `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })) : (_jsx("textarea", { ...textareaProps, id: name, name: name, 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.7.17",
+  "version": "2.7.18",
   "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/checkbox.tsx

@@ -1,49 +1,33 @@
-import { type ChangeEvent } from 'react'
 import { Check } from 'lucide-react'
 import { SelectionWrapper } from './shared'
 
-export type CheckboxProps = {
-    label?: string
+export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
-    checked?: boolean
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
-    className?: string
-    disabled?: boolean
+    label?: string
     error?: string
     info?: string
-    required?: boolean
+    className?: string
 }
 
-export default function Checkbox({
-    label,
-    name,
-    checked,
-    onChange,
-    className,
-    disabled,
-    error,
-    info,
-    required,
-}: CheckboxProps) {
+export default function Checkbox(props: CheckboxProps) {
+    const { name, label, error, info, className, ...inputProps } = props
+
     return (
         <SelectionWrapper
             label={label}
             name={name}
-            required={required}
+            required={inputProps.required}
             info={info}
             error={error}
             className={className}
-            disabled={disabled}
+            disabled={inputProps.disabled}
         >
             <div className='relative flex items-center'>
                 <input
+                    {...inputProps}
                     id={name}
                     name={name}
                     type='checkbox'
-                    checked={checked}
-                    onChange={onChange}
-                    disabled={disabled}
-                    required={required}
                     className={`
                         peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login

package/src/components/inputs/input.tsx

@@ -4,37 +4,18 @@ import { FieldWrapper } from './shared'
 import DateTimePickerPopup from './shared/dateTimePickerPopup'
 import useClickOutside from '../../hooks/useClickOutside'
 
-export type InputProps = {
-    label?: string
+export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
-    type?: React.HTMLInputTypeAttribute
-    placeholder?: string
-    value?: string | number
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+    label?: string
     error?: string
     className?: string
-    disabled?: boolean
-    required?: boolean
     icon?: JSX.Element
     info?: string
-    multiple?: boolean
 }
 
-export default function Input({
-    label,
-    name,
-    type = 'text',
-    placeholder,
-    value,
-    onChange,
-    error,
-    className,
-    disabled,
-    required,
-    icon,
-    info,
-    multiple,
-}: InputProps) {
+export default function Input(props: InputProps) {
+    const { name, label, error, className, icon, info, ...inputProps } = props
+    const { type = 'text', value } = inputProps
     const localRef = useRef<HTMLInputElement>(null)
     const [isOpen, setIsOpen] = useState(false)
 
@@ -43,14 +24,15 @@ export default function Input({
     const isDateType = ['date', 'datetime-local', 'time'].includes(type as string)
 
     function handleIconClick() {
-        if (isDateType && !disabled) {
+        if (isDateType && !inputProps.disabled) {
             setIsOpen(!isOpen)
-        } else if (localRef.current && !disabled) {
+        } else if (localRef.current && !inputProps.disabled) {
             localRef.current.focus()
         }
     }
 
     function handleDateChange(date: Date) {
+        const onChange = inputProps.onChange
         if (!onChange) return
 
         const pad = (n: number) => n.toString().padStart(2, '0')
@@ -98,7 +80,7 @@ export default function Input({
         <FieldWrapper
             label={label}
             name={name}
-            required={required}
+            required={inputProps.required}
             info={info}
             error={error}
             className={className}
@@ -108,7 +90,7 @@ export default function Input({
                     <div
                         className={`
                             absolute left-3 text-login-200
-                            ${isDateType && !disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
+                            ${isDateType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
                         `}
                         onClick={handleIconClick}
                     >
@@ -116,19 +98,15 @@ export default function Input({
                     </div>
                 )}
                 <input
+                    {...inputProps}
                     ref={localRef}
                     id={name}
                     name={name}
                     type={isDateType ? 'text' : type}
-                    placeholder={placeholder}
                     value={value}
-                    onChange={onChange}
-                    disabled={disabled}
-                    required={required}
                     readOnly={isDateType}
-                    onClick={() => isDateType && !disabled && setIsOpen(true)}
+                    onClick={() => isDateType && !inputProps.disabled && setIsOpen(true)}
                     title={label}
-                    multiple={multiple}
                     aria-invalid={!!error}
                     aria-describedby={error ? `${name}-error` : undefined}
                     className={`
@@ -140,10 +118,10 @@ export default function Input({
                         transition-all duration-200
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
-                        ${isDateType && !disabled ? 'cursor-pointer' : ''}
+                        ${isDateType && !inputProps.disabled ? 'cursor-pointer' : ''}
                     `}
                 />
-                {isOpen && isDateType && !disabled && (
+                {isOpen && isDateType && !inputProps.disabled && (
                     <DateTimePickerPopup
                         value={getDateValue()}
                         onChange={handleDateChange}

package/src/components/inputs/radio.tsx

@@ -1,52 +1,34 @@
-import { type ChangeEvent } from 'react'
 import { SelectionWrapper } from './shared'
 
-export type RadioProps = {
-    label?: string
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
-    value: string | number
-    checked?: boolean
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
-    className?: string
-    disabled?: boolean
+    label?: string
     error?: string
     info?: string
-    required?: boolean
+    className?: string
 }
 
-export default function Radio({
-    label,
-    name,
-    value,
-    checked,
-    onChange,
-    className,
-    disabled,
-    error,
-    info,
-    required,
-}: RadioProps) {
+export default function Radio(props: RadioProps) {
+    const { name, label, error, info, className, ...inputProps } = props
+    const { value } = inputProps
     const id = `${name}-${value}`
+
     return (
         <SelectionWrapper
             label={label}
             name={id}
-            required={required}
+            required={inputProps.required}
             info={info}
             error={error}
             className={className}
-            disabled={disabled}
+            disabled={inputProps.disabled}
         >
             <div className='relative flex items-center'>
                 <input
+                    {...inputProps}
                     id={id}
                     name={name}
                     type='radio'
-                    value={value}
-                    checked={checked}
-                    onChange={onChange}
-                    disabled={disabled}
-                    required={required}
                     className={`
                         peer appearance-none h-5 w-5 rounded-full border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login

package/src/components/inputs/range.tsx

@@ -1,48 +1,30 @@
-import { type ChangeEvent } from 'react'
 import { FieldWrapper } from './shared'
 
-export type RangeProps = {
-    label?: string
+export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
-    min?: number
-    max?: number
-    step?: number
-    value?: number
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+    label?: string
     error?: string
     className?: string
-    disabled?: boolean
-    required?: boolean
     info?: string
     showValue?: boolean
 }
 
-export default function Range({
-    label,
-    name,
-    min = 0,
-    max = 100,
-    step = 1,
-    value = 0,
-    onChange,
-    error,
-    className,
-    disabled,
-    required,
-    info,
-    showValue = true,
-}: RangeProps) {
+export default function Range(props: RangeProps) {
+    const { name, label, error, className, info, showValue = true, ...inputProps } = props
+    const { min = 0, max = 100, step = 1, value = 0 } = inputProps
+
     return (
         <FieldWrapper
             label={label}
             name={name}
-            required={required}
+            required={inputProps.required}
             info={info}
             error={error}
             className={className}
         >
             <div className='flex items-center gap-4'>
                 <input
+                    {...inputProps}
                     id={name}
                     name={name}
                     type='range'
@@ -50,9 +32,6 @@ export default function Range({
                     max={max}
                     step={step}
                     value={value}
-                    onChange={onChange}
-                    disabled={disabled}
-                    required={required}
                     title={label}
                     aria-invalid={!!error}
                     aria-describedby={error ? `${name}-error` : undefined}

package/src/components/inputs/switch.tsx

@@ -1,51 +1,34 @@
-import { type ChangeEvent } from 'react'
 import { SelectionWrapper } from './shared'
 
-export type SwitchProps = {
-    label?: string
+export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
-    checked?: boolean
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
-    className?: string
-    disabled?: boolean
+    label?: string
     error?: string
     info?: string
-    required?: boolean
+    className?: string
     switchOnly?: boolean
 }
 
-export default function Switch({
-    label,
-    name,
-    checked,
-    onChange,
-    className,
-    disabled,
-    error,
-    info,
-    required,
-    switchOnly,
-}: SwitchProps) {
+export default function Switch(props: SwitchProps) {
+    const { name, label, error, info, className, switchOnly, ...inputProps } = props
+
     return (
         <SelectionWrapper
             label={label}
             name={name}
-            required={required}
+            required={inputProps.required}
             info={info}
             error={error}
             hideError={switchOnly}
             className={className}
-            disabled={disabled}
+            disabled={inputProps.disabled}
         >
             <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`}>
                 <input
+                    {...inputProps}
                     type='checkbox'
                     id={name}
                     name={name}
-                    checked={checked}
-                    onChange={onChange}
-                    disabled={disabled}
-                    required={required}
                     className='sr-only peer'
                 />
                 <div className={`
@@ -54,7 +37,7 @@ export default function Switch({
                     after:content-[''] after:absolute ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} 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' : ''}
+                    ${inputProps.disabled ? 'opacity-50 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500' : ''}
                 `}></div>
             </label>

package/src/components/inputs/textarea.tsx

@@ -1,21 +1,15 @@
-import { type ChangeEvent, useState } from 'react'
+import { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Eye, Pencil } from 'lucide-react'
 import { FieldWrapper } from './shared'
 
-export type TextareaProps = {
-    label?: string
+export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     name: string
-    placeholder?: string
-    type?: 'markdown' | 'json' | 'text'
-    value?: string
-    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
+    label?: string
     error?: string
     className?: string
-    disabled?: boolean
-    required?: boolean
-    rows?: number
     info?: string
+    type?: 'markdown' | 'json' | 'text'
 }
 
 function isValidJson(str: string): string | null {
@@ -27,30 +21,19 @@ function isValidJson(str: string): string | null {
     }
 }
 
-export default function Textarea({
-    label,
-    name,
-    placeholder,
-    value,
-    onChange,
-    error,
-    className,
-    disabled,
-    required,
-    rows = 4,
-    info,
-    type = 'text',
-}: TextareaProps) {
+export default function Textarea(props: TextareaProps) {
+    const { name, label, error, className, info, type = 'text', rows = 4, ...textareaProps } = props
+    const { value } = textareaProps
     const [preview, setPreview] = useState(false)
 
-    const jsonError = type === 'json' && value ? isValidJson(value) : undefined
+    const jsonError = type === 'json' && value ? isValidJson(value as string) : undefined
     const displayError = jsonError || error
 
     return (
         <FieldWrapper
             label={label}
             name={name}
-            required={required}
+            required={textareaProps.required}
             info={info}
             error={displayError}
             className={className}
@@ -80,17 +63,13 @@ export default function Textarea({
                     `}
                         style={{ minHeight: `${rows * 1.5}rem` }}
                     >
-                        <ReactMarkdown>{value || ''}</ReactMarkdown>
+                        <ReactMarkdown>{String(value || '')}</ReactMarkdown>
                     </div>
                 ) : (
                     <textarea
+                        {...textareaProps}
                         id={name}
                         name={name}
-                        placeholder={placeholder}
-                        value={value}
-                        onChange={onChange}
-                        disabled={disabled}
-                        required={required}
                         rows={rows}
                         title={label}
                         aria-invalid={!!error}