uibee 2.12.1 → 2.12.3

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

@@ -12,5 +12,6 @@ export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChan
     options: CheckboxOption[];
     value?: (string | number)[];
     onChange?: (value: (string | number)[]) => void;
+    textSize?: 'sm' | 'md';
 };
 export default function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
 import { FieldWrapper, InputLabel } from './shared';
 export default function Checkbox(props) {
-    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
+    const { options, onChange, value, label, description, error, info, name, className, textSize = 'sm', ...rest } = props;
     const selectedValues = Array.isArray(value) ? value : [];
-    return (_jsx(FieldWrapper, { label: label, name: name, required: rest.required, info: info, description: description, error: error, className: className, children: _jsx("div", { className: 'flex flex-col gap-2', children: options.map((option) => (_jsx(CheckboxItem, { name: name, value: option.value, label: option.label, checked: selectedValues.includes(option.value), disabled: rest.disabled, onChange: (e) => {
+    return (_jsx(FieldWrapper, { label: label, name: name, required: rest.required, info: info, description: description, error: error, textSize: textSize, className: className, children: _jsx("div", { className: 'flex flex-col gap-2', children: options.map((option) => (_jsx(CheckboxItem, { name: name, value: option.value, label: option.label, checked: selectedValues.includes(option.value), disabled: rest.disabled, onChange: (e) => {
                     if (!onChange)
                         return;
                     const isChecked = e.target.checked;
@@ -33,5 +33,5 @@ function CheckboxItem(props) {
                         absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
                         w-3.5 h-3.5 pointer-events-none text-white opacity-0
                         peer-checked:opacity-100 transition-opacity duration-200
-                    ` })] }), label && (_jsx(InputLabel, { label: label, name: name, className: 'select-none cursor-pointer' }))] }));
+                    ` })] }), label && (_jsx(InputLabel, { label: label, name: name, disabled: inputProps.disabled, className: 'select-none cursor-pointer' }))] }));
 }

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

@@ -7,5 +7,6 @@ export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     icon?: JSX.Element;
     info?: string;
     description?: string;
+    textSize?: 'sm' | 'md';
 };
 export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@ 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, description, ...inputProps } = props;
+    const { name, label, error, className, icon, info, description, textSize = 'sm', ...inputProps } = props;
     const { type = 'text', value } = inputProps;
     const localRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
@@ -105,7 +105,7 @@ export default function Input(props) {
             return `${dd}.${MM}.${yyyy} ${hh}:${mm}`;
         return value;
     }
-    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, description: description, 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, description: description, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
                             absolute left-3 text-login-200
                             ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
                         `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: isClickableType ? undefined : name, type: isClickableType ? 'text' : type, value: isDateType ? getDateDisplayValue() : value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `

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

@@ -12,5 +12,6 @@ export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange'
     options: RadioOption[];
     value?: string | number | null;
     onChange?: (value: string | number) => void;
+    textSize?: 'sm' | 'md';
 };
 export default function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldWrapper, InputLabel } from './shared';
 export default function Radio(props) {
-    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
-    return (_jsx(FieldWrapper, { label: label, name: name, required: rest.required, info: info, description: description, error: error, className: className, children: _jsx("div", { className: 'flex flex-col gap-2', children: options.map((option) => (_jsx(RadioItem, { name: name, value: option.value, label: option.label, checked: value === option.value, disabled: rest.disabled, onChange: () => {
+    const { options, onChange, value, label, description, error, info, name, className, textSize = 'sm', ...rest } = props;
+    return (_jsx(FieldWrapper, { label: label, name: name, required: rest.required, info: info, description: description, error: error, textSize: textSize, className: className, children: _jsx("div", { className: 'flex flex-col gap-2', children: options.map((option) => (_jsx(RadioItem, { name: name, value: option.value, label: option.label, checked: value === option.value, disabled: rest.disabled, onChange: () => {
                     if (onChange)
                         onChange(option.value);
                 }, className: 'mb-0' }, option.value))) }) }));
@@ -23,5 +23,5 @@ function RadioItem(props) {
                     absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
                     w-2 h-2 rounded-full bg-white pointer-events-none opacity-0
                     peer-checked:opacity-100 transition-opacity duration-200
-                ` })] }), label && (_jsx(InputLabel, { label: label, name: name, className: 'select-none cursor-pointer' }))] }));
+                ` })] }), label && (_jsx(InputLabel, { label: label, name: name, disabled: inputProps.disabled, className: 'select-none cursor-pointer' }))] }));
 }

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

@@ -6,5 +6,6 @@ export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     info?: string;
     description?: string;
     showValue?: boolean;
+    textSize?: 'sm' | 'md';
 };
 export default function Range(props: RangeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldWrapper } from './shared';
 export default function Range(props) {
-    const { name, label, error, className, info, description, showValue = true, ...inputProps } = props;
+    const { name, label, error, className, info, description, showValue = true, textSize = 'sm', ...inputProps } = props;
     const { min = 0, max = 100, step = 1, value = 0 } = inputProps;
-    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, description: description, 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: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, description: description, error: error, textSize: textSize, 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/select.d.ts

@@ -18,5 +18,6 @@ export type SelectProps = {
     description?: string;
     clearable?: boolean;
     searchable?: boolean;
+    textSize?: 'sm' | 'md';
 };
-export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder, info, description, clearable, searchable, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder, info, description, clearable, searchable, textSize, }: SelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import { useClickOutside } from '../../hooks';
 import { ChevronDown, X, Search } from 'lucide-react';
 import { FieldWrapper } from './shared';
-export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = 'Select an option', info, description, clearable = true, searchable = true, }) {
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = 'Select an option', info, description, clearable = true, searchable = true, textSize = 'sm', }) {
     const [isOpen, setIsOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedOption, setSelectedOption] = useState(options.find(opt => opt.value === value));
@@ -37,7 +37,7 @@ export default function Select({ label, name, value, onChange, options, error, c
         }
     }
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
-    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, description: description, error: error, className: className, children: [_jsxs("div", { className: 'relative', ref: containerRef, children: [_jsxs("button", { type: 'button', onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen, "aria-labelledby": label ? undefined : name, className: `
+    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, description: description, error: error, textSize: textSize, className: className, children: [_jsxs("div", { className: 'relative', ref: containerRef, children: [_jsxs("button", { type: 'button', onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen, "aria-labelledby": label ? undefined : name, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text text-left
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login

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

@@ -6,8 +6,9 @@ interface FieldWrapperProps {
     info?: string;
     error?: string;
     description?: string;
+    textSize?: 'sm' | 'md';
     children: ReactNode;
     className?: string;
 }
-export default function FieldWrapper({ label, name, required, info, error, description, children, className, }: FieldWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default function FieldWrapper({ label, name, required, info, error, description, textSize, children, className, }: FieldWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import InputLabel from './inputLabel';
 import InputInfo from './inputInfo';
 import InputError from './inputError';
-export default function FieldWrapper({ label, name, required, info, error, description, children, className, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: 'ml-1' })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("p", { className: 'text-sm text-login-100 ml-1 mb-1', children: description })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
+export default function FieldWrapper({ label, name, required, info, error, description, textSize = 'sm', children, className, }) {
+    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: `ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}` })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("p", { className: 'text-sm text-login-100 ml-1 mb-1', children: description })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
 }

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

@@ -6,5 +6,6 @@ export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     description?: string;
     className?: string;
     switchOnly?: boolean;
+    textSize?: 'sm' | 'md';
 };
 export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldWrapper } from './shared';
 export default function Switch(props) {
-    const { name, label, error, info, description, className, switchOnly, ...inputProps } = props;
-    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, description: description, className: className, 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: `
+    const { name, label, error, info, description, className, switchOnly, textSize = 'sm', ...inputProps } = props;
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, description: description, textSize: textSize, className: className, 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 

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

@@ -10,5 +10,6 @@ export type TagInputProps = {
     required?: boolean;
     info?: string;
     description?: string;
+    textSize?: 'sm' | 'md';
 };
-export default function TagInput({ label, name, value, onChange, placeholder, error, className, disabled, required, info, description, }: TagInputProps): import("react/jsx-runtime").JSX.Element;
+export default function TagInput({ label, name, value, onChange, placeholder, error, className, disabled, required, info, description, textSize, }: TagInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { X } from 'lucide-react';
 import { FieldWrapper } from './shared';
-export default function TagInput({ label, name, value = [], onChange, placeholder = 'Add...', error, className, disabled, required, info, description, }) {
+export default function TagInput({ label, name, value = [], onChange, placeholder = 'Add...', error, className, disabled, required, info, description, textSize = 'sm', }) {
     const [inputValue, setInputValue] = useState('');
     function handleKeyDown(e) {
         if ((e.key === 'Enter' || e.key === ',') && inputValue.trim()) {
@@ -29,7 +29,7 @@ export default function TagInput({ label, name, value = [], onChange, placeholde
         if (onChange)
             onChange(newValue);
     }
-    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, description: description, error: error, className: className, children: [_jsxs("div", { className: `
+    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, description: description, error: error, className: className, textSize: textSize, children: [_jsxs("div", { className: `
                     flex flex-wrap gap-2 p-2 rounded-md bg-login-500/50 border border-login-500 
                     text-login-text min-h-10.5
                     focus-within:border-login focus-within:ring-1 focus-within:ring-login

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

@@ -6,5 +6,6 @@ export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     info?: string;
     description?: string;
     type?: 'markdown' | 'json' | 'text';
+    textSize?: 'sm' | 'md';
 };
 export default function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,12 +13,12 @@ function isValidJson(str) {
     }
 }
 export default function Textarea(props) {
-    const { name, label, error, className, info, description, type = 'text', rows = 4, ...textareaProps } = props;
+    const { name, label, error, className, info, description, type = 'text', rows = 4, textSize = 'sm', ...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: textareaProps.required, info: info, description: description, 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, description: description, error: displayError, textSize: textSize, 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

package/dist/src/globals.css

@@ -1904,6 +1904,10 @@
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
+  .text-base\! {
+    font-size: var(--text-base) !important;
+    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -1912,6 +1916,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-sm\! {
+    font-size: var(--text-sm) !important;
+    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
+  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));

package/package.json

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

@@ -13,6 +13,7 @@ type CheckboxItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     info?: string
     description?: string
     className?: string
+    textSize?: 'sm' | 'md'
 }
 
 export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
@@ -25,10 +26,11 @@ export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChan
     options: CheckboxOption[]
     value?: (string | number)[]
     onChange?: (value: (string | number)[]) => void
+    textSize?: 'sm' | 'md'
 }
 
 export default function Checkbox(props: CheckboxProps) {
-    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
+    const { options, onChange, value, label, description, error, info, name, className, textSize = 'sm', ...rest } = props
     const selectedValues = Array.isArray(value) ? value : []
 
     return (
@@ -39,6 +41,7 @@ export default function Checkbox(props: CheckboxProps) {
             info={info}
             description={description}
             error={error}
+            textSize={textSize}
             className={className}
         >
             <div className='flex flex-col gap-2'>
@@ -103,6 +106,7 @@ function CheckboxItem(props: CheckboxItemProps) {
                 <InputLabel
                     label={label}
                     name={name}
+                    disabled={inputProps.disabled}
                     className='select-none cursor-pointer'
                 />
             )}

package/src/components/inputs/input.tsx

@@ -13,10 +13,11 @@ export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     icon?: JSX.Element
     info?: string
     description?: string
+    textSize?: 'sm' | 'md'
 }
 
 export default function Input(props: InputProps) {
-    const { name, label, error, className, icon, info, description, ...inputProps } = props
+    const { name, label, error, className, icon, info, description, textSize = 'sm', ...inputProps } = props
     const { type = 'text', value } = inputProps
     const localRef = useRef<HTMLInputElement>(null)
     const [isOpen, setIsOpen] = useState(false)
@@ -132,6 +133,7 @@ export default function Input(props: InputProps) {
             info={info}
             error={error}
             description={description}
+            textSize={textSize}
             className={className}
         >
             <div className='relative flex items-center' ref={containerRef}>

package/src/components/inputs/radio.tsx

@@ -12,6 +12,7 @@ type RadioItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     info?: string
     description?: string
     className?: string
+    textSize?: 'sm' | 'md'
 }
 
 export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
@@ -24,10 +25,11 @@ export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange'
     options: RadioOption[]
     value?: string | number | null
     onChange?: (value: string | number) => void
+    textSize?: 'sm' | 'md'
 }
 
 export default function Radio(props: RadioProps) {
-    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
+    const { options, onChange, value, label, description, error, info, name, className, textSize = 'sm', ...rest } = props
 
     return (
         <FieldWrapper
@@ -37,6 +39,7 @@ export default function Radio(props: RadioProps) {
             info={info}
             description={description}
             error={error}
+            textSize={textSize}
             className={className}
         >
             <div className='flex flex-col gap-2'>
@@ -92,6 +95,7 @@ function RadioItem(props: RadioItemProps) {
                 <InputLabel
                     label={label}
                     name={name}
+                    disabled={inputProps.disabled}
                     className='select-none cursor-pointer'
                 />
             )}

package/src/components/inputs/range.tsx

@@ -8,10 +8,11 @@ export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     info?: string
     description?: string
     showValue?: boolean
+    textSize?: 'sm' | 'md'
 }
 
 export default function Range(props: RangeProps) {
-    const { name, label, error, className, info, description, showValue = true, ...inputProps } = props
+    const { name, label, error, className, info, description, showValue = true, textSize = 'sm', ...inputProps } = props
     const { min = 0, max = 100, step = 1, value = 0 } = inputProps
 
     return (
@@ -22,6 +23,7 @@ export default function Range(props: RangeProps) {
             info={info}
             description={description}
             error={error}
+            textSize={textSize}
             className={className}
         >
             <div className='flex items-center gap-4'>

package/src/components/inputs/select.tsx

@@ -27,6 +27,7 @@ export type SelectProps = {
     description?: string
     clearable?: boolean
     searchable?: boolean
+    textSize?: 'sm' | 'md'
 }
 
 export default function Select({
@@ -44,6 +45,7 @@ export default function Select({
     description,
     clearable = true,
     searchable = true,
+    textSize = 'sm',
 }: SelectProps) {
     const [isOpen, setIsOpen] = useState(false)
     const [searchTerm, setSearchTerm] = useState('')
@@ -93,6 +95,7 @@ export default function Select({
             info={info}
             description={description}
             error={error}
+            textSize={textSize}
             className={className}
         >
             <div className='relative' ref={containerRef}>

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

@@ -10,6 +10,7 @@ interface FieldWrapperProps {
     info?: string
     error?: string
     description?: string
+    textSize?: 'sm' | 'md'
     children: ReactNode
     className?: string
 }
@@ -21,6 +22,7 @@ export default function FieldWrapper({
     info,
     error,
     description,
+    textSize = 'sm',
     children,
     className,
 }: FieldWrapperProps) {
@@ -33,7 +35,7 @@ export default function FieldWrapper({
                             label={label}
                             name={name}
                             required={required}
-                            className='ml-1'
+                            className={`ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}`}
                         />
                     )}
                     {info && <InputInfo info={info} />}

package/src/components/inputs/switch.tsx

@@ -8,10 +8,11 @@ export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     description?: string
     className?: string
     switchOnly?: boolean
+    textSize?: 'sm' | 'md'
 }
 
 export default function Switch(props: SwitchProps) {
-    const { name, label, error, info, description, className, switchOnly, ...inputProps } = props
+    const { name, label, error, info, description, className, switchOnly, textSize = 'sm', ...inputProps } = props
 
     return (
         <FieldWrapper
@@ -21,6 +22,7 @@ export default function Switch(props: SwitchProps) {
             info={info}
             error={error}
             description={description}
+            textSize={textSize}
             className={className}
         >
             <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`}>

package/src/components/inputs/tagInput.tsx

@@ -16,6 +16,7 @@ export type TagInputProps = {
     required?: boolean
     info?: string
     description?: string
+    textSize?: 'sm' | 'md'
 }
 
 export default function TagInput({
@@ -30,6 +31,7 @@ export default function TagInput({
     required,
     info,
     description,
+    textSize = 'sm',
 }: TagInputProps) {
     const [inputValue, setInputValue] = useState('')
 
@@ -63,6 +65,7 @@ export default function TagInput({
             description={description}
             error={error}
             className={className}
+            textSize={textSize}
         >
             <div
                 className={`

package/src/components/inputs/textarea.tsx

@@ -11,6 +11,7 @@ export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     info?: string
     description?: string
     type?: 'markdown' | 'json' | 'text'
+    textSize?: 'sm' | 'md'
 }
 
 function isValidJson(str: string): string | null {
@@ -23,7 +24,7 @@ function isValidJson(str: string): string | null {
 }
 
 export default function Textarea(props: TextareaProps) {
-    const { name, label, error, className, info, description, type = 'text', rows = 4, ...textareaProps } = props
+    const { name, label, error, className, info, description, type = 'text', rows = 4, textSize = 'sm', ...textareaProps } = props
     const { value } = textareaProps
     const [preview, setPreview] = useState(false)
 
@@ -38,6 +39,7 @@ export default function Textarea(props: TextareaProps) {
             info={info}
             description={description}
             error={displayError}
+            textSize={textSize}
             className={className}
         >
             <div className='relative'>