refactor: migrate form components to a new structure and update imports

- Renamed and exported ButtonGroup as a standalone component.
- Removed deprecated FormErrorMessage and FormLegend components.
- Introduced new form components: Caption, Checkbox, ControlGroup, Fieldset, Input, Label, Legend, Message, Option, Radio, Select, Separator, Textarea.
- Updated imports across various components to use the new form structure.
- Adjusted styling and class names for consistency.
- Refactored error handling to utilize the new Message component.

Author: iatopilskii

packages/ui/src/components/button-group.tsx

@@ -10,7 +10,13 @@ interface ButtonGroupProps {
   verticalAlign?: string
 }
 
-function Root({ children, direction = 'horizontal', className, spacing = '4', verticalAlign }: ButtonGroupProps) {
+export function ButtonGroup({
+  children,
+  direction = 'horizontal',
+  className,
+  spacing = '4',
+  verticalAlign
+}: ButtonGroupProps) {
   const gapClass = `gap-${spacing}`
   const verticalAlignClass = verticalAlign ? `items-${verticalAlign}` : ''
 
@@ -20,5 +26,3 @@ function Root({ children, direction = 'horizontal', className, spacing = '4', ve
     </div>
   )
 }
-
-export { Root }

packages/ui/src/components/filters/filter-trigger.tsx

@@ -1,6 +1,6 @@
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 import { TFunction } from 'i18next'
 
 import { FilterOption, SortOption } from './types'

packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
 import { Calendar as UICalendar, type CalendarDateRange } from '@components/calendar'
-import { Input } from '@components/input'
+import { Input } from '@components/form'
 import { cn } from '@utils/cn'
 
 import { FilterValue } from '../../types'

packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx

@@ -1,6 +1,6 @@
 import { DropdownMenuCheckboxItem } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 
 import { CheckboxFilterOption, FilterValue } from '../../types'
 import { UseFiltersReturn } from '../../use-filters'

packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 
 import { FilterValue } from '../../types'
 import { UseFiltersReturn } from '../../use-filters'

packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 
 import { DropdownMenuItem } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 
 import { FilterValue } from '../../types'
 import { UseFiltersReturn } from '../../use-filters'

packages/ui/src/components/filters/filters-bar/sorts.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@components/dropdown-menu'
+import { Input } from '@components/form'
 import { Icon } from '@components/icon'
-import { Input } from '@components/input'
 import { closestCenter, DndContext } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'

packages/ui/src/components/form-error-message.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react'
+
+import { Text } from '@/components'
+import { cn } from '@utils/cn'
+
+interface CaptionProps extends PropsWithChildren {
+  className?: string
+}
+
+/**
+ * Caption component that renders supplementary text below form inputs.
+ * Used to provide additional context or hints for form fields.
+ *
+ * @param {CaptionProps} props - The properties for the Caption component.
+ * @param {React.ReactNode} props.children - The content to be displayed as the caption text.
+ * @param {string} [props.className] - Optional additional class names for styling.
+ * @returns {JSX.Element} The rendered Caption component.
+ */
+export function Caption({ children, className }: CaptionProps) {
+  return (
+    <Text className={cn('text-foreground-4 mt-1 leading-snug', className)} size={2}>
+      {children}
+    </Text>
+  )
+}