R: Refactor basic components structure

rsconcept/frontend/src/app/ErrorFallback.tsx

@@ -1,7 +1,7 @@
 import { useNavigate, useRouteError } from 'react-router';
 
 import InfoError from '@/components/info/InfoError';
-import Button from '@/components/ui/Button';
+import { Button } from '@/components/ui/Control';
 
 function ErrorFallback() {
   const error = useRouteError();

rsconcept/frontend/src/app/Footer.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import TextURL from '@/components/ui/TextURL';
+import { TextURL } from '@/components/ui/Control';
 import { external_urls } from '@/utils/constants';
 
 function Footer() {

rsconcept/frontend/src/app/GlobalTooltips.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import InfoConstituenta from '@/components/info/InfoConstituenta';
+import { Tooltip } from '@/components/ui/Container';
 import Loader from '@/components/ui/Loader';
-import Tooltip from '@/components/ui/Tooltip';
 import { useTooltipsStore } from '@/stores/tooltips';
 import { globals } from '@/utils/constants';
 

rsconcept/frontend/src/app/Navigation/UserDropdown.tsx

@@ -16,8 +16,7 @@ import {
   IconUser
 } from '@/components/Icons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { Dropdown, DropdownButton } from '@/components/ui/Dropdown';
-import DropdownButton from '@/components/ui/DropdownButton';
 import { usePreferencesStore } from '@/stores/preferences';
 
 import { urls } from '../urls';

rsconcept/frontend/src/app/Navigation/UserMenu.tsx

@@ -1,8 +1,8 @@
 import { Suspense } from 'react';
 
 import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
+import { useDropdown } from '@/components/ui/Dropdown';
 import Loader from '@/components/ui/Loader';
-import useDropdown from '@/hooks/useDropdown';
 
 import { urls } from '../urls';
 import UserButton from './UserButton';

rsconcept/frontend/src/components/ExpectedAnonymous.tsx

@@ -2,7 +2,8 @@ import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
 import { urls } from '@/app/urls';
 import { useAuthSuspense } from '@/backend/auth/useAuth';
 import { useLogout } from '@/backend/auth/useLogout';
-import TextURL from '@/components/ui/TextURL';
+
+import { TextURL } from './ui/Control';
 
 function ExpectedAnonymous() {
   const { user } = useAuthSuspense();

rsconcept/frontend/src/components/RSInput/RSInput.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import { EditorView } from 'codemirror';
 import { forwardRef, useRef } from 'react';
 
-import Label from '@/components/ui/Label';
+import { Label } from '@/components/ui/Input';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
 import { generateAlias, getCstTypePrefix, guessCstType } from '@/models/rsformAPI';
 import { extractGlobals } from '@/models/rslangAPI';

rsconcept/frontend/src/components/RefsInput/RefsInput.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import { EditorView } from 'codemirror';
 import { forwardRef, useRef, useState } from 'react';
 
-import Label from '@/components/ui/Label';
+import { Label } from '@/components/ui/Input';
 import { ReferenceType } from '@/models/language';
 import { DialogType } from '@/models/miscellaneous';
 import { ConstituentaID, IRSForm } from '@/models/rsform';

rsconcept/frontend/src/components/RequireAuth.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useAuthSuspense } from '@/backend/auth/useAuth';
-import TextURL from '@/components/ui/TextURL';
+
+import { TextURL } from './ui/Control';
 
 function RequireAuth({ children }: React.PropsWithChildren) {
   const { isAnonymous } = useAuthSuspense();

rsconcept/frontend/src/components/info/BadgeHelp.tsx

@@ -2,9 +2,9 @@ import React, { Suspense } from 'react';
 
 import { IconHelp } from '@/components/Icons';
 import { CProps } from '@/components/props';
+import { PlacesType, Tooltip } from '@/components/ui/Container';
+import { TextURL } from '@/components/ui/Control';
 import Loader from '@/components/ui/Loader';
-import TextURL from '@/components/ui/TextURL';
-import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
 import { HelpTopic } from '@/models/miscellaneous';
 import { usePreferencesStore } from '@/stores/preferences';
 

rsconcept/frontend/src/components/info/InfoError.tsx

@@ -1,7 +1,7 @@
 import axios, { type AxiosError } from 'axios';
 import clsx from 'clsx';
 
-import PrettyJson from '@/components/ui/PrettyJSON';
+import { PrettyJson } from '@/components/ui/View';
 import { isResponseHtml } from '@/utils/utils';
 
 export type ErrorData = string | Error | AxiosError | undefined | null;

rsconcept/frontend/src/components/info/SelectedCounter.tsx

@@ -1,4 +1,4 @@
-import Overlay from '@/components/ui/Overlay';
+import { Overlay } from '@/components/ui/Container';
 
 interface SelectedCounterProps {
   totalCount: number;

rsconcept/frontend/src/components/info/TooltipOperation.tsx

@@ -3,8 +3,8 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
 import { IconPageRight } from '@/components/Icons';
+import { Tooltip } from '@/components/ui/Container';
 import DataTable from '@/components/ui/DataTable';
-import Tooltip from '@/components/ui/Tooltip';
 import { OssNodeInternal } from '@/models/miscellaneous';
 import { ICstSubstituteEx, OperationType } from '@/models/oss';
 import { labelOperationType } from '@/utils/labels';

rsconcept/frontend/src/components/select/MiniSelectorOSS.tsx

@@ -4,11 +4,9 @@ import clsx from 'clsx';
 
 import { IconOSS } from '@/components/Icons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { MiniButton } from '@/components/ui/Control';
-import DropdownButton from '@/components/ui/DropdownButton';
+import { Dropdown, DropdownButton, useDropdown } from '@/components/ui/Dropdown';
-import Label from '@/components/ui/Label';
+import { Label } from '@/components/ui/Input';
-import MiniButton from '@/components/ui/MiniButton';
-import useDropdown from '@/hooks/useDropdown';
 import { ILibraryItemReference } from '@/models/library';
 import { prefixes } from '@/utils/constants';
 

rsconcept/frontend/src/components/select/PickConstituenta.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react';
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
-import NoData from '@/components/ui/NoData';
+import { SearchBar } from '@/components/ui/SearchBar';
-import SearchBar from '@/components/ui/SearchBar';
+import { NoData } from '@/components/ui/View';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { IConstituenta } from '@/models/rsform';
 import { matchConstituenta } from '@/models/rsformAPI';

rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react';
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
 import DataTable, { createColumnHelper, RowSelectionState } from '@/components/ui/DataTable';
-import NoData from '@/components/ui/NoData';
+import { SearchBar } from '@/components/ui/SearchBar';
-import SearchBar from '@/components/ui/SearchBar';
+import { NoData } from '@/components/ui/View';
 import { Graph } from '@/models/Graph';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';

rsconcept/frontend/src/components/select/PickMultiOperation.tsx

@@ -6,9 +6,9 @@ import { useState } from 'react';
 import { IconMoveDown, IconMoveUp, IconRemove } from '@/components/Icons';
 import { CProps } from '@/components/props';
 import SelectOperation from '@/components/select/SelectOperation';
+import { MiniButton } from '@/components/ui/Control';
 import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
-import MiniButton from '@/components/ui/MiniButton';
+import { NoData } from '@/components/ui/View';
-import NoData from '@/components/ui/NoData';
 import { IOperation, OperationID } from '@/models/oss';
 
 interface PickMultiOperationProps extends CProps.Styling {

rsconcept/frontend/src/components/select/PickSchema.tsx

@@ -4,12 +4,11 @@ import { useIntl } from 'react-intl';
 
 import { IconClose, IconFolderTree } from '@/components/Icons';
 import { CProps } from '@/components/props';
+import { FlexColumn } from '@/components/ui/Container';
+import { MiniButton } from '@/components/ui/Control';
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
-import Dropdown from '@/components/ui/Dropdown';
+import { Dropdown, useDropdown } from '@/components/ui/Dropdown';
-import FlexColumn from '@/components/ui/FlexColumn';
+import { SearchBar } from '@/components/ui/SearchBar';
-import MiniButton from '@/components/ui/MiniButton';
-import SearchBar from '@/components/ui/SearchBar';
-import useDropdown from '@/hooks/useDropdown';
 import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/models/library';
 import { matchLibraryItem } from '@/models/libraryAPI';
 import { APP_COLORS } from '@/styling/color';

rsconcept/frontend/src/components/select/PickSubstitutions.tsx

@@ -8,9 +8,9 @@ import { IconAccept, IconPageLeft, IconPageRight, IconRemove, IconReplace } from
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
 import SelectConstituenta from '@/components/select/SelectConstituenta';
+import { MiniButton } from '@/components/ui/Control';
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
-import MiniButton from '@/components/ui/MiniButton';
+import { NoData } from '@/components/ui/View';
-import NoData from '@/components/ui/NoData';
 import { ILibraryItem } from '@/models/library';
 import { ICstSubstitute, IMultiSubstitution } from '@/models/oss';
 import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';

rsconcept/frontend/src/components/select/SelectAccessPolicy.tsx

@@ -2,10 +2,8 @@
 
 import { PolicyIcon } from '@/components/DomainIcons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { MiniButton } from '@/components/ui/Control';
-import DropdownButton from '@/components/ui/DropdownButton';
+import { Dropdown, DropdownButton, useDropdown } from '@/components/ui/Dropdown';
-import MiniButton from '@/components/ui/MiniButton';
-import useDropdown from '@/hooks/useDropdown';
 import { AccessPolicy } from '@/models/library';
 import { prefixes } from '@/utils/constants';
 import { describeAccessPolicy, labelAccessPolicy } from '@/utils/labels';

rsconcept/frontend/src/components/select/SelectConstituenta.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
-import SelectSingle from '@/components/ui/SelectSingle';
+import { SelectSingle } from '@/components/ui/Input';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
 import { matchConstituenta } from '@/models/rsformAPI';

rsconcept/frontend/src/components/select/SelectGraphFilter.tsx

@@ -2,10 +2,8 @@
 
 import { DependencyIcon } from '@/components/DomainIcons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { SelectorButton } from '@/components/ui/Control';
-import DropdownButton from '@/components/ui/DropdownButton';
+import { Dropdown, DropdownButton, useDropdown } from '@/components/ui/Dropdown';
-import SelectorButton from '@/components/ui/SelectorButton';
-import useDropdown from '@/hooks/useDropdown';
 import useWindowSize from '@/hooks/useWindowSize';
 import { DependencyMode } from '@/models/miscellaneous';
 import { prefixes } from '@/utils/constants';

rsconcept/frontend/src/components/select/SelectItemType.tsx

@@ -2,10 +2,8 @@
 
 import { ItemTypeIcon } from '@/components/DomainIcons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { SelectorButton } from '@/components/ui/Control';
-import DropdownButton from '@/components/ui/DropdownButton';
+import { Dropdown, DropdownButton, useDropdown } from '@/components/ui/Dropdown';
-import SelectorButton from '@/components/ui/SelectorButton';
-import useDropdown from '@/hooks/useDropdown';
 import { LibraryItemType } from '@/models/library';
 import { prefixes } from '@/utils/constants';
 import { describeLibraryItemType, labelLibraryItemType } from '@/utils/labels';

rsconcept/frontend/src/components/select/SelectLibraryItem.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
-import SelectSingle from '@/components/ui/SelectSingle';
+import { SelectSingle } from '@/components/ui/Input';
 import { ILibraryItem, LibraryItemID } from '@/models/library';
 import { matchLibraryItem } from '@/models/libraryAPI';
 

rsconcept/frontend/src/components/select/SelectLocation.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import { useFolders } from '@/backend/library/useFolders';
 import { IconFolder, IconFolderClosed, IconFolderEmpty, IconFolderOpened } from '@/components/Icons';
 import { CProps } from '@/components/props';
-import MiniButton from '@/components/ui/MiniButton';
+import { MiniButton } from '@/components/ui/Control';
 import { FolderNode } from '@/models/FolderTree';
 import { labelFolderNode } from '@/utils/labels';
 

rsconcept/frontend/src/components/select/SelectLocationContext.tsx

@@ -4,9 +4,8 @@ import clsx from 'clsx';
 
 import { IconFolderTree } from '@/components/Icons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { MiniButton } from '@/components/ui/Control';
-import MiniButton from '@/components/ui/MiniButton';
+import { Dropdown, useDropdown } from '@/components/ui/Dropdown';
-import useDropdown from '@/hooks/useDropdown';
 import { prefixes } from '@/utils/constants';
 
 import SelectLocation from './SelectLocation';

rsconcept/frontend/src/components/select/SelectLocationHead.tsx

@@ -4,10 +4,8 @@ import clsx from 'clsx';
 
 import { LocationIcon } from '@/components/DomainIcons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { SelectorButton } from '@/components/ui/Control';
-import DropdownButton from '@/components/ui/DropdownButton';
+import { Dropdown, DropdownButton, useDropdown } from '@/components/ui/Dropdown';
-import SelectorButton from '@/components/ui/SelectorButton';
-import useDropdown from '@/hooks/useDropdown';
 import { LocationHead } from '@/models/library';
 import { prefixes } from '@/utils/constants';
 import { describeLocationHead, labelLocationHead } from '@/utils/labels';

rsconcept/frontend/src/components/select/SelectMatchMode.tsx

@@ -2,10 +2,8 @@
 
 import { MatchModeIcon } from '@/components/DomainIcons';
 import { CProps } from '@/components/props';
-import Dropdown from '@/components/ui/Dropdown';
+import { SelectorButton } from '@/components/ui/Control';
-import DropdownButton from '@/components/ui/DropdownButton';
+import { Dropdown, DropdownButton, useDropdown } from '@/components/ui/Dropdown';
-import SelectorButton from '@/components/ui/SelectorButton';
-import useDropdown from '@/hooks/useDropdown';
 import useWindowSize from '@/hooks/useWindowSize';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { prefixes } from '@/utils/constants';

rsconcept/frontend/src/components/select/SelectMultiGrammeme.tsx

@@ -1,5 +1,5 @@
 import { CProps } from '@/components/props';
-import SelectMulti, { SelectMultiProps } from '@/components/ui/SelectMulti';
+import { SelectMulti, SelectMultiProps } from '@/components/ui/Input';
 import { Grammeme } from '@/models/language';
 import { getCompatibleGrams } from '@/models/languageAPI';
 import { compareGrammemeOptions, IGrammemeOption, SelectorGrammemes } from '@/utils/selectors';

rsconcept/frontend/src/components/select/SelectOperation.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
-import SelectSingle from '@/components/ui/SelectSingle';
+import { SelectSingle } from '@/components/ui/Input';
 import { IOperation, OperationID } from '@/models/oss';
 import { matchOperation } from '@/models/ossAPI';
 

rsconcept/frontend/src/components/select/SelectUser.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useLabelUser } from '@/backend/users/useLabelUser';
 import { useUsers } from '@/backend/users/useUsers';
 import { CProps } from '@/components/props';
-import SelectSingle from '@/components/ui/SelectSingle';
+import { SelectSingle } from '@/components/ui/Input';
 import { UserID } from '@/models/user';
 import { matchUser } from '@/models/userAPI';
 

rsconcept/frontend/src/components/select/SelectVersion.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
-import SelectSingle from '@/components/ui/SelectSingle';
+import { SelectSingle } from '@/components/ui/Input';
 import { IVersionInfo, VersionID } from '@/models/library';
 import { labelVersion } from '@/utils/labels';
 

rsconcept/frontend/src/components/select/ToolbarGraphSelection.tsx

@@ -12,7 +12,7 @@ import {
   IconReset
 } from '@/components/Icons';
 import { CProps } from '@/components/props';
-import MiniButton from '@/components/ui/MiniButton';
+import { MiniButton } from '@/components/ui/Control';
 import { Graph } from '@/models/Graph';
 
 interface ToolbarGraphSelectionProps extends CProps.Styling {

rsconcept/frontend/src/components/ui/Container/Divider.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
 
-export interface DividerProps extends CProps.Styling {
+interface DividerProps extends CProps.Styling {
   /** Indicates whether the divider is vertical. */
   vertical?: boolean;
 
@@ -13,7 +13,7 @@ export interface DividerProps extends CProps.Styling {
 /**
  * Horizontal or vertical divider with customizable margins and styling.
  */
-function Divider({ vertical, margins = 'mx-2', className, ...restProps }: DividerProps) {
+export function Divider({ vertical, margins = 'mx-2', className, ...restProps }: DividerProps) {
   return (
     <div
       className={clsx(
@@ -28,5 +28,3 @@ function Divider({ vertical, margins = 'mx-2', className, ...restProps }: Divide
     />
   );
 }
-
-export default Divider;

rsconcept/frontend/src/components/ui/Container/FlexColumn.tsx

@@ -6,12 +6,10 @@ import { CProps } from '@/components/props';
  * `flex` column container.
  * This component is useful for creating vertical layouts with flexbox.
  */
-function FlexColumn({ className, children, ...restProps }: CProps.Div) {
+export function FlexColumn({ className, children, ...restProps }: CProps.Div) {
   return (
     <div className={clsx('cc-column', className)} {...restProps}>
       {children}
     </div>
   );
 }
-
-export default FlexColumn;

rsconcept/frontend/src/components/ui/Container/Overlay.tsx

@@ -16,7 +16,7 @@ interface OverlayProps extends CProps.Styling {
 /**
  * Displays a transparent overlay over the main content.
  */
-function Overlay({
+export function Overlay({
   children,
   className,
   position = 'top-0 right-0',
@@ -31,5 +31,3 @@ function Overlay({
     </div>
   );
 }
-
-export default Overlay;

rsconcept/frontend/src/components/ui/Container/Tooltip.tsx

@@ -20,7 +20,7 @@ interface TooltipProps extends Omit<ITooltip, 'variant'> {
 /**
  * Displays content in a tooltip container.
  */
-function Tooltip({
+export function Tooltip({
   text,
   children,
   layer = 'z-tooltip',
@@ -58,5 +58,3 @@ function Tooltip({
     document.body
   );
 }
-
-export default Tooltip;

rsconcept/frontend/src/components/ui/Container/index.tsx

@@ -0,0 +1,4 @@
+export { Divider } from './Divider';
+export { FlexColumn } from './FlexColumn';
+export { Overlay } from './Overlay';
+export { type PlacesType, Tooltip } from './Tooltip';

rsconcept/frontend/src/components/ui/Control/Button.tsx

@@ -20,7 +20,7 @@ interface ButtonProps extends CProps.Control, CProps.Colors, CProps.Button {
 /**
  * Customizable `button` with text, icon, tooltips and various styles.
  */
-function Button({
+export function Button({
   icon,
   text,
   title,
@@ -66,5 +66,3 @@ function Button({
     </button>
   );
 }
-
-export default Button;

rsconcept/frontend/src/components/ui/Control/LinkTopic.tsx

@@ -1,7 +1,7 @@
 import { urls } from '@/app/urls';
 import { HelpTopic } from '@/models/miscellaneous';
 
-import TextURL from './TextURL';
+import { TextURL } from './TextURL';
 
 interface TextURLProps {
   /** Text to display. */
@@ -13,8 +13,6 @@ interface TextURLProps {
 /**
  * Displays a link to a help topic.
  */
-function LinkTopic({ text, topic }: TextURLProps) {
+export function LinkTopic({ text, topic }: TextURLProps) {
   return <TextURL text={text} href={urls.help_topic(topic)} />;
 }
-
-export default LinkTopic;

rsconcept/frontend/src/components/ui/Control/MiniButton.tsx

@@ -17,7 +17,7 @@ interface MiniButtonProps extends CProps.Button {
 /**
  * Displays small transparent button with an icon.
  */
-function MiniButton({
+export function MiniButton({
   icon,
   noHover,
   noPadding,
@@ -53,5 +53,3 @@ function MiniButton({
     </button>
   );
 }
-
-export default MiniButton;

rsconcept/frontend/src/components/ui/Control/SelectorButton.tsx

@@ -20,7 +20,7 @@ interface SelectorButtonProps extends CProps.Button {
 /**
  * Displays a button with an icon and text that opens a dropdown menu.
  */
-function SelectorButton({
+export function SelectorButton({
   text,
   icon,
   title,
@@ -59,5 +59,3 @@ function SelectorButton({
     </button>
   );
 }
-
-export default SelectorButton;

rsconcept/frontend/src/components/ui/Control/SubmitButton.tsx

@@ -16,7 +16,7 @@ interface SubmitButtonProps extends CProps.Button {
 /**
  * Displays submit type button with icon and text.
  */
-function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...restProps }: SubmitButtonProps) {
+export function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...restProps }: SubmitButtonProps) {
   return (
     <button
       type='submit'
@@ -37,5 +37,3 @@ function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...re
     </button>
   );
 }
-
-export default SubmitButton;

rsconcept/frontend/src/components/ui/Control/TextURL.tsx

@@ -20,7 +20,7 @@ interface TextURLProps {
 /**
  * Displays a text with a clickable link.
  */
-function TextURL({ text, href, title, color = 'text-sec-600', onClick }: TextURLProps) {
+export function TextURL({ text, href, title, color = 'text-sec-600', onClick }: TextURLProps) {
   const design = `cursor-pointer hover:underline ${color}`;
   if (href) {
     return (
@@ -39,4 +39,3 @@ function TextURL({ text, href, title, color = 'text-sec-600', onClick }: TextURL
   }
 }
 
-export default TextURL;

rsconcept/frontend/src/components/ui/Control/index.tsx

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export { LinkTopic } from './LinkTopic';
+export { MiniButton } from './MiniButton';
+export { SelectorButton } from './SelectorButton';
+export { SubmitButton } from './SubmitButton';
+export { TextURL } from './TextURL';

rsconcept/frontend/src/components/ui/DataTable/SelectAll.tsx

@@ -2,7 +2,7 @@
 
 import { Table } from '@tanstack/react-table';
 
-import CheckboxTristate from '@/components/ui/CheckboxTristate';
+import { CheckboxTristate } from '@/components/ui/Input';
 
 interface SelectAllProps<TData> {
   table: Table<TData>;

rsconcept/frontend/src/components/ui/DataTable/SelectRow.tsx

@@ -2,7 +2,7 @@
 
 import { Row } from '@tanstack/react-table';
 
-import Checkbox from '@/components/ui/Checkbox';
+import { Checkbox } from '@/components/ui/Input';
 
 interface SelectRowProps<TData> {
   row: Row<TData>;

rsconcept/frontend/src/components/ui/Dropdown/Dropdown.tsx

@@ -17,7 +17,7 @@ interface DropdownProps extends CProps.Styling {
 /**
  *  Animated list of children with optional positioning and visibility control.
  */
-function Dropdown({
+export function Dropdown({
   isOpen,
   stretchLeft,
   stretchTop,
@@ -59,5 +59,3 @@ function Dropdown({
     </div>
   );
 }
-
-export default Dropdown;

rsconcept/frontend/src/components/ui/Dropdown/DropdownButton.tsx

@@ -18,7 +18,7 @@ interface DropdownButtonProps extends CProps.Button {
  * `button` with optional text, icon, and click functionality styled for use in a {@link Dropdown}.
  * It supports optional children for custom content or the default text/icon display.
  */
-function DropdownButton({
+export function DropdownButton({
   icon,
   text,
   className,
@@ -58,5 +58,3 @@ function DropdownButton({
     </button>
   );
 }
-
-export default DropdownButton;

rsconcept/frontend/src/components/ui/Dropdown/DropdownCheckbox.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 
-import Checkbox, { CheckboxProps } from './Checkbox';
+import { Checkbox, CheckboxProps } from '../Input';
 
 /** Animated {@link Checkbox} inside a {@link Dropdown} item. */
-function DropdownCheckbox({ onChange: setValue, disabled, ...restProps }: CheckboxProps) {
+export function DropdownCheckbox({ onChange: setValue, disabled, ...restProps }: CheckboxProps) {
   return (
     <div
       className={clsx(
@@ -17,5 +17,3 @@ function DropdownCheckbox({ onChange: setValue, disabled, ...restProps }: Checkb
     </div>
   );
 }
-
-export default DropdownCheckbox;

rsconcept/frontend/src/components/ui/Dropdown/index.tsx

@@ -0,0 +1,4 @@
+export { Dropdown } from './Dropdown';
+export { DropdownButton } from './DropdownButton';
+export { DropdownCheckbox } from './DropdownCheckbox';
+export { useDropdown } from './useDropdown';

rsconcept/frontend/src/components/ui/Dropdown/useDropdown.ts

@@ -2,9 +2,9 @@
 
 import { useRef, useState } from 'react';
 
-import useClickedOutside from './useClickedOutside';
+import useClickedOutside from '@/hooks/useClickedOutside';
 
-function useDropdown() {
+export function useDropdown() {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef(null);
 
@@ -18,5 +18,3 @@ function useDropdown() {
     hide: () => setIsOpen(false)
   };
 }
-
-export default useDropdown;

rsconcept/frontend/src/components/ui/Input/Checkbox.tsx

@@ -21,7 +21,7 @@ export interface CheckboxProps extends Omit<CProps.Button, 'value' | 'onClick' |
 /**
  * Component that allows toggling a boolean value.
  */
-function Checkbox({
+export function Checkbox({
   disabled,
   label,
   title,
@@ -79,5 +79,3 @@ function Checkbox({
     </button>
   );
 }
-
-export default Checkbox;

rsconcept/frontend/src/components/ui/Input/CheckboxTristate.tsx

@@ -17,7 +17,7 @@ export interface CheckboxTristateProps extends Omit<CheckboxProps, 'value' | 'on
 /**
  * Component that allows toggling among three states: `true`, `false`, and `null`.
  */
-function CheckboxTristate({
+export function CheckboxTristate({
   disabled,
   label,
   title,
@@ -82,5 +82,3 @@ function CheckboxTristate({
     </button>
   );
 }
-
-export default CheckboxTristate;

rsconcept/frontend/src/components/ui/Input/ErrorField.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { FieldError, GlobalError } from 'react-hook-form';
 
-import { CProps } from '../props';
+import { CProps } from '@/components/props';
 
 interface ErrorFieldProps extends CProps.Styling {
   error?: FieldError | GlobalError;
@@ -10,7 +10,7 @@ interface ErrorFieldProps extends CProps.Styling {
 /**
  * Displays an error message for input field.
  */
-function ErrorField({ error, className, ...restProps }: ErrorFieldProps): React.ReactElement | null {
+export function ErrorField({ error, className, ...restProps }: ErrorFieldProps): React.ReactElement | null {
   if (!error) {
     return null;
   }
@@ -20,5 +20,3 @@ function ErrorField({ error, className, ...restProps }: ErrorFieldProps): React.
     </div>
   );
 }
-
-export default ErrorField;

rsconcept/frontend/src/components/ui/Input/FileInput.tsx

@@ -6,8 +6,8 @@ import { useRef, useState } from 'react';
 import { IconUpload } from '@/components/Icons';
 import { CProps } from '@/components/props';
 
-import Button from './Button';
+import { Button } from '../Control';
-import Label from './Label';
+import { Label } from './Label';
 
 interface FileInputProps extends Omit<CProps.Input, 'accept' | 'type'> {
   /** Label to display in file upload button. */
@@ -23,7 +23,7 @@ interface FileInputProps extends Omit<CProps.Input, 'accept' | 'type'> {
 /**
  * FileInput is a component for selecting a `file`, displaying the selected file name.
  */
-function FileInput({ id, label, acceptType, title, className, style, onChange, ...restProps }: FileInputProps) {
+export function FileInput({ id, label, acceptType, title, className, style, onChange, ...restProps }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [fileName, setFileName] = useState('');
 
@@ -56,5 +56,3 @@ function FileInput({ id, label, acceptType, title, className, style, onChange, .
     </div>
   );
 }
-
-export default FileInput;

rsconcept/frontend/src/components/ui/Input/Label.tsx

@@ -12,7 +12,7 @@ interface LabelProps extends CProps.Label {
  *
  * Note: Html label component is used only if `htmlFor` prop is set.
  */
-function Label({ text, className, ...restProps }: LabelProps) {
+export function Label({ text, className, ...restProps }: LabelProps) {
   if (!text) {
     return null;
   }
@@ -30,5 +30,3 @@ function Label({ text, className, ...restProps }: LabelProps) {
     );
   }
 }
-
-export default Label;

rsconcept/frontend/src/components/ui/Input/SelectMulti.tsx

@@ -45,7 +45,7 @@ export interface SelectMultiProps<Option, Group extends GroupBase<Option> = Grou
 /**
  * Displays a multi-select component.
  */
-function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>>({
+export function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>>({
   noPortal,
   ...restProps
 }: SelectMultiProps<Option, Group>) {
@@ -125,5 +125,3 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
     />
   );
 }
-
-export default SelectMulti;

rsconcept/frontend/src/components/ui/Input/SelectSingle.tsx

@@ -46,7 +46,7 @@ export interface SelectSingleProps<Option, Group extends GroupBase<Option> = Gro
 /**
  * Displays a single-select component.
  */
-function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option>>({
+export function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option>>({
   noPortal,
   noBorder,
   ...restProps
@@ -123,5 +123,3 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
     />
   );
 }
-
-export default SelectSingle;

rsconcept/frontend/src/components/ui/Input/SelectTree.tsx

@@ -5,8 +5,8 @@ import { IconDropArrow, IconPageRight } from '@/components/Icons';
 import { CProps } from '@/components/props';
 import { globals, PARAMETER } from '@/utils/constants';
 
-import MiniButton from './MiniButton';
+import { Overlay } from '../Container';
-import Overlay from './Overlay';
+import { MiniButton } from '../Control';
 
 interface SelectTreeProps<ItemType> extends CProps.Styling {
   /** Current value. */
@@ -34,7 +34,7 @@ interface SelectTreeProps<ItemType> extends CProps.Styling {
 /**
  * Displays a tree of items and allows user to select one.
  */
-function SelectTree<ItemType>({
+export function SelectTree<ItemType>({
   items,
   value,
   getParent,
@@ -123,5 +123,3 @@ function SelectTree<ItemType>({
     </div>
   );
 }
-
-export default SelectTree;

rsconcept/frontend/src/components/ui/Input/TextArea.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
+import { Label } from '@/components/ui/Input/Label';
 
-import ErrorField from './ErrorField';
+import { ErrorField } from './ErrorField';
-import Label from './Label';
 
 export interface TextAreaProps extends CProps.Editor, CProps.ErrorProcessing, CProps.Colors, CProps.TextArea {
   /** Indicates that padding should be minimal. */
@@ -19,7 +19,7 @@ export interface TextAreaProps extends CProps.Editor, CProps.ErrorProcessing, CP
 /**
  * Displays a customizable textarea with a label.
  */
-function TextArea({
+export function TextArea({
   id,
   label,
   required,
@@ -71,5 +71,3 @@ function TextArea({
     </div>
   );
 }
-
-export default TextArea;

rsconcept/frontend/src/components/ui/Input/TextInput.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
+import { Label } from '@/components/ui/Input/Label';
 
-import ErrorField from './ErrorField';
+import { ErrorField } from './ErrorField';
-import Label from './Label';
 
 interface TextInputProps extends CProps.Editor, CProps.ErrorProcessing, CProps.Colors, CProps.Input {
   /** Indicates that padding should be minimal. */
@@ -22,7 +22,7 @@ function preventEnterCapture(event: React.KeyboardEvent<HTMLInputElement>) {
 /**
  * Displays a customizable input with a label.
  */
-function TextInput({
+export function TextInput({
   id,
   label,
   dense,
@@ -70,5 +70,3 @@ function TextInput({
     </div>
   );
 }
-
-export default TextInput;

rsconcept/frontend/src/components/ui/Input/index.tsx

@@ -0,0 +1,10 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';
+export { CheckboxTristate } from './CheckboxTristate';
+export { ErrorField } from './ErrorField';
+export { FileInput } from './FileInput';
+export { Label } from './Label';
+export { SelectMulti, type SelectMultiProps } from './SelectMulti';
+export { SelectSingle, type SelectSingleProps } from './SelectSingle';
+export { SelectTree } from './SelectTree';
+export { TextArea } from './TextArea';
+export { TextInput } from './TextInput';

rsconcept/frontend/src/components/ui/Modal/ModalForm.tsx

@@ -5,15 +5,13 @@ import clsx from 'clsx';
 import { IconClose } from '@/components/Icons';
 import BadgeHelp from '@/components/info/BadgeHelp';
 import { CProps } from '@/components/props';
-import Button from '@/components/ui/Button';
-import MiniButton from '@/components/ui/MiniButton';
 import useEscapeKey from '@/hooks/useEscapeKey';
 import { HelpTopic } from '@/models/miscellaneous';
 import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/labels';
 
-import SubmitButton from '../SubmitButton';
+import { Button, MiniButton, SubmitButton } from '../Control';
 import { ModalBackdrop } from './ModalBackdrop';
 
 export interface ModalProps extends CProps.Styling {

rsconcept/frontend/src/components/ui/Modal/ModalView.tsx

@@ -4,13 +4,12 @@ import clsx from 'clsx';
 
 import { IconClose } from '@/components/Icons';
 import BadgeHelp from '@/components/info/BadgeHelp';
-import Button from '@/components/ui/Button';
-import MiniButton from '@/components/ui/MiniButton';
 import useEscapeKey from '@/hooks/useEscapeKey';
 import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/labels';
 
+import { Button, MiniButton } from '../Control';
 import { ModalBackdrop } from './ModalBackdrop';
 import { ModalProps } from './ModalForm';
 

rsconcept/frontend/src/components/ui/PDFViewer/index.tsx

@@ -1 +0,0 @@
-export { default } from './PDFViewer';

rsconcept/frontend/src/components/ui/SearchBar.tsx

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { IconSearch } from '@/components/Icons';
 import { CProps } from '@/components/props';
 
-import Overlay from './Overlay';
+import { Overlay } from './Container';
-import TextInput from './TextInput';
+import { TextInput } from './Input';
 
 interface SearchBarProps extends CProps.Styling {
   /** Id of the search bar. */
@@ -29,7 +29,7 @@ interface SearchBarProps extends CProps.Styling {
 /**
  * Displays a search bar with a search icon and text input.
  */
-function SearchBar({
+export function SearchBar({
   id,
   query,
   noIcon,
@@ -58,5 +58,3 @@ function SearchBar({
     </div>
   );
 }
-
-export default SearchBar;

rsconcept/frontend/src/components/ui/Tabs/TabLabel.tsx

@@ -13,7 +13,7 @@ interface TabLabelProps extends Omit<TabPropsImpl, 'children'>, CProps.Titled {
 /**
  * Displays a tab header with a label.
  */
-function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps }: TabLabelProps) {
+export function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps }: TabLabelProps) {
   return (
     <TabImpl
       className={clsx(
@@ -38,5 +38,3 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
 }
 
 TabLabel.tabsRole = 'Tab';
-
-export default TabLabel;

rsconcept/frontend/src/components/ui/Tabs/index.tsx

@@ -0,0 +1,2 @@
+export { TabLabel } from './TabLabel';
+export { TabList, TabPanel, Tabs } from 'react-tabs';

rsconcept/frontend/src/components/ui/View/EmbedYoutube.tsx

@@ -12,7 +12,7 @@ interface EmbedYoutubeProps {
 /**
  * Embeds a YouTube video into the page using the given video ID and dimensions.
  */
-function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) {
+export function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) {
   if (!pxWidth) {
     pxWidth = (pxHeight * 16) / 9;
   }
@@ -41,5 +41,3 @@ function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) {
     </div>
   );
 }
-
-export default EmbedYoutube;

rsconcept/frontend/src/components/ui/View/Indicator.tsx

@@ -14,7 +14,7 @@ interface IndicatorProps extends CProps.Titled, CProps.Styling {
 /**
  * Displays a status `icon` with a tooltip.
  */
-function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ...restProps }: IndicatorProps) {
+export function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ...restProps }: IndicatorProps) {
   return (
     <div
       className={clsx(
@@ -35,5 +35,3 @@ function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ..
     </div>
   );
 }
-
-export default Indicator;

rsconcept/frontend/src/components/ui/View/NoData.tsx

@@ -5,12 +5,10 @@ import { CProps } from '@/components/props';
 /**
  * Wraps content in a div with a centered text.
  */
-function NoData({ className, children, ...restProps }: CProps.Div) {
+export function NoData({ className, children, ...restProps }: CProps.Div) {
   return (
     <div className={clsx('p-3 flex flex-col items-center text-center select-none w-full', className)} {...restProps}>
       {children}
     </div>
   );
 }
-
-export default NoData;

rsconcept/frontend/src/components/ui/View/PDFViewer.tsx

@@ -23,7 +23,7 @@ interface PDFViewerProps {
 /**
  * Displays a PDF file using an embedded viewer.
  */
-function PDFViewer({ file, offsetXpx, minWidth = MINIMUM_WIDTH }: PDFViewerProps) {
+export function PDFViewer({ file, offsetXpx, minWidth = MINIMUM_WIDTH }: PDFViewerProps) {
   const windowSize = useWindowSize();
 
   const pageWidth = Math.max(minWidth, Math.min((windowSize?.width ?? 0) - (offsetXpx ?? 0) - 10, MAXIMUM_WIDTH));
@@ -31,5 +31,3 @@ function PDFViewer({ file, offsetXpx, minWidth = MINIMUM_WIDTH }: PDFViewerProps
 
   return <embed src={`${file}#toolbar=0`} className='p-3' style={{ width: pageWidth, height: pageHeight }} />;
 }
-
-export default PDFViewer;

rsconcept/frontend/src/components/ui/View/PrettyJSON.tsx

@@ -5,9 +5,7 @@ interface PrettyJsonProps {
 /**
  * Displays JSON data in a formatted string.
  */
-function PrettyJson({ data }: PrettyJsonProps) {
+export function PrettyJson({ data }: PrettyJsonProps) {
   const text = JSON.stringify(data, null, 2);
   return <pre>{text === '{}' ? '' : text}</pre>;
 }
-
-export default PrettyJson;

rsconcept/frontend/src/components/ui/View/TextContent.tsx

@@ -18,7 +18,7 @@ export interface TextContentProps extends CProps.Styling {
 /**
  * Displays text limited to a certain number of symbols.
  */
-function TextContent({ className, text, maxLength, noTooltip, ...restProps }: TextContentProps) {
+export function TextContent({ className, text, maxLength, noTooltip, ...restProps }: TextContentProps) {
   const truncated = maxLength ? truncateToLastWord(text, maxLength) : text;
   const isTruncated = maxLength && text.length > maxLength;
   return (
@@ -32,5 +32,3 @@ function TextContent({ className, text, maxLength, noTooltip, ...restProps }: Te
     </div>
   );
 }
-
-export default TextContent;

rsconcept/frontend/src/components/ui/View/ValueIcon.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { CProps } from '@/components/props';
 import { globals } from '@/utils/constants';
 
-import MiniButton from './MiniButton';
+import { MiniButton } from '../Control';
 
 interface ValueIconProps extends CProps.Styling, CProps.Titled {
   /** Id of the component. */
@@ -34,7 +34,7 @@ interface ValueIconProps extends CProps.Styling, CProps.Titled {
 /**
  * Displays a value with an icon that can be clicked.
  */
-function ValueIcon({
+export function ValueIcon({
   id,
   dense,
   icon,
@@ -73,5 +73,3 @@ function ValueIcon({
     </div>
   );
 }
-
-export default ValueIcon;

rsconcept/frontend/src/components/ui/View/ValueLabeled.tsx

@@ -19,7 +19,7 @@ interface ValueLabeledProps extends CProps.Styling {
 /**
  * Displays a labeled value.
  */
-function ValueLabeled({ id, label, text, title, className, ...restProps }: ValueLabeledProps) {
+export function ValueLabeled({ id, label, text, title, className, ...restProps }: ValueLabeledProps) {
   return (
     <div className={clsx('flex justify-between gap-6', className)} {...restProps}>
       <span title={title}>{label}</span>
@@ -27,5 +27,3 @@ function ValueLabeled({ id, label, text, title, className, ...restProps }: Value
     </div>
   );
 }
-
-export default ValueLabeled;

rsconcept/frontend/src/components/ui/View/ValueStats.tsx

@@ -1,7 +1,7 @@
 import { CProps } from '@/components/props';
 import { PARAMETER } from '@/utils/constants';
 
-import ValueIcon from './ValueIcon';
+import { ValueIcon } from './ValueIcon';
 
 interface ValueStatsProps extends CProps.Styling, CProps.Titled {
   /** Id of the component. */
@@ -17,8 +17,6 @@ interface ValueStatsProps extends CProps.Styling, CProps.Titled {
 /**
  * Displays statistics value with an icon.
  */
-function ValueStats(props: ValueStatsProps) {
+export function ValueStats(props: ValueStatsProps) {
   return <ValueIcon dense smallThreshold={PARAMETER.statSmallThreshold} textClassName='min-w-[1.4rem]' {...props} />;
 }
-
-export default ValueStats;

rsconcept/frontend/src/components/ui/View/index.tsx

@@ -0,0 +1,9 @@
+export { EmbedYoutube } from './EmbedYoutube';
+export { Indicator } from './Indicator';
+export { NoData } from './NoData';
+export { PDFViewer } from './PDFViewer';
+export { PrettyJson } from './PrettyJSON';
+export { TextContent } from './TextContent';
+export { ValueIcon } from './ValueIcon';
+export { ValueLabeled } from './ValueLabeled';
+export { ValueStats } from './ValueStats';

rsconcept/frontend/src/dialogs/DlgChangeInputSchema.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react';
 import { useLibrary } from '@/backend/library/useLibrary';
 import { IconReset } from '@/components/Icons';
 import PickSchema from '@/components/select/PickSchema';
-import Label from '@/components/ui/Label';
+import { MiniButton } from '@/components/ui/Control';
-import MiniButton from '@/components/ui/MiniButton';
+import { Label } from '@/components/ui/Input';
 import { ModalForm } from '@/components/ui/Modal';
 import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/models/library';
 import { IOperation, IOperationSchema, OperationID } from '@/models/oss';

rsconcept/frontend/src/dialogs/DlgChangeLocation.tsx

@@ -6,9 +6,8 @@ import { useState } from 'react';
 import { useAuthSuspense } from '@/backend/auth/useAuth';
 import SelectLocationContext from '@/components/select/SelectLocationContext';
 import SelectLocationHead from '@/components/select/SelectLocationHead';
-import Label from '@/components/ui/Label';
+import { Label, TextArea } from '@/components/ui/Input';
 import { ModalForm } from '@/components/ui/Modal';
-import TextArea from '@/components/ui/TextArea';
 import { LocationHead } from '@/models/library';
 import { combineLocation, validateLocation } from '@/models/libraryAPI';
 import { useDialogsStore } from '@/stores/dialogs';

rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx

@@ -12,12 +12,9 @@ import { VisibilityIcon } from '@/components/DomainIcons';
 import SelectAccessPolicy from '@/components/select/SelectAccessPolicy';
 import SelectLocationContext from '@/components/select/SelectLocationContext';
 import SelectLocationHead from '@/components/select/SelectLocationHead';
-import Checkbox from '@/components/ui/Checkbox';
+import { MiniButton } from '@/components/ui/Control';
-import Label from '@/components/ui/Label';
+import { Checkbox, Label, TextArea, TextInput } from '@/components/ui/Input';
-import MiniButton from '@/components/ui/MiniButton';
 import { ModalForm } from '@/components/ui/Modal';
-import TextArea from '@/components/ui/TextArea';
-import TextInput from '@/components/ui/TextInput';
 import { AccessPolicy, ILibraryItem, LocationHead } from '@/models/library';
 import { cloneTitle, combineLocation, validateLocation } from '@/models/libraryAPI';
 import { ConstituentaID } from '@/models/rsform';

rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx

@@ -6,9 +6,7 @@ import { useEffect, useState } from 'react';
 import { ICstCreateDTO } from '@/backend/rsform/api';
 import BadgeHelp from '@/components/info/BadgeHelp';
 import RSInput from '@/components/RSInput';
-import SelectSingle from '@/components/ui/SelectSingle';
+import { SelectSingle, TextArea, TextInput } from '@/components/ui/Input';
-import TextArea from '@/components/ui/TextArea';
-import TextInput from '@/components/ui/TextInput';
 import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, IRSForm } from '@/models/rsform';
 import { generateAlias, isBaseSet, isBasicConcept, isFunctional, validateNewAlias } from '@/models/rsformAPI';

rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx

@@ -2,12 +2,11 @@
 
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
-import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import { useLibrary } from '@/backend/library/useLibrary';
 import { IOperationCreateDTO } from '@/backend/oss/api';
 import { ModalForm } from '@/components/ui/Modal';
-import TabLabel from '@/components/ui/TabLabel';
+import { TabLabel, TabList, TabPanel, Tabs } from '@/components/ui/Tabs';
 import { LibraryItemID } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IOperationSchema, OperationID, OperationType } from '@/models/oss';

rsconcept/frontend/src/dialogs/DlgCreateOperation/TabInputOperation.tsx

@@ -5,11 +5,8 @@ import { useEffect } from 'react';
 import { useLibrary } from '@/backend/library/useLibrary';
 import { IconReset } from '@/components/Icons';
 import PickSchema from '@/components/select/PickSchema';
-import Checkbox from '@/components/ui/Checkbox';
+import { MiniButton } from '@/components/ui/Control';
-import Label from '@/components/ui/Label';
+import { Checkbox, Label, TextArea, TextInput } from '@/components/ui/Input';
-import MiniButton from '@/components/ui/MiniButton';
-import TextArea from '@/components/ui/TextArea';
-import TextInput from '@/components/ui/TextInput';
 import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/models/library';
 import { IOperationSchema } from '@/models/oss';
 import { sortItemsForOSS } from '@/models/ossAPI';

rsconcept/frontend/src/dialogs/DlgCreateOperation/TabSynthesisOperation.tsx

@@ -1,8 +1,6 @@
 import PickMultiOperation from '@/components/select/PickMultiOperation';
-import FlexColumn from '@/components/ui/FlexColumn';
+import { FlexColumn } from '@/components/ui/Container';
-import Label from '@/components/ui/Label';
+import { Label, TextArea, TextInput } from '@/components/ui/Input';
-import TextArea from '@/components/ui/TextArea';
-import TextInput from '@/components/ui/TextInput';
 import { IOperationSchema, OperationID } from '@/models/oss';
 
 interface TabSynthesisOperationProps {

rsconcept/frontend/src/dialogs/DlgCreateVersion.tsx

@@ -6,10 +6,8 @@ import { Controller, useForm, useWatch } from 'react-hook-form';
 
 import { CreateVersionSchema, IVersionCreateDTO } from '@/backend/library/api';
 import { useVersionCreate } from '@/backend/library/useVersionCreate';
-import Checkbox from '@/components/ui/Checkbox';
+import { Checkbox, TextArea, TextInput } from '@/components/ui/Input';
 import { ModalForm } from '@/components/ui/Modal';
-import TextArea from '@/components/ui/TextArea';
-import TextInput from '@/components/ui/TextInput';
 import { IVersionInfo, LibraryItemID, VersionID } from '@/models/library';
 import { nextVersion } from '@/models/libraryAPI';
 import { ConstituentaID } from '@/models/rsform';

rsconcept/frontend/src/dialogs/DlgCstTemplate/DlgCstTemplate.tsx

@@ -2,13 +2,12 @@
 
 import clsx from 'clsx';
 import { Suspense, useEffect, useState } from 'react';
-import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import { ICstCreateDTO } from '@/backend/rsform/api';
 import { useRSForm } from '@/backend/rsform/useRSForm';
 import Loader from '@/components/ui/Loader';
 import { ModalForm } from '@/components/ui/Modal';
-import TabLabel from '@/components/ui/TabLabel';
+import { TabLabel, TabList, TabPanel, Tabs } from '@/components/ui/Tabs';
 import FormCreateCst from '@/dialogs/DlgCreateCst/FormCreateCst';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscellaneous';

rsconcept/frontend/src/dialogs/DlgCstTemplate/TabArguments.tsx

@@ -7,9 +7,9 @@ import { useEffect, useState } from 'react';
 import { IconAccept, IconRemove, IconReset } from '@/components/Icons';
 import RSInput from '@/components/RSInput';
 import PickConstituenta from '@/components/select/PickConstituenta';
+import { MiniButton } from '@/components/ui/Control';
 import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
-import MiniButton from '@/components/ui/MiniButton';
+import { NoData } from '@/components/ui/View';
-import NoData from '@/components/ui/NoData';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { IArgumentValue } from '@/models/rslang';
 import { APP_COLORS } from '@/styling/color';

rsconcept/frontend/src/dialogs/DlgCstTemplate/TabTemplate.tsx

@@ -5,8 +5,7 @@ import { Dispatch, useEffect, useState } from 'react';
 import { useTemplatesSuspense } from '@/backend/library/useTemplates';
 import RSInput from '@/components/RSInput';
 import PickConstituenta from '@/components/select/PickConstituenta';
-import SelectSingle from '@/components/ui/SelectSingle';
+import { SelectSingle, TextArea } from '@/components/ui/Input';
-import TextArea from '@/components/ui/TextArea';
 import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
 import { applyFilterCategory } from '@/models/rsformAPI';
 

rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import Checkbox from '@/components/ui/Checkbox';
+import { Checkbox } from '@/components/ui/Input';
 import { ModalForm } from '@/components/ui/Modal';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';

rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx

@@ -3,9 +3,8 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import Checkbox from '@/components/ui/Checkbox';
+import { Checkbox, TextInput } from '@/components/ui/Input';
 import { ModalForm } from '@/components/ui/Modal';
-import TextInput from '@/components/ui/TextInput';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IOperation, OperationID } from '@/models/oss';
 import { useDialogsStore } from '@/stores/dialogs';

rsconcept/frontend/src/dialogs/DlgEditEditors/DlgEditEditors.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react';
 import { useUsers } from '@/backend/users/useUsers';
 import { IconRemove } from '@/components/Icons';
 import SelectUser from '@/components/select/SelectUser';
-import Label from '@/components/ui/Label';
+import { MiniButton } from '@/components/ui/Control';
-import MiniButton from '@/components/ui/MiniButton';
+import { Label } from '@/components/ui/Input';
 import { ModalForm } from '@/components/ui/Modal';
 import { UserID } from '@/models/user';
 import { useDialogsStore } from '@/stores/dialogs';

rsconcept/frontend/src/dialogs/DlgEditEditors/TableUsers.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { IconRemove } from '@/components/Icons';
+import { MiniButton } from '@/components/ui/Control';
 import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
-import MiniButton from '@/components/ui/MiniButton';
 import { IUserInfo, UserID } from '@/models/user';
 
 interface TableUsersProps {

rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx

@@ -2,12 +2,11 @@
 
 import clsx from 'clsx';
 import { useCallback, useEffect, useState } from 'react';
-import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import { IOperationUpdateDTO } from '@/backend/oss/api';
 import { useRSForms } from '@/backend/rsform/useRSForms';
 import { ModalForm } from '@/components/ui/Modal';
-import TabLabel from '@/components/ui/TabLabel';
+import { TabLabel, TabList, TabPanel, Tabs } from '@/components/ui/Tabs';
 import { LibraryItemID } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
 import { ICstSubstitute, IOperation, IOperationSchema, OperationID, OperationType } from '@/models/oss';

rsconcept/frontend/src/dialogs/DlgEditOperation/TabArguments.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import PickMultiOperation from '@/components/select/PickMultiOperation';
-import FlexColumn from '@/components/ui/FlexColumn';
+import { FlexColumn } from '@/components/ui/Container';
-import Label from '@/components/ui/Label';
+import { Label } from '@/components/ui/Input';
 import { IOperationSchema, OperationID } from '@/models/oss';
 
 interface TabArgumentsProps {

rsconcept/frontend/src/dialogs/DlgEditOperation/TabOperation.tsx

@@ -1,5 +1,4 @@
-import TextArea from '@/components/ui/TextArea';
+import { TextArea, TextInput } from '@/components/ui/Input';
-import TextInput from '@/components/ui/TextInput';
 
 interface TabOperationProps {
   alias: string;

rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx

@@ -1,5 +1,5 @@
 import PickSubstitutions from '@/components/select/PickSubstitutions';
-import TextArea from '@/components/ui/TextArea';
+import { TextArea } from '@/components/ui/Input';
 import { ICstSubstitute } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { APP_COLORS } from '@/styling/color';

rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx

@@ -2,10 +2,9 @@
 
 import clsx from 'clsx';
 import { useState } from 'react';
-import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import { ModalForm } from '@/components/ui/Modal';
-import TabLabel from '@/components/ui/TabLabel';
+import { TabLabel, TabList, TabPanel, Tabs } from '@/components/ui/Tabs';
 import { ReferenceType } from '@/models/language';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IRSForm } from '@/models/rsform';